HTML5 la revolución!

Píldora formativa HTML5 Marzo 2011

[object Object],@medinamanu @maspixel

Un poco de historia… ,[object Object],[object Object],[object Object],[object Object],[object Object]

Situación actual ,[object Object],[object Object],[object Object],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

[object Object],[object Object]

Ventajas del HTML5 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],¡crea mejores aplicaciones web!

Índice ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Diferencias en el código ,[object Object],[object Object],[object Object],[object Object],¡Menos es más!

Diferencias en el código ,[object Object],[object Object],[object Object],[object Object],[object Object],La vida es más fácil Con HTML5

Diferencias en el código ,[object Object],[object Object],[object Object],[object Object]

Nuevas etiquetas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],¡Hasta la vista!

Nuevas etiquetas ,[object Object],[object Object],[object Object],[object Object]

Nuevas etiquetas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Adios a la divitis y tablitis

Estructura de la web ,[object Object],[object Object]

Compatibilidad navegadores ,[object Object],Problemas IE6, IE7, IE8 Uh!!!!!!!!!!!!!!!!!!

Compatibilidad de navegadors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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

CSS3 ,[object Object],[object Object],[object Object],[object Object],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 …

CSS3 ,[object Object],[object Object],[object Object],[object Object],tr:nth-of-type(odd){ background-color:#ddd; } <th>

CSS3 ,[object Object],[object Object],[object Object],[object Object],[object Object],En nuestro caso: td: nth-child (n+2){ text-align: right; }

CSS3 ,[object Object],[object Object],[object Object],[object Object]

Audio y Vídeo ,[object Object],<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/_fO6Sm2E6vo?fs =1&hl=es_ES" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="480" height="385" src=" http://www.youtube.com/vf " allowscriptaccess ="always" allowfullscreen="true"> </embed> </object>

Audio y Vídeo ,[object Object],<audio src="drums.mp3"></audio> <video src="tutorial.m4v"></video> Atributos: autoplay, controls, loop, preload...

Audio y Vídeo ,[object Object],Pero no es todo Tan fácil <video height="270px" width="480px" controls > <source src="Holamundo.mp4" type="video/mp4"> <source src="Holamundo.webm" type="video/webm"> <source src="Holamundo.ogv" type="video/ogg"> </video> Usamos 3 formatos qe se ven en todos los navegadores: mp4,webm, ovg

Formularios HTML5 ,[object Object],<input type="email" > - Mejor accesibilidad - Más rápido llegar a teclas de: @, .com…

Formularios HTML5 ,[object Object],[object Object],[object Object],[object Object]

Formularios HTML5 ,[object Object],[object Object],[object Object]

Formularios HTML5 ,[object Object],[object Object]

Canvas ,[object Object],[object Object],[object Object],¡mi parte favorita! ¿Para qué sirve? Gráficas Animaciones Juegos

Canvas ,[object Object],[object Object],[object Object]

Canvas ,[object Object],<script type="text/javascript" charset="utf-8"> //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 = "rgb(200,0,0)"; context.fillRect (10, 10, 100, 100); }else{ // muestra algo si el navegador no soporta canvas <canvas> } </script> X=10 Y=10 100x100 Picasso

Canvas <canvas width="500" height="250" id="test"> No soporta canvas </canvas> <script type="text/javascript" charset="utf-8"> var bar = new RGraph.Bar('test', [50,25,15,10]); bar.Set('chart.gutter', 50); bar.Set('chart.colors', ['red']); bar.Set('chart.title', "Mis lenguajes favoritos"); bar.Set('chart.labels', ["Ruby on rails", "PHP", "JavaScript", "ASP"]); bar.Draw(); </script> ,[object Object],Previamente he llamado a 2 ficheros RGraph.common.js, RGraph.bar.js que son las librerías para crear gráficas

SVG ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Abrir Freehand

Drag and drop ,[object Object],[object Object],[object Object],[object Object]

Geolocalización ,[object Object],[object Object],[object Object],Encuéntrate a ti mismo

Offline ,[object Object],[object Object],[object Object],CACHE MANIFEST # v = 1.0.0 /style.css /javascripts/notes.js /javascripts/jquery.min.js En nuestro HTML: <html manifest="notes.manifest" > Cuando cambiemos el Código hay que cambiar El fichero

Otras novedades ,[object Object],[object Object],[object Object],¡Más chicha!

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

Gracias ,[object Object],¡¡¡¡A practicar!!!!

HTML5 la revolución!

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (19)

Similar a HTML5 la revolución!

Similar a HTML5 la revolución! (20)

HTML5 la revolución!