html5 101 - drupaleada jun12

52
HTML5 101 Drupaleada Junio 2012

Upload: jose-leiva

Post on 02-Jul-2015

261 views

Category:

Design


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: HTML5 101 - Drupaleada jun12

HTML5 101Drupaleada Junio 2012

Page 2: HTML5 101 - Drupaleada jun12

José Leivatwitter: @leivajdDrupal: jleivadrp.leivajd.com

Page 3: HTML5 101 - Drupaleada jun12

Esto no es...

• No vamos a ver código.• NO más demos de HTML5 o CSS3.• Buzzwords (bullshit)• Responsive Design• HTML5 API masturbation

Page 4: HTML5 101 - Drupaleada jun12

Hablemos de sitios responsive html5 - ajax magic usando “less” o “sass” maquillado con CSS3 que son “mobile first” y soportan la web2.0 ;)

Page 5: HTML5 101 - Drupaleada jun12

Lo que sí

• HTML5 aplicado.• Modificar el markup, the horror!• Bonus.

Page 6: HTML5 101 - Drupaleada jun12

De (X)HTML a HTML5

Page 7: HTML5 101 - Drupaleada jun12

El 80% ya lo conocemos.

Page 8: HTML5 101 - Drupaleada jun12

Markup bien estructurado y válido.

• Fácil de trabajar.• Colaboración.• Mantenimiento.• SEO.• Accesibilidad.• Semántica.

Page 9: HTML5 101 - Drupaleada jun12

DTD, DOCTYPE y Browser Mode

Page 10: HTML5 101 - Drupaleada jun12

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.

Page 11: HTML5 101 - Drupaleada jun12

DOCTYPE describe el DTD que se esta usando. Usualmente, pero no siempre, incluye una URL al archivo DTD específico.

Page 12: HTML5 101 - Drupaleada jun12

<!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/

Page 13: HTML5 101 - Drupaleada jun12

Browser Mode.

• Standards mode.• Quirks mode.

Page 14: HTML5 101 - Drupaleada jun12

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”>

Page 15: HTML5 101 - Drupaleada jun12

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”>

Page 16: HTML5 101 - Drupaleada jun12

Drupal 6

Page 17: HTML5 101 - Drupaleada jun12

Drupal 7

Page 18: HTML5 101 - Drupaleada jun12

<!DOCTYPE html>

Page 19: HTML5 101 - Drupaleada jun12
Page 20: HTML5 101 - Drupaleada jun12

Nuevos elementos inline se unen a span, strong, em, abbr, etc

Page 21: HTML5 101 - Drupaleada jun12

Oh, y ya no se les llama “inline”, ahora se llaman “text-level semantics.”

Page 22: HTML5 101 - Drupaleada jun12

Elementos estructurales semánticos, section, header, footer, aside y nav.

Page 23: HTML5 101 - Drupaleada jun12
Page 24: HTML5 101 - Drupaleada jun12

Cambie el Doctype!

Page 25: HTML5 101 - Drupaleada jun12

section, article, header, footer, nav, aside, hgroup { display: block;}

Page 26: HTML5 101 - Drupaleada jun12

<!--[if IE]> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”> </script><![endif]-->

Page 27: HTML5 101 - Drupaleada jun12

<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>

Page 28: HTML5 101 - Drupaleada jun12
Page 29: HTML5 101 - Drupaleada jun12

header[role=”banner”] { }

footer[role=”contentinfo”] { }

ARIA role attribute.

http://www.w3.org/TR/wai-aria/usage

Page 30: HTML5 101 - Drupaleada jun12

Enfoquemonos en la semántica.

Page 31: HTML5 101 - Drupaleada jun12

http://drupal.org/project/mothership

Page 32: HTML5 101 - Drupaleada jun12

http://drupal.org/project/Sonambulo

Page 33: HTML5 101 - Drupaleada jun12

http://drupal.org/project/semanticviews/

Page 34: HTML5 101 - Drupaleada jun12
Page 35: HTML5 101 - Drupaleada jun12
Page 36: HTML5 101 - Drupaleada jun12
Page 37: HTML5 101 - Drupaleada jun12
Page 38: HTML5 101 - Drupaleada jun12

http://drupal.org/project/semantic_cck

Page 39: HTML5 101 - Drupaleada jun12

http://drupal.org/project/html5_tools/

Page 40: HTML5 101 - Drupaleada jun12

http://drupal.org/project/fences

Page 41: HTML5 101 - Drupaleada jun12

Bonus

Page 42: HTML5 101 - Drupaleada jun12

box model

width + padding + border = visible/rendered width height + padding + border = visible/rendered height

Page 43: HTML5 101 - Drupaleada jun12

IE 6 y anteriores en “quirks mode”

width = visible/rendered width height= visible/rendered height

Page 44: HTML5 101 - Drupaleada jun12
Page 45: HTML5 101 - Drupaleada jun12

/* 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

Page 46: HTML5 101 - Drupaleada jun12
Page 47: HTML5 101 - Drupaleada jun12
Page 48: HTML5 101 - Drupaleada jun12

Manos a la obra!

Page 49: HTML5 101 - Drupaleada jun12

http://localize.drupal.org/translate/languages/es

Page 50: HTML5 101 - Drupaleada jun12

http://drupal.org/project/issues/projectapplications?status=8

Page 51: HTML5 101 - Drupaleada jun12

http://drp.leivajd.com/

Page 52: HTML5 101 - Drupaleada jun12

Gracias!Junio 2012 / @leivajd