El Sistema de Tema de Drupal

Experiencia en Infomed

Componentes del Sistema de tema

Los componentes del sistema de drupal estan compuesto por las sgtes capas de adstracción:

template languages

theme engines

themes

Template Languages and Theme Engines

• Smarty• PHPTAL• PHPTemplate

La comunidad de Drupal ha creado su propio motor de tema optimizado para Drupal y es el PHPTemplate.

http://drupal.org/project/Theme+engines.

Template Languages and Theme Engines

• Instale el motor de tema colocándolo dentro del directorio engines para su sitio sites/ sitename/themes/engines

• Coloque el motor de tema dentro del directorio sites/all/themes/engines para que este accesible para todos los sitios en una instalación multisitio.

TemasLos temas son colecciones de archivos (imágenes, css, javascript, plantillas, etc.) queconstituyen la apariencia del sitio. Se puedendescargar desde http://drupal.org/project/Themes

Template File Extension Theme Engine.theme PHP.tpl.php PHPTemplate*.tal PHPTAL.tpl Smarty * PHPTemplate es el motor de tema por defecto de Drupal

Infomed escogio el motor PHPTemplate como base para la creación de los Temas de nuestra propuesta.

Instalando un tema

• Instale el tema colocándolo dentro del directorio themes para su sitio sites/ sitename/themes

• Coloque el tema dentro del directorio sites/all/themes para que este accesible para todos los sitios en una instalación multisitio.

Construyendo Tema en PHPTemplate

La construcción de un tema depende del material inicial que se tenga, pero los paso principales son los sgtes:1. Crear o modificar un archivo de HTML para el sitio.2. Crear o modificar un archivo de CSS para el sitio.3. Crear un fichero .info para describir su nuevo tema.4. Estandarizar los nombre de ficheros según motor de tema de

Drupal (page.tpl.php).5. Inserción de las variables disponibles en la plantilla.6. Crear los archivos adicionales para los tipos del nodo individuales,

los bloques, y así sucesivamente (node.tpl.php, block.tpl.php, etc.).

Para la construcción de los temas infomed tomo como base el proyecto Zen de Drupal http://drupal.org/project/zen. Todas las modificaciones se realizaron tomandocomo base este tema genérico.

Tema ZenEl tema Zen es muy flexible, semánticamente estándar con XHTML, puede ser fácilmente modificado a través de CSS y es una versión reforzada del sistema de plantilla de Drupal ya que implementa la mayoría de sus características avanzadas, entre sus principales características están:• Posee bien documentados los archivos php y css.• Muchas de las clases y id son de fácil acceso para diseñadores de CSS.• Redimensionamiento automático (table-less) de columna para diseños de 1, 2,

y 3 columnas.• Separado fichero layout.css para permitir cambiar el tipo de diseño de la

columna.• Posee el archivo print.css que optimiza mostrar la impresión automáticamente

cuando se envía a imprimir la página — quita los elementos laterales, los de navegación, optimiza el tamaño de la fuente, agrega texto a los enlaces para mostrar los href , etc.

Un buen comentario acerca del tema Zen puede ser encontrado en la sgte url http://www.drupalmexico.com/usando-zen-theme

Tema Zen

• Bien documentado.• Capacidad de hacer subtemas heredando

características de uno base.• Capacidad de configuración avanzada.• Compatible con características de

accesibilidad y usabilidad.• Compatible con todas las versiones de Drupal

al partir de la 5.0.

Tema STARTERKITBASE

• Tema construido sobre la base del tema Zen.• Se le desactivo la capacidad de crear

subtemas a partir de este.• Construido para construir los temas de las

principales propuestas de los sitios de especialidades (ejemplo: bvsite, cencomed, htatema, etc).

• Posee un fichero README.txt donde explica como crear un temas a partir del mismo.

Temas realizados tomando como base el STARTERKITBASE

• temaeltiempo (http://www.eltiempo.sld.cu/)• bvsite (http://sitiobvs.sld.cu/)• temasoporte (http://www.usuarios.sld.cu/)• cencomed (http://www.cenco.sld.cu/)• htatema (http://www.hta.sld.cu/)

• infotemaci• infotemacidesplegable• infotemacontitulo• infotemacontituloydesplegable

Temas realizados tomando como base el STARTERKITBASE

Conjunto de temas que intentan resolver de forma genérica la apariencia de los sitios de la propuesta de los sitios de especialidades y temáticos.

Infotemacidesplegable• Tema construido para resolver de forma generica la

apariencia de los sitios de especialidades.• Surge como respuesta a los requisitos planteados por

la propuestas de diseño el grupo WEB.• Subir dos imagenes• Color de fondo del cabezal.• Subir CSS adicionar para personalización de los

bloques.• Depende del módulo nice_menus para crear los

menús despleglable

Entendiendo los ficheros de plantillasLa plantilla page.tpl.php es la base de todos los ficheros de plantillas, y proporciona el diseño global del sitio. Todos las demás plantillas se insertan en el page.tpl.php

Entendiendo los ficheros de plantillas

Cada archivo de plantilla de PHPTemplate, tales como page.tpl.php, node.tpl.php, block.tpl.php, etc - se le pasa un conjunto de contenidos dinámicos dentro de variables específicos para cada archivo de plantilla. A continuación se listan los ficheros de plantillas fundamentales de Drupal:

page.tpl.php - Controla apariencia de página de Drupal.node.tpl.php - Controla apariencia de los nodos.block.tpl.php - Controla apariencia de los bloques.comment.tpl.php - Controla apariencia de los comentarios.

La única plantilla que es obligatoria es el page.tpl.php

Como trabaja la función theme()A continuación se muestra que ocurre cuando se visualiza una simple página tal como http://example.com/?q=node/3• El sistema de menú de Drupal recibe la petición y le pasa el

control al módulo node.• Después de la construcción de la estructura de datos del nodo, se

llama a la función theme( 'nodo', $nodo, $teaser, $page). Esta busca la función de tema correcta o archivo de plantilla, define el lote de variables que la plantilla puede utilizar, y se la aplica a la plantilla, lo que termina con la generación del HTML para el nodo. (Si hay varios nodos, como sucede con un blog, este proceso ocurre para cada nodo).

• Si el módulo comment está habilitado, cualquier comentario se convierten en HTML y se adiciona al HTML del nodo.

• Este conjunto global de HTML es devuelto (se puede ver en la variable $return en el index.php) y pasado a la función theme () nuevamente como theme('page', $return).

• Antes de procesar la plantilla de la página, Drupal realiza algunos procesamientos tales como descubrir qué regiones están disponibles y qué bloques deben mostrarse en cada una de las regiones. Cada bloque se convierte en HTML llamando a la función theme('blocks', $region), qué define variables y se la aplica a la plantilla de bloque.

• Finalmente, Drupal define el lote de variables para la plantilla de la página a usar y la aplica a la plantilla.

Como trabaja la función theme()