Webbutveckling 1

Posted by admin,

Webbutveckling 1


Kursplan och betygskriterier:

Lektionsplanering med övningar och uppgifter:

v2
När du är klar med din första övnings-webbsite börjar du planeringen av din första genomarbetade Webbprojekt. Du planerar, gör skiss/mockup/wireframes kring hur sidan är tänkt att se ut, du kodar sidan, testar och validerar och slutligen gör en skriftlig dokumentation över arbetsprocessen enligt riktlinger i instruktionerna.
Instruktioner för Webbprojekt 1 
Mall för Projektplan som du använder som grund och fyller i med information för ditt webbprojekt.
Delinlämning: Inlämning av ifylld projektplan med bifogad mockup /wireframes.
Slutinlämning: Inlämning av alla Hemsidans filer + skriftlig dokumentation.
JULLOV
v40-51
HTML övningar under lektionen. Övningar bygger på varandra så att sista övningen innehåller kod från tidigare övningar. När du är klar med sista övningen i serien är du klar med din första startsida:
Övning 1a HTML kod till första övning med sidhuvud (header) och textlänk (logotyp): html1-text.html
Övning 1b HTML kod till annan version av första övning med sidhuvud (header) och bildlänk (logotyp): html1-img.html
Övning 2 HTML kod till andra övning med huvudmenu (nav): html2-nav.html
Övning 3 HTML kod till tredje övning med innehållet (main): html3-main.html
Övning 4 HTML kod till fjärde övning med sidfot (footer): html4-footer.html
Övning 5 – sista övning i serien HTML kod till femte övning med länk till extern CSS fil (Kolla så att sökvägen till css filen stämmer i din filstruktur): html5-css.html
CSS fil med kod som formaterar HTML filen som den är länkad till. I vår övning heter filen html5-css.html. (Kolla så att sökvägen till css filen stämmer i din filstruktur): style.css
När du är klar med övningarna är du också klar med din första startsida. Testa en gång till startsidan i olika webbläsare och validerar både html och css filen i w3c valideringsverktygen.
När det är grönt går du vidare och skapar 2 undersidor där du testar att lägga upp annan typ av innehåll och layout.
1. Spara kopia av din startsida i en ny mapp som du döper till t ex ‘Webbsida1′och startsidan döper du till index.html. Kopiera img och css undermappar och filer till den nya mappen.
2. Spara om index.html och döp om den till t ex ommig.html och minaintressen.html.
3. Sedan jobbar du vidare med undersidorna. Du ändrar innehållet, layouten och länkar texterna i huvudmenyn så att du kan bläddra mellan de olika sidorna. Exempel css filen som du har jobbat med tidigare innehåller regler som gäller och formaterar specifikt bara på de olika undersidorna style.css Se kommentarer längre ner i css dokumentet.
Här nedan länk till exempelkod för 2 undersidor till Maria Holm-siten.
Exempel på bildgalleri: ommig.html
Exempel på annan typ av layout med bild och text: minaintressen.html
Här kan du se exempel på den färdiga hemsidan – Maria Holm.: Startsidan för Maria Holm
När du är klar med din första övnings-webbsite (några av er har kommit överens med mig tidigare under kursen att börja med Webbprojekt 1 istället för övningar) börjar du planeringen av din första genomarbetade Webbprojekt. Du planerar, gör skiss/mockup/wireframes kring hur sidan är tänkt att se ut, du kodar sidan, testar och validerar och slutligen gör en skriftlig dokumentation över arbetsprocessen enligt riktlinger i instruktionerna.
Instruktioner för Webbprojekt 1 
Mall för Projektplan som du använder som grund och fyller i med information för ditt webbprojekt.
Delinlämning: Inlämning av ifylld projektplan med bifogad mockup /wireframes.
Slutinlämning: Inlämning av alla Hemsidans filer + skriftlig dokumentation.
v35-39
v39 – DEADLINE för inlämning och redovisning (1-5 min/grupp)
Uppgift: Webbens utveckling
Kom ihåg att tydliggöra vad var och en i gruppen har gjort. Skriv ner detta info i själva inlämningen eller som en separat dokumentation som gruppen delar med mig.
v34-35
Kursintroduktion, kursplan och betygskriterier. Förkunskaper/Diagnostiskt prov. Feedback till planering från eleverna.

RESURS – GENOMGÅNGAR, GUIDER, ARTIKLAR och ANDRA LÄNKTIPS:

RESPONSIV webbdesign – TESTVERKTYG:
mattkersley.com
screenfly
Px to em Konvertera från px till em
Pixel to Percent Converter Konvertera från px till %
VIDEOFÖRELÄSNINGAR OCH EXEMPEL:
Startsida