Webbutveckling planering

Webbutveckling 1

Kursplan och betygskriterier:

Kursplan – Webbutveckling 1 – Läsår 2014-15


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

Andra HTML/CSS – Övningar:
HTML – Första hemsidan
HTML – Lägga in bild på sidan.
HTML/CSS – Formatera typsnitt och färg med CSS.
HTML/CSS – 1 kolumn layout med huvudmeny. Jobba med selektorer: id
Exempel på startsida med 1-kolumn layout.
HTML/CSS – 2 olika sätt att tillämpa CSS.
2 kolumn layout. Jobba med selektorer: klasser
3 kolumn layout. Jobba med selektorer: klasser och pseudoklasser


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.


Frågor och svar – Diagnostiskt prov


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:

GENOMGÅNG:
HTML5 intro
CSS3 intro
Genomgång/Läsning: Om Responsiv webbdesign
Genomgång/Läsning: Sökbarhet och SEO = Sökmotoroptimering
Genomgång/Läsning: Lägga upp hemsidan till webbserver

LÄROMEDEL PÅ WEBBEN – HTML5/CSS3 tutorials:
Web developement for beginners
W3C school tutorials: HTML5
W3C school tutorials: CSS3
CODEACADEMY – Lär dig kod

VALIDERINGS VERKTYG:
W3c validering (html)
W3c validering (css)

RESPONSIV webbdesign – TESTVERKTYG:
mattkersley.com
screenfly

mer om MOBILANPASSNING OCH RESPONSIV webbdesign:
Anpassningsbar webbdesign – enklare än du tror! Läsning och exempel.
Building Your Mobile-Friendly Site The Distilled Best Practice Guide
Responsive Web Design Läsning och exempel.
30 Useful Responsive Web Design Tutorials

Px to em Konvertera från px till em
Pixel to Percent Converter Konvertera från px till %

How to Create a Responsive Navigation
A Simple, Responsive, Mobile First Navigation
Drop-Down Navigation: Responsive and Touch-Friendly
55+ HTML5 CSS3 jQuery Menu Tutorials OBS! Alla exempel är nödvändigtvis inte responsiva.

Adaptive Images
5 Methods To Serve True Responsive Images

Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes

MATERIAL OCH VERKTYG:
Lorem ipsum – dummy text
W3c color picker
Adobe kuler
Color Scheme Designer
Beginners Guide to Use Google Web Fonts
20 Best Web Fonts from Google Web Fonts and @font-face
Hitta media som du får använda på din webbsida Creative Commons search

LAGAR OCH REGLER/JURIDIK:
Om lagar och regler – Upphovsrätt och PUL
Creative Commons licenses

GRÄNSSNITTSDESIGN – genomgång/läsning, riktlinjer och länktips
Om målgruppsanpassning
Sidlayout, bildkomposition, bild och text
Om struktur, navigation och funktion
Om typsnitt och typografi

Smashing magazine – For professional web designers
Article – 10 common mistakes in Logo design.
Vital tips for effective Logo design
Web design trends 2014 by hongkiat.com
Web design trends 2015 by Elegant themes
Web design trends 2015 by Creative blog
Cap & design – Nordens största tidning för kreativa formgivare
Font squirrel – Free fonts
Create your own hand font in iPad

EXEMPEL:
Zen garden (betydelsen att använda CSS)
100 Websites With Outstanding Artistic Design
20 Beautiful and Creative Mobile Websites

VIDEOTUTORIALS:
Adobe TV
Jämför olika siter som erbjuder videotutorials I webbdesign
Lynda.com
Lynda.com: Photoshop for Web Design (Några tutorials är gratis)


VIDEOFÖRELÄSNINGAR OCH EXEMPEL:

Future internet – web 3.0
History of internet
How the Internet Works in 5 Minutes