#JoomlaIO - Desarrollo de Plantillas para Joomla!

6,282 views

Published on

En esta edición de #JoomlaIO vamos a ver el desarrollo de plantillas para Joomla! en sus diferentes versiones: desde la versión 1.5 hasta la versión 3.0
A través de una presentación iremos viendo los siguientes puntos:
- Qué es una plantilla
- Estructura básica de archivos
- templateDetails.xml
- API de Joomla!
- Templates Overrides
- Ejemplo: index.php + css + params
- Diferencias entre las versiones
- Frameworks de desarrollo
- Herramientas de ayuda
Una vez finalizado este hangout tendremos las nociones básicas para comenzar a desarrollar nuestra plantilla para Joomla!

Published in: Business
4 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
6,282
On SlideShare
0
From Embeds
0
Number of Embeds
1,783
Actions
Shares
0
Downloads
272
Comments
4
Likes
14
Embeds 0
No embeds

No notes for slide

#JoomlaIO - Desarrollo de Plantillas para Joomla!

  1. 1. #JoomlaIODesarrollo de Plantillas(1.5, 1.6, 1.7, 2.5, 3.0)
  2. 2. #JoomlaIODesarrollo de Plantillas(1.5, 1.6, 1.7, 2.5, 3.0) Sergio Iglesias Sánchez www.sergioiglesias.net | twitter.com/sergiois Trabajo en: Complusoft Pertenezco a: OSIberia ● www.complusot.es ● www.osiberia.es ● twitter.com/complusoft ● twitter.com/osiberia
  3. 3. ÍNDICE DEL CONTENIDO ● Qué es una plantilla ● Estructura básica de archivos ● templateDetails.xml ● API Joomla! ● Templates Overrides ● Ejemplo: index.php + css + params ● Diferencias entre versiones ● Frameworks de desarrollo ● Herramientas de ayudaSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  4. 4. QUÉ ES UNA PLANTILLA QUÉ ES UNA PLANTILLASergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  5. 5. 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 separación entre la estructura, el contenido y el estilo. ● HTML/XHML/HTML5 → estructura ● DB (MySQL, SQL Server...) → contenido ● CSS → estiloSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  6. 6. ESTRUCTURA BÁSICA DE ARCHIVOS ESTRUCTURA BÁSICA DE ARCHIVOSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  7. 7. ESTRUCTURA BÁSICA DE ARCHIVOSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  8. 8. ESTRUCTURA BÁSICA DE ARCHIVOS ● index.html: añade seguridad a las carpetas. Es un fichero 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 al template). ● params.ini: guarda los parámetros personalizables desde el admin. ● template_thumbnail.png: imagen miniatura de la plantilla. ● template_preview: a partir de 1.7. Imagen un poco más grande. ● css: carpeta con los archivos .css que necesita la plantilla. ● template.css: archivo principal con los estilos. ● images: carpeta con las imágenes utilizadas en la plantilla (y css). ● html: contiene vistas personalizadas de extensiones (técnica de template overrides). ● templateDetails.xml: contiene información necesaria para la correcta instalación de la plantilla. Define los parámetros personalizables.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  9. 9. TEMPLATEDETAILS.XML TEMPLATEDETAILS.XMLSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  10. 10. TEMPLATEDETAILS.XML ● Imprescindible para que la plantilla sea reconocida por el admin. ● 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. ● Relacionado con el fichero params.iniSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  11. 11. TEMPLATEDETAILS.XML → DATOS ● Datos específicos de la plantilla: versión, autor, email, página web, año, licencia y descripción. ● Para Joomla! 1.7 en adelante hay cambios.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  12. 12. TEMPLATEDETAILS.XML → ARCHIVOS ● Especificación de los archivos utilizados en la plantilla. ● Recuerda: lo que no se declare aquí, no se instala. ● Para incluir una carpeta completa, utilizar: <folder>nombre_carpeta</folder>Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  13. 13. TEMPLATEDETAILS.XML → POSICIONES ● Qué y cuántas posiciones tendremos en la plantilla.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  14. 14. TEMPLATEDETAILS.XML → PARÁMETROS ● Parámetros: para ser manejados desde el back. Hace que una plantilla sea más versátil. ● Apartado ligado con el fichero params.ini ● Para Joomla! 1.7 en adelante hay cambiosSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  15. 15. TEMPLATEDETAILS.XMLSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  16. 16. API JOOMLA! API JOOMLA! - JDOCSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  17. 17. API JOOMLA! - 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, js y cualquier otro archivo. ● $mainframe->getCfg(sitename) ● Obtenemos el nombre del sitio. ● <jdoc:inclue type=”modules” name=”posicion” style=”estilo”/> ● Indica la carga de un módulo de una manera específica: ● 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). ● También se pueden crear estilos propios.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  18. 18. API JOOMLA! - JDOC ● <jdoc:include type=”component”/> ● Cargamos el contenido principal del sitio (contenido de componentes): artículos, secciones, categorías, calendarios... ● 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.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  19. 19. TEMPLATE OVERRIDES TEMPLATE OVERRIDESSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  20. 20. TEMPLATE OVERRIDES ● Técnica para redefinir la presentación por pantalla de un componente o módulo de Joomla! ● Se trata de una “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 las actualizaciones de las extensiones. ● Validación de estándares propuestos por la W3C. ● Conseguir un nivel adecuado de accesibilidad (algunas extensiones, incluso las nativas, no cumplen con la accesibilidad). ● Importante: la extensión debe cumplir con MVC.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  21. 21. TEMPLATE OVERRIDES → USO ● Crear una carpeta llamada html dentro de nuestra plantilla: ● templates/plantilla/html/ ● Dentro de esta carpeta crear las carpetas con los nombres de las extensiones (componentes y/o módulos) que queramos “redefinir” o “clonar”. ● Copiar en ellas el contenido de la carpeta tmpl (vistas) y realizar en esos ficheros las modificaciones/adaptaciones necesarias. ● Joomla!, al generar la página web, mira a ver si existe una carpeta html en la plantilla y si hay una “clonación” de la extensión que va a mostrar. En caso afirmativo, muestra ésta en lugar de la original.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  22. 22. EJEMPLO: INDEX.PHP + CSS + PARAMS EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  23. 23. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  24. 24. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  25. 25. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  26. 26. EJEMPLO: INDEX.PHP + CSS + PARAMS ● Insertar estilos para la maquetación de la plantilla. ● Conocer algunas clases que Joomla! carga por defecto: ● componentheading: muestra el título del componente. ● contentheading: muestra el título de los artículos. ● buttonheading: muestra iconos PDF, imprimir y enviar a un amigo. ● small: utilizado en varios elementos (como autor del artículo). ● createdate: muestra la fecha de creación del artíuclo. ● readon: utilizada en el enlace de “leer más...” de los artículos. ● article_separator: utilizada por etiqueta <span> para separar artículos. ● moduletable(+ sufijo):carga los div (y sufijo cargado desde back) de los módulos. ● active: para ítem de menú activo. ● parent: cuando hay sub-ítems, para el elemento padre.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  27. 27. EJEMPLO: INDEX.PHP + CSS + PARAMS ● Otras clases: ● button: asociada a elementos de tipo botón. ● inputbox: asociada a elementos text-input. ● pagenav: asociada a paginación de artículos. ● modifydate: asociada a fecha de modificación del artículo. ● sectiontableentry1/sectiontableentry2: asociada a datos en tablas.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  28. 28. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  29. 29. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  30. 30. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  31. 31. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  32. 32. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  33. 33. EJEMPLO: INDEX.PHP + CSS + PARAMS ● Íntimamente ligada al fichero templateDetails.xml: ● Sus parámetros se ponen en este fichero. ● Declaración: ● nombre_parametro_1=valor_1 nombre_parametro_2=valor_2 nombre_parametro_3=valor_3 ● Llamada desde PHP ● <?php echo $this->params->get(nombre_parametro); ?> ● Los estilos asociados se añaden en los ficheros .css (template.css)Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  34. 34. EJEMPLO: INDEX.PHP + CSS + PARAMSSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  35. 35. DIFERENCIAS ENTRE VERSIONES DIFERENCIAS ENTRE VERSIONESSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  36. 36. DIFERENCIA ENTRE VERSIONES ● Novedades a partir de Joomla! 1.7: ● Salida de contenidos sin tablas: todos los archivos de salida están escritos en xHTML 1.0 Strict. ● templateDetails.xml (estilos de plantilla): creación de variaciones en la plantilla para una o varias páginas que pueden ser asignadas de forma específica. ● Novedades a partir de Joomla! 3.0: ● Incorporación de Twitter Bootstrap (framework CSS). ● Nuevas plantillas front y back adaptadas a móviles (bootstrap). ● Actualización plantilla accesible Beez3.Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  37. 37. DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ● A partir de Joomla! 1.7:Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  38. 38. DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ● Parámetros en Joomla! 1.5:Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  39. 39. DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML ● Campos de configuración a partir de Joomla! 1.7:Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  40. 40. DIFERENCIA ENTRE VERSIONES → INDEX.PHP ● En Joomla! 1.5, La variable mainframe se definía así: ● $global mainframe; ● A partir de Joomla! 1.7, se define así: ● $mainframe = Jfactory::getApplication(); ● Posibles usos: ● $app->getCfg(sitename) → muestra nombre del portal web ● $params = $app->getParams(); → coge los parámetros de la página (ítem de menú) ● $pageclass = $params->get(pageclass_sfx); → sufijo de la página (ítem de menú)Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  41. 41. DIFERENCIA ENTRE VERSIONES → CARGA DE CSS Y JS ● Para cargar estilos y javascript: ● $app = Jfactory::getApplication(); ● $tpath = $this->baseurl./templates/.$this- >template; ● $tsystem = $this->baseurl./templates/system; ● $doc->addScript($tpath./js/archivo.js); ● $doc->addStyleSheet($tsystem./css/system.css); ● $doc->addStyleSheet($tpath./css/estilo.css);Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  42. 42. FRAMEWORKS DE DESARROLLO FRAMEWORKS DE DESARROLLOSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  43. 43. FRAMEWORKS DE DESARROLLO ● Estructura de software compuesta de componentes personalizables e intercambiables para el desarrollo de una aplicación. ● Ventajas: ● Acelerar el 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/joomla-templates/zen-grid-framework ● T3: http://www.joomlart.com/joomla/t3-framework-and-ja-purity-templates ● YJSG: http://yjsimplegrid.com/Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  44. 44. HERRAMIENTAS DE AYUDA HERRAMIENTAS DE AYUDASergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  45. 45. HERRAMIENTAS DE AYUDA → EXTENSIONES PARA FIREFOX ● Firebug: https://addons.mozilla.org/es/firefox/addon/firebug/ ● HeadingsMaps: https://addons.mozilla.org/es/firefox/addon/headingsmap/ ● HTML Validator: https://addons.mozilla.org/es/firefox/addon/html-validator/ ● QuickJava: https://addons.mozilla.org/es/firefox/addon/quickjava/ ● Web Developer: https://addons.mozilla.org/es/firefox/addon/web-developer/ ● User Agent Switcher: https://addons.mozilla.org/es/firefox/addon/user-agent-switcherSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  46. 46. HERRAMIENTAS DE AYUDA → RESPONSIVE WEB DESIGN ● ScreenFly by QuirkTools: http://quirktools.com/screenfly/ ● Responsive Design Testing: http://mattkersley.com/responsive/ ● HTML Validator: https://addons.mozilla.org/es/firefox/addon/html-validator/ ● ScreenQueries: http://screenqueri.es/ ● Resizer: http://lab.maltewassermann.com/viewport-resizer/Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  47. 47. HERRAMIENTAS DE AYUDA → VELOCIDAD DE CARGA ● Pingdom: http://tools.pingdom.com/fpt/ ● PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights ● Web Page Analyzer: http://www.websiteoptimization.com/services/analyze/ ● GTmetrix: http://gtmetrix.com/Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  48. 48. HERRAMIENTAS DE AYUDA → CHEATSEETS ● Para plantillas Joomla! 1.5: http://www.younic.de/wp-content/uploads/Joomla15_Basic_Template_Cheatsheet.pdf ● Para plantillas Joomla! 2.5: http://www.younic.de/wp-content/uploads/Joomla15_Basic_Template_Cheatsheet.pdf ● Para plantillas Joomla! 3.0: www.joomlack.fr/en/joomla-documentations-tutorials/joomla-3-x-templates-cheatsheetSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!
  49. 49. FIN DE LA PRESENTACIÓN Gracias por vuestra atención. Tenéis más información en: atención www.sergioiglesias.net y www.twitter.com/sergiois FIN DE LA PRESENTACIÓNSergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois#JoomlaIO :: Desarrollo Plantillas Joomla!

×