1. Joomla!Day 2013 - Albacete Taller Desarrollo de Plantillas * * * Sergio Iglesias SnchezSergio Iglesias Snchez www.sergioiglesias.net | twitter.com/sergiois Trabajo en: Complusoft www.complusot.es twitter.com/complusoft Pertenezco a: OSIberia www.osiberia.es twitter.com/osiberia

2. NDICE DEL CONTENIDO Introduccin Tips Plantillas Joomla! 1.Snippets 2.Cargar jQuery 3.Cargar Bootstrap 4.Crear y usar nuevo estilo de plantilla 5.Crear posicin nueva 6.Crear nuevo tipo de estilo de mdulo 7.Crear clase CSS del mdulo 8.Error 404 como artculo 9.Template override 10.Crear presentacin alternativa de componente 11.Crear presentacin alternativa de mdulo Herramientas de ayuda Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 3. INTRODUCCIN INTRODUCCININTRODUCCIN Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 4. INTRODUCCIN #JoomlaIO: Desarrollo plantillas Joomla! - Terico: http://www.sergioiglesias.net/blog/cursos/212-joomlaio-28-01-2013- hangout-desarrollo-plantillas-joomla Desarrollo plantillas Joomla! - Prctico: http://www.sergioiglesias.net/blog/cursos/213-joomlaio-18-02-2013- hangout-desarrollo-plantillas-joomla-ii Taller de desarrollo de plantillas Joomla!Day 2011 Zaragoza: http://www.sergioiglesias.net/blog/cursos/175-taller-de-desarrollo-de- plantillas-joomla-en-video Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 5. INTRODUCCIN ESTRUCTURA BSICA DE ARCHIVOS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 6. INTRODUCCIN ESTRUCTURA BSICA DE ARCHIVOS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! index.html: aade seguridad a las carpetas. Es un fichero vaco. 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 parmetros personalizables desde el admin. template_thumbnail.png: imagen miniatura de la plantilla. template_preview: a partir de 1.7. Imagen un poco ms grande. css: carpeta con los archivos .css que necesita la plantilla. template.css: archivo principal con los estilos. images: carpeta con las imgenes utilizadas en la plantilla (y css). html: contiene vistas personalizadas de extensiones (tcnica de template overrides). templateDetails.xml: contiene informacin necesaria para la correcta instalacin de la plantilla. Define los parmetros personalizables. 7. INTRODUCCIN TEMPLATEDETAILS.XML Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 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 5 partes: Datos. Archivos. Idiomas. Posiciones. Parmetros. Los datos de los parmetros podrn ser utilizados desde el back para cambiar la visualizacin. Relacionado con el fichero params.ini 8. INTRODUCCIN TEMPLATEDETAILS.XML (datos) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Datos especficos de la plantilla: nombre del template, fecha de creacin, autor, copyright, email, pgina web, versin y descripcin. 9. INTRODUCCIN TEMPLATEDETAILS.XML (archivos) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Especificacin de los archivos utilizados en la plantilla. Recuerda: lo que no se declare aqu, no se instala. Para incluir una carpeta completa, utilizar: nombre_carpeta 10. INTRODUCCIN TEMPLATEDETAILS.XML (idiomas) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Especificacin de los idiomas utilizados en la plantilla. 11. INTRODUCCIN TEMPLATEDETAILS.XML (posiciones) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Qu y cuntas posiciones tendremos en la plantilla. 12. INTRODUCCIN TEMPLATEDETAILS.XML (parmetros) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Parmetros/Campos de configuracin: para ser manejados desde el back. Hace que una plantilla sea ms verstil. Apartado ligado con el fichero params.ini http://docs.joomla.org/Standard_form_field_types 13. INTRODUCCIN API JOOMLA! - JDOC Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Va dentro de la cabecera HTML (). 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. Indica la carga de un mdulo de una manera especfica: 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). Tambin se pueden crear estilos propios. 14. INTRODUCCIN API JOOMLA! - JDOC Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Cargamos el contenido principal del sitio (contenido de componentes): artculos, secciones, categoras, calendarios... if($this->countModules('nombre_posicion')){} Condicional para saber si hay algn mdulo en una posicin determinada. $this->baseurl Contiene la direccin base de nuestro sitio. $this->language Contiene el idioma en el que se encuentra nuestro sitio. 15. INTRODUCCIN RECORDATORIO #JoomlaIO: Desarrollo plantillas Joomla! - Terico: http://www.sergioiglesias.net/blog/cursos/212-joomlaio-28-01-2013- hangout-desarrollo-plantillas-joomla Desarrollo plantillas Joomla! - Prctico: http://www.sergioiglesias.net/blog/cursos/213-joomlaio-18-02-2013- hangout-desarrollo-plantillas-joomla-ii Taller de desarrollo de plantillas Joomla!Day 2011 Zaragoza: http://www.sergioiglesias.net/blog/cursos/175-taller-de-desarrollo-de- plantillas-joomla-en-video Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 16. TIPS PLANTILLAS JOOMLA! TIPS PLANTILLAS JOOMLATIPS PLANTILLAS JOOMLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 17. TIPS PLANTILLAS JOOMLA! SNIPPETS Variables comunes: Ocultar Meta Generator: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01 18. TIPS PLANTILLAS JOOMLA! SNIPPETS Cargar hojas de estilo: Cargar javascript: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01 19. TIPS PLANTILLAS JOOMLA! SNIPPETS Pgina de inicio / Frontpage: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01 20. TIPS PLANTILLAS JOOMLA! CARGAR JQUERY Cargar jQuery: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 02 21. TIPS PLANTILLAS JOOMLA! CARGAR BOOTSTRAP Cargar Bootstrap: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 03 22. TIPS PLANTILLAS JOOMLA! CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04 23. TIPS PLANTILLAS JOOMLA! CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04 24. TIPS PLANTILLAS JOOMLA! CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04 25. TIPS PLANTILLAS JOOMLA! CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04 26. TIPS PLANTILLAS JOOMLA! CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04 27. TIPS PLANTILLAS JOOMLA! CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04 28. TIPS PLANTILLAS JOOMLA! CREAR POSICIN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05 29. TIPS PLANTILLAS JOOMLA! CREAR POSICIN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05 30. TIPS PLANTILLAS JOOMLA! CREAR POSICIN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05 31. TIPS PLANTILLAS JOOMLA! CREAR POSICIN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05 32. TIPS PLANTILLAS JOOMLA! CREAR NUEVO TIPO DE ESTILO DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Crear carpeta html en la carpeta del template Crear fichero modules.php 06 33. TIPS PLANTILLAS JOOMLA! CREAR NUEVO TIPO DE ESTILO DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! index.php modules.php 06 34. TIPS PLANTILLAS JOOMLA! CREAR CLASE CSS DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07 35. TIPS PLANTILLAS JOOMLA! CREAR CLASE CSS DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07 36. TIPS PLANTILLAS JOOMLA! CREAR CLASE CSS DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07 37. TIPS PLANTILLAS JOOMLA! CREAR CLASE CSS DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07 38. TIPS PLANTILLAS JOOMLA! CREAR CLASE CSS DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! template.css 07 39. TIPS PLANTILLAS JOOMLA! ERROR 404 COMO ARTCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Crear artculo Crear tem de men con alias error404 Crear fichero error.php en la carpeta del template 08 40. TIPS PLANTILLAS JOOMLA! ERROR 404 COMO ARTCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08 41. TIPS PLANTILLAS JOOMLA! ERROR 404 COMO ARTCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08 42. TIPS PLANTILLAS JOOMLA! ERROR 404 COMO ARTCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08 43. TIPS PLANTILLAS JOOMLA! ERROR 404 COMO ARTCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! error.php 08 44. TIPS PLANTILLAS JOOMLA! TEMPLATE OVERRIDES Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Crear carpeta html en la carpeta del template Crear carpeta del componente o mdulo al que queramos aplicar esta tcnica Copiar el contenido de sus carpetas tmpl (views/-/tmpl) Realizar las modificaciones en estos ficheros 09 45. TIPS PLANTILLAS JOOMLA! TEMPLATE OVERRIDES Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! components/com_content/views/ templates/nuestro_template/html/com_content/ 09 46. TIPS PLANTILLAS JOOMLA! TEMPLATE OVERRIDES Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! modules/mod_login/ templates/nuestro_template/html/mod_login/ 09 47. TIPS PLANTILLAS JOOMLA! PRESENTACIN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10 48. TIPS PLANTILLAS JOOMLA! PRESENTACIN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10 49. TIPS PLANTILLAS JOOMLA! PRESENTACIN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Copiar y pegar el default.php del tmpl (o la vista si es override) Renombrar y realizar las modificaciones necesarias para adaptarlo a las necesidades com_content/views/article/tmpl 10 50. TIPS PLANTILLAS JOOMLA! PRESENTACIN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10 51. TIPS PLANTILLAS JOOMLA! PRESENTACIN ALTERNATIVA DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 11 52. TIPS PLANTILLAS JOOMLA! PRESENTACIN ALTERNATIVA DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Copiar y pegar el default.php del tmpl (o la vista si es override) Renombrar y realizar las modificaciones necesarias para adaptarlo a las necesidades modules/mod_login/tmpl 11 53. TIPS PLANTILLAS JOOMLA! PRESENTACIN ALTERNATIVA DE MDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 11 54. HERRAMIENTAS DE AYUDA HERRAMIENTAS DE AYUDAHERRAMIENTAS DE AYUDA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 55. HERRAMIENTAS DE AYUDA EXTENSIONES PARA FIREFOX Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 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-switcher 56. HERRAMIENTAS DE AYUDA RESPONSIVE WEB DESIGN Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ScreenFly by QuirkTools: http://quirktools.com/screenfly/ Responsive Design Testing: http://mattkersley.com/responsive/ ScreenQueries: http://screenqueri.es/ Resizer: http://lab.maltewassermann.com/viewport-resizer/ Responsinator: http://www.responsinator.com 57. HERRAMIENTAS DE AYUDA VELOCIDAD DE CARGA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 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/ 58. HERRAMIENTAS DE AYUDA CHEATSEETS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! Para plantillas Joomla! 1.5: http://www.younic.de/wp-content/uploads/Joomla15_Basic_Template_Cheatsheet.pdf Para plantillas Joomla! 2.5: http://www.avadesigner.com/dl/cheat-sheet/Joomla-Sheet-Cheat-Templates-2.5.pdf Para plantillas Joomla! 3.0: www.joomlack.fr/en/joomla-documentations-tutorials/joomla-3-x-templates-cheatsheet 59. HERRAMIENTAS DE AYUDA DESARROLLO DE PLANTILLAS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! #JoomlaIO: Desarrollo plantillas Joomla! - Terico: http://www.sergioiglesias.net/blog/cursos/212-joomlaio-28-01-2013- hangout-desarrollo-plantillas-joomla Desarrollo plantillas Joomla! - Prctico: http://www.sergioiglesias.net/blog/cursos/213-joomlaio-18-02-2013- hangout-desarrollo-plantillas-joomla-ii Taller de desarrollo de plantillas Joomla!Day 2011 Zaragoza: http://www.sergioiglesias.net/blog/cursos/175-taller-de-desarrollo-de- plantillas-joomla-en-video 60. FIN DEL TALLER Gracias por vuestra atencinGracias por vuestra atencin Tenis ms informacin en: www.sergioiglesias.net Y www.twitter.com/sergiois FIN DEL TALLERFIN DEL TALLER Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!