$30 off During Our Annual Pro Sale. View Details »

HT22 - DA106A - Kursintroduktion

HT22 - DA106A - Kursintroduktion

HT22 - DA106A - Kursintroduktion

Anton Tibblin

August 30, 2022
Tweet

More Decks by Anton Tibblin

Other Decks in Education

Transcript

  1. DA106A Introduktion till webbutveckling HT22 7.5hp Anton Tibblin

  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,4 miljarder användare av internet

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

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

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

    040-66 57672 • Cassandra Windahl • Lärarassistent • Teo Esaiasson • Lärarassistent
  11. Läsperiod 1: Hösten 2022 DA106A Introduktion till webbutveckling DA211A Introduktion

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

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

  15. Praktiska färdigheter

  16. Användarbehov

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

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

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

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

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

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

  28. Planering

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

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

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

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

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

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

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

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

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

  51. 1995 – Altavista

  52. 1995 - Amazon

  53. 1995 - Ebay

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

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

  56. 1998 - Google

  57. 1999 - Paypal

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

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

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

  62. 2003 - LinkedIn

  63. 2004 - thefacebook

  64. 2005 - YouTube

  65. 2006 - Twitter

  66. 2008 - Dropbox

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

  68. None
  69. Antal webbsidor

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

  71. Webbläsare - statistik

  72. Vad är en webbläsare?

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

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

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

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

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

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

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

  84. HTML-dokumentet i helhet

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

    Utformning Struktur Innehåll
  88. Frågor?

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

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