1.
#jdmad17
Crear plantillas personalizadas para Joomla
Pablo Arias

2.
HOLA! soy...
Pablo Arias
@pablo.arias.ramos
www.pabloarias.eu

3.
Objetivos
» Conocer cómo funciona el sistema de plantillas de Joomla
» Ver las predeterminadas
» Cómo se crea una plantilla a medida desde cero
» Frameworks de terceros

4.
Separación de “poderes”
» Diseño
» Contenido
» Funcionalidad

5.
Gestión de plantillas

6.
Gestión de plantillas

7.
Sistema de plantillas de Joomla
Plantillas diferentes para:
» Parte pública
/templates/
» Panel de administración
/administrator/templates/

8.
Plantillas predeterminadas de Joomla
Protostar
Beez
(System)

9.
Panel administración Protostar

10.
Parte pública Protostar

11.
Panel administración Beez

12.
Parte pública Beez

13.
Crear una plantilla desde cero

14.
Conocimientos recomendados
» Diseño gráfico
» HTML
» CSS
» PHP
» Javascript
No es necesario ser un “artista” en todos.
En muchas ocasiones son diferentes personas.

15.
Ruta de las plantillas
La carpeta que contiene las plantillas de la parte pública:
/public_html/nombre.dominio/templates/nombre_plantilla

16.
Estructura de directorios de una plantilla
» /css
» /html
» /images
» /javascript
» /language
» /scss (o less)

17.
Ficheros en el directorio raíz
» index.php
» component.php
» offline.php
» error.php
» favicon.ico
» templateDetails.xml
» template_preview.png y template_thumbnail.png

18.
Index.php de Protostar

19.
Documentación
Documentación oficial de Joomla:
Introducción a las plantillas de Joomla!
docs.joomla.org/Understanding_Joomla!_templates/es
Crear una plantilla Joomla! básica
docs.joomla.org/Creating_a_basic_Joomla!_template/es
Artículos en la Joomla Magazine de César Vargas-Machuca B
Cómo crear una plantilla front-end para Joomla! desde cero
Está dividido en tres artículos: 1, 2 y 3

20.
Archivos de "reemplazo" (override)
Carpeta html
Sobrescribir vistas de componentes y módulos
Estructura HTML personalizada
Simplemente copiando el archivo original de la vista a nuestra
plantilla

21.
Reemplazo de layouts
Se utilizan por ejemplo en el componente de
contenidos para mostrar:
» Información de artículos
» Imagen principal artículos
» Miga de pan
» Etc.

22.
Frameworks de terceros

23.
Son una base para el desarrollo
VENTAJAS
» Base muy trabajada
» Facilidades que ahorran tiempo
DESVENTAJAS
» Aprendizaje
» Código innecesario

24.
Frameworks de terceros
Frameworks de terceros con plantillas gratuitas para
usar como base para construir una a medida.

25.
Características comunes generales
» Responsive (adaptable a diferentes tamaños de pantalla)
» Sus plantillas usan el framework como base
» Bien documentadas, en general
» Licencia libre: GNU/GPL
» No es necesario mantener logotipo en el frontend pero sí en
el código, la licencia y el autor

26.
Frameworks plantillas
» Gantry 5 (Rockettheme)
» Helix 3 (Joomshaper)
» T3 (Joomlart)
» Warp (Yootheme)
» Y muchos más: Joostrap, Vertex (Shape5), Hallo (Zoodemo), ...

27.
Gantry 5
» Layout builder
» Megamenu
» No basada en Bootstrap
» Utiliza SASS

28.
Layout Gantry
» Arrastrar y soltar
» Anchos con porcentajes
Facilita la gestión de posiciones
para módulos

29.
Web: gantry.org
Necesario descargar componente
y plantilla (Helium)
Plantillas premium RocketTheme:
rockettheme.com
Más información

30.
Helix 3
» Facilita la gestión de
posiciones para módulos
» Basada en Bootstrap 3
» Megamenu
» Utiliza LESS

31.
Panel administración
» Arrastrar y soltar
» Posiciones para módulos
» Crear filas nuevas con 1 clic
» Muchas otras opciones de
configuración

32.
Más información
Web: joomshaper.com/helix
Solo es necesario descargar un paquete pero hace
falta registro (gratuito)
Plantillas premium Joomshaper:
joomshaper.com

33.
T3 Framework
» Control del layout en ficheros
» ThemeMagic
» Megamenu
» Basada en Bootstrap 3
» Utiliza LESS

34.
Panel administración
» ThemeMagic permite edición
visual
» Edición responsive layout

35.
Más información
Web: t3-framework.org
Necesario descargar plugin y plantilla T3, hace falta
registro (gratuito)
Plantillas premium: joomlart.com

36.
Conclusión
Utiliza el método que mejor se adapte a las
características del proyecto y a tus conocimientos.

37.
¡GRACIAS A TODOS!
¿ALGUNA PREGUNTA?
Puedes encontrarme en:
» @pablo.arias.ramos
» www.pabloarias.eu

38.
PATROCINADORES