Post on 18-Nov-2014
description
Introducción a HTML 5Alejandro Lagos
alejandrolagosr.wordpress.comLagosRguez
La evolución de HTML
La plataforma web está creciendo…
Y resolviendo los problemas clave de los desarrolladores
Más desarrolladores…
Más usuarios también…
5 > 4
Hasta hace poco no podías dibujar en la web…
Aunque con ellos podías hacerlo posible
El video es complicado y fuera de tu control
HTML 5 hace tan fácil <video> como <img>
La vida es mejor cuando estás ubicado
Y los navegadores ahora también estás ubicados
//La API de geolocalización ofrece a tus aplicaciones un sistema de ubicación
Las aplicaciones web necesitan trabajar en cualquier lugar
//Localmente: bases de datos, almacenamiento en caché, el user data, y los recursos de la aplicación
Web poderosa == Aplicaciones poderosasPero..
Más poder == Más responsabilidad
//Los web workers ayudan a ejecutar scripts en segundo plano.
Nue
vos
elem
ento
s• article• aside• audio• canvas• command• datagrid• datalist• datatemplate• embed• event-source• figure
• header• mark• meter• nav• nest• output• progress• source• time• video• footer
Sintaxis en XHTML 1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”http://www.w3.org/TR/xhtml1/DTD/chtml1-strict.dtd><html xmlns=http://www.w3.org/1999/xhtml>
<head><meta http-equiv=“Content-Type” content=“text/html:
Charset=utf-8”>
Sintaxis en HTML 5
<!doctype html><html>
<head><meta charset = “utf-8”>
Digamos adiós…• Frames
• acronym, basefont, big, center, font, s, strike, tt, u
• atributo language en los scripts
• carga de atributos de presentación: cellpading, cellspacing, width & height en tablas y celdas, align & valign,clear,size en las entradas
Web Forms 2.0
• Un set de elementos, atributos y tipos de entrada
• Completo modelo de repetición para formularios con campos recursivos
• Mejores soluciones para Combo-boxes y sugerencias de búsqueda autocompletada (atributo list, datalist & select)
Tipos de entrada
Tipo de entrada Descripción de la entrada
tel Un número telefónico
search Una entrada de búsqueda
url Una dirección
mail Un e-mail
datetime Una hora o fecha
range Un numero dentro de un rango
color Colores con valor hexadecimal
Y algunos más…
<input type = “date”> en Opera
Atributos• required, placeholder, autofocus, autocomplete, inputmode
• Validación con el atributo pattern (usando expresiones regulares)
• min, max (número de archivos para subidas multi-archivo)
Web Applications 1.0
• Set de elementos, atributos y APIs
• Porque ya no estamos en 1998
• La web ya no es una colección de páginas estáticas
La web en 1998
La web en la actualidad
Elementos• metter, progress, output, time
• m para contenido marcado (como resultado de búsquedas)
• embed (finalmente un estándar)
• video y audio
Atributos
• ping para links (rastreo de redireccionamientos)
• target está de vuelta!
• contenteditable (finalmente un estándar)
• <iframe> tiene ahora seamless y sandbox
APIs• Set de objetos Javascript, métodos y eventos
+Drag and drop+Canvas (estandarizado)+Notificaciones+Mensajes entre documentos+Media (estandarizado)+Stream múltiple+add(), has(), remove(), hasFocus()+Mucho, mucho, mucho más…
¿Y todo esto… cuando?
2022*Incluyendo las dos especificaciones y la prueba completa.
¿En verdad importa?
NO
3 razones por las que no debe importarte:
1.- En 2012 se acabará el mundo.
2.- Hay implantaciones interoperables actualmente.
3.- Por que puedes empezar desde HOY
The HTML 5 Test:http://html5test.com
W3 Schools:http://www.w3schools.com
HTML 5 Rocks:http://www.html5rocks.com
W3:http://www.w3.org
Links de interés
Muchas Gracias!
Alejandro Lagos
alejandrolagosr.wordpress.com
Introducción a HTML 5
LagosRguez