Qu es una Plantilla Joomla!?

Una plantilla Joomla! consiste en una serie de archivos dentro del CMS Joomla! que controlan la presentacin del contenido. Una plantilla Joomla! no es un website; no se puede considerar como un website totalmente diseado. La plantilla son las bases fundamentales de diseo 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 vera en una instalacin 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, mens, navegacin, tamao de texto y colores. Es importante fijarse en que las imgenes 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 separacin entre contenido y presentacin, especialmente cuando se usa CSS para crear el layout (en oposicin a crear el index.php mediante tablas). ste es uno de los criterios fundamentales para crear un sitio que contemple los estndares 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 grficos - Puede ser ms complicado implementar distintos layouts para un mismo website. Aunque se pueden aplicar distintas plantillas a distintas pginas del site, esta funcionalidad no es totalmente fiable. La mejor opcin sera utilizar condicionales en PHP y crear un layout dinmico que adapte el nmero de columnas dependiendo del contenido publicado.

Lo mnimo que necesita saber Los websites modernos separan el contenido de la presentacin utilizando una tecnologa llamada Cascade Style Sheets (CSS). En Joomla!, la plantilla controla la presentacin del contenido.

Proceso de Diseo en el Localhost

La pgina web que se visualiza en un website creado en Joomla! no es esttica. Esto significa que es generado dinmicamente desde el contenido albergado en la base de datos. La pgina que se visualiza es creada mediante distintos comandos PHP que se encuentran en el template, lo que presenta algunas dificultades en la fase de diseo. Actualmente es comn utilizar un editor what you see is what you get (WYSIWYG) como, por ejemplo, Dreamweaver. Esto facilita que el diseador no tenga que teclear cdigo HTML. Esto no es posible en el diseo de templates para Joomla! ya que los editores WYSIWYG no pueden mostrar una pgina dinmica, lo que hace que los diseadores tengan que teclear el cdigo HTML a mano y previsualizarla desde un servidor de pruebas con PHP. Con una conexin rpida esto se puede realizar mediante un servidor web remoto, pero muchos diseadores utilizan un servidor local en su propia computadora. Un servidor local es un software que permite servir pginas web en el ordenador del diseador. No hay una forma correcta para crear una pgina web. Va a depender ms de la experiencia de cada diseador. Los ms enfocados al diseo acostumbran a crear una imagen del layout en un programa grfico como GIMP o Photoshop y posteriormente rompen la imagen para ser usada en la maquetacin de la web. Los ms enfocados a la tecnologa habitualmente saltan directamente al CSS y empiezan a teclear cdigo. De todas formas, como se ha mencionado, el diseador de plantillas Joomla! est limitado por no poder ver el resultado de su cdigo directamente en su editor. El proceso de diseo modificado es como sigue: Hacer la edicin 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 Mnimo 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 pgina 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 maysculas y minsculas 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 ncleo de Joomla! templateDetails.xml Este archivo le dice a Joomla! qu otros archivos son necesarios cuando un usuario carga una pgina que usa esta plantilla. (Notar la D mayscula). Tambin contiene detalles sobre el autor y los derechos de autor. Su otro uso es para instalar la plantilla desde la administracin del sitio. index.php Presenta el sitio y le indica al ncleo de Joomla! dnde mostrar los distintos componentes y mdulos. Es una combinacin de PHP y (X)HTML. Muchas plantillas usan otros archivos, adems de templateDetails.xml e index.php. Es convencional (pero no requerido por el ncleo 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 pxeles). Funciona como imagen de Previsualizar visible en el Administrador de Plantillas de la administracin del sitio, y en el mdulo de seleccin de plantillas para los usuarios (si estamos utilizando dicho mdulo). /element/css/template.css CSS de la plantilla. El nombre de este archivo y la carpeta son opcionales, pero hay que explicar dnde est ubicado en el index.php. You can call it what you like. Se suele usar este nombre, pero veremos ventajas en tener ms de un CSS. /element/images/logo.png Imgenes que vienen con la plantilla. Por razones de organizacin, muchos diseadores 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 tambin informacin como el autor y los derechos de autor (copyright). Esta informacin se muestra tambin en la parte de administracin del sitio en la seccin Administrador de Plantillas. A continuacin 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 lneas que aparecen: <install version="1.5" type="template">. El contenido del documento XML son instrucciones para el instalador del sitio. La opcin 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 tambin para crear el directorio de la plantilla en el directorio templates. El nombre no debe incluir ningn 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 cul 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 informacin sobre los derechos de copia va en este elemento. Una licencia para Desarrolladores y Diseadores puede encontrarse en los foros de Joomla. <authorEmail> compassdesigns@gmail.com Esta direccin de correo electrnico se encuentra protegida de los robots de spam, necesitas tener javascript activado para poder verlo </authorEmail>. Direccin de correo electrnico donde puede ser contactado el autor de la plantilla.

 <authorUrl>www.compassdesigns.net</authorUrl>. La direccin 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 seccin ficheros (files) contiene todos los ficheros genricos como el cdigo fuente PHP para la plantilla o la miniatura de la plantilla para su previsualizacin. Cada fichero listado en esta seccin se encuentra encerrado por las etiquetas <filename> </filename>. Tambin incluye cualquier fichero adicional; aqu en el ejemplo se invoca un un fichero javascript que es requerido por la plantilla. Todos los ficheros de imgenes que la plantilla utiliza son listados en la seccin <files>. Cada fichero listado se encuentra definido por las etiquetas <filename> </filename>. La informacin de la ruta donde se encuentran los ficheros, es relative al directorio raz de la plantilla. Por ejemplo, si la plantilla est en el directorio llamado Tuplantilla (YourTemplate), y todas las imgenes se encuentran en el directorio imgenes (images), dentro de Tuplantilla (YourTemplate), la direccin correcta de la ubicacin es: <filename>images/my_image.jpg</filename> Por ultimo ninguna plantilla de estilo (stylesheets) es listada en la seccin ficheros.. <positions></positions>.Las posiciones de los mdulos disponibles en la plantilla. <params></params>. Esto describe parmetros 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 combinacin de (X)HTML y PHP que determina todo sobre la presentacin y las capas de las pginas. Primero, echemos un vistazo a una parte crtica de las plantillas vlidas, el atributo DOCTYPE al principio del fichero index.php file. Este es un pequeo trozo de cdigo que va en la parte superior de la pgina En la parte superior de la pgina, tenemos esto en nuestra plantilla: Cdigo 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 pgina web es uno de los componentes fundamentales,

indica cmo va a ser mostrada una pgina por un navegador, especficamente, cmo el navegador interpreta CSS. Para permitirte una comprensin total, una observacin de alistapart.com dice:
Cita: [Informacin en el sitio W3C's sobre DOCTYPEs ] escrito para tecnfilos por tecnfilos. Y cuando digo tecnfilos, no me refiero a los profesionales corrientes como tu y yo. Digo tecnfilos cuando me refiero a los que nos hacen sentir como una abuela la primera vez que recibe un correo electrnico..

Por otra parte, puedes utilizar mltiples DOCTYPEs. Bsicamente, el DOCTYPE informa al navegador como interpretar la pgina. 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 mnima de una pgina. 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 estndares. Un DOCTYPE Transicional permite a la pgina mostrar algunos pequeos trozos diferentes a los estndares. 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 atrs, para Internet Explorer 6, por ejemplo, dibujamos la pgina como si fuera para IE4. Desafortunadamente, algunas personas acaban en modo chapuza de manera accidental. Esto ocurre habitualmente de dos maneras: Utilizan una declaracin diferente de DOCTYPE a la de la pgina 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 pginas validas pero se muestran en modo chapuza. Esto ocurre porque tenemos una declaracin xml puesta antes del DOCTYPE. En el siguiente ejemplo es una sentencia XML (despus del DOCTYPE): Cdigo 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 captulo solo estamos diseando para IE6+ (Internet Explorer 6 superior), con lo que nos tenemos que asegurar que esto funcionan en un modo estndar. Esto minimizar las mejoras que tengamos que hacer posteriormente.
NOTA Haciendo una pgina web que cumple los estndar, podrs mostrar un botn xhtml vlido en la pgina, esto no tiene ninguna dificultad en la codificacin, o incompresibles etiquetas. Esto significa que el cdigo que haces utilizando DOCTYPE dice lo que quieres, nada ms!

Diseando tu sitio con estndares puedes reducir un nivel lo que muestras y cmo quieres mostrarlo. Aqu tienes algunos prcticos 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

Ms contenidos de index.php
Luego incluimos el cabezal ("header"). En este caso usaremos un cabezal con poco contendido, pero suficiente para un sitio en produccin. 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 configuracin global del sitio. La prxima lnea trae informacin para el cabezal que tambin est en la configuracin global del sitio: Code: <jdoc:include type="head" /> En una instalacin por defecto esa informacin para el cabezal trada de la configuracin global incluye: Cdigo 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 informacin de cabezal son creadas al vuelo, especficamente para el artculo que el usuario est viendo. Incluye algunos metadatos, direcciones URL para RSS y archivos estndar de javascript. Las ltimas lneas 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 genricos de Joomla. el tercer archivo es todo el CSS especfico de la plantilla, en este caso llamado template.css. El siguiente trozo: Code: <?php echo $this->template ?> devuelve el nombre de la plantilla actual. Podramos escribir el nombre directamente, pero de esta forma el cdigo es ms genrico, y al escribir una plantilla nueva podramos copiar esto junto con todo el cdigo del cabezal sin tener que cambiar nada. El CSS puede estar compuesto por cualquier nmero de archivos, por ejemplo CSS condicionales para diferentes navegadores. El que ponemos a continuacin solamente se utilizara con Internet Explorer 6: Code: <!--[if lte IE 6]> <link href="templates/<?php echo $this->template rel="stylesheet" type="text/css" /> <![endif]-->

?>/css/ieonly.css"

Este otro es una tcnica para usar parmetros 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 creacin de nuestra primera plantilla ser muy muy fcil! Listos? Todo lo que necesitamos hacer es usar una declaracin Joomla que inserta el contenido de los mdulos 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 lgico:

Nombre del sitio Mdulo superior Mdulos de la izquierda Contenido principal Mdulos de la derecha

Lo mnimo que necesita saber La plantilla ms bsica simplemente carga los mdulos de Joomla y el mainbody (componente). La disposicin y el diseo es parte del CSS, no de Joomla.

El objetivo es tratar de entrar lo ms cerca posible del atributo semntico como sea posible. Desde un punto de vista Web, significa que una pgina puede ser leda por cualquier persona [md] un navegador, un spider, o un screen reader. El diseo semntico es la piedra angular de la accesibilidad.
NOTA Lo que tenemos aqu es en realidad slo el potencial de diseo semntico. Si tuviramos que ir adelante y poner al azar mdulos en lugares aleatorios, tendramos un lo. Una consideracin 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 diseadores cuando se trata de validar sus sitios.

Notar que hemos utilizado la primera de una serie de comandos especficos para Joomla para crear este producto: Cdigo 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 declaracin PHP eco simplemente produce un string desde el archivo configuration.php. En este caso, estamos usando el nombre del sitio; Podramos fcilmente haber tenido lo siguiente: Cdigo 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 declaracin jdoc inserta diversos tipos de salida XHTML, ya sea de mdulos o de componentes. Esta lnea inserta la salida de un componente. Qu componente ser determinado por el enlace del men: Cdigo PHP: <jdoc:include type="component" />
NOTA Curiosamente, parece ser que se pueden tener mltiples instancias de componentes de salida. No estoy seguro de para qu las quieres, pero creo que tena que hacertelo saber! Podra ser un bug (error).

Esta lnea inserta la salida para la instalacin de un mdulo: Cdigo PHP: <jdoc:include type="modules" name="right" La sintaxis completa es realmente Cdigo PHP: <jdoc:include type="modules" name="LOCATION" style="OPTION" /> />

Nos fijamos en las diversas opciones de estilos en la seccin sobre los mdulos ms adelante en este captulo.

CSSTemplateTutorial Paso 1
En este momento tenemos una plantilla muy vaca. He creado una plantilla instalable que se encuentra disponible en Compass library::: CSSTemplateTutorialStep1.zip. Esto instalar una plantilla que slo tiene dos archivos, el index.php y templateDetails.xml. He eliminado las referencias a otros archivos para dar una estructura vaca de salida sin CSS. Esta es en realidad una utilidad de diagnstico de plantilla; Puede instalar y realizar el seguimiento de los errores que se estn produciendo con un componente o mdulo. Utilizaremos el CSS puro para hacer una disposicin de 3 columnas para la plantilla de Joomla!. Tambin haremos una disposicin "fluida". Hay dos tipos principales de disposicin del diseo: fijo y fluido, y ambos se refieren a "cmo se controla el ancho de la pgina". La anchura de la pgina es un asunto importante a tener en cuenta debido a que los usuarios trabajan a distintas resoluciones de navegador. Aunque el porcentaje est cayendo, an un 17% de personas estn utilizando una resolucin 800x600. Sin embargo, la mayora, el 79%, est utilizando 1024x768 u otra resolucin superior. Crear una disposicin fluida de tu plantilla significa que tu pgina web no se ver como una fina columna en la resolucin 1024 y podr verse al completo en monitores ms pequeos. Un diseo tpico se servira de tablas para definir la disposicin de la pgina. Ciertamente, las tablas son tiles ya que slo tienes que fijar la anchura de las columnas con porcentajes y as tener un diseo adaptable a las distintas resoluciones, pero a la vez tienen varias desventajas. Por ejemplo, el diseo con tablas utiliza mayor cantidad de cdigo en comparacin con el diseo CSS. Lo que significa mayor tiempo de carga (cosa que a los navegantes no gusta), tambin dan peor resultado en los motores de bsqueda. A la prctica, la cantidad de cdigo puede incluso llegar a doblarse, no slo por los tags necesarios, sino tambin por la parte de cdigo usada para marcar los espacios. Incluso las compaas grandes caen a veces en la trampa de usar tablas segn lo que hemos podido ver por una controversia reciente sobre la nueva web inglesa de Disney: disney.co.uk: Hay un par de problemas ms relacionados con el uso de tablas para definir la maquetacin del diseo.

Son difciles de mantener. Para cambiar algo tienes que calcular lo que estn haciendo todas las etiquetas de la tabla como td/tr. Con el CSS hay a penas algunas lneas a examinar. El contenido no se puede ordenar. Muchas personas usuarios de Internet no ven las pginas 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 disposicin de 3 columnas) antes de llegar a ver el contenido de

la columna central, que seguramente es la que tiene el contenido importante. Un diseo que usa CSS lleva el contenido ordenado dentro del cdigo fuente de manera que puede ser reorganizado, piensa que tal vez t visitante ms importante sea Google, y ste usa un programa lector de pantalla a la hora de interpretar el contenido de tu pgina. 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 introduccin rpida, una buena fuente es: Brainjar's CSS Positioning (posicionamiento con CSS, por Brainjar).. Aunque, si eres nuevo en el CSS, sera bueno que leyeras una gua del iniciacin. 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 diseos web actuales usan CSS en vez de tablas para posicionar elementos. Es difcil de aprender a usar pero es una inversin que merece la pena. Hay muchos recursos (noJoomla!) 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. An no muy emocionante, pero vamos a analizar las distintas partes por separado. Los estilos del CSS estn definidos aqu, dentro del tag <head></head> del archivo para mostrar su funcionamiento, pero en realidad deberan 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 estn 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 flotacin" y asigne al pie el ancho total sumado de las 3 columnas. Esto tambin se puede hacer con tcnicas ms avanzadas que veremos al construir nuestra segunda plantilla. Entre las columnas es normal dejar cierto espacio o "canal", que podramos lograr marcando un "padding"en el estilo de las columnas. Pero esto fallara en Internet Explorer por una falla de interpretacin del CSS para el clculo de los anchos, Evitamos este problema no utilizando "padding" y en vez de eso agregando otro elemento <div> dentro de cada columna.

Aadimos al CSS:

Code: .inside {padding:10px;} Y en el cdigo 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>. Vlido <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 cdigo CSS Un cdigo 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 "taquigrficos " en cada definicin de estilo. Despus de crear los estilos, reemplazamos el cdigo largo por el cdigo 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; Ms 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 cdigo y es ms fcil mantener. Su limitacin es que no ordena el cdigo fuente por importancia, y de esta forma los motores de bsqueda no leen primero los datos ms importantes (en Joomla! los datos importantes provienen de los componentes). Para mejorar eso usamos una tcnica ms avanzada llamada flotador jerarquizado.

CSS por defecto

Hasta ahora nuestro CSS presenta una pgina 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 pgina. Para navegadores que siguen los estndares, basta con poner margin:0 10% para centrar la pgina, pero IE no lo entiende, entonces centramos el texto de toda la pgina y dentro de cada columna lo volvemos a alinear a la izquierda. Incluimos un ancho mnimo y mximo que es soportado por IE7 pero no por IE6. Para IE6 hicimos un truco: va a ignorar la declaracin !important y mostrar un ancho plano antiguo de 960 px.
NOTA Parece raro que las columnas tengan ancho definido en porcentaje pero estn contenidas en un <div> que es fijo. La explicacin es: * este modo hace muy flexible a nuestra plantilla. Si queremos poner botones de cambio de ancho, solamente deberemos cambiar un valor. * el ancho mximo evita que los usuarios que tienen monitores demasiado grandes reciban tipografas tan gruesas que pierdan legibilidad por su propio tamao exagerado (ms de 900 px es incmodo).

Tambin agregamos una norma de estilo a las columnas: overflow:hidden. Esto hace que la pgina se "quiebre" con ms uniformidad si reducimos el ancho. Al comienzo de la definicin de la tipografa, 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. Ms datos sobre este tema (en ingls): http://clagnut.com/blog/1287/ Ponemos el tamao de fuente en 76%. Esto es para tener mayor consistencia del tamao de letra en los distintos navegadores. Despus marcamos todos los tamaos de letra en em. Con line-height:1.3 aumentamos la legibilidad. Con esto, el usuario va a poder reasignar los tamaos de letra desde su propio navegador. (ms 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, ms 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 tcnica se llama "falsas columnas" y se puede ver en este libro.

CSS especfico para Joomla!

Joomla! nos permite sobreescribir la salida ("vista") enviada por el ncleo a la pantalla, incluyendo en el archivo CSS el formato para estos estilos: article_separator adminform article_separator author bannerfooter bannergroup bannerheader banneritem blog blog_more blogsection breadcrumbs button buttonheading clr componentheading content_email content_rating content_vote contentdescription contentheading contentpagetitle contentpane contentpaneopen contenttoc createdate created-date date input inputbox intro latestnews loclink mainlevel message metadata modifydate module moduletable mosimage mosimage_caption mostread newsfeed outline pagenav pagenav_next pagenav_prev pagenavbar pagenavcounter pathway pollstableborder read search searchintro sections sectiontable_footer sectiontableentry sectiontablefooter sectiontableheader small smalldark sublevel title wrapper

En CSS una regla ms especfica elimina una regla menos especfica. Por ejemplo, en: Code: a {color:blue;} a:link {color:red;} .contentheading {color:blue;} div.contentheading {color:red;} el color de un hipervnculo y el color del .contentheading sern rojos, pues esa regla es ms especfica (el .contentheading se contiene dentro de un <div>) Es frecuente encontrar en una plantilla Joomla! algunas reglas ms especficas 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 mdulo. table.moduletable aplica el estilo solamente a tablas con la definicin "class=moduletable ". Code: a.contentpagetitle:link .contentpagetitle a:link a.contentpagetitle:link se aplicar a cualquier etiqueta con clase .contentpagetitle que contenga un hipervnculo. .contentpagetitle a:link se aplica a cualquier elemento dentro de un .contentpagetitle que sea un hipervnculo. La especificidad no es fcil de entender; suele ser ms fcil comenzar con estilos muy generales y afinarlos despus Todava nuestra plantilla est utilizando muchas tablas. Para reducir su cantidad vamos a usar parmetros de estilo en los jdoc:include.
El mnimo que necesitamos saber Joomla! muestra elementos especficos, con IDs y clases. Esas IDs y clases pueden ser utilizados para dar estilo al sitio usando CSS.

Mdulos en las plantillas

Al llamar un mdulo en index.php podemos indicar una serie de opciones sobre cmo 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 mdulo 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 mdulo aparezca horizontalmente. Cada mdulo 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 mdulo 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 mdulo 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 mdulo aparece como una salida cruda sin elementos ni ttulo. Ejemplo: Code: echo $module->content; Las opciones que usan CSS (xhtml y rounded) crean un cdigo ms corto. No se recomienda usar table (defecto) o horz si no es necesario. El archivo modules.php contiene varias opciones para presentar los mdulos, pero es podemos aadir opciones propias. En nuestra plantilla vamos a ponerle estilo "xhtml" a todos nuestros mdulos: 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 mdulo en <jdoc:include type="component" /> porque no es un mdulo.
El mnimo que hay que saber En 1.5 la presentacin de los mdulos puede ser completamente personalizada, o podemos usar alguna salida predistribuida. Todas estas opciones son llamadas chrome del mdulo.

Pusimos el ttulo del sitio entre etiquetas <H1> . Esto es semnticamente correcto y ayuda a los SEO. Tambin quitaremos los colores de fondo de los <div> Agregaremos CSS para darle estilo a los mdulos y ponerle color de fondo y borde a los ttulos de los mdulos. 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 mens en la instalacin por defecto tienen un sufijo de men en las propiedades de mdulo de _menu. Hemos quitado ese parmetro.

Este CSS ahora produce el resultado de la figura 9.6

fig. 9.6 Plantilla bsica con estilo para los ttulos de los mdulos

Mens en las Plantillas

Hay distintas maneras de presentar un men. Otra vez, usando listas con CSS en vez de tablas reduciremos el cdigo y facilitaremos la actualizacin. Despus de marcar todos nuestros mens 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

bsqueda podrn acceden con ms facilidad a nuestro sitio. Si usamos mens con CSS encontraremos mucho cdigo 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 cdigo para utilizarlas. Vamos a hacer un cambio en el cdigo sugerido all para adaptar esos mens 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/joomlatutorials/joomla-1.5-template-tutorial_4.html">Item two</a></li> <li><a xhref="http://www.compassdesigns.net/tutorials/joomlatutorials/joomla-1.5-template-tutorial_4.html">Item three</a></li> <li><a href="http://www.compassdesigns.net/tutorials/joomlatutorials/joomla-1.5-template-tutorial_4.html">Item four</a></li> <li><a href="http://www.compassdesigns.net/tutorials/joomlatutorials/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 mdulo (en la administracin del sitio: extensiones>ModuleManager->nombre_del_men->parmetros avanzados). Recordemos que la salida de un mdulo con opcin de estilo XHTML es: Code: <div class="moduletable"> <h3>modChrome_xhtml</h3> modChrome_xhtml </div> Si aadimos un sufijo de mdulo, ser aadido 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. Adems, si estn 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 slo lo pude hacer andar de esta manera). El uso de sufijos de mdulo nos permite variar mucho el estilo de presentacin de un mdulo 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 guin) a todos los mdulos a los que les queremos dar estilo. Esto produce un men como el de la figura 9.7.

fig. 9.7