PDF de programación - HTML limpio y semántico en Drupal

HTML limpio y semántico en

Drupal

por Jorge Salinas

Un caso común en Drupal

Necesitamos un bloque que nos muestre cuatro campos:

- Título
- Resúmen
- Enlace al nodo
- Imágen

Usamos el módulo Views para cumplir con esta tarea.
Agregamos los campos y creamos el bloque.

El resultado

Todo bien a simple vista...



Pero si vemos el código fuente...

Clases = 28
<div> = 11
<span> = 3

Como debería ser el HTML de este bloque

en un mundo ideal...

¿Comparamos?

VS

Otro ejemplo, los menús en Drupal.

No siempre necesitamos tantas clases.

¿Que problemas trae esto?

• CSS difícil de mantener. 

• Mayor dificultad para validar el HTML.

• Un código HTML poco semántico.

• Menor control sobre el HTML y CSS.

• Más código y mayor tamaño del documento.

¿Como lo arreglamos?

• Archivos TPL

• Funciones temeables

• Módulos contribuidos

• Mothership Theme

Advertencia antes de continuar

Algunas clases o IDs 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.

Archivos tpl.php

Son templates (plantillas) que nos permiten modificar las salidas HTML
de determinados módulos.

Muchos módulos implementan estos archivos para darnos mayor
control sobre las salidas HTML.

Por ejemplo los módulos Views, Block, Node, Poll, entre otros, los
implementan.

Limpiando la salida de los Bloques con archivos TPL

Si copiamos el archivo block.tpl.php que se encuentra en la carpeta del módulo Block a
nuestro tema, podremos modificar la salida HTML de todos los bloques.

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?>"><div class="block-inner">

<?php if ($block->subject): ?>
<h2 class="title"><?php print $block->subject; ?></h2>
<?php endif; ?>

<div class="content">
<?php print $block->content; ?>
</div>

<?php print $edit_links; ?>

</div></div> <!-- /block-inner, /block -->

Salida HTML por defecto:

/modules/block/block.tpl.php

<div id="block-<?php print $block->module . '-' . $block->delta; ?>" class="<?php print $classes; ?>"><div class="block-inner">

<?php if ($block->subject): ?>
<h2 class="title"><?php print $block->subject; ?></h2>
<?php endif; ?>

<div class="content">
<?php print $block->content; ?>
</div>

<?php print $edit_links; ?>

</div></div> <!-- /block-inner, /block -->

/modules/block/block.tpl.php

Eliminamos y/o reemplazamos el marcado que no necesitamos y agregamos el nuestro

<div class="block">

<?php if ($block->subject): ?>
<h2><?php print $block->subject; ?></h2>
<?php endif; ?>

<?php print $block->content; ?>

</div> <!-- /block -->
Nos da esto:

/sites/all/mitema/block.tpl.php

: )

¿Y si necesito “temear” un bloque específico?

Usamos el módulo Theme Developer que identifica con
un click los nombres que podemos usar para el archivo
TPL de un bloque específico.

Más detalles acerca de los nombres de archivos TPL aquí:
http://drupal.org/node/104319

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

Módulos contribuidos y temas

Semantic Views
Este módulo nos da una interfaz gráfica desde donde podremos
cambiar la salida HTML de nuestras vistas (views). 

drupal.org/project/semanticviews

Semantic CCK
Es un módulo que nos permite, mediante una interfaz gráfica, cambiar la
salida de los campos creados con CCK.

drupal.org/project/semantic_cck

Mothership
Es un tema que limpia las clases e ids que Drupal trae por defecto. 
Se utiliza como un tema base y trae una interfaz para elegir que clases o
ids queremos eliminar o conservar.

drupal.org/project/mothership

Adicional: Theming de Views y CCK

Ver la presentación de Edgar Marca (Matiskay) donde se explica con mucho detalle como
“temear” (y limpiar) el HTML de estos módulos:

http://drupalperu.org/node/314

Jorge Salinas
[email protected]