Taller de desarrollo de plantillas para Joomla! 1.5 y 1.7 impartido por Sergio Iglesias en el Joomla!Day 2011 España celebrado en Zaragoza

3. Sergio Iglesias Sánchez
9 y 10 /
Noviembre /
2011 /

4. Plantillas Joomla!
Desarrollo de plantillas
Joomla! 1.5 y 1.7
9 y 10 /
Noviembre /
2011 /

5. Desarrollo de Plantillas Joomla! 1.5
- XHTML + CSS + PHP
- Qué es una plantilla
- Frameworks de desarrollo
- Estructura básica de archivos
- templateDetails.xml
- API Joomla!
- Templates Overrides
- Ejemplo plantilla
· index.php + template.css + params.ini
- Novedades y diferencias en Joomla! 1.7
- Curiosidades
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

6. xHTML + CSS + PHP
XHTML
Define la estructura de la información.
Extensible Hypertext Markup Language (lenguaje extensible de
marcado de hipertexto).
El lenguaje HTML no cumple al 100% las reglas del estándar XML. Para
poder aprovechar las ventajas del XML, se hizo necesaria una evolución.
del HTML hacia el xHTML, que no es más que una redefinición del
lenguaje haciendo más estrictas algunas de sus formulaciones básicas
(para que sea totalmente compatible con XML).
Entre las reglas que forman parte del xHTML, pero no del HTML,
podemos citar la obligación de cerrar todas las etiquetas y el uso
exclusivo de minúsculas para las palabras del lenguaje (etiquetas).
Es un estándar el W3C.
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

7. xHTML + CSS + PHP
CSS
Define el diseño.
Cascading Style Sheets (hojas de estilo en cascada).
Tres formas de aplicar:
CSS externa → recomendada.
CSS interna.
CSS en línea.
Ventajas:
Separa el diseño del contenido.
Mejora el mantenimiento.
HTML más claro de entender (e indexable).
Distinto diseño para dispositivo: impresora, PDA...
Es un estándar el W3C.
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

8. xHTML + CSS + PHP
PHP
Lenguaje de programación del lado de servidor.
Pre-procesador Hipertexto
(lenguaje de programación interpretado).
Acceso a base de datos (MySQL).
Ventajas:
Desarrollo de páginas web dinámicas.
Lenguaje multiplataforma.
Cuidado con versiones PHP 5 y PHP 6.
Aplicaciones creadas con PHP:
Joomla!
SugarCRM
FaceBook
Tuenti
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

9. Qué es una plantilla
Es la base de la aplicación de entrega de contenidos.
Formada por diferentes archivos que controlan la estructura y el
diseño de la página y de sus contenidos.
Ventajas:
Proporciona una sepración entre la estructura (forma), contenido y
estilo.
HTML/xHTML/HTML5 → estructura
DB → contenido
CSS → estilo
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

10. Frameworks de desarrollo
Qué es
Estructura de software compuesta de componentes personalizables e
intercambiables para el desarrollo de una aplicación.
Ventajas:
Acelerar proceso de desarrollo.
Reutilizar código ya existente.
Promover buenas prácticas de desarrollo (uso de patrones).
Frameworks de plantillas en Joomla!
Gantry: http://www.gantry-framework.org/
Warp: http://www.yootheme.com/warp/
ZenGrid:
http://www.joomlabamboo.com/blog/template-news/introducing-zen-grid-framework-2
T3: http://wiki.joomlart.com/wiki/JA_Template_Framework/Overview
YJSG: http://yjsimplegrid.com/
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

11. Estructura básica de archivos
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

12. 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 de la plantilla y
las llamadas PHP a la API de Joomla! (punto de entrada a la plantilla).
params.ini: guarda los parámetros personalizables desde el
administrador.
template_thumbnail.png: imagen en miniatura de la plantilla.
template_preview.png: sólo para Joomla! 1.7
css: carpeta con archivos CSS (hojas de estilo).
template.css: archivo principal con el código de estilo de la plantilla.
images: carpeta con las imágenes utilizadas en la plantilla.
html: contiene vistas personalizadas para distintos componentes y
módulos (técnica template overrides).
templateDetails.xml: contiene información necesaria para la correcta
instalación de la plantilla. Define los parámetros personalizables.
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

13. templateDetails.xml
Imprescindible para que la plantilla sea reconocida por el
administrador.
Se utiliza como instalador de la plantilla
Todo lo que no esté definido en él, no se instala.
Datos divididos en 4 partes:
Datos.
Archivos.
Posiciones.
Parámetros.
Los datos de los parámetros podrán ser utilizados desde el back para
cambiar la visualización.
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

14. templateDetails.xml
• Datos específicos de la plantilla: versión, autor, email, página
web, año, licencia y descripción.
• Cambios en Joomla! 1.7
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

15. templateDetails.xml
• Especificación de los archivos utilizados en el diseño.
• Para incluir una carpeta entera utilizar:
<folder>nombre_carpeta</folder>
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

16. templateDetails.xml
• Qué y cuántas posiciones tendremos en nuestro sitio (para
mostrar contenido en la plantilla.
Curso “Nombre del Curso”. Ciudad.

17. templateDetails.xml
• Parámetros: para ser manejados desde el back. Hace que
una plantilla sea más versátil.
• Este apartado está íntimamente ligado al archivo params.ini
• Cambios en Joomla! 1.7
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

18. templateDetails.xml
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

19. API Joomla! – Directivas JDoc
<jdoc:include type=”head”/>
Va dentro de la cabecera HTML (head).
Muestra el title, metatags, feed y js (MooTools).
$this->template
Obtenemos el nombre de la carpeta que contiene nuestra plantilla.
Uso: para cargar css, favicon y cualquier otro archivo.
$mainframe→getCfg('sitename')
Obtenemos el nombre del sitio.
<jdoc:include type=”modules” name=”posicion” style=”estilo”/>
Indica la carga de un módulo en particular y de una manera
específica (parámetros name y style).
name: posiciones cargadas en el fichero templateDetails.xml
style: table (tabla vertical = columna), horz (tabla horizontal =
fila), xhtml (divs), rounde (divs anidados), raw (sin contenedor).
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

20. API Joomla! – Directivas JDoc
<jdoc:include type=”component”/>
Cargamos contenido principal del sitio: artículos, secciones,
categorías, componentes...
if($this->countModules('nombre_posicion')){}
Condicional para saber si hay algún módulo en una posición
determinada.
$this->baseurl
Contiene la dirección base de nuestro sitio
$this->language
Contiene el idioma en el que se encuentra nuestro sitio (es-ES, en-
GB...).
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

21. Templates Overrides
Técnica para redefinir la presentación por pantalla de un
componente o módulo de Joomla!
“Clonación” de la vista de la extensión.
Se incluye a partir de la versión 1.5.
Ventajas:
Personalizar el portal sin preocuparse de actualizaciones de
extensiones.
Validación de estándares propuestos por el W3C.
Conseguir un nivel adecuado de accesibilidad (algunas extensiones,
inclusos las propias, no cumplen accesibilidad).
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

22. Templates Overrides
USO
Crear una carpeta llamada html dentro de nuestra plantilla
templates/plantilla/html/
Dentro de esta carpeta meter las carpetas de los componentes y/o
módulos que queramos redefinir o “clonar”.
Copiar el contenido de la carpeta tmpl (vistas) y realizar en ellos las
modificaciones/adaptaciones necesarias.
Joomla!, al generar la página web, mira si hay en la plantilla una
redefinición o “clon”. Si la encuentra, la utiliza.
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

23. Ejemplo plantilla – index.php
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

24. Ejemplo plantilla – index.php
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

25. Ejemplo plantilla – index.php
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

26. Ejemplo plantilla – template.css
Insertar estilos para la maquetación de la plantilla.
Conocer clases que Joomla! carga por defecto:
componentheading: muestra título del componente.
contentheading: muestra título de los artículos.
buttonheading: muestra iconos PDF, imptimir y enviar amigo.
small: utilizado en varios elementos (como autor de artículo).
createdate: muestra fecha creación artículo.
readon: utilizada por el link de “leer más...”.
article_separator: utilizada por etiqueta <span> que separa artículos entre sí.
moduletable(+ sufijo): carga los div (y sufijo que se da desde back).
h3: títulos de los módulos que se cargan con esta etiqueta.
active: para item del menú activo.
item: cada elemento del menú (+ su ID).
parent: cuando hay sub-items (para elemento padre).
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

27. Ejemplo plantilla – template.css
Otras clases:
button: asociada a elementos tipo botón.
inputbox: asociada a elementos text-input.
pagenav: asociada a paginación de artículos.
moditydate: asociada a fecha de modificación de artículos.
sectiontableentre1/sectiointableentry2: asociada a datos en tablas.
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

28. Ejemplo plantilla – template.css
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

29. Ejemplo plantilla – template.css
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

30. Ejemplo plantilla – template.css
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

31. Ejemplo plantilla – template.css
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

32. Ejemplo plantilla – template.css
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

33. Ejemplo plantilla – params.ini
Íntimamente ligada a templateDetails.xml
Sus parámetros se ponen en este fichero
Declaración:
nombre_del_parametro_1=valor_1
nombre_del_parametro_2=valor_2
nombre_del_parametro_3=valor_3
Llamada desde PHP:
<?php echo $this->params->get('nombre_del_parametro'); ?>
Añadir estilos asociados en template.css
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

34. Ejemplo plantilla – params.ini
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

35. Novedades y diferencias en Joomla! 1.7
Algunas novedades
Salida de contenido sin tablas: todos los archivos de salida están
escritos en XHTML 1.0 Strict.
Template styles (estilos de plantilla): creación de variaciones en la
plantilla para una o varias páginas que pueden ser asignadas de forma
específica.
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

36. Novedades y diferencias en Joomla! 1.7
templateDetails.xml
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

37. Novedades y diferencias en Joomla! 1.7
templateDetails.xml (en Joomla! 1.5)
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

38. Novedades y diferencias en Joomla! 1.7
templateDetails.xml (en Joomla! 1.7)
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

39. Novedades y diferencias en Joomla! 1.7
index.php
En Joomla! 1.5 definíamos la variable mainframe así:
global $mainframe;
En Joomla! 1.6 y 1.7:
$mainframe = JFactory::getApplication();
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

40. Curiosidades
Algunas curiosidades y pequeños tips
Posible rediseño de joomla.org
https://plus.google.com/photos/108983221798389280265/albums/5643812923156404913
Posible rediseño del administrador
https://plus.google.com/photos/108983221798389280265/albums/5625370216902790289
Plantillas para administrador: no solo hay plantillas para la parte front
http://www.sergioiglesias.net/blog/joomla/119-plantillas-gratis-para-adminitrador-de-joomla-15-y-16
Mostrar posiciones en plantilla
http://www.sergioiglesias.net/blog/joomla/90-visualizacion-de-posiciones-en-plantillas-16-con-tp1
Añadir teclas de acceso rápido: accesskey
http://www.sergioiglesias.net/blog/joomla/89-anadir-etiquetas-accesskey-en-joomla-16
Ordenar módulos y artículos
Definición propia de módulos en template
<jdoc:include type="modules" name="blog" style="blog" />
Ver html/modules.php
Plantillas Joomla!
Curso “Nombre del Curso”. Ciudad.

41. Publicidad
Libro Joomla! 1.6 – Guía de referencia en español
Guía de referencia en español
Minitutoriales
Introducción Instalar XAMPP
Novedades en Joomla! 1.6 Instalar Joomla! 1.6
Enlaces de interés Joomla! Gestionar permisos
Acceso al panel de control Crear un artículo
Sitio Crear un contacto
Usuarios Integrar noticias
Menús Añadir un módulo submenú
Contenido Habilitar la vista de módulos
Componentes Añadir accesskey
Extensiones Integrar DNI electrónico
Ayuda Enlaces de interés
www.librojoomla16.com
Plantillas Joomla! Curso”. Ciudad.
Curso “Nombre del

42. Publicidad
Sergio Iglesias
www.sergioiglesias.net
twitter.com/sergiois
Plantillas Joomla! Curso”. Ciudad.
Curso “Nombre del

43. Fin del taller
Gracias por vuestra atención
Plantillas Joomla! Curso”. Ciudad.
Curso “Nombre del