Your SlideShare is downloading. ×
0
Píldora formativa HTML5 Marzo 2011
<ul><li>Hashtag de Twitter: #HTML5mor </li></ul>@medinamanu @maspixel
Un poco de historia… <ul><li>1995  Netscape introduce JavaScript </li></ul><ul><li>1999  Microsoft introduce XML </li></ul...
Situación actual <ul><li>HTML5 todavía no es un estandar. </li></ul><ul><li>HTML5 es un lenguaje estable.  </li></ul><ul><...
<ul><li>HTML5 y el  futuro  presente </li></ul><ul><li>de la web </li></ul>
Ventajas del HTML5 <ul><li>Etiquetas más claras. Más con menos código </li></ul><ul><li>Vídeo y audio sin flash/Quicktime ...
Índice <ul><li>Nuevas etiquetas </li></ul><ul><li>Diferencias en el código </li></ul><ul><li>Estructura de la web </li></u...
Diferencias en el código <ul><li>Doctype en  XHTML 1.1: </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML+RD...
Diferencias en el código <ul><li>Meta en  XHTML 1.1 </li></ul><ul><li><meta content=&quot;text/html; charset=utf-8&quot; h...
Diferencias en el código <ul><li>Script en  HTML4: </li></ul><ul><li><script type=&quot;text/javascript“ scr=&quot;jquery....
Diferencias en el código <ul><li>Link stylesheet en  HTML4: </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;...
Nuevas etiquetas <ul><li>Atributos que desaparecen </li></ul><ul><li>align </li></ul><ul><li>link, vlink, alink, (enlaces)...
Nuevas etiquetas <ul><li>Etiquetas redefinidas </li></ul><ul><li>em y i:  em denota énfasis, mientras que i es para fines ...
Nuevas etiquetas <ul><li>Nueva estructura de la web </li></ul><ul><li>Ahora aparecen etiquetas más Semánticas: </li></ul><...
Estructura de la web <ul><li><header> </li></ul><ul><li>Es la cabecera. Es donde se inserta el logo y el título de nuestra...
Estructura de la web <ul><li><nav> </li></ul><ul><li>Menú de nuestro site, también puede haber varios “nav” a lo largo del...
Estructura de la web <ul><li><footer> </li></ul><ul><li>es el pie de página, donde se pone el copyright, enlaces, etc…. Pu...
Estructura de la web <ul><li><section> </li></ul><ul><li>Sección genérica de un documento, normalmente  tiene un encabezad...
Estructura de la web <ul><li><article> </li></ul><ul><li>Se encuentra el contenido principal de la página y es lo que se v...
Estructura de la web <ul><li><aside> </li></ul><ul><li>Se incluye contenido que no está relacionado con el contenido del a...
Compatibilidad navegadores <ul><li>Todo muy bonito pero…. </li></ul>Problemas IE6, IE7, IE8 Uh!!!!!!!!!!!!!!!!!!
Compatibilidad de navegadors <ul><li>Usamos el método :  Nicolas Gallagher </li></ul><ul><li>Dentro del head este script: ...
CSS3 <ul><li>Mejoras </li></ul><ul><li>Esquinas redondeados </li></ul><ul><li>Degradados </li></ul><ul><li>Enfocar campos ...
CSS3 <ul><li>Los &quot;tr&quot; tenga cada uno un efecto, según sea par: even o impar: odd </li></ul><ul><li>tr:nth-of-typ...
CSS3 <ul><li>Alineamos todos los td a la derecha salvo el primero que lo alineamos a la izquierda. </li></ul><ul><li>nth-c...
CSS3 <ul><li>Ponemos negrita la última fila: </li></ul><ul><li>tr: last-child { </li></ul><ul><li>font-weight: bolder; </l...
Audio y Vídeo <ul><li>Antes… </li></ul><object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; width=&quot;...
Audio y Vídeo <ul><li>Ahora: </li></ul><audio src=&quot;drums.mp3&quot;></audio> <video src=&quot;tutorial.m4v&quot;></vid...
Audio y Vídeo <ul><li>Guerra de formatos </li></ul>Pero no es todo Tan fácil <video height=&quot;270px&quot; width=&quot;4...
Formularios HTML5 <ul><li>Etiqueta input  Pones el atributo type=”email”, “url”, “tel”, “date”   </li></ul><input type=&qu...
Formularios HTML5 <ul><li>Autofocus </li></ul><ul><li><input type=&quot;text&quot; autofocus> </li></ul><ul><li>Placeholde...
Formularios HTML5 <ul><li>Creación de barras de desplazamiento, </li></ul><ul><li>campos numéricos con flechas, </li></ul>...
Formularios HTML5 <ul><li>Campos editables </li></ul><ul><li>Todos los elementos que tengan  contenteditable=true  se pued...
Canvas <ul><li>JavaScript y HTML, sin plugins </li></ul><ul><li>Canvas es bitmap, no vectorial </li></ul><ul><li>Soportado...
Canvas <ul><li>Empecemos… </li></ul><ul><li><canvas id=&quot;mi_canvas&quot;  width=&quot;150&quot; height=&quot;150&quot;...
Canvas <ul><li>A dibujar… </li></ul><script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;> //creamos una refe...
Canvas <canvas width=&quot;500&quot; height=&quot;250&quot; id=&quot;test&quot;> No soporta canvas </canvas>   <script typ...
SVG <ul><li>Scalable Vector Graphic </li></ul><ul><li>No necesita Plugin </li></ul><ul><li>Imágenes escalables (diseños lí...
Drag and drop <ul><li>Rescatado de Internet Explorer 5 y nos permite arrastrar y soltar elementos del navegador  </li></ul...
Geolocalización <ul><li>Basado en GPS </li></ul><ul><li>El usuario debe autorizar el  acceso a esta información </li></ul>...
Offline <ul><li>Nueva caché nos permite acceder sin estar conectados </li></ul><ul><li>Mejora la velocidad de carga y aliv...
Otras novedades <ul><li>Nuevas APIs </li></ul><ul><li>Web Workers   (lanzar procesos en segundo plano) </li></ul><ul><li>W...
Extras Chuleta de HTML5: http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-che...
Gracias <ul><li>@medinamanu </li></ul>¡¡¡¡A practicar!!!!
Upcoming SlideShare
Loading in...5
×

HTML5 la revolución!

9,564

Published on

Seminario de introducción al HTML5 en Madrid On Rails el 9 de Marzo de 2011.

3 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,564
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
428
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 la revolución!"

  1. 1. Píldora formativa HTML5 Marzo 2011
  2. 2. <ul><li>Hashtag de Twitter: #HTML5mor </li></ul>@medinamanu @maspixel
  3. 3. Un poco de historia… <ul><li>1995 Netscape introduce JavaScript </li></ul><ul><li>1999 Microsoft introduce XML </li></ul><ul><li>2001-2006 XHTML1 y CSS2.1 </li></ul><ul><li>2004-2007 WHATWG Web Hypertext Application Technology Working Group (grupo de Opera, Mozilla y Apple). Quieren potenciar aplicaciones web. </li></ul><ul><li>2007- ahora W3C World Wide Web Consortium Empizan a desarrollar: HTML5 y CSS3 </li></ul>
  4. 4. Situación actual <ul><li>HTML5 todavía no es un estandar. </li></ul><ul><li>HTML5 es un lenguaje estable. </li></ul><ul><li>El 95% es estandar. </li></ul>Mayo 2011 HTML5 = se presenta como borrador, etapa estandar 2014 HTML5 = recomendación Finales 2011 HTML5 = se considerará estandar Oficialmente se podrá utilizar Datos obtenidos de W3C
  5. 5. <ul><li>HTML5 y el futuro presente </li></ul><ul><li>de la web </li></ul>
  6. 6. Ventajas del HTML5 <ul><li>Etiquetas más claras. Más con menos código </li></ul><ul><li>Vídeo y audio sin flash/Quicktime </li></ul><ul><li>Webs más interactivas sólo con HTML .(menos JS y CSS) </li></ul><ul><li>Mejora para trabajar Offline </li></ul><ul><li>Mayor efectos visuales (canvas y SVG) </li></ul><ul><li>Más vídeo y audio </li></ul><ul><li>Otras ventajas </li></ul>¡crea mejores aplicaciones web!
  7. 7. Índice <ul><li>Nuevas etiquetas </li></ul><ul><li>Diferencias en el código </li></ul><ul><li>Estructura de la web </li></ul><ul><li>Compatibilidad de navegadores </li></ul><ul><li>CSS3 </li></ul><ul><li>Audio y Vídeo </li></ul><ul><li>Formularios </li></ul><ul><li>Canvas </li></ul><ul><li>SVG </li></ul><ul><li>Drag and Drop </li></ul><ul><li>Geolocalización </li></ul>
  8. 8. Diferencias en el código <ul><li>Doctype en XHTML 1.1: </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML+RDFa1.0//EN&quot; &quot;http://www.w3.org/MarkUp/...&quot;> </li></ul><ul><li>Doctype en HTML5: </li></ul><ul><li><!Doctype html> </li></ul>¡Menos es más!
  9. 9. Diferencias en el código <ul><li>Meta en XHTML 1.1 </li></ul><ul><li><meta content=&quot;text/html; charset=utf-8&quot; http-equiv=&quot;Content-Type&quot; /> </li></ul><ul><li>Meta en HTML5: </li></ul><ul><li>(sólo codificación de caracteres) </li></ul><ul><li><meta charset=&quot;UTF-8&quot;> </li></ul>La vida es más fácil Con HTML5
  10. 10. Diferencias en el código <ul><li>Script en HTML4: </li></ul><ul><li><script type=&quot;text/javascript“ scr=&quot;jquery.js&quot;></script> </li></ul><ul><li>Script en HTML5: </li></ul><ul><li><script scr=&quot;jquery.js&quot;></script> </li></ul>
  11. 11. Diferencias en el código <ul><li>Link stylesheet en HTML4: </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css” href=&quot;style.css&quot;> </li></ul><ul><li>Link stylesheet en HTML5: </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;> </li></ul>
  12. 12. Nuevas etiquetas <ul><li>Atributos que desaparecen </li></ul><ul><li>align </li></ul><ul><li>link, vlink, alink, (enlaces) </li></ul><ul><li>bgcolor </li></ul><ul><li>height and width </li></ul><ul><li>scrolling (dentro de los iframes) </li></ul><ul><li>valign </li></ul><ul><li>hspace y vspace </li></ul><ul><li>cellpadding, cellspacing, y border de las tablas </li></ul><ul><li>Target </li></ul><ul><li>Font </li></ul><ul><li>marquee </li></ul>¡Hasta la vista!
  13. 13. Nuevas etiquetas <ul><li>Etiquetas redefinidas </li></ul><ul><li>em y i: em denota énfasis, mientras que i es para fines estéticos </li></ul><ul><li>Strong y b: Strong denota importancia, mientras que b es negrita para fines estéticos, sin una importancia especial </li></ul><ul><li>Small: sirve para marcar la letra pequeña (copyrights, avisos legales…) </li></ul>
  14. 14. Nuevas etiquetas <ul><li>Nueva estructura de la web </li></ul><ul><li>Ahora aparecen etiquetas más Semánticas: </li></ul><ul><li><header> </li></ul><ul><li><nav> </li></ul><ul><li><section> </li></ul><ul><li><article> </li></ul><ul><li><aside> </li></ul><ul><li><footer> </li></ul>Adios a la divitis y tablitis
  15. 15. Estructura de la web <ul><li><header> </li></ul><ul><li>Es la cabecera. Es donde se inserta el logo y el título de nuestra web. Esta etiqueta se puede repetir en más sitios del código (hay más encabezados) </li></ul>
  16. 16. Estructura de la web <ul><li><nav> </li></ul><ul><li>Menú de nuestro site, también puede haber varios “nav” a lo largo del código. En esta etiqueta también estaría el bread crumbs o migas de pan del site. </li></ul>
  17. 17. Estructura de la web <ul><li><footer> </li></ul><ul><li>es el pie de página, donde se pone el copyright, enlaces, etc…. Puede haber varios en cada página </li></ul>
  18. 18. Estructura de la web <ul><li><section> </li></ul><ul><li>Sección genérica de un documento, normalmente tiene un encabezado y luego un contenido. puede contener uno o más artículos. Elemento genérico que agrupa elementos. </li></ul>
  19. 19. Estructura de la web <ul><li><article> </li></ul><ul><li>Se encuentra el contenido principal de la página y es lo que se va sindicar (RSS, buscadores). Tiene encabezado, descripción, comentarios…. </li></ul>
  20. 20. Estructura de la web <ul><li><aside> </li></ul><ul><li>Se incluye contenido que no está relacionado con el contenido del artículo, por ejemplo, elementos publicitarios, widgets de un blog, suele ser el contenido del sidebar. </li></ul>
  21. 21. Compatibilidad navegadores <ul><li>Todo muy bonito pero…. </li></ul>Problemas IE6, IE7, IE8 Uh!!!!!!!!!!!!!!!!!!
  22. 22. Compatibilidad de navegadors <ul><li>Usamos el método : Nicolas Gallagher </li></ul><ul><li>Dentro del head este script: </li></ul><ul><li><!--[if lt IE 9]> </li></ul><ul><li><script type=&quot;text/javascript&quot; > </li></ul><ul><li>document.createElement(&quot;nav&quot; ); </li></ul><ul><li>document.createElement(&quot;header&quot; ); </li></ul><ul><li>document.createElement(&quot;footer&quot; ); </li></ul><ul><li>document.createElement(&quot;section&quot; ); </li></ul><ul><li>document.createElement(&quot;aside&quot; ); </li></ul><ul><li>document.createElement(&quot;article&quot; ); </li></ul><ul><li></script> </li></ul><ul><li><![endif]--> </li></ul>Añadimos entre estos comentarios que sólo funcionan en IE y creamos estos elementos para que los reconozca IE Magia, funciona en todos los navegadores
  23. 23. CSS3 <ul><li>Mejoras </li></ul><ul><li>Esquinas redondeados </li></ul><ul><li>Degradados </li></ul><ul><li>Enfocar campos en formularios </li></ul>Menos imágenes Menos Javascript Menos Flash Pseudoclases: son clases definidas propiamente por CSS3. Ejemplo: hover, visited…. Ahora hay más: nth-child, nth-of-type …
  24. 24. CSS3 <ul><li>Los &quot;tr&quot; tenga cada uno un efecto, según sea par: even o impar: odd </li></ul><ul><li>tr:nth-of-type(even){ </li></ul><ul><li>background-color: #F3F3F3; </li></ul><ul><li>} </li></ul>tr:nth-of-type(odd){ background-color:#ddd; } <th>
  25. 25. CSS3 <ul><li>Alineamos todos los td a la derecha salvo el primero que lo alineamos a la izquierda. </li></ul><ul><li>nth-child </li></ul><ul><li>table tr:nth-child(n) : Todas las filas </li></ul><ul><li>table tr:nth-child(n+2) : Todas las filas menos la primera </li></ul><ul><li>tr:nth-child(2n) : Cada 2 filas </li></ul>En nuestro caso: td: nth-child (n+2){ text-align: right; }
  26. 26. CSS3 <ul><li>Ponemos negrita la última fila: </li></ul><ul><li>tr: last-child { </li></ul><ul><li>font-weight: bolder; </li></ul><ul><li>} </li></ul>
  27. 27. Audio y Vídeo <ul><li>Antes… </li></ul><object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; width=&quot;480&quot; height=&quot;385&quot; codebase=&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&quot;> <param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /> <param name=&quot;allowscriptaccess&quot; value=&quot;always&quot; /> <param name=&quot;src&quot; value=&quot;http://www.youtube.com/v/_fO6Sm2E6vo?fs =1&amp;hl=es_ES&quot; /> <param name=&quot;allowfullscreen&quot; value=&quot;true&quot; /> <embed type=&quot;application/x-shockwave-flash&quot; width=&quot;480&quot; height=&quot;385&quot; src=&quot; http://www.youtube.com/vf &quot; allowscriptaccess =&quot;always&quot; allowfullscreen=&quot;true&quot;> </embed> </object>
  28. 28. Audio y Vídeo <ul><li>Ahora: </li></ul><audio src=&quot;drums.mp3&quot;></audio> <video src=&quot;tutorial.m4v&quot;></video> Atributos: autoplay, controls, loop, preload...
  29. 29. Audio y Vídeo <ul><li>Guerra de formatos </li></ul>Pero no es todo Tan fácil <video height=&quot;270px&quot; width=&quot;480px&quot; controls > <source src=&quot;Holamundo.mp4&quot; type=&quot;video/mp4&quot;> <source src=&quot;Holamundo.webm&quot; type=&quot;video/webm&quot;> <source src=&quot;Holamundo.ogv&quot; type=&quot;video/ogg&quot;> </video> Usamos 3 formatos qe se ven en todos los navegadores: mp4,webm, ovg
  30. 30. Formularios HTML5 <ul><li>Etiqueta input Pones el atributo type=”email”, “url”, “tel”, “date” </li></ul><input type=&quot;email&quot; > - Mejor accesibilidad - Más rápido llegar a teclas de: @, .com…
  31. 31. Formularios HTML5 <ul><li>Autofocus </li></ul><ul><li><input type=&quot;text&quot; autofocus> </li></ul><ul><li>Placeholder (valor por defecto) </li></ul><ul><li><input id=&quot;email&quot; type=&quot;email&quot; name=&quot;email“ placeholder=&quot;user@example.com&quot; > </li></ul>
  32. 32. Formularios HTML5 <ul><li>Creación de barras de desplazamiento, </li></ul><ul><li>campos numéricos con flechas, </li></ul><ul><li>calendarios en el campo fecha </li></ul>
  33. 33. Formularios HTML5 <ul><li>Campos editables </li></ul><ul><li>Todos los elementos que tengan contenteditable=true se pueden grabar en una base de datos del servidor. </li></ul>
  34. 34. Canvas <ul><li>JavaScript y HTML, sin plugins </li></ul><ul><li>Canvas es bitmap, no vectorial </li></ul><ul><li>Soportado en todos los browsers menos IE </li></ul>¡mi parte favorita! ¿Para qué sirve? Gráficas Animaciones Juegos
  35. 35. Canvas <ul><li>Empecemos… </li></ul><ul><li><canvas id=&quot;mi_canvas&quot; width=&quot;150&quot; height=&quot;150&quot; > Ohh!!! Tu navegador no soporta canvas </li></ul><ul><li></canvas> </li></ul>
  36. 36. Canvas <ul><li>A dibujar… </li></ul><script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;> //creamos una referencia para el elemento var canvas = document.getElementById(‘mi_canvas'); //comprobamos el soporte del navegador if (canvas.getContext){ //accedemos al contexto 2d para que funcione canvas var context = canvas.getContext('2d'); context.fillStyle = &quot;rgb(200,0,0)&quot;; context.fillRect (10, 10, 100, 100);   }else{ // muestra algo si el navegador no soporta canvas <canvas> } </script> X=10 Y=10 100x100 Picasso
  37. 37. Canvas <canvas width=&quot;500&quot; height=&quot;250&quot; id=&quot;test&quot;> No soporta canvas </canvas>   <script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;>   var bar = new RGraph.Bar('test', [50,25,15,10]);   bar.Set('chart.gutter', 50);   bar.Set('chart.colors', ['red']);   bar.Set('chart.title', &quot;Mis lenguajes favoritos&quot;);   bar.Set('chart.labels', [&quot;Ruby on rails&quot;, &quot;PHP&quot;, &quot;JavaScript&quot;, &quot;ASP&quot;]);   bar.Draw();   </script> <ul><li>Creemos una gráfica.. </li></ul>Previamente he llamado a 2 ficheros RGraph.common.js, RGraph.bar.js que son las librerías para crear gráficas
  38. 38. SVG <ul><li>Scalable Vector Graphic </li></ul><ul><li>No necesita Plugin </li></ul><ul><li>Imágenes escalables (diseños líquidos) </li></ul><ul><li>Ejemplos de etiquetas: </li></ul><ul><li>Elementos estructura (<svg>, <defs>, <desc>, <title>, <metadata>, <symbol>, <use>,<g>, <switch>, <a>, <view>). </li></ul><ul><li>Formas (<circle>, <ellipse>, <rect>, <line>, <polyline>, <polygon>, <path>, <cursor>). </li></ul><ul><li>Texto (<text>, <tspan>, <tref>, <textPath>, <altGlyph>, <font>). </li></ul><ul><li>Estilo (<style>, <marker>, <linearGradient>, <radialGradient>, <stop>, <pattern>). </li></ul><ul><li>Efectos (<clipPath>, <mask>, <filter> and filter effects). </li></ul><ul><li>Animación (<animate>, <set>, <animateMotion>, <animateTransform>). </li></ul>Abrir Freehand
  39. 39. Drag and drop <ul><li>Rescatado de Internet Explorer 5 y nos permite arrastrar y soltar elementos del navegador </li></ul><ul><li>API bastante irregular </li></ul><ul><li>Crear un elemento draggable y otro dropable y ejecutamos un código para que esto ocurra </li></ul><ul><li>Ejemplo: http://html5demos.com/drag </li></ul>
  40. 40. Geolocalización <ul><li>Basado en GPS </li></ul><ul><li>El usuario debe autorizar el acceso a esta información </li></ul><ul><li>Soporte en F,S,C </li></ul>Encuéntrate a ti mismo
  41. 41. Offline <ul><li>Nueva caché nos permite acceder sin estar conectados </li></ul><ul><li>Mejora la velocidad de carga y alivia el servidor </li></ul><ul><li>Archivo .manifest declaramos que archivos se pueden almacenar </li></ul>CACHE MANIFEST # v = 1.0.0 /style.css /javascripts/notes.js /javascripts/jquery.min.js En nuestro HTML: <html manifest=&quot;notes.manifest&quot; > Cuando cambiemos el Código hay que cambiar El fichero
  42. 42. Otras novedades <ul><li>Nuevas APIs </li></ul><ul><li>Web Workers (lanzar procesos en segundo plano) </li></ul><ul><li>Web Messages (comunicación segura entre dominios) </li></ul>¡Más chicha!
  43. 43. Extras Chuleta de HTML5: http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf Modernizr: Librería de javascript que ayuda a utilizar la nueva tecnología y hacerla compatible con antiguos navegadores http://www.modernizr.com/ HTML5doctor http://html5doctor.com/ Dive into HTML5 http://diveintohtml5.org/ Charlas de HTML5, que va a ver y que ha habido: http://www.w3c.org/talks Paso a Paso HTML5: En Español http://html5pasoapaso.blogspot.com/ Maspixel: Revista independiente de diseño y programación web. http://www.maspixel.com
  44. 44. Gracias <ul><li>@medinamanu </li></ul>¡¡¡¡A practicar!!!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×