Introducción a html5

Julio Cesar Avellaneda
Microsoft MVP ASP.NET
CoreGroup BDotNet
http://julitogtu.wordpress.com
@julitogtu

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?
Multime Aplicaciones
dia offline
Semánti Acceso a
ca dispositivos
Gráficas, Conectividad
efectos
CSS3 Rendimiento,
integración

Algunos cambios inicia
• <! DOCTYPE html>

• <html lang=“es”>

• <meta charset=“ytf-8”>

• <link rel=stylesheet href=estilos.css>

• <script src=jquery.js></script>

Elementos Semántico
Permiten 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ántico
header
nav
section

article aside

article

footer

Api para formularios
Nuevos 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 formularios
Nuevos atributos para evitar el uso de
código JavaScript.
• placeholder
• required
• autofocus
• Autocomplete
• formnovalidate

Elementos Multimedi
Dos 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ón
Permite determinar las coordenadas de
ubicación de un navegante.
• Obtenemos un objeto position
• Método
geolocation.getCurrentPosition(ok,[erro
r],[options])
• Objeto coors ofrece la latitud y la
longitud.

Storage
Lo 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…

Storage
HTML5 ofrece dos nuevos tipos de
storage:
• localStorage
• sessionStorage
Caracterí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(k
ey);

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.

Canvas
Para 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 ??

Introducción a html5

Recommandé

Recommandé

Contenu connexe

Similaire à Introducción a html5

Similaire à Introducción a html5 (20)

Plus de Julito Avellaneda

Plus de Julito Avellaneda (11)

Introducción a html5