HT20 - DA106A - Kursintroduktion

1e708b2afb8622d5c5f070a94a3425a9?s=47 Anton Tibblin
September 01, 2020

HT20 - DA106A - Kursintroduktion

HT20 - DA106A - Kursintroduktion

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

September 01, 2020
Tweet

Transcript

  1. DA106A Introduktion till webbutveckling HT20 7.5hp Anton Tibblin

  2. None
  3. Vilka lärare är med i kursen? Anton Tibblin Yuji Dong

  4. DA106A Introduktion till webbutveckling HT20 7.5hp Anton Tibblin

  5. http://www.flickr.com/photos/frauleinschiller/4702688723

  6. Kursintroduktion •Syfte •Lärandemål •Upplägg •Innehåll •Överblick

  7. Läsperiod 1: HT20 DA156A Introduktion till webbutveckling DA154A Introduktion till

    datavetenskap
  8. http://edu.mah.se/DA106A

  9. Syfte • Kursen syftar till 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 modern webbutveckling http://business-marketing-tips.com/wp-content/uploads/2013/07/Responsive-Web-Design1.jpg

  11. Praktiska färdigheter http://joelglovier.com/img/wallpaper/power-3.jpg

  12. Användarbehov

  13. Lärandemål Efter genomången kurs ska 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 •diskutera på 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 •12 fö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 Moment Betygsskala Högskolepoäng Inlämningsuppgifter UG 3,5 Skriftlig

    tentamen UV 4
  20. Laborationer • ”Learning by doing” • 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. Kurslitteratur

  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. da106a.ia-mau.se Vår kurswebbplats

  24. Planering

  25. None
  26. "Internet är en fluga" - Ines Junéa Uusmann (kommunikationsminister, 1996)

  27. None
  28. None
  29. Internet och Webben är inte samma sak Viktiga begrepp att

    hålla isär
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. Webben – vad har hänt?

  39. När började ni använda webben?

  40. None
  41. 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
  42. Tidigt 90-tal •Textbaserade webbsidor, en enda kolumn •Världens första webbläsare

    •World Wide Web Consortium(W3C)
  43. Hur såg webbsidorna ut? http://www.newscientist.com/data/images/ns/cms/dn18158/dn18158-1_708.jpg 1991

  44. Mosaic – Tjoho bilder! 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. Hur såg webbsidorna ut?

  47. 1995 - Altavista

  48. 1995 - Amazon

  49. 1995 - Ebay

  50. Sent 90-tal • Flash introducerades • En kombination av flash

    och HTML-kod byggde upp webbsidorna • Flashbaserad navigation • (massor av onödiga animationer)
  51. Hur såg webbsidorna ut?

  52. 1998 - Google

  53. 1999 - Paypal

  54. Tidigt => mitten av 2000-tal • CSS introduceras • JavaScript

    tar över allt mer på webben • Formulär på webben
  55. 2002-

  56. None
  57. Nytt sätt att använda webben http://www.pbdink.com/blog/wp-content/uploads/2013/08/networks.jpg

  58. 2003 - LinkedIn

  59. 2004 - thefacebook

  60. 2005 - YouTube

  61. 2006 - Twitter

  62. 2008 - Dropbox

  63. På ”bara” 20år har det hänt en del…

  64. None
  65. Antal webbsidor

  66. None
  67. Webbläsare idag http://www.soft32.com/blog/wp-content/uploads/2013/01/web-browsers.jpg

  68. Webbläsare - statistik

  69. Vad är en webbläsare?

  70. Webbläsare Tolkar kod (html m.m.) och visar upp det för

    användaren.
  71. Hur fungerar det? Internet Klient Klient Server

  72. 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.
  73. Resultat • En webbläsare visar oss en webbsida efter att

    ha renderat ett HTML-dokument
  74. Webbsida •Består av olika sorters kod •HTML •CSS •JavaScript

  75. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet

    Utformning Struktur Innehåll
  76. 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
  77. HTML som märkspråk

  78. 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
  79. 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
  80. Exempel på HTML-struktur Text-editor Webbläsare

  81. HTML-dokumentet i helhet

  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 en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet

    Utformning Struktur Innehåll
  85. Frågor?

  86. Nästa föreläsning Imorgon, onsdag 2/9, kl. 13.15

  87. da106a.ia-mau.se Vår kurswebbplats