Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 la revolución!

10,768 views

Published on

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

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!!!!

×