Introduktion till webbutveckling HT12: föreläsning 1

For the Swedish university course Introduction to Web Development: .

(Published under a Creative Commons BY license.)

Transcript

1. Introduktion till webbutveckling
   Bild: http://www.flickr.com/photos/frauleinschiller/4702688723/
   

   View Slide

2. Introduktion till
   webbutveckling
   H12 7,5 hp
   Fredrik Ohlin
   

   View Slide

3. Kursintroduktion
   Syfte, lärandemål, upplägg,
   innehåll, överblick
   

   View Slide

4. DA156A
   Introduktion till webbutveckling
   DA153A
   Introduktion till datavetenskap
   4/9 11/11
   

   View Slide

5. Kursplan:
   www.edu.mah.se/
   DA156A/syllabus/
   

   View Slide

6. 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.
   

   View Slide

7. http://www.flickr.com/photos/splorp/6083482404/
   

   View Slide

8. (1998)
   http://www.flickr.com/photos/moparx/5321857668
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. Lärandemål
    Efter genomgången kurs
    skall studenten kunna:
    

    View Slide

15. 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
    

    View Slide

16. 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
    

    View Slide

17. diskutera på ett problematiserande
    och reflekterande vis, hur
    webbutvecklare kan förhålla sig till
    standarder, målplattformer och
    målgrupper.
    

    View Slide

18. 10 veckor
    11 föreläsningar
    8 labbtider
    5 labbuppgifter
    3 inlämningsuppgifter
    1 tentamen
    

    View Slide

19. Typisk vecka
    2 föreläsningar/lektioner
    1 labbtid
    1 fokusaktivitet
    { laboration, uppgift}
    

    View Slide

20. Moment Betygsskala # hp
    Konstruktion av webbsidor:
    uppgifter
    UG 3,5
    Skriftlig tentamen UV 4
    

    View Slide

21. Laborationer
    ”Learning by doing”
    Ej examinerande - men kritiskt
    lärandemoment.
    Labbuppgifter finns tillgängliga nu.
    Labbtider med handledning: 2 grupper.
    

    View Slide

22. View Slide

23. Litteratur
    Hela kursen
    Allsopp, John: Developing with Web Standards,
    New Riders Press, 2009
    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, 2010
    Zeldman, Jeffrey: Designing with Web Standards
    New Riders Press, 3rd ed., 2009
    

    View Slide

24. webbintro.se
    

    View Slide

25. ?
    

    View Slide

26. CommonCraft: WWW in Plain English
    

    View Slide

27. View Slide

28. http://en.wikipedia.org/wiki/
    File:Usage_share_of_web_browsers_(Source_StatCounter).svg
    

    View Slide

29. http://www.flickr.com/photos/adactio/6800969243/
    

    View Slide

30. A Grosskurth and M. W. Godfrey,
    A Reference Architecture for Web Browsers
    

    View Slide

31. http://www.youtube.com/watch?v=dndeRnzkJDU
    

    View Slide

32. http://www.youtube.com/watch?v=AKZ2fj8155I
    

    View Slide

33. Vad är en
    webbläsare?
    

    View Slide

34. Vad är en
    webbsida?
    

    View Slide

35. View Slide

36. Webbsidans tre lager
    Innehåll
    Struktur
    Presentation
    Beteende
    

    View Slide

37. Innehåll + struktur
    

    View Slide

38. Hypertext
    P. Morville & L. Rosenfeldt,
    Information Architecture for the World Wide Web
    

    View Slide

39. HTML
    HyperText Markup Language
    Formellt språk för strukturering av
    text och andra typer av information.
    Tim Berners-Lee, ~1991
    

    View Slide

40. View Slide

41. Presentationen styrs
    utan att förändra det
    underliggande HTML-
    dokumentet
    

    View Slide

42. CSS
    Cascading Style Sheets
    Språk för att beskriva presentationen
    för bl a HTML (märkspråksdokument)
    Håkon Wium Lie, 1994
    

    View Slide

43. Beteende -
    JavaScript
    

    View Slide

44. JavaScript
    Komplett programmeringsspråk
    ”inbäddat” i webbläsaren
    Används typiskt för att manipulera de
    ”undre lagren”, presentation,
    struktur och/eller innehåll, baserat
    på användareinteraktion.
    Brendan Eich (Netscape), ~1995
    

    View Slide

45. View Slide

46. Webbsidans tre lager
    Innehåll
    Struktur
    Presentation
    Beteende
    

    View Slide

47. Webbsidans tre lager
    Innehåll
    HTML
    CSS
    JavaScript
    

    View Slide

48. webbintro.se
    

    View Slide