HTML 5<br />Alejandro Martín<br />amartin@informatica64.com<br />
Una evolución de HTML 4 y DOM2.<br />Redefinición de las etiquetas de marcado<br />Formalización de APIS para la ayuda al ...
Historia<br />
Nuevas etiquetas y atributos HTML<br />APIs asociadas para ayudar a crear Aplicaciones Web<br />No todo es HTML5<br />Audi...
Empezando con HTML5<br />Tipo de documento<br />Etiquetas de HTML5<br />
HTML 4.01<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <br /><!DOCTYPE ...
Abandonar el uso de tablas y div para la maquetación de la página.<br />Nuevas etiquetas:<br />Estructurar un documento<br...
HTML5 incluye nuevas etiquetas para identificar datos como las fechas, cantidades o realizar énfasis en palabras o textos:...
Nuevos tipos para la etiqueta input:<br />HTML Forms 2.0<br />datetime<br />datetime-local<br />date<br />month<br />week<...
Basefont, big, center, font, s, strike, tt y u<br />Frame, frameset y noframes<br />acronym, applet, isindex, dir<br />Eti...
DEMO<br />
Aplicar estilos con CSS3<br />Una primera impresión<br />
HTML5 se encarga de definir la estructura del documento<br />CSS3 define como se presenta el documento<br />HTML5 & CSS3<b...
Historia<br />
Dividida en módulos en distintas fases de desarrollo<br />Estado actual del CSS3<br />http://www.w3.org/Style/CSS/current-...
Colores:<br />name, hex, hex (corto), RGB, RGBA, HSL y HSLA <br />gradient<br />Transformaciones de Texto<br />text-shadow...
Borders<br />border-radius<br />Transiciones<br />transition<br />CSS3 Selectors<br />Descendientes, Hijos, adyacentes, at...
Maquetación con CSS3<br />
Dibujado con HTML5<br />CANVAS Y SVG<br />
Creación de gráficos vectoriales bidimensionales<br />Integrado con XHTML, DOM, CSS, XSL y SMIL (animaciones)<br />Tipos d...
Inclusión del gráfico SVG en el navegador<br />Embebido en el código HTML o XHTML (<svg>)<br />Apertura del documento SVG ...
Nueva etiqueta HTML5 para la generación dinámica de gráficos a través de la API Canvas 2D API<br />API para la generación ...
SVG y CANVAS<br />
Contenido multimedia<br />Audio y Video<br />
Las etiquetas audio y video permiten incorporar audio y video en páginas HTML<br />Admiten etiquetas para arrancar al inic...
Audio y Video (Codecs)<br />
Insertar Video en HTML5<br />
Almacenamiento Local<br />SessionStorage y LocalStorage<br />
Permitir almacenar datos estructurados en el lado del cliente de forma «semejante» a las cookies HTTP<br />Los datos se al...
Almacenamiento local<br />
En cada actualización se adoptan nuevas características de HTML 5<br />WebGL: API 3D para CANVAS<br />Acceso a dispositivo...
Upcoming SlideShare
Loading in …5
×

Html 5

2,408 views

Published on

Charla impartida por Alejandro Martín de Informatica 64 en el evento BlogCamp! que tuvo lugar en El Escorial los días 22, 23 y 24 de Septiembre.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,408
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html 5

  1. 1. HTML 5<br />Alejandro Martín<br />amartin@informatica64.com<br />
  2. 2. Una evolución de HTML 4 y DOM2.<br />Redefinición de las etiquetas de marcado<br />Formalización de APIS para la ayuda al desarrollo de Aplicaciones Web<br />W3C Working Draft 24 June 2010<br />http://www.w3.org/TR/html5/<br />¿Qué es HTML 5?<br />
  3. 3. Historia<br />
  4. 4. Nuevas etiquetas y atributos HTML<br />APIs asociadas para ayudar a crear Aplicaciones Web<br />No todo es HTML5<br />Audio y Video <br />Edición en línea<br />Aplicaciones Offline<br />Histórico<br />Drag & Drop<br />Geolocalización<br />API 2D con Canvas<br />Almacenamiento Local<br />Web Workers<br />Web Sockets API<br />Web Socket Protocol<br />Mensajería<br />
  5. 5. Empezando con HTML5<br />Tipo de documento<br />Etiquetas de HTML5<br />
  6. 6. HTML 4.01<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><br />HTML 5<br /><!DOCTYPE HTML><br />Un único y simple DOCTYPE<br />
  7. 7. Abandonar el uso de tablas y div para la maquetación de la página.<br />Nuevas etiquetas:<br />Estructurar un documento<br />HEADER<br />SECTION<br />ARTICLE<br />ASIDE<br />FOOTER<br />NAV<br />FIGURE<br />DIALOG<br />
  8. 8. HTML5 incluye nuevas etiquetas para identificar datos como las fechas, cantidades o realizar énfasis en palabras o textos: <br />MARK, TIME, METER y PROGRESS<br />También se incluyen etiquetas para la publicación y manejo de datos:<br />DATAGRID, DETAILS y DATALIST<br />Otras etiquetas<br />
  9. 9. Nuevos tipos para la etiqueta input:<br />HTML Forms 2.0<br />datetime<br />datetime-local<br />date<br />month<br />week<br />time<br />number<br />range<br />email<br />url<br />Nuevos atributos:<br />required, placeholder, list<br />
  10. 10. Basefont, big, center, font, s, strike, tt y u<br />Frame, frameset y noframes<br />acronym, applet, isindex, dir<br />Etiquetas no soportadas<br />
  11. 11. DEMO<br />
  12. 12. Aplicar estilos con CSS3<br />Una primera impresión<br />
  13. 13. HTML5 se encarga de definir la estructura del documento<br />CSS3 define como se presenta el documento<br />HTML5 & CSS3<br />
  14. 14. Historia<br />
  15. 15. Dividida en módulos en distintas fases de desarrollo<br />Estado actual del CSS3<br />http://www.w3.org/Style/CSS/current-work<br />
  16. 16. Colores:<br />name, hex, hex (corto), RGB, RGBA, HSL y HSLA <br />gradient<br />Transformaciones de Texto<br />text-shadow<br />Maquetación en Columnas <br />column-count, column-width, column-gap<br />Múltiples fondos<br />Background-position<br />Algunas novedades<br />
  17. 17. Borders<br />border-radius<br />Transiciones<br />transition<br />CSS3 Selectors<br />Descendientes, Hijos, adyacentes, atributos, …<br />CSS3 Media Queries<br /><link rel="stylesheet" media="screen and (max-width:400px)" href="estilo1css" /> <br /><link rel="stylesheet" media="screen and (min-width:400px) " href="estilo2.css" />  <br />Algunas novedades<br />
  18. 18. Maquetación con CSS3<br />
  19. 19. Dibujado con HTML5<br />CANVAS Y SVG<br />
  20. 20. Creación de gráficos vectoriales bidimensionales<br />Integrado con XHTML, DOM, CSS, XSL y SMIL (animaciones)<br />Tipos de objetos<br />Formas gráficas<br />Imágenes<br />Textos<br />SVG (Scalable Vector Graphics)<br />
  21. 21. Inclusión del gráfico SVG en el navegador<br />Embebido en el código HTML o XHTML (<svg>)<br />Apertura del documento SVG (*.svg)<br />Como imagen en CSS<br />Usando el objeto object<br />Usando imgo embed<br />SVG (Scalable Vector Graphics)<br /><?xmlversion="1.0" standalone="no"?><br /><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" <br />"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><br /><svgwidth="100%" height="100%" version="1.1« xmlns="http://www.w3.org/2000/svg"><br /><rect x="20" y="20" rx="20" ry="20" width="250" height="100"<br />style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/><br /></svg><br />
  22. 22. Nueva etiqueta HTML5 para la generación dinámica de gráficos a través de la API Canvas 2D API<br />API para la generación de Gráficas, animaciones, juegos, etc…<br />Aceleración por hardware en IE9 utilizando la GPU<br />CANVAS<br />
  23. 23. SVG y CANVAS<br />
  24. 24. Contenido multimedia<br />Audio y Video<br />
  25. 25. Las etiquetas audio y video permiten incorporar audio y video en páginas HTML<br />Admiten etiquetas para arrancar al inicio, ejecutarse en bucle y mostrar controles<br />Se admiten múltiples fuentes para asegurar la visualización en todos los navegadores<br />API para el acceso a los elementos y poder manipularlos<br />Audio y Video <br />
  26. 26. Audio y Video (Codecs)<br />
  27. 27. Insertar Video en HTML5<br />
  28. 28. Almacenamiento Local<br />SessionStorage y LocalStorage<br />
  29. 29. Permitir almacenar datos estructurados en el lado del cliente de forma «semejante» a las cookies HTTP<br />Los datos se almacenan como un listado de pares clave/valor<br />Con sessionStorage<br />Almacenamiento durante la sesión de la página<br />Con localStorage<br />Almacenamiento compartido entre múltiples páginas y sesiones, restringido al dominio.<br />Almacenamiento local<br />
  30. 30. Almacenamiento local<br />
  31. 31. En cada actualización se adoptan nuevas características de HTML 5<br />WebGL: API 3D para CANVAS<br />Acceso a dispositivos<br />Webcam, micrófonos, almacenamiento externo<br />API para el trabajo con audio<br />Manipular, analizar y generar<br />Mejoras en videos: Streaming<br />TouchScreen<br />…<br />¿FUTURO?<br />

×