SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Crear plantillas personalizadas para joomla joomla day madrid 2017 - 03-05-2017
Vamos a conocer cómo funciona el sistema de plantillas de Joomla así como ver las posibilidades para crear una plantilla personalizada. Ya sea desde cero o utilizando frameworks de los principales proveedores de plantillas (Helix, Gantry y T3) para construir el aspecto web deseado.
Vamos a conocer cómo funciona el sistema de plantillas de Joomla así como ver las posibilidades para crear una plantilla personalizada. Ya sea desde cero o utilizando frameworks de los principales proveedores de plantillas (Helix, Gantry y T3) para construir el aspecto web deseado.
Crear plantillas personalizadas para joomla joomla day madrid 2017 - 03-05-2017
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
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
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.
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