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 filer 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 Affä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 • • • • • Kravspecifika+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, filnamn, …) 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/office/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
© Copyright 2024