¿Qué es una Plantilla Joomla!?

Una plantilla Joomla! consiste en una serie de archivos dentro del CMS Joomla! que
controlan la presentación del contenido. Una plantilla Joomla! no es un website; no se
puede considerar como un website totalmente diseñado. La plantilla son las bases
fundamentales de diseño definidos para tu sitio Joomla! Para producir el efecto de un
website “completo”, la plantilla trabaja mano a mano con el contenido albergado en la
base de datos Joomla! Un ejemplo de lo explicado lo podemos ver en la Figura 9.1.

fig. 9.1

La figura 9.1, en la parte A muestra la plantilla en uso con contenido de ejemplo. La parte
B muestra la plantilla tal y como se vería en una instalación de Joomla! con muy poco o
nada de contenido. La plantilla define una serie de estilos. Por lo tanto, cuando se inserte,
el contenido va a heredar los estilos definidos en la plantilla como, por ejemplo, los estilos
de link, menús, navegación, tamaño de texto y colores.
Es importante fijarse en que las imágenes asociadas con el contenido (las fotos de las
personas, en la figura) no son parte del template pero que la imagen de la cabecera sí que
lo es.
Usar una plantilla para un CMS como Joomla! tiene una serie de ventajas e
inconvenientes:

- Hay una completa separación entre contenido y presentación, especialmente cuando se

usa CSS para crear el layout (en oposición a crear el index.php mediante tablas). Éste es
uno de los criterios fundamentales para crear un sitio que contemple los estándares web.
- Una nueva plantilla, y por lo tanto, una nueva imagen completa para la web, puede ser
aplicada al instante. Cambiando la plantilla puedes conseguir posicionar el contenido de
forma diferente así como cambiar completamente los colores y gráficos
- Puede ser más complicado implementar distintos layouts para un mismo website.
Aunque se pueden aplicar distintas plantillas a distintas páginas del site, esta
funcionalidad no es totalmente fiable. La mejor opción sería utilizar condicionales en PHP y
crear un layout dinámico que adapte el número de columnas dependiendo del contenido
publicado.
Lo mínimo que necesita saber
Los websites modernos separan el contenido de la presentación utilizando una tecnología llamada Cascade Style
Sheets (CSS). En Joomla!, la plantilla controla la presentación del contenido.

Proceso de Diseño en el Localhost

La página web que se visualiza en un website creado en Joomla! no es estática. Esto
significa que es generado dinámicamente desde el contenido albergado en la base de
datos. La página que se visualiza es creada mediante distintos comandos PHP que se
encuentran en el template, lo que presenta algunas dificultades en la fase de diseño.
Actualmente es común utilizar un editor what you see is what you get (WYSIWYG) como,
por ejemplo, Dreamweaver. Esto facilita que el diseñador no tenga que teclear código
HTML. Esto no es posible en el diseño de templates para Joomla! ya que los editores
WYSIWYG no pueden mostrar una página dinámica, lo que hace que los diseñadores
tengan que teclear el código HTML “a mano” y previsualizarla desde un servidor de
pruebas con PHP. Con una conexión rápida esto se puede realizar mediante un servidor
web remoto, pero muchos diseñadores utilizan un servidor local en su propia
computadora. Un servidor local es un software que permite servir páginas web en el
ordenador del diseñador.

No hay una “forma correcta” para crear una página web. Va a depender más de la
experiencia de cada diseñador. Los más enfocados al diseño acostumbran a crear una
“imagen” del layout en un programa gráfico como GIMP o Photoshop y posteriormente
rompen la imagen para ser usada en la maquetación de la web. Los más enfocados a la
tecnología habitualmente saltan directamente al CSS y empiezan a teclear código.

De todas formas, como se ha mencionado, el diseñador de plantillas Joomla! está limitado

por no poder ver el resultado de su código directamente en su editor. El proceso de diseño
modificado es como sigue:

- Hacer la edición con un editor HTML y guardar los cambios.

- Tener un servidor local (localhost) funcionando para “ejecutar” Joomla!.
- Ver lo editado en un navegador, como, por ejemplo, Firefox.
- Volver al paso 1.

Lo Mínimo Que Se Necesita Saber

Cuando se crea un template, se necesita tener Joomla! funcionando en un servidor web (local o remoto) para poder
hacer cambios y recargar, al momento, la página de salida.

Una plantilla está compuesta por varias carpetas y archivos. Estos archivos van en su
propia carpeta, dentro del ditectorio templates de Joomla!
Por ejemplo, si tenemos 2 plantillas, llamadas voodoo y elements, el directorio queda así:
Code:

/templates/element
/templates/voodoo

El directorio de una plantilla debe tener el mismo nombre que la plantilla.

Obviamente estos nombres son sensibles a mayúsculas y minúsculas y no pueden
contener espacios.
Dentro del directorio de una plantilla hay dos archivos muy importantes:
Code:
/element/templateDetails.xml
/element/index.php
 Los nombres y ubicaciones de estos dos archivos deben estar exactamente así,
porque es como los va a buscar el núcleo de Joomla!

templateDetails.xml
Este archivo le dice a Joomla! qué otros archivos son necesarios cuando un usuario
carga una página que usa esta plantilla. (Notar la D mayúscula).
También contiene detalles sobre el autor y los derechos de autor. Su otro uso es para
instalar la plantilla desde la administración del sitio.

index.php

Presenta el sitio y le indica al núcleo de Joomla! dónde mostrar los distintos

componentes y módulos. Es una combinación de PHP y (X)HTML.

Muchas plantillas usan otros archivos, además de templateDetails.xml e index.php.

Es convencional (pero no requerido por el núcleo de Joomla!) ubicarlos así:
Code:
/element/template_thumbnail.png
/element/css/template.css
/element/images/logo.png

Otros archivos de una plantilla

/element/template_thumbnail.png
Captura de pantalla de la plantilla (usualmente reducida a unos 140 por 90 píxeles).
Funciona como imagen de Previsualizar visible en el Administrador de Plantillas de la
administración del sitio, y en el módulo de selección de plantillas para los usuarios
(si estamos utilizando dicho módulo).

/element/css/template.css
CSS de la plantilla. El nombre de este archivo y la carpeta son opcionales, pero hay
que explicar dónde está ubicado en el index.php. You can call it what you like. Se
suele usar este nombre, pero veremos ventajas en tener más de un CSS.

/element/images/logo.png
Imágenes que vienen con la plantilla. Por razones de organización, muchos
diseñadores las ponen en una carpeta llamada images. Aquí pusimos una imagen
llamada logo.png como ejemplo.[/html]
templateDetails.xml

El fichero templateDetails.xml incluye todos los ficheros que forman parte de una
plantilla. Esto incluye también información como el autor y los derechos de autor
(copyright). Esta información se muestra también en la parte de administración del
sitio en la sección Administrador de Plantillas. A continuación se muestra un ejemplo
de fichero XML:

HTML Code:
<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
<name>TemplateTutorial15</name>
<creationDate>August 2007</creationDate>
<author>Barrie North</author>
<copyright>GPL</copyright>
<authorEmail> compassdesigns@gmail.comThis email address is being protected
from spam bots, you need Javascript enabled to view it </authorEmail>
<authorUrl>www.compassdesigns.net</authorUrl>
<version>1.0</version>
<description>First example template for Chapter 9 of the Joomla
Book</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>
<positions>
<position>user1</position>
<position>top</position>
<position>left</position>
<position>banner</position>
<position>right</position>
<position>footer</position>
</positions>
<params>
<param name="colorVariation" type="list" default="white" label="Color Variation"
description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
</param>
</params>
</install>

Vamos a explicar algunas de las líneas que aparecen:

• <install version="1.5" type="template">. El contenido del documento XML son
instrucciones para el instalador del sitio. La opción type="template" informa al
instaladore de que estamos instalado una plantilla para Joomla 1.5.
• <name>TemplateTutorial15</name>. Define el nombre de la plantilla. El nombre
que insertas aquí será usado también para crear el directorio de la plantilla en el
directorio templates. El nombre no debe incluir ningún character que el sistema no
pueda reconocer, por ejemplo espacios. Si instalas manualmente, necesitas crear el
directorio con el mismo nombre que el nombre de la plantilla.
• <creationDate>August 2007</creationDate>. La fecha en la cuál se ha creado la
plantilla. Este es un campo sin formato (libre) y puede tener un formato como May
2005, 08-June-1978, 01/01/2004, y otros muchos.
• <author>Barrie North</author>. El nombre del autor de esta plantilla [md]
preferentemente tu nombre.
• <copyright>GPL</copyright>. La información sobre los derechos de copia va en
este elemento. Una licencia para Desarrolladores y Diseñadores puede encontrarse
en los foros de Joomla.
• <authorEmail> compassdesigns@gmail.com Esta dirección de correo electrónico se
encuentra protegida de los robots de spam, necesitas tener javascript activado para
poder verlo </authorEmail>. Dirección de correo electrónico donde puede ser
contactado el autor de la plantilla.
• <authorUrl>www.compassdesigns.net</authorUrl>. La dirección web del autor de
la plantilla.
• <version>1.0</version>. La version de la plantilla.
• <files></files>. Ficheros utilizados por la plantilla.
• Los ficheros utilizados en la plantilla se encierran entre etiquetas <filename>

HTML Code:
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>js/somejsfile.js</filename>
<filename>images/threecol-l.gif</filename>
<filename>images/threecol-r.gif</filename>
<filename>css/customize.css</filename>
<filename>css/layout.css</filename>
<filename>css/template_css.css</filename>
</files>

• La sección “ficheros (files)” contiene todos los ficheros genéricos como el código
fuente PHP para la plantilla o la miniatura de la plantilla para su previsualización.
Cada fichero listado en esta sección se encuentra encerrado por las etiquetas
<filename> </filename>. También incluye cualquier fichero adicional; aquí en el
ejemplo se invoca un un fichero javascript que es requerido por la plantilla.
• Todos los ficheros de imágenes que la plantilla utiliza son listados en la sección
<files>. Cada fichero listado se encuentra definido por las etiquetas <filename>
</filename>. La información de la ruta donde se encuentran los ficheros, es relative
al directorio raíz de la plantilla. Por ejemplo, si la plantilla está en el directorio
llamado ‘Tuplantilla’ (YourTemplate), y todas las imágenes se encuentran en el
directorio ‘imágenes (images)’, dentro de ‘Tuplantilla (YourTemplate), la dirección
correcta de la ubicación es: <filename>images/my_image.jpg</filename>
• Por ultimo ninguna plantilla de estilo (stylesheets) es listada en la sección
ficheros.. <positions></positions>.Las posiciones de los módulos disponibles en la
plantilla.
• <params></params>. Esto describe parámetros que van a ser pasados, para
permitir funciones avanzadas de las plantillas, como cambiar el color de la plantilla.
index.php

¿Qué hay actualmente en el fichero index.php? Es la combinación de (X)HTML y PHP

que determina todo sobre la presentación y las capas de las páginas.
Primero, echemos un vistazo a una parte crítica de las plantillas válidas, el atributo
DOCTYPE al principio del fichero index.php file. Este es un pequeño trozo de código
que va en la parte superior de la página En la parte superior de la página, tenemos
esto en nuestra plantilla:

Código PHP:
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

La primera sentencia PHP simplemente se asegura de que no se puede acceder

directamente al fichero por seguridad.

El atributo DOCTYPE de una página web es uno de los componentes fundamentales,

indica cómo va a ser mostrada una página por un navegador, específicamente, cómo
el navegador interpreta CSS. Para permitirte una comprensión total, una observación
de alistapart.com dice:
Cita:
[Información en el sitio W3C's sobre DOCTYPEs ] escrito para tecnófilos por tecnófilos. Y cuando digo
tecnófilos, no me refiero a los profesionales corrientes como tu y yo. Digo tecnófilos cuando me refiero a los
que nos hacen sentir como una abuela la primera vez que recibe un correo electrónico..

Por otra parte, puedes utilizar múltiples DOCTYPEs. Básicamente, el DOCTYPE

informa al navegador como interpretar la página. Aquí las palabras “estricto” y
“transicional” empiezan saliendo alrededor del float (float:left y float:right
habitualmente). Esencialmente, desde que empezó la web, los diferentes
navegadores tienen diferentes niveles de soporte para CSS. Esto hace por ejemplo
que Internet Explorer no comprenda un commando "min-width" utilizado para
configurar la anchura mínima de una página. Para generar el efecto, necesitas
utilizar “mejoras (hacks)” en la CSS.

Some say that serving XHTML as text/html is considered harmful. If you actually
understand that statement you are well ahead of the game and beyond this guide.
You can read more at hixie.ch/advocacy/xhtml.

El HTML Estricto (o XHTML) es el que es interpretado exactamente como dictan los

estándares. Un DOCTYPE Transicional permite a la página mostrar algunos pequeños
trozos diferentes a los estándares.

Para complicar las cosas, tenemos un modo llamado “chapuzas (quirks)”. Si el

DOCTYPE es incorrecto, no actualizado, o no se encuentra, el navegador utiliza el
modo “chapuzas”. Esto es una manera de compatibilidad marcha atrás, para Internet
Explorer 6, por ejemplo, dibujamos la página como si fuera para IE4.
Desafortunadamente, algunas personas acaban en modo “chapuza” de manera
accidental. Esto ocurre habitualmente de dos maneras:
• Utilizan una declaración diferente de DOCTYPE a la de la página de la WC3, y el
enlace acaba como DTD/xhtml1-strict.dtd, excepto si es el enlace relativo al servidor
de la WC3 . Necesitas la ruta completa y mostrarlo al inicio.
• Microsoft configura IE6 por lo tanto tienes páginas validas pero se muestran en
modo chapuza. Esto ocurre porque tenemos una “declaración xml” puesta antes del
DOCTYPE.
En el siguiente ejemplo es una sentencia XML (después del DOCTYPE):
Código PHP:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
La parte sobre el modo chapuza de IE6 es importante. En este capítulo solo estamos
diseñando para IE6+ (Internet Explorer 6 ó superior), con lo que nos tenemos que
asegurar que esto funcionan en un modo estándar. Esto minimizará las mejoras que
tengamos que hacer posteriormente.

NOTA
Haciendo una página web que cumple los estándar, podrás mostrar un botón “xhtml válido” en la página, esto
no tiene ninguna dificultad en la codificación, o incompresibles etiquetas. Esto significa que el código que
haces utilizando DOCTYPE dice lo que quieres, ¡nada más!

Diseñando tu sitio con estándares puedes reducir un nivel lo que muestras y cómo
quieres mostrarlo.
Aquí tienes algunos prácticos enlaces, que te pueden ayudar a comprender el
 DOCTYPE y el modo chapuzas:
• www.quirksmode.org/css/quirksmode.html
• www.alistapart.com/stories/doctype
• www.w3.org/QA/2002/04/Web-Quality
• http://forum.joomla.org/index.php/topic,7537.0.html
http://forum.joomla.org/index.php/topic,6048.0.html

Más contenidos de index.php

Luego incluimos el cabezal ("header"). En este caso usaremos un cabezal con poco
contendido, pero suficiente para un sitio en producción.
Code:
<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted
access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/
css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/
template.css" type="text/css" />
</head>

Ya vimos lo que hace DOCTYPE.

Lo siguiente:
Code:
<?php echo $this->language; ?>
trae el idioma marcado en la configuración global del sitio.

La próxima línea trae información para el cabezal que también está en la

configuración global del sitio:

Code:
<jdoc:include type="head" />
En una instalación por defecto esa información para el cabezal traída de la
configuración global incluye:

Código PHP:

Code:
<title>Welcome to the Frontpage</title>
<meta name="description" content="Joomla! - the dynamic portal engine and
content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content
Management" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<link href="http://www.compassdesigns.net/content/frontpage/feed/1/rss/"
rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="http://www.compassdesigns.net/content/frontpage/feed/1/atom/"
rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/
system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/
system/js/caption.js"></script>

Partes de esa información de cabezal son creadas al vuelo, específicamente para el

artículo que el usuario está viendo.

Incluye algunos metadatos, direcciones URL para RSS y archivos estándar de

javascript. Las últimas líneas del cabezal incluyen archivos de CSS:

Code:
<link rel="stylesheet" href="templates/system/css/system.css" type="text/
css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/
template.css" type="text/css" />
Los primeros dos archivos, system.css y general.css contienen estilos genéricos de
Joomla. el tercer archivo es todo el CSS específico de la plantilla, en este caso
llamado template.css.

El siguiente trozo:
Code:
<?php echo $this->template ?>
devuelve el nombre de la plantilla actual. Podríamos escribir el nombre
directamente, pero de esta forma el código es más genérico, y al escribir una
plantilla nueva podríamos copiar esto junto con todo el código del cabezal sin tener
que cambiar nada.

El CSS puede estar compuesto por cualquier número de archivos, por ejemplo CSS
condicionales para diferentes navegadores. El que ponemos a continuación
solamente se utilizaría con Internet Explorer 6:

Code:
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css"
rel="stylesheet" type="text/css" />
<![endif]-->
Este otro es una técnica para usar parámetros en una plantilla:

Code:
<link rel="stylesheet" href="templates/<?php echo $this->template ?
>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/
css"
Cuerpo de plantilla en blanco para Joomla 1.5
¡La creación de nuestra primera plantilla será muy muy fácil! ¿Listos?
Todo lo que necesitamos hacer es usar una declaración Joomla que inserta el
contenido de los módulos y el mainbody.
HTML Code:
<body>
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
</body>
En este punto (si hace un preview), nuestro sitio no se ve muy impresionante.

Figura 9.3 Una plantilla sin estilo

 La plantilla contiene lo siguiente en un razonable orden lógico:
• Nombre del sitio
• Módulo superior
• Módulos de la izquierda
• Contenido principal
• Módulos de la derecha
Lo mínimo que necesita saber
La plantilla más básica simplemente carga los módulos de Joomla y el mainbody (componente). La disposición y el
diseño es parte del CSS, no de Joomla.

El objetivo es tratar de entrar lo más cerca posible del atributo semántico como sea
posible. Desde un punto de vista Web, significa que una página puede ser leída por
cualquier persona [md] un navegador, un spider, o un screen reader. El diseño semántico
es la piedra angular de la accesibilidad.
NOTA
Lo que tenemos aquí es en realidad sólo el potencial de diseño semántico. Si tuviéramos que ir adelante y poner al
azar módulos en lugares aleatorios, tendríamos un lío. Una consideración importante para sitios CMS es que la
plantilla es tan buena como la totalidad de su contenido. Esto es lo que a menudo saltan los diseñadores cuando se
trata de validar sus sitios.

Notará que hemos utilizado la primera de una serie de comandos específicos para Joomla
para crear este producto:
Código PHP:
<?php echo $mainframe->getCfg('sitename');?><br />
<jdoc:include type="module" name="breadcrumbs" />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
La declaración PHP eco simplemente produce un string desde el archivo configuration.php.
En este caso, estamos usando el nombre del sitio; Podríamos fácilmente haber tenido lo
siguiente:
Código PHP:
The name of this site is <?php echo $mainframe->getCfg('sitename');?
><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?
><br />
This template is in the <?php echo $this->template?> directory<br />

The URL is <?php echo JURI::base();;?>

La declaración jdoc inserta diversos tipos de salida XHTML, ya sea de módulos o de
componentes.
Esta línea inserta la salida de un componente. Qué componente será determinado por el
enlace del menú:
Código PHP:
<jdoc:include type="component" />

NOTA
Curiosamente, parece ser que se pueden tener múltiples instancias de componentes de salida. No estoy seguro de
para qué las quieres, ¡pero creo que tenía que hacertelo saber! Podría ser un bug (error).
Esta línea inserta la salida para la instalación de un módulo:
Código PHP:
<jdoc:include type="modules" name="right" />
La sintaxis completa es realmente
Código PHP:
<jdoc:include type="modules" name="LOCATION" style="OPTION" />
Nos fijamos en las diversas opciones de estilos en la sección sobre los módulos más
adelante en este capítulo.

CSSTemplateTutorial Paso 1
En este momento tenemos una plantilla muy vacía. He creado una plantilla instalable que
se encuentra disponible en Compass library::: CSSTemplateTutorialStep1.zip.

Esto instalará una plantilla que sólo tiene dos archivos, el index.php y
templateDetails.xml. He eliminado las referencias a otros archivos para dar una estructura
vacía de salida sin CSS. Esta es en realidad una utilidad de diagnóstico de plantilla; Puede
instalar y realizar el seguimiento de los errores que se están produciendo con un
componente o módulo.

Utilizaremos el CSS puro para hacer una disposición de 3 columnas para la plantilla de
Joomla!. También haremos una disposición "fluida". Hay dos tipos principales de
disposición del diseño: fijo y fluido, y ambos se refieren a "cómo se controla el ancho de la
página".

La anchura de la página es un asunto importante a tener en cuenta debido a que los

usuarios trabajan a distintas resoluciones de navegador. Aunque el porcentaje está
cayendo, aún un 17% de personas están utilizando una resolución 800x600. Sin embargo,
la mayoría, el 79%, está utilizando 1024x768 u otra resolución superior. Crear una
disposición fluida de tu plantilla significa que tu página web no se verá como una fina
columna en la resolución 1024 y podrá verse al completo en monitores más pequeños.

Un diseño típico se serviría de “tablas” para definir la disposición de la página.

Ciertamente, las tablas son útiles ya que sólo tienes que fijar la anchura de las columnas
con porcentajes y así tener un diseño adaptable a las distintas resoluciones, pero a la vez
tienen varias desventajas. Por ejemplo, el diseño con tablas utiliza mayor cantidad de
código en comparación con el diseño CSS. Lo que significa mayor tiempo de carga (cosa
que a los navegantes no gusta), también dan peor resultado en los motores de búsqueda.
A la práctica, la cantidad de código puede incluso llegar a doblarse, no sólo por los tags
necesarios, sino también por la parte de código usada para marcar los espacios.

Incluso las compañías grandes caen a veces en la trampa de usar tablas según lo que
hemos podido ver por una controversia reciente sobre la nueva web inglesa de Disney:
disney.co.uk:

Hay un par de problemas más relacionados con el uso de tablas para definir la
maquetación del diseño.

• Son difíciles de mantener. Para cambiar algo tienes que calcular lo que están
haciendo todas las etiquetas de la tabla como td/tr. Con el CSS hay a penas algunas
líneas a examinar.
• El contenido no se puede ordenar. Muchas personas usuarios de Internet no ven las
páginas en un navegador, sino que usan navegadores textuales o navegadores de
voz que examinan el contenido de la pantalla de izquierda-arriba a derecha-abajo.
Esto significa que primero ven todo lo que hay en la cabecera y en la columna
izquierda (para una disposición de 3 columnas) antes de llegar a ver el contenido de
 la columna central, que seguramente es la que tiene el contenido importante. Un
diseño que usa CSS lleva el contenido ordenado dentro del código fuente de manera
que puede ser reorganizado, piensa que tal vez tú visitante más importante sea
Google, y éste usa un programa lector de pantalla a la hora de interpretar el
contenido de tu página.
Es interesante que conozcas bien como funcionan las hojas de estilo en cascada (CSS) ya
que con ellas puedes colocar los elementos de contenido de varias maneras. Para una
introducción rápida, una buena fuente es: “Brainjar's CSS Positioning” (posicionamiento
con CSS, por Brainjar)..
Aunque, si eres nuevo en el CSS, sería bueno que leyeras una guía del iniciación. Aquí
tienes algunas sugerencias:
• Kevin Hale's An Overview of Current CSS Layout Techniques
http://particletree.com/features/an-...ut-techniques/
• htmldog's CSS Beginner's Guide
www.htmldog.com/guides/cssbeginner/
• yourhtmlsource.com
www.yourhtmlsource.com/stylesheets/
Los diseños web actuales usan CSS en vez de tablas para posicionar elementos. Es difícil
de aprender a usar pero es una inversión que merece la pena. Hay muchos recursos (no-
Joomla!) disponibles para ayudarte.

Utilizaremos la propiedad “float” para colocar nuestro contenido. Es muy sencillo, la

plantilla deberá tener una apariencia como la de la Figura 9.4.
Aún no muy emocionante, pero vamos a analizar las distintas partes por separado.

Los estilos del CSS están definidos aquí, dentro del tag <head></head> del archivo para
mostrar su funcionamiento, pero en realidad deberían estar definidos dentro del archivo
template.css.

Todo queda dentro de un elemento llamado #wrap, que tiene un ancho fluido (variable)
que puede ir desde los 760px a los 960px.
En la figura 9,4, las columnas izquierda, media y derecha poseen cada una su propio
elemento. Las 3 están flotadas a la izquierda, y tiene asignado un porcentaje del ancho
total. Si sumamos esos 3 porcentajes asignados, obtenemos 100%.
El estilo "clear:both" en el pie indica al navegador que "detenga la flotación" y asigne al
pie el ancho total sumado de las 3 columnas. Esto también se puede hacer con técnicas
más avanzadas que veremos al construir nuestra segunda plantilla.
Entre las columnas es normal dejar cierto espacio o "canal", que podríamos lograr
marcando un "padding"en el estilo de las columnas. Pero esto fallaría en Internet Explorer
por una falla de interpretación del CSS para el cálculo de los anchos, Evitamos este
problema no utilizando "padding" y en vez de eso agregando otro elemento <div> dentro
de cada columna.

Añadimos al CSS:

Code:
.inside {padding:10px;}

Y en el código para <body> (en index.php) dejamos:

Code:
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<?php echo $mainframe->getCfg('sitename');?>
<jdoc:include type="modules" name="top" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" />
</div>
</div>
<div id="content"> <div class="inside">
<jdoc:include type="component" />
</div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" />
</div>
</div>
<div id="footer">
<div class="inside"> Este sitio utiliza <a
href="http://joomla.org">Joomla!</a>.
Válido <a href="http://validator.w3.org/check/referer">XHTML</a> y
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. </div>
</div>
</div>
<!--end of wrap-->
</body>
El archivo template.css va a ser:
Code:
#wrap {
min-width:760px;
max-width:960px;
}

#content {
float:left;
width:60%;
overflow:hidden;
}

#footer {
clear:both;
}

.inside {
padding:10px;
}

#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
 Truco: Acortando el código CSS

Un código CSS así:

Code:

margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;

puede reemplazarse por:

Code:

margin: 5px 10px;

Podemos usar estilos "taquigráficos " en cada definición de estilo. Después de crear los estilos,
reemplazamos el código largo por el código corto. La sintaxis es:
font: font-size |font-style | font-variant | font-weight | line-height | font-family

Por ejemplo, cambiamos esto:

Code:

font-size:1em;

font-family:Arial,Helvetica,sans-serif;

font-style:italic;

font-weight:bold;

line-height:1.3em;

por esto:
Code:

font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

Más datos sobre este tip:

http://home.no.net/junjun/html/shorthand.html.

Esta plantilla simple demuestra dos de las ventajas de las disposiciones con CSS
sobre las basadas en tablas: es menos código y es más fácil mantener. Su limitación
es que no ordena el código fuente por importancia, y de esta forma los motores de
búsqueda no leen primero los datos más importantes (en Joomla! los datos
importantes provienen de los componentes). Para mejorar eso usamos una técnica
más avanzada llamada flotador jerarquizado.

CSS por defecto

Hasta ahora nuestro CSS presenta una página plana. Agregaremos algo de formato:
Code:
body {
text-align:center;
}

#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
text-align:left;
margin:0 auto;
}

#content {
float:left;
width:60%;
overflow:hidden;
}

#footer {
clear:both;
}

.inside {
padding:10px;
}

#sidebar,#sidebar-2 {
float:left;
width:20%;
overflow:hidden;
}
Lo primero que hicimos fue centrar la página. Para navegadores que siguen los
estándares, basta con poner margin:0 10% para centrar la página, pero IE no lo
entiende, entonces centramos el texto de toda la página y dentro de cada columna
lo volvemos a alinear a la izquierda.

Incluimos un ancho mínimo y máximo que es soportado por IE7 pero no por IE6.
Para IE6 hicimos un truco: va a ignorar la declaración !important y mostrar un ancho
plano antiguo de 960 px.
NOTA
Parece raro que las columnas tengan ancho definido en porcentaje pero estén contenidas en un <div> que es
fijo. La explicación es:
* este modo hace muy flexible a nuestra plantilla. Si queremos poner botones de cambio de ancho,
solamente deberemos cambiar un valor.
* el ancho máximo evita que los usuarios que tienen monitores demasiado grandes reciban tipografías tan
gruesas que pierdan legibilidad por su propio tamaño exagerado (más de 900 px es incómodo).

También agregamos una norma de estilo a las columnas: overflow:hidden. Esto hace
que la página se "quiebre" con más uniformidad si reducimos el ancho.

Al comienzo de la definición de la tipografía, con el CSS fijaremos algunos estilos

totales y tendremos qué se conoce como reajuste global:

Code:
* {
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}

li,dd {
margin-left:1em;
}

fieldset {
padding:.5em;
 }

body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
}
Le damos a todo margen y padding cero, y un margen inferior. Esto le da
consistencia a lo que el navegador vaya a mostrar. Más datos sobre este tema (en
inglés): http://clagnut.com/blog/1287/

Ponemos el tamaño de fuente en 76%. Esto es para tener mayor consistencia del
tamaño de letra en los distintos navegadores. Después marcamos todos los tamaños
de letra en em. Con line-height:1.3 aumentamos la legibilidad. Con esto, el usuario
va a poder reasignar los tamaños de letra desde su propio navegador. (más datos en
este libro: ( Owen Briggs)

Si queremos agregar color de fondo al cabezal y a los contenedores de contenido,

obtenemos algo así: (figura 9.5)
Vemos que las columnas laterales no alcanzan al pie. Esto es porque solamente
tienen la altura de su contenido, más allá no existen.
Esto no es problema si nuestra plantilla usa el mismo color de fondo para las 3
columnas.
Pero si queremos columnas de distintos colores o recuadradas y que tengan la
misma altura tenemos que usar una imagen de fondo que se repita verticalmente
(propiedad de CSS background-repeat). Esa técnica se llama "falsas columnas" y se
puede ver en este libro.

CSS específico para Joomla!

Joomla! nos permite sobreescribir la salida ("vista") enviada por el núcleo a la
pantalla, incluyendo en el archivo CSS el formato para estos estilos:

article_separator contentpagetitle newsfeed

adminform contentpane outline
article_separator contentpaneopen pagenav
author contenttoc pagenav_next
bannerfooter createdate pagenav_prev
bannergroup created-date pagenavbar
bannerheader date pagenavcounter
banneritem input pathway
blog inputbox pollstableborder
blog_more intro read
blogsection latestnews search
breadcrumbs loclink searchintro
button mainlevel sections
buttonheading message sectiontable_footer
clr metadata sectiontableentry
componentheading modifydate sectiontablefooter
content_email module sectiontableheader
content_rating moduletable small
content_vote mosimage smalldark
contentdescription mosimage_caption sublevel
contentheading mostread title
wrapper
 En CSS una regla más específica elimina una regla menos específica.
Por ejemplo, en:
Code:
a {color:blue;} a:link {color:red;}
.contentheading {color:blue;}
div.contentheading {color:red;}
el color de un hipervínculo y el color del .contentheading serán rojos, pues esa regla
es más específica (el .contentheading se contiene dentro de un <div>)

Es frecuente encontrar en una plantilla Joomla! algunas reglas más específicas que
sobreescriben a otras, en particular si la clase está en una tabla:
Code:
.moduletable
table.moduletable
moduletable es el nombre del <div> que contiene un módulo.
table.moduletable aplica el estilo solamente a tablas con la definición
"class=moduletable ".
Code:
a.contentpagetitle:link
.contentpagetitle a:link
a.contentpagetitle:link se aplicará a cualquier etiqueta con clase .contentpagetitle
que contenga un hipervínculo.
.contentpagetitle a:link se aplica a cualquier elemento dentro de un .contentpagetitle
que sea un hipervínculo.

La especificidad no es fácil de entender; suele ser más fácil comenzar con estilos
muy generales y afinarlos después

Todavía nuestra plantilla está utilizando muchas tablas. Para reducir su cantidad
vamos a usar parámetros de estilo en los jdoc:include.

El mínimo que necesitamos saber

Joomla! muestra elementos específicos, con IDs y clases. Esas IDs y clases pueden ser utilizados para dar
estilo al sitio usando CSS.

Módulos en las plantillas

Al llamar un módulo en index.php podemos indicar una serie de opciones sobre
cómo mostrarlo.
La sintaxis es:
Code:
<jdoc:include type="modules" name="LOCATION" style="OPTION" />
El estilo es opcional y está definido en templates/system/html/modules.php.
Actualmente (Joomla! 1.5 RC2) ese archivo contiene las siguientes opciones de
salida:
Code:
OPTION="table"
(valor por defecto) el módulo es mostrado en una tabla de una sola columna. Esto es
un ejemplo de la salida:
Code:
<table cellpadding="0" cellspacing="0" class="moduletable<?php echo
$params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
 <tr>
<th valign="top">
<?php echo $module->title; ?>
</th>
</tr>
<?php endif; ?>
<tr>
<td>
<?php echo $module->content; ?>
</td>
</tr>
</table>

Code:
OPTION="horz"
hace que el módulo aparezca horizontalmente. Cada módulo es mostrado es una
celda de una tabla. Ejemplo:
Code:
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top">
<?php modChrome_table($module, $params, $attribs); ?>
</td>
</tr>
</table>

Code:
OPTION="xhtml"
hace que el módulo se muestre en un elemento div simple. Ejemplo:
Code:
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>

Code:
OPTION="rounded"
Hace que el módulo aparezca en un formato que permite, por ejemplo, esquinas
redondeadas. Si usamos este estilo la clase del <div> cambia de moduletable a
module. Ejemplo de la salida:

Code:
div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<div>
<div>
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
</div>
</div>
Code:
OPTION="none"
el módulo aparece como una salida cruda sin elementos ni título. Ejemplo:
Code:
echo $module->content;
Las opciones que usan CSS (xhtml y rounded) crean un código más corto. No se
recomienda usar table (defecto) o horz si no es necesario.

El archivo modules.php contiene varias opciones para presentar los módulos, pero es
podemos añadir opciones propias.
En nuestra plantilla vamos a ponerle estilo "xhtml" a todos nuestros módulos:
Code:
<body>
<div id="wrap">
<div id="header">
<div class="inside">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="sidebar">
<div class="inside">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
<div id="content">
<div class="inside">
<jdoc:include type="module" name="breadcrumbs" style="none" />
<jdoc:include type="component" /> </div>
</div>
<div id="sidebar-2">
<div class="inside">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
<div id="footer">
<div class="inside">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</div>
<!--end of wrap-->
</body>
No marcamos el estilo de módulo en <jdoc:include type="component" /> porque no
es un módulo.
El mínimo que hay que saber
En 1.5 la presentación de los módulos puede ser completamente personalizada, o podemos usar alguna salida
predistribuida. Todas estas opciones son llamadas chrome del módulo.

Pusimos el título del sitio entre etiquetas <H1> . Esto es semánticamente correcto y
ayuda a los SEO. También quitaremos los colores de fondo de los <div>

Agregaremos CSS para darle estilo a los módulos y ponerle color de fondo y borde a
los títulos de los módulos.
El CSS va quedando así:
Code:
* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin:0.5em 0;
}

li,dd {
margin-left:1em;
}

fieldset {
padding:.5em;
}

body {
font-size:76%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3;
margin:1em 0;
}

#wrap {
border:1px solid #999;
}

#header {
border-bottom:1px solid #999;
}

#footer {
border-top:1px solid #999;
}

a {
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

h1,.componentheading {
font-size:1.7em;
}

h2,.contentheading {
font-size:1.5em;
}

h3 {
font-size:1.3em;
}

h4 {
font-size:1.2em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
font-weight:700;
}

#footer,.small,.createdate,.modifydate,.mosimage_caption {
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}

.moduletable {
margin-bottom:1em;
border:1px #CCC solid;
padding:0 10px;
}
 .moduletable h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em;
padding:0.25em 0;
}

Nota
Algunos menús en la instalación por defecto tienen un sufijo de menú en las propiedades de módulo de _menu.
Hemos quitado ese parámetro.

Este CSS ahora produce el resultado de la figura 9.6

fig. 9.6 Plantilla básica con estilo para los títulos de los módulos

Menús en las Plantillas

Hay distintas maneras de presentar un menú. Otra vez, usando listas con CSS en
vez de tablas reduciremos el código y facilitaremos la actualización. Después de
marcar todos nuestros menús como listas tendremos solamente 12 tablas (luego las
iremos eliminando).

Otra ventaja de las listas es que los navegadores de modo texto, lectores de
pantalla, navegadores que no soportan CSS o lo tienen desactivado y robots de
búsqueda podrán acceden con más facilidad a nuestro sitio.
Si usamos menús con CSS encontraremos mucho código para reutilizar en sitios de
desarrolladores CSS. http://css.maxdesign.com.au/listamatic/ es uno de estos sitios,
allí tenemos muchas listas distintas con el código para utilizarlas. Vamos a hacer un
cambio en el código sugerido allí para adaptar esos menús a Joomla!

Maxdesign usa:
Code:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-
tutorials/joomla-1.5-template-tutorial_4.html">Item two</a></li>
<li><a xhref="http://www.compassdesigns.net/tutorials/joomla-
tutorials/joomla-1.5-template-tutorial_4.html">Item three</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-
tutorials/joomla-1.5-template-tutorial_4.html">Item four</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-
tutorials/joomla-1.5-template-tutorial_4.html">Item five</a></li>
</ul>
</div>
Vemos que hay un <div> contenedor llamado navcontainer, y el <ul> tiene "navlist"
como id. Para reproducir esto en Joomla! vamos a cambiarle algo al <div>.

Usaremos sufijos de módulo (en la administración del sitio: extensiones-

>ModuleManager->nombre_del_menú->parámetros avanzados). Recordemos que la
salida de un módulo con opción de estilo XHTML es:
Code:
<div class="moduletable">
<h3>modChrome_xhtml</h3>
modChrome_xhtml
</div>
Si añadimos un sufijo de módulo, será añadido a la clase de moduletable así:
Code:
<div class="moduletablesuffix">
<h3>modChrome_xhtml</h3>
modChrome_xhtml
</div>
Entonces, cuando usemos un menú tomado de Listamatic, tenemos que reemplazar
navlist cada vez que aparece en el archivo de CSS por moduletablesuffix. Además, si
están marcados #navlist los cambiamos por .moduletablesuffix , así, precedido de
un punto (nota del traductor: el original dice que lo que debemos cambiar por
moduletablesuffix es navcontainer, pero yo sólo lo pude hacer andar de esta
manera).

El uso de sufijos de módulo nos permite variar mucho el estilo de presentación de un

módulo simplemente cambiando el sufijo.

En este sitio (http://www.compassdesigns.net) usamos List 10, de Mark Newhouse.

El CSS es:

.moduletablemenu {
color:#333;
margin-bottom:1em;
padding:0;
}

.moduletablemenu h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
border-bottom:1px solid #fff;
margin:0;
padding:0.25em 0;
}

.moduletablemenu ul {
list-style:none;
margin:0;
padding:0;
}

.moduletablemenu li {
border-bottom:1px solid #ccc;
margin:0;
}

.moduletablemenu li a {
display:block;
border-left:10px solid #333;
border-right:10px solid #9D9D9D;
background-color:#666;
color:#fff;
text-decoration:none;
padding:3px 5px 3px 0.5em;
}

html>body .moduletablemenu li a {
width:auto;
}

.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited {
border-left:10px solid #1c64d1;
border-right:10px solid #5ba3e0;
background-color:#2586d7;
color:#fff;
}
Agregaremos el sufijo menu (en este caso no separado por guión) a todos los
módulos a los que les queremos dar estilo. Esto produce un menú como el de la
figura 9.7.

fig. 9.7