Download - HT16 - DA156A - Kursintroduktion
![Page 1: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/1.jpg)
http://www.flickr.com/photos/frauleinschiller/4702688723
![Page 2: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/2.jpg)
DA156AIntroduktion till webbutveckling
HT16 7.5hp Anton Tibblin
![Page 3: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/3.jpg)
Kursintroduktion
• Vilka är med i kursen?
• Syfte
• Lärandemål
• Upplägg
• Innehåll
• Överblick
![Page 4: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/4.jpg)
Vilka lärare är med i kursen?
• Lärare• Anton Tibblin
• Assistenter• Sofia Lundkvist
• Jacob Pettersson
![Page 5: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/5.jpg)
Läsperiod 1: HT16
DA156AIntroduktion till webbutveckling
DA153AIntroduktion till datavetenskap
3 september – 9 november
![Page 7: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/7.jpg)
Syfte
• Kursen syftar till att introducera fundamentala konceptoch tekniker som ingår i modern webbutveckling.
• Studenten ska ges praktiska färdigheter i utveckling av webbplatser, liksom en teoretisk bakgrund till de begränsningar och möjligheter som ges av aktuella standarder och plattformar.
• Studenten ska också utveckla en inledande förståelse av hur användarbehov och -beteende kan styra utvecklingen av ett gränssnitt.
![Page 8: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/8.jpg)
Tekniker i modern webbutveckling
http://business-marketing-tips.com/wp-content/uploads/2013/07/Responsive-Web-Design1.jpg
![Page 9: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/9.jpg)
Praktiska färdigheter
http://joelglovier.com/img/wallpaper/power-3.jpg
![Page 10: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/10.jpg)
Användarbehov
![Page 11: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/11.jpg)
LärandemålEfter genomången kurs ska studenten kunna…
![Page 12: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/12.jpg)
Kunskap och förståelse
• förklara begreppet representation och dess betydelse inom informationsteknologin
• förklara hur begreppen information, presentationoch beteende förhåller sig till komponenterna av en webbsida och varandra, samt varför begreppen brukar särskiljas
• beskriva och exemplifiera kring standarders roll inom webbutveckling och till viss del datavetenskap
![Page 13: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/13.jpg)
Färdighet och förmåga
• konstruera webbsidor baserat på för området aktuella standarder, med speciell hänsyn till tillgänglighet och kompatibilitet, samt viss hänsyn till användbarhet
• beskriva en resulterande webbsida baserat på källkod skriven i HTML, CSS och enklare JavaScript
• motivera användningsmässiga ställningstagande vid utformning av en webbsida
![Page 14: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/14.jpg)
Värderingsförmåga och förhållningssätt• diskutera på ett problematiserande och
reflekterande vis, hur webbutvecklare kan förhålla sig till standarder, målplattformer och målgrupper.
![Page 15: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/15.jpg)
Allmän kursinfo
• 10 veckor
• 12 föreläsningar
• 7 labbtillfällen
• 5 labbuppgifter
• 3 inlämningsuppgifter
• 1 tentamen
![Page 16: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/16.jpg)
En typisk vecka
• 1-2 föreläsningar
• 1 laboration
• Aktiviteter (laborationer/uppgifter)
![Page 17: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/17.jpg)
Moment i kursen
Moment Betygsskala Högskolepoäng
Inlämningsuppgifter UG 3,5
Skriftlig tentamen UV 4
![Page 18: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/18.jpg)
Laborationer
• ”Learning by doing”
• Inte examinerande – men ett mycket viktigt tillfälle att lära sig kursens mål
• Den första labbuppgiften finns tillgängliga redan nu
• Labbtider med handledning – 2 grupper
• Ger 0.5p per redovisad laboration till tentan
![Page 19: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/19.jpg)
Kurslitteratur
![Page 20: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/20.jpg)
Kurslitteratur (lista)
• Kurslitteratur:• Staflin, Rolf: HTML och CSS-boken, Pagina Förlag, 2011
• Marcotte, Ethan: Responsive Web Design, A Book Apart, 2011
• Referenslitteratur:• Krug, Steve: Don’t Make Me Think!, Pearson Professional
Education, 2nd ed., 2005
• Lawson, Bruce och Remy Sharp: Introducing HTML5, New Riders Press, 2nd ed., 2011
• Zeldman, Jeffrey: Designing with Web Standards, New Riders Press, 3rd ed., 2009
![Page 21: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/21.jpg)
da156a.ia-mah.seVår kurswebbplats
![Page 23: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/23.jpg)
?
![Page 24: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/24.jpg)
"Internet är en fluga"
- Ines Junéa Uusmann (kommunikationsminister, 1996)
![Page 25: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/25.jpg)
![Page 26: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/26.jpg)
Internet och Webben är inte samma sak
Viktiga begrepp att hålla isär
![Page 27: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/27.jpg)
![Page 28: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/28.jpg)
![Page 29: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/29.jpg)
![Page 30: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/30.jpg)
![Page 31: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/31.jpg)
![Page 32: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/32.jpg)
![Page 33: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/33.jpg)
Webben – vad har hänt?
![Page 34: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/34.jpg)
Tim Berners-Lee
• Tidigt 90-tal utvecklades standarderna• HTML
• HTTP
• Målet var att genom länkar• Ge möjlighet att få tillgång till
information var som helst
• Möjlighet att dela information
![Page 35: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/35.jpg)
Tidigt 90-tal
• Textbaserade webbsidor, en enda kolumn
• Världens första webbläsare
• World Wide Web Consortium(W3C)
![Page 36: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/36.jpg)
Hur såg webbsidorna ut?
http://www.newscientist.com/data/images/ns/cms/dn18158/dn18158-1_708.jpg
1991
![Page 37: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/37.jpg)
Mosaic – Tjoho bilder!
http://www.nsf.gov/od/lpa/news/03/images/mosaic.6beta.jpg
1993
![Page 38: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/38.jpg)
Mitten av 90-tal
• Layout (genom tabell) strukturerar upp webbsidorna
• Webbsidorna har flera kolumner
• JavaScript (Mocha) introduceras
• Animerad text, skrollande text, GIF-bilder
![Page 39: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/39.jpg)
Hur såg webbsidorna ut?
![Page 40: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/40.jpg)
Sent 90-tal
• Flash introducerades
• En kombination av flash och HTML-kod byggde upp webbsidorna
• Flashbaserad navigation
• (massor av onödiga animationer)
![Page 41: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/41.jpg)
Hur såg webbsidorna ut?
![Page 42: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/42.jpg)
Tidigt => mitten av 2000-tal
• CSS introduceras
• JavaScript tar över allt mer på webben
• Formulär på webben
![Page 43: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/43.jpg)
2002-
![Page 44: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/44.jpg)
Nytt sätt att använda webben
http://www.pbdink.com/blog/wp-content/uploads/2013/08/networks.jpg
![Page 45: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/45.jpg)
Antal webbsidor
![Page 46: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/46.jpg)
Antal webbsidor
![Page 47: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/47.jpg)
Webbläsare idag
http://www.soft32.com/blog/wp-content/uploads/2013/01/web-browsers.jpg
![Page 48: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/48.jpg)
Webbläsare - statistik
![Page 49: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/49.jpg)
Statistik - Sverige
![Page 50: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/50.jpg)
Internet och Webben är inte samma sak
Viktiga begrepp att hålla isär
![Page 51: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/51.jpg)
Vad är en webbläsare?
![Page 52: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/52.jpg)
Webbläsare
• Tolkar kod (html m.m.) och visar upp det för användaren.
![Page 53: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/53.jpg)
Hur fungerar det?
Internet
Klient
Klient
Server
![Page 54: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/54.jpg)
Svar?
• Svaret är i form av HTML, som strukturerar upp den information som skickas från servern till oss
• HTML-dokumentet kan sedan inkludera bl.a. text, bilder, formgivning av sidan, interaktiva element osv.
![Page 55: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/55.jpg)
Resultat
• En webbläsare visar oss en webbsida efter att ha renderat ett HTML-dokument
![Page 56: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/56.jpg)
Webbsida
• Består av olika sorters kod• HTML
• CSS
• JavaScript
![Page 57: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/57.jpg)
Vad består en webbplats av?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll
![Page 58: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/58.jpg)
HTML
• Hypertext Markup Language
• Märkspråk
• Används för att ge dokument en struktur – vad är vad?
• HTML byggs upp utav element som märker upp vilken typ av innehåll som finns på sidan
![Page 59: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/59.jpg)
HTML som märkspråk
![Page 60: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/60.jpg)
Element?
• Det finns olika element som representerar olika innehåll, t.ex. rubriker, paragrafer, listor m.m.
• Grundprincipen är att det finns en start- och ett sluttagg. Det innehåll som finns mellan dessa taggar tilldelas elementets formatiering.
• Kan även ha attribut
![Page 61: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/61.jpg)
Ett HTML-dokuments struktur
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>Min sida</title>
</head>
<body>
<!-- Här kommer innehåll som visas för användaren ligga -->
</body>
</html>
Element som alltid ingår i ett HTML-dokument:- <html>, rotelementet- <head>, dokumenthuvud (info om dokumentet)- <title>, dokukmentets titel- <body>, dokumentets innehåll
![Page 62: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/62.jpg)
Exempel på HTML-strukturText-editor Webbläsare
![Page 63: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/63.jpg)
HTML-dokumentet i helhet
![Page 64: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/64.jpg)
Kort om CSS
• CSS sköter formgivning av innehåll, medan HTML sköter struktur av innehåll.
• CSS styr hur HTML-elementen ska visas
• Typisk användning av CSS är för typografi, layout, bildhantering m.m.
• CSS är ett eget språk, men går att använda tillsammans med HTML
• Genom att koppla olika CSS-mallar till samma HTML-dokument kan informationen presenteras på olika sätt
![Page 65: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/65.jpg)
Kort om JavaScript
• Ger möjlighet till interaktiva webbplatser
• Är ett programmeringsspråk som körs direkt i webbläsaren
• Kan skrivas tillsammans med HTML-kod
• Exempel på användningsområden är:- Validering av information i formulär- Visa/dölja information utan att ladda om sidan- Animeringar (t.ex. bildspel)
![Page 66: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/66.jpg)
Vad består en webbplats av?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll
![Page 67: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/67.jpg)
Frågor?
![Page 68: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/68.jpg)
Nästa föreläsningImorgon, tisdag 30/8, kl. 13
![Page 69: HT16 - DA156A - Kursintroduktion](https://reader031.vdocuments.net/reader031/viewer/2022021922/5872916c1a28ab36118b6451/html5/thumbnails/69.jpg)
da156a.ia-mah.seGlöm inte =)