Inmersión a HTML5

1,068 views
1,038 views

Published on

Inmersión a HTML5 y Videojuegos

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,068
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Inmersión a HTML5

  1. 1. Inmersión a HTML5 y VideojuegosAlexander Cubillos Jauregui
  2. 2. ¿ QUÉ NO ES HTML5 ?• NO es un lenguaje de programación • NO es el remplazo de FLASH
  3. 3. ¿ QUÉ ES HTML5 ?HTML5 ES UNA COLECCIÓN DE ESTÁNDARES PARA EL DESARROLLO Y DISEÑO DE PÁGINAS WEB.
  4. 4. ? WHATWGWEB HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP
  5. 5. ? W3CWORLD WIDE WEB CONSORTIUM
  6. 6. ALGUNOS DE LOS OBJETIVOS DE HTML5 • SOPORTAR EL CONTENIDO EXISTENTE. • SER INDEPENDIENTE DEL DISPOSITIVO. • REDUCIR LA NECESIDAD DE PLUGINS EXTERNOS (SILVERLIGHT, FLASH, OTROS). • LAS NUEVAS CARACTERÍSTICAS DEBEN BASARSE EN HTML, CSS, DOM Y JAVASCRIPT. • MEJOR MANEJO DE ERRORES.
  7. 7. NUEVOS ELEMENTOS DE SEMÁNTICA
  8. 8. http://goo.gl/Zxmf
  9. 9. NUEVO DOCTYPE
  10. 10. <META ...>
  11. 11. NO MÁS TYPE=“” EN<SCRIPT /> Y <LINK />
  12. 12. ALGUNAS DE LAS NUEVAS ETIQUETAS
  13. 13. • <HEADER> • <FIGURE>• <SECTION> • <SMALL> Redefined• <ARTICLE> • <MARK>• <NAV> • <OUTPUT>• <ASIDE> • <AUDIO>• <CANVAS> • <VIDEO>• <SVG>
  14. 14. MAQUETAR EN HTML5
  15. 15. Input[Type] • number • datetime, • range datetime-local, • email date, • url month, • search week, • color time • tel
  16. 16. NUEVOS ATRIBUTOS • autofocus • novalidate • placeholder • formaction • form • formenctype • required • formmethod • autocomplete • formnovalidate • pattern • formtarget • dirname • contenteditable
  17. 17. DATA ATTRIBUTE
  18. 18. DETECTAR EL SOPORTE DE ATRIBUTOS
  19. 19. AUDIO Y VIDEO
  20. 20. FORMATOS QUE SOPORTAN LOSNAVEGADORES MÁS USADOS DE FORMA NATIVA
  21. 21. AUDIO CODECS
  22. 22. VIDEO CODECS
  23. 23. GRÁFICAS 2D & 3D
  24. 24. WEBGLEs un tecnología que permite generar gráficos 3D acelerados por hardware en el navegador, sin necesidad de instalar nuevo software
  25. 25. <CANVAS>Es un entorno para crear imágenes dinámicas.
  26. 26. EJEMPLO CANVAShttp://disneydigitalbooks.go.com/tron/
  27. 27. <SVG> Scalable Vector GraphicsEs un formato que te permite realizar gráficos vectoriales escalables en la web.
  28. 28. EJEMPLO SVG http://www.drawastickman.com/
  29. 29. CSS3Cascading Style Sheets level 3 http://lea.verou.me/css3-secrets/
  30. 30. TRANSICIONES
  31. 31. ANIMACIONES
  32. 32. CSS TRANSFORMACIONES
  33. 33. VIDEOJUEGOS
  34. 34. FRAMEWORKS
  35. 35. http://impactjs.com/
  36. 36. http://www.scirra.com/construct2
  37. 37. ¿ CON QUÉ TRABAJAR HTML5 ?
  38. 38. PARA LA PLAYBOOK
  39. 39. PROGRAMAR ES MUY FÁCIL
  40. 40. PROGRAMAR ES MUY FÁCIL
  41. 41. ¿ PREGUNTAS ? Soporte@himediadigital.com
  42. 42. MUCHAS GRACIASAlexander Cubillos JaureguiSoporte: Soporte@himediadigital.com

×