Los usuarios desconfían de los sitios que usan diseños ya trillados ó muestran diseños cutres. Esto rebaja el nivel de la marca, por eso cada vez más empresas cuidan muy mucho estos detalles. El diseño de páginas web es un negocio en auge. Sin embargo los diseñadores se enfrentan cada vez más a un desafío creciente y es el uso ampliamente extendido de los CMS como Joomla! Para el diseñador web representa una vuelta de tuerca, ya que su clásico diseño de página HTML con su correspondiente CSS no será directamente aplicable. Para que los sea, a partir de su diseño deberá generar una plantilla que se instalará en Joomla! y le conferirá el aspecto exclusivo que aporte valor a la marca. En este artículo revisamos el proceso de convertir un diseño tradicional en una plantilla Joomla! instalable.

Introducción

Hoy por hoy, podemos encontrar en la web casi cualquier negocio, desde el bar de la esquina hasta grandes corporaciones. Crear una imagen de marca es fundamental para cualquier empresa que se precie, y uno de los escaparates más importantes para los clientes es el sitio de la empresa en internet. Los usuarios desconfían de los sitios que usan diseños ya trillados ó muestran diseños cutres. Esto rebaja el nivel de la marca, por eso cada vez más empresas cuidan muy mucho estos detalles. El diseño de páginas web es un negocio en auge.

El diseñador web es el profesional que se centra en estos aspectos: concretamente la apariencia y la funcionalidad del sitio. Es decir, la experiencia del usuario. Como diseñador web no le preocuparán ni la creación de contenidos, ni su edición, ni otros aspectos administrativos ó de desarrollo. Por ello, un diseñador web debe atesorar conocimientos sobre HTML y CSS pero podría tener tan solo una rudimentaria experiencia de programación, por lo que podría necesitar un soporte extra cuando se las vea con JavaScript y PHP. Por supuesto, un diseñador web además de estas habilidades técnicas, por encima de todo debe tener una habilidad fundamental: el buen gusto  :-)

Sin embargo los diseñadores se enfrentan cada vez más a un desafío creciente y es el uso ampliamente extendido de los CMS. CMS son las siglas de Content Management System, que en español se traduce como Sistema Gestor de Contenidos. Los CMS hacen que la puesta en marcha de un sitio web sea mucho más rápida y económica, además de proporcionar sitios más robustos y fáciles de administrar. Esto se consigue gracias a la aplicación de los principios de la ingeniería del software, como la reutilización de código, el empleo de buenos paradigmas de programación y la depuración de errores entre versiones del CMS. Pero para el diseñador web representa una vuelta de tuerca, ya que su clásico diseño de página en HTML con su correspondiente CSS no será directamente aplicable al CMS. Para que los sea, a partir de su diseño deberá generar una plantilla que se instalará en el CMS y le conferirá el aspecto exclusivo que aporte valor a la marca.

Hay muchos tipos de CMS, pero los que nos interesan aquí son los CMS del tipo Open Source (because Open Source Matters ;-), y en concreto Joomla!. Joomla se ha convertido en uno de los CMS más populares de nuestros días. Es un proyecto de software libre que pasa por ser uno de los más populares de su clase. Durante los “Open Source CMS Awards 2009” Joomla obtuvo un meritorio segundo puesto en la categoría “Hall of Fame”. En la convocatoria de 2006 ganó la categoría general de los citados premios, que detentan un enorme prestigio internacional.

En este artículo explicaremos los pormenores para convertir un clásico diseño HTML-CSS en una plantilla Joomla! versión 1.5 instalable a través del panel de administración del sitio Joomla.

El diseño clásico

A continuación expondremos el diseño clásico que utilizaremos como ejemplo. Se trata de un diseño muy simplificado que consta de dos archivos: el index.html con los contenidos del diseño y su correspondiente hoja de estilos en el fichero template.css. No se incluyen en el diseño imágenes, para simplificar el ejemplo. Por otro lado, las imágenes no requieren un tratamiento especial al convertir el diseño en una plantilla Joomla!.

Somero análisis del diseño

--- Imagen 1---

--- Imagen 1---

En la imagen 1 puede ver el aspecto del diseño, mientras que en los listados 1 y 2 puede leer el código HTML y CSS correspondientes. Se ha añadido un borde coloreado a cada caja del diseño y un margen de 5 pixels (fíjese en la clase “margen” de la hoja de estilos del listado 2 y su aplicación en el index.html del listado 1) para facilitar la comprensión de la distribución espacial del esquema. Si observa la imagen 1, verá una primera caja contenedora perfilada con un borde negro, que contiene a todas las demás cajas. En el listado 1 correspondiente al fichero index.html puede ver como las marcas:

encierran a todas las demás cajas. En el listado 2 correspondiente a la hoja de estilos template.css, puede leer los estilos asignados al primer contenedor. No nos vamos a detener en el detalle de los estilos aplicados y asumiremos que el lector conoce los entresijos del CSS. De no ser así puede encontrar estupendos tutoriales en línea (por ejemplo en http://www.w3schools.com/css/). Este ejemplo se centrará en los aspectos del esquema posicional, sin prestar atención a los estilos de letra , etc...
La estructura de cajas aplicada al diseño sigue el siguiente esquema:

• container
  • container2
    • container3
      • top
        • user1
        • user2
      • content
      • left
    • right
  • footer

El sangrado denota cómo las cajas se disponen unas dentro de otras (puede verificarlo tanto en la imagen 1, como en el index.html). Para verbalizarlo un poco: dentro de container están las cajas llamadas container2 y footer. Dentro de container2 están a su vez: container3 y right. Dentro de container3 están: top, content y left. Finalmente dentro de top están: user1 y user2.
Recomiendo trabajar sobre los diseños con Firefox, pues es un navegador acorde con la filosofía Open Source que además cumple los estándares CSS. Por supuesto, cualquier diseño debe ser validado en múltiples navegadores, sobre todo los más utilizados. Firefox presenta algunos plugins que podemos instalar y que nos serán de gran utilidad. Uno de mis preferidos es el FireBug. Con esta herramienta, podemos analizar el esquema y estilos aplicados, no sólo a nuestros diseños, sino al de cualquier página en internet que resulte de nuestro interés.

Los nombres de las cajas

Usted puede dar a las cajas el nombre que desee. Su diseño será convertible en una plantilla para Joomla! 1.5 sin problema técnico alguno. Sin embargo se recomienda no dar a las cajas nombres arbitrarios y ceñirse en la medida de lo posible a los nombres sugeridos por el uso y la tradición que se ha establecido en Joomla!. En Joomla! se establecen los nombres de las cajas según la posición y uso que ocuparán en el diseño. Gracias a esta forma de asignar los nombres de las cajas, los administradores de las páginas web saben que la caja denominada “content” albergará los artículos principales del sitio web; que la caja “left” está situada a la izquierda de “content” y que normalmente albergará los menús; que la caja “right” está a la derecha de “content” y habitualmente se situará en una ubicación apropiada para banners ó contenidos poco relevantes; etc... Usted, como diseñador, querrá crear diseños que los administradores web puedan comprender fácilmente para que su utilización sea más intuitiva. Asignar a las cajas nombres y posiciones “estándar” será de gran ayuda.

El entorno de desarollo

El entorno de desarrollo suele ser una elección muy personal. Para los diseñadores, hay herramientas muy populares como Dreamwever y Photoshop; pero yo recomiendo las opciones Open Source como Quanta Plus y Gimp, que son las que utilizo.
Los desarrolladores Joomla! suelen recomendar el entorno de desarrollo Eclipse, que es Open Source; junto con otras herramientas como SVN para el control de versiones; Phing para la construcción automática del proyecto; PHPMyAdmin para gestionar la base de datos; phpDocumentor para tareas de documentación; etc... Por supuesto, todas estas herramientas están disponibles para GNU/Linux.
A mi particularmente, me gusta el entorno de desarrollo Kdevelop para el entorno de escritorio KDE.

Manos a la obra

Lance su entorno de desarrollo preferido. Cree una carpeta para albergar el proyecto. Llámele por ejemplo “plantillaBasica”. Dentro de esta carpeta cree otra que llamará “css”. Ahora toca escribir: escriba el listado1 dentro de un fichero llamado index.html y guárdelo en /plantillaBasica. Escriba ahora el listado2 en un fichero llamado template.css y guárdelo en /plantillaBasica/css. Si no le apetece mucho escribir, encontrará los listados del ejemplo en http://www.topazioweb.com/index.php/joomla/listados listos para copiar. Ahora lance el navegador Firefox y abra el fichero index.html. Tendrá que ver en el navegador algo muy parecido a la imagen1.

Estructura de la plantilla Joomla!

Ahora que ya hemos implementado el diseño que queremos convertir en una plantilla para Joomla!, ha llegado el momento de introducir los aspectos esenciales de estas plantillas. Lo que aquí pretendemos es realizar un ejercicio práctico, por lo que le recomendamos ponerse “manos a la obra”. Esto significa que debería usted disponer de una instalación de Joomla! funcionando en su ordenador de trabajo. Puede descargarse la última versión de Joomla! del sitio web oficial www.joomla.org. Si tiene problemas con esta instalación, dispone de ayuda en los foros del sitio Joomla! así como abundante documentación. Por ejemplo en el sitio de Joomla! hay una sección dedicada a los desarrolladores (http://docs.joomla.org/Developers). Bajo el epígrafe “Setting up your workstation for Joomla! Development” encontrará una guía paso a paso. También existen numerosas publicaciones; al final del artículo recomiendo un par de libros.
Una plantilla controla el aspecto de un sitio, así como su esquema. Provee el marco que aúna los elementos comunes, módulos y componentes así como las hojas de estilo en cascada (css) para el sitio. Tanto el front-end como el back-end disponen de sus respectivas plantillas.
Cuando Joomla! se instala por primera vez, varias plantillas se incluyen por defecto. Podrá encontrar más plantillas en otros sitios web. Algunas estarán disponibles gratis bajo diferentes licencias, y otras estarán a la venta. Además, hay numerosos desarrolladores disponibles, quienes pueden crear plantillas a su medida. También podría crearse usted su propia plantilla.
Las plantillas se gestionan con el gestor de plantillas, que está localizado en el menú de Extensiones en el área de administración del sitio (vea la imagen 7).

La plantilla Joomla! básica

La plantilla que desarrollaremos en este ejemplo es muy básica, por lo que tan sólo necesitamos una carpeta:

• /css: contendrá las hojas de estilo.

La plantilla dispondrá de los siguientes archivos:

• index.php: Provee la lógica para la visualización y posicionamiento de módulos y componentes.

• template.css:  la hoja de estilos, establece los aspectos de presentación de las plantillas incluyendo especificaciones como márgenes, fuentes, cabeceras, bordes para imágenes, formatos de listas, etc... Irá dentro de la carpeta /css.

• templateDetails.xml: contiene meta-información relacionada con la plantilla y es utilizada por el instalador y el gestor de plantillas de Joomla!

La conversión

Comenzamos el proceso de conversión del diseño clásico a la plantilla Joomla!

Adaptar el templateDetails.xml

Hemos dicho entonces que necesitamos una carpeta css con un archivo template.css. Estos dos elementos ya los tenemos y no necesitaremos tocarles. Necesitaremos un index.php que construiremos modificando el index.html que tenemos. Lo haremos en un apartado posterior. También necesitamos un archivo templateDetails.xml que no tenemos. Lo más sencillo será copiar un archivo existente y modificarlo a nuestra conveniencia. Al no tener que escribir todo el texto nos ahorraremos errores sintácticos. La instalación predeterminada de Joomla! instala por defecto varias plantillas, llamadas: Milkyway, Beez y JA_Purity. Las plantillas para el Front End del sitio se instalan bajo la carpeta /Site_path/templates/nombre_plantilla. Donde “Site_path” es la ruta de su instalación Joomla! y “nombre_plantilla” será alguna de las anteriores por ejemplo “beez”. Acceda a esta carpeta (/Site_path/templates/beez) y copie en su carpeta de trabajo (plantillaBasica) el fichero “templateDetails.xml”. Abra el fichero y modifíquelo como se indica...

• <name>         En primer lugar, estableceremos el nombre de la plantilla. Fíjese bien, porque ese nombre deberá ser igual al nombre que hemos puesto a la carpeta de trabajo, a saber “plantillaBasica”. Deben coincidir mayúsculas y minúsculas (nótese la “B”).

• <creationDate>    Establezca la fecha de creación de la plantilla.

• <author>        Escriba su nombre.

• <authorEmail>    Su dirección de e-mail.

• <authorUrl>        La dirección de su sitio web.

• <copyright>        Déjelo en blanco

• <license>        Escriba “GNU/GPL”. Si quiere leer más sobre la licencia de documentación para Joomla acceda a http://docs.joomla.org/JEDL. Si quiere saber más acerca de la licencia GNU/GPL, encontrará información útil en http://www.gnu.org/licenses/gpl.html.

• <version>        Escriba el número de la versión.

• <description>        Descripción de la plantilla. Por ejemplo: “mi primera plantilla”.

• <files>

• <filename>    Cada línea bajo esta etiqueta se corresponde con un fichero de la plantilla. Verá que la plantilla Beez, contiene un gran número de ficheros. Borre todas las líneas excepto estas cinco: “css/template.css”, “css/index.html”, “index.php”, “index.html” y “templateDetails.xml”.

• <positions>        Hemos hablado sobre este asunto en un apartado anterior. En este apartado se declaran las posiciones que tendrá nuestra plantilla, para que aparezcan en los menús de administración en el Back End. Deje: left, right, user1 y user2. Borre los otros.

Guarde este fichero en su directorio de trabajo (plantillaBasica). En el listado 3 dispone de un ejemplo de edición de este fichero. De nuevo, si no le apetece escribir, dispondrá del listado 3 en http://www.topazioweb.com/index.php/joomla/listados/12-listado3

index.php

El fichero index.php es el esqueleto del sitio web. Cada página que Joomla entrega toma cuerpo a través de una selección de contenido insertada desde la base de datos. El fichero index.php de una plantilla contiene una mezcla de código html que será entregado al navegador tal cual es, y código php que será modificado previamente a su entrega al navegador. El código será familiar para cualquiera que haya diseñado una página html sencilla: hay dos secciones principales – la <head> y la <body>. En lo que difiere index.php con respecto a index.html es en el uso de código php para insertar información seleccionada desde la base de datos de Joomla!
Lo próximo que haremos será crear este fichero index.php. Será el “corazón” de nuestra plantilla porque provee la lógica para la visualización y posicionamiento de módulos y componentes. Renombre el fichero “index.html” que creamos antes, y llámele “index.php”. Guárdelo en la raíz de la carpeta de trabajo. No se asuste si no es usted programador de php, las sentencias que introduciremos serán muy simples independientemente de la complejidad de la plantilla. Abra el fichero “index.php” para su edición y siga los siguientes pasos:

Ejecución en entorno Joomla!

Debemos de asegurarnos que nuestro “index.php” se ejecuta exclusivamente en el entorno Joomla!, para evitar problemas de seguridad. Para ello añadiremos una sentencia php en la primera línea de nuestro script:

Es una sentencia php, que se distingue del restante código html porque está encerrada entre las marcas “<?php” y “?>”. Significa que la variable de entorno Joomla! _JEXEC debe estar establecida ó de lo contrario el script terminará con el mensaje “Restricted access”.

Estableciendo el lenguaje configurado en Joomla!

En la siguiente línea:

el lenguaje fue establecido a “es” (español). Ahora lo modificaremos para que la plantilla acepte el lenguaje que el administrador Joomla! decida. Modifíquela así:

Hemos cambiado “es” por “<?php echo $this->language; ?>” dos veces. Esto hace que el intérprete php publique el contenido de la propiedad “language” de la instancia de objeto en ejecución “$this”.

Estableciendo el nombre configurado en Joomla!

Habíamos configurado el título de nuestro diseño como:

Para que la plantilla visualice el “Nombre del sitio” configurado en Joomla!, debemos cambiar la anterior sentencia por:

Estamos ante una sentencia “jdoc:include”, que a partir de ahora usaremos mucho. Esta sentencia es un método específico de las plantillas Joomla! que visualiza contenido específico de la página que se pretende visualizar. En este caso es del tipo “head”, lo que significa que la sentencia suministrará la cabecera de la página, creada de manera dinámica, acorde con la configuración establecida por el administrador del sitio. Así que , en lugar de esas cabeceras definirse dentro del fichero index.php, son obtenidas de la base de datos por pequeños bocados de código php. Lo ingenioso es que ambos scripts entregarán el mismo código a los usuarios. Si usted investiga, verá que en el código de un sitio Joomla, todos los <?php blah /> serán reemplazados por código html regular.

Añadiendo los estilos

Habíamos establecido la hoja de estilos mediante:

Ahora lo haremos de forma distinta mediante:

Como puede ver, hemos añadido tres hojas de estilo. Las dos primeras son estilos “predeterminados” que establece Joomla. La última es la hoja de estilos creada para este ejemplo. Las dos primeras hojas de estilo, establecen aspectos en los que usted probablemente no habrá reparado. Si alguno de ellos no le convence, puede analizarlo con el Firebug y sobrescribirlo en su hoja de estilos “particular”, aprovechando la característica de la “cascada” de las CSS  :-)

Añadiendo contenido

Busque la caja “content” y borre el contenido. Deje la marca “h2”, y debajo añada la sentencia jdoc correspondiente. Quedará así:

Esta sentencia “jdoc” del tipo “component” debe aparecer una sóla vez en la plantilla. Suministra a la página el contenido principal.

Añadiendo los módulos a sus posiciones

De la misma manera que hemos hecho para la caja “content”, sustituiremos el contenido estático por la sentencia “jdoc” que crea el contenido dinámicamente, añadiendo los módulos correspondientes en sus posiciones.
Bajo “top”:

Bajo “user1”:

Bajo “user2”:

Bajo “left”:

Bajo “right”:

Bajo “footer”:

Hemos terminado con el archivo “index.php”

index.html

Ahora crearemos un nuevo archivo “index.html” muy simple. Contendrá solamente el siguiente código:

y sí... efectivamente, es una hoja en blanco. Incluiremos una copia en cada una de nuestras carpetas de la plantilla. Para nuestro ejemplo sólo necesitamos dos copias, una en el raíz y otra en /css. Hacemos esto por motivos de seguridad. Dependiendo de su configuración, el servidor web suministra el archivo “index.html” al navegador (si existe) ó en su defecto la lista de ficheros de la carpeta accedida. Para evitar la mirada de los curiosos es mejor suministrar una página en blanco ;-).
Hemos terminado con la edición de nuestro ejemplo. El resultado final para “index.php” está disponible en el listado 4. De nuevo, si no quiere escribir puede copiar este listado de http://www.topazioweb.com/index.php/joomla/listados/13-listado4

Crear el paquete instalable

A modo de resumen... tenemos en nuestro directorio de trabajo “plantillaBasica”, convenientemente editados, los siguientes ficheros y carpetas:

Ahora lo empaquetamos todo en un zip desde “plantillaBasica”. En mi ordenador lo hago pulsando botón derecho sobre la carpeta y eligiendo “comprimir como ZIP” en el menú emergente.
Ya tenemos la plantilla preparada y lista para instalar en Joomla! con nuestro diseño.

--- Imagen 2---

--- Imagen 2---
En la imagen 2 se muestra el archivo comprimido “plantillaBasica.zip” abierto con el programa de gestión de paquetes “Ark”. En el pueden verse la lista de archivos y carpetas así como su tamaño real y comprimido.

Instalación de la plantilla en Joomla!

Instalar vía panel de administración

Procederemos a instalar la plantilla recién creada a partir del fichero de plantilla empaquetado, vía Panel de de Administración de Joomla!.
Acceda al Back-end de su sitio (www.su-sitio.com/administrator/)
Pique sobre: Extensiones -> Instalar/Desinstalar (Ver Imagen 3)

-- Imagen 3 --

-- Imagen 3 --

Desde aquí podrá instalar sus plantillas, plugins, módulos, componentes y lenguajes. Dispone de tres opciones:
Subir un fichero empaquetado
Instalar desde un directorio
Instalar desde una URL
Veremos aquí, cómo “subir un fichero empaquetado”. Seleccione la plantilla “plantillaBasica.zip” desde su PC con el botón "Navegar"y haga clic sobre el botón "Subir Archivo & Instalar" (ver Imagen 4).

-- Imagen 4 --

-- Imagen 4 --

Si el paquete no contiene errores, se instalará y se mostrará un mensaje de éxito como el de la imagen 5.

-- Imagen 5 --

-- Imagen 5 --

Si tiene problemas con esta forma de instalación de la plantilla, hay una alternativa...

Instalar vía FTP

Las plantillas no empaquetadas, se pueden instalar vía FTP. Simplemente se trata de seleccionar la carpeta de la plantilla en su PC y subirla a su servidor, usando su software de FTP favorito. Asegúrese de que la carpeta de la plantilla se sube al directorio: /ruta_a_joomla/templates/ - donde /ruta_a_joomla/ es la localización de su instalación de Joomla! en su servidor. Este método es principalmente usado cuando se crea una plantilla propia, y no quiere tener que empaquetarlo para instalar la plantilla, ó si quiere instalar más de una plantilla a la vez.
Nota: No intente usar FTP para instalar Componentes, Módulos, ni plugins si es usted un principiante/novato. Estas extensiones necesitan entradas en la base de datos que deberán insertarse manualmente si no se usa el instalador de paquetes.

Resultado final

En la imagen 6 puede ver la plantilla, ya instalada en Joomla ! y funcionando.

-- Imagen 6 --

-- Imagen 6 --

Si usted ha seguido las indicaciones correctamente hasta aquí, observará que en su pequeño laboratorio la “plantillaBasica” no se visualiza. Como se ha dicho, Joomla dispone de varias plantillas por defecto y el administrador aún puede instalar más. Por tanto, hay que decirle a Joomla qué plantilla queremos que aplique. Es decir, debemos conmutar la plantilla actual a la plantilla deseada (plantillaBasica).

Cómo conmutar entre plantillas

Para modificar la plantilla por defecto del sitio (Front-end) ó de administración (Back-end), siga los siguientes pasos:
Acceda a la página de administración (Back-end).
Pique en: Extensiones -> Gestor de plantillas (ver imagen 7)

-- Imagen 7 --

-- Imagen 7 --

Verá la pantalla del gestor de plantillas, como se muestra en la imagen 8.

-- Imagen 8 --

-- Imagen 8 --

Nótese que solo el Super Administrador de Joomla! puede acceder a este gestor.
Desde aquí se gestionan las plantillas tanto para el Front-end como para el Back-end. La instalación por defecto muestra las plantillas instaladas para el Front-end. La plantilla por defecto para el Front-End está marcada con una estrella; en la imagen 8 se trata de la plantilla rhuk_milkyway.
Para conmutar la plantilla por defecto a Beez:
pique en el botón de radio a la izquierda del nombre de la plantilla Beez para seleccionarla.
Pique en el botón “default” en la barra de herramientas.
La estrella se moverá de  rhuk_milkyway a beez y está hecho. Para conmutar la plantilla por defecto a “plantillaBasica” siga el mismo procedimiento.

Asignar más de una plantilla al Front-end

Joomla provee una opción para usar más de una plantilla en el Front-end. Podrá hacerlo a través del gestor de plantillas, asignando la plantilla correspondiente a cada menú. Pique sobre Extensiones-> Gestor de plantillas.
Verá sus plantillas instaladas, ahora elija una plantilla que no sea la "por defecto". Pique sobre el nombre de la plantilla ó sobre el botón de radio a la izquierda de su nombre, y pique sobre el botón "Editar" en la barra de herramientas. Ahora verá la página "Plantilla: [editar]", pique sobre el botón de radio "Seleccionar desde la lista" en el bloque de "Asignación de menú" (Imagen 9) y elija los items del menú para los que se mostrará esa plantilla en concreto. Pique sobre guardar en la barra de herramientas y estará hecho.

-- Imagen 9 --

-- Imagen 9 --

Asignar los módulos a las posiciones

Ahora ya puede ver su plantilla “plantillaBasica” recién creada, instalada en Joomla! Sin embargo, el aspecto de la página no es “tan bonito” como el mostrado en la imagen 6. Esto es debido a que hay demasiados módulos asignados a posiciones. La plantilla “plantillaBasica” tal y como está diseñada no admite más de un módulo en las posiciones “user1” ó “user2” porque al visualizarse se solapan con el “content” ó “left”. Para arreglar este pequeño desaguisado, acceda al gestor de módulos en el menú de administración y asigne un solo módulo “user1” y “user2”. En la figura 6 puede ver que en “user1” he posicionado el módulo “Últimas noticias” y que en “user2” he posicionado el módulo “Popular”. Las posiciones “left” y “right” sí están preparadas para albergar varios módulos. Por ejemplo en “right” tenemos tres módulos: un “banner” de www.topazioweb.com; otro módulo “¿Quién está en línea?”; y el último “Encuesta”.

Más sobre estructura de una plantilla

La “plantillaBasica” que hemos creado es muy simple, al fin y al cabo consta de tres ficheros y una carpeta. Las plantillas comerciales suelen tener una estructura más compleja. Vamos a dar un pequeño repaso a los típicos componentes de una plantilla.

Lo más común para una plantilla es disponer al menos de los siguientes ficheros:

• index.php: Provee la lógica para la visualización y posicionamiento de módulos y componentes.

• Component.php: Provee la lógica para la visualización de la página para impresión, “envíe esto a un amigo”, “versión para imprimir”, etc...

• template.css:  establece los aspectos de presentación de las plantillas incluyendo especificaciones como márgenes, fuentes, cabeceras, bordes para imágenes, formatos de listas, etc...

• templateDetails.xml: mantiene meta-información relacionada con las plantillas y es utilizada por el instalador y el gestor de plantillas.

• template_thumbnail.ext: reemplace .ext con un formato de imagen (.jpg, .png, .gif). Se trata de una imagen en miniatura, generalmente de 200x150 pixels que se muestra cuando el cursor se sitúa sobre el nombre de la plantilla en el Gestor de Plantillas. Esto da al Administrador una imagen de la plantilla antes de aplicarla sobre el sitio.

• favicon.ico: el icono que representa al sitio en las barras de los navegadores.

Una plantilla típica para Joomla! 1.5 incluye las siguientes carpetas:

• css: contiene los ficheros css

• html: Sobrescribirá el resultado de la plantilla en el sistema Joomla y ciertos módulos.

• Images: contiene las imágenes usadas por la plantilla.

Todas las plantillas del sitio (las que cambian la apariencia del sitio) pueden encontrarse en la carpeta de plantillas (templates). Por ejemplo, si su plantilla se llama "miplantilla", entonces estará situada en la carpeta "[ruta_a_joomla]/templates/miplantilla. Busque en su instalación de Joomla! e investigue.
Todas las plantillas de administración (las que modifican la apariencia de la sección de administración), se encuentran en la carpeta administrator/templates. Por ejemplo, si su administrador de plantillas se denomina "miplantillaadministracion", entonces se situará en la carpeta "[ruta_a_joomla]/administrator/templates/miplantillaadministracion.
En el sitio del proyecto Joomla (http://docs.joomla.org/Tutorial:Understanding_Joomla!_templates) podrá encontrar más información al respecto.

Más sobre sentencias Jdoc

Las sentencias  <jdoc:include /> son métodos específicos de las plantillas Joomla  que ofrecen distintos contenidos, específico para la página servida al navegador. Esta sentencia admite varios atributos:

• type
• name
• style
• id

Por ejemplo, una sentencia  completa podría tener esta guisa:

Dispone de más ejemplos en: http://docs.joomla.org/Jdoc_statements

Atributo type

Hay cinco posibles tipos en la sentencia jdoc. La especificación de tipo debe ir siempre con comillas dobles. Los tipos posibles son:

• Component    Solo puede aparecer una vez en elemento <body> y ofrece el contenido principal de la página.

• Head        Solo debe aparecer una vez en el elemento <head> de la plantilla. Ofrece la cabecera de la página.

• Module    Ofrece los módulos que se configuren desde la administración de Joomla para presentarse en la posición “name”. No hay que olvidar que existen una serie de nombres de posición “tradicionales”. En el ejemplo se han utilizado algunos de ellos. Para ver una lista completa de posiciones y su uso, experimente con alguno de los templates que facilita Joomla como por ejemplo Beez que es uno de los más completos. Vea el fichero templateDetails.xml correspondiente.

• Installation    Solo se usa en la plantilla de instalación Joomla. Sin uso para las plantillas del Front-End ni Back-End.

• Message    Solo debe aparecer una vez en el <body>. Ofrece mensajes de error útiles para depuración. No se suele habilitar en las plantillas en producción. Los estilos CSS para los mensajes del sistema, suelen estar en “templates/system/css/system.css”.

Atributo style ó “module chrome”

Combinable con el atributo “module”. Mediante el atributo “style” especificamos el estilo que aplicaremos a la salida generada por el módulo. En caso de no especifar ninguno se asume un valor “none” para este atributo. Los valores a elegir para este atributo son: none, rounded, table, horz, xhtml y outline. Para ver una especificación detallada de cada uno de ellos: http://docs.joomla.org/What_is_module_chrome%3F
También es posible crear estilos “module chrome” propios.

Más sobre estilos predeterminados.

Como hemos dicho anteriormente los estilos que se aplicarán a Joomla se declaran en el index.html por medio de las siguientes líneas:

Los archivos “system.css” y “general.css” que se carga en la primera y segunda línea, proporcionan  estilos útiles para mensajes de error, depuración, etc...
Además de esto, Joomla establece unos nombres de estilos predeterminados que se aplicarán a diferentes partes de la página. Por ejemplo, el estilo del título para el componente principal se define mediante la clase “componentheading”. Podemos sobre escribirlos en nuestro template.css para darle a cada estilo nuestro toque particular.  Quizás los estilos predeterminados más importantes sean: componentheading, contentheading, small, createdate, buttonheading, readon, article_separator, contentpaneopen, moduletable. Cada uno tiene un uso. Investigue con el Firebug ó pruebe a leer el código fuente de una página Joomla.

Buenas prácticas del diseño web

Accesibilidad

La accesibilidad web se basa en ciertas técnicas en el diseño web que posibilitan a personas con alguna discapacidad el acceso a la información contenida en la página. Algunos de los aspectos que afectan a la accesibilidad incluyen redimensionado, uso de javascript, imágenes y tipo de medios usados, así como el uso de ciertas técnicas en el diseño de los esquemas.
Considere su audiencia... ellos podrían no estar capacitados para ver, oír, o moverse; podrían utilizar un navegador de texto ó un navegador antiguo. Los estándares de accesibilidad están diseñados para hacer los sitios web utilizables por estas personas y cada vez es más importante que los diseñadores web y desarrolladores tomen nota de estos requerimientos. En algunos países es un requisito legalmente establecido, mientras que en otros se les da cierta prioridad legal.
Hoy en día existen dos estándares primordiales usados en las bancos de pruebas para la Accesibilidad Web.

WCAG

WCAG es producido y mantenido por el world Wide Web Consortium (W3C). Los estándares WCAG están basados en tres niveles de prioridad (Prioridad 1, 2 y 3). La Prioridad 1 mantiene los requisitos más básicos que un sitio debería alcanzar para ser accesible. Un buen lugar para empezar a obtener información sobre WCAG puede ser el “Web Content Accessibility Guidelines 1.0” que encontrará en http://www.w3.org/TR/WCAG10/ .

Section 508

La Section 508 es una ley federal de los EEUU promulgada en 1998. En principio era para uso de las agencias gubernamentales, pero desde entonces se ha adoptado por la comunidad como banco de pruebas para la accesibilidad web. Para más información puede acceder al sitio oficial en http://www.section508.gov/index.cfm
Para asegurarse de que sus páginas pueden ser accesibles por virtualmente cualquiera que lo desee, sus páginas deben ser validadas contra los estándares de accesibilidad. La forma más fácil de hacerlo es usando alguno de los muchos validadores de accesibilidad, suministrados por los grupos de soporte a la accesibilidad. Simplemente teclee “validador de accesibilidad” en su buscador preferido para encontrar uno.

Lecturas recomendadas

Por supuesto en el sitio web de Joomla! encontrará abundante documentación dedica a los diseñadores (http://docs.joomla.org/Web_designers), en inglés.
El libro de Dan Rahmel editado por Anaya Multimedia en castellano: “profesional Joomla!” es una muy buena introducción que toca todos los palos (diseño, desarrollo, administración).
El libro de Tessa Blakeley editado por PACKT titulado “Joomla! 1.5 Template Design” (en inglés) me parece muy recomendable. Está muy enfocado hacia los diseñadores web.

Conclusión

Tras una breve introducción sobre el diseño web, en el artículo se parte del análisis de un esquemático diseño tradicional y se muestra paso a paso cómo convertirlo en una plantilla para Joomla 1.5. Se muestra cómo empaquetar la plantilla en un fichero y se explica su instalación desde el panel de administración de Joomla. Además de la práctica paso a paso del ejemplo, se introducen nociones acerca de las plantillas Joomla, como la estructura de una plantilla básica, los nombres de las posiciones “tradicionales”, los estilos predeterminados, las sentencias jdoc, los estilos “module chrome”, etc.
Por último se destaca la importancia del diseño que respeta los estándares de accesibilidad para facilitarle la vida a las personas discapacitadas.