Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Html Limpio Y Semantico En Drupal

2.706 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en recomendar esto

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]

×