html 5 - media

39
HTML 5 - Media … och mer om projekten

Upload: anton-tibblin

Post on 12-Apr-2017

343 views

Category:

Education


0 download

TRANSCRIPT

HTML 5 - Media

HTML 5 - Media och mer om projekten

Frgor kring inl.2?

Dagens frelsningHTML 5 MediaVarfr vill vi ha det?Hur laddar vi upp vr media?Hur visar vi upp vr media?ProjektenHur kan ett projekt se ut?Exempel p olika typer av projektProjektens arbetsgng

Att ladda upp filer genom HTMLVi behver ett formulr!

Attributet: enctype

Att ladda upp filer

Skickar filen till upload.php

Servern returnerar ett svar

Anton Tibblin (AT) - Klient - HTML

Server PHP (server.php)

Test av filuppladdninghttp://localhost:1234/

Frgor?

Att visa upp bilder, video, ljud

Foto

Att visa upp bilder

Video

Att visa upp video

Olika video-widgets i olika webblsare

Support fr video i olika webblsare

Anton Tibblin (AT) - file:///C:/Users/TSANTI/Box%20Sync/VT%202016/DA344A-%20Webbapplikationer/F%F6rel%E4sningar/7.%20Media/2.%20Bilder,%20Video,%20Ljud/video.htmlLjud

Att visa upp ljud

Olika ljud-widgets i olika webblsare

Support fr ljud i olika webblsare

Anton Tibblin (AT) - file:///C:/Users/TSANTI/Box%20Sync/VT%202016/DA344A-%20Webbapplikationer/F%F6rel%E4sningar/7.%20Media/2.%20Bilder,%20Video,%20Ljud/video.htmlJavaScript API fr video/ljudhttp://www.w3schools.com/tags/ref_av_dom.asp

Frgor?

Demo av ljud, bild, video

Att styra filuppladdning genom den mobila enheten

ppna rtt app i telefonen

Exempel

Ajaxuppladdning av filer

Att ladda upp filer

Skickar filen till upload.php

Servern returnerar ett svar

Anton Tibblin (AT) -

http://jquery.malsup.com/form/Plugin som underlttar att skicka filer genom Ajax

http://tibbelit.se/mah/da117a/file-upload/api.html

Frgor?

Del 2 - Projekt

Tre val

Gra en mobil-/tabletanpassad webbplats av en befintlig (ej anpassad) webbplatsFokus p anvndbarhet/grnssnitt fr olika enheter

Bygga en egen applikation mot minst ett APIBygga en applikation som ser mervrde/frenkling av dataklla

Bygga en egen applikation med datavisulaisering (d3.js)Bygga en applikation med fokus p datavisualisering fr data

Ska godknnas av mig/Sebbe

Presentation av projekt: 22 mars

Handledning p labbtiderna

Nsta laboration