#JoomlaIO - Desarrollo de Plantillas para Joomla!

#JoomlaIO
Desarrollo de Plantillas
(1.5, 1.6, 1.7, 2.5, 3.0)

#JoomlaIO
Desarrollo 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

Í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 ayuda
Sergio Iglesias :: www.sergioiglesias.net :: twitter.com/sergiois
#JoomlaIO :: Desarrollo Plantillas Joomla!

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 → estilo


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.

TEMPLATEDETAILS.XML

TEMPLATEDETAILS.XML


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.ini


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.


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>


TEMPLATEDETAILS.XML → POSICIONES

● Qué y cuántas posiciones tendremos en la plantilla.


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 cambios


TEMPLATEDETAILS.XML


API JOOMLA!

API JOOMLA! - JDOC


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.


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.


TEMPLATE OVERRIDES

TEMPLATE OVERRIDES


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.


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.


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.



● 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.



● Í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)


DIFERENCIAS ENTRE VERSIONES

DIFERENCIAS ENTRE VERSIONES


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.


DIFERENCIA ENTRE VERSIONES → TEMPLATEDETAILS.XML

● A partir de Joomla! 1.7:



● Parámetros en Joomla! 1.5:



● Campos de configuración a partir de Joomla! 1.7:


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ú)


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');


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/


HERRAMIENTAS DE AYUDA

HERRAMIENTAS 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/
● HTML Validator:
https://addons.mozilla.org/es/firefox/addon/html-validator/
● ScreenQueries: http://screenqueri.es/
● Resizer: http://lab.maltewassermann.com/viewport-resizer/


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
●
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-cheatsheet


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ÓN


#JoomlaIO - Desarrollo de Plantillas para Joomla!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to #JoomlaIO - Desarrollo de Plantillas para Joomla!

Similar to #JoomlaIO - Desarrollo de Plantillas para Joomla! (20)

More from SergioIglesiasNET

More from SergioIglesiasNET (6)

Recently uploaded

Recently uploaded (20)

#JoomlaIO - Desarrollo de Plantillas para Joomla!