1 HTML-fil med…
3 DIV-taggar som är positionerade i…
1 CSS-fil med…
3 media query breakpoints som ger…
3 genomtänkta layouter för olika skärmformat
HTML-filen ska heta index.html. Använd länkar, IMG, Photoshop och annat ni har lärt er i Uppgift 1-2. Ni måste ha in minst 1 IMG. Fortsätt utforska tutorialsarna som är länkade under Uppgift 1.
Gör en sida för en hushållsprodukt, brödrost, tandborste, dammsugare, bestick, tvål, välj själva. Beskriv produkten med bilder, rubriker, texter, instruktioner. Det kan vara säljande, men behöver inte. Som med tidigare uppgifter: Välj snabbt och kör! Fokusera ert budskap, gör val var ni placerar olika texter och bilder.
Responsive design innebär att designen förändrar sig beroende på på vilken skärm den visas; samma design anpassar sig efter en dator, en telefon, eller en platta. Det är väldigt mycket av en samtida trend, men det är också ett skifte i filosofi. Det baserar sig på flexibiliteten som uppnås med att skilja innehåll från presentation, HTML från CSS. En relaterad filosofi är progressive enhancement, om ni vill läsa mer!
One page är en av de senaste årens designtrender, som går ut på att samla all information på en sida, som man navigerar genom att scrolla. Det finns många exempel och ibland är de lite väl överlastade med både innehåll, information och stil. Styrkan i one page är annars att man måste fokusera sitt budskap och sin layout och rensa bort det som är onödigt.
http://www.brynspace.se/
http://meerkatapp.co/
http://zapuni.com/
http://www.formdesigncenter.com/
En sökning på one page web design ger en hel massa resultat som kan vara värda att titta på för inspiration.
För box model och CSS-positionering kolla http://www.w3schools.com/css/css_boxmodel.asp och framåt, framförallt http://www.w3schools.com/css/css_positioning.asp.
Även de andra tutorialsidorna från Uppgift 1 har bra tutorials:
http://www.codecademy.com/courses/web-beginner-en-6merh/0/2 och http://htmldog.com/guides/css/intermediate/layout/ om boxar, http://www.codecademy.com/courses/web-beginner-en-6merh/3/1 om positionering.
Den mest kortfattade beskrivningen av media queries för olika skärmstorlekar finns på Quirksmode, som oftast ligger i den absoluta framkanten av webtekniker. Den är några år gammal :) http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html.
En annan bra om media queries är http://htmldog.com/guides/css/advanced/mediaqueries/
Det viktigaste i uppgiften är att positionera element med CSS och att kunna skapa olika layouter för olika skärmstorlekar. Uppgiften introducerar samtida designfilosofier. Teknikerna som lärs ut med CSS-positionering och media queries är nödvändiga för att förstå och skapa en samtida webbsida.