Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias

Sergio Iglesias Sánchez

9 y 10 / Noviembre /

2011 /

Plantillas Joomla!

Desarrollo de plantillasJoomla! 1.5 y 1.7

9 y 10 / Noviembre /

2011 /

Curso “Nombre del Curso”. Ciudad.

Desarrollo de Plantillas Joomla! 1.5

Plantillas Joomla!

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

· index.php + template.css + params.ini- Novedades y diferencias en Joomla! 1.7- Curiosidades


xHTML + CSS + PHP

Plantillas Joomla!

XHTMLXHTML Define la estructura de la información. Extensible Hypertext Markup Language (lenguaje extensible de

marcado de hipertexto). El lenguaje HTML no cumple al 100% las reglas del estándar XML. Para

poder aprovechar las ventajas del XML, se hizo necesaria una evolución. del HTML hacia el xHTML, que no es más que una redefinición del lenguaje haciendo más estrictas algunas de sus formulaciones básicas (para que sea totalmente compatible con XML). Entre las reglas que forman parte del xHTML, pero no del HTML,

podemos citar la obligación de cerrar todas las etiquetas y el uso exclusivo de minúsculas para las palabras del lenguaje (etiquetas). Es un estándar el W3C.


xHTML + CSS + PHP

Plantillas Joomla!

CSSCSS Define el diseño. Cascading Style Sheets (hojas de estilo en cascada). Tres formas de aplicar:

CSS externa → recomendada.CSS interna.CSS en línea.

Ventajas:Separa el diseño del contenido.Mejora el mantenimiento.HTML más claro de entender (e indexable).Distinto diseño para dispositivo: impresora, PDA...

Es un estándar el W3C.


xHTML + CSS + PHP

Plantillas Joomla!

PHPPHP Lenguaje de programación del lado de servidor. Pre-procesador Hipertexto

(lenguaje de programación interpretado). Acceso a base de datos (MySQL). Ventajas:

Desarrollo de páginas web dinámicas.Lenguaje multiplataforma.

Cuidado con versiones PHP 5 y PHP 6. Aplicaciones creadas con PHP:

Joomla!SugarCRMFaceBookTuenti


Qué es una plantilla

Plantillas Joomla!

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 sepración entre la estructura (forma), contenido y estilo.

HTML/xHTML/HTML5 → estructuraDB → contenidoCSS → estilo


Frameworks de desarrollo

Plantillas Joomla!

Qué esQué es Estructura de software compuesta de componentes personalizables e

intercambiables para el desarrollo de una aplicación. Ventajas:

Acelerar 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/blog/template-news/introducing-zen-grid-framework-2

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

YJSG: http://yjsimplegrid.com/

http://www.gantry-framework.org/

http://www.yootheme.com/warp/

http://www.joomlabamboo.com/blog/template-news/introducing-zen-grid-framework-2

http://wiki.joomlart.com/wiki/JA_Template_Framework/Overview

http://yjsimplegrid.com/


Estructura básica de archivos

Plantillas Joomla!


Estructura básica de archivos

Plantillas Joomla!

index.html: añade seguridad a las carpetas. Es un archivo 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 a la plantilla). params.ini: guarda los parámetros personalizables desde el

administrador. template_thumbnail.png: imagen en miniatura de la plantilla. template_preview.png: sólo para Joomla! 1.7 css: carpeta con archivos CSS (hojas de estilo). template.css: archivo principal con el código de estilo de la plantilla. images: carpeta con las imágenes utilizadas en la plantilla. html: contiene vistas personalizadas para distintos componentes y

módulos (técnica template overrides). templateDetails.xml: contiene información necesaria para la correcta

instalación de la plantilla. Define los parámetros personalizables.


templateDetails.xml

Plantillas Joomla!

Imprescindible para que la plantilla sea reconocida por el administrador.

Se utiliza como instalador de la plantillaTodo 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.


templateDetails.xml

• Datos específicos de la plantilla: versión, autor, email, página web, año, licencia y descripción.

• Cambios en Joomla! 1.7

Plantillas Joomla!


templateDetails.xml

• Especificación de los archivos utilizados en el diseño.

• Para incluir una carpeta entera utilizar:

<folder>nombre_carpeta</folder>

Plantillas Joomla!


templateDetails.xml

• Qué y cuántas posiciones tendremos en nuestro sitio (para mostrar contenido en la plantilla.


templateDetails.xml

• Parámetros: para ser manejados desde el back. Hace que una plantilla sea más versátil.

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

Plantillas Joomla!


templateDetails.xml

Plantillas Joomla!


API Joomla! – Directivas JDoc

Plantillas Joomla!

<jdoc:include type=”head”/>Va dentro de la cabecera HTML (head).Muestra el title, metatags, feed y js (MooTools).

$this->templateObtenemos el nombre de la carpeta que contiene nuestra plantilla.Uso: para cargar css, favicon y cualquier otro archivo.

$mainframe→getCfg('sitename')Obtenemos el nombre del sitio.

<jdoc:include type=”modules” name=”posicion” style=”estilo”/>Indica la carga de un módulo en particular y de una manera específica (parámetros name y style).

name: posiciones cargadas en el fichero templateDetails.xmlstyle: table (tabla vertical = columna), horz (tabla horizontal = fila), xhtml (divs), rounde (divs anidados), raw (sin contenedor).


API Joomla! – Directivas JDoc

Plantillas Joomla!

<jdoc:include type=”component”/>Cargamos contenido principal del sitio: artículos, secciones, categorías, componentes...

if($this->countModules('nombre_posicion')){}Condicional para saber si hay algún módulo en una posición determinada.

$this->baseurlContiene la dirección base de nuestro sitio

$this->languageContiene el idioma en el que se encuentra nuestro sitio (es-ES, en-GB...).


Templates Overrides

Plantillas Joomla!

Técnica para redefinir la presentación por pantalla de un componente o módulo de Joomla!

“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 actualizaciones de extensiones.Validación de estándares propuestos por el W3C.Conseguir un nivel adecuado de accesibilidad (algunas extensiones, inclusos las propias, no cumplen accesibilidad).


Templates Overrides

Plantillas Joomla!

USOUSO Crear una carpeta llamada html dentro de nuestra plantilla

templates/plantilla/html/ Dentro de esta carpeta meter las carpetas de los componentes y/o

módulos 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 página web, mira si hay en la plantilla una

redefinición o “clon”. Si la encuentra, la utiliza.


Ejemplo plantilla – index.php

Plantillas Joomla!



Plantillas Joomla!



Plantillas Joomla!


Ejemplo plantilla – template.css

Plantillas Joomla!

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

componentheading: muestra título del componente.contentheading: muestra título de los artículos.buttonheading: muestra iconos PDF, imptimir y enviar amigo.small: utilizado en varios elementos (como autor de artículo).createdate: muestra fecha creación artículo.readon: utilizada por el link de “leer más...”.article_separator: utilizada por etiqueta <span> que separa artículos entre sí.moduletable(+ sufijo): carga los div (y sufijo que se da desde back).h3: títulos de los módulos 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!

Otras clases:button: asociada a elementos tipo botón.inputbox: asociada a elementos text-input.pagenav: asociada a paginación de artículos.moditydate: asociada a fecha de modificación de artículos.sectiontableentre1/sectiointableentry2: asociada a datos en tablas.



Plantillas Joomla!



Plantillas Joomla!



Plantillas Joomla!



Plantillas Joomla!



Plantillas Joomla!


Ejemplo plantilla – params.ini

Plantillas Joomla!

Íntimamente ligada a templateDetails.xmlSus parámetros se ponen en este fichero

Declaración:nombre_del_parametro_1=valor_1nombre_del_parametro_2=valor_2nombre_del_parametro_3=valor_3

Llamada desde PHP:<?php echo $this->params->get('nombre_del_parametro'); ?>

Añadir estilos asociados en template.css


Ejemplo plantilla – params.ini

Plantillas Joomla!


Novedades y diferencias en Joomla! 1.7

Plantillas Joomla!

Algunas novedadesAlgunas novedades Salida de contenido sin tablas: todos los archivos de salida están

escritos en XHTML 1.0 Strict. Template styles (estilos de plantilla): creación de variaciones en la

plantilla para una o varias páginas que pueden ser asignadas de forma específica.



Plantillas Joomla!

templateDetails.xmltemplateDetails.xml



Plantillas Joomla!

templateDetails.xml (en Joomla! 1.5)templateDetails.xml (en Joomla! 1.5)



Plantillas Joomla!

templateDetails.xml (en Joomla! 1.7)templateDetails.xml (en Joomla! 1.7)



Plantillas Joomla!

index.phpindex.php En Joomla! 1.5 definíamos la variable mainframe así:

global $mainframe;

En Joomla! 1.6 y 1.7:$mainframe = JFactory::getApplication();


Curiosidades

Plantillas Joomla!

Algunas curiosidades y pequeños tipsAlgunas curiosidades y pequeños tips Posible rediseño de joomla.org

https://plus.google.com/photos/108983221798389280265/albums/5643812923156404913

Posible rediseño del administradorhttps://plus.google.com/photos/108983221798389280265/albums/5625370216902790289

Plantillas para administrador: no solo hay plantillas para la parte fronthttp://www.sergioiglesias.net/blog/joomla/119-plantillas-gratis-para-adminitrador-de-joomla-15-y-16

Mostrar posiciones en plantillahttp://www.sergioiglesias.net/blog/joomla/90-visualizacion-de-posiciones-en-plantillas-16-con-tp1

Añadir teclas de acceso rápido: accesskeyhttp://www.sergioiglesias.net/blog/joomla/89-anadir-etiquetas-accesskey-en-joomla-16

Ordenar módulos y artículos Definición propia de módulos en template

<jdoc:include type="modules" name="blog" style="blog" />Ver html/modules.php



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


Publicidad

Plantillas Joomla!

Libro Joomla! 1.6 – Guía de referencia en españolLibro Joomla! 1.6 – Guía de referencia en español Guía de referencia en español Minitutoriales

Introducción Novedades en Joomla! 1.6 Enlaces de interés Joomla! Acceso al panel de control Sitio Usuarios Menús Contenido Componentes Extensiones Ayuda

Instalar XAMPP Instalar Joomla! 1.6 Gestionar permisos Crear un artículo Crear un contacto Integrar noticias Añadir un módulo submenú Habilitar la vista de módulos Añadir accesskey Integrar DNI electrónico Enlaces de interés

www.librojoomla16.comwww.librojoomla16.com

http://www.librojoomla16.com/


Publicidad

Plantillas Joomla!

Sergio IglesiasSergio Iglesias www.sergioiglesias.net twitter.com/sergiois


Fin del taller

Plantillas Joomla!

Gracias por vuestra atenciónGracias por vuestra atención

Business

Joomla!Day 2011 España - Taller desarrollo de plantillas Joomla! - Sergio Iglesias