HT14 - Kursintroduktion

Transcript

1. http://www.flickr.com/photos/frauleinschiller/4702688723
2. Introduktion till webbutveckling HT14 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 andra är med? • Lärare – Fredrik Ohlin • Assistenter – Fredrik Hall – Jennie Hellqvist – Dennis Johansson – Michelle Pantorp
6. Upplägg för första perioden HT14 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 • 8 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 • Labbuppgifter finns tillgängliga redan nu • Labbtider med handledning – 2 grupper
20. Kurslitteratur
21. 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
22. IA.WEBBINTRO.SE
23. ?
24. WEBBEN – DÅ & NU
25. Internet och Webben är inte samma sak Viktiga begrepp att hålla isär
26. 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
27. De första webbsidorna http://www.newscientist.com/data/images/ns /cms/dn18158/dn18158-1_708.jpg 1991
28. Mosaic – Tjoho bilder! http://www.nsf.gov/od/lpa/news/03/images/ mosaic.6beta.jpg 1993
29. Anarki på webben? 1994
30. Kommersialisering av webben http://brandthunder.com/wp/wp- content/uploads/2013/02/netscape-navigator- web-browser.jpg 1996- 1998
31. Web 2.0 http://commons.wikimedia.org/wiki/File:Web_ 2.0_Map.svg 2002-
32. Nytt sätt att använda webben http://www.pbdink.com/blog/wp- content/uploads/2013/08/networks.jpg
33. Webbläsare idag http://www.soft32.com/blog/wp-content/uploads/2013/01/web-browsers.jpg
34. Webbläsare - statistik
35. Statistik - Sverige
36. VAD ÄR EN WEBBLÄSARE?
37. Webbläsare • Tolkar kod (html m.m.) och visar upp det för användaren.
38. Hur fungerar det? Internet Klient Klient Server
39. 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.
40. Resultat • En webbläsare visar oss en webbsida efter att ha renderat ett HTML-dokument
41. Webbsida • Består av olika sorters kod – HTML – CSS – JavaScript
42. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
43. 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
44. HTML som märkspråk
45. 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
46. 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
47. Exempel på HTML-struktur Text-editor Webbläsare
48. HTML-dokumentet i helhet
49. 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
50. 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)
51. Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
52. Demo • HTML/CSS
53. FRÅGOR?
54. NÄSTA FÖRELÄSNING Fredag 5/9, kl. 10
55. WEBBINTRO.SE Glöm inte