HTML5 101 - Drupaleada jun12
0 recomendaciones225 vistas
Este documento presenta una introducción a HTML5, destacando la importancia de un marcado semántico y válido, el uso de nuevos elementos estructurales como section y header, y la transición del doctype de (X)HTML a HTML5. También cubre temas como el box model, roles ARIA, y proyectos Drupal relacionados con HTML5. El objetivo es enfocarse en la semántica más que en buzzwords o demostraciones, y aplicar estos principios de HTML5 a sitios web responsive.
![<!--[if IE]>
<script src=“http://html5shiv.googlecode.com/
svn/trunk/html5.js”>
</script>
<![endif]-->](https://image.slidesharecdn.com/drupaleada-jun12-120703130632-phpapp01/85/HTML5-101-Drupaleada-jun12-26-320.jpg)
![header[role=”banner”] { }
footer[role=”contentinfo”] { }
ARIA role attribute.
http://www.w3.org/TR/wai-aria/usage](https://image.slidesharecdn.com/drupaleada-jun12-120703130632-phpapp01/85/HTML5-101-Drupaleada-jun12-29-320.jpg)
HTML5 101 - Drupaleada jun12
- 1. HTML5 101 Drupaleada Junio 2012
- 2. José Leiva twitter: @leivajd Drupal: jleiva drp.leivajd.com
- 3. Esto no es... • No vamos a ver código. • NO más demos de HTML5 o CSS3. • Buzzwords (bullshit) • Responsive Design • HTML5 API masturbation
- 4. Hablemos de sitios responsive html5 - ajax magic usando “less” o “sass” maquillado con CSS3 que son “mobile first” y soportan la web2.0 ;)
- 5. Lo que sí • HTML5 aplicado. • Modificar el markup, the horror! • Bonus.
- 6. De (X)HTML a HTML5
- 7. El 80% ya lo conocemos.
- 8. Markup bien estructurado y válido. • Fácil de trabajar. • Colaboración. • Mantenimiento. • SEO. • Accesibilidad. • Semántica.
- 9. DTD, DOCTYPE y Browser Mode
- 10. Document Type Definition (DTD), serie de reglas (machine-readable) que definen que es, y que no es, permitido en una versión de XML o (X)HTML.
- 11. DOCTYPE describe el DTD que se esta usando. Usualmente, pero no siempre, incluye una URL al archivo DTD específico.
- 12. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> http://www.alistapart.com/articles/doctype/
- 13. Browser Mode. • Standards mode. • Quirks mode.
- 14. HTML 4.01 STRICT, TRANSITIONAL <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Tran- sitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- 15. XHTML 1.0 STRICT, TRANSITIONAL, <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Tran- sitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi- tional.dtd”>
- 16. Drupal 6
- 17. Drupal 7
- 18. <!DOCTYPE html>
- 20. Nuevos elementos inline se unen a span, strong, em, abbr, etc
- 21. Oh, y ya no se les llama “inline”, ahora se llaman “text-level semantics.”
- 22. Elementos estructurales semánticos, section, header, footer, aside y nav.
- 25. section, article, header, footer, nav, aside, hgroup { display: block; }
- 26. <!--[if IE]> <script src=“http://html5shiv.googlecode.com/ svn/trunk/html5.js”> </script> <![endif]-->
- 27. <h1>Drupaleadas</h1> <section> <header> <h2>Sobre los eventos</h2> </header> <p>Unete al evento nacional de drupaleros.</p> <h3>San José</h3> <p>Siga la línea roja.</p> <h3>Cartago</h3> <p>Ahí no volvemos, muy largo.</p> <h3>Heredia</h3> <p>Mmm <em>puede</em> ser.</p> </section> <small>Transporte no incluido.</small>
- 29. header[role=”banner”] { } footer[role=”contentinfo”] { } ARIA role attribute. http://www.w3.org/TR/wai-aria/usage
- 30. Enfoquemonos en la semántica.
- 41. Bonus
- 42. box model width + padding + border = visible/rendered width height + padding + border = visible/rendered height
- 43. IE 6 y anteriores en “quirks mode” width = visible/rendered width height= visible/rendered height
- 45. /* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } http://css-tricks.com/box-sizing/ http://paulirish.com/2012/box-sizing-border-box-ftw/ http://caniuse.com/#feat=css3-boxsizing
- 48. Manos a la obra!
- 52. Gracias! Junio 2012 / @leivajd