Este documento resume las características principales de HTML5 y su aplicación para el desarrollo de videojuegos. HTML5 no es un lenguaje de programación ni reemplaza a Flash, sino que es una colección de estándares para el desarrollo de páginas web. Incluye nuevos elementos semánticos, formatos de audio y video nativos, gráficos 2D y 3D, y transiciones y animaciones a través de CSS3. Esto permite crear videojuegos directamente en el navegador sin plugins externos.

2. Inmersión a HTML5
y Videojuegos
Alexander Cubillos Jauregui

3. ¿ QUÉ NO ES HTML5 ?
• NO es un lenguaje de programación
• NO es el remplazo de FLASH

4. ¿ QUÉ ES HTML5 ?
HTML5 ES UNA COLECCIÓN DE ESTÁNDARES PARA
EL DESARROLLO Y DISEÑO DE PÁGINAS WEB.

5. ?
WHATWG
WEB HYPERTEXT APPLICATION TECHNOLOGY
WORKING GROUP

6. ?
W3C
WORLD WIDE WEB CONSORTIUM

7. 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.

8. NUEVOS ELEMENTOS DE SEMÁNTICA

9. http://goo.gl/Zxmf

10. NUEVO DOCTYPE

11. <META ...>

12. NO MÁS TYPE=“” EN
<SCRIPT /> Y <LINK />

13. ALGUNAS DE LAS NUEVAS ETIQUETAS

14. • <HEADER> • <FIGURE>
• <SECTION> • <SMALL> Redefined
• <ARTICLE> • <MARK>
• <NAV> • <OUTPUT>
• <ASIDE> • <AUDIO>
• <CANVAS> • <VIDEO>
• <SVG>

15. MAQUETAR EN HTML5

17. Input[Type]
• number • datetime,
• range datetime-local,
• email date,
• url month,
• search week,
• color time
• tel

18. NUEVOS ATRIBUTOS
• autofocus • novalidate
• placeholder • formaction
• form • formenctype
• required • formmethod
• autocomplete • formnovalidate
• pattern • formtarget
• dirname • contenteditable

19. DATA ATTRIBUTE

20. DETECTAR EL SOPORTE DE ATRIBUTOS

21. AUDIO Y VIDEO

23. FORMATOS QUE SOPORTAN LOS
NAVEGADORES MÁS USADOS DE
FORMA NATIVA

24. AUDIO CODECS

25. VIDEO CODECS

26. GRÁFICAS 2D & 3D

27. WEBGL
Es un tecnología que permite generar gráficos 3D
acelerados por hardware en el navegador, sin
necesidad de instalar nuevo software

28. <CANVAS>
Es un entorno para crear imágenes dinámicas.

30. EJEMPLO CANVAS
http://disneydigitalbooks.go.com/tron/

31. <SVG>
Scalable Vector Graphics
Es un formato que te permite realizar gráficos
vectoriales escalables en la web.

32. EJEMPLO SVG
http://www.drawastickman.com/

33. CSS3
Cascading Style Sheets level 3
http://lea.verou.me/css3-secrets/

34. TRANSICIONES

36. ANIMACIONES

38. CSS TRANSFORMACIONES

40. VIDEOJUEGOS

41. FRAMEWORKS

42. http://impactjs.com/

43. http://www.scirra.com/construct2

44. ¿ CON QUÉ TRABAJAR
HTML5 ?

46. PARA LA PLAYBOOK

48. PROGRAMAR ES MUY FÁCIL

49. PROGRAMAR ES MUY FÁCIL

50. ¿ PREGUNTAS ?
Soporte@himediadigital.com

51. MUCHAS GRACIAS
Alexander Cubillos Jauregui
Soporte: Soporte@himediadigital.com