por Jorge Salinas HTML limpio y semántico en Drupal
HTML en Wordpress
 
Wordpress  NO  es un  CMS
HTML en Drupal
 
Views
Título Este es el campo resumen  sigue leyendo aquí
<h2>    <a href=&quot;/drupal/content&quot;> título </a> </h2> <a href=&quot;drupal/content&quot;> <img src=&quot;/image.j...
<h2>    <a href=&quot;/drupal/content&quot;> título </a> </h2> <a href=&quot;drupal/content&quot;> <img src=&quot;/image.j...
Bloques Menus
¿Que problemas trae esto? <ul><ul><li>CSS  difícil de mantener  </li></ul></ul><ul><ul><li>Mucha dificultad para validar e...
Un caso concreto.
¿Que nos propusimos? <ul><ul><li>Preparar el  HTML  y  CSS  sin pensar en Drupal </li></ul></ul><ul><ul><li>Control total ...
tpl.php  files Mothership  theme hook_theme  functions Semantic views  module Herramientas
Archivos tpl.php Son templates (plantillas) que nos permiten modificar las salidas HTML de determinados módulos.
<div id=&quot; block- <?php  print $block->module . '-' . $block->delta;  ?> &quot; class=&quot; <?php  print $classes;  ?...
<div class=&quot; block &quot;>     <?php  if ($block->subject):  ?>       <h2> <?php   print $block->subject;   ?> </h2> ...
Próxima SlideShare
Cargando en…5
×

Html Limpio Y Semantico En Drupal

2.464 visualizaciones

Publicado el

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

Publicado en: Tecnología
1 comentario
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
2.464
En SlideShare
0
De insertados
0
Número de insertados
11
Acciones
Compartido
0
Descargas
16
Comentarios
1
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

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]

×