Sergio Iglesias Snchez

9 y 10 / Noviembre / 2011 /

Plantillas Joomla!
Desarrollo de plantillas Joomla! 1.5 y 1.7

9 y 10 / Noviembre / 2011 /

Desarrollo de Plantillas Joomla! 1.5

- XHTML + CSS + PHP - Qu es una plantilla - Frameworks de desarrollo - Estructura bsica de archivos - templateDetails.xml - API Joomla! - Templates Overrides - Ejemplo plantilla

- Novedades y diferencias en Joomla! 1.7 - Curiosidades

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

index.php + template.css + params.ini

xHTML + CSS + PHP

XHTML

Define la estructura de la informacin. Extensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto). El lenguaje HTML no cumple al 100% las reglas del estndar XML. Para poder aprovechar las ventajas del XML, se hizo necesaria una evolucin. del HTML hacia el xHTML, que no es ms que una redefinicin del lenguaje haciendo ms estrictas algunas de sus formulaciones bsicas (para que sea totalmente compatible con XML). Entre las reglas que forman parte del xHTML, pero no del HTML, podemos citar la obligacin de cerrar todas las etiquetas y el uso exclusivo de minsculas para las palabras del lenguaje (etiquetas). Es un estndar el W3C.
Plantillas Joomla! Curso Nombre del Curso. Ciudad.

xHTML + CSS + PHP

CSS

Define el diseo. Cascading Style Sheets (hojas de estilo en cascada). Tres formas de aplicar: CSS externa recomendada. CSS interna. CSS en lnea. Ventajas: Separa el diseo del contenido. Mejora el mantenimiento. HTML ms claro de entender (e indexable). Distinto diseo para dispositivo: impresora, PDA... Es un estndar el W3C.

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

xHTML + CSS + PHP

PHP

Lenguaje de programacin del lado de servidor. Pre-procesador Hipertexto (lenguaje de programacin interpretado). Acceso a base de datos (MySQL). Ventajas: Desarrollo de pginas web dinmicas. Lenguaje multiplataforma. Cuidado con versiones PHP 5 y PHP 6. Aplicaciones creadas con PHP: Joomla! SugarCRM FaceBook Tuenti

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Qu es una plantilla

Es la base de la aplicacin de entrega de contenidos. Formada por diferentes archivos que controlan la estructura y el diseo de la pgina y de sus contenidos. Ventajas: Proporciona una sepracin entre la estructura (forma), contenido y estilo. HTML/xHTML/HTML5 estructura DB contenido CSS estilo

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Frameworks de desarrollo

Qu es

Estructura de software compuesta de componentes personalizables e intercambiables para el desarrollo de una aplicacin. Ventajas: Acelerar proceso de desarrollo. Reutilizar cdigo ya existente. Promover buenas prcticas 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/blog/template-news/introducing-zen-grid-framework-2

T3: http://wiki.joomlart.com/wiki/JA_Template_Framework/Overview YJSG: http://yjsimplegrid.com/

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Estructura bsica de archivos

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Estructura bsica de archivos

index.html: aade seguridad a las carpetas. Es un archivo 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 a la plantilla). params.ini: guarda los parmetros personalizables desde el administrador. template_thumbnail.png: imagen en miniatura de la plantilla. template_preview.png: slo para Joomla! 1.7 css: carpeta con archivos CSS (hojas de estilo). template.css: archivo principal con el cdigo de estilo de la plantilla. images: carpeta con las imgenes utilizadas en la plantilla. html: contiene vistas personalizadas para distintos componentes y mdulos (tcnica template overrides). templateDetails.xml: contiene informacin necesaria para la correcta instalacin de la plantilla. Define los parmetros personalizables.
Plantillas Joomla! Curso Nombre del Curso. Ciudad.

templateDetails.xml

Imprescindible para que la plantilla sea reconocida por el administrador. 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. Parmetros. Los datos de los parmetros podrn ser utilizados desde el back para cambiar la visualizacin.

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

templateDetails.xml

Datos especficos de la plantilla: versin, autor, email, pgina web, ao, licencia y descripcin.

Cambios en Joomla! 1.7

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

templateDetails.xml

Especificacin de los archivos utilizados en el diseo.

Para incluir una carpeta entera utilizar:

<folder>nombre_carpeta</folder>

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

templateDetails.xml

Qu y cuntas posiciones tendremos en nuestro sitio (para mostrar contenido en la plantilla.

Curso Nombre del Curso. Ciudad.

templateDetails.xml

Parmetros: para ser manejados desde el back. Hace que una plantilla sea ms verstil.

Este apartado est ntimamente ligado al archivo params.ini Cambios en Joomla! 1.7

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

templateDetails.xml

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

API Joomla! Directivas 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 y cualquier otro archivo. $mainframegetCfg('sitename') Obtenemos el nombre del sitio. <jdoc:include type=modules name=posicion style=estilo/> Indica la carga de un mdulo en particular y de una manera especfica (parmetros name y style). 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).
Plantillas Joomla! Curso Nombre del Curso. Ciudad.

API Joomla! Directivas JDoc

<jdoc:include type=component/> Cargamos contenido principal del sitio: artculos, secciones, categoras, componentes... 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 (es-ES, enGB...).

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Templates Overrides

Tcnica para redefinir la presentacin por pantalla de un componente o mdulo de Joomla! Clonacin de la vista de la extensin. Se incluye a partir de la versin 1.5. Ventajas: Personalizar el portal sin preocuparse de actualizaciones de extensiones. Validacin de estndares propuestos por el W3C. Conseguir un nivel adecuado de accesibilidad (algunas extensiones, inclusos las propias, no cumplen accesibilidad).

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Templates Overrides

USO

Crear una carpeta llamada html dentro de nuestra plantilla templates/plantilla/html/ Dentro de esta carpeta meter las carpetas de los componentes y/o mdulos que queramos redefinir o clonar. Copiar el contenido de la carpeta tmpl (vistas) y realizar en ellos las modificaciones/adaptaciones necesarias. Joomla!, al generar la pgina web, mira si hay en la plantilla una redefinicin o clon. Si la encuentra, la utiliza.

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla index.php

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla index.php

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla index.php

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla template.css

Insertar estilos para la maquetacin de la plantilla. Conocer clases que Joomla! carga por defecto:

componentheading: muestra ttulo del componente. contentheading: muestra ttulo de los artculos. buttonheading: muestra iconos PDF, imptimir y enviar amigo. small: utilizado en varios elementos (como autor de artculo). createdate: muestra fecha creacin artculo. readon: utilizada por el link de leer ms.... article_separator: utilizada por etiqueta <span> que separa artculos entre s. moduletable(+ sufijo): carga los div (y sufijo que se da desde back). h3: ttulos de los mdulos que se cargan con esta etiqueta. active: para item del men activo. item: cada elemento del men (+ su ID). parent: cuando hay sub-items (para elemento padre).

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla template.css

Otras clases:

button: asociada a elementos tipo botn. inputbox: asociada a elementos text-input. pagenav: asociada a paginacin de artculos. moditydate: asociada a fecha de modificacin de artculos. sectiontableentre1/sectiointableentry2: asociada a datos en tablas.

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla template.css

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla template.css

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla template.css

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla template.css

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla template.css

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla params.ini

ntimamente ligada a templateDetails.xml Sus parmetros se ponen en este fichero Declaracin: nombre_del_parametro_1=valor_1 nombre_del_parametro_2=valor_2 nombre_del_parametro_3=valor_3 Llamada desde PHP: <?php echo $this->params->get('nombre_del_parametro'); ?> Aadir estilos asociados en template.css

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Ejemplo plantilla params.ini

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Novedades y diferencias en Joomla! 1.7

Algunas novedades

Salida de contenido sin tablas: todos los archivos de salida estn escritos en XHTML 1.0 Strict. Template styles (estilos de plantilla): creacin de variaciones en la plantilla para una o varias pginas que pueden ser asignadas de forma especfica.

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Novedades y diferencias en Joomla! 1.7

templateDetails.xml

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Novedades y diferencias en Joomla! 1.7

templateDetails.xml (en Joomla! 1.5)

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Novedades y diferencias en Joomla! 1.7

templateDetails.xml (en Joomla! 1.7)

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Novedades y diferencias en Joomla! 1.7

index.php

En Joomla! 1.5 definamos la variable mainframe as: global $mainframe; En Joomla! 1.6 y 1.7: $mainframe = JFactory::getApplication();

Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Curiosidades

Algunas curiosidades y pequeos tips

Posible rediseo de joomla.org
https://plus.google.com/photos/108983221798389280265/albums/5643812923156404913 https://plus.google.com/photos/108983221798389280265/albums/5625370216902790289 http://www.sergioiglesias.net/blog/joomla/119-plantillas-gratis-para-adminitrador-de-joomla-15-y-16 http://www.sergioiglesias.net/blog/joomla/90-visualizacion-de-posiciones-en-plantillas-16-con-tp1 http://www.sergioiglesias.net/blog/joomla/89-anadir-etiquetas-accesskey-en-joomla-16

Posible rediseo del administrador

Plantillas para administrador: no solo hay plantillas para la parte front Mostrar posiciones en plantilla

Aadir teclas de acceso rpido: accesskey

Ordenar mdulos y artculos Definicin propia de mdulos en template <jdoc:include type="modules" name="blog" style="blog" /> Ver html/modules.php
Plantillas Joomla! Curso Nombre del Curso. Ciudad.

Publicidad

Libro Joomla! 1.6 Gua de referencia en espaol

Gua de referencia en espaol Minitutoriales
Introduccin Novedades en Joomla! 1.6 Enlaces de inters Joomla! Acceso al panel de control Sitio Usuarios Mens Contenido Componentes Extensiones Ayuda

Instalar XAMPP Instalar Joomla! 1.6 Gestionar permisos Crear un artculo Crear un contacto Integrar noticias Aadir un mdulo submen Habilitar la vista de mdulos Aadir accesskey Integrar DNI electrnico Enlaces de inters

www.librojoomla16.com

Plantillas Joomla! Curso. Ciudad. Curso Nombre del

Publicidad

Sergio Iglesias

www.sergioiglesias.net twitter.com/sergiois

Plantillas Joomla! Curso. Ciudad. Curso Nombre del

Fin del taller

Gracias por vuestra atencin

Plantillas Joomla! Curso. Ciudad. Curso Nombre del