HTML5 es un lenguaje de marcado que salió en 2008 e introduce nuevas etiquetas, atributos y funcionalidades como video, audio, gráficos, almacenamiento local y acceso a dispositivos. Ofrece una semántica mejorada mediante etiquetas como header, nav y footer, así como nuevos tipos de entrada. También permite el almacenamiento local de datos, conectividad mediante WebSockets, multimedia y efectos visuales a través de canvas y SVG.

1. HTML5
Ing. Tec. Andrés Aguilar
andresyoshiimar@gmail.com
@nano_yosh

2. ¿Qué es HTL5?

3. ¿Qué es HTL5?
• Salió en 2008
• Nuevas etiquetas
– Nuevos atributos
• Soporte total de CSS3
• Video y Audio
• Graficos 2D/3D
• Almacenamiento local
– Base de datos SQL local
• Aplicaciones Web

4. Nueva semántica

5. Semántica
• Nuevas etiquetas:
– header
– nav
– section
– article
– hgroup
– footer

6. Semántica
• Nuevos atributos:
– Input type:
• calendar
• date
• time
• email
• url
• search
required [=“required”]

7. Almacenamiento local

8. Almacenamiento local
API java script para almacenar datos del
lado del cliente
• Cache de aplicación
• Almacenaje local
• Base de datos SQL

9. Acceso a dispositivos

10. Acceso a dispositivos
• Acceso a dispositivos periféricos
como:
– Cámara y micrófono
– Datos locales
– Orientación
• Geolocalización

11. Conectividad

12. Conectividad
• Sockets Web
NodeJS
Socket-IO

13. Multimedia

14. Multimedia
Etiquetas para medios
– Audio
– Video
Formatos:
ogg
mp3
mp4

15. Gráficos y efectos

16. Gráficos y efectos
• Elemento canvas
– WebGL y
– las imágenes SVG

17. Rendimiento e integración

18. Rendimiento e integración
• Almacenamiento en caché HTTP
• Almacenamiento en caché de datos
locales
• AJAX

19. Estilos CSS3

20. Estilos CSS3
• Transformaciones 2D
• Transiciones
• Transformaciones 3D
• Fuentes Web
• ResponsiveDesign

21. Empresas con HTML5

22. ¿El futuro de la Web?
Presente de la Web

23. Enlaces de interés
• Whatwg - http://whatwg.org
• W3C - http://www.w3.org/
• CodeJobs - http://www.codejobs.biz
• Mejorando.la - https://mejorando.la
• MaestrosDelWeb - http://maestrosdelweb.com
• Cristalab - http://www.cristalab.com

24. Referencias
• W3C:
– http://www.w3.org/html/logo/
– http://www.w3schools.com/html/html5_intro.asp
• APPLE
– https://www.apple.com/html5/
• Html5rocks
– http://www.html5rocks.com/es/
• Whatwg
– www.whatwg.org/