Tutorial: Crear un template para Joomla! 1.5 (Primera parte)
miércoles, 05 de septiembre de 2007
Este tutorial está desactualizado e incompleto. Próximamente será revisado y terminado «19-07-2008»
Con la salida del segundo Release Candidate de Joomla! 1.5 me parece una buena idea comenzar la serie de tutoriales para explicar la creación de una plantilla compatible con esta versión del CMS.
La idea de los tutoriales es explicarlos desde cero, sin embargo, en algunos puntos se puede tornar complicado
debido a que las nuevas características para la creación de plantillas son muy suculentas y provechosas.
Por eso en la primera tanda de artículos estarán explicados los conceptos básicos prioritarios, finalizando con la creación de una plantilla muy simple de ejemplo. Al igual que antes , no se centrará en la maquetación ni en el diseño.
Por otro lado en la segunda tanda estarán mejor desarrolladas las nuevas características.
Si desean extenderse un poco más, les recomiendo los artículos que me ayudaron:
:: Un servidor local o remoto con Joomla! 1.5 instalado para realizar las pruebas;
:: Un editor de programación [ yo utilizo Notepad++ ];
:: Leer los anteriores tutoriales no es 100% necesario, puede servir para agilizar el aprendizaje ya que el modo de trabajo y los conceptos son los mismos.
NOTA: Cada vez que ponga entre paréntesis 'nueva característica', específicamente me estoy refiriendo a que lo dicho es una nueva característica en el diseño de plantillas para Joomla! 1.5.
Estructura básica de una plantilla para Joomla! 1.5
Básicamente un template puede estar formado por las siguientes carpetas y archivos:
Carpetas:
:: css: Es la carpeta que contiene los estilos en cascada del template.
:: html: Esta carpeta posee los archivos que funcionaran como plantilla especifica para módulos y componentes (nueva característica). Su uso no es prioritario.
:: images: Contendrá las imágenes usadas para el diseño.
Archivos:
:: index.php: El archivo principal, contendrá todo el HTML y directivas PHP de Joomla! para cargar el contenido.
:: templateDetails.xml: Determinante para que la plantilla sea reconocida en la administración del CMS. Posee diversos datos como licencia, autor, email, etc. Además en ella estarán los parámetros de la plantilla (nueva caracteristica) y las posiciones de módulos disponibles (nueva característica).
:: template_thumbnail.png: Es la imagen que actuará como preview en la administración.
:: params.ini: Contendrá los valores para configurar los parámetros del template (nueva característica). Si la plantilla no posee parámetros para configurar, este archivo no sera necesario.
:: template.css: Es el estilo en cascada principal que se encuentra dentro de la carpeta 'css'. Anteriormente este archivo tenia el nombre de template_css.css.
:: favicon.ico: El icono que usaremos en nuestro sitio.
:: imagenes varias: Conformaran el diseño de la plantilla de ser necesarias.
Dentro de la carpeta 'html', como decia más arriba, estaran archivos y carpetas especificos para los módulos y componentes del sitio. Con esto podremos manejar a nuestro gusto la apariencia y el output de dichos componentes y modulos. La idea es que la plantilla prevalesca por encima del output por default de Joomla!. De esta forma, por ejemplo, podremos reemplazar todas las tablas que genera tal componente y reemplazarlas por DIVs. Este asunto será tratado mas adelante ya que su uso no es determinante para crear la plantilla básica...
Creación de templateDetails.xml
Podemos dividir en cuatro partes el contenido de templateDetails.xml: Datos, Archivos, Posiciones y Parámetros.
:: Datos: Aquí, entre cada etiqueta pondremos los datos específicos de la plantilla como su versión, autor, email, pagina web, año, licencia y descripción:
XML
<?xmlversion="1.0"encoding="utf-8"?>
<installversion="1.5"type="template">
<name>Nombre de la plantilla</name>
<creationDate>Fecha de creación</creationDate>
<author>Nombre del autor</author>
<copyright>Licencia</copyright>
<authorEmail>email del autor</authorEmail>
<authorUrl>web del autor</authorUrl>
<version>versión</version>
<description>
<![CDATA[
Aqui va la descripción, puede usarse HTML o texto plano.
]]>
</description>
:: Archivos: Especificaremos todos los archivos de la plantilla para ser instalados. En caso de no especificar alguno, este no será instalado. Y si especificamos un archivo que no existe, al instalar aparecerá un error.
XML
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<filename>css/template.css</filename>
<filename>images/imagen.png</filename>
</files>
:: Posiciones: Es importante saber con anticipación que posiciones usaremos en nuestro sitio. Con esta especificación, cada vez que queramos editar el lugar de tal modulo, solo podremos elegir entre las opciones disponibles de la plantilla.
XML
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
</positions>
:: Parámetros: Permiten configurar diferentes opciones que nosotros hemos añadido en la plantilla. Por ejemplo, si nuestra plantilla cuenta con la posibilidad de configurar los colores de fondo, esta opción estará habilitada para ser activada desde la administración de Joomla!. Antes si nosotros añadíamos esta posibilidad de cambiar colores, solamente se podía configurar editando alguna variable en index.php. La plantilla RHUK Milkyway que viene en el paquete de instalación cuenta con esta opción, si entran a su configuración desde la administración la podran ver:
XML
<params>
<paramname="color"type="list"default="blanco"label="Color de fondo"description="Color de fondo">
<optionvalue="blue">Azul</option>
<optionvalue="red">Rojo</option>
<optionvalue="black">Negro</option>
<optionvalue="white">White</option>
</param>
</params>
</install>
Los valores son guardados en el archivo params.ini. Corre por nuestra cuenta si nosotros queremos o no añadir este tipo de posibilidad a nuestro diseño. Por lo general las plantillas comerciales son las que lo implementan, ya que le otorga mucha flexibilidad al producto. Al no ser prioritario en el diseño de una plantilla básica, los parámetros seran tratados mas adelante.
Entonces templateDetails.xml puede tener la siguiente apariencia:
XML
<?xmlversion="1.0"encoding="utf-8"?>
<installversion="1.5"type="template">
<name>Nombre de la plantilla</name>
<creationDate>Fecha de creación</creationDate>
<author>Nombre del autor</author>
<copyright>Licencia</copyright>
<authorEmail>email del autor</authorEmail>
<authorUrl>web del autor</authorUrl>
<version>versión</version>
<description>
<![CDATA[
Aqui va la descripción, puede usarse HTML o texto plano.
]]>
</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<filename>css/template.css</filename>
<filename>images/imagen.png</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
</positions>
<params>
<paramname="color"type="list"default="blanco"label="Color de fondo"description="Color de fondo">
<optionvalue="azul">Azul</option>
<optionvalue="rojo">Rojo</option>
<optionvalue="negro">Negro</option>
<optionvalue="blanco">Blanco</option>
</param>
</params>
</install>
En la segunda parte del tutorial [ próximamente...] empezaremos con la creación de index.php
Comentarios (27)
Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
Con la salida del 
Comentarios (27)
