El futuro de la web
Intentaremos explicar...• ¿Cómo hemos llegado hasta aquí?• Situación actual.• Novedades• HTML5 vs xHTML.
¿Cómo hemos llegado hasta aquí?
HTML 4 1999
XHTML 1.0   2001
XHTML 2  2002
WHATWG  2004
WHATWG(Web Hypertext Application Technology Working Group)                    2004
HTML 5 2008
Y en 2011...
Y en 2011...• La W3C sigue desarrollando HTML5. •   Llegará a Candidate Recommendation en 2012. •   En 2014 se convertirá ...
Y en 2011...• Por su parte, el WHATWG abandonó la  numeración de versiones de HTML. •   No se plantean cuando estará acaba...
Novedades
Semántica
Semántica•   Nuevo enfoque semántico al    marcado de la web.•   Orientado a reforzar el    contenido de cada sección,    ...
Semántica
Semántica                                       xhtml<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www....
Semántica                                xhtml    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   ...
Semántica                            xhtml     <script type="text/javascript" src="/js/jquery.js"></script>               ...
Semántica                                     xhtml   <link type="text/css" rel="stylesheet" media="handheld" href="/css/s...
Semántica                   <header>  Grupo de ayudas introductorias o de navegación.
Semántica
Semántica                      <nav>  Sección de una página que enlaza a otras páginas o                     secciones.
Semántica
Semántica                     <footer> Representa un pie para el contenido de la sección más               cercana que le ...
Semántica
Semántica                     <article>      Composición contenida que es distribuible o reutilizable independientemente, ...
Semántica
Semántica                    <section> Representa una sección genérica. Es una agrupación de     contenido, normalmente co...
Semántica
Semántica                       <aside>  Representa una sección de la página con contenido menos relacionado con el resto ...
Semántica
Semántica
Semántica                 Muchas más...  <hgroup>, <figure>, <figcaption>, <time>, <summary>
Semántica •   Puede usarse YA:     •   Modernizr     •   HTML5 Boilerplate     •   Html5shiv     •   ...
Audio & Video
Audio & Video•   Capacidad de incrustar video    y audio de forma nativa.•   Controles proporcionados    por el propio nav...
Audio & Video• Guerra de formatos: •   H.264 (mp4). Alta Calidad.     Propietario. Soportado por     Chrome, Safari, IE y ...
Audio & Video<video src=”nombrevideo.xxx”>....</video><audio src=”nombreaudio.xxx”>....</audio>
Conectividad
Conectividad•   Aplicaciones que necesitan    conexión directa con el    servidor (chats, juegos en    tiempo real...)•   ...
Conectividad•   Posibilidad de establecer    conexiones bidireccionales    con el servidor (websockets)    mediante un API...
Conectividadvar ws = new WebSocket("ws://echo.websocket.org");ws.onopen = function() { ... }ws.onclose = function() { ... ...
Conectividad             IE   Firefox   Safari   Chrome Opera  Anterior   8     3.6        4       10      11   Actual    ...
Acceso adispositivos
Acceso a dispositivos•   API de Geolocalización    (Google, Twitter, etc...).•   Acceso a micrófonos y    cámaras.•   Acce...
Acceso a dispositivos              IE   Firefox   Safari   Chrome Opera   Anterior   8     3.6        4       10          ...
Rendimiento e integración
Rendimiento e integración• Web workers. •   Posibilidad de ejecutar scripts     en paralelo (background). •   Las tareas “...
Rendimiento e integración• Web workers. •   Por seguridad, los web     workers no pueden acceder al     DOM, ni comunicars...
Rendimiento e integración• XMLHttpRequest 2 •   Seguimiento del progreso     (traking progress).     •   Métodos y funcion...
Rendimiento e integración• XMLHttpRequest 2 •   Subida de archivos (File upload).     •   Desarrollo de FILE API, con     ...
Rendimiento e integración• XMLHttpRequest 2 •   Peticiones entre dominios     (Cross-Domain).
Rendimiento e integración               IE   Firefox   Safari   Chrome Opera    Web   workers     9     3.5        4      ...
3D, gráficos y  efectos
3D, gráficos y efectos• SVG (Scalable Vector Graphics).  •   Gráficos vectoriales escalables para      la web.  •   Posibili...
3D, gráficos y efectos• Canvas.  •   Proporciona una superficie de      “dibujo” en el navegador que puede      modificarse m...
3D, gráficos y efectos• WebGL.  •   “Extiende” el elemento CANVAS      para poder utilizar gráficos 3D      nativos en el na...
3D, gráficos y efectos             IE   Firefox   Safari   Chrome Opera     SVG     9     3.5      3.2        9    10.6    ...
Offline yalmacenamiento
Offline y almacenamiento• Offline Application  Cache.  •   Permite ejecutar aplicaciones web      sin estar conectados a int...
Offline y almacenamiento• Offline Application  Cache.  •   El archivo app.manifest será el      encargado de referenciar los...
Offline y almacenamiento• Local Storage.  •   Cookies “vitaminadas”.  •   Podemos almacenar hasta 5MB de      información p...
Offline y almacenamiento• Indexed DB.  •   Interfaz para base de datos local que      contiene valores simples y objetos.  ...
Offline y almacenamiento              IE   Firefox   Safari   Chrome Opera    Offline     App      9     3.5        4       ...
¿Preguntas?
!GRACIAS¡     jfernandezp@cesser.com            @alwaison http://www.delicious.com/Alwaison
Upcoming SlideShare
Loading in...5
×

Html5 - El futuro de la web

1,511
-1

Published on

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
1,511
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Html5 - El futuro de la web

    1. 1. El futuro de la web
    2. 2. Intentaremos explicar...• ¿Cómo hemos llegado hasta aquí?• Situación actual.• Novedades• HTML5 vs xHTML.
    3. 3. ¿Cómo hemos llegado hasta aquí?
    4. 4. HTML 4 1999
    5. 5. XHTML 1.0 2001
    6. 6. XHTML 2 2002
    7. 7. WHATWG 2004
    8. 8. WHATWG(Web Hypertext Application Technology Working Group) 2004
    9. 9. HTML 5 2008
    10. 10. Y en 2011...
    11. 11. Y en 2011...• La W3C sigue desarrollando HTML5. • Llegará a Candidate Recommendation en 2012. • En 2014 se convertirá en Recommendation.
    12. 12. Y en 2011...• Por su parte, el WHATWG abandonó la numeración de versiones de HTML. • No se plantean cuando estará acabado HTML5, sino cuando podremos comenzar a usar las nuevas características.
    13. 13. Novedades
    14. 14. Semántica
    15. 15. Semántica• Nuevo enfoque semántico al marcado de la web.• Orientado a reforzar el contenido de cada sección, siendo este mucho más definido por las etiquetas que lo contienen.• <nav>, <head>, <footer>, <article>, <section>, <aside>...
    16. 16. Semántica
    17. 17. Semántica xhtml<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> html 5 <!DOCTYPE html>
    18. 18. Semántica xhtml <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> html 5 <meta charset=”UTF-8” />
    19. 19. Semántica xhtml <script type="text/javascript" src="/js/jquery.js"></script> html 5 <script src=”/js/jquery.js”></script>
    20. 20. Semántica xhtml <link type="text/css" rel="stylesheet" media="handheld" href="/css/styles.css" /> html 5 <link rel=”stylesheet” href=”/css/styles.css” />
    21. 21. Semántica <header> Grupo de ayudas introductorias o de navegación.
    22. 22. Semántica
    23. 23. Semántica <nav> Sección de una página que enlaza a otras páginas o secciones.
    24. 24. Semántica
    25. 25. Semántica <footer> Representa un pie para el contenido de la sección más cercana que le anteceda.
    26. 26. Semántica
    27. 27. Semántica <article> Composición contenida que es distribuible o reutilizable independientemente, es decir, sindicable.
    28. 28. Semántica
    29. 29. Semántica <section> Representa una sección genérica. Es una agrupación de contenido, normalmente con un encabezado.
    30. 30. Semántica
    31. 31. Semántica <aside> Representa una sección de la página con contenido menos relacionado con el resto y que podría considerarse separado de él.
    32. 32. Semántica
    33. 33. Semántica
    34. 34. Semántica Muchas más... <hgroup>, <figure>, <figcaption>, <time>, <summary>
    35. 35. Semántica • Puede usarse YA: • Modernizr • HTML5 Boilerplate • Html5shiv • ...
    36. 36. Audio & Video
    37. 37. Audio & Video• Capacidad de incrustar video y audio de forma nativa.• Controles proporcionados por el propio navegador, aunque con capacidad para modificarlos.
    38. 38. Audio & Video• Guerra de formatos: • H.264 (mp4). Alta Calidad. Propietario. Soportado por Chrome, Safari, IE y reproductores comerciales. • Ogg Theora y Ogg Vorbis (ogg). Menor calidad. Libre. Soportado por Chrome, FF y Opera. • VP8 (WebM). Alta Calidad. Liberado por Google. Soportado por Chrome, FF4, Opera, Safari (códecs) e IE (plugin).
    39. 39. Audio & Video<video src=”nombrevideo.xxx”>....</video><audio src=”nombreaudio.xxx”>....</audio>
    40. 40. Conectividad
    41. 41. Conectividad• Aplicaciones que necesitan conexión directa con el servidor (chats, juegos en tiempo real...)• Sobrecarga del protocolo HTTP.• Latencias altas.
    42. 42. Conectividad• Posibilidad de establecer conexiones bidireccionales con el servidor (websockets) mediante un API de JavaScript.• ws://echo.websocket.org ó wss://echo.websocket.org
    43. 43. Conectividadvar ws = new WebSocket("ws://echo.websocket.org");ws.onopen = function() { ... }ws.onclose = function() { ... }ws.send(‘Ping’);ws.close();
    44. 44. Conectividad IE Firefox Safari Chrome Opera Anterior 8 3.6 4 10 11 Actual 9 4 5 11 11.1 Próxima 10 5 6 12 12 Soporte actual: 30% Fuente: http://caniuse.com
    45. 45. Acceso adispositivos
    46. 46. Acceso a dispositivos• API de Geolocalización (Google, Twitter, etc...).• Acceso a micrófonos y cámaras.• Acceso a datos locales (contactos, eventos...)• Orientación del dispositivo.
    47. 47. Acceso a dispositivos IE Firefox Safari Chrome Opera Anterior 8 3.6 4 10 11 Actual 9 4 5 11 11.1 Próxima 10 5 6 12 12 Soporte actual: 60% (Geolocalización) Fuente: http://caniuse.com
    48. 48. Rendimiento e integración
    49. 49. Rendimiento e integración• Web workers. • Posibilidad de ejecutar scripts en paralelo (background). • Las tareas “pesadas” se podrán ejecutar en scripts externos sin temor a colapsar el navegador durante su ejecución.
    50. 50. Rendimiento e integración• Web workers. • Por seguridad, los web workers no pueden acceder al DOM, ni comunicarse con otros workers. • Podemos hacer uso de XMLHttpRequest.
    51. 51. Rendimiento e integración• XMLHttpRequest 2 • Seguimiento del progreso (traking progress). • Métodos y funciones para conocer la cantidad de bytes enviados al servidor, así como el tiempo real para finalizar el envío.
    52. 52. Rendimiento e integración• XMLHttpRequest 2 • Subida de archivos (File upload). • Desarrollo de FILE API, con nuevas funciones para la subida.
    53. 53. Rendimiento e integración• XMLHttpRequest 2 • Peticiones entre dominios (Cross-Domain).
    54. 54. Rendimiento e integración IE Firefox Safari Chrome Opera Web workers 9 3.5 4 9 10.6 Cross Domain 9* 3.5 4 9 11.1 XMLHttp Request 2 9 4 5 9 11.1 * Usando XDomainRequest Fuente: http://caniuse.com
    55. 55. 3D, gráficos y efectos
    56. 56. 3D, gráficos y efectos• SVG (Scalable Vector Graphics). • Gráficos vectoriales escalables para la web. • Posibilidad de crear varios objetos dentro de la misma imagen. • Admite animaciones e interacción con los gráficos. • Permite realizar zoom sin perder calidad.
    57. 57. 3D, gráficos y efectos• Canvas. • Proporciona una superficie de “dibujo” en el navegador que puede modificarse mediante JavaScript. • A diferencia de SVG, proporciona una imagen en “bitmap”.
    58. 58. 3D, gráficos y efectos• WebGL. • “Extiende” el elemento CANVAS para poder utilizar gráficos 3D nativos en el navegador, controlado por JavaScript. • Quake 2.
    59. 59. 3D, gráficos y efectos IE Firefox Safari Chrome Opera SVG 9 3.5 3.2 9 10.6 Canvas 9 3.5 3.2 9 10.6 WebGL 9 4 5 11 11.1 Fuente: http://caniuse.com
    60. 60. Offline yalmacenamiento
    61. 61. Offline y almacenamiento• Offline Application Cache. • Permite ejecutar aplicaciones web sin estar conectados a internet. • Al visitar por primera vez la página, el navegador guarda todos los archivos necesarios para ejecutar la página (HTML, CSS, imágenes, JavaScript, etc.)
    62. 62. Offline y almacenamiento• Offline Application Cache. • El archivo app.manifest será el encargado de referenciar los recursos a cachear. • Indicaremos su uso en el HTML mediante el atributo manifest en la etiqueta html: • <html manifest=”app.manifest”>
    63. 63. Offline y almacenamiento• Local Storage. • Cookies “vitaminadas”. • Podemos almacenar hasta 5MB de información por dominio, en el cliente. • Desde texto plano, hasta archivos multimedia.
    64. 64. Offline y almacenamiento• Indexed DB. • Interfaz para base de datos local que contiene valores simples y objetos. • Sustituye a Web SQL Database, que ha sido declarada deprecated por la W3C.
    65. 65. Offline y almacenamiento IE Firefox Safari Chrome Opera Offline App 9 3.5 4 9 10.6 Cache Local Storage 8 3.5 4 9 10.6 Indexed DB 9 4 5 11 11.1 Fuente: http://caniuse.com
    66. 66. ¿Preguntas?
    67. 67. !GRACIAS¡ jfernandezp@cesser.com @alwaison http://www.delicious.com/Alwaison

    ×