Post on 12-Jun-2015
Julio Cesar AvellanedaMicrosoft MVP ASP.NETCoreGroup BDotNethttp://julitogtu.wordpress.com@julitogtu
Introducción a HTML5
Qué es HTML5?• Ultima versión de HTML
• Agrupa diversas características
• Estándares para el diseño Web
• Estándares para el desarrollo Web
• Nueva forma para ver la Web
• HTML5 = HTML + JavaScript + CSS3
Revolución de la Web• HTML -> Contenido
• JavaScript -> Comportamiento
• CSS -> Presentación
• No plugins
• Animaciones
• Bases de datos
• Dispositivos móviles
• En resumen una nueva Web….
Y que hay de nuevo?
Multimedia
Aplicaciones offline
Semántica
Acceso a dispositivos
Gráficas, efectos
Conectividad
CSS3 Rendimiento, integración
Algunos cambios iniciales• <! DOCTYPE html>
• <html lang=“es”>
• <meta charset=“ytf-8”>
• <link rel=stylesheet href=estilos.css>
• <script src=jquery.js></script>
Elementos SemánticosPermiten estructurar de una manera
lógica una página Web, cambio de divs
por los nuevos elementos semánticos.
header hgroup nav
section article footer
aside
Elementos Semánticosheader
footer
aside
section
article
article
nav
Api para formulariosNuevos tipos de input para cumplir
con los campos estándar de un
formulario.search number range
color tel url
email date month
week time datetime
Api para formulariosNuevos atributos para evitar el uso de
código JavaScript.
• placeholder
• required
• autofocus
• Autocomplete
• formnovalidate
Elementos MultimediaDos nuevos elementos, audio y video.
No Silverlight, no flash, no plugins.
• Características similares
• Múltiples formatos
• Controles básicos
• Manipulación mediante JavaScript
• No full screen.
GeolocalizaciónPermite determinar las coordenadas
de ubicación de un navegante.
• Obtenemos un objeto position
• Método
geolocation.getCurrentPosition(ok,
[error],[options])
• Objeto coors ofrece la latitud y la
longitud.
StorageLo que se tenía antes eran las cookies:
• Inseguras
• Poco espacio
• Texto plano
• Viajan al servidor en cada petición
• En resumen no eran lo mejor…
StorageHTML5 ofrece dos nuevos tipos de
storage:
• localStorage
• sessionStorageCaracterísticas:
• Espacio recomendado 5 Mb
• Almacenamiento key/value
• Solo en el cliente
Storage Para almacenar:
• window.sessionStorage/
localStorage.setItem(key, value); Para recuperar:
• window.sessionStorage/
localStorage.getItem(key); Para eliminar:
• window.sessionStorage/
localStorage.removeItem(key);
Canvas El Canvas es uno de los elementos más
revolucionarios incluidos en HTML5.
• Superficie de dibujo
• Similar a un lienzo
• Líneas, curvas, figuras geométricas
• Texto
• Imágenes
Canvas• Animaciones
• Audio y Video
• Juegos
• Charts
• Librerías especificas para su trabajo como
processing.js, raphael.js, KinecticJS entre
otras.
CanvasPara trabajar con el canvas:
• Obtener una referencia al elemento.
• Definir el contexto (2d o 3d).
• Por el momento solo se soporta 2d.
• Soportado en todos los browsers actuales.
• El límite la imaginación….
Y ahora que esperas para usar
HTML5 ??