introducción a html5
DESCRIPTION
Un overview de los principales elementos nuevos en HTML5, así como la explicación de ellos, de manera fácil de entenderTRANSCRIPT
![Page 1: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/1.jpg)
Introducción a HTML 5Alejandro Lagos
alejandrolagosr.wordpress.comLagosRguez
![Page 2: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/2.jpg)
La evolución de HTML
![Page 3: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/3.jpg)
![Page 4: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/4.jpg)
La plataforma web está creciendo…
![Page 5: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/5.jpg)
Y resolviendo los problemas clave de los desarrolladores
![Page 6: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/6.jpg)
Más desarrolladores…
![Page 7: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/7.jpg)
Más usuarios también…
![Page 8: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/8.jpg)
5 > 4
![Page 9: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/9.jpg)
![Page 10: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/10.jpg)
Hasta hace poco no podías dibujar en la web…
![Page 11: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/11.jpg)
Aunque con ellos podías hacerlo posible
![Page 12: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/12.jpg)
El video es complicado y fuera de tu control
![Page 13: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/13.jpg)
HTML 5 hace tan fácil <video> como <img>
![Page 14: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/14.jpg)
La vida es mejor cuando estás ubicado
![Page 15: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/15.jpg)
Y los navegadores ahora también estás ubicados
![Page 16: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/16.jpg)
//La API de geolocalización ofrece a tus aplicaciones un sistema de ubicación
![Page 17: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/17.jpg)
Las aplicaciones web necesitan trabajar en cualquier lugar
![Page 18: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/18.jpg)
//Localmente: bases de datos, almacenamiento en caché, el user data, y los recursos de la aplicación
![Page 19: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/19.jpg)
Web poderosa == Aplicaciones poderosasPero..
Más poder == Más responsabilidad
![Page 20: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/20.jpg)
//Los web workers ayudan a ejecutar scripts en segundo plano.
![Page 21: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/21.jpg)
![Page 22: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/22.jpg)
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
![Page 23: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/23.jpg)
![Page 24: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/24.jpg)
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”>
![Page 25: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/25.jpg)
Sintaxis en HTML 5
<!doctype html><html>
<head><meta charset = “utf-8”>
![Page 26: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/26.jpg)
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
![Page 27: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/27.jpg)
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)
![Page 28: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/28.jpg)
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…
![Page 29: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/29.jpg)
<input type = “date”> en Opera
![Page 30: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/30.jpg)
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)
![Page 31: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/31.jpg)
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
![Page 32: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/32.jpg)
La web en 1998
![Page 33: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/33.jpg)
La web en la actualidad
![Page 34: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/34.jpg)
Elementos• metter, progress, output, time
• m para contenido marcado (como resultado de búsquedas)
• embed (finalmente un estándar)
• video y audio
![Page 35: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/35.jpg)
Atributos
• ping para links (rastreo de redireccionamientos)
• target está de vuelta!
• contenteditable (finalmente un estándar)
• <iframe> tiene ahora seamless y sandbox
![Page 36: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/36.jpg)
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…
![Page 37: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/37.jpg)
¿Y todo esto… cuando?
2022*Incluyendo las dos especificaciones y la prueba completa.
![Page 38: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/38.jpg)
¿En verdad importa?
NO
![Page 39: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/39.jpg)
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
![Page 41: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/41.jpg)
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
![Page 42: Introducción a HTML5](https://reader033.vdocuments.co/reader033/viewer/2022050801/546db87aaf795971298b53a1/html5/thumbnails/42.jpg)
Muchas Gracias!
Alejandro Lagos
alejandrolagosr.wordpress.com
Introducción a HTML 5
LagosRguez