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
Comentarios de: Desarrollo de plantillas para Joomla! (0)
No hay comentarios