El Sistema de Tema de Drupal Experiencia en Infomed.

Presentación del tema: "El Sistema de Tema de Drupal Experiencia en Infomed."— Transcripción de la presentación:

1 El Sistema de Tema de Drupal Experiencia en Infomed

2 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

3 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.

4 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.

5

6 Temas Los temas son colecciones de archivos (imágenes, css, javascript, plantillas, etc.) que constituyen la apariencia del sitio. Se pueden descargar 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.

7 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.

8 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 tomandohttp://drupal.org/project/zen como base este tema genérico.

9 Tema Zen El 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

10 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.

11 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.

12 Temas realizados tomando como base el STARTERKITBASE temaeltiempo (http://www.eltiempo.sld.cu/)http://www.eltiempo.sld.cu/ bvsite (http://sitiobvs.sld.cu/) temasoporte (http://www.usuarios.sld.cu/) cencomed (http://www.cenco.sld.cu/)http://www.cenco.sld.cu/ htatema (http://www.hta.sld.cu/)

13

14

15 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.

16 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

17 Entendiendo los ficheros de plantillas La 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

18 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

19 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/3http://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.

20 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()