HTML5 101 - Drupaleada jun12

382 views

Published on

Slides de la presentacion HTML5 101, HTML5 aplicado a Drupal, modules, tips y base themes.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
382
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 101 - Drupaleada jun12

  1. 1. HTML5 101Drupaleada Junio 2012
  2. 2. José Leivatwitter: @leivajdDrupal: jleivadrp.leivajd.com
  3. 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. 4. Hablemos de sitios responsive html5- ajax magic usando “less” o “sass”maquillado con CSS3 que son “mobilefirst” y soportan la web2.0 ;)
  5. 5. Lo que sí• HTML5 aplicado.• Modificar el markup, the horror!• Bonus.
  6. 6. De (X)HTML a HTML5
  7. 7. El 80% ya lo conocemos.
  8. 8. Markup bien estructurado y válido.• Fácil de trabajar.• Colaboración.• Mantenimiento.• SEO.• Accesibilidad.• Semántica.
  9. 9. DTD, DOCTYPE y Browser Mode
  10. 10. Document Type Definition (DTD), serie dereglas (machine-readable) que definen que es,y que no es, permitido en una versión de XML o(X)HTML.
  11. 11. DOCTYPE describe el DTD que se esta usando.Usualmente, pero no siempre, incluye una URLal archivo DTD específico.
  12. 12. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>http://www.alistapart.com/articles/doctype/
  13. 13. Browser Mode.• Standards mode.• Quirks mode.
  14. 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. 15. XHTML 1.0 STRICT, TRANSITIONAL,<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0Strict//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. 16. Drupal 6
  17. 17. Drupal 7
  18. 18. <!DOCTYPE html>
  19. 19. Nuevos elementos inline seunen a span, strong, em,abbr, etc
  20. 20. Oh, y ya no se les llama“inline”, ahora se llaman“text-level semantics.”
  21. 21. Elementos estructuralessemánticos, section, header,footer, aside y nav.
  22. 22. Cambie el Doctype!
  23. 23. section, article, header,footer, nav, aside, hgroup { display: block;}
  24. 24. <!--[if IE]> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”> </script><![endif]-->
  25. 25. <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>
  26. 26. header[role=”banner”] { }footer[role=”contentinfo”] { }ARIA role attribute.http://www.w3.org/TR/wai-aria/usage
  27. 27. Enfoquemonos en la semántica.
  28. 28. http://drupal.org/project/mothership
  29. 29. http://drupal.org/project/Sonambulo
  30. 30. http://drupal.org/project/semanticviews/
  31. 31. http://drupal.org/project/semantic_cck
  32. 32. http://drupal.org/project/html5_tools/
  33. 33. http://drupal.org/project/fences
  34. 34. Bonus
  35. 35. box modelwidth + padding + border = visible/rendered widthheight + padding + border = visible/rendered height
  36. 36. IE 6 y anteriores en “quirks mode”width = visible/rendered widthheight= visible/rendered height
  37. 37. /* 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
  38. 38. Manos a la obra!
  39. 39. http://localize.drupal.org/translate/languages/es
  40. 40. http://drupal.org/project/issues/projectapplications?status=8
  41. 41. http://drp.leivajd.com/
  42. 42. Gracias!Junio 2012 / @leivajd

×