HTML5 101 - Drupaleada jun12
-
Upload
jose-leiva -
Category
Design
-
view
260 -
download
0
description
Transcript of HTML5 101 - Drupaleada jun12
![Page 1: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/1.jpg)
HTML5 101Drupaleada Junio 2012
![Page 2: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/2.jpg)
José Leivatwitter: @leivajdDrupal: jleivadrp.leivajd.com
![Page 3: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/3.jpg)
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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/5.jpg)
Lo que sí
• HTML5 aplicado.• Modificar el markup, the horror!• Bonus.
![Page 6: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/6.jpg)
De (X)HTML a HTML5
![Page 7: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/7.jpg)
El 80% ya lo conocemos.
![Page 8: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/8.jpg)
Markup bien estructurado y válido.
• Fácil de trabajar.• Colaboración.• Mantenimiento.• SEO.• Accesibilidad.• Semántica.
![Page 9: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/9.jpg)
DTD, DOCTYPE y Browser Mode
![Page 10: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/10.jpg)
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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/12.jpg)
<!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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/13.jpg)
Browser Mode.
• Standards mode.• Quirks mode.
![Page 14: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/16.jpg)
Drupal 6
![Page 17: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/17.jpg)
Drupal 7
![Page 18: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/18.jpg)
<!DOCTYPE html>
![Page 19: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/19.jpg)
![Page 20: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/20.jpg)
Nuevos elementos inline se unen a span, strong, em, abbr, etc
![Page 21: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/21.jpg)
Oh, y ya no se les llama “inline”, ahora se llaman “text-level semantics.”
![Page 22: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/22.jpg)
Elementos estructurales semánticos, section, header, footer, aside y nav.
![Page 23: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/23.jpg)
![Page 24: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/24.jpg)
Cambie el Doctype!
![Page 25: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/25.jpg)
section, article, header, footer, nav, aside, hgroup { display: block;}
![Page 26: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/26.jpg)
<!--[if IE]> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”> </script><![endif]-->
![Page 27: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/27.jpg)
<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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/28.jpg)
![Page 29: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/29.jpg)
header[role=”banner”] { }
footer[role=”contentinfo”] { }
ARIA role attribute.
http://www.w3.org/TR/wai-aria/usage
![Page 30: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/30.jpg)
Enfoquemonos en la semántica.
![Page 31: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/31.jpg)
http://drupal.org/project/mothership
![Page 32: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/32.jpg)
http://drupal.org/project/Sonambulo
![Page 33: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/33.jpg)
http://drupal.org/project/semanticviews/
![Page 34: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/34.jpg)
![Page 35: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/35.jpg)
![Page 36: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/36.jpg)
![Page 37: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/37.jpg)
![Page 38: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/38.jpg)
http://drupal.org/project/semantic_cck
![Page 39: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/39.jpg)
http://drupal.org/project/html5_tools/
![Page 40: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/40.jpg)
http://drupal.org/project/fences
![Page 41: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/41.jpg)
Bonus
![Page 42: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/42.jpg)
box model
width + padding + border = visible/rendered width height + padding + border = visible/rendered height
![Page 43: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/43.jpg)
IE 6 y anteriores en “quirks mode”
width = visible/rendered width height= visible/rendered height
![Page 44: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/44.jpg)
![Page 45: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/45.jpg)
/* 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](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/46.jpg)
![Page 47: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/47.jpg)
![Page 48: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/48.jpg)
Manos a la obra!
![Page 49: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/49.jpg)
http://localize.drupal.org/translate/languages/es
![Page 50: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/50.jpg)
http://drupal.org/project/issues/projectapplications?status=8
![Page 51: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/51.jpg)
http://drp.leivajd.com/
![Page 52: HTML5 101 - Drupaleada jun12](https://reader033.fdocuments.mx/reader033/viewer/2022052908/5594eba91a28abaa5d8b4569/html5/thumbnails/52.jpg)
Gracias!Junio 2012 / @leivajd