Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HT21 - DA106A - Kursintroduktion

HT21 - DA106A - Kursintroduktion

1e708b2afb8622d5c5f070a94a3425a9?s=128

Anton Tibblin

August 31, 2021
Tweet

Transcript

  1. DA106A Introduktion till webbutveckling HT21 7.5hp Anton Tibblin Föreläsningen kommer

    att spelas in, dock inte deltagarna
  2. World Wide Web Här lever jag lycklig, här finns ingen

    stress Här är min nya hemadress
  3. 1.9 miljarder webbplatser 5 miljarder användare av internet

  4. None
  5. None
  6. Introduktion till webbutveckling DA106A

  7. None
  8. Dagens Agenda •Syfte •Lärandemål •Upplägg •Innehåll •Överblick

  9. Lärare i kursen • Anton Tibblin (kursansvarig) • anton.tibblin@mau.se •

    040-66 57672 • Cassandra Windahl • Lärarassistent • Filip Moltzer • Lärarassistent
  10. Läsperiod 1: Hösten 2021 DA156A Introduktion till webbutveckling DA211A Introduktion

    till studier i datavetenskap
  11. http://edu.mah.se/DA106A

  12. 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.
  13. Tekniker i modern webbutveckling

  14. Praktiska färdigheter

  15. Användarbehov

  16. Lärandemål Efter genomången kurs ska studenten kunna…

  17. 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
  18. 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
  19. 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.
  20. Allmän kursinfo • 10 veckor • 12 föreläsningar • 5

    labbuppgifter • 7 labbtillfällen • 3 inlämningsuppgifter • 1 tentamen
  21. En typisk vecka • 1-2 föreläsningar • 1 laborationstillfälle •

    Aktiviteter (laborationer/uppgifter)
  22. Moment i kursen Moment Betygsskala Högskolepoäng Inlämningsuppgifter UG 4,5 Skriftlig

    tentamen UV 3
  23. 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
  24. Kurslitteratur

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

  27. Planering

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

  30. None
  31. None
  32. Internet och Webben är inte samma sak Viktiga begrepp att

    hålla isär
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. Webben – vad har hänt?

  42. När började ni använda webben? Vad gjorde ni då?

  43. None
  44. 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
  45. Tidigt 90-tal • Textbaserade webbsidor, en enda kolumn • Världens

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

  47. Mosaic – Tjoho bilder! http://www.nsf.gov/od/lpa/news/03/images/ mosaic.6beta.jpg 1993

  48. Mitten av 90-tal • Layout (genom tabell) strukturerar upp webbsidorna

    • Webbsidorna har flera kolumner • JavaScript (Mocha) introduceras • Animerad text, skrollande text, GIF-bilder
  49. Hur såg webbsidorna ut?

  50. 1995 – Altavista

  51. 1995 - Amazon

  52. 1995 - Ebay

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

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

  55. 1998 - Google

  56. 1999 - Paypal

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

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

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

  61. 2003 - LinkedIn

  62. 2004 - thefacebook

  63. 2005 - YouTube

  64. 2006 - Twitter

  65. 2008 - Dropbox

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

  67. None
  68. Antal webbsidor

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

  70. Webbläsare - statistik

  71. Vad är en webbläsare?

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

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

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

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

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

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

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

  83. HTML-dokumentet i helhet

  84. 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
  85. 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)
  86. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet

    Utformning Struktur Innehåll
  87. Frågor?

  88. Nästa föreläsning Imorgon, onsdag 1/9 kl. 13.15

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