Presentación base para el curso de HTML5 en video - UTB - Serie Cacharreando y Explorando. Ejemplos base para no iniciados

1. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Explorando HTML5
Comprendiendo HTML5
No todo es HTML

2. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar

3. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
A tener en cuenta
• Antes de comenzar con este “viaje”, deberías conocer
conceptos básicos de Sistema Operativo, cómo
instalar software, como trabajar con archivos,
carpetas
• No necesitas un super computador, tampoco una
Tablet es cómoda, pero con un pc estándar y
navegadores es suficiente

4. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Tu primer sitio web
• Navegadores
• Editores
• Texto
• Imagen
Instalar Software
• Aspecto
• Contenidos
• Recursos
• Navegación
Definir tu proyecto
• Archivos
• Carpetas
Trabajo con archivos
• Semántico
• Estructural
• Otros
HTML
• Bases
• Frameworks
CSS
• Bases
• Frameworks
JavaScript
• FTP
• Local
Publicar/Administrar
tu proyecto
• Servidores
• Serv. Local
• Hosting
• Dominio
Entender cómo
funciona la web

5. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Descripción
Cómo se
comporta
(plano o para
interacción)
La apariencia
gráfica, cómo
se ve (incluye
animaciones)
Contenido,
texto,
adicionales
Js css3 HTML5

6. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Solicita
Solicita
Responde (HTML5)
Responde (HTML5)
¿Cómo funciona la web?
Dispositivos conectados a la web son clientes, dispositivos que
responden, comúnmente serán servidores.
Cliente
(Navegador)
Cliente
(Navegador)
Servidor
Mod 1
Mod 1
Mod 1

7. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Otros factores
• Conexión a Internet
• El protocolo (TCP/IP)
• DNS (Nombres de dominio)
• El protocolo HTTP (transferencia de hipertexto)
• Archivos componentes
• Etiquetas CSS, HTML, código JS
• Otros códigos
• Recursos

8. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Solicita
Responde (HTML5)
Web estática o dinámica
Estática se refiere a un documento pre creado (HTML5),
dinámica implica intercambio de información con otros módulos
Cliente
(Navegador)
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1

9. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Solicita
Responde (HTML5)
Servidor local web
Podemos tener un servidor web, pero en local, dicho en otra
palabra, en tu pc. Comúnmente llamado “Localhost”.
Cliente
(Navegador)
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1
Servidor
Mod
1
Mod
1
Mod
1

10. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Recordar (estática)
HTML
JS
URL
HTML- CSS - JS

11. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Recordar (dinámica)
HTML
JS
URL
HTML- CSS - JS
Página
dinámica
BD
PRG
Otros

12. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Cómo se divide HTML5
Semántica CSS3 Multimedia Gráficos y 3D
Multi dispositivos Desempeño Almacenamiento Offline Conectividad

13. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Semántica
• Nuevas secciones de contenido.
• Contenidos con más “significado”
• Formularios Mejorados
• MathML

14. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
CSS3
• Lenguaje ampliado
• Bordes
• Animaciones
• Tipografía
• Flexbox – presentación y columnas
• Más de 200 propiedades

15. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Multimedia
• Soporte nativo para audio y video
• WebRTC – comunicación en tiempo real
• Uso de la API de la cámara
• Uso de subtítulos (track)

16. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Gráficos 2D , 3D
• Canvas
• Soporte SVG
• WebGL – gráficos 3D

17. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Acceso al dispositivo
• Uso de la API de la cámara
• Eventos táctiles
• Geolocalización
• Detección de orientación del dispositivo

18. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Rendimiento e integración
• Webworkers
• Procesos asincrónicos,
(AJAX incluido)
• Motores JS más potentes
• History API
• Contenido editable
• Drag & Drop
• Gestión del foco
• Protocolos de la web
• Renderización animaciones
• Control Full Screen
• Eventos en línea y fuera de
línea

19. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
HTML5 local storage
• Las aplicaciones pueden guardar información para
uso offline
• Soporta eventos con y sin conexión
• Disminuye el tráfico hacia el servidor
• Mayor tamaño respecto a las cookies de 4Kb,
pasamos a un rango entre 5Mb y 10 Mb

20. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Conectividad
• Con Websockets es posible crear conexión
permanente e intercambiar datos no HTML
• Eventos de servidor hacia el cliente
• WebRTC, básicamente es comunicación en tiempo
real sin plugins o apps externas

21. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Y está en contínua actualización
Existen varias capas que estarán disponibles una vez
que se estandaricen y realicen varias pruebas
Es cuestión de tiempo
Cada vez más estándar – viejos días de la guerra de los
navegadores
Optimización constante
Aún no vemos su máximo aprovechamiento

22. Explorando HTML5 - > Introducción
Edison Monsalve C - @morpheusco Universidad Tecnológica de Bolívar
Agradecimientos
www.dominiopublico.es
Wikimedia.org
W3.org
W3schools.com
Developer.mozilla.org
Flaticon e Iconfinder