1ME321 Webbteknik 1 – Lek0on 4 Kravspeciﬁka.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 © 2015 Rune Körnefors [email protected] Agenda • 
Veckoplanen –  Vecka 39 –  UppgiI U2 = L4+L5+L6 –  UppgiI U3 –  Allmänna kraven om CSS –  Läsanvisningar • 
Exemplet Gretas Blommor –  GarreVs modell – Scope plane –  Kravspeciﬁka.on –  Pappersprototyp för layout • 
2 CSS –  Selektorer –  Enheter –  Centrering –  Visuella eﬀekter plet r m
e
x
E
mo
m
o
l
B
s
Greta
Mål och målgrupp Från lek0on 3 E2er analys och avstämning med beställaren 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 g
o
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 als 3 Mål och målgrupp Från lek0on 3 Intervjuer Fråga intervju 1 Var brukar du hemma använda dator och Internet? intervju 2 hemma Hur oIa är du på 1 .mme om webben? dan 2 .mmar om 2 .mmar om dan mer än 8 .mmar eV par gånger 4 .mmar om dan dan om dan per vecka Vad gör du på webben? Betalar Betala räkningar, .Va räkningar, på sidor om spela spel trädgård Brukar du gå in på Ibland sidor för någon blomsterbu.k? Nej intervju 3 på jobbet intervju 4 hemma & på jobbet intervju 5 hemma TiVa på Sköta bokningar, Betala personalinfo, arrangera möten, räkningar, uppdatera skicka fakturor, chaVa med företagets webb handlar kläder barnbarnen Vet inte Ja för aV beställa.ll konferenser på jobbet intervju 6 hemma & på jobbet … … Användarnas behov -  Se vad som ﬁnns i bu.ken. -  Se var bu.ken ﬁnns 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. Spela spel, handla på auk.on Ja då jag ska Nej köpa blommor för något speciellt .llfälle … … Personas 4 nas, mt o
s
r
e
p
sa
ad på ställaren tser r
e
s
a
B
ed be webbpla
m
u
j
e
v
inter v liknand
s a
analy
• 
EV första u
tkast Innehåll – 
– 
– 
– 
– 
– 
– 
– 
– 
• 
Kravspeciﬁka0on för Gretas Blommor Produkter ska visas med bild, namn och pris. Produkterna är kategoriserade i bukeVer, kransar och övrigt. Erbjudanden vid helger. 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. Nyhetsﬂö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. 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 Ä
ndringar i KravspeciﬁkaIon blåV ﬁnnas Innehåll Vad ska
-  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. -  Nyhetsﬂö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. an Vad ska m
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. 6 t s
Hur ska de
e ut Graﬁsk proﬁl -  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 speciﬁkaIon -  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). t på p
Resulta
SammanfaKning lan 1 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. t p
Resulta
Användarnas behov -  Se vad som ﬁnns i bu.ken. -  Se var bu.ken ﬁnns 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. å plan 2
KravspeciﬁkaIon 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. 7 Graﬁsk proﬁl -  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 speciﬁkaIon -  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). lane p
e
p
o
.ll sc n tas med
e
t
n
i
hör
l, me
på DeVa Vs model omma in S e
k
S
i Garr r aV vi ska out och C
y
nu, fö latsens la
p
webb
Webbplatsens struktur Förändrad struktur och namn, eIer analys av andra webbplatser och koll mot personas Första förslag på struktur och namn på sidor/länkar 8 uten o
y
a
l
v
elar a
d
a
k
i
Ol
• 
• 
• 
• 
• 
Sidornas struktur och layout En pappersprototyp kan an.ngen skapas i eV program (t.ex. PowerPoint), där man läV kan ändra storlek och placering på rutorna 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 Logo Rubrik Nav Main Footer eller med papperslappar, som man kan ﬂyVa runt, för aV testa olika layouter. 9 r, appa
l
s
r
e
p
d pap runt. e
m
typen
yVas
Proto som kan ﬂ
Pappersprototyp för sidornas layout Förslag 2 Förslag 1 Global navigering i en menyrad och dropdown-‐
menyer för lokal navigering Global navigering i en kolumn och popup-‐
menyer för lokal navigering Förslag 3 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.ﬁera rutorna gretas-blommor4"
index.htm"
style.css"
a … ljer nästa veck
ö
f
g in
n
V
sä
rt
Fo
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 eﬀekter •  Rundade hörn •  Skugga •  Opacitet lekt4-ex3"
17