Taller de Introducción al desarrollo de plantillas para Joomla! impartido en el Joomla!Day 2009 en la ciudad de Barcelona.

1. Introducción al
desarrollo de
plantillas para
Joomla!
Oriol Boix
www.oriolboix.com

2. Conocimientos
previos
HTML Estructura la información
CSS Define el diseño
PHP Trabaja con el servidor
Oriol Boix
www.oriolboix.com

3. Conocimientos
previos
HTML Estructura la información
CSS Define el diseño
PHP Trabaja con el servidor
Oriol Boix
www.oriolboix.com

4. Qué es una plantilla
Joomla! es un CMS gratuito de código abierto, y sirve
para realizar páginas web
CMS (Sistema de Gestión de Contenidos):
Software que ayuda en la organización y
presentación de contenidos en un sitio web.
Consta de dos aplicaciones:
- Una aplicación de gestión de contenidos.
- Una aplicación de entrega de contenidos.
Oriol Boix
www.oriolboix.com

5. Qué es una plantilla
La plantilla es la base de la aplicación de entrega de
contenidos
Una plantilla Joomla! consta de diferentes archivos que
controlan la estructura y el diseño de la página que estemos
realizando y de sus contenidos.
La plantilla Joomla! no controla el contenido propiamente.
Oriol Boix
www.oriolboix.com

6. Instalar y configurar una plantilla
Hay plantillas gratuitas y plantillas de pago
Plantillas gratuitas:
http://ayudajoomla.com/diseno/12-general/60-plantillas-
gratuitas-para-joomla.html
Oriol Boix
www.oriolboix.com

7. Instalar y configurar una plantilla
Hay plantillas gratuitas y plantillas de pago
Plantillas gratuitas:
http://ayudajoomla.com/diseno/12-general/60-plantillas-
gratuitas-para-joomla.html
Oriol Boix
www.oriolboix.com

8. Instalar y configurar una plantilla
Oriol Boix
www.oriolboix.com

9. Estructura básica de
archivos y carpetas
Oriol Boix
www.oriolboix.com

10. Estructura básica
de archivos
index.html
Añade seguridad a las carpetas.
Es un archivo vacío
index.php
Contiene el html que define la estructura.
Tiene la mayor parte de llamadas php a la API de joomla.
Es imprescindible.
Oriol Boix
www.oriolboix.com

11. Estructura básica
de archivos
params.ini
Guarda los parámetros personalizables desde el administrador.
templateDetails.xml
Contiene información sobre la plantilla necesaria para la correcta
instalación de la misma (nombre, autor, archivos ...)
Define los parámetros personalizables desde el administrador.
template_thumbnail.png
Imagen en miniatura de la plantilla.
Oriol Boix
www.oriolboix.com

12. Estructura básica
de archivos
params.ini
Guarda los parámetros personalizables desde el administrador.
templateDetails.xml
Contiene información sobre la plantilla necesaria para la correcta
instalación de la misma (nombre, autor, archivos ...)
Define los parámetros personalizables desde el administrador.
template_thumbnail.png
Imagen en miniatura de la plantilla.
Oriol Boix
www.oriolboix.com

13. Estructura básica
de archivos
css
Carpeta que contiene los archivos css.
template.css
Archivo principal donde está el código de estilo (css) del template.
images
Carpeta con imágenes llamadas desde el theme.
Oriol Boix
www.oriolboix.com

14. Estructura básica
de archivos
css
Carpeta que contiene los archivos css.
template.css
Archivo principal donde está el código de estilo (css) del template.
images
Carpeta con imágenes llamadas desde el theme.
Oriol Boix
www.oriolboix.com

15. Estructura básica
de archivos
html
Esta carpeta contiene plantillas personalizadas para distintos módulos
y componentes.
Si no la creamos, Joomla! utilizará la plantilla por defecto del módulo
o componente.
Oriol Boix
www.oriolboix.com

16. Creación
de una plantilla
carpeta con el nombre del template
Oriol Boix
www.oriolboix.com

17. Creación
de una plantilla
templateDetails.xml
Se divide en 4 partes:
Datos
Archivos
Posiciones
Parámetros
Oriol Boix
www.oriolboix.com

18. Creación
de una plantilla
templateDetails.xml
Datos
nombre / versión / autor / email /
página web / año / licencia / descripción
Oriol Boix
www.oriolboix.com

19. Creación
de una plantilla
templateDetails.xml
Archivos
Listado de todos los archivos utilizados en el theme.
Si creamos la plantilla directamente en servidor no es necesario.
Si queremos instalarla desde zip o distribuïrla sí.
Oriol Boix
www.oriolboix.com

20. Creación
de una plantilla
templateDetails.xml
Posiciones
Definimos las posiciones para módulos que necesitaremos en el site.
Oriol Boix
www.oriolboix.com

21. Creación
de una plantilla
index.php
Lo primero que debemos crear es la estructura html.
Oriol Boix
www.oriolboix.com

22. Creación
de una plantilla
index.php
Utilizamos la API para plantillas de Joomla! para hacer las distintas
llamadas.
<jdoc:include type="head" />
Carga los datos por defecto para el head:
title, metatags, feed, y framework javascript
Oriol Boix
www.oriolboix.com

23. Creación
de una plantilla
index.php
$this->template
<?php echo $this->template ?>
Obtenemos la ruta del template.
Lo usamos para la carga de cualquier archivo del theme.
Cargamos el archivo css.
Oriol Boix
www.oriolboix.com

24. Creación
de una plantilla
index.php
$mainframe->getCfg('sitename')
<?php echo $mainframe->getCfg('sitename');?>
Esta llamada nos devuelve el título del sitio a mostrar en el site
Oriol Boix
www.oriolboix.com

25. Creación
de una plantilla
index.php
<jdoc:include type="modules" name="posición"
style="estilo" />
Esta llamada nos devuelve los módulos de una posición con el estilo
que especifiquemos.
Oriol Boix
www.oriolboix.com

26. Creación
de una plantilla
index.php
<jdoc:include type="modules" name="posición"
style="estilo" />
Las variables de estilo son:
table: carga el contenido del módulo en una tabla vertical
horz: carga el contenido del módulo en una tabla horizontal
xhtml: carga el contenido del módulo en divs
rounded: carga el contenido del módulo en divs anidados
raw: carga el contenido sin contenedores ni título.
Oriol Boix
www.oriolboix.com

27. Creación
de una plantilla
index.php
<jdoc:include type="component" />
Cargamos el contenido principal del sitio.
Los componentes de joomla.
Habrá un solo componente por cada página de nuestro site.
Oriol Boix
www.oriolboix.com

28. Creación
de una plantilla
index.php
<?php include_once('includes/footer.php'); ?>
Carga el archivo con el footer por defecto de joomla.
Oriol Boix
www.oriolboix.com

29. Creación
de una plantilla
template.css
Clases utilizadas
para contenido
Oriol Boix
www.oriolboix.com

30. Creación
de una plantilla
template.css
Clases pertenecientes
a módulos
Los estilos de los módulos
pueden variar según
el estilo con los que los
mostremos o como hayan
sido creados.
Oriol Boix
www.oriolboix.com

31. Creación
de una plantilla
template.css
Otras clases css
button
Es una clase asociada a elementos del tipo botón.
inputbox
Suele estar asociada a elementos text-input.
pagenav
Clase asociada a la paginación de artículos.
modifydate
Clase asociada a la fecha de modificación de un artículo.
sectiontableentry1 / sectiontableentry2
Suele estar asociada cuando se muestran datos en tablas.
Oriol Boix
www.oriolboix.com

32. Creación
de una plantilla
template_thumbnail.png
Es la previsualización del theme para el administrador.
No está establecido el tamaño estándar de la imagen,
pero por lo general es de 200px de ancho y 150px de alto.
Oriol Boix
www.oriolboix.com

33. Para esta presentación se ha utilizado el manual de plantillas “Desarrollando
templates para Joomla! 1.5” desarrollado por comunidadjoomla.org
http://joomlacode.org/gf/download/frsrelease/8611/31800/
manual_plantillas_joomla_15.pdf
El diseño está basado en White as Milk http://azeemazeez.com/misc/
whiteasmilk/ , template
para Wordpress, creado por Azeem Azeez http://www.azeemazeez.com/blogs/
white-as-milk/
Esta presentación se distribuye bajo la licencia Creative Commons Atribución-
No Comercial 2.5 exceptuando los logotipos de Joomla!Day y Oriol Boix
Oriol Boix
www.oriolboix.com

34. Para saber más
Documentación oficial del proyecto
http://docs.joomla.org/Template_reference_material
Oriol Boix
www.oriolboix.com

35. Para saber más
Documentación oficial del proyecto
http://docs.joomla.org/Template_reference_material
Oriol Boix
www.oriolboix.com

36. ¿Alguna pregunta?
Oriol Boix
hola@oriolboix.com
www.oriolboix.com
twitter.com/sopadepixels
¡Gracias!
Oriol Boix
www.oriolboix.com