1ME321 Webbteknik 1 Kursintroduktion och lektion 1 Introduktion Översikt av kursen och området webbteknik Rune Körnefors Medieteknik http://medieteknik.lnu.se/1me321 1 2019 Rune Körnefors rune.kornefors@lnu.se
Agenda Kursintro Webbteknik Lektioner, mm Examination Kursens webbplats medieteknik.lnu.se/1me321 Litteratur Veckoplan / schema Program Studentkonto Registrering / Avregistrering Lektion 1 Datakommunikation och adresser Dokument för en webbsida Exempel på HTML och CSS Responsiv webbdesign Informationsarkitektur Användarcentrerad design Modell för design Användarupplevelse Resurser på nätet Tillgänglighet 2
Kurser: Webbutveckling Webbteknik Webbteknik Webbdesign Konstruktion av webbplatser Webbteknik 1 Webbteknik 2 Webbteknik 3 Teknik Informationsarkitektur Användarcentrerad design Webbteknik 4 Webbteknik 5 Introduktionskurs på 7,5hp HTML & CSS Informationsarkitektur Användarcentrerad design Webbteknik 6 3
Kurstillfällen för Webbteknik 1 hösttermin vårtermin lp1 lp2 lp3 lp4 augusti ID, UDM & WP Kalmar FK Distans 15 aug. IMWT & FK Växjö Uppsamling restuppgifter Uppsamling restuppgifter 4
En typisk vecka Föreläsning Lektion Laboration Läsa litteratur, experimentera med exempel, etc. Handledning 5
Laborationer / uppgifter Examination L1 L2 L3 L4 L5 L6 U1 U2 U3 U1 Verktyg (program) Portfolio Struktur och HTML Betyg U/G U2 Stil och CSS Layout Responsiv webbdesign Betyg U/G U3 Webbplats Modell för design Teori i webbteknik HTML & CSS Rapport Betyg U/G/VG L7 L8 6
Exempel på fusk Fusk Plagiat o Kopiering av annans lösning från t.ex. kurskamrater, webben, etc. Otillåtet samarbete o Ta fram gemensam lösning. o Låta någon annan göra uppgiften. Tillåtet att Använda material i uppgifterna. Utgå från exempel i kursen eller hämta inspiration från andra källor (ta med tydlig referens). Universitetets regler: Vid misstanke om fusk Rapporteras till Rektor/disciplinnämnd Kan ge avstängning från universitetet i upp till sex månader Samarbeta i inläsning. Diskutera kursinnehåll, exempel, etc. 7
Kursens webbplats http://medieteknik.lnu.se/1me321 Labbar / uppgifter Litteratur Veckoplan, kursmoment, föreläsningar, etc. Schema Program FirstClass 8
Konton, registrering och avbrott Studentkonto Registrering Ansök om FirstClass Om inloggning till FirstClass ej fungerar: Skicka mail till rune.kornefors@lnu.se med - personnummer - namn - användarid till studentkontot - felmeddelande vid försök till inloggning Aktiv i kursen Under kursens andra vecka måste du göra ett inlägg i anvisad mapp i FirstClass. I annat fall registreras tidigt avbrott på kursen. Viktigt 9
Lärare i kursen Kursansvar, examinator Rune Körnefors rune.kornefors@lnu.se (eller i FirstClass) Granskning av redovisningar Flera olika personer hjälper till med granskning. Delar på redovisningarna. 10
Lektion 1 11
Datakommunikation och adresser Request Response Web Client Web Server Webbadress, URL (Uniform Resource Locator) http://medieteknik.lnu.se/1me321/index.htm Webbläsare Felke-Morris, T. (2015) Basics of Web Design, Third ed., Pearson Education, Inc., s.6-7 Niederst Robbins, J. (2018) Learning Web Design, 5th ed., O'Reilly, s.22-25 12
HTML & CSS Exempel: Kursens webbplats, medieteknik.lnu.se/1me321 Linnéuniversitetet: lnu.se Kod i HTML och CSS Flera filer Anpassning till olika skärmstorlek (responsiv webbdesign) 13
Informationsarkitektur 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 14
Informationsarkitektur Webbutveckling Bygga webbplatsen Länkar Skapa sidor med HTML Layout med CSS Färger och stil med CSS Men det krävs mycket mer 15
Användarcentrerad design & informationsarkitektur Analysera syfte målgrupp, behov andra informationskällor språkbruk teknik Planera innehåll och funktionalitet organisation (kategorier, etiketter) struktur (avdelningar, sidor) navigering (hitta på webbplatsen, stöd) metadata (nyckelord, filnamn, ) Kravspecifikation innehåll funktion Testa och utvärdera användartest utvärdering mot kravspec validering, kontroll Skapa prototyper layout sidornas kod (HTML & CSS) texter, bilder och annat material 16 test av teknik Lancera publicera marknadsföra Underhålla och vidareutveckla uppdatera innehåll analysera användning planera nya funktioner
Modell för design Garretts modell för design av webbplatser Garrett, J. J. (2011) The Elements of User Experience, 2nd edition, New Riders, s.29 17
Användarvänlig Användarupplevelse Användbar Användarupplevelse User Experience (UX) "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." (Garrett, 2011, s.6) I jämförelse med produktdesign. "User experience design often deals with questions of context." (Garrett, 2011, s.8) I jämförelse med estetisk design och funktionell design. " providing a quality user experience is an essential, sustainable competitive advantage " (Garrett, 2011, s.12) Garrett, J. J. (2011) The Elements of User Experience, 2nd edition, New Riders 18
Tillgängligt för alla Personer med funktionsnedsättning Tillgänglighet blinda, nedsatt syn, döva, rörelsehinder (kan t.ex. inte använda musen), lässvårighet, Även andra långsam Internetanslutning, mobil, Accessibility Riktlinjer W3C, http://www.w3.org/wai/ Introduktion (på svenska), http://www.w3c.se/resources/office/translations/wai/intro/accessibility.html E-delegationen, http://webbriktlinjer.se/ Funka, http://www.funka.com/ Felke-Morris, T. (2015) Basics of Web Design, Third ed., Pearson Education, Inc., s.4-5 & 72-73 Niederst Robbins, J. (2018) Learning Web Design, 5th ed., O'Reilly, s.42-43 19
Resurser på nätet World Wide Web Consortium, W3C, w3.org W3Schools, w3schools.com (W3Fools, w3fools.com) Mozilla Developer Network (MDN), developer.mozilla.org/sv-se/ Svenska datatermgruppen, datatermgruppen.se/ 20