PDF de programación - Desarrollo de plantillas para Joomla!

Comunidad Joomla

Biblioteca Comunidad Joomla

Desarrollo de plantillas para Joomla!

Autor:
Leandro D’Onofrio

Correcciones:
Rafael Gómez
Gustavo Raúl Aragón

Bajo licencia Creative Commons

Agosto 2011

Índice general

1. Introducción a las plantillas en Joomla!®

1.1. Bienvenido/a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2. Obtener el material de aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.3. Requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.4. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.5. Las plantillas en Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.5.1. Tipos de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.5.2. Encontrar las plantillas disponibles en la administración del CMS . . . . . . . .
1.5.3. Estructura básica de una plantilla . . . . . . . . . . . . . . . . . . . . . . . . .

2. Desarrollo de plantillas para Joomla!

2.2. El archivo templateDetails.xml

2.1. Creación de los archivos de la plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.1. Análisis previo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.1.2. Utilizar la plantilla ‘atomic’ como base . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.1. Sección 1: Información asociada . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.2. Sección 2: Carpetas y archivos
. . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.3. Sección 3: Posiciones de módulos . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.4. Sección 4: Definición de lenguajes . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2.5. Descubrir la plantilla en la administración de CMS . . . . . . . . . . . . . . . .
2.3. El archivo index.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.1. Sección 1: Sesión y contexto del CMS . . . . . . . . . . . . . . . . . . . . . . .
2.3.2. Sección 2: Framework JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.3. Sección 3: Referencia a JApplication . . . . . . . . . . . . . . . . . . . . . . . .
2.3.4. Sección 4: Tipo de documento, codificación y estilo de escritura . . . . . . . . .
2.3.5. Sección 5: Cabecera del documento . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.6. Sección 6: Archivos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2
2
2
2
3
4
4
6
7

11
11
11
12
16
18
18
18
19
20
21
24
24
25
25
25
26

1

2.3.7. Sección 7: Archivos CSS para otras direcciones de escritura . . . . . . . . . . .
2.3.8. Sección 8: Funcionalidades JavaScript
. . . . . . . . . . . . . . . . . . . . . . .
2.3.9. Sección 9: Nombre del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.10. Sección 10: Llamado a distintos módulos . . . . . . . . . . . . . . . . . . . . . .
2.3.11. Sección 11: Mensajes del sistema . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3.12. Sección 12: Contenido de los componentes . . . . . . . . . . . . . . . . . . . . .
2.3.13. Sección 13: Año presente y nombre del sitio . . . . . . . . . . . . . . . . . . . .
2.4. El sistema de grillas de BluePrint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5. Maquetación del diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.5.1. Modificaciones dentro de la etiqueta head . . . . . . . . . . . . . . . . . . . . .
2.5.2. Maquetación de la sección superior . . . . . . . . . . . . . . . . . . . . . . . . .
2.5.3. Maquetación del texto superior, video y caja destacada . . . . . . . . . . . . .
2.5.4. Maquetación de las columnas del medio . . . . . . . . . . . . . . . . . . . . . .
2.5.5. Maquetación del texto destacado inferior y slideshow . . . . . . . . . . . . . . .
2.5.6. Maquetación del footer y zona inferior . . . . . . . . . . . . . . . . . . . . . . .
2.6. El archivo template.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.6.1. Estilos generales
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.6.2. Estilos para la sección superior . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.6.3. Estilos para el destacado superior, video y caja media . . . . . . . . . . . . . .
2.6.4. Estilos para las columnas centrales . . . . . . . . . . . . . . . . . . . . . . . . .
2.6.5. Estilos para el texto destacado inferior y slideshow . . . . . . . . . . . . . . . .
2.6.6. Estilos para el footer y zona inferior . . . . . . . . . . . . . . . . . . . . . . . .
2.6.7. Estilos para elementos y mensajes del sistema . . . . . . . . . . . . . . . . . . .
2.6.8. Estilos completos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.7. Finalizando la plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26
27
27
27
29
29
29
30
32
32
32
33
35
38
39
42
43
44
46
50
52
53
55
57
65

3. Temas avanzados

67
3.1. Estilos de plantillas, parámetros de configuración y maquetaciones diferentes por secciones 67
68
72
73
79
79
82
89

3.1.1. Cambiar la imagen del logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1.2. Cambiar el texto del eslogan . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.1.3. Aplicar una maquetación diferente . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
3.2.1. Extensiones desarrolladas en MVC . . . . . . . . . . . . . . . . . . . . . . . . .
3.2.2. Módulos personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.2. Personalización de módulos y componentes

3.3. Componentes personalizados

2

3.4.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.3.1. Conclusiones
Incorporación de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.4.1. Creación de un slideshow con jQuery . . . . . . . . . . . . . . . . . . . . . . . .
3.5. Personalización de las páginas de errores . . . . . . . . . . . . . . . . . . . . . . . . . .

94
94
97
99
3.5.1. Sección 1: Parámetros de la plantilla . . . . . . . . . . . . . . . . . . . . . . . . 105
3.5.2. Sección 2: Tipo de documento, título y archivos CSS . . . . . . . . . . . . . . . 105
3.5.3. Sección 3: Logotipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
3.5.4. Sección 4: Mensajes de error . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
3.5.5. Sección 5: Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

4. Apéndice

111
4.1. Evitar que Mootools cargue de forma predeterminada . . . . . . . . . . . . . . . . . . 111
4.2. Estilos determinados para diferentes navegadores . . . . . . . . . . . . . . . . . . . . . 111
4.3. Detectar la página principal del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
4.4. Detectar si un usuario está logueado en el sitio . . . . . . . . . . . . . . . . . . . . . . 112
4.5. Detectar un componente determinado . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

3

Capítulo 1

Introducción a las plantillas en
Joomla!®

1.1. Bienvenido/a

En el momento de construir un sitio web utilizando Joomla!®, la creación de plantillas (o templates)
suele ser uno de los trabajos más comunes que emprenden diseñadores y desarrolladores web.
Este manual pretende ser un documento fundamental para que, tanto usuarios noveles como avanzados,
aprendan a realizar una plantilla funcional para Joomla! 1.6 y versiones posteriores.
Al finalizar el documento, deberá ser capaz de:

Entender la estructura básica de una plantilla;
Conocer los archivos que la componen y su funcionalidad;
Poder agregar nuevas características y estilos personalizados;
Conocer cómo modificar correctamente plantillas ya creadas;
Saber crear plantillas desde cero.

1.2. Obtener el material de aprendizaje

El material de aprendizaje y el código fuente de los ejemplos que se utilizan en el libro están hospedados
en un repositorio de Github. Desde allí es posible descargar un archivo .zip o .tar con todo al material.
También esta invitado a seguir mejorando el material, ya sea reportando errores o añadiendo nuevos
materiales.

1.3. Requisitos

Para comenzar es necesario contar con los siguientes conocimientos mínimos:

4

HTML/XHTML:

• Conocer la estructura básica de un documento HTML/XHTML;
• Saber reconocer las etiquetas básicas.

CSS:

• Reconocer la manera de incorporar estilos dentro de un documento;
• Saber crear estilos básicos en archivos .css;
• Entender el funcionamiento de maquetaciones simples con elementos flotantes.

JavaScript:

• Reconocer la manera de incorporar código JavaScript en un documento.

PHP:

• Reconocer las etiquetas de apertura y cierre de código PHP;
• Entender las funciones básicas de flujos de control (if, if else, else).

Joomla!:

• Conocimientos básicos del CMS: administración de contenidos, instalación de extensiones,

manejo de componentes y módulos.

1.4. Software

Para trabajar con los contenidos de la guía, son necesarias las siguientes herramientas:

El navegador web Firefox y la extensión Firebug.
Un editor de textos planos o un IDE (Entorno de Desarrollo Integrado):

• Notepad++ - Windows;
• Gedit/Kate - Linux;
• TextMate - Mac OS X;
• Aptana - todas las plataformas;
• Netbeans PHP - todas las plataformas.

Un servidor local (XAMPP / MAMP) o un cliente FTP/SSH/SFTP para acceder a un servidor
remoto (Filezilla / WinSCP / Putty);
Joomla! 1.6 o posterior instalado en el servidor local o remoto.

5

1.5. Las plantillas en Joomla!

Antes de comenzar, puede que se pregunte ¿qué es una plantilla y para qué sirve?. Las plantillas son
archivos que permiten controlar el diseño y la disposición de los elementos a lo largo de un sitio. Las
mismas incluyen:

El marcado