Joomla! Taller Plantillas

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

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:
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

INTRODUCCIÓN → ESTRUCTURA BÁSICA DE ARCHIVOS

INTRODUCCIÓN → 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.

INTRODUCCIÓN → 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 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)
● 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)
● 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)
● Especificación de los idiomas utilizados en la plantilla.

INTRODUCCIÓN → TEMPLATEDETAILS.XML (posiciones)
● Qué y cuántas posiciones tendremos en la plantilla.

INTRODUCCIÓN → TEMPLATEDETAILS.XML (parámetros)
● 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
● <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
● <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:

TIPS PLANTILLAS JOOMLA!
TIPS PLANTILLAS JOOMLATIPS PLANTILLAS JOOMLA

TIPS PLANTILLAS JOOMLA! → SNIPPETS
● Variables comunes:
● Ocultar Meta Generator:
01

● Cargar hojas de estilo:
● Cargar javascript:
01

● Página de inicio / Frontpage:
01

TIPS PLANTILLAS JOOMLA! → CARGAR JQUERY
● Cargar jQuery:
02

TIPS PLANTILLAS JOOMLA! → CARGAR BOOTSTRAP
● Cargar Bootstrap:
03

TIPS PLANTILLAS JOOMLA! → CREAR Y USAR NUEVO ESTILO DE PLANTILLA
04

TIPS PLANTILLAS JOOMLA! → CREAR POSICIÓN NUEVA
05

TIPS PLANTILLAS JOOMLA! → CREAR NUEVO TIPO DE ESTILO DE MÓDULO
● Crear carpeta “html” en la carpeta del template
● Crear fichero “modules.php”
06

TIPS PLANTILLAS JOOMLA! → CREAR NUEVO TIPO DE ESTILO DE MÓDULO
index.php
modules.php
06

TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO
07

TIPS PLANTILLAS JOOMLA! → CREAR CLASE CSS DE MÓDULO
template.css
07

TIPS PLANTILLAS JOOMLA! → ERROR 404 COMO ARTÍCULO
● Crear artículo
● Crear ítem de menú con alias “error404”
● Crear fichero “error.php” en la carpeta del template
08

08

error.php
08

TIPS PLANTILLAS JOOMLA! → TEMPLATE OVERRIDES
● 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

components/com_content/views/
templates/nuestro_template/html/com_content/
09

modules/mod_login/
templates/nuestro_template/html/mod_login/
09

TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE
10

TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE COMPONENTE
● 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 MÓDULO
11

TIPS PLANTILLAS JOOMLA! → PRESENTACIÓN ALTERNATIVA DE MÓDULO
● 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

HERRAMIENTAS DE AYUDA
HERRAMIENTAS DE AYUDAHERRAMIENTAS DE AYUDA

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-switcher

HERRAMIENTAS DE AYUDA → RESPONSIVE WEB DESIGN
● 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
● 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
● Para plantillas Joomla! 1.5:
http://www.younic.de/wp-content/uploads/Joomla15_Basic_Template_Cheatsheet.pdf
http://www.avadesigner.com/dl/cheat-sheet/Joomla-Sheet-Cheat-Templates-2.5.pdf
www.joomlack.fr/en/joomla-documentations-tutorials/joomla-3-x-templates-cheatsheet

HERRAMIENTAS DE AYUDA → DESARROLLO DE PLANTILLAS
● #JoomlaIO:

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

Joomla! Taller Plantillas

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Joomla! Taller Plantillas

Ähnlich wie Joomla! Taller Plantillas (20)

Joomla! Taller Plantillas