Webbutveckling01 [weuweb01]

Moment03 - Fördjupning + Evas Frukt

Introduktion

Nu har du troligtvis fått lite ordning på grunderna i html och css och vi skall jobba vidare med dessa teknikerna men vi skall också börja fundera på hur vi bygger upp en sida. Att kunna skriva kod är en sak, men att bygga bra sidor av det är svårare.

I detta momentet så skall du få skapa en lite större webbsida med hjälp av Erik på webbkoda där du får använda de kunskaper som du har fått genom de tidigare arbetet. Det är nu du skall ta de små teknikerna och sätta samman till en färdig produkt.

Momentets mål

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

Centralt innehåll

  • Utvecklingsprocessen för ett webbtekniskt projekt. 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 5 (Hyper Text Markup Language) och CSS (Cascading Style Sheets) samt orientering om dokumentobjektsmodellen, DOM (Document Object Model) och Ecmaskript.
  • Teckenkodning. Orientering om ASCII (American Standard Code for Information Interchange), ISO-8859, Windows-1252 och Unicode.
  • Bilder och media med alternativa format, optimering och tillgänglighet.
  • Uppnående av interoperabilitet genom att följa standarder och testa på olika användaragenter.
  • Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
  • Bilder och media med alternativa format, optimering och tillgänglighet.
  • Nationella och internationella riktlinjer för god praxis inom webbutveckling.
  • Terminologi inom området webbutveckling.

Processen kring ett webbprojekt

Mockup av samlingssidan

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.

Det finns olika tekniker för att skissa upp en ny hemsida. När vi gjorde vårt gemensamma arbete med samlingssidan så gjorde vi en enkel skiss som blev grunden när vi skulle börja koda (skissen är från arbetet HT16). 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.


Wire Frame

Wire frame av kursolle

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å draw.io.

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.


Prototyp

En prototyp är en delvis fungerande applikation där beställaren/användaren/utvecklaren kan visa upp vilket flöde som finns i en applikation. Om jag klickar på denna knappen kommer jag till denna sidan. I denna kurs kommer vi inte kika på prototyper, det gör de elever som läser gränssnittsdesign.

Mockup

Mockup är den bildteknik som ligger närmast den färdiga produkten, här skall färger, fonter, exempeltexter, knappar formulär och allt annat publiceras så att du får en bra bild av hur slutprodukten skall se ut.

HTML5 strukturtaggar

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 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?


innovationsgymnasiet.se, 2016-10-19

kursolle.se, 2016-10-19

skolverket.se, 2016-10-19

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.

Arbete

Nu när du har lite grundläggande koll på boxarna så kan vi gå vidare till webbkoda.se och jobba med avsnittet html5 strukturtaggar (ganska långt ner på sidan). Läs igenom den texten som finns där innan du går över till CSS-avsnittet och kollar på filmen under avsnittet Layout där Erik går igenom strukturen på elementen, samt hur de kan/skall formateras.

Titta sedan på avsnittet om bakgrunder och bakgrundsbilder i css-avdelningen. Gör det exempel som Erik visar.

Uppgift

Efter du har följt videogenomgången så har du ett bra skal för en hemsida. Gör lite förändringar och lägg gärna in andra html-element som du har tränat på tidigare.
Innan du går vidare så är det bra att ha koll på dessa nya strukturtaggar. Du kan lägga till strukturtaggarna till din sida med bra-att-ha-koder eller så skapar du en startkod 2.0 med stuktur och css, allt för att förenkla ditt arbete senare i kursen.

Projekt

Nu har vi tränat på grunderna i HTML och CSS, det är dags att ge sig på ett projekt där vi utifrån en beställning skall se till att bygga en webbsida som innehåller de tekniker som vi redan har testat på.

Starta webbprojekt

Evas Frukt När vi bygger projekt så är det viktigt att få struktur på de olika filerna som skall finnas i projektet. Detta är särskit viktigt när vi jobbar med större projekt men det är ett utmärkt sätt att träna på vid mindre projekt också. Kursolle.se är idag uppbyggt på nästan 1500 filer, hade de filerna inte varit strukturerade på något bra sätt så hade det knappast varit möjligt att jobba med applikationen.

Du skall jobba med ett projekt i webbkoda och vi börjar med att kika på avsnittet om hur man startar webbprojekt. Där får du lära dig vilken struktur som bör finnas för ett projekt och även vilken startkod som behöver finnas. Detta är förberedelsen för det riktiga projektet Evas Frukt.

Evas Frukt

Evas Frukt Nu är du förberedd för ditt första projekt. På webbkoda.se så går Erik igenom en fiktiv beställning på en webbsida för företaget Evas Frukt. Du får se en bild på hur slutresultatet skall se ut och Erik guidar dig i fyra videoklipp igenom hela arbetet.

Projektet Evas Frukt.

Lycka till!

Frivilliga uppgifter

De två uppgifterna, HTML Strukturtaggar och Evas Frukt är fullt tillräckliga för att du skall ha grunderna med dig från detta moment. Men det brukar vara så att när eleverna känner att de börjar behärska HTML och CSS så uppstår en vilja att göra mer saker.

Det är fri lek när du har kommit så här långt, vill du testa vissa tekniker är du fri att göra det, vill du börja bygga en webbsida för något ändamål så kör på. Bygger du den bra och visar på kunskaper som jag kan väga in i ett betyg så länka dessa miniprojekt från din samlingssida.

Samlingssidan (nästa version)

Nu har du lärt dig lite nya saker och testat på lite tekniker som du kanske skulle vilja använda på din samlingssida, våga gärna bygga ut den med strukturtaggarna du lärde dig i första delen av detta momentet. Det kan vara kul att spara dina gamla samlingssidor för att se hur du utvecklas under kursens gång. Om du sparar den gamla samlingssidan som samlingssida_v1.html så kan du i slutet av kursen gå tillbaka och kika på olika versioner, det brukar vara kul att se utvecklingen. Våga också länka dessa till din samlingssida.
Du får inget sämre betyg för att dina sidor i kursen var mindre tekniskt avancerade, däremot kan du nå högre betyg genom att reflektera över dina framsteg.

Evas Frukt 2.0

Om du känner att du har bra koll på hur webbsidan för Evas Frukt fungerar så ge dig gärna på att snygga till den och göra den ännu bättre. Då tänker jag inte bara på att ändra lite färger i css-filen utan ge dig även på själva html-strukturen.

Redovisning

Lägg upp de projekt du har jobbat med på din domän och länka sedan från samlingssidan och det inlägg du skriver på din WordPress.
Skriv en kort utvärdering om hur momentet har fungerat, och vilka projekt du har arbeteat med, om du tycker att teknikerna är svåra eller om du känner att du kommer in i det.