Kursintroduktion: Introduktion till webbutveckling

Transcript

1. http://www.flickr.com/photos/frauleinschiller/4702688723
2. Introduktion till webbutveckling HT13 7.5hp Anton Tibblin
3. Kursintroduktion • Vilka håller i kursen? • Syfte • Lärandemål • Upplägg • Innehåll • Överblick
4. Vem är jag? • Anton Tibblin • Adjunkt vid Malmö Högskola • Informationsarkitekt • Webbutvecklare • Småföretagare
5. Upplägg för första perioden HT13 DA156A Introduktion till webbutveckling DA153A Introduktion till datavetenskap 2 september – 10 november
6. Kursplan • http://edu.mah.se/DA156A
7. 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.
8. Tekniker i modern webbutveckling http://business-marketing-tips.com/wp-content/uploads/2013/07/Responsive-Web-Design1.jpg
9. Praktiska färdigheter http://joelglovier.com/img/wallpaper/power-3.jpg
10. Användarbehov
11. LÄRANDEMÅL Efter genomången kurs ska studenten kunna…
12. 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
13. 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
14. 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.
15. Allmän kursinfo • 10 veckor • 13 föreläsningar • 8 labbtillfällen • 5 labbuppgifter • 3 inlämningsuppgifter • 1 tentamen
16. En typisk vecka • 1-2 föreläsningar • 1 labbtid • Aktiviteter (laborationer/uppgifter)
17. Moment i kursen Moment Betygsskala Högskolepoäng Inlämningsuppgifter UG 3,5 Skriftlig tentamen UV 4
18. Laborationer • ”Learning by doing” • Inte examinerande – men ett mycket viktigt tillfälle att lära sig kursens mål • Labbuppgifter finns tillgängliga redan nu • Labbtider med handledning – 2 grupper
19. Kurslitteratur
20. Kurslitteratur (lista) • Kurslitteratur: – 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, 2nd ed., 2011 – Zeldman, Jeffrey: Designing with Web Standards, New Riders Press, 3rd ed., 2009
21. IA.WEBBINTRO.SE
22. ?
23. WEBBEN – DÅ & NU
24. De första webbsidorna http://www.newscientist.com/data/images/ns /cms/dn18158/dn18158-1_708.jpg
25. Mosaic – bilder! http://www.nsf.gov/od/lpa/news/03/images/ mosaic.6beta.jpg
26. Netscape http://brandthunder.com/wp/wp- content/uploads/2013/02/netscape-navigator- web-browser.jpg
27. Internet Explorer
28. Web 2.0 http://commons.wikimedia.org/wiki/File:Web_ 2.0_Map.svg
29. Nytt sätt att använda webben http://www.pbdink.com/blog/wp- content/uploads/2013/08/networks.jpg
30. Webbläsare idag http://www.soft32.com/blog/wp-content/uploads/2013/01/web-browsers.jpg
31. Webbläsare - statistik
32. Statistik - Sverige
33. VAD ÄR EN WEBBLÄSARE?
34. Webbläsare • Tolkar kod (html m.m.) och visar upp det för användaren.
35. Hur fungerar det? Internet Klient Klient Server
36. 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.
37. Resultat • En webbläsare visar oss en webbsida efter att ha renderat ett HTML-dokument
38. Webbsida • Består av olika sorters kod – HTML – CSS – JavaScript
39. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
40. 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
41. HTML som märkspråk
42. 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
43. Ett HTML-dokuments struktur <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; 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 ingår i ett HTML-dokument: - <html>, rotelementet - <head>, dokumenthuvud (info om dokumentet) - <title>, dokukmentets titel - <body>, dokumentets innehåll
44. Exempel på HTML-struktur Text-editor Webbläsare
45. HTML-dokumentet i helhet
46. 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
47. 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)
48. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
49. Demo • HTML/CSS
50. FRÅGOR?
51. NÄSTA FÖRELÄSNING Fredag 6/9, kl. 10
52. WEBBINTRO.SE Glöm inte