4. Moment04 - Bygga en större webbsida

I detta momentet så kommer vi kika på hur en webbsida kan byggas upp om den innehåller flera element. Vi kommer också kolla på några exempel på sidor och hur dessa är uppbyggda.

4.1 Momentets mål

I varje moment så jobbar vi mot ett eller flera mål som skolverket har satt upp i varje kurs.

4.1.1 Centralt innehåll

• Processen för ett webbutvecklingsprojekt med målsättningar, planering, specifikation av struktur och design, kodning, optimering, testning, dokumentation och uppföljning.
• Märkspråk och deras inbördes roller, syntax och semantik – där det huvudsakliga innehållet är standarderna för HTML och CSS samt orientering om Ecmaskript och dokumentobjektsmodellen (DOM).
• Teckenkodning, begrepp, standarder och handhavande.
• Bilder och media med alternativa format, optimering och tillgänglighet.
• Riktlinjer för god praxis inom webbutveckling.
• Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
• Terminologi inom området webbutveckling.

4.2 Processen kring ett webbprojekt

Processen att skapa en webbsida eller ett webbprojekt är väldigt intressant. Ofta så är projekten lite större än enda sida så det gäller att få koll på både utseendet, vilket innehåll som skall finnas, hur det skall förmedlas och vilka tekniker som skall användas.

Jag går väldigt kort igenom grunden i en process, vi kommer återkomma till detta senare. I exemplen nedan kommer jag visa med kursolle version 1 som exempel.

4.2.1 Skiss

Det finns olika tekniker för att skissa upp en ny hemsida. Att börja med en enkel skiss för hur du har tänkt att sidan skall se ut räcker ofta en bit för enklare webbsidor. Hur som helst är det en bra start. Det är alltid intressant att återkomma till en tidig skiss för att se om resultatet blev som vi från början tänkte.

Även om skissen kan verka enkel så är det en start och något som vi kan förhålla oss till när vi börjar bygga strukturen kring en webbsida.

Fokus här är att få en översiktlig bild av sidan. Bygger man en site, dvs flera sidor, så går det enkelt att rita vidare hur detta hänger ihop.

4.2.2 Wire Frame

En Wire Frame, eller trådskiss, är en teknik som används för att göra en tydligare bild på hur hemsidan skall se ut, detta kan vi enkelt göra med verktyget på diagrams.net.

Tanken med en genomarbetad trådskiss är att det är något att hela tiden falla tillbaka på och tydligt se de stora strukturerna för webbsidan.

Fokuset i en trådskiss ligger på kodstrukturen, dvs vilka html-element som bygger upp sidan.

Sedan kommer två olika designverktyg som fokuserar på utseende och funktionalitet mer än hur själva koden är uppbyggd.

4.2.3 Mockup

Mockup skapar en visuell representation av layout, färger, typsnitt och andra grafiska element, så att kunden kan få en känsla av det visuella utseendet på en webbplats.
Mockups används ofta i de tidiga skeden av designprocessen för att kommunicera designidéer och för att ta in feedback av kunden.

4.2.4 Prototyp

En prototyp är en interaktiv modell av en produkt eller en del av en produkt. Den är oftast klickbar eller användbar på något sätt och syftar till att visa hur användare kommer att interagera med produkten.
Prototyper kan vara enkla eller komplexa, beroende på syftet. En enkel prototyp kan vara ett klickbart gränssnitt, medan en komplex prototyp kan innehålla delvis eller full funktionalitet av den slutliga produkten.
Prototyper används vanligtvis senare i designprocessen för att testa användbarheten, de hjälper till att förstå hur användare kommer att interagera med produkten i praktiken.

I denna kurs kommer vi inte kika på prototyper, det gör de elever som läser gränssnittsdesign.

4.2.5 Kursolle v.1

Här följer en exempelbild på hur kursolle v.1 såg ut.

4.2.6 Hur byggs andra sidor upp?

Som du märkte i bilderna ovan så bygger alla webbsidor på boxar (inte att blanda ihop med boxmodellen, det är något annat) och dessa boxar skall på något sätt skapas i html-koden. Tidigare så löste man detta endast med <div>-element som fick olika egenskaper. Vid övergången till HTML5 så skapades ett gäng nya strukturtaggar så att det skulle vara enklare och tydligare att bygga upp hemsidorna.

Om vi skapar en helt ny webbsida så använder vi teknikerna ovan för att få den välstrukturerad. Det är också kul att försöka hitta de boxar som bygger upp en hemsida vi tittar på. Hur tror du att nedanstående sidor är uppbyggda?

alingsastidning.se, 2020-09-08

skolverket.se/, 2020-09-08

Google Classroom, 2020-09-08

När vi tittar på strukturen på en hemsida så finns det olika tekniker att ta hänsyn till. Även om det inte syns tydligt så består alla hemsidor av ett antal olika boxar/rutor som bygger upp grundstrukturen på hemsidan. Sedan är det innehållet och utseendet som gemensamt gör att hemsidan ser ut som den gör.

Om vi kikar på de tre webbsidorna ovan i inspekteraren, hur är de då uppbyggda? Bygger de fråmst på HTML5 (semantiska element), HTML4.01 (<div>-element) eller är det en blandning?

4.3 HTML5 och semantiska element

Vi skall kika lite närmre på de semantiska HTML5-elementen och få en bättre förståelse varför dessa ibland är att föredra. Vi kommer inte ifrån <div>-elementen helt även om vi skulle vilja men det är bra att få med sig hela bakgrunden. <div>-elementen och mängder av klasser kommer återkomma senare i kursen när vi kikar på ramverk, så även denna tekniken har sin plats i webbutvecklingen.

4.3.1 Varför använda semantiska HTML-element?

Vi skall stifta bekantskap med en ny person som bygger guider om webbutveckling på Youtube. Vi skall börja med att se en video där han går igenom varför sematisk HTML finns och varför det är bra. Han visar också exempel på hur det kunde se ut, och fortfarande ser ut i många fall, innan de semantiska elementen kom. Första halvan av filmen handlar om detta, efter 9min40sek så visar han på hur han bygger om en webbsida från <div>-element till semantiska element. Detta tror jag egentligen inte att ni behöver göra, men är det någon som vill göra det för träningens skull så hittar du koden han använder via hans CodePen eller GitHub.

4.4 Att bygga en större webbsida

Vi skall fortsätta och kika på två filmer av Minim där han bygger en större webbsida som är en landing page för en fiktiv burgerrestaurang. Projektet är lagom stort och han visar användbara saker, däremot så är detta det projektet som avrundar hans grundkurs i hml/css så vissa saker som han visar kan kännas lite annorlunda än vad ni har gått igenom tidigare, men för de som gått igenom hela hans kurs så är det enklare. Det hindrar dock inte att ni skall klara av att genomföra uppgiften.

Han slänger också in ett javascript för att få till en smidig övergång mellan avsnitten i sidan. Sidan består av flera olika delar och detta kommer jag under kursen benämna som en onepager vilket innebär att olika delar som skulle kunna vara enskilda webbsior byggs på varandra och läggs i samma webbsida.

Material som kan behövas finns på GitHub.

Vi tar två djupa andetag och går sedan på film nr 2.

4.4.1 BurgerBase uppdelad i flera sidor

Som träning inför Projekt01 som följer på detta momentet så är det en bra övning att jobba vidare med BurgerBase. Webbsidan är just nu en onepager och din uppgift blir att dela upp denna i tre olika sidor där varje sida har samma header, nav och footer men sedan har varje sida sitt eget innehåll. Navigeringen skall då fungera mellan de olika sidorna.

Vill du bygga vidare och lägga till fler sidor, mer innehåll osv så går det bra.