Introducción a html5

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:


localStorage.getItem(key); Para eliminar:


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

Introducción a html5

Sports

Transcript of Introducción a html5