0
HTML5<br />MTIA Juan Manuel Martínez<br />Grupo de usuarios HTML5 Ciudad de México<br />
HTML5<br />APIsJavascript<br />HTML <br />CSS3<br />
Agenda<br />Introducción<br />Canvas<br />Video<br />WebSockets<br />Geolocalización<br />Recursos<br />BonusWebWorkers<br />
Canvas<br />
Canvas(nueva etiqueta)<br /><canvas id=«canvas1»></canvas> <br />Área de dibujo rectangular<br />API permite manipular <br...
CanvasDemo<br />http://www.3duca.me:3000/html5_canvas.html<br />
Canvas<br />IE9*	Firefox	Chrome	Opera		Safari<br />IPad/IPhone/IPod			Android<br />*Beta –- 10 de septiembre 2010 -– Acele...
CanvasRecursos<br />http://diveintohtml5.org/canvas.html<br />http://www.chromeexperiments.com/<br />http://www.apple.com/...
Video<br />
Video (nueva etiqueta)<br /><video width=“320” height=“180”><br /><source src=“bunny_320_180.ogv”><br /><source src=“bunny...
VideoDemo  + animación CSS3<br />http://www.3duca.me:3000/html5_video.html<br />
Video<br />IE9	Firefox	Chrome	Opera		Safari<br />Dispositivos móviles	<br />IPad/IPhone/IPod			Android<br />
Video  vs Flash<br />Pros<br />Contras<br /><ul><li>Elemento nativo de HTML5
Buena calidad
Altamente manipulable vía hojas de estilo / Javascript
Guerra de formatos
No Gestión de Derechos de Digitales (DRM)
No Streaming</li></li></ul><li>Video Recursos<br /><ul><li>http://www.youtube.com/html5
http://diveintohtml5.org/video.html
http://www.apple.com/html5/showcase/video/
http://ie.microsoft.com/testdrive/Graphics/VideoPanorama/Default.html</li></li></ul><li>WebSockets<br />
Funcionamiento de  HTTP<br />Servidor<br />petición<br />respuesta<br />petición<br />respuesta<br />…<br />
WebSockets<br />Servidor<br />Canal bidireccional<br />
WebSockets<br />Servidor Web<br />b<br />a<br />b<br />a<br />
WebSocketsDemo<br />http://www.3duca.me:3000/html5_websockets.html<br />
WebSockets<br />IE9	Firefox*	Chrome	Opera		Safari<br />IPad/IPhone/IPod			Android ?	<br />* 4 Beta –<br />
Plan bWebSockets:Servidores tipo cometDemo + SMS<br />http://www.3duca.me:3000/html5_comet.html<br />
Comet<br />IE9	Firefox	Chrome	Opera		Safari<br />IPad/IPhone/IPod			Android ?	<br />
WebSocketsvs Comet<br /><ul><li>HTML5
Eficiente
Únicamente Chrome/Firefox 4
Protocolo inmaduro
El futuro
Upcoming SlideShare
Loading in...5
×

HTML5

1,727

Published on

Presentación primera reunión meetup HTML5 Cudad de México

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,727
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 "

  1. 1. HTML5<br />MTIA Juan Manuel Martínez<br />Grupo de usuarios HTML5 Ciudad de México<br />
  2. 2. HTML5<br />APIsJavascript<br />HTML <br />CSS3<br />
  3. 3. Agenda<br />Introducción<br />Canvas<br />Video<br />WebSockets<br />Geolocalización<br />Recursos<br />BonusWebWorkers<br />
  4. 4. Canvas<br />
  5. 5. Canvas(nueva etiqueta)<br /><canvas id=«canvas1»></canvas> <br />Área de dibujo rectangular<br />API permite manipular <br />el canvas<br />a nivel de pixeles<br />
  6. 6. CanvasDemo<br />http://www.3duca.me:3000/html5_canvas.html<br />
  7. 7. Canvas<br />IE9* Firefox Chrome Opera Safari<br />IPad/IPhone/IPod Android<br />*Beta –- 10 de septiembre 2010 -– Acelerado por hardware<br />
  8. 8. CanvasRecursos<br />http://diveintohtml5.org/canvas.html<br />http://www.chromeexperiments.com/<br />http://www.apple.com/html5/<br />http://ie.microsoft.com/testdrive/<br />
  9. 9. Video<br />
  10. 10. Video (nueva etiqueta)<br /><video width=“320” height=“180”><br /><source src=“bunny_320_180.ogv”><br /><source src=“bunny_320_180.mp4”><br />Tunavegador no soporta video de HTML5<br /></video><br />
  11. 11. VideoDemo + animación CSS3<br />http://www.3duca.me:3000/html5_video.html<br />
  12. 12. Video<br />IE9 Firefox Chrome Opera Safari<br />Dispositivos móviles <br />IPad/IPhone/IPod Android<br />
  13. 13. Video vs Flash<br />Pros<br />Contras<br /><ul><li>Elemento nativo de HTML5
  14. 14. Buena calidad
  15. 15. Altamente manipulable vía hojas de estilo / Javascript
  16. 16. Guerra de formatos
  17. 17. No Gestión de Derechos de Digitales (DRM)
  18. 18. No Streaming</li></li></ul><li>Video Recursos<br /><ul><li>http://www.youtube.com/html5
  19. 19. http://diveintohtml5.org/video.html
  20. 20. http://www.apple.com/html5/showcase/video/
  21. 21. http://ie.microsoft.com/testdrive/Graphics/VideoPanorama/Default.html</li></li></ul><li>WebSockets<br />
  22. 22. Funcionamiento de HTTP<br />Servidor<br />petición<br />respuesta<br />petición<br />respuesta<br />…<br />
  23. 23. WebSockets<br />Servidor<br />Canal bidireccional<br />
  24. 24. WebSockets<br />Servidor Web<br />b<br />a<br />b<br />a<br />
  25. 25. WebSocketsDemo<br />http://www.3duca.me:3000/html5_websockets.html<br />
  26. 26. WebSockets<br />IE9 Firefox* Chrome Opera Safari<br />IPad/IPhone/IPod Android ? <br />* 4 Beta –<br />
  27. 27. Plan bWebSockets:Servidores tipo cometDemo + SMS<br />http://www.3duca.me:3000/html5_comet.html<br />
  28. 28. Comet<br />IE9 Firefox Chrome Opera Safari<br />IPad/IPhone/IPod Android ? <br />
  29. 29. WebSocketsvs Comet<br /><ul><li>HTML5
  30. 30. Eficiente
  31. 31. Únicamente Chrome/Firefox 4
  32. 32. Protocolo inmaduro
  33. 33. El futuro
  34. 34. HTML4 >
  35. 35. -+Eficiente
  36. 36. Disponible en todos los navegadores modernos
  37. 37. Solución temporal</li></ul>WebSockets<br />Comet<br />
  38. 38. Geolocalización<br />
  39. 39. GeolocalizaciónDemo<br />http://www.3duca.me:3000/html5_mapa_geo.html<br />
  40. 40. Geolocalización<br />
  41. 41. GeolocalizaciónDemo + Comet<br />http://www.3duca.me:3000/watch.html<br />http://www.3duca.me:3000/map.html<br />
  42. 42. Geolocalización<br />IE9 Firefox Chrome Opera Safari<br />IPad/IPhone/IPod Android<br />
  43. 43. GeolocalizaciónRecursos<br />http://diveintohtml5.org/geolocation.html<br />http://www.w3.org/TR/geolocation-API/<br />
  44. 44. Libros<br />Introducing HTML5<br />HTML5 up and running<br /> Pro HTML5 programming<br />
  45. 45. Contacto<br />manuel.martinez@serviciosweb.pro<br />@tiempor3al<br />
  46. 46. WebWorkers<br />
  47. 47. WebWorkersDemo<br />http://www.3duca.me:3000/html5_webworkers.html<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×