Kursintroduktion till DA344A & DA355A på Malmö Högskola.

1. Kursintroduktion
DA344A, DA355A

2. Dagens agenda
• Del 0 - Upprop
• Del 1 – Introduktion till kursen
 Vilka lärare är involverade?
 Vilka läser denna kurs?
 Varför läser ni denna kurs?
 Kursplanen
 Kursens examinationer
 Planering för kursen
• Del 2 – Introduktion till webben och HTML
 WWW? – supersnabb historik
 En webbplats uppbyggnad
 Introduktion till HTML
 En mycket simpel webbsida

3. Upprop

4. Lärare i kursen
• Anton Tibblin (kursansvarig)
 Anton.tibblin@mah.se
 040-66 57672
• Sebastian Bengtegård
 sebastian.bengtegard@mah.se
 040-66 58115

5. Vilka läser kursen?
• Informationsarkitekt (termin 4)
 DA355A - Data- och informationsvetenskap: Flerplattformsapplikationer med
webbtekniker
• Datavetenskap och applikationsutveckling (termin 4)
 DA344A - Webbapplikationer för mobila enheter
• Samläsning innebär
 Olika förkunskaper
 Olika perspektiv på applikationer
 Samma mål med kursen
 Samma examinerande uppgifter

6. Förkunskaper?
Hur webbiga är ni?

7. Förkunskaper
• HTML?
• CSS?
• JavaScript?
 jQuery?
 Andra bibliotek?
• JSON?
• XML?
• Övrigt?

8. Förväntningar?
Vad vill ni få ut av denna kurs?

9. Funderingar?
Något som vi inte ska missa i kursen?

10. Varför läser vi denna kurs?
• För att få ett perspektiv på mobil utveckling
 Vilka alternativ finns?
 Vilka fördelar & nackdelar innebär webben för handhållna enheter?
 Vilka möjligheter och begränsningar erbjuder dagens webblösningar?
• Ge en inblick i mobil webbutveckling
 Vad kan HTML5, CSS3 & JavaScript erbjuda?
 Vilka externa bibliotek/ramverk finns för
 Utökad funktionalitet
 Effektivisering/optimering av kod
• Hur vi kan använda webbtekniker för utveckling med fokus på flera
plattformar (iOS, Android, Windows, etc.)

11. Vilka språk kommer vi att använda?

12. Kursplanen – Kursens innehåll
• Översikt av aktuella webbtekniker
 HTML
 CSS
 JavaScript
• Möjligheter och begränsningar med webbapplikationer
• Utvecklingsmiljö och arbetssätt
• Konstruktion av webbapplikationer
• Designprinciper och användargränssnitt
• Användning av enhetens hårdvarufunktionalitet

13. Kursplan – Lärandemål
Kunskap och förståelse
• Grundläggande byggstenar och begrepp vid utveckling av webbapplikationer
• Begränsningar och möjligheter för webbapplikationer
• Designprinciper och utformning av användargränssnitt för
webbapplikationer

14. Kursplan – Lärandemål
Färdighet och förmåga
• DA355A (Informationsarkitekt)
 konstruera webbapplikationer som uppfyller principer för flerplattformsdesign
 använda enhetens resurser i praktisk tillämpning
 använda lämpliga utvecklingsmiljöer vid konstruktion av webbapplikationer
 söka, samla, värdera och kritiskt tolka information relevant för egna
utvecklingsprojekt
• DA355A (Datavetenskap och applikationsutveckling)
 Konstruera webbapplikationer som uppfyller designprinciper
 Använda enhetens hårdvarufunktionalitet i praktisk tillämpning
 Använda lämpliga utvecklingsmiljöer vid konstruktion av webbapplikationer

15. Kursplan – Bedömingsformer
Krav för godkänd
• Godkända inlämningsuppgifter (5 hp) och godkänt projekt (2.5 hp).
Krav för väl godkänd
• Väl godkänd på inlämningsuppgifterna samt godkänt projekt.

16. Planering för kursen
Vecka Tema
3 Introduktion till HTML & CSS
4 Responsiv webbdesign
5 Introduktion till JavaScript & jQuery
6 jQuery och interaktiva webbsidor
7 Ajax & användning utav externa API
8 JavaScript: Geo location, media, offline-hantering, etc.
9 Porta till app (Phonegap): App Store, Google Play
10 Projekt
11 Projekt
12 Projekt + projektredovisning

17. En typisk vecka
• Måndag, 10-12: Föreläsning
• Tisdag, 13-17: Case + laboration
• Torsdag, 8-12: Case + laboration

18. Kursens examinerade moment
• Inlämningsuppgift 1
 Skapa en responsiv webbplats (desktop/surfplatta/mobil)
 Utan externa ramverk
 Enklare JavaScript/jQuery
 Interaktiv meny
 Någon annan interaktiv funktion
• Inlämningsuppgift 2
 Skapa en responsiv webbplats m.h.a. externt bibliotet (bootstrap, material design,
etc.)
 Bygga mot ett externt API
 Fånga media genom webbplatsen (ljud/bild/video)
• Projekt
 Skapa en webbplats med fokus på mobil/tablet för ett givet syfte.

19. Resurser
• Internetbaserade resurser
• Weyl, Estelle (2013) Mobile HTML5. Using the latest today, O'Reilly Media

20. http://mah-dv.github.io/
Kursens webbplats

21. Frågor?

23. Tim Berners-Lee & webben
• 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

24. Den första webbsidan
1991

25. Bildernas webbläsare: mosaic
1993

26. Anarki på webben?
1994

27. Kommersialisering utav webben
1996-

28. ”Web 2.0”
2002-

29. Nya användningsområden växer fram

30. Responsiv webbdesign
20
10

31. 2013 – The year of
responsive web design

37. Dagens webbläsare

38. Vilka webbläsare använder vi?

39. … och i Sverige

40. Vad är en webbläsares uppgift?
• En webbläsare tolkar kod (t.ex. HTML, CSS, JavaScript) och visar upp det
för användaren genom att grafiskt gränssnitt.

41. Hur fungerar det?
Internet
Klient
Klient
Server

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

43. Resultat
• En webbläsare visar oss en webbsida efter att ha renderat ett HTML-
dokument

44. I vilka språk bygger vi en hemsida?

45. Vad består en webbplats av?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll

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

48. HTML som märkspråk

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

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

51. Exempel på HTML-struktur
Text-editor Webbläsare

52. HTML-dokumentet i helhet

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

54. 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)

55. Vad består en webbplats av?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll

56. Frågor?

57. Nästa föreläsning
- Formulär, tabeller i HTML & intro till CSS
Imorgon, tisdag 19/1, kl. 13.15