{"id":123,"date":"2026-05-05T18:25:03","date_gmt":"2026-05-05T18:25:03","guid":{"rendered":"https:\/\/wp.als080717od.hemsida.eu\/?page_id=123"},"modified":"2026-05-05T18:47:38","modified_gmt":"2026-05-05T18:47:38","slug":"projekt02","status":"publish","type":"page","link":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/projekt02\/","title":{"rendered":"Projekt02"},"content":{"rendered":"\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"columns-3 wp-block-post-template is-layout-grid wp-container-core-post-template-is-layout-7e964c02 wp-block-post-template-is-layout-grid\"><li class=\"wp-block-post post-241 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/28\/projekt-02-utvardering\/\" target=\"_self\" >Projekt 02 &#8211; Utv\u00e4rdering<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Under projektet har jag l\u00e4rt mig ganska mycket, speciellt att utnyttja verktyg f\u00f6r att f\u00f6rb\u00e4ttra sidan inom olika delar s\u00e5som prestanda, bild prestanda och tillg\u00e4nglighet. Jag har l\u00e4rt mig mer om semantisk HTML, CSS och litegrann av Javascript. Jag har l\u00e4rt mig hur viktigt det \u00e4r med en bra planering och struktur f\u00f6r lite st\u00f6rre&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-28T13:44:45+00:00\">May 28, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-232 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/28\/projekt-02-tillganglighet\/\" target=\"_self\" >Projekt 02 &#8211; Tillg\u00e4nglighet<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Jag kommer att anv\u00e4nda ett verktyg fr\u00e5n wave.webaim.org f\u00f6r att testa tillg\u00e4ngligheten p\u00e5 sidan. Tillg\u00e4nglighet index.html (hem) Alert p\u00e5grund av att sidans huvudinneh\u00e5ll har en Kontakta mig knapp som leder till om sidan samtidigt som det finns en l\u00e4nk till om sidan i navbar. Tillg\u00e4nglighet tekniker.html Liknande fel som f\u00f6rra. Problemet \u00e4r att sidans namn&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-28T13:36:44+00:00\">May 28, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-225 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/27\/projekt-02-prestanda-efter-optimering\/\" target=\"_self\" >Projekt 02 &#8211; Prestanda efter optimering<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Nu har jag konverterat alla bilder till AVIF format. Det gjorde stor skillnad i b\u00e5de storlek p\u00e5 bilerna samt resultat i prestanda. Prestanda index.html (hem) Prestanda tekniker.html Helt maxad trots 4 bilder. Prestanda projekt.html 100% igen. Prestanda om.html (om sida) 100% prestanda \u00e4ven h\u00e4r, nu finns det inte riktigt n\u00e5got mer att g\u00f6ra. <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-27T14:42:04+00:00\">May 27, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-214 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/27\/projekt-02-prestanda\/\" target=\"_self\" >Projekt 02 &#8211; Prestanda<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">P\u00e5 detta inl\u00e4gget testar jag prestandan p\u00e5 p02 innan jag har optimerat den. Prestanda index.html (hem) Prestandan \u00e4r v\u00e4ldigt bra f\u00f6r att inte ha blivit optimerad Prestanda tekniker.html V\u00e4ldigt bra h\u00e4r ocks\u00e5 trots flera bilder Prestanda projekt.html V\u00e4ldigt bra h\u00e4r ocks\u00e5 Prestanda p\u00e5 om.html (om sida) 100 i prestanda, finns inte direkt n\u00e5got att g\u00f6ra&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-27T13:53:06+00:00\">May 27, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-204 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/26\/projekt-02-validering-av-html-css\/\" target=\"_self\" >Projekt 02 &#8211; Validering av HTML &amp; CSS<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">I detta inl\u00e4gget ska jag validera HTML och \u00e4ven CSS koden f\u00f6r att visa att den \u00e4r korrekt uppbyggd. F\u00f6r HTML anv\u00e4nder jag validator.w3.org och f\u00f6r CSS jigsaw.w3.org Validering index.html Validering gav inga varningar eller fel p\u00e5 index.html Validering av tekniker.html Allt funkade r\u00e4tt h\u00e4r ocks\u00e5. Validering av projekt.html Som tur \u00e4r allt r\u00e4tt h\u00e4r&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-26T14:35:44+00:00\">May 26, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-186 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/26\/projekt-02-javascript\/\" target=\"_self\" >Projekt 02 &#8211; Javascript<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Med denna kod matchar jag p\u00e5 alla list element i navbar. Javascriptet kollar vilken sida som \u00e4r aktiv och j\u00e4mf\u00f6r med l\u00e4nkarna i navbar. N\u00e4r den f\u00e5r en tr\u00e4ff s\u00e4tter den class=&#8221;active&#8221; i den html kod som den l\u00e4ser in f\u00f6r sidan man \u00e4r p\u00e5. Detta \u00e4r ett skalbart alternativ till att s\u00e4tta klassen p\u00e5&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-26T12:01:49+00:00\">May 26, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-171 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/25\/projekt-02-css\/\" target=\"_self\" >Projekt 02 &#8211; CSS<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">H\u00e4r ska jag g\u00e5 igenom den CSS som anv\u00e4nds p\u00e5 sidan. H\u00e4r \u00e4r den f\u00f6rsta delen av CSS: H\u00e4r st\u00e4ller jag in att alla element har noll i marginal och 0 i padding fr\u00e5n b\u00f6rjan. Detta g\u00f6r att det blir l\u00e4ttare att s\u00e4tta eller ber\u00e4kna marginaler och padding ist\u00e4llet f\u00f6r att beh\u00f6va ta h\u00e4nsyn till&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-25T15:33:40+00:00\">May 25, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-163 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/23\/projekt-02-html\/\" target=\"_self\" >Projekt 02 &#8211; HTML<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Index html H\u00e4r kommer jag att beskriva viktiga delar av HTML koden exempelvis hur jag har gjort sidan anpassad f\u00f6r responsiv design, tillg\u00e4nglighet och prestanda. I head har jag f\u00f6ljande rad: Den h\u00e4r raden justerar viewport, den synliga ytan, till den bredd som enhetens sk\u00e4rm kan hantera. Den s\u00e4tter ocks\u00e5 zoomniv\u00e5n till 100%, vilket f\u00f6rhindrar&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-23T13:18:28+00:00\">May 23, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-160 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/23\/projekt-02-struktur\/\" target=\"_self\" >Projekt 02 &#8211; Struktur<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">I projekt 02, ska vi anv\u00e4nda en liknande struktur och f\u00e4rgschema som i projekt 01. Jag har valt att \u00e4ndra f\u00e4rgerna lite f\u00f6r att skapa b\u00e4ttre kontrast f\u00f6r tillg\u00e4nglighet, samtidigt som det g\u00f6r den lite snyggare. Jag har ocks\u00e5 flyttat menyn till h\u00f6ger sida, och valt ett annat typsnitt. Bilden nedan visar hur jag t\u00e4nker&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-23T11:07:50+00:00\">May 23, 2026<\/time><\/div><\/div>\n\n<\/li><li class=\"wp-block-post post-133 post type-post status-publish format-standard hentry category-projekt02\">\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/wp.als080717od.hemsida.eu\/index.php\/2026\/05\/05\/projektplan\/\" target=\"_self\" >Projektplan P02<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Syftet med detta projekt \u00e4r att vidareutveckla den existerande webbsidan med nya tekniker som jag har l\u00e4rt mig. Detta kommer att visa potentiella kunder att Paolo kan erbjuda ytterligare tj\u00e4nster. M\u00e5lgruppen \u00e4r sm\u00e5f\u00f6retag och f\u00f6reningar som beh\u00f6ver hj\u00e4lp med enklare former av webbsidor. Den nya sidans struktur kommer se ut enligt wireframe nedan. Genom att&hellip; <\/p><\/div>\n\n<div class=\"wp-block-post-date\"><time datetime=\"2026-05-05T18:48:34+00:00\">May 5, 2026<\/time><\/div><\/div>\n\n<\/li><\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-123","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":2,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/123\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/pages\/123\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/wp.als080717od.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}