0
Joomla!Day 2013 - Albacete
Taller Desarrollo de Plantillas
* * *
Sergio Iglesias SánchezSergio Iglesias Sánchez
www.sergio...
ÍNDICE DEL CONTENIDO
● Introducción
● Tips Plantillas Joomla!
1.Snippets
2.Cargar jQuery
3.Cargar Bootstrap
4.Crear y usar...
INTRODUCCIÓN
INTRODUCCIÓNINTRODUCCIÓN
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: Desarro...
INTRODUCCIÓN
● #JoomlaIO:
● Desarrollo plantillas Joomla! - Teórico:
● http://www.sergioiglesias.net/blog/cursos/212-jooml...
INTRODUCCIÓN → ESTRUCTURA BÁSICA DE ARCHIVOS
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: ...
INTRODUCCIÓN → ESTRUCTURA BÁSICA DE ARCHIVOS
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: ...
INTRODUCCIÓN → TEMPLATEDETAILS.XML
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: Desarrollo...
INTRODUCCIÓN → TEMPLATEDETAILS.XML (datos)
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: De...
INTRODUCCIÓN → TEMPLATEDETAILS.XML (archivos)
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es ::...
INTRODUCCIÓN → TEMPLATEDETAILS.XML (idiomas)
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: ...
INTRODUCCIÓN → TEMPLATEDETAILS.XML (posiciones)
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es ...
INTRODUCCIÓN → TEMPLATEDETAILS.XML (parámetros)
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es ...
INTRODUCCIÓN → API JOOMLA! - JDOC
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: Desarrollo ...
INTRODUCCIÓN → API JOOMLA! - JDOC
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: Desarrollo ...
INTRODUCCIÓN → RECORDATORIO
● #JoomlaIO:
● Desarrollo plantillas Joomla! - Teórico:
● http://www.sergioiglesias.net/blog/c...
TIPS PLANTILLAS JOOMLA!
TIPS PLANTILLAS JOOMLATIPS PLANTILLAS JOOMLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter....
TIPS PLANTILLAS JOOMLA! → SNIPPETS
● Variables comunes:
● Ocultar Meta Generator:
Sergio Iglesias :: www.sergioiglesias.ne...
TIPS PLANTILLAS JOOMLA! → SNIPPETS
● Cargar hojas de estilo:
● Cargar javascript:
Sergio Iglesias :: www.sergioiglesias.ne...
TIPS PLANTILLAS JOOMLA! → SNIPPETS
● Página de inicio / Frontpage:
Sergio Iglesias :: www.sergioiglesias.net :: twitter.co...
TIPS PLANTILLAS JOOMLA! → CARGAR JQUERY
● Cargar jQuery:
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois...
TIPS PLANTILLAS JOOMLA! → CARGAR BOOTSTRAP
● Cargar Bootstrap:
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/se...
TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :...
TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :...
TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :...
TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :...
TIPS PLANTILLAS JOOMLA! → CREAR NUEVO TIPO DE ESTILO DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/se...
TIPS PLANTILLAS JOOMLA! → CREAR NUEVO TIPO DE ESTILO DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/se...
TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd1...
TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd1...
TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd1...
TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd1...
TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd1...
TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13e...
TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13e...
TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13e...
TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13e...
TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13e...
TIPS PLANTILLAS JOOMLA! → TEMPLATE OVERRIDES
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: ...
TIPS PLANTILLAS JOOMLA! → TEMPLATE OVERRIDES
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: ...
TIPS PLANTILLAS JOOMLA! → TEMPLATE OVERRIDES
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: ...
TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/serg...
TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/serg...
TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/serg...
HERRAMIENTAS DE AYUDA
HERRAMIENTAS DE AYUDAHERRAMIENTAS DE AYUDA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/...
HERRAMIENTAS DE AYUDA → EXTENSIONES PARA FIREFOX
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es...
HERRAMIENTAS DE AYUDA → RESPONSIVE WEB DESIGN
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es ::...
HERRAMIENTAS DE AYUDA → VELOCIDAD DE CARGA
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: De...
HERRAMIENTAS DE AYUDA → CHEATSEETS
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es :: Desarrollo...
HERRAMIENTAS DE AYUDA → DESARROLLO DE PLANTILLAS
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#jd13es...
FIN DEL TALLER
Gracias por vuestra atenciónGracias por vuestra atención
Tenéis más información en:
www.sergioiglesias.net ...
Upcoming SlideShare
Loading in...5
×

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

2,802

Published on

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.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,802
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
155
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. Í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!
  3. 3. INTRODUCCIÓN INTRODUCCIÓNINTRODUCCIÓN Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  4. 4. 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!
  5. 5. INTRODUCCIÓN → ESTRUCTURA BÁSICA DE ARCHIVOS Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  6. 6. 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.
  7. 7. 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
  8. 8. 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.
  9. 9. 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>
  10. 10. 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.
  11. 11. 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.
  12. 12. 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
  13. 13. 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.
  14. 14. 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.
  15. 15. 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!
  16. 16. TIPS PLANTILLAS JOOMLA! TIPS PLANTILLAS JOOMLATIPS PLANTILLAS JOOMLA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  17. 17. TIPS PLANTILLAS JOOMLA! → SNIPPETS ● Variables comunes: ● Ocultar Meta Generator: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01
  18. 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. 19. TIPS PLANTILLAS JOOMLA! → SNIPPETS ● Página de inicio / Frontpage: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 01
  20. 20. TIPS PLANTILLAS JOOMLA! → CARGAR JQUERY ● Cargar jQuery: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 02
  21. 21. TIPS PLANTILLAS JOOMLA! → CARGAR BOOTSTRAP ● Cargar Bootstrap: Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 03
  22. 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. 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. 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. 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. 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. 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. 28. TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  29. 29. TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  30. 30. TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  31. 31. TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 05
  32. 32. 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
  33. 33. 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
  34. 34. TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  35. 35. TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  36. 36. TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  37. 37. TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 07
  38. 38. TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! template.css 07
  39. 39. 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
  40. 40. TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08
  41. 41. TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08
  42. 42. TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 08
  43. 43. TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! error.php 08
  44. 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 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
  45. 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. 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. 47. TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10
  48. 48. TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10
  49. 49. 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
  50. 50. TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 10
  51. 51. TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 11
  52. 52. 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
  53. 53. TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla! 11
  54. 54. HERRAMIENTAS DE AYUDA HERRAMIENTAS DE AYUDAHERRAMIENTAS DE AYUDA Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois #jd13es :: Desarrollo Plantillas Joomla!
  55. 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. 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. 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. 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. 59. 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
  60. 60. 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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×