Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Crear plantillas personalizadas para joomla joomla day madrid 2017 - 03-05-2017

1,731 views

Published on

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.

Published in: Design
  • Login to see the comments

Crear plantillas personalizadas para joomla joomla day madrid 2017 - 03-05-2017

  1. 1. #jdmad17 Crear plantillas personalizadas para Joomla Pablo Arias
  2. 2. HOLA! soy... Pablo Arias @pablo.arias.ramos www.pabloarias.eu
  3. 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. 4. Separación de “poderes” » Diseño » Contenido » Funcionalidad
  5. 5. Gestión de plantillas
  6. 6. Gestión de plantillas
  7. 7. Sistema de plantillas de Joomla Plantillas diferentes para: » Parte pública /templates/ » Panel de administración /administrator/templates/
  8. 8. Plantillas predeterminadas de Joomla Protostar Beez (System)
  9. 9. Panel administración Protostar
  10. 10. Parte pública Protostar
  11. 11. Panel administración Beez
  12. 12. Parte pública Beez
  13. 13. Crear una plantilla desde cero
  14. 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. 15. Ruta de las plantillas La carpeta que contiene las plantillas de la parte pública: /public_html/nombre.dominio/templates/nombre_plantilla
  16. 16. Estructura de directorios de una plantilla » /css » /html » /images » /javascript » /language » /scss (o less)
  17. 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. 18. Index.php de Protostar
  19. 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. 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. 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. 22. Frameworks de terceros
  23. 23. Son una base para el desarrollo VENTAJAS » Base muy trabajada » Facilidades que ahorran tiempo DESVENTAJAS » Aprendizaje » Código innecesario
  24. 24. Frameworks de terceros Frameworks de terceros con plantillas gratuitas para usar como base para construir una a medida.
  25. 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. 26. Frameworks plantillas » Gantry 5 (Rockettheme) » Helix 3 (Joomshaper) » T3 (Joomlart) » Warp (Yootheme) » Y muchos más: Joostrap, Vertex (Shape5), Hallo (Zoodemo), ...
  27. 27. Gantry 5 » Layout builder » Megamenu » No basada en Bootstrap » Utiliza SASS
  28. 28. Layout Gantry » Arrastrar y soltar » Anchos con porcentajes Facilita la gestión de posiciones para módulos
  29. 29. Web: gantry.org Necesario descargar componente y plantilla (Helium) Plantillas premium RocketTheme: rockettheme.com Más información
  30. 30. Helix 3 » Facilita la gestión de posiciones para módulos » Basada en Bootstrap 3 » Megamenu » Utiliza LESS
  31. 31. Panel administración » Arrastrar y soltar » Posiciones para módulos » Crear filas nuevas con 1 clic » Muchas otras opciones de configuración
  32. 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. 33. T3 Framework » Control del layout en ficheros » ThemeMagic » Megamenu » Basada en Bootstrap 3 » Utiliza LESS
  34. 34. Panel administración » ThemeMagic permite edición visual » Edición responsive layout
  35. 35. Más información Web: t3-framework.org Necesario descargar plugin y plantilla T3, hace falta registro (gratuito) Plantillas premium: joomlart.com
  36. 36. Conclusión Utiliza el método que mejor se adapte a las características del proyecto y a tus conocimientos.
  37. 37. ¡GRACIAS A TODOS! ¿ALGUNA PREGUNTA? Puedes encontrarme en: » @pablo.arias.ramos » www.pabloarias.eu
  38. 38. PATROCINADORES

×