myprofly

198 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
198
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

myprofly

  1. 1. HTML5 para vagos Miquel Camps Orteza31.01.2011 @miquelcamps
  2. 2. Recordar menos etiquetas<acronym> <dir> <strike><applet> <font> <tt><basefont> <frame> <u><big> <frameset> <xmp><center> <noframes> Chuleta HTML5 http://woorkup.com/wp-content/uploads/2009/12/HTML5- Visual-Cheat-Sheet1.pdf
  3. 3. Escribir menos código<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><link rel="stylesheet" type="text/css" href="styles.css" /><script src="js/script.js" type="text/javascript"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta charset="utf-8" />* la parte roja se elimina en HTML5
  4. 4. Buscar menos javascripts en googleNuevos inputs: <input type="text" required /> <input type="email" /> <input type="range" /> <input type="date" /> <input type="color" /> ¡Incluso una barra de progreso! <progress value="50" max="100"></progress>
  5. 5. Buscar menos javascripts en googleNuevos atributos: <input type="text" required /> <input type="search" autofocus /> <input type="text" name="name" placeholder="Pepe" /> <input type="file multiple" name="uploads[]" /> <input type="text" pattern="[0-9]{8}[A-Z]" /> <input type="number" min="1900" max="2010" />
  6. 6. Menos copiar y pegar<object width="464" height="376" id="1994321" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" alt="Russian Grandfather Cracks Up At GrandsonsHaircut Funny Videos"><param name="movie"value="http://embed.break.com/MTk5NDMyMQ=="></param><paramname="allowScriptAccess" value="always"></param><embedsrc="http://embed.break.com/MTk5NDMyMQ==" type="application/x-shockwave-flash" allowScriptAccess=always width="464"height="376"></embed></object><audio id="audio" src="sound.mp3" controls></audio><video id="video" src="movie.webm" autoplay controls></video>
  7. 7. Web semanticaEl consorcio WC3 dice...La Web Semántica es una Web extendida, dotada de mayorsignificado en la que cualquier usuario en Internet podráencontrar respuestas a sus preguntas de forma más rápida ysencilla gracias a una información mejor definida.Resumen para vagos ;)La web semantica es una forma de estructurar mejor lainformación para que el usuario pueda encontrar mejoresrespuestas.
  8. 8. Estructura mashable.com - Diseño <header> <hgroup> <nav> <aside> <footer>
  9. 9. Estructura mashable.com - Noticias <section> <article> <time>
  10. 10. Nuevas APIs javascriptwebsockets ¿bye bye ajax?geolocalizacióndrag & dropofflinecanvas Demos http://slides.html5rocks.com/
  11. 11. Navegadores compatibleschromefirefoxoperainternet explorer 9
  12. 12. Navegadores más usadosInternet Explorer 61.58%Firefox 24.23%Chrome 5.61%Safari 4.45%Opera 2.35% usuarios ie nvivo.es 8.0 69%Otros 1.77% 7.0 21% 6.0 8% 9.0 0.47%vía netmarketshare.comhttp://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpct=4
  13. 13. ¿Cuando pasarse a HTML5?Ya puedes pasarte a HTML5Utilizar la nueva estructura <section><article><time>va a ser la forma de posicionarse mejor en buscadores.Pero no podrás aprovechar todas las bondades de HTML5como por ejemplo las validaciones de inputsHay un tanto por ciento demasiado alto de gente usandointernet explorer, las versiones inferiores de la 9 no soportanHTML5 y lo peor aún IE9 todavía no ha salido oficialmente.
  14. 14. Implementación en IE < 9Esto es para que la maquetación se vea igual:1. Existe un script javascript para que internetexplorer reconozca las nuevas etiquetas:http://html5shiv.googlecode.com2. Poner las nuevas etiquetas dentro de divs y asociarles unclass:<div class="header"><header>
  15. 15. Recursos para vagosSitios en HTML5html5gallery.comWeb semanticahttp://www.w3c.es/divulgacion/guiasbreves/websemanticaCanvashttp://devfiles.myopera.com/articles/418/canvasExample.htmlHTML5 empieza hoyhttp://www.slideshare.net/Martulina/html5-empieza-hoy

×