El documento describe el proceso de creación de plantillas en Joomla, incluyendo conceptos básicos, archivos necesarios y el uso de frameworks como Wright, T3 y Gantry. Se detalla el proceso de desarrollo desde la creación del archivo index.php hasta la instalación y personalización de la plantilla. También se aborda la compatibilidad con dispositivos y la importancia de los wireframes en el diseño.

1. Creando una plantilla
de forma fácil

2. Tito Alvarez
• 14 años de experiencia en programación PHP
• 8 años de experiencia en Joomla!
• Backender / Frontender / Plantillas comerciales /
Integrador / SysAdmin / Limpieza y otras cosas
• Experiencia en banca, pre-venta de software,
programador principal en Joomlashack
• Actualmente Programador Senior en redCOMPONENT

3. Agenda
• Conceptos generales de plantillas
• Proceso normal de creación de una plantilla
• Frameworks para plantillas
• Crear la plantilla con Wright
• Preguntas y respuestas

4. ¿Qué es una plantilla Joomla?
• Conjunto de archivos
PHP, CSS e imágenes
• Permite cambiar
completamente la
visualización del sitio
web
• Plantillas comerciales y
gratis

5. Photo Credit: https://www.flickr.com/photos/49503019876@N01/7314722180/
responsive
compatibilidad con dispositivos

6. Archivos necesarios
• index.php
• templateDetails.xml
• less
• css
• images
• javascript

7. Wireframes Diseño Análisis
Pruebas
HTML + CSS +
PHP
proceso de creación
de una plantilla

8. Photo Credit: https://www.flickr.com/photos/33472412@N00/5098835256/
Wireframes
mapa general de la página

9. 1. Crear el archivo index.php
con la visualización HTML básica y las
llamadas a componentes y módulos

10. 2. Crear los archivos
CSS/LESS
imágenes y otros recursos

11. 3. Crear el archivo templateDetails.xml
información básica de la plantilla

12. Photo Credit
4. Instalar la plantilla
creando un archivo zip e instalando, o
usando la función descubrir

13. 5. Seleccionar la plantilla
en el manejador de plantillas de Joomla!

14. Frameworks para plantillas
• Incluyen una plantilla
base para poder crear
una nueva
• Incorporan funciones
comunes Joomla! que
acortan el camino
• Permiten fácil
personalización y crear
funciones avanzadas

15. Frameworks populares
• T3, de Joomlart
t3-framework.org
• Gantry, de RocketTheme
www.gantry-framework.com
• Warp, de Yootheme
www.yootheme.com/themes/warp-framework
• Wright, de Joomlashack
wright.joomlashack.com

16. Creando nuestra plantilla
con Wright

17. Photo Credit
1. Descargar Wright
wright.joomlashack.com

18. 2. Instalar Wright
desde el instalador de Joomla

19. 3. Ir al gestor de plantillas
y listar las plantillas únicas

20. Photo Credit
4. Entrar a la plantilla
y activar la compilación less

21. Photo Credit
4. Editar los archivos
de la plantilla Wright

22. Photo Credit
5. Editar el archivo variables-generic.less
para los cambios más globales de la plantilla

23. Photo Credit
6. Agregar reglas adicionales de estilo
template.less

24. Gracias!