HTML5 para vagos 31.01.2011 Miquel Camps Orteza @miquelcamps
Recordar menos etiquetas <ul><li><acronym> </li></ul><ul><li><applet> </li></ul><ul><li><basefont> </li></ul><ul><li><big>...
Escribir menos código <ul><li><!DOCTYPE html  PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w...
Buscar menos javascripts en google <ul><li>Nuevos inputs: </li></ul><ul><li>     <input type=&quot; text &quot; required /...
Buscar menos javascripts en google <ul><li>Nuevos atributos: </li></ul><ul><li>     <input type=&quot;text&quot;  required...
Menos copiar y pegar <ul><li><object width=&quot;464&quot; height=&quot;376&quot; id=&quot;1994321&quot; type=&quot;applic...
Web semantica El consorcio WC3 dice... La Web Semántica es una Web extendida, dotada de mayor significado en la que cualqu...
Estructura mashable.com - Diseño <header> <hgroup> <nav> <aside> <footer>
Estructura mashable.com - Noticias <section> <article> <time>
Nuevas APIs javascript <ul><li>websockets ¿bye bye ajax? </li></ul><ul><li>geolocalización </li></ul><ul><li>drag & drop <...
Navegadores compatibles <ul><li>chrome </li></ul><ul><li>firefox </li></ul><ul><li>opera </li></ul><ul><li>internet explor...
Navegadores más usados <ul><li>Internet Explorer     </li></ul><ul><li>Firefox  </li></ul><ul><li>Chrome  </li></ul><ul><l...
¿Cuando pasarse a HTML5? Ya puedes pasarte a HTML5 Utilizar la nueva estructura <section><article><time> va a ser la forma...
Implementación en IE < 9 <ul><li>Esto es para que la maquetación se vea igual: </li></ul><ul><li>1. Existe un script javas...
Recursos para vagos <ul><li>Sitios en HTML5 </li></ul><ul><li>html5gallery.com </li></ul><ul><li>Web semantica </li></ul><...
Upcoming SlideShare
Loading in …5
×

HTML5 para vagos

3,120 views
3,046 views

Published on

1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
3,120
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
85
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

HTML5 para vagos

  1. 1. HTML5 para vagos 31.01.2011 Miquel Camps Orteza @miquelcamps
  2. 2. Recordar menos etiquetas <ul><li><acronym> </li></ul><ul><li><applet> </li></ul><ul><li><basefont> </li></ul><ul><li><big> </li></ul><ul><li><center> </li></ul><dir> <font> <frame> <frameset> <noframes> <strike> <tt> <u> <xmp> Chuleta HTML5 http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet1.pdf
  3. 3. Escribir menos código <ul><li><!DOCTYPE html  PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot; > </li></ul><ul><li><link rel=&quot;stylesheet&quot;  type=&quot;text/css&quot;  href=&quot;styles.css&quot; /> </li></ul><ul><li><script src=&quot;js/script.js&quot;  type=&quot;text/javascript&quot; ></script> </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />  </li></ul><ul><li><meta charset=&quot;utf-8&quot; />  </li></ul><ul><li>* la parte roja se elimina en HTML5 </li></ul>
  4. 4. Buscar menos javascripts en google <ul><li>Nuevos inputs: </li></ul><ul><li>     <input type=&quot; text &quot; required /> </li></ul><ul><li>     <input type=&quot; email &quot; /> </li></ul><ul><li>     <input type=&quot; range &quot; /> </li></ul><ul><li>     <input type=&quot; date &quot; /> </li></ul><ul><li>     <input type=&quot; color &quot; /> </li></ul><ul><li>     ¡Incluso una barra de progreso! </li></ul><ul><li>     <progress value=&quot;50&quot; max=&quot;100&quot;></progress> </li></ul>
  5. 5. Buscar menos javascripts en google <ul><li>Nuevos atributos: </li></ul><ul><li>     <input type=&quot;text&quot; required /> </li></ul><ul><li>     <input type=&quot;search&quot; autofocus /> </li></ul><ul><li>     <input type=&quot;text&quot; name=&quot;name&quot; placeholder=&quot;Pepe&quot; /> </li></ul><ul><li>     <input type=&quot;file multiple&quot; name=&quot;uploads[]&quot; /> </li></ul><ul><li>     <input type=&quot;text&quot; pattern=&quot;[0-9]{8}[A-Z]&quot; /> </li></ul><ul><li>     <input type=&quot;number&quot; min=&quot;1900&quot; max=&quot;2010&quot; /> </li></ul>
  6. 6. Menos copiar y pegar <ul><li><object width=&quot;464&quot; height=&quot;376&quot; id=&quot;1994321&quot; type=&quot;application/x-shockwave-flash&quot; classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; alt=&quot;Russian Grandfather Cracks Up At Grandson's Haircut Funny Videos&quot;><param name=&quot;movie&quot; value=&quot;http://embed.break.com/MTk5NDMyMQ==&quot;></param><param name=&quot;allowScriptAccess&quot; value=&quot;always&quot;></param><embed src=&quot;http://embed.break.com/MTk5NDMyMQ==&quot; type=&quot;application/x-shockwave-flash&quot; allowScriptAccess=always width=&quot;464&quot; height=&quot;376&quot;></embed></object> </li></ul><ul><li><audio id=&quot;audio&quot; src=&quot;sound.mp3&quot; controls></audio> </li></ul><ul><li><video id=&quot;video&quot; src=&quot;movie.webm&quot; autoplay controls></video> </li></ul>
  7. 7. Web semantica El consorcio WC3 dice... La Web Semántica es una Web extendida, dotada de mayor significado en la que cualquier usuario en Internet podrá encontrar respuestas a sus preguntas de forma más rápida y sencilla gracias a una información mejor definida. Resumen para vagos ;) La web semantica es una forma de estructurar mejor la información para que el usuario pueda encontrar mejores respuestas.
  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 javascript <ul><li>websockets ¿bye bye ajax? </li></ul><ul><li>geolocalización </li></ul><ul><li>drag & drop </li></ul><ul><li>offline </li></ul><ul><li>canvas </li></ul>Demos http://slides.html5rocks.com/
  11. 11. Navegadores compatibles <ul><li>chrome </li></ul><ul><li>firefox </li></ul><ul><li>opera </li></ul><ul><li>internet explorer 9 </li></ul>
  12. 12. Navegadores más usados <ul><li>Internet Explorer    </li></ul><ul><li>Firefox  </li></ul><ul><li>Chrome  </li></ul><ul><li>Safari  </li></ul><ul><li>Opera  </li></ul><ul><li>Otros  </li></ul>61.58% 24.23% 5.61% 4.45% 2.35% 1.77% usuarios ie nvivo.es 8.0   69% 7.0   21% 6.0   8% 9.0   0.47% vía netmarketshare.com http://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpct=4
  13. 13. ¿Cuando pasarse a HTML5? Ya puedes pasarte a HTML5 Utilizar 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 HTML5 como por ejemplo las validaciones de inputs Hay un tanto por ciento demasiado alto de gente usando internet explorer, las versiones inferiores de la 9 no soportan HTML5 y lo peor aún IE9 todavía no ha salido oficialmente.
  14. 14. Implementación en IE < 9 <ul><li>Esto es para que la maquetación se vea igual: </li></ul><ul><li>1. Existe un script javascript para que internet explorer reconozca las nuevas etiquetas: </li></ul><ul><li>http://html5shiv.googlecode.com </li></ul><ul><li>2. Poner las nuevas etiquetas dentro de div's y asociarles un class: </li></ul><ul><li><div class=&quot;header&quot;><header> </li></ul>
  15. 15. Recursos para vagos <ul><li>Sitios en HTML5 </li></ul><ul><li>html5gallery.com </li></ul><ul><li>Web semantica </li></ul><ul><li>http://www.w3c.es/divulgacion/guiasbreves/websemantica </li></ul><ul><li>Canvas </li></ul><ul><li>http://devfiles.myopera.com/articles/418/canvasExample.html </li></ul><ul><li>HTML5 empieza hoy </li></ul><ul><li>http://www.slideshare.net/Martulina/html5-empieza-hoy </li></ul>

×