Your SlideShare is downloading. ×
HTML5 101 - Drupaleada jun12
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 101 - Drupaleada jun12

245
views

Published on

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

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
245
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 101Drupaleada Junio 2012
  • 2. José Leivatwitter: @leivajdDrupal: jleivadrp.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 “mobilefirst” 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 dereglas (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 URLal archivo DTD específico.
  • 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. 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.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. Drupal 6
  • 17. Drupal 7
  • 18. <!DOCTYPE html>
  • 19. Nuevos elementos inline seunen a span, strong, em,abbr, etc
  • 20. Oh, y ya no se les llama“inline”, ahora se llaman“text-level semantics.”
  • 21. Elementos estructuralessemánticos, section, header,footer, aside y nav.
  • 22. Cambie el Doctype!
  • 23. section, article, header,footer, nav, aside, hgroup { display: block;}
  • 24. <!--[if IE]> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”> </script><![endif]-->
  • 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. header[role=”banner”] { }footer[role=”contentinfo”] { }ARIA role attribute.http://www.w3.org/TR/wai-aria/usage
  • 27. Enfoquemonos en la semántica.
  • 28. http://drupal.org/project/mothership
  • 29. http://drupal.org/project/Sonambulo
  • 30. http://drupal.org/project/semanticviews/
  • 31. http://drupal.org/project/semantic_cck
  • 32. http://drupal.org/project/html5_tools/
  • 33. http://drupal.org/project/fences
  • 34. Bonus
  • 35. box modelwidth + padding + border = visible/rendered widthheight + padding + border = visible/rendered height
  • 36. IE 6 y anteriores en “quirks mode”width = visible/rendered widthheight= visible/rendered height
  • 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. Manos a la obra!
  • 39. http://localize.drupal.org/translate/languages/es
  • 40. http://drupal.org/project/issues/projectapplications?status=8
  • 41. http://drp.leivajd.com/
  • 42. Gracias!Junio 2012 / @leivajd