Media med HTML 5

1. HTML 5 - Media
… och mer om projekten

2. Frågor kring inl.2?

3. Dagens föreläsning
• HTML 5 – Media
 Varför vill vi ha det?
 Hur laddar vi upp vår media?
 Hur visar vi upp vår media?
• Projekten
 Hur kan ett projekt se ut?
 Exempel på olika typer av projekt
 Projektens arbetsgång

5. Att ladda upp filer genom HTML
• Vi behöver ett formulär!

6. Attributet: enctype

7. Att ladda upp filer

8. Klient - HTML
Server – PHP (server.php)

9. Test av
filuppladdning
http://localhost:1234/

10. Frågor?

11. Att visa upp bilder,
video, ljud

13. Foto

14. Att visa upp bilder

15. Video

16. Att visa upp video

17. Olika video-widgets i olika
webbläsare

18. Support för video i olika webbläsare

19. Ljud

20. Att visa upp ljud

21. Olika ljud-widgets i olika webbläsare

22. Support för ljud i olika webbläsare

23. JavaScript API för
video/ljud
http://www.w3schools.com/tags/ref_av_dom.asp

24. Frågor?

25. Demo av ljud, bild,
video

26. Att styra
filuppladdning genom
den mobila enheten

27. Öppna rätt app i telefonen

28. Exempel

29. Ajaxuppladdning av
filer

30. Att ladda upp filer

32. http://jquery.malsup.com/form/
Plugin som underlättar att skicka filer genom Ajax
http://tibbelit.se/mah/da117a/file-upload/api.html

33. Frågor?

34. Del 2 - Projekt

35. Tre val
1. Göra en mobil-/tabletanpassad webbplats av en befintlig (ej anpassad)
webbplats
 Fokus på användbarhet/gränssnitt för olika enheter
2. Bygga en egen applikation mot minst ett API
 Bygga en applikation som ser mervärde/förenkling av datakälla
3. Bygga en egen applikation med datavisulaisering (d3.js)
 Bygga en applikation med fokus på datavisualisering för data

36. Ska godkännas av
mig/Sebbe

37. Presentation av
projekt: 22 mars

38. Handledning på
labbtiderna

39. Nästa ”laboration”