Download to read offline
More Related Content
Similar to HT20 - DA106A - Kursintroduktion
HT20 - DA106A - Kursintroduktion
- 1. DA106A Introduktion till webbutveckling HT207.5hp Anton Tibblin
- 3. Vilka lärare ärmed i kursen? Anton Tibblin Yuji Dong
- 4. DA106A Introduktion till webbutveckling HT207.5hp Anton Tibblin
- 5.
- 6.
- 7. Läsperiod 1: HT20 DA156A Introduktiontill webbutveckling DA154A Introduktion till datavetenskap
- 8.
- 9. Syfte • Kursen syftartill att introducera fundamentala koncept och 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.
- 10. Tekniker i modernwebbutveckling http://business-marketing-tips.com/wp-content/uploads/2013/07/Responsive-Web-Design1.jpg
- 11.
- 12.
- 13. Lärandemål Efter genomången kursska studenten kunna…
- 14. Kunskap och förståelse •förklara begreppet representation och dess betydelse inom informationsteknologin • förklara hur begreppen information, presentation och 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
- 15. 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
- 16. Värderingsförmåga och förhållningssätt •diskuterapå ett problematiserande och reflekterande vis, hur webbutvecklare kan förhålla sig till standarder, målplattformer och målgrupper.
- 17. Allmän kursinfo •10 veckor •12föreläsningar •5 labbuppgifter •7 labbtillfällen •3 inlämningsuppgifter •1 tentamen
- 18. En typisk vecka •1-2 föreläsningar • 1 laborationstillfälle • Aktiviteter (laborationer/uppgifter)
- 19. Moment i kursen MomentBetygsskala Högskolepoäng Inlämningsuppgifter UG 3,5 Skriftlig tentamen UV 4
- 20. Laborationer • ”Learning bydoing” • Inte examinerande – men ett mycket viktigt tillfälle att lära sig kursens mål • Ger 0.5p per redovisad laboration till tentan • Lösningen laddas upp på Canvas
- 21.
- 22. Kurslitteratur (lista) • Kurslitteratur: •Duckett, Jon: HTML and CSS: Design and Build Websites, JOHN WILEY SONS, 2014 • Referenslitteratur: • Marcotte, Ethan: Responsive Web Design, A Book Apart, 2011 • 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
- 23.
- 24.
- 26. "Internet är enfluga" - Ines Junéa Uusmann (kommunikationsminister, 1996)
- 29. Internet och Webben ärinte samma sak Viktiga begrepp att hålla isär
- 38. Webben – vadhar hänt?
- 39. När började nianvända webben?
- 41. Tim Berners-Lee •Tidigt 90-talutvecklades 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
- 42. Tidigt 90-tal •Textbaserade webbsidor,en enda kolumn •Världens första webbläsare •World Wide Web Consortium(W3C)
- 43. Hur såg webbsidornaut? http://www.newscientist.com/data/images/ns/cms/dn18158/dn18158-1_708.jpg 1991
- 44. Mosaic – Tjohobilder! http://www.nsf.gov/od/lpa/news/03/images/ mosaic.6beta.jpg 1993
- 45. Mitten av 90-tal •Layout(genom tabell) strukturerar upp webbsidorna •Webbsidorna har flera kolumner •JavaScript (Mocha) introduceras •Animerad text, skrollande text, GIF-bilder
- 46.
- 47.
- 48.
- 49.
- 50. Sent 90-tal • Flashintroducerades • En kombination av flash och HTML-kod byggde upp webbsidorna • Flashbaserad navigation • (massor av onödiga animationer)
- 51.
- 52.
- 53.
- 54. Tidigt => mittenav 2000-tal • CSS introduceras • JavaScript tar över allt mer på webben • Formulär på webben
- 55.
- 57. Nytt sätt attanvända webben http://www.pbdink.com/blog/wp-content/uploads/2013/08/networks.jpg
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. På ”bara” 20år hardet hänt en del…
- 65.
- 67.
- 68.
- 69. Vad är enwebbläsare?
- 70. Webbläsare Tolkar kod (htmlm.m.) och visar upp det för användaren.
- 71.
- 72. Svar? • Svaret äri 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.
- 73. Resultat • En webbläsarevisar oss en webbsida efter att ha renderat ett HTML-dokument
- 74. Webbsida •Består av olikasorters kod •HTML •CSS •JavaScript
- 75. Vad består enwebbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
- 76. HTML • Hypertext MarkupLanguage • 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
- 77.
- 78. Element? • Det finnsolika 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
- 79. Ett HTML-dokuments struktur <!DOCTYPEHTML> <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
- 80. Exempel på HTML-struktur Text-editorWebbläsare
- 81.
- 82. 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
- 83. 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)
- 84. Vad består enwebbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
- 85.
- 86. Nästa föreläsning Imorgon, onsdag2/9, kl. 13.15
- 87.