1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se
Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna kraven om CSS Läsanvisningar CSS Selektorer Enheter Centrering Visuella effekter Exemplet Gretas Blommor GarreVs modell Scope plane Kravspecifika.on Pappersprototyp för layout 2
Exemplet Gretas Blommor Från lek0on 3 Mål och målgrupp Intervju med beställaren - Främst inriktade på bukever och blomsteruppsävningar. - Vill behålla den gamla trogna kundkretsen på personer i 50-70- årsåldern. - Vill nå nya yngre kunder. - Har många kunder som besöker den in.lliggande kyrkogården. - Erbjuda leverans av blommor via beställning på webbplatsen. - Webbplatsen ska vara klatschig, välkomnande och omfamna besökaren samt ha många bilder. Business goals E2er analys och avstämning med beställaren Mål för webbplatsen - Visa vilka produkter och tjänster som erbjuds. - Locka nya kunder.ll bu.ken. - Erbjuda online- beställning av blommor för leverans. - Tydlig informa.on med lävläst text och mycket bilder. - En webbplats som användarna oia återkommer.ll. Målgrupp - Tidigare kunder - Nya kunder - Online- kunder 3
Från lek0on 3 Mål och målgrupp Intervjuer Personas Fråga intervju 1 intervju 2 intervju 3 intervju 4 intervju 5 intervju 6 Var brukar du hemma hemma på jobbet hemma & på hemma hemma & på använda dator och jobbet jobbet Internet? Hur oia är du på webben? Vad gör du på webben? 1.mme om dan Betalar räkningar,.va på sidor om trädgård 2.mmar om dan Betala räkningar, spela spel 2.mmar om dan mer än 8.mmar om dan TiVa på personalinfo, uppdatera företagets webb ev par gånger per vecka Sköta bokningar, Betala arrangera möten, räkningar, skicka fakturor, chava med handlar kläder barnbarnen Brukar du gå in på Ibland Nej Vet inte Ja för av sidor för någon beställa.ll blomsterbu.k? konferenser på jobbet Ja då jag ska köpa blommor för något speciellt.llfälle 4.mmar om dan Spela spel, handla på auk.on Nej Användarnas behov - Se vad som finns i bu.ken. - Se var bu.ken finns och öppelder. - Se vad man kan beställa online. - Se priser, även alla.llägg som t.ex. leveransavgii. - Kunna beställa blommor online. - Kunna använda webbplatsen både på dator och mobila enheter. - Få erbjudanden, t.ex. vid helger. 4
Baserad på personas, intervju med beställaren samt analys av liknande webbplatser Innehåll Produkter ska visas med bild, namn och pris. Produkterna är kategoriserade i bukever, kransar och övrigt. Erbjudanden vid helger. Kravspecifika0on för Gretas Blommor Ingångssidan ska ha foto som visar bu.ken och öppelder ska anges. En sida som visar interiörbilder från bu.ken. En sida med presenta.on av personalen. Nyhetsflöde med nya produkter eller kampanjer. Webbsidorna ska ha företagets färger i nyanser av grönt och gult. Beställningsformulär där totalpriset hela.den visas. EV första utkast FunkIonellt Webbplatsen ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. Bilder på produkter ska kunna förstoras. Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. Man ska kunna beställa bukever och kransar för leverans. Man ska kunna göra en fritextsökning på webbplatsen. 5
EHer avstämning med bu0kens ägare KravspecifikaIon Ändringar i blåv Innehåll - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i bukever, kransar och övrigt. - Erbjudanden vid helger. Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar bu.ken och öppelder ska anges. - En sida som visar interiörbilder från bu.ken samt kort presenta.on av personalen (namn och bild). - En sida med presenta.on av personalen. - Kontakpormulär. - Nyhetsflöde med nya produkter eller kampanjer. - Förslag på blommor eier vad de ska användas.ll, t.ex. födelsedag, begravning, etc. - Webbsidorna ska ha företagets färger i nyanser av grönt och gult. - Beställningsformulär där.lläggsavgiier och totalpriset hela.den visas. Vad ska finnas Vad ska man kunna göra FunkIonellt - Webbplatsen ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. - Bilder på produkter ska kunna förstoras. - Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. - Man ska kunna beställa bukever och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. Hur ska det se ut Grafisk profil - Webbsidorna ska ha företagets färger i nyanser av grönt och gult. - TypsniV Verdana (sans- serif), 12 punkter, svart färg för löpande text. - Verdana, kursiv s.l, mörkgrön färg för rubriker. Teknisk specifikaion - Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. - Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner). 6
Resultat på plan 1 SammanfaKning Mål för webbplatsen - Visa vilka produkter och tjänster som erbjuds. - Locka nya kunder.ll bu.ken. - Erbjuda online- beställning av blommor för leverans. - Tydlig informa.on med lävläst text och mycket bilder. - En webbplats som användarna oia återkommer.ll. Resultat på plan 2 KravspecifikaIon Innehåll - Produkter ska visas med bild, namn och pris. - Produkterna är kategoriserade i bukever, kransar och övrigt. - Veckans erbjudanden ska visas på ingångssidan. - Ingångssidan ska ha foto som visar bu.ken och öppelder ska anges. - Interiörbilder från bu.ken samt kort presenta.on av personalen (namn och bild). - Kontakpormulär. - Förslag på blommor eier vad de ska användas.ll, t.ex. födelsedag, begravning, etc. - Beställningsformulär där.lläggsavgiier och totalpriset hela.den visas. FunkIonellt - Bilder på produkter ska kunna förstoras. - Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. - Man ska kunna beställa bukever och kransar för leverans. - Man ska kunna göra en fritextsökning på webbplatsen. Användarnas behov - Se vad som finns i bu.ken. - Se var bu.ken finns och öppelder. - Se vad man kan beställa online. - Se priser, även alla.llägg som t.ex. leveransavgii. - Kunna beställa blommor online. - Kunna använda webbplatsen både på dator och mobila enheter. - Få erbjudanden, t.ex. vid helger. Grafisk profil - Webbsidorna ska ha företagets färger i nyanser av grönt och gult. - TypsniV Verdana (sans- serif), 12 punkter, svart färg för löpande text. - Verdana, kursiv s.l, mörkgrön färg för rubriker. Teknisk specifikaion - Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner.ll 320 pixels bredd. - Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner). 7
DeVa hör inte.ll scope plane i GarreVs modell, men tas med nu, för av vi ska komma in på webbplatsens layout och CSS Första förslag på struktur och namn på sidor/länkar Webbplatsens struktur Förändrad struktur och namn, eier analys av andra webbplatser och koll mot personas 8
Olika delar av layouten Sidornas struktur och layout Sidhuvud Logo och bu.kens namn Sökfält Ruta för fritextsökning på webbplatsen Navigering Global navigering Lokal navigering Innehåll Huvudinnehåll Sidofält med t.ex. erbjudanden (endast ingångssidan) Sidfot Adress och öppelder En pappersprototyp kan an.ngen skapas i ev program (t.ex. PowerPoint), där man läv kan ändra storlek och placering på rutorna Logo Nav Footer Rubrik Main eller med papperslappar, som man kan flyva runt, för av testa olika layouter. 9
Prototypen med papperslappar, som kan flyvas runt. Förslag 1 Pappersprototyp för sidornas layout Förslag 2 Global navigering i en menyrad och dropdown- menyer för lokal navigering Förslag 3 Global navigering i en kolumn och popup- menyer för lokal navigering Global navigering i en kolumn och lokal navigering i expanderade undermenyer 10
ing n m r upo Olika lika sidor på o Pappersprototyp för sidornas layout Ingångssidan Vanligt ak sökrutan är i det övre högra hörnet Två kolumner för innehållet Övriga sidor Sidfot längst ner under innehållet Endast en kolumn för innehållet 11
Inrutning av layouten! "Grid Layout" Rutorna b strukturele lir sedan olika ment i HTM L- koden header search nav main content footer 12 sidebar
HTML- och CSS- kod Strukturen kodas i HTML blockelement (header, nav, main, footer och div) för de olika rutorna id- avribut i div, för av kunna referera.ll dem från CSS Första steget av s.lmallen S.l för varje block Börjar med olika bakgrundsfärger för av iden.fiera rutorna gretas-blommor4" index.htm" style.css" FortsäVning följer nästa vecka 13
Selektorer Lista på selektorer W3C: hvp://www.w3.org/tr/2011/rec- css3- selectors- 20110929/ W3Schools: hvp://www.w3schools.com/cssref/css_selectors.asp Selektorer består av referenser.ll element avribut id pseudo- class pseudo- element kombina.on av ovanstående lekt4-ex1" 14
Enheter Lista på enheter W3Schools: hvp://www.w3schools.com/cssref/css_units.asp Vanliga anheter: px em % lekt4-ex2" 15
Centrering Begränsa bredden på elementet med width. SäV margin- lei och margin- right.ll auto. element {width:500px; margin- lei:auto; margin- right:auto;} element {width:500px; margin:0 auto;} 16
Visuella effekter Rundade hörn Skugga Opacitet lekt4-ex3" 17