Introducción a HTML 5 Alejandro Lagos alejandrolagosr.wordpr ess.com LagosRgu ez
Introducción a HTML5
Nov 18, 2014
Un overview de los principales elementos nuevos en HTML5, así como la explicación de ellos, de manera fácil de entender
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
