HTML5 101 - Drupaleada jun12
-
Upload
jose-leiva -
Category
Design
-
view
263 -
download
0
description
Transcript of HTML5 101 - Drupaleada jun12
HTML5 101Drupaleada Junio 2012
José Leivatwitter: @leivajdDrupal: jleivadrp.leivajd.com
Esto no es...
• No vamos a ver código.• NO más demos de HTML5 o CSS3.• Buzzwords (bullshit)• Responsive Design• HTML5 API masturbation
Hablemos de sitios responsive html5 - ajax magic usando “less” o “sass” maquillado con CSS3 que son “mobile first” y soportan la web2.0 ;)
Lo que sí
• HTML5 aplicado.• Modificar el markup, the horror!• Bonus.
De (X)HTML a HTML5
El 80% ya lo conocemos.
Markup bien estructurado y válido.
• Fácil de trabajar.• Colaboración.• Mantenimiento.• SEO.• Accesibilidad.• Semántica.
DTD, DOCTYPE y Browser Mode
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.
DOCTYPE describe el DTD que se esta usando. Usualmente, pero no siempre, incluye una URL al archivo DTD específico.
<!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/
Browser Mode.
• Standards mode.• Quirks mode.
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”>
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”>
Drupal 6
Drupal 7
<!DOCTYPE html>
Nuevos elementos inline se unen a span, strong, em, abbr, etc
Oh, y ya no se les llama “inline”, ahora se llaman “text-level semantics.”
Elementos estructurales semánticos, section, header, footer, aside y nav.
Cambie el Doctype!
section, article, header, footer, nav, aside, hgroup { display: block;}
<!--[if IE]> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”> </script><![endif]-->
<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>
header[role=”banner”] { }
footer[role=”contentinfo”] { }
ARIA role attribute.
http://www.w3.org/TR/wai-aria/usage
Enfoquemonos en la semántica.
http://drupal.org/project/mothership
http://drupal.org/project/Sonambulo
http://drupal.org/project/semanticviews/
http://drupal.org/project/semantic_cck
http://drupal.org/project/html5_tools/
http://drupal.org/project/fences
Bonus
box model
width + padding + border = visible/rendered width height + padding + border = visible/rendered height
IE 6 y anteriores en “quirks mode”
width = visible/rendered width height= visible/rendered height
/* 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
Manos a la obra!
http://localize.drupal.org/translate/languages/es
http://drupal.org/project/issues/projectapplications?status=8
http://drp.leivajd.com/
Gracias!Junio 2012 / @leivajd