DA156A - HT15 - Kursintroduktion

Transcript

1. http://www.flickr.com/photos/frauleinschiller/4702688723
2. DA156A Introduktion till webbutveckling HT15 7.5hp Anton Tibblin
3. Kursintroduktion  Vilka är med i kursen?  Syfte  Lärandemål  Upplägg  Innehåll  Överblick
4. Vem är jag?  Anton Tibblin  Adjunkt vid Malmö Högskola  Informationsarkitekt  Webbutvecklare  Entreprenör
5. Vilka lärare är med i kursen?  Lärare  Anton Tibblin  Assistenter  Jennie Hellqvist  Michelle Pantorp
6. Läsperiod 1: HT15 DA156A Introduktion till webbutveckling DA153A Introduktion till datavetenskap 3 september – 9 november
7. Kursplan  http://edu.mah.se/DA156A
8. 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.
9. Tekniker i modern webbutveckling http://business-marketing-tips.com/wp-content/uploads/2013/07/Responsive- Web-Design1.jpg
10. Praktiska färdigheter http://joelglovier.com/img/wallpaper/power-3.jpg
11. Användarbehov
12. Lärandemål Efter genomången kurs ska studenten kunna…
13. 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
14. 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
15. 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.
16. Allmän kursinfo  10 veckor  13 föreläsningar  7 labbtillfällen  5 labbuppgifter  3 inlämningsuppgifter  1 tentamen
17. En typisk vecka  1-2 föreläsningar  1 labbtid  Aktiviteter (laborationer/uppgifter)
18. Moment i kursen Moment Betygsskala Högskolepoäng Inlämningsuppgifter UG 3,5 Skriftlig tentamen UV 4
19. Laborationer  ”Learning by doing”  Inte examinerande – men ett mycket viktigt tillfälle att lära sig kursens mål  Den första labbuppgiften finns tillgängliga redan nu  Labbtider med handledning – 2 grupper
20. Plan
21. Kurslitteratur
22. Kurslitteratur (lista)  Kurslitteratur:  Lloyd, Ian: Build Your Own Website The Right Way Using HTML & CSS, 2011  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, 2nd ed., 2011  Zeldman, Jeffrey: Designing with Web Standards, New Riders Press, 3rd ed., 2009
23. ia.webbintro.se
24. ?
25. Webben – vad har hänt?
26. Internet och Webben är inte samma sak Viktiga begrepp att hålla isär
27. 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
28. De första webbsidorna http://www.newscientist.com/data/im ages/ns/cms/dn18158/dn18158- 1991
29. Mosaic – Tjoho bilder! http://www.nsf.gov/od/lpa/news/03/i mages/mosaic.6beta.jpg 1993
30. Anarki på webben? 1994
31. Kommersialisering av webben http://brandthunder.com/wp/wp- content/uploads/2013/02/netscape- navigator-web-browser.jpg 1996- 1998
32. Web 2.0 http://commons.wikimedia.org/wiki/File :Web_2.0_Map.svg 2002-
33. Nytt sätt att använda webben http://www.pbdink.com/blog/wp- content/uploads/2013/08/networks.jpg
34. Webbläsare idag http://www.soft32.com/blog/wp-content/uploads/2013/01/web-browsers.jpg
35. Webbläsare - statistik
36. Statistik - Sverige
37. Internet och Webben är inte samma sak Viktiga begrepp att hålla isär
38. Vad är en webbläsare?
39. Webbläsare  Tolkar kod (html m.m.) och visar upp det för användaren.
40. Hur fungerar det? Internet Klient Klient Server
41. 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.
42. Resultat  En webbläsare visar oss en webbsida efter att ha renderat ett HTML-dokument
43. Webbsida  Består av olika sorters kod  HTML  CSS  JavaScript
44. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
45. 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
46. HTML som märkspråk
47. 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
48. 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
49. Exempel på HTML-struktur Text-editor Webbläsare
50. HTML-dokumentet i helhet
51. 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
52. 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)
53. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
54. Demo  HTML/CSS
55. Frågor?
56. Nästa föreläsning Imorgon, tisdan 1/9, kl. 15
57. ia.webbintro.se Glöm inte