Html Limpio Y Semantico En Drupal

2,421 views

Published on

Presentación del 24 de julio en el DrupalCamp Perú.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,421
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
16
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Html Limpio Y Semantico En Drupal

  1. 1. por Jorge Salinas HTML limpio y semántico en Drupal
  2. 2. HTML en Wordpress
  3. 4. Wordpress NO es un CMS
  4. 5. HTML en Drupal
  5. 7. Views
  6. 8. Título Este es el campo resumen  sigue leyendo aquí
  7. 9. <h2>    <a href=&quot;/drupal/content&quot;> título </a> </h2> <a href=&quot;drupal/content&quot;> <img src=&quot;/image.jpg&quot; width=&quot;105&quot; height=&quot;105&quot; title=&quot;&quot; alt=&quot;&quot;/> </a> <p> Este es el campo resumen </p> <a href=&quot;/drupal/content&quot;> sigue leyendo aquí </a> Título Este es el campo resumen sigue leyendo aquí
  8. 10. <h2>    <a href=&quot;/drupal/content&quot;> título </a> </h2> <a href=&quot;drupal/content&quot;> <img src=&quot;/image.jpg&quot; width=&quot;105&quot; height=&quot;105&quot; title=&quot;&quot; alt=&quot;&quot;/> </a> <p> Este es el campo resumen </p> <a href=&quot;/drupal/content&quot;> sigue leyendo aquí </a> VS
  9. 11. Bloques Menus
  10. 12. ¿Que problemas trae esto? <ul><ul><li>CSS difícil de mantener  </li></ul></ul><ul><ul><li>Mucha dificultad para validar el HTML </li></ul></ul><ul><ul><li>Menor control sobre el HTML y CSS </li></ul></ul><ul><ul><li>Más código </li></ul></ul><ul><ul><li>Mayor tamaño del documento </li></ul></ul>
  11. 13. Un caso concreto.
  12. 14. ¿Que nos propusimos? <ul><ul><li>Preparar el HTML y CSS sin pensar en Drupal </li></ul></ul><ul><ul><li>Control total sobre el HTML y el CSS </li></ul></ul><ul><ul><li>Validación W3C HTML Strict </li></ul></ul><ul><ul><li>Clases e ids semánticos </li></ul></ul><ul><ul><li>Reutilizar mucho código ( CSS )  </li></ul></ul>
  13. 15. tpl.php files Mothership theme hook_theme  functions Semantic views module Herramientas
  14. 16. Archivos tpl.php Son templates (plantillas) que nos permiten modificar las salidas HTML de determinados módulos.
  15. 17. <div id=&quot; block- <?php print $block->module . '-' . $block->delta; ?> &quot; class=&quot; <?php print $classes; ?> &quot;><div class=&quot; block-inner &quot;>     <?php if ($block->subject): ?>      <h2 class=&quot;title&quot;> <?php print $block->subject; ?> </h2>    <?php endif; ?>    <div class=&quot;content&quot;>      <?php print $block->content; ?>    </div>    <?php print $edit_links; ?> </div></div> <!-- /block-inner, /block --> block.tpl.php
  16. 18. <div class=&quot; block &quot;>     <?php if ($block->subject): ?>      <h2> <?php print $block->subject; ?> </h2>    <?php endif; ?>      <?php print $block->content; ?> </div> <!-- /block --> <div id=&quot; block- <?php print $block->module . '-' . $block->delta; ?> &quot; class=&quot; <?php print $classes; ?> &quot;><div class=&quot; block-inner &quot;>     <?php if ($block->subject): ?>      <h2 class=&quot;title&quot;> <?php print $block->subject; ?> </h2>    <?php endif; ?>    <div class=&quot;content&quot;>      <?php print $block->content; ?>    </div>    <?php print $edit_links; ?> </div></div> <!-- /block-inner, /block --> block.tpl.php block.tpl.php
  17. 19. Es un tema gráfico que limpia las clases y ids que Drupal trae por defecto.  Se utiliza como un tema base . drupal.org/project/mothership
  18. 21. Algunas clases son necesarias para que ciertos módulos funcionen correctamente; por ejemplo, el módulo views necesita la clase view-dom-id para que la opción 'Ajax' funcione correctamente.
  19. 22. Semantic Views Es un módulo  contribuido que nos da una interfaz gráfica desde donde podremos cambiar, la salida HTML de nuestras vistas(views).  drupal.org/project/semanticviews
  20. 25. hook_theme functions Algunos módulos implementan la función hook_theme que especifica que archivos y funciones se pueden usar para sobreescribir la salida HTML  http://api.drupal.org/api/function/hook_theme
  21. 26. Usando theme_link para limpiar los menus
  22. 27. Usando theme_link para limpiar los menus
  23. 32. Jorge Salinas @ SOFTWIN [email_address]

×