{"id":227,"date":"2026-04-14T10:50:11","date_gmt":"2026-04-14T10:50:11","guid":{"rendered":"https:\/\/wp.als081001te.hemsida.eu\/?page_id=227"},"modified":"2026-06-08T09:33:59","modified_gmt":"2026-06-08T09:33:59","slug":"paolo","status":"publish","type":"page","link":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/paolo\/","title":{"rendered":"Paolo"},"content":{"rendered":"\n

Ideer och syfte<\/strong><\/h2>\n\n\n\n

Min ide med detta projektet var att f\u00e5 till en fin hemsida som var b\u00e5de mobilv\u00e4nlig och enkel att anv\u00e4nda som n\u00e5dde de krav Paolo hade p\u00e5 sin webbplats. Detta g\u00f6r jag f\u00f6r att den ska kunna anv\u00e4ndas p\u00e5 b\u00e5de telefon och dator s\u00e5 att man snabbt och enkelt kan f\u00e5 reda p\u00e5 saker om Paolo och de projekt han har gjort. Hemsidan \u00e4r till f\u00f6r att folk ska f\u00e5 reda p\u00e5 mer om vad Paolo jobbat och kan. Det \u00e4r \u00e4ven s\u00e5 att man ska kunna l\u00e4sa om det projekt och som Paolo har gjort och det som han kan hj\u00e4lpa till med.  <\/p>\n\n\n\n

Kraven som m\u00e5ste finnas i detta projekt \u00e4r att den ska vara mobilv\u00e4nlig och tydlig och enkel att anv\u00e4nda. Sedan s\u00e5 borde den ha ett enkelt och tydligt s\u00e4tt att navigera mellan sidorna. Jag skulle \u00e4ven vilja att det st\u00e4llet d\u00e4r man har projekten och f\u00f6rklaringarna f\u00f6r de olika teknikerna ska vara snyggare och inte se lika simpelt ut.   <\/p>\n\n\n\n

Planering <\/strong><\/h2>\n\n\n\n

Jag kommer att b\u00f6rja med att med hj\u00e4lp av Wireframes rita upp ett skiss. Detta kommer jag att g\u00f6ra f\u00f6r att f\u00e5 en k\u00e4nsla av hur slutprojektet kommer att se ut och vara uppbyggt. N\u00e4r jag har gjort denna skiss s\u00e5 kommer jag att g\u00e5 in p\u00e5 paolos webb och se hur den nu \u00e4r uppbyggd och vad f\u00f6r saker jag kommer beh\u00f6va \u00e4ndra p\u00e5 och hur jag ska kunna f\u00f6rb\u00e4ttra dessa saker. Efter detta ska jag anv\u00e4nda mig av ramverk f\u00f6r att f\u00e5 den s\u00e5 mobilv\u00e4nlig som m\u00f6jligt. Jag ska \u00e4ven f\u00f6rs\u00f6ka f\u00e5 in n\u00e5got javascript p\u00e5 min paolos webb. N\u00e4r jag har gjort klart min kod s\u00e5 kommer jag utifr\u00e5n min checklista jag gjorde tidigare i kursen f\u00f6r att kolla de fel som \u00e4r p\u00e5 min kod och fixa om det \u00e4r n\u00e5got annat fel. <\/p>\n\n\n\n

Genomf\u00f6rande<\/strong><\/h2>\n\n\n\n

N\u00e4r jag b\u00f6rjade jobba s\u00e5 gjorde jag denna skiss p\u00e5 hur jag t\u00e4nkte att min webbplats skulle se ut och vara uppbyggd. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

N\u00e4r jag hade gjort detta s\u00e5 b\u00f6rjade jag att kolla p\u00e5 den paolos webb jag hade och vad det var jag skulle beh\u00f6va \u00e4ndra f\u00f6r att f\u00e5 att den blev mobilv\u00e4nlig och inte se ut s\u00e5 som den gjorde innan vilket var detta. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

N\u00e4r jag hade gjort det s\u00e5 best\u00e4mde jag mig f\u00f6r att anv\u00e4nda mig av Materialize f\u00f6r att g\u00f6ra den mobilv\u00e4nlig. N\u00e4r jag gjorde detta s\u00e5 b\u00f6rjade jag med att ta bort all CSS f\u00f6r att sedan anv\u00e4nda Marerialize f\u00f6r att f\u00e5 den att se hyfsat lik ut som den koden jag hade innan sedan la jag till lite CSS f\u00f6r att f\u00e5 den att se hyfsat bra ut men men i b\u00f6rjan s\u00e5 s\u00e5g den hyfsat konstig ut. Ett problem jag st\u00f6tte p\u00e5 var att navbaren s\u00e5g ut s\u00e5 h\u00e4r till en b\u00f6rjan. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Detta tog l\u00e5ng tid att fixa och jag st\u00f6tte p\u00e5 flera nya problem  men till slut fick jag det att fungera. N\u00e4r jag v\u00e4l hade f\u00e5tt den f\u00f6rsta sidan att vara mobilv\u00e4nlig s\u00e5 var det n\u00e4stan bara att kopiera navbaren, foten och headern till de andra sidor och de blev ocks\u00e5 mobilv\u00e4nliga. I slut\u00e4ndan fick jag f\u00f6rsta sidan att se ut s\u00e5 h\u00e4r.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

N\u00e4r jag skulle jobba med Tekniker och Projekt s\u00e5 beh\u00f6vde jag fixa mina tabeller f\u00f6r att de s\u00e5g ut s\u00e5 h\u00e4r och var v\u00e4ldigt platt och fult. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

S\u00e5 jag in och \u00e4ndrade det s\u00e5 att det var som sm\u00e5 fyrkanter och rundade kanter f\u00f6r att den skulle bli snyggare. Sedan gjorde jag \u00e4ven s\u00e5 att n\u00e4r man hovrar \u00f6ver dem s\u00e5 poppar de ut. <\/p>\n\n\n\n

Det n\u00e4st jag fixade var att f\u00f6rs\u00f6ka f\u00e5 in ett Javascript. Detta tog r\u00e4tt s\u00e5 l\u00e5ng tid d\u00e5 jag st\u00f6tte p\u00e5 r\u00e4tt s\u00e5 mycket problem. Jag skulle f\u00f6rs\u00f6ka f\u00e5 in s\u00e5 att n\u00e4r man \u00e4r i telefonl\u00e4ge man f\u00e5r upp en hamburgermeny med de olika knapparna f\u00f6r att byta sida. Det f\u00f6rsta problem jag st\u00f6tte p\u00e5 var att n\u00e4r jag hade lagt in koden s\u00e5g den ut s\u00e5 h\u00e4r. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Detta problem hade jag l\u00e4nge och jag fattade inte vad det var f\u00f6r fel. Det jag fick g\u00f6ra f\u00f6r att den skulle funka var att ta bort all den koden jag lagt in och sedan l\u00e4gga tillbaka den igen. <\/p>\n\n\n\n

Testning och Kvalitetss\u00e4kring<\/strong><\/h2>\n\n\n\n

N\u00e4r jag var klar med detta s\u00e5 gick jag igenom min checklista och det f\u00f6rsta jag gjorde var att validera mina koder och d\u00e5 s\u00e5g det ut s\u00e5 h\u00e4r.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

N\u00e4r jag hade validerat alla koder och sett till att alla blev gr\u00f6na s\u00e5 kollade jag om min kod var mobilv\u00e4nlig genom att anv\u00e4nda Bing och d\u00e5 gav de dessa resultat.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

N\u00e4r jag hade gjort detta s\u00e5 kollade jag upp prestandan och d\u00e5 gav den hyfsat d\u00e5ligt p\u00e5 just d\u00e4r s\u00e5 jag f\u00f6rminskade bilderna och efter det fick jag detta resultat.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

 Det sista jag kollade var hur tillg\u00e4ngligheten var och d\u00e5 fick jag detta resultat.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Resultat<\/strong><\/h2>\n\n\n\n

Jag blev r\u00e4tt s\u00e5 n\u00f6jd med resultatet. Det jag blev mest n\u00f6jd med var nog \u00e4nd\u00e5 hur  jag fick hamburgare menyn att fungera. Sedan var jag ocks\u00e5 hyfsat n\u00f6jd med hur mina tabeller blev s\u00e5 att de inte s\u00e5g ut s\u00e5 som de gjorde innan. <\/p>\n\n\n\n

Jag tycker att mycket av det jag gjorde gick bra, det var vissa delar som kanske tog lite l\u00e5ng tid att fixa som hamburgare menyn och att f\u00e5 den mobilv\u00e4nlig fr\u00e5n f\u00f6rsta b\u00f6rjan. Jag l\u00e4rde mig att anv\u00e4nda Materialize mycket b\u00e4ttre nu n\u00e4r jag arbetade med det under en l\u00e4ngre tid och s\u00e5 l\u00e4rde jag mig \u00e4ven hur man f\u00e5r in ett Javascript i en kod. Efter att jag har gjort detta har jag f\u00e5tt lite av en k\u00e4nsla hur det \u00e4r att genomf\u00f6ra ett projekt och det tror jag man har anv\u00e4ndning av n\u00e4r man g\u00f6r gymnasiearbete. <\/p>\n\n\n\n

<\/p>\n\n\n\n

L\u00e4nk: https:\/\/als081001te.hemsida.eu\/Paolo\/index.html<\/a> <\/p>\n\n\n\n

<\/p>\n\n\n\n

Projekt 03<\/h2>\n\n\n\n

<\/p>\n\n\n\n

M\u00e5l<\/strong><\/h2>\n\n\n\n

Det jag ska g\u00f6ra nu \u00e4r att f\u00e5 Paolos webb till en one pager. Detta g\u00f6t jag f\u00f6r att allting ska vara samlat p\u00e5 en page ist\u00e4llet f\u00f6r flera olika. Projektet \u00e4r till s\u00e5 att Paolo kan visa upp det han kan och har l\u00e4rt sig om.<\/p>\n\n\n\n

I detta projektet kommer jag g\u00f6ra om den senaste paolos webb s\u00e5 att den blir en one pager. Jag ska g\u00f6ra s\u00e5 att ist\u00e4llet f\u00f6r att man byter sida n\u00e4r man trycker p\u00e5 knapparna i navbaren ska man ta sig till den delen man vill komma till. Det viktigaste med detta \u00e4r att f\u00f6rs\u00f6ka f\u00e5 hela grejen med att ta sig till den delen man vill att funka. <\/p>\n\n\n\n

Min webbplats ska vara en one pager som \u00e4r mobilv\u00e4nlig.<\/p>\n\n\n\n

Den b\u00f6r ta sig till den delen man vill om man trycker p\u00e5 den i navbaren.<\/p>\n\n\n\n

Jag hade \u00e4ven velat att varje page ska ha olika bakgrund s\u00e5 man vet vilken man \u00e4r p\u00e5<\/p>\n\n\n\n

Planering<\/strong> <\/h2>\n\n\n\n

Jag t\u00e4nker g\u00f6ra en skiss som jag ska utg\u00e5 ifr\u00e5n. Sedan ska jag planera hur jag har t\u00e4nkt att jobba p\u00e5 de lektioner jag har. N\u00e4r jag \u00e4r klar med all planering innan s\u00e5 kommer jag b\u00f6rja koda och f\u00e5 den att funka innan jag g\u00f6r alla n\u00f6dv\u00e4ndiga tester. <\/p>\n\n\n\n

N\u00e4r det kommer till tid s\u00e5 har jag bara tre lektioner kvar att jobba. Under dessa lektioner har jag t\u00e4nkt att jag kodar p\u00e5 de tv\u00e5 f\u00f6rsta f\u00f6r att f\u00f6rs\u00f6ka f\u00e5 den att funka och sedan skriver klart, testar och redovisar p\u00e5 den sista. Jag kommer f\u00f6rmodligen ocks\u00e5 jobba lite utanf\u00f6r skolan om jag k\u00e4nner att jag inte hinner klart. <\/p>\n\n\n\n

Min skiss: <\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Genomf\u00f6rande <\/strong><\/h2>\n\n\n\n

N\u00e4r jag b\u00f6rjade att jobba s\u00e5 var mitt m\u00e5l  att f\u00e5 allting att vara p\u00e5 en sida och s\u00e5 att n\u00e4r jag tryckte p\u00e5 knapparna skulle den ta mig till den delen av sidan. Jag b\u00f6rjade med att f\u00f6ra \u00f6ver alla koder till en sida och att f\u00e5 allting att funka fr\u00e5n b\u00f6rjan var hyfsat enkelt. N\u00e4r det kommer till min planering gick det r\u00e4tt mycket snabbare att fixa sidan \u00e4n vad jag hade t\u00e4nkt mig s\u00e5 planeringen \u00e4ndrades snabbt. N\u00e4r jag gjorde denna uppgift fortsatte jag att anv\u00e4nda Meterializer d\u00e5 jag tyckte att det \u00e4r bra och enklast att anv\u00e4nda mig av. <\/p>\n\n\n\n

Testing och kvalite <\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

 <\/strong>Detta blev mina testresultat som innan s\u00e5 var min prestanda v\u00e4ldigt l\u00e5g men det var inte n\u00e5got jag kan g\u00f6ra \u00e5t saken annars s\u00e5 var det inte annat \u00e4n sm\u00e5fel som jag beh\u00f6vde fixa med det andra. <\/p>\n\n\n\n

Problem och l\u00f6sning<\/strong><\/h2>\n\n\n\n

Ett problem jag st\u00f6tte p\u00e5 var att  f\u00e5 navbaren att koppla av varje rubrik s\u00e5 att den skulle hoppa dit jag ville n\u00e4r man tryckte p\u00e5 knapparna. Detta l\u00f6ste jag genom att  genom att ge varje rubrik ett ID och sedan s\u00e4tta ett hashtag med det IDet  navbaren d\u00e4r det tidigare varit en l\u00e4nk s\u00e5 att den skulle hoppa dit jag ville.<\/p>\n\n\n\n

Ett annat problem jag st\u00f6tte p\u00e5 var att \u00e4ndra f\u00e4rg p\u00e5 korten f\u00f6r att fixa detta s\u00e5 satte jag en class med den f\u00e4rgen jag  ville ha med hj\u00e4lp av Meterializer f\u00e4rgerna. <\/p>\n\n\n\n

Resultat<\/strong><\/h2>\n\n\n\n

Det jag blev mest n\u00f6jd med var att jag fick med allt det jag ville ha med. Jag visste f\u00f6rst inte om jag skulle hinna \u00e4ndra bakgrundsf\u00e4rgerna p\u00e5 korten men jag hann b\u00e5de \u00e4ndra det och g\u00f6ra s\u00e5 att b\u00e5de om sidan och hemsidan hade ett kort runt sig. <\/p>\n\n\n\n

Utv\u00e4rdering och reflektion<\/strong><\/h2>\n\n\n\n

Jag tycker att sj\u00e4lvaste uppgiften gick bra, det som m\u00f6jligen kunnat g\u00e5tt lite b\u00e4ttre \u00e4r att jag inte blev helt n\u00f6jd med de f\u00e4rger jag valde p\u00e5 sidan och hur de ser ut tillsammans. N\u00e5got som jag gjorde denna g\u00e5ngen som jag l\u00e4rde mig av var att g\u00f6ra en planering \u00e4ven fast jag i slut\u00e4ndan inte helt anv\u00e4nde mig av den. Detta \u00e4r n\u00e5got jag tror \u00e4r bra att ta med sig och anv\u00e4nda sig av n\u00e4r man jobbar med gymnasiearbetet s\u00e5 att man vet om man ligger i fas eller inte.      <\/p>\n","protected":false},"excerpt":{"rendered":"

Ideer och syfte Min ide med detta projektet var att f\u00e5 till en fin hemsida som var b\u00e5de mobilv\u00e4nlig och enkel att anv\u00e4nda som n\u00e5dde de krav Paolo hade p\u00e5 sin webbplats. Detta g\u00f6r jag f\u00f6r att den ska kunna anv\u00e4ndas p\u00e5 b\u00e5de telefon och dator s\u00e5 att man snabbt och enkelt kan f\u00e5 reda […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-227","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":10,"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/227\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/227\/revisions\/275"}],"wp:attachment":[{"href":"https:\/\/wp.als081001te.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}