1ME321 Webbteknik 1 – Lek0on 6 Skeleton plane & Responsiv webbdesign med CSS Rune Körnefors Medieteknik 1 © 2015 Rune Körnefors [email protected] Agenda • 
• 
Veckoplanen –  Vecka 41 –  Läsanvisningar –  U2 deadline • 
CSS –  sQl för formulär •  (se även lab L8, senare i kursen) –  responsiv webbdesign •  förändring av layouten med media queries Exemplet Gretas Blommor –  GarreMs modell – Skeleton plane –  GränssniM, formulär, layout 2 Plan 4: Skeleton plane Gå HiMa Se var man är Göra GränssniM för interakQon. Val av interakQonsobjekt. Olika former av navigering. Stöd för navigering. Budskap Förstå SQmuli, feedback. OrganisaQon och layout för formulär. Layout för sidorna. 3 Exempel: analys av interak0on på en webbplats Jämför med det GarreM (2011, s. 86f) säger om "Error Handling" (DeMa togs upp i kapitell 5 som beskriver föregående plan, men bör nu repeteras och beaktas i analysen.) Hur hanterar vi situaQoner där användaren kan göra "fel"? •  Förhindra •  RäMa •  Återställa Analys av en biljeMbokning på www.sj.se Studera t.ex. felmeddelanden vid val av ort, resQd och avbrytning av taxibokning. Studera också val av interakQonsobjekt för aM försöka förhindra fel. GarreM, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders 4 plet Exem mmor s blo
Greta
Navigering Se föreläsning F3 och F6 Global navigering Lokal navigering Supplementary navigering Courtesy (navigering) 5 plet Exem mmor s blo
Greta
GränssniP för formulär Formulär på webbplatsen •  Sökrutan •  Kontakeormulär •  Beställningsformulär kontakt.htm"
contact.css"
Knapp för reset/ångra eller ej? Nya input-‐typer i HTML5 formtest.htm"
6 plet Exem mmor s blo
Greta
Beställningsformuläret Delas in i avdelningar enligt rubriker nedan. Från lek0on 5: InterakQon för aM beställa blomsterbukeM eller krans för leverans: Det går endast beställa en produkt. 1.  Gå in på sorQment för bukeMer eller kransar. 2.  Klicka på köpknapp för önskad produkt. 3.  Man kommer då Qll eM formulär för följande: a.  Datum för leverans b.  MoMagare •  Namn, adress, telefon, om varan får lämnas vid dörr om moMagare ej är hemma c.  KorMext d.  Beställare •  Namn, epost, telefon Beställningsformuläret Vald produkt order.htm"
•  Namn, pris, leveransavgil order.css"
Leveransdatum (går endast beställa max tre månader i förväg) •  Dag, månad (popup-‐menyer) MoMagaren •  Namn, gatuadress, postnummer, ort, telefon (texeält) •  Får lämnas utanför dörren (kryssruta) Kort Qll blommorna •  Text (textarea) Beställaren •  Namn, epost, telefon (texeält, telefon ej nödvändigt aM ange) •  Betalningsuppgiler (radioknappar för val av faktura eller kreditkort) -  Faktura: gatuadress, postnummer, ort (texeält) -  Kreditkort: (går vidare Qll betaltjänst, då man klickar på beställknappen) e.  BetalningssäM •  Faktura: adress •  Kort: kortnummer, etc. (betaltjänst) f.  Acceptans av köpvillkoren •  Acceptans av köpvillkoren (kryssruta) •  Beställningsknapp (submit-‐knapp) 7 plet Exem mmor s blo
Greta
Responsiv Webbdesign Steg från föreläsning F6: 1.  Flexibel layout (ﬂuid grid) •  max-‐width för #wrapper och footer •  procentvärden för width samt margin och padding för övriga element i layouten som har värden för bredd •  justering av storlek av bakgrundsbilden i header 2.  Justering av bilder (ﬂexibla bilder) •  max-‐width:100% för img-‐taggarna i main 3.  Media queries i CSS-‐koden •  ändra Qll en kolumn •  ta bort ﬂoat för bilder •  ändra navigeringsmenyn 4.  Meta-‐tagg för viewport i HTML-‐ﬁlerna •  <meta name="viewport" content="width=device-‐width, iniQal-‐scale=1.0"> 8 Kontroll mot kravspecen Kravspeciﬁka,on Grön: Helt
uppfyllt Gul: Nästa
n uppfyllt Röd: Delvis
Innehåll uppfyllt -  Produkter ska visas med bild, namn och pris. -  Produkterna är kategoriserade i bukeMer, kransar och övrigt. -  Veckans erbjudanden ska visas på ingångssidan. -  Ingångssidan ska ha foto som visar buQken och öppevder ska anges. -  Interiörbilder från buQken samt kort presentaQon av personalen (namn och bild). -  Kontakeormulär. -  Förslag på blommor eler vad de ska användas Qll, födelsedag, bröllop, begravning -  Beställningsformulär där Qlläggsavgiler och totalpriset hela Qden visas. Funk,onellt -  Bilder på produkter ska kunna förstoras. -  Man ska kunna sortera inom kategorierna på pris eller i bokstavsordning. -  Man ska kunna beställa bukeMer och kransar för leverans. -  Man ska kunna göra en fritextsökning på webbplatsen. Teknisk speciﬁka,on -  Ska fungera både på vanlig dator och mobila enheter med en skärmstorlek ner Qll 320 pixels bredd. -  Ska fungera i webbläsarna Chrome, Firefox, Internet Explorer, Opera och Safari (även 5 år gamla versioner). 9