Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio Iglesias
Upcoming SlideShare
Loading in...5
×
 

Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio Iglesias

on

  • 1,930 views

Taller de desarrollo de plantillas para Joomla! 3.x impartido en el Joomla!Day 2013 España en la ciudad de Albacete. Snippets, minitutoriales (howto) y herramientas.

Taller de desarrollo de plantillas para Joomla! 3.x impartido en el Joomla!Day 2013 España en la ciudad de Albacete. Snippets, minitutoriales (howto) y herramientas.

Statistics

Views

Total Views
1,930
Views on SlideShare
1,915
Embed Views
15

Actions

Likes
1
Downloads
106
Comments
0

2 Embeds 15

https://twitter.com 9
http://sergiois.wordpress.com 6

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio Iglesias Joomla!Day 2013 España - Taller de Desarrollo de Plantillas Joomla! - Sergio Iglesias Presentation Transcript

  • Joomla!Day 2013 - Albacete Taller Desarrollo de Plantillas * * * Sergio Iglesias SánchezSergio Iglesias Sánchez www.sergioiglesias.net | twitter.com/sergiois Trabajo en: Complusoft ● www.complusot.es ● twitter.com/complusoft Pertenezco a: OSIberia ● www.osiberia.es ● twitter.com/osiberia
  • ÍNDICE DEL CONTENIDO ● Introducción ● Tips Plantillas Joomla! 1.Snippets 2.Cargar jQuery 3.Cargar Bootstrap 4.Crear y usar nuevo estilo de plantilla 5.Crear posición nueva 6.Crear nuevo tipo de estilo de módulo 7.Crear clase CSS del módulo 8.Error 404 como artículo 9.Template override 10.Crear presentación alternativa de componente 11.Crear presentación alternativa de módulo ● Herramientas de ayuda Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  • INTRODUCCIÓN INTRODUCCIÓNINTRODUCCIÓN Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  • INTRODUCCIÓN ● #JoomlaIO: ● Desarrollo plantillas Joomla! - Teórico: ● http://www.sergioiglesias.net/blog/cursos/212-joomlaio-28-01-2013- hangout-desarrollo-plantillas-joomla ● Desarrollo plantillas Joomla! - Práctico: ● 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!
  • INTRODUCCIÓN → ESTRUCTURA BÁSICA DE ARCHIVOS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  • INTRODUCCIÓN → ESTRUCTURA BÁSICA DE ARCHIVOS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● 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.
  • INTRODUCCIÓN → 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. ● 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.ini
  • INTRODUCCIÓN → TEMPLATEDETAILS.XML (datos) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● Datos específicos de la plantilla: nombre del template, fecha de creación, autor, copyright, email, página web, versión y descripción.
  • INTRODUCCIÓN → TEMPLATEDETAILS.XML (archivos) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● 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>
  • INTRODUCCIÓN → TEMPLATEDETAILS.XML (idiomas) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● Especificación de los idiomas utilizados en la plantilla.
  • INTRODUCCIÓN → TEMPLATEDETAILS.XML (posiciones) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● Qué y cuántas posiciones tendremos en la plantilla.
  • INTRODUCCIÓN → TEMPLATEDETAILS.XML (parámetros) Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● Parámetros/Campos de configuración: para ser manejados desde el back. Hace que una plantilla sea más versátil. ● Apartado ligado con el fichero params.ini ● http://docs.joomla.org/Standard_form_field_types
  • INTRODUCCIÓN → API JOOMLA! - JDOC Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● <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.
  • INTRODUCCIÓN → API JOOMLA! - JDOC Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● <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.
  • INTRODUCCIÓN → RECORDATORIO ● #JoomlaIO: ● Desarrollo plantillas Joomla! - Teórico: ● http://www.sergioiglesias.net/blog/cursos/212-joomlaio-28-01-2013- hangout-desarrollo-plantillas-joomla ● Desarrollo plantillas Joomla! - Práctico: ● 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!
  • TIPS PLANTILLAS JOOMLA! TIPS PLANTILLAS JOOMLATIPS PLANTILLAS JOOMLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  • TIPS PLANTILLAS JOOMLA! → SNIPPETS ● Variables comunes: ● Ocultar Meta Generator: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01
  • TIPS PLANTILLAS JOOMLA! → SNIPPETS ● Cargar hojas de estilo: ● Cargar javascript: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01
  • TIPS PLANTILLAS JOOMLA! → SNIPPETS ● Página de inicio / Frontpage: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01
  • TIPS PLANTILLAS JOOMLA! → CARGAR JQUERY ● Cargar jQuery: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 02
  • TIPS PLANTILLAS JOOMLA! → CARGAR BOOTSTRAP ● Cargar Bootstrap: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 03
  • TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04
  • TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04
  • TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04
  • TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04
  • TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04
  • TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 04
  • TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  • TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  • TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  • TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  • TIPS PLANTILLAS JOOMLA! → CREAR NUEVO TIPO DE ESTILO DE MÓDULO 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
  • TIPS PLANTILLAS JOOMLA! → CREAR NUEVO TIPO DE ESTILO DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! index.php modules.php 06
  • TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  • TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  • TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  • TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  • TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! template.css 07
  • TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● Crear artículo ● Crear ítem de menú con alias “error404” ● Crear fichero “error.php” en la carpeta del template 08
  • TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08
  • TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08
  • TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08
  • TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! error.php 08
  • 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 módulo al que queramos aplicar esta técnica ● Copiar el contenido de sus carpetas “tmpl” (views/-/tmpl) ● Realizar las modificaciones en estos ficheros 09
  • 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
  • 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
  • TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10
  • TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10
  • TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN 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
  • TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10
  • TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 11
  • TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO 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
  • TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 11
  • HERRAMIENTAS DE AYUDA HERRAMIENTAS DE AYUDAHERRAMIENTAS DE AYUDA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  • 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
  • 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
  • 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/
  • 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
  • HERRAMIENTAS DE AYUDA → DESARROLLO DE PLANTILLAS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! ● #JoomlaIO: ● Desarrollo plantillas Joomla! - Teórico: ● http://www.sergioiglesias.net/blog/cursos/212-joomlaio-28-01-2013- hangout-desarrollo-plantillas-joomla ● Desarrollo plantillas Joomla! - Práctico: ● 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
  • FIN DEL TALLER Gracias por vuestra atenciónGracias por vuestra atención Tenéis más información 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!