1ME321 Webbteknik 1 – Lek0on 1 Introduk+on Översikt av området och kursen Rune Körnefors Medieteknik 1 © 2015 Rune Körnefors [email protected] Agenda • 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
Datakommunika+on och adresser Dokument för en webbsida Exempel på HTML och CSS Responsiv webbdesign Tillförlitlig informa+on Informa+onsarkitektur Användarcentrerad design Modell för design Användarupplevelse Resurser på nätet Tillgänglighet 2 Datakommunika0on och adresser Request Response Web Client Web Server Webbadress, URL (Uniform Resource Locator) h[p://medieteknik.lnu.se/1me321/index.htm Webbläsare Felke-‐Morris, T. (2015) Basics of Web Design, Third ed., Pearson Educa+on, Inc., s.6-‐7 3 Dokument för en webbsida 4 HTML & CSS •  Kursens webbplats, medieteknik.lnu.se/1me321 •  Linnéuniversitetet: lnu.se •  Responsiv design Exempel på webbplatser Flera ﬁler Kod i HTML och CSS Anpassning +ll olika skärmstorlek 5 i+k Källkr
”There are many websites – but which ones are reliable sources of informa+on?” Tillförlitlig informa0on (Felke-‐Morris, 2015, s.14) •  A[ +[a på enligt Felke-‐Morris: –  Namn på webbplatsen, namn på den som uppdaterat –  Uppdateringsdatum –  URL •  Vem har registrerat domänen? –  whois.net –  dom.nu •  Registrera domän: –  T.ex. one.com •  Vem kan uppdatera innehåll? –  Wikipedia, sv.wikipedia.org/wiki/ Felke-‐Morris, T. (2015) Basics of Web Design, Third ed., Pearson Educa+on, Inc. 6 Informa0onsarkitektur Aﬀär Bygga huset •  Skapa väggar, tak, etc. •  Placera ut innerväggar, dörrar, fönster, etc. •  Måla huset Men det krävs mycket mer … 7 Informa0onsarkitektur Webbutveckling Bygga webbplatsen Länkar •  Skapa sidor med HTML •  Layout med CSS •  Färger och s+l med CSS Men det krävs mycket mer … 8 Användarcentrerad design & informa0onsarkitektur Analysera syle målgrupp, behov andra informa+onskällor språkbruk teknik • 
• 
• 
• 
• 
Kravspeciﬁka+on • 
• 
innehåll funk+on Testa och utvärdera • 
• 
• 
• 
Planera • 
• 
• 
• 
• 
innehåll och funk+onalitet organisa+on (kategorier, e+ke[er) struktur (avdelningar, sidor) navigering (hi[a på webbplatsen, stöd) metadata (nyckelord, ﬁlnamn, …) användartest utvärdering mot kravspec validering , kontroll test av teknik Skapa • 
• 
• 
• 
prototyper layout sidornas kod (HTML & CSS) texter, bilder och annat material Lancera • 
• 
publicera marknadsföra Underhålla och vidareutveckla • 
• 
• 
9 uppdatera innehåll analysera användning planera nya funk+oner Modell för design Garre[s modell för design av webbplatser Garre[, J. J. (2011) The Elements of User Experience, 2nd edi0on, New Riders, s.29 10 Användarupplevelse Användarvänlig Användbar Användarupplevelse "User experience is not about the inner workings of a product or service. User experience is about how it works on the outside, where a person comes in contact with it." I jämförelse med produktdesign. "User experience design oZen deals with ques0ons of context." I jämförelse med este+sk design och funk+onell design. (Garre[, 2011, s.6) (Garre[, 2011, s.8) "… providing a quality user experience is an essen0al, sustainable compe00ve advantage …" (Garre[, 2011, s.12) 11 Resurser på nätet •  World Wide Web Consor+um, W3C, w3.org •  W3Schools, w3schools.com –  (W3Fools, w3fools.com) •  Mozilla Developer Network (MDN), developer.mozilla.org/sv-‐SE/ •  Svenska datatermgruppen, datatermgruppen.se/ 12 Tillgänglighet Accessibility •  Tillgängligt för alla –  Personer med funk+onsnedsä[ning •  blinda, nedsa[ syn, döva, rörelsehinder (kan t.ex. inte använda musen), lässvårighet, … –  Även andra •  långsam Internetanslutning, mobil, … •  Riktlinjer –  W3C, h[p://www.w3.org/WAI/ •  Introduk+on (på svenska), h[p://www.w3c.se/resources/oﬃce/transla+ons/wai/intro/accessibility.html –  E-‐delega+onen, h[p://webbriktlinjer.se/ –  Funka, h[p://www.funka.com/ Felke-‐Morris, T. (2015) Basics of Web Design, Third ed., Pearson Educa+on, Inc., s.4-‐5 & 72-‐73 13