HTML5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5

on

  • 2,140 views

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

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

Statistics

Views

Total Views
2,140
Views on SlideShare
2,140
Embed Views
0

Actions

Likes
1
Downloads
44
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Presentation 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
    • HTML5
    • 30. Eficiente
    • 31. Únicamente Chrome/Firefox 4
    • 32. Protocolo inmaduro
    • 33. El futuro
    • 34. HTML4 >
    • 35. -+Eficiente
    • 36. Disponible en todos los navegadores modernos
    • 37. Solución temporal
    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