Your SlideShare is downloading. ×
HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML5

1,703
views

Published on

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

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,703
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5
    MTIA Juan Manuel Martínez
    Grupo de usuarios HTML5 Ciudad de México
  • 2. HTML5
    APIsJavascript
    HTML
    CSS3
  • 3. Agenda
    Introducción
    Canvas
    Video
    WebSockets
    Geolocalización
    Recursos
    BonusWebWorkers
  • 4. Canvas
  • 5. Canvas(nueva etiqueta)
    <canvas id=«canvas1»></canvas>
    Área de dibujo rectangular
    API permite manipular
    el canvas
    a nivel de pixeles
  • 6. CanvasDemo
    http://www.3duca.me:3000/html5_canvas.html
  • 7. Canvas
    IE9* Firefox Chrome Opera Safari
    IPad/IPhone/IPod Android
    *Beta –- 10 de septiembre 2010 -– Acelerado por hardware
  • 8. CanvasRecursos
    http://diveintohtml5.org/canvas.html
    http://www.chromeexperiments.com/
    http://www.apple.com/html5/
    http://ie.microsoft.com/testdrive/
  • 9. Video
  • 10. Video (nueva etiqueta)
    <video width=“320” height=“180”>
    <source src=“bunny_320_180.ogv”>
    <source src=“bunny_320_180.mp4”>
    Tunavegador no soporta video de HTML5
    </video>
  • 11. VideoDemo + animación CSS3
    http://www.3duca.me:3000/html5_video.html
  • 12. Video
    IE9 Firefox Chrome Opera Safari
    Dispositivos móviles
    IPad/IPhone/IPod Android
  • 13. Video vs Flash
    Pros
    Contras
    • Elemento nativo de HTML5
    • 14. Buena calidad
    • 15. Altamente manipulable vía hojas de estilo / Javascript
    • 16. Guerra de formatos
    • 17. No Gestión de Derechos de Digitales (DRM)
    • 18. No Streaming
  • Video Recursos
    • http://www.youtube.com/html5
    • 19. http://diveintohtml5.org/video.html
    • 20. http://www.apple.com/html5/showcase/video/
    • 21. http://ie.microsoft.com/testdrive/Graphics/VideoPanorama/Default.html
  • WebSockets
  • 22. Funcionamiento de HTTP
    Servidor
    petición
    respuesta
    petición
    respuesta

  • 23. WebSockets
    Servidor
    Canal bidireccional
  • 24. WebSockets
    Servidor Web
    b
    a
    b
    a
  • 25. WebSocketsDemo
    http://www.3duca.me:3000/html5_websockets.html
  • 26. WebSockets
    IE9 Firefox* Chrome Opera Safari
    IPad/IPhone/IPod Android ?
    * 4 Beta –
  • 27. Plan bWebSockets:Servidores tipo cometDemo + SMS
    http://www.3duca.me:3000/html5_comet.html
  • 28. Comet
    IE9 Firefox Chrome Opera Safari
    IPad/IPhone/IPod Android ?
  • 29. WebSocketsvs Comet
    WebSockets
    Comet
  • 38. Geolocalización
  • 39. GeolocalizaciónDemo
    http://www.3duca.me:3000/html5_mapa_geo.html
  • 40. Geolocalización
  • 41. GeolocalizaciónDemo + Comet
    http://www.3duca.me:3000/watch.html
    http://www.3duca.me:3000/map.html
  • 42. Geolocalización
    IE9 Firefox Chrome Opera Safari
    IPad/IPhone/IPod Android
  • 43. GeolocalizaciónRecursos
    http://diveintohtml5.org/geolocation.html
    http://www.w3.org/TR/geolocation-API/
  • 44. Libros
    Introducing HTML5
    HTML5 up and running
    Pro HTML5 programming
  • 45. Contacto
    manuel.martinez@serviciosweb.pro
    @tiempor3al
  • 46. WebWorkers
  • 47. WebWorkersDemo
    http://www.3duca.me:3000/html5_webworkers.html