Introducción a HTML5

779 views

Published on

Un overview de los principales elementos nuevos en HTML5, así como la explicación de ellos, de manera fácil de entender

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
779
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a HTML5

  1. 1. Introducción a HTML 5 Alejandro LagosLagosRguez alejandrolagosr.wordpress.com
  2. 2. HTML 5 hace tan fácil <video> como <img>
  3. 3. //La API de geolocalización ofrece a tus aplicaciones un sistema de ubicación
  4. 4. //Localmente: bases de datos, almacenamiento en caché, el user data, y los recursos de la aplicación
  5. 5. Web poderosa == Aplicaciones poderosas Pero.. Más poder == Más responsabilidad
  6. 6. //Los web workers ayudan a ejecutar scripts en segundo plano.
  7. 7. • article • header• aside • mark• audio • meter• canvas • nav• command • nest• datagrid • output• datalist • progress• datatemplate • source• embed • time• event-source • video• figure • footer
  8. 8. <!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”>
  9. 9. <!doctype html><html> <head> <meta charset = “utf-8”>
  10. 10. • 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
  11. 11. • 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)
  12. 12. Tipo de entrada Descripción de la entradatel Un número telefónicosearch Una entrada de búsquedaurl Una direcciónmail Un e-maildatetime Una hora o fecharange Un numero dentro de un rangocolor Colores con valor hexadecimal
  13. 13. <input type = “date”> en Opera
  14. 14. • required, placeholder, autofocus, autocomplete, inputmode• Validación con el atributo pattern (usando expresiones regulares)• min, max (número de archivos para subidas multi- archivo)
  15. 15. • 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
  16. 16. • metter, progress, output, time• m para contenido marcado (como resultado de búsquedas)• embed (finalmente un estándar)• video y audio
  17. 17. • ping para links (rastreo de redireccionamientos)• target está de vuelta!• contenteditable (finalmente un estándar)• <iframe> tiene ahora seamless y sandbox
  18. 18. • 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…
  19. 19. *Incluyendo las dos especificaciones y la prueba completa.
  20. 20. 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
  21. 21. Haz la prueba con tú navegador: http://html5test.com
  22. 22. 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
  23. 23. Introducción a HTML 5 Alejandro Lagos Muchas Gracias!LagosRguez alejandrolagosr.wordpress.com

×