desarrollo_plantillas_joomla

Comunidad JoomlaBiblioteca Comunidad Joomla

Desarrollo de plantillas para Joomla!

Autor:Leandro DOnofrio

Correcciones:Rafael Gmez

Gustavo Ral Aragn

Bajo licencia Creative Commons

Agosto 2011

ndice general

1. Introduccin a las plantillas en Joomla! 21.1. Bienvenido/a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.2. Obtener el material de aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.3. Requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.4. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.5. Las plantillas en Joomla! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.5.1. Tipos de plantillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.5.2. Encontrar las plantillas disponibles en la administracin del CMS . . . . . . . . 61.5.3. Estructura bsica de una plantilla . . . . . . . . . . . . . . . . . . . . . . . . . 7

2. Desarrollo de plantillas para Joomla! 112.1. Creacin de los archivos de la plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.1. Anlisis previo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.1.2. Utilizar la plantilla atomic como base . . . . . . . . . . . . . . . . . . . . . . . 12

2.2. El archivo templateDetails.xml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162.2.1. Seccin 1: Informacin asociada . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.2.2. Seccin 2: Carpetas y archivos . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.2.3. Seccin 3: Posiciones de mdulos . . . . . . . . . . . . . . . . . . . . . . . . . . 182.2.4. Seccin 4: Denicin de lenguajes . . . . . . . . . . . . . . . . . . . . . . . . . . 192.2.5. Descubrir la plantilla en la administracin de CMS . . . . . . . . . . . . . . . . 20

2.3. El archivo index.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.3.1. Seccin 1: Sesin y contexto del CMS . . . . . . . . . . . . . . . . . . . . . . . 242.3.2. Seccin 2: Framework JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . 242.3.3. Seccin 3: Referencia a JApplication . . . . . . . . . . . . . . . . . . . . . . . . 252.3.4. Seccin 4: Tipo de documento, codicacin y estilo de escritura . . . . . . . . . 252.3.5. Seccin 5: Cabecera del documento . . . . . . . . . . . . . . . . . . . . . . . . . 252.3.6. Seccin 6: Archivos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

1

2.3.7. Seccin 7: Archivos CSS para otras direcciones de escritura . . . . . . . . . . . 262.3.8. Seccin 8: Funcionalidades JavaScript . . . . . . . . . . . . . . . . . . . . . . . 272.3.9. Seccin 9: Nombre del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.3.10. Seccin 10: Llamado a distintos mdulos . . . . . . . . . . . . . . . . . . . . . . 272.3.11. Seccin 11: Mensajes del sistema . . . . . . . . . . . . . . . . . . . . . . . . . . 292.3.12. Seccin 12: Contenido de los componentes . . . . . . . . . . . . . . . . . . . . . 292.3.13. Seccin 13: Ao presente y nombre del sitio . . . . . . . . . . . . . . . . . . . . 29

2.4. El sistema de grillas de BluePrint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.5. Maquetacin del diseo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

2.5.1. Modicaciones dentro de la etiqueta head . . . . . . . . . . . . . . . . . . . . . 322.5.2. Maquetacin de la seccin superior . . . . . . . . . . . . . . . . . . . . . . . . . 322.5.3. Maquetacin del texto superior, video y caja destacada . . . . . . . . . . . . . 332.5.4. Maquetacin de las columnas del medio . . . . . . . . . . . . . . . . . . . . . . 352.5.5. Maquetacin del texto destacado inferior y slideshow . . . . . . . . . . . . . . . 382.5.6. Maquetacin del footer y zona inferior . . . . . . . . . . . . . . . . . . . . . . . 39

2.6. El archivo template.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422.6.1. Estilos generales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432.6.2. Estilos para la seccin superior . . . . . . . . . . . . . . . . . . . . . . . . . . . 442.6.3. Estilos para el destacado superior, video y caja media . . . . . . . . . . . . . . 462.6.4. Estilos para las columnas centrales . . . . . . . . . . . . . . . . . . . . . . . . . 502.6.5. Estilos para el texto destacado inferior y slideshow . . . . . . . . . . . . . . . . 522.6.6. Estilos para el footer y zona inferior . . . . . . . . . . . . . . . . . . . . . . . . 532.6.7. Estilos para elementos y mensajes del sistema . . . . . . . . . . . . . . . . . . . 552.6.8. Estilos completos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

2.7. Finalizando la plantilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

3. Temas avanzados 673.1. Estilos de plantillas, parmetros de conguracin y maquetaciones diferentes por secciones 67

3.1.1. Cambiar la imagen del logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683.1.2. Cambiar el texto del eslogan . . . . . . . . . . . . . . . . . . . . . . . . . . . . 723.1.3. Aplicar una maquetacin diferente . . . . . . . . . . . . . . . . . . . . . . . . . 73

3.2. Personalizacin de mdulos y componentes . . . . . . . . . . . . . . . . . . . . . . . . 793.2.1. Extensiones desarrolladas en MVC . . . . . . . . . . . . . . . . . . . . . . . . . 793.2.2. Mdulos personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

3.3. Componentes personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

2

3.3.1. Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 943.4. Incorporacin de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

3.4.1. Creacin de un slideshow con jQuery . . . . . . . . . . . . . . . . . . . . . . . . 973.5. Personalizacin de las pginas de errores . . . . . . . . . . . . . . . . . . . . . . . . . . 99

3.5.1. Seccin 1: Parmetros de la plantilla . . . . . . . . . . . . . . . . . . . . . . . . 1053.5.2. Seccin 2: Tipo de documento, ttulo y archivos CSS . . . . . . . . . . . . . . . 1053.5.3. Seccin 3: Logotipo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063.5.4. Seccin 4: Mensajes de error . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1073.5.5. Seccin 5: Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

4. Apndice 1114.1. Evitar que Mootools cargue de forma predeterminada . . . . . . . . . . . . . . . . . . 1114.2. Estilos determinados para diferentes navegadores . . . . . . . . . . . . . . . . . . . . . 1114.3. Detectar la pgina principal del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1124.4. Detectar si un usuario est logueado en el sitio . . . . . . . . . . . . . . . . . . . . . . 1124.5. Detectar un componente determinado . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

3

Captulo 1

Introduccin a las plantillas enJoomla!

1.1. Bienvenido/aEn el momento de construir un sitio web utilizando Joomla!, la creacin de plantillas (o templates)suele ser uno de los trabajos ms comunes que emprenden diseadores y desarrolladores web.Este manual pretende ser un documento fundamental para que, tanto usuarios noveles como avanzados,aprendan a realizar una plantilla funcional para Joomla! 1.6 y versiones posteriores.Al nalizar el documento, deber ser capaz de:

Entender la estructura bsica de una plantilla;Conocer los archivos que la componen y su funcionalidad;Poder agregar nuevas caractersticas y estilos personalizados;Conocer cmo modicar correctamente plantillas ya creadas;Saber crear plantillas desde cero.

1.2. Obtener el material de aprendizajeEl material de aprendizaje y el cdigo fuente de los ejemplos que se utilizan en el libro estn hospedadosen un repositorio de Github. Desde all es posible descargar un archivo .zip o .tar con todo al material.Tambin esta invitado a seguir mejorando el material, ya sea reportando errores o aadiendo nuevosmateriales.

1.3. RequisitosPara comenzar es necesario contar con los siguientes conocimientos mnimos:

4

HTML/XHTML:

Conocer la estructura bsica de un documento HTML/XHTML; Saber reconocer las etiquetas bsicas.

CSS:

Reconocer la manera de incorporar estilos dentro de un documento; Saber crear estilos bsicos en archivos .css; Entender el funcionamiento de maquetaciones simples con elementos otantes.

JavaScript:

Reconocer la manera de incorporar cdigo JavaScript en un documento.

PHP:

Reconocer las etiquetas de apertura y cierre de cdigo PHP; Entender las funciones bsicas de ujos de control (if, if else, else).

Joomla!:

Conocimientos bsicos del CMS: administracin de contenidos, instalacin de extensiones,manejo de componentes y mdulos.

1.4. SoftwarePara trabajar con los contenidos de la gua, son necesarias las siguientes herramientas:

El navegador web Firefox y la extensin Firebug.Un editor de textos planos o un IDE (Entorno de Desarrollo Integrado):

Notepad++ - Windows; Gedit/Kate - Linux; TextMate - Mac OS X; Aptana - todas las plataformas; Netbeans PHP - todas las plataformas.

Un servidor local (XAMPP / MAMP) o un cliente FTP/SSH/SFTP para acceder a un servidorremoto (Filezilla / WinSCP / Putty);Joomla! 1.6 o posterior instalado en el servidor local o remoto.

5

1.5. Las plantillas en Joomla!Antes de comenzar, puede que se pregunte qu es una plantilla y para qu sirve?. Las plantillas sonarchivos que permiten controlar el diseo y la disposicin de los elementos a lo largo de un sitio. Lasmismas incluyen:

El marcado HTML y la maquetacin base del sitio;Los espacios donde se mostrarn los contenidos (artculos, mdulos, componentes);El diseo (a travs de estilos en cascada e imgenes);Y funcionalidades especicadas que dependern de cada plantilla.

En particular, Joomla posee un excelente sistema de plantillas que permite adaptar cualquier sitioa los requerimientos deseados. Adems, a medida que el CMS (Sistema de gestin de contenidos)evoluciona, el mismo va incorporando nuevas caractersticas que permiten mejorar la experiencia almomento de crear una plantilla.A partir de la versin 1.6, el CMS incorpora varias caractersticas nuevas relacionadas al desarrollode plantillas:

Tres nuevos templates listos para utilizar y adaptar a las necesidades del sitio;El cdigo generado por la aplicacin es 100% XHTML estricto;Incorporacin de estilos en plantillas, una funcionalidad que permite dar ms exibilidad y perso-nalizacin al sitio, permitiendo mostrar, por ejemplo, un estilo nico en secciones determinadas;Deteccin integrada de navegadores, para poder cargar un estilo diferente para cada tipo denavegador.

NotaSi desea conocer en mayor detalle otras caractersticas de Joomla! 1.6, puede visitar elsitio ocial dedicado a dicha versin: http://www.joomla.org/16/

1.5.1. Tipos de plantillas

Joomla cuenta con dos tipos de plantillas:

Plantillas para utilizar en la administracin (backend): Son creadas especialmente parala parte de administracin, las cuales pueden incorporar funcionalidades que faciliten el manejode los contenidos en el sitio.Plantillas para utilizar en el sitio pblico (frontend): Son creadas para ser visualizadaspor los visitantes. Pueden ser simples o complejas, todo depender del tipo de sitio y haciaquienes est orientado. Durante este manual aprender a crear este tipo de plantillas.

6

Figura 1.1: La seccin Plantillas en la administracin del CMS

7

1.5.2. Encontrar las plantillas disponibles en la administracin del CMSLas plantillas disponibles para utilizar se encuentran, dentro de la administracin, yendo a: Exten-siones > Gestor de plantillas > Plantillas.A travs del ltro por locacin es posible mostrar las plantillas pertenecientes al sitio o a la adminis-tracin. Al hacer clic sobre la imagen correspondiente, se mostrar una vista alargada del diseo dela plantilla. Adems, al clickear en el enlace de detalle, podr acceder a los archivos principales quecomponen a la plantilla, as como editarlos desde la misma interfaz.

Figura 1.2: La seccin Personalizar plantilla en la administracin del CMS

Por otro lado, al acceder al apartado estilos, como se mencion antes, podr navegar por una de lasnuevas caractersticas introducidas en Joomla 1.6: Los estilos en plantillas.Esta funcionalidad lo que permite es, utilizando un mismo template otorgar un diseo diferente adeterminadas secciones. Por ejemplo: En gran parte del sitio se desea utilizar la plantilla con undiseo predeterminado, pero en la seccin contacto se requiere que el color de fondo sea otro y que laestructura sea ms angosta.

NotaLas caractersticas de personalizacin dependern de cada plantilla. Existirn plantillas queotorgarn muchas opciones y exibilidad mientras que otras otorgarn pocas o ninguna.

Al acceder a uno de los tems enlistados, es posible acceder a las opciones de personalizacin y espe-cicar a qu secciones se desea asignar el estilo.El nivel de personalizacin puede ser variado: Tamao de estructuras, cambios de imgenes y textos,posicin de elementos y diseo.

8

Figura 1.3: La seccin Estilos en la administracin del CMS

1.5.3. Estructura bsica de una plantilla

Las plantillas en Joomla! van alojadas dentro de la carpeta templates, en el directorio raz del CMS.All dentro, cada plantilla esta separada por carpetas.Todas las plantillas poseen la siguiente estructura bsica de archivos y carpetas.Los archivos y carpetas dentro de la estructura pueden dividirse en obligatorios y no obligatorios:

Carpetas y archivos obligatorios

Son obligatorios, ya que si no estn presentes, la plantilla no funcionar:

Carpeta raz: Es la carpeta que contiene todos los archivos de la plantilla. Su nombre no debeposeer espacios intermedios. Su ubicacin est dentro de la carpeta templates, que se encuentraen el directorio raz;index.php: Archivo principal de la plantilla. Contiene la estructura bsica, as como tambinlas llamadas a archivos CSS y JavaScript. Su contenido est formado por etiquetas HTML yPHP;templateDetails.xml: Archivo XML que sirve para instalar la plantilla en el CMS. Posee lasiguiente informacin:

Datos relacionados con la plantilla: nombre de la plantilla, autor, licencia, versin, etc; Estructura de carpetas, archivos y lenguajes; Nombres de las posiciones de mdulos que la plantilla admite; Opciones de conguracin de la plantilla.

9

Figura 1.4: La seccin Editar estilo en la administracin del CMS

10

Figura 1.5: Esquema de la estructura bsica de una plantilla

11

template_preview.png: Imagen con una captura completa de la plantilla en funcionamiento.Sirve como vista previa al momento de seleccionar una plantilla en el panel de administracin;template_thumbnail.png: Pequea imagen que tambin acta como vista previa al momentode seleccionar una plantilla en el panel de administracin;index.html: Archivo HTML en blanco (sin etiquetas). Sirve como mtodo de seguridad enservidores que permiten explorar directorios de archivos desde el navegador. Es recomendablecrear un archivo index.html por cada carpeta que tenga la plantilla;css: Carpeta que contendr los estilos CSS que utilizar la plantilla.

Carpetas y archivos no obligatorios

Son archivos que agregan funcionalidades o caractersticas a la plantilla, pero que no es obligatorioincluirlos. Crearlos o no, depender de las necesidades al momento de crear la plantilla:

component.php: Archivo PHP que permite crear una versin reducida de la plantilla. Por logeneral, se usa como vista previa al querer imprimir un artculo o enviarlo por correo electrnico.En caso de no existir, se utiliza el archivo component.php ubicado en la carpeta /templates/system/;error.php: Archivo PHP utilizado para mostrarse cuando ocurre algn error en el CMS ocuando una pgina no ha sido encontrada;favicon.ico: Imagen que se utilizar como icono de la pgina. Joomla comprueba que el ar-chivo exista y, en caso positivo, se incorporan automticamente las etiquetas apropiadas paramostrarlo;images: Carpeta con imgenes a utilizar en el diseo de la plantilla;js: Carpeta con archivos JavaScript para utilizar en la plantilla;html: Los archivos alojados en esta carpeta permiten sobrescribir la salida HTML que imprimeel CMS de forma predeterminada en componentes y mdulos. Es decir, si desea personalizar elcontenido HTML de una extensin, los archivos que lo harn sern ubicados en esta carpeta;language: Contendr archivos del idioma .ini, los cuales servirn para mostrar textos diferentesdependiendo del idioma congurado para el sitio y la administracin. Cada idioma est separadopor su correspondiente carpeta.

12

Captulo 2

Desarrollo de plantillas paraJoomla!

2.1. Creacin de los archivos de la plantilla

2.1.1. Anlisis previo

Antes de comenzar a crear los archivos pertenecientes a la plantilla, es muy importante trabajar unaspecto fundamental en toda pieza de software: el anlisis previo.A continuacin de enumeran algunas cuestiones que deber tener en cuenta al momento del anlisis:

Deniciones grcas:

Contar con un diseo grco en el cual se basar la plantilla. El diseo deber contemplardiferentes aspectos que permitan al usuario estar cmodo y adems satisfaga las necesi-dades del sitio: Gama de colores, disposicin de los elementos, tcnicas grcas utilizadas,usabilidad y accesibilidad.

Deniciones funcionales:

Dependiendo de los requerimientos y necesidades, el sitio contar con una cantidad denidade funcionalidades. Para implementarlas, deber analizar de que forma realizarlas: Utili-zando las caractersticas que el CMS trae por defecto, instalando extensiones de terceros odesarrollando una solucin personalizada.

Debe tener en cuenta que la plantilla sea lo sucientemente extensible y exible para ade-cuarse a distintas situaciones. Una manera de hacerlo es a travs de la implementacin deparmetros de conguracin en la plantilla.

Deniciones tcnicas:

Si ya ha trabajado en el mundo del diseo y desarrollo web, sabr que no siempre esposible realizar un sitio que luzca exactamente igual en todos los navegadores, versiones ydispositivos. Particularmente, Internet Explorer suele ser el navegador ms problemtico.Por lo tanto deber tomar como determinacin que navegadores, versiones y dispositivossern soportados por la plantilla.

13

Nombre de la plantilla e informacin asociada: Deber elegir un nombre representativo parala plantilla y si lo desea, una licencia;

Posiciones de mdulos: Esta es una denicin que depender de los elementos que com-pongan a la plantilla y su disposicin. Para hacerlo, deber delimitar el diseo en zonasfuncionales, por ejemplo: zona perteneciente al men, zona perteneciente a la caja de bs-queda, zona perteneciente a elementos izquierdos, etc. A partir de esta denicin, le serfcil denir las posiciones de mdulos y sus nombres.

NotaTenga en cuenta que no siempre se podr contar con anticipacin con todos los puntosnombrados, sin embargo, cuanto antes los tenga, mejor.

En el caso de este manual, se utilizar el siguiente diseo para la realizacin de la plantilla.Al realizar el anlisis, es posible denir las siguientes posiciones de mdulos y funcionalidades:

Tres espacios para mdulos de mens (dos en la parte superior, uno en la parte inferior);Un espacio para un texto destacado;Un espacio para un video destacado;Un espacio para una texto resumido destacado;Un espacio central para tres artculos;Un espacio para un texto explicativo;Un espacio para un slideshow de imgenes;

Adems la plantilla contar con las siguientes deniciones:

Nombre de la plantilla: InterPointLicencia: GNU General Public License version 2Navegadores soportados: Internet Explorer 8 o superior, Firefox 3.6 o superior, Google Chrome,Safari 5 o superior.

Una vez obtenidos los resultados del anlisis es posible proseguir con la creacin de los archivos.

2.1.2. Utilizar la plantilla atomic como baseA partir de la versin 1.6, Joomla incorpora una nueva plantilla llamada atomic, la cual tiene comoobjetivo que pueda ser utilizada como base para la creacin de nuevas plantillas. Su principal carac-terstica es la de utilizar Blueprint, un framework CSS que permite agilizar la creacin de estilos ymaquetaciones.Para comenzar, lo primero ser ir a la carpeta templates para copiar y pegar el directorio atomic.Luego se renombra la carpeta copiada con el nombre que se ha seleccionado para la plantilla.

NotaEl nombre debe estar en minsculas y con guiones bajos (en caso de tener espacios de pormedio).

Lo siguiente ser ir por cada uno de los archivos para modicarlos en base a las necesidades solicitadas.

14

Figura 2.1: El diseo a realizar. Crditos: PSD Style - http://psdstyle.net/

15

Figura 2.2: Denicin de las posiciones de mdulos y funcionalidades

16

Figura 2.3: Copia de la carpeta atomic dentro de templates

17

2.2. El archivo templateDetails.xmlComo se coment anteriormente, templateDetails es un archivo XML que posee toda la informacinasociada de la plantilla. Su importancia es debido a que es el archivo que lee Joomla al momento deinstalar la plantilla y mostrar su informacin asociada en el panel de administracin.Muchas de las deniciones que se realizaron en el anlisis previo van a ir expuestas en este archivo.El archivo esta conformado de la siguiente manera:

atomic 10/10/09Ron Severdia [email protected]://www.kontentdesign.comCopyright (C) 2005 - 2011 Open Source Matters, Inc. All rights

reserved.GNU General Public License version 2 or later; see LICENSE.txt1.6.0TPL_ATOMIC_XML_DESCRIPTION

htmlcssimages language jsindex.phpindex.htmlfavicon.icotemplateDetails.xmltemplate_preview.pngtemplate_thumbnail.pngcomponent.phperror.php

atomic-bottomleft atomic-bottommiddle atomic-search atomic-sidebar atomic-topmenu atomic-topquote

en-GB/en-GB.tpl_atomic.inien-GB/en-GB.tpl_atomic.sys.ini

18

Con la informacin recopilada, el mismo quedar:

InterPoint 2011Comunidad Joomla [email protected]://www.comunidadjoomla.org/Comunidad Joomla 2011GNU General Public License version 21.0TPL_INTERPOINT_XML_DESCRIPTION


interpoint -menu_ingresar interpoint -menu_superior interpoint -destacado_superior interpoint -videointerpoint -caja_medio interpoint -destacado_inferior interpoint -slideshow_inferior interpoint -menu_inferior

es-ES/es-ES.tpl_interpoint.inies-ES/es-ES.tpl_interpoint.sys.ini

Para entender lo modicado, a continuacin se muestra un detalle de cada seccin correspondiente alarchivo:

19

2.2.1. Seccin 1: Informacin asociada


Las primeras etiquetas corresponden a la informacin asociada a la plantilla: Nombre, fecha de crea-cin, autor, contacto, licencia, versin y descripcin.

NotaNote que en la descripcin se ha puesto TPL_INTERPOINT_XML_DESCRIPTION, que es unareferencia que se incorporar en el archivo de lenguaje es-ES.tpl_interpoint.ini. La ideaes que todos los textos localizados estn situados en el archivo del idioma, por si en unfuturo la plantilla se utilizada en ms idiomas.

2.2.2. Seccin 2: Carpetas y archivos


Luego se especican los archivos y carpetas que compondrn a la plantilla. Es muy importante, amedida que se avanza con el desarrollo de la plantilla, ir especicando en esta seccin los archivosnuevos creados. En caso contrario, si no existe referencia a un archivo, cuando se quiera instalar laplantilla el CMS mostrar un error.2.2.3. Seccin 3: Posiciones de mdulos

interpoint -menu_ingresar interpoint -menu_superior interpoint -destacado_superior

20

interpoint -videointerpoint -caja_medio interpoint -destacado_inferior interpoint -slideshow_inferior interpoint -menu_inferior

A continuacin se especican las posiciones admitidas por los mdulos en la plantilla. El nombre decada una suele ser un breve resumen de la posicin o funcionalidad especica de dicha zona. Luego,en el archivo del idioma es-ES.tpl_interpoint.sys.ini es posible especicar una descripcin msexplicativa de cada posicin.2.2.4. Seccin 4: Denicin de lenguajes


Por ltimo se aaden los archivos del idioma, los cuales tendrn la descripcin y textos explicativos delas posiciones de mdulos y parmetros de la plantilla. El archivo es-ES.tpl_interpoint.ini contendrtodas las deniciones que se utilizarn en la pantalla de edicin de estilos de plantillas. Mientras que es-ES.tpl_interpoint.sys.ini contendr las explicaciones correspondientes a cada posicin de mdulos(estos textos aparecen de ayuda, en el momento de asignar un mdulo a una posicin). Para poderutilizar estos archivos del idioma, lo que se har es:

En la carpeta de la plantilla, ir al directorio language;All dentro existe otra carpeta llamada en-GB. Cambiarle el nombre por es-ES;Dentro de esta carpeta existen dos archivos .ini: en-GB.tpl_atomic.ini y en-GB.tpl_atomic.sys.ini. Respectivamente, se los renombra a es-ES.tpl_interpoint.ini y es-ES.tpl_interpoint.sys.ini;Abrir es-ES.tpl_interpoint.ini, borrar el contenido y luego escribir:

TPL_INTERPOINT_XML_DESCRIPTION="Template de ejemplo para Joomla!"

NotaNote que TPL_INTERPOINT_XML_DESCRIPTION hace referencia al trmino incorporado en laetiqueta en el archivo templateDetails.xml. El texto de descripcin sepuede cambiar a gusto.

Guardar es-ES.tpl_interpoint.ini;Abrir es-ES.tpl_interpoint.sys.ini, borrar el contenido y escribir:

TPL_INTERPOINT_XML_DESCRIPTION="Template de ejemplo para Joomla!"TPL_INTERPOINT_POSITION_INTERPOINT -MENU_INGRESAR="Men superior de ingreso y

registro"TPL_INTERPOINT_POSITION_INTERPOINT -MENU_SUPERIOR="Men superior principal"TPL_INTERPOINT_POSITION_INTERPOINT -DESTACADO_SUPERIOR="Texto destacado superior"TPL_INTERPOINT_POSITION_INTERPOINT -VIDEO="Caja de video"TPL_INTERPOINT_POSITION_INTERPOINT -CAJA_MEDIO="Caja del medio"TPL_INTERPOINT_POSITION_INTERPOINT -DESTACADO_INFERIOR="Texto destacado inferior"TPL_INTERPOINT_POSITION_INTERPOINT -SLIDESHOW_INFERIOR="Slideshow inferior"TPL_INTERPOINT_POSITION_INTERPOINT -MENU_INFERIOR="Men inferior"

21

Guardar es-ES.tpl_interpoint.sys.ini.

NotaNote que cada referencia de descripcin de mdulos esta compuesta por TPL_(nombre dela plantilla)_POSITION_(nombre de la posicin del mdulo). Tambin se ha agregadonuevamente la descripcin de la plantilla con la misma referencia que se us anteriormente.Los textos de descripcin de cada posicin se pueden cambiar al gusto.

NotaEn el momento de instalar la plantilla, los archivos es-ES.tpl_interpoint.ini y es-ES.tpl_interpoint.sys.ini se copiarn dentro de la carpeta language/es-ES, en el directorioraz del CMS.

NotaEn el archivo templateDetails.xml tambin se especican las opciones de personalizacinde la plantilla. Ms adelante se explicar como aadir esta caracterstica y de que forma.

Con esto listo, es posible continuar con la visualizacin del template en la administracin de Joomla.

2.2.5. Descubrir la plantilla en la administracin de CMS

Antes de continuar, es importante que Joomla reconozca la copia realizada de la plantilla, ya que sernecesario poder previsualizar el trabajo a medida que se va avanzando.Para esto, en la administracin, vaya a Extensiones > Gestor de extensiones > Descubrir >Presionar el botn Descubrir. Si todo sale bien, debera aparecer la plantilla enlistada.

Figura 2.4: Descubrir la plantilla en la administracin de CMS

22

Lo siguiente ser seleccionar el tem de la plantilla y presionar el botn Instalar. Si todo sali bien debeaparecer el texto La instalacin de la extensin descubierta se ha realizado correctamentey ms abajo la descripcin de la plantilla.

Figura 2.5: Pantalla de instalacin correcta

Finalmente, para poder visualizar la plantilla en el sitio, vaya a Extensiones > Gestor de plantillas(Figura 2.6).Seleccionar el tem de la plantilla nueva y presionar el botn Predeterminada. De esta forma selograr que al ingresar al sitio se cargue la plantilla.

2.3. El archivo index.phpAl ser uno de los archivos ms importantes, es fundamental entender las etiquetas que conforman alindex.php. A continuacin se mostrar el archivo completo para luego ir viendo en detalle cada seccinque lo conforma.

Figura 2.6: La nueva plantilla aparece enlistada

?>xml version="1.0" encoding=""?>

2.3.1. Seccin 1: Sesin y contexto del CMSdefined('_JEXEC ') or die;

La lnea indicada podr encontrarla en muchos archivos fuente de Joomla. Se incorpora por motivosde seguridad, su objetivo es asegurar que el archivo PHP est siendo ejecutado dentro de la sesin ycontexto del CMS (de forma tal que si un usuario quiere vulnerar el sitio ejecutando un archivo enparticular, le sea difcil realizarlo).

NotaMs informacin sobre JEXEC: http://docs.joomla.org/JEXEC

2.3.2. Seccin 2: Framework JavaScriptJHTML::_('behavior.framework ', true);

Para crear varias funcionalidades JavaScript, Joomla utiliza el framework Mootools. Dicho frameworkest compuesto por varios archivos .js que se cargan de forma predeterminada en la cabecera de laplantilla (). Al incorporar la lnea mostrada con el argumento true, se especica que tambinse cargue en la plantilla el archivo mootools-more.js, el cual posee diversas funciones que potencianan ms al framework JavaScript.

NotaNote que si quita la lnea de cdigo en index.php, Mootools seguir cargandose en laplantilla.

NotaMs informacin sobre Mootools y Mootools More: http://mootools.net/ y http://mootools.net/more/

26

2.3.3. Seccin 3: Referencia a JApplication$app = JFactory::getApplication();

Esta lnea guarda en la variable $app una referencia al objeto PHP de Joomla JApplication. Sin entraren detalles tcnicos, utilizando esta lnea es posible obtener informacin del sitio para mostrar dentrode la plantilla (por ejemplo: nombre del sitio, ttulo de la pgina, nombre del template, etc).

NotaPuede consultar la informacin relacionada con JApplication en http://api.joomla.org/Joomla-Framework/Application/JApplication.html

2.3.4. Seccin 4: Tipo de documento, codicacin y estilo de escrituraxml version="1.0" encoding=""?>

A algunas etiquetas meta, Joomla permite desactivarlas o editarlas, mientras que a otras no. Porotro lado, dependiendo si se est utilizando una extensin, Joomla puede cargar ms archivos CSS yJavaScript dentro de la cabecera.

2.3.6. Seccin 6: Archivos CSS

El siguiente trozo de cdigo tiene un solo objetivo: Leer la conguracin del CMS y determinar ladireccin de lectura. En caso que el valor sea rtl (de derecha a izquierda o right to left en ingls) secargan los estilos apropiados. Si el sitio tendr un sentido de lectura de izquierda a derecha, este trozode cdigo se puede eliminar.

NotaNote que el bloque condicional if no tiene la sintaxis clsica que se suele utilizar:if () {...} else {...}

Esto es porque se utiliza una sintaxis alternativa que permite mejorar la lectura del cdigoy su funcionamiento es exactamente el mismo que la manera clsica. Ms informacin:http://www.php.net/manual/es/control-structures.alternative-syntax.php

2.3.8. Seccin 8: Funcionalidades JavaScript

NotaMs informacin sobre countModules(): http://docs.joomla.org/JDocumentHTML/countModules

: Representa una de las partes ms impor-tantes de la plantilla. Con esta directiva se indica la carga de un mdulo en particular y de unamanera especica. Esto se establecer a partir de dos atributos:

name: En este atributo se debe especicar el nombre de una posicin determinada de laplantilla. Estas posiciones son especicadas en el archivo templateDetails.xml y su nombredebe ser nico, sin espacios y lo suciente descriptivo para entender que tipo de mdulodebera ir en esa zona. Por ejemplo, el atomic-search indica que esa zona de la plantilla esadecuada para mostrar el buscador del sitio (sin embargo, esto no es obligatorio, es posibleponer el mdulo que se desee en dicha posicin).

style: En este atributo de especica el estilo con que se quiere mostrar un mdulo determi-nado. Dicho estilo no se reere a CSS, sino a qu tipos de etiquetas HTML encerrarn almdulo y de qu manera. De forma predeterminada, Joomla! cuenta con seis estilos paramostrar un mdulo: xhtml: El mdulo estar encerrado por solo una etiqueta la cual tendr comoatributo la clase moduletable+sufijo_del_modulo. El sujo es un parametro que se puedeespecicar en cada mdulo dentro del panel de administracin y sirve basicamente paradiferenciar en estilos CSS a los diferentes mdulos.

rounded: El mdulo estar encerrado dentro de 4 etiquetas , las cuales permiten(aadiendo luego estilos CSS) un diseo con bordes redondeados al mdulo; El primer padre tendr como atributo la clase module+sufijo_del_modulo.

table y horz: Utilizando cualquiera de estas dos formas, el mdulo estar encerradodentro de una tabla HTML.

none: El mdulo aparecer en crudo, es decir, sin ningn tipo de etiquetas encerrn-dolo, solo el HTML que compone al mismo;

outline: Este estilo se suele utilizar para funciones de depuracin. El mismo permitemostrar una linea punteada delimitando el tamao del mdulo para notar su tamaoy espacio ocupado en la plantilla.

NotaPuede encontrar ms informacin sobre los diferentes estilos de presentacin de mdulosen http://docs.joomla.org/What_is_module_chrome%3F

A su vez, Joomla! permite incorporar estilos personalizados para mostrar mdulos. Estos estilos debenir especicados en el archivo modules.php dentro de la carpeta html de la plantilla.

NotaMs adelante se explicar como aadir diferentes estilos de presentacin de mdulos.

Los mdulos no suelen ocupar posiciones principales de la plantilla, sino ms bien son elementosfuncionales al sitio: Mens de navegacin, cajas de encuestas, formularios de ingreso, etc. La posicinprincipal de la plantilla, por lo general, es ocupada por el contenido de los distintos componentes delCMS (artculos de noticias, seccciones y categoras, etc).Otros trozos de cdigo que incorporan posiciones de mdulos en index.php:

30

NotaNote que varios trozos de cdigo utilizan estilos personalizados: container, bottommoduley sidebar. Ms adelante se explicar la creacin de estilos personalizados de mdulos.

2.3.11. Seccin 11: Mensajes del sistema

Esta directiva debe aparecer slo una vez en la plantilla. Se utiliza para mostrar diferentes mensajesdel CMS (por ejemplo: cuando un usuario se registra en el sitio, el CMS le informa que el registro fusatisfactorio o erroneo). Dichos mensajes aparecen en la zona en donde se incorpore la directiva.2.3.12. Seccin 12: Contenido de los componentes

Como se coment anteriormente, el contenido de los componentes del CMS suelen ocupar la zonaprincipal de la plantilla. Esta lnea justamente tiene esa nalidad: permite mostrar el contenido delcomponente en que se este situado (artculos, categoras, formulario de registro, etc).2.3.13. Seccin 13: Ao presente y nombre del sitio

Finalmente, llegando al nal del archivo, se incorporan una serie de etiquetas para mostrar el aopresente y el nombre del sitio, formando un texto similar a: 2011 Mi Sitio Web.

31

Lo siguiente a realizar es la modicacin de index.php para crear una maquetacin en base a lasnecesidades requeridas. Como se utilizar a BluePrint como herramienta, es necesario primero entendersu funcionamiento.

2.4. El sistema de grillas de BluePrintBluePrint es una coleccin de archivos .css, los cuales poseen variados estilos predenidos paraahorrar tiempo en diferentes tareas del diseo web: Maquetaciones, reseteo de estilos, diseo de for-mularios, tipografas, etc. Para la creacin de la maquetacin de la plantilla se utilizar su sistema degrillas.

NotaPuede obtener ms informacin sobre BluePrint en su sitio web: http://www.blueprintcss.org/

El sistema de grillas de BluePrint es muy fcil de utilizar, permitiendo agilizar de forma severa elproceso de maquetacin. Su mecanismo permite crear un mximo de 24 columnas (o grillas) las cualesse pueden combinar dependiendo de las necesidades.La clave de su utilizacin es aadir una serie de clases predenidas en los elementos del documentopara poder crear las columnas y el ancho necesitado.Por ejemplo, si se desea crear dos columnas y que cada una utilice el espacio de ocho grillas, se deberincorporar en el cuerpo del documento:

El con la clase container ser el elemento que contendr todas las columnas de la maquetacin.Al agregar dicha clase, se har que el documento tenga un ancho de 950px y aparezca centradahorizontalmente. Luego, cada con la clase span-12 especica que ocupen el espacio de 12grillas, o sea, la mitad del espacio disponible (recordar que como mximo se dispone de 24 grillas). Dela misma forma, si se desea que cada columna ocupe un tercio del espacio, lo nico que hay que haceres cambiar la clase por span-8. Finalmente note que el ltimo elemento (es decir, la ltima columna)debe tener la clase last, caso contrario la maquetacin se visualizar de forma incorrecta.Tambin existen otras clases que permiten modicar la disposicin de las columnas: prepend-x y append-x. La primera permite mover una columna ms hacia la derecha, mientras que la otra ms hacia laizquierda, todo depender del valor que se le asigne a x (por ejemplo: prepend-4 / append-4).

32

Figura 2.7: Demo del sistema de grillas de BluePrint

33

2.5. Maquetacin del diseoYa explicado el sistema de grillas de BluePrint, se comenzar la modicacin de index.php para agregarla maquetacin del diseo.

2.5.1. Modicaciones dentro de la etiqueta head

El quedar prcticamente igual a como estaba antes, con algunas modicaciones:

Se eliminan algunos comentarios y se agregan otros;Se quitan las llamadas a los estilos /plugins/fancy-type/screen.css y /plugins/joomla-nav/screen.css ya que no se utilizarn;Tambin se eliminan las llamadas a los estilos utilizados para adaptar los textos al sentido delectura de derecha a izquierda (RTL).

xml version="1.0" encoding=""?>

Figura 2.8: Diseo de la seccin superior

Figura 2.9: Diseo del texto superior, video y caja destacada

NotaNote que se ha agregado para que aparezcan los mensajesdel sistema debajo de cabecera del diseo.

36

Figura 2.10: Diseo de las columnas del medio

2.5.4. Maquetacin de las columnas del medio

Las columnas del medio cargaran tres artculos publicados en la pgina principal del sitio. Para esose utilizar la etiqueta :

Para hacer que cada artculo ocupe una columna, en la administracin del CMS, ir aMens > Menprincipal y luego acceder al tem que se tenga marcado como pgina de inicio.En la columna derecha, en el apartado Opciones de presentacin establecer los siguientes valores.De esta forma se har que se muestren, como mximo, tres artculos, separados cada uno en columnas.Al mostrar dichos artculos, el HTML generado por el CMS ser:

Ttulo del artculo 1

Texto del artculo 1...

Leer ms...

37

Figura 2.11: Seccin de edicin de elemento del men

38

Figura 2.12: Opciones de presentacin

39

Ttulo del artculo 2


Leer ms...

Ttulo del artculo 3


Leer ms...

Por lo tanto, Joomla se encarga de generar el HTML que necesitamos para poder lograr las columnasdel medio.

NotaOtra solucin para generar tres columnas sera utilizar tres mdulos separados y crear pornuestra cuenta el HTML de cada columna.

2.5.5. Maquetacin del texto destacado inferior y slideshow

Para la siguiente parte del diseo, se crearn dos columnas, una para el texto destacado y otra parala zona del slideshow.

40

Figura 2.13: Diseo del texto destacado inferior y slideshow

Dentro del que va a contener el slideshow, se han agregado dos etiquetas que servirnpara construir la navegacin entre imgenes.

2.5.6. Maquetacin del footer y zona inferior

Figura 2.14: Diseo del footer y zona inferior

Finalmente para esta zona tambin se utilizarn dos columnas, una para el texto legal y otra para elmen inferior:

41

NotaNote que adems de las clases span8 se utiliz prepend3 para mover el contenido de lascolumnas hacia la derecha en cada columna.

Si se juntan todas las partes, el archivo index.php quedar conformado de la siguiente forma:


Al ingresar al sitio se visualizar la estructura de la plantilla, an sin estilos.

En caso de no tener ningn artculo publicado en la pgina de inicio, la seccin centralaparecer vaca.

2.6. El archivo template.cssLleg el momento de aadir diseo a la plantilla. Para eso se editar el archivo template.css que seencuentra dentro de la carpeta css de la plantilla. Note que ya existe contenido dentro del archivo, loque se har es borrarlo para luego incorporar los estilos apropiados.

44

Figura 2.15: El sitio con la estructura HTML, an sin estilos

NotaAntes de comenzar a escribir los estilos, es muy importante tener preparados los recortesde las diferentes imgenes que componen el diseo. Dichas imgenes deben ir guardadasen la carpeta images de la plantilla.

NotaSi no sabe recortar imgenes con Photoshop, puede consultar el siguiente artcu-lo: http://www.todo-photoshop.com/tutorial-photoshop/basicos/recortando_imagenes_photoshop.html

NotaA medida que se van aplicando los estilos es conveniente ir rellenando el sitio con contenidos(mens, artculos, etc.) para poder visualizar de mejor manera el trabajo.

NotaEl nivel de comprensin de los estilos mostrados a continuacin dependarn de los co-nocimientos de CSS que posea. Si desea introducirse ms en profundidad con los es-tilos en cascada, puede consultar la coleccin referente a este tema en LibrosWeb:http://www.librosweb.es/. An as, los estilos descritos son de ejemplo, los cualespueden mejorarse o implementarse de otra forma.

2.6.1. Estilos generales

Los primeros estilos corresponden para elementos generales del sitio: Tipografas, colores de enlaces,etc:

45

Figura 2.16: Imgenes recortadas que conformarn el diseo

/* Estilos generales---------------------------------------------------------*/body{

background: #FFF;color: #5f5d5d;font-family: Arial, Helvetica , sans-serif;font-size: 14px;

}

2.6.2. Estilos para la seccin superior

Se continua con los estilos para la seccin superior:/* Parte superior---------------------------------------------------------*/#header{

padding: 15px 0 20px 0;border-bottom: 1px solid #bcb9b9;

}

/* Logo y eslogan---------------------------------------------------------*/#logo{

position: relative;}

46

#logo h1{width: 330px;height: 80px;background: transparent url(../images/interpoint -logo.png) no-repeat left top;margin: 0;text-indent: -3000px;

}

#logo a{display: block;

}

#eslogan{color: #696767;font-size: 14px;font-weight: normal;margin: 0;position: absolute;right: 20px;bottom: 0px;

}

/* Men ingresar---------------------------------------------------------*/#menu_ingresar ul{

margin: 0;overflow: hidden;

}

#menu_ingresar li{width: 72px;float: right;list-style: none;margin: 0 0 0 20px;

}

#menu_ingresar li a{display: block;width: 72px;height: 31px;line-height: 30px;text-align: center;text-decoration: none;color: #FFF;background: transparent url(../images/interpoint -boton.png) no-repeat center

top;}

#menu_ingresar li a:hover{text-decoration: underline;

}

/* Men superior principal---------------------------------------------------------*/

47

#menu_superior ul{margin: 20px 0 0 30px;overflow: hidden;padding: 0;

}

#menu_superior li{width: auto;float: left;list-style: none;margin: 0 0 0 20px;

}

#menu_superior li a{display: block;text-align: center;text-decoration: none;color: #959393;

}

#menu_superior li a:hover{text-decoration: underline;

}

#menu_superior .selected a{color: #036e9e;

}

Para completar los espacios superiores, se utilizaron dos mdulos del tipo Men.

2.6.3. Estilos para el destacado superior, video y caja media

Luego se contina con los estilos para el destacado superior, video y caja del medio:/* Destacado superior---------------------------------------------------------*/#destacado_superior{

margin: 40px 0 0 0;}

#destacado_superior h3{color: #035f88;font-size: 28px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;font-weight: 600;

}

#destacado_superior p{font-size: 18px;color: #5f5d5d;

}

#destacado_superior a{display: block;width: 262px;height: 64px;

48

Figura 2.17: Seccin superior con los estilos aplicados

49

color: #FFF;font-size: 28px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;font-weight: 600;line-height: 55px;text-decoration: none;text-align: center;text-shadow: 1px 1px 3px #000;margin: 0 auto;background: transparent url(../images/interpoint -boton-grande.png) no-repeat

top center;}

#destacado_superior a:hover{text-decoration: underline;

}

/* Video---------------------------------------------------------*/#video{

height: 355px;margin: 40px 0 0 0;background: transparent url(../images/interpoint -video.png) no-repeat top

center;position: relative;

}

#reproductor{position: absolute;left: 72px;top: 17px;

}

/* Caja medio---------------------------------------------------------*/#caja_medio{

background: #d9eef7;margin: 50px 0 0 0;

}

#caja_medio p{padding: 10px;color: #181818;font-size: 18px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;margin: 0;

}

Para completar los espacios se utilizaron tres mdulos del tipo HTML personalizado (uno con eltexto destacado/botn, otro con el video y otro con un pequeo texto para la caja media).

50

Figura 2.18: Destacado superior, video y caja media con los estilos aplicados

51

2.6.4. Estilos para las columnas centrales

Luego se incorporan los estilos para las columnas medias:/* Contenido / Columnas centrales---------------------------------------------------------*/#contenido{


#contenido .leading -0, #contenido .leading -1, #contenido .leading -2{width: 280px;float: left;

}

#contenido h2{line-height: 55px;margin: 0 0 10px 0;

}

#contenido h2 a{color: #035f88;font-size: 20px;font-weight: 600;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;text-decoration: none;

}

#contenido h2 a:hover{text-decoration: underline;

}

#contenido .leading -0{margin: 0 50px 0 0;

}


}

#contenido .leading -2{margin: 0;

}

#contenido .leading -0 h2{padding: 0 0 0 69px;background: transparent url(../images/interpoint -icono -1.png) no-repeat left

center;}


center;}

#contenido .leading -2 h2{

52

padding: 0 0 0 71px;background: transparent url(../images/interpoint -icono -3.png) no-repeat left

center;}

#contenido .readmore a{color: #3c8203;text-decoration: none;

}

#contenido .readmore a:hover{text-decoration: underline;

}

#contenido .readmore a:before {content: ">> ";

}

Figura 2.19: Columnas centrales con los estilos aplicados

53

Como se explic anteriormente, los contenidos de las columnas estn conformados por tres artculosseleccionados para ser publicados en la pgina de inicio.

2.6.5. Estilos para el texto destacado inferior y slideshow/* Destacado inferior---------------------------------------------------------*/#destacado_inferior{


#destacado_inferior .newsflash -title{color: #035f88;font-size: 20px;font-weight: 600;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;

}

#destacado_inferior .readmore{display: block;width: 94px;height: 30px;line-height: 30px;background: transparent url(../images/interpoint -leermas.png) no-repeat center

center;color: #5f5d5d;text-decoration: none;text-align: center;

}

#destacado_inferior .readmore:hover{text-decoration: underline;

}

/* Slideshow inferior---------------------------------------------------------*/#slideshow_inferior{

margin: 50px 0 0;position: relative;

}

#slideshow_contenedor{border: 10px solid #eeeded;height: 195px;width: 290px;float: right;

}

#slideshow_inferior .slideshow_nav{width: 29px;height: 29px;position: absolute;top: 90px;cursor: pointer;

54

z-index: 100;}

#slideshow_izq{background: transparent url(../images/interpoint -slideshow -izq.png) no-repeat

center center;left: -10px;

}

#slideshow_der{background: transparent url(../images/interpoint -slideshow -der.png) no-repeat

center center;right: -10px;

}

Para los mostrar el artculo se utiliz un mdulo del tipo Artculos - Noticias de actualidad. Selo congur para mostrar un solo artculo, de una categora denida, ordenado por fecha. De estaforma, en esta seccin pueden ir, por ejemplo, las ltimas noticias del sitio y cada vez que se cargauna noticia nueva, esta aparece en dicho lugar.Para la seccin de slideshow, se utiliz un mdulo de HTML personalizado. Se incorpor una solaimagen en modo de demostracin.

NotaEl slideshow an no es funcional. Ms adelante se explicar como agregar la funcionalidada la plantilla utilizando JavaScript.

2.6.6. Estilos para el footer y zona inferior/* Footer y men inferior---------------------------------------------------------*/#footer{

height: 200px;background: transparent url(../images/interpoint -footer.png) no-repeat top

center;}

#legal{color: #6e6d6d;font-size: 12px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;margin: 175px 0 0 0;line-height: 12px;

}

#menu_inferior{margin: 175px 0 0 0;

}

#menu_inferior ul{overflow: hidden;padding: 0;margin: 0;

}

55

Figura 2.20: Texto destacado inferior y slideshow con los estilos aplicados

56

#menu_inferior li{width: auto;float: left;list-style: none;margin: 0 0 0 10px;

}

#menu_inferior li a{display: block;text-align: center;text-decoration: none;color: #6e6d6d;font-size: 12px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;border-left: 1px solid #6e6d6d;padding: 0 0 0 10px;line-height: 12px;

}

#menu_inferior li:first-child a{border: 0px;

}

#menu_inferior li a:hover{text-decoration: underline;

}

#menu_inferior .selected a{color: #036e9e;

}

Para completar las zonas inferiores se us un solo mdulo Men con distintos enlaces hacia seccionesdel sitio.2.6.7. Estilos para elementos y mensajes del sistema

Por ltimo se agregan estilos pertenecientes a elementos comunes en el CMS: Mensajes del sistema,iconos de acciones y tooltips./* Estilos pertenecientes al CMS---------------------------------------------------------*//* Mensajes del sistema---------------------------------------------------------*/#system-message{

display: block;clear: both;padding: 15px 0 0 0;

}

#system-message dt, #system-message dd{margin: 5px 0;

}

#system-message ul{margin: 0;

}

57

Figura 2.21: Footer y zona inferior con los estilos aplicados

58

/* Acciones---------------------------------------------------------*/ul.actions {

clear:both;margin-top: -50px;float:right;

}

ul.actions li {list-style-type: none;float:right;margin-left: 10px;

}

/* Tooltips---------------------------------------------------------*/.tip-wrap{

background: #D9EEF7;padding: 5px;font-size: 12px;

}

Estos elementos aparecen en ciertas situaciones, por ejemplo: cuando un usuario quiere ingresar alsitio y la accin es rechazada, el CMS muestra un mensaje. Los iconos de acciones y tooltips suelenaparecer cuando se ingresa al sitio con permisos de edicin de artculos.

Figura 2.22: Acciones y tooltips con los estilos aplicados

2.6.8. Estilos completos

Al juntar todos los estilos, el archivo template.css conformado de la siguiente forma:

59

/* Estilos generales---------------------------------------------------------*/body{

background: #FFF;color: #5f5d5d;font-family: Arial, Helvetica , sans-serif;font-size: 14px;

}

/* Parte superior---------------------------------------------------------*/#header{

padding: 15px 0 20px 0;border-bottom: 1px solid #bcb9b9;

}

/* Logo y eslogan---------------------------------------------------------*/#logo{

position: relative;}

#logo h1{width: 330px;height: 80px;background: transparent url(../images/interpoint -logo.png) no-repeat left top;margin: 0;text-indent: -3000px;

}

#logo a{display: block;

}

#eslogan{color: #696767;font-size: 14px;font-weight: normal;margin: 0;position: absolute;right: 20px;bottom: 0px;

}

/* Men ingresar---------------------------------------------------------*/#menu_ingresar ul{

margin: 0;overflow: hidden;

}

#menu_ingresar li{width: 72px;

60

float: right;list-style: none;margin: 0 0 0 20px;

}

#menu_ingresar li a{display: block;width: 72px;height: 31px;line-height: 30px;text-align: center;text-decoration: none;color: #FFF;background: transparent url(../images/interpoint -boton.png) no-repeat center

top;}

#menu_ingresar li a:hover{text-decoration: underline;

}

/* Men superior principal---------------------------------------------------------*/#menu_superior ul{

margin: 20px 0 0 30px;overflow: hidden;padding: 0;

}

#menu_superior li{width: auto;float: left;list-style: none;margin: 0 0 0 20px;

}

#menu_superior li a{display: block;text-align: center;text-decoration: none;color: #959393;

}

#menu_superior li a:hover{text-decoration: underline;

}

#menu_superior .selected a{color: #036e9e;

}

/* Destacado superior---------------------------------------------------------*/#destacado_superior{

61


#destacado_superior h3{color: #035f88;font-size: 28px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;font-weight: 600;

}

#destacado_superior p{font-size: 18px;color: #5f5d5d;

}

#destacado_superior a{display: block;width: 262px;height: 64px;color: #FFF;font-size: 28px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;font-weight: 600;line-height: 55px;text-decoration: none;text-align: center;text-shadow: 1px 1px 3px #000;margin: 0 auto;background: transparent url(../images/interpoint -boton-grande.png) no-repeat

top center;}

#destacado_superior a:hover{text-decoration: underline;

}

/* Video---------------------------------------------------------*/#video{

height: 355px;margin: 40px 0 0 0;background: transparent url(../images/interpoint -video.png) no-repeat top

center;position: relative;

}

#reproductor{position: absolute;left: 72px;top: 17px;

}

/* Caja medio---------------------------------------------------------*/

62

#caja_medio{background: #d9eef7;margin: 50px 0 0 0;

}

#caja_medio p{padding: 10px;color: #181818;font-size: 18px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;margin: 0;

}

/* Contenido / Columnas centrales---------------------------------------------------------*/#contenido{


#contenido .leading -0, #contenido .leading -1, #contenido .leading -2{width: 280px;float: left;

}

#contenido h2{line-height: 55px;margin: 0 0 10px 0;

}

#contenido h2 a{color: #035f88;font-size: 20px;font-weight: 600;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;text-decoration: none;

}

#contenido h2 a:hover{text-decoration: underline;

}


}


}

#contenido .leading -2{margin: 0;

}

#contenido .leading -0 h2{

63

padding: 0 0 0 69px;background: transparent url(../images/interpoint -icono -1.png) no-repeat left

center;}


center;}


center;}

#contenido .readmore a{color: #3c8203;text-decoration: none;

}

#contenido .readmore a:hover{text-decoration: underline;

}

#contenido .readmore a:before {content: ">> ";

}

/* Destacado inferior---------------------------------------------------------*/#destacado_inferior{


#destacado_inferior .newsflash -title{color: #035f88;font-size: 20px;font-weight: 600;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;

}

#destacado_inferior .readmore{display: block;width: 94px;height: 30px;line-height: 30px;background: transparent url(../images/interpoint -leermas.png) no-repeat center

center;color: #5f5d5d;text-decoration: none;text-align: center;

}

64

#destacado_inferior .readmore:hover{text-decoration: underline;

}

/* Slideshow inferior---------------------------------------------------------*/#slideshow_inferior{

margin: 50px 0 0;position: relative;

}

#slideshow_contenedor{border: 10px solid #eeeded;height: 195px;width: 290px;float: right;

}

#slideshow_inferior .slideshow_nav{width: 29px;height: 29px;position: absolute;top: 90px;cursor: pointer;z-index: 100;

}

#slideshow_izq{background: transparent url(../images/interpoint -slideshow -izq.png) no-repeat

center center;left: -10px;

}

#slideshow_der{background: transparent url(../images/interpoint -slideshow -der.png) no-repeat

center center;right: -10px;

}

/* Footer y men inferior---------------------------------------------------------*/#footer{

height: 200px;background: transparent url(../images/interpoint -footer.png) no-repeat top

center;}

#legal{color: #6e6d6d;font-size: 12px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;margin: 175px 0 0 0;line-height: 12px;

}

65

#menu_inferior{margin: 175px 0 0 0;

}

#menu_inferior ul{overflow: hidden;padding: 0;margin: 0;

}

#menu_inferior li{width: auto;float: left;list-style: none;margin: 0 0 0 10px;

}

#menu_inferior li a{display: block;text-align: center;text-decoration: none;color: #6e6d6d;font-size: 12px;font-family: "Myriad Pro", Arial, Helvetica , sans-serif;border-left: 1px solid #6e6d6d;padding: 0 0 0 10px;line-height: 12px;

}

#menu_inferior li:first-child a{border: 0px;

}

#menu_inferior li a:hover{text-decoration: underline;

}

#menu_inferior .selected a{color: #036e9e;

}

/* Estilos pertenecientes al CMS---------------------------------------------------------*//* Mensajes del sistema---------------------------------------------------------*/#system-message{

display: block;clear: both;padding: 15px 0 0 0;

}

#system-message dt, #system-message dd{margin: 5px 0;

}

66

#system-message ul{margin: 0;

}

/* Acciones---------------------------------------------------------*/ul.actions {

clear:both;margin-top: -50px;float:right;

}

ul.actions li {list-style-type: none;float:right;margin-left: 10px;

}

/* Tooltips---------------------------------------------------------*/.tip-wrap{

background: #D9EEF7;padding: 5px;font-size: 12px;

}

2.7. Finalizando la plantillaEl trabajo ya esta casi listo, las ltimas tareas a realizar son:

Vericar que el diseo se visualiza correctamente en todos los navegadores soportados. En ca-so que exista algn problema de diseo con Internet Explorer, recuerde que existe el archivotemplate_ie.css en donde es posible aadir estilos que nicamente sern cargados por dichonavegador.Experimentar con diferentes tipos de contenidos para poder comprobar lo exible que es laplantilla y en que situaciones es posible encontrar un error.Crear dos capturas de pantallas: template_preview.png que ser una imagen a tamao real deltemplate y template_thumbnail.png que ser una imagen miniatura del diseo. Dichas imgenesvan dentro de la carpeta raz de la plantilla.

Finalmente crear un instalador de la plantilla: es tan sencillo como seleccionar todos los archivosque componen la plantilla y comprimirlos en un archivo .zip. Ese archivo ser el instalador parautilizar en mltiples sitios.

67

Figura 2.23: Detalles de la plantilla

68

Captulo 3

Temas avanzados

3.1. Estilos de plantillas, parmetros de conguracin y ma-quetaciones diferentes por secciones

Como se coment la principio del manual, a partir de Joomla! 1.6, el CMS incorpora una nueva funcio-nalidad llamada estilos de plantillas. Dichos estilos permiten, a travs de parmetros de conguracin,variar el diseo de la plantilla en varios aspectos: colores, imgenes, maquetacin, tamaos, entre otrascaractersticas. A su vez cada estilo puede ser asignado a una o varias secciones especicas.

Figura 3.1: Parmetros de conguracin de la plantilla

Nota

69

Recuerde que el listado de estilos de plantillas se puede encontrar yendo, en la administra-cin, a Extensiones > Gestor de plantillas. Al ingresar a alguno de los tems enlistados sepueden visualizar los parmetros disponibles para congurar y a que secciones aplicarlos.

En el caso de la plantilla creada de ejemplo, se le aadirn varios parmetros de conguracin parapoder:

Cambiar la imagen del logotipo;Cambiar el texto del eslogan;Aplicar una maquetacin diferente.

3.1.1. Cambiar la imagen del logo

Modicacin de templateDetails.xml

Los parmetros de conguracin de la plantilla se agregan en el archivo templateDetails.xml aadiendolas etiquetas que se muestran a continuacin:

Como se muestra, la etiqueta ms importante es . Dicha etiqueta posee los siguientes atri-butos:

name: Debe ser un nombre nico, a travs del cual se har referencia al parmetro para obtenersu valor;type: El tipo de campo, el cual puede ser de varios tipos: text (campo de texto), list (lista deopciones), media (campo con seleccin de archivo);label: Ser el nombre resumido que acompaa al campo cuando sea mostrado desde la admi-nistracin;description: La descripcin ser la explicacin del campo.

NotaNote que para los atributos label y description se utiliza TPL_INTERPOINT_LOGO_LABEL yTPL_INTERPOINT_LOGO_DESC. Estas dos referencias se deben agregar en el archivo es-ES.tpl_interpoint.ini junto a los textos correspondientes.

Por lo tanto, templateDetails.xml quedar de la siguiente manera:

70

Figura 3.2: Parmetros de conguracin de la plantilla: Imagen del logo



interpoint -menu_ingresar interpoint -menu_superior interpoint -destacado_superior interpoint -videointerpoint -caja_medio interpoint -destacado_inferior interpoint -slideshow_inferior interpoint -menu_inferior


71

Modicacin del index.php

En index.php lo primero que se har es declarar una variable para guardar el valor del parmetroque queremos obtener. Esto es posible realizarlo dentro de las etiquetas PHP que se encuentran alprincipio del documento:

Como puede ver, los parmetros se obtienen a travs de $this->params->get() pasando como argu-mento el nombre del parmetro a obtener (en este caso el parmetro logo). Luego, antes del cierre dela etiqueta se incorpora:

#logo h1{background: transparent url() no-

repeat left top;}

De modo que, si se congur el parmetro, se aada un estilo que sobrescriba el establecido entemplate.css y agregue la nueva imagen del logo en el diseo.La cabecera del archivo index.php queda de la siguiente forma:

Figura 3.3: Inclusin de la nueva imagen para el logo

defined('_JEXEC ') or die;

JHTML::_('behavior.framework ', true);

$app = JFactory::getApplication();

//Parmetros de la plantilla$imagenLogo = $this->params->get('logo');

?>


}

3.1.2. Cambiar el texto del eslogan

Siguiendo los mismos pasos anteriores, se modica templateDetails.xml aadiendo un nuevo parme-tro:

NotaNote que se aadieron dos nuevos atributos: * default: Ser el valor predeterminado encaso que el campo est imcompleto; * filter: Este permite especicar el tipo de informacinque se espera en el campo (string, word, integer);

Figura 3.4: Parmetros de conguracin de la plantilla: Texto de eslogan

Luego, en index.php, se agrega una nueva llamada para obtener el parmetro eslogan:

JHTML::_('behavior.framework ', true);


//Parmetros de la plantilla$imagenLogo = $this->params->get('logo');$eslogan = $this->params->get('eslogan ');

?>

Y se modica la maquetacin correspondiente a la zona del logotipo con lo siguiente:

TPL_INTERPOINT_OPCION_1COLUMNA TPL_INTERPOINT_OPCION_2COLUMNAS

NotaNote que el parmetro, al ser del tipo lista, necesita tener denidas las opciones que sepodrn seleccionar.

Figura 3.6: Parmetros de conguracin de la plantilla: Maquetacin central

En index.php se agrega nuevamente una variable que obtenga el valor del parmetro maquetacion:


//Parmetros de la plantilla$imagenLogo = $this->params->get('logo');$eslogan = $this->params->get('eslogan ');$maquetacion = $this->params->get('maquetacion ');

?>

Luego, dentro del cuerpo del documento se agrega una nueva maquetacin y posicin de mdulos:

En caso que se haya seleccionado la opcin 1 columna, se muestra el contenido en una maquetacinde una sola columna. Caso contrario, se muestra una maquetacin de dos columnas.

NotaNote que se agreg una nueva posicin de mdulo: interpoint-columna_derecha. Esta deberser agregada adems en templateDetails.xml y la referencia de su descripcin en es-ES.tpl_interpoint.sys.ini.

Para poder aplicar la nueva maquetacin en el sitio utilizando los estilos de plantillas, se debe:

En la administracin, ir al gestor de estilos de plantillas;Duplicar el estilo predeterminado para el sitio;Acceder a esta copia, cambiar la opcin de maquetacin y decidir a que tems del men deseaver el nuevo diseo.

77

Figura 3.7: Diseo desacomodado al ingresar a un artculo del sitio78

Por ejemplo, si se selecciona asignar el nuevo diseo a una categora dada, al ingresar a un articulode esa categora se visualizar la seccin central desacomodada.Una eleccin pueden ser despublicar los mdulos superiores e inferiores y se asignar otros en la columnaderecha, mejorando la situacin.

Figura 3.8: Diseo sin los mdulos superiores al ingresar a un artculo del sitio

Agregando algunos estilos en template.css es posible mejorar el diseo:/* Columna izquierda---------------------------------------------------------*/#columna_izquierda{


#columna_izquierda h2 a {color: #035F88;font-family: "Myriad Pro",Arial,Helvetica ,sans-serif;font-size: 35px;font-weight: 600;text-decoration: none;

}

79

#columna_izquierda h2 a:hover{text-decoration: underline;

}

#columna_izquierda .article-info{background: #D9EEF7;color: #181818;font-size: 13px;margin: 0 0 20px 0;padding: 10px;

}

/* Columna derecha---------------------------------------------------------*/#columna_derecha{


/* Mdulos derechos---------------------------------------------------------*/#columna_derecha .moduletable{

margin: 0 0 30px 0;}

#columna_derecha h3{color: #035F88;font-family: "Myriad Pro",Arial,Helvetica ,sans-serif;font-size: 20px;font-weight: 600;margin: 0 0 10px 0;

}

#columna_derecha .moduletable ul{list-style: none;padding: 0;

}

#columna_derecha .search .inputbox{font-size: 14px;padding: 5px;

}

#columna_derecha .mostread a{display: block;text-decoration: none;border-bottom: 1px solid #CCC;padding: 0 0 5px 0;color: #3C8203;

}

#columna_derecha .mostread a:hover{text-decoration: underline;

}

80

#columna_derecha #modlgn_username , #columna_derecha #modlgn_passwd{width: 100 %;

}

/* Paginacin---------------------------------------------------------*/.pagenav, .pagination{

list-style: none;text-align: center;margin: 20px 0;

}

.pagenav li, .pagination li{display: inline-block;margin: 0 10px;

}

Como se puede ver, los estilos en plantillas son una opcin interesante que le otorgan exibilidad a laplantilla, permitiendo cambiar su diseo ante distintas situaciones.

3.2. Personalizacin de mdulos y componentes

3.2.1. Extensiones desarrolladas en MVC

Desde la versin 1.5, Joomla permite la sobrescritura del HTML que poseen mdulos y componentes,otorgando mucho ms control sobre lo que se desea mostrar en el sitio, sin tener que modicar archivosdel ncleo de dichas extensiones o del mismo CMS.Para poder sobrescribir la estructura HTML que posea una extensin, es requisito que sta est creadautilizando el patrn de arquitectura MVC (Modelo-Vista-Controlador).Desde el punto de vista del usuario comn, no existe una forma automtica de saber si una extensinutiliza MVC. La nica manera de saberlo es yendo a la carpeta de dicha extensin y mirando suestructura de carpetas y archivos.En donde existe una carpeta controllers, otra models y otra views. En sta ltima carpeta se encuen-tran archivos que se utilizaran como base para personalizar el HTML del componente.En este caso de los mdulos, la carpeta tmpl posee archivos que se utilizaran para personalizar a gustoel HTML del mismo.

NotaEn Joomla, los archivos que componen cada componente pueden encontrarse dentro de lacarpeta components, en el directorio raz del CMS. All cada componente est separado porcarpetas diferentes (com_banners, com_contact, etc). En el caso de los mdulos, estos seencuentran en la carpeta modules, tambin en el directorio raz del CMS. Y al igual que elcaso anterior, cada mdulo est separado en una carpeta diferente (mod_articles_archive,mod_articles_categories, etc).

NotaSi desea conocer un poco ms sobre MVC puede consultar:

81

Figura 3.9: Diseo al ingresar a un artculo del sitio con los estilos aplicados

82

Figura 3.10: Estructura habitual de los componentes creados con el patrn MVC

83

Figura 3.11: Estructura habitual de los mdulos creados con el patrn MVC

http://es.wikipedia.org/wiki/Modelo_Vista_Controladorhttp://docs.joomla.org/MVC

Tanto la personalizacin de mdulos como de componentes, se trabajan dentro de la carpeta html dela plantilla.

3.2.2. Mdulos personalizadosEn este aspecto, es posible adaptar a los mdulos en varios aspectos:

La manera con que se muestra el mdulo: Anteriormente, en el anlisis de las secciones que com-ponen a index.php, se explic que los mdulos se pueden cargar de diferentes formas cambiandoel valor del atributo style en la directiva .Sin embargo, existen situaciones en que se necesita que un mdulo cargue dentro de una estruc-tura determinada. Por eso mismo, Joomla permite crear estilos personalizados de visualizacinde mdulos.El mismo HTML que compone un mdulo: Tambin es posible personalizar las etiquetas HTMLque componen a uno o varios mdulos en particular, otorgando la exibilidad para adaptar undiseo al gusto.

Personalizar la forma con que muestran los mdulos

Como se coment anteriormente, el trabajo de personalizacin de mdulos (y tambin de componentes)ocurre en la carpeta html de la plantilla.Es el archivo modules.php quien se encarga de contener los diferentes estilos personalizados de visua-lizacin de mdulos. Al abrir a dicho archivo, el mismo posee tres funciones denidas:

84

Figura 3.12: Visualizacin al ingresar a la carpeta html de la plantilla creada

function modChrome_container($module, &$params, &$attribs){

if (!empty ($module->content)) : ?>

denidas en la plantilla atomic a modo de ejemplo). Lo que se har es crear una nueva funcin paradenir un nuevo estilo de visualizacin de mdulos:

directiva de esta forma: .

NotaNotar que el atributo style para poder utilizar el estilo personalizado, posee el valorpersonalizado no modChrome_personalizado (que es el nombre de la funcin).

if (isset($attribs['headerLevel '])) :$headerLevel = $attribs['headerLevel '];

else :$headerLevel = 4;

endif;

En este bloque de cdigo, se pregunta si el atributo headerLevel posee algn valor. Si lo posee se asignaa la variable $headerLevel dicho valor o en caso contrario se establece a 4 como valor predeterminado.

...

Continuando, se pregunta si el mdulo posee un ttulo asignado. Si lo posee, se muestra dicho ttuloentre etiquetas , la cual podr variar dependiendo del valor establecido en el atributo headerLevel.

function modChrome_container($module, &$params, &$attribs){

if (!empty ($module->content)) : ?>

nueva directiva en algn lugar o reemplazar alguna por la nueva. Por ejemplo, para la seccin de doscolumnas, en la parte derecha, se incorpora el nuevo estilo:

Si se verica el cdigo HTML generado en cada mdulo derecho, se podr notar una estructura deesta forma:(ttulo del mdulo)

(contenido del mdulo)

Por lo tanto, el nuevo estilo personalizado de mdulo se ha aplicado correctamente.

Personalizar el HTML de un mdulo en particular

Anteriormente se coment que los mdulos creados bajo el patrn MVC, poseen una subcarpetallamada tmpl. Dicha carpeta contendr uno o ms archivos .php con las etiquetas HTML que conformanal mdulo.Por ejemplo, si se dirige a la carpeta tmpl del mdulo mod_stats (mdulo que muestra las estadsticasdel sitio), encontrar un archivo llamado default.php que contiene:

En la carpeta html de la plantilla, crear una carpeta llamada mod_stats;Dentro de la carpeta creada, copiar los archivos default.php y index.html que estan en la carpetatmpl;

Figura 3.13: Estructura de la carpeta html

Lo siguiente ser abrir el archivo default.php copiado y modicarlo con las nuevas etiquetas:

3.3. Componentes personalizadosLos componentes suelen ser extensiones ms complejas que los mdulos, ya que abarcan la parteprincipal de la pgina.El mecanismo para personalizar el HTML de un componente determinado es exactamente igual que eldescrito para los mdulos, con algunas diferencias. Para demostrar su funcionamiento se personalizarel funcionamiento de la pantalla de resultados de bsqueda.Para la personalizacin, se desea que las zonas Condiciones de bsqueda y Buscar solo enaparezcan ocultas y que stas sean visibles al hacer clic en un enlace con el texto Bsqueda avan-zada.Para realizarlo, se har lo siguiente:

Ir a la carpeta del componente de bsqueda. En este caso com_search (la cual se encuentra dentrodel directorio components);All dentro se encontrar a la carpeta views. Al entrar a ella, existir otra carpeta con el nombresearch.

NotaDependiendo del tipo de componente, es posible encontrar ms de una carpeta dentro deldirectorio views. Por ejemplo, al ir a la carpeta views del componente com_content seencontrarn 6 directorios: archive, article, categories, category, featured y form. Cadacarpeta es una funcionalidad distinta del componente.

Al entrar a la carpeta search, se encontraran varios archivos y adems un directorio con elnombre tmpl, el cual contiene (al igual que en el caso de los mdulos) archivos .php con lasetiquetas HTML que conforman al componente.

NotaNote que existe ms de un archivo .php dentro del directorio. Esto es debido a que, al serlos componentes ms complejos, suelen dividir su HTML en varios archivos para reunirlosen uno solo (default.php).

El archivo a copiar es default_form.php, ya que posee las etiquetas HTML que conforman laszonas a personalizar.Lo siguiente a realizar es crear una carpeta com_search dentro del directorio html de la plantilla.All dentro se crear otra carpeta llamada search para luego pegar el archivo default_form.phplocalizado en el paso anterior.

NotaNote que se ha creado una carpeta search. Esta corresponde al nombre de la carpeta searchque se encuentra dentro del directorio views del componente. En caso de que existan otrascarpetas con otros nombres, se debe seguir la misma lgica.

91

Figura 3.14: Diseo actual de la pantalla de resultados de bsqueda92

Figura 3.15: Disposicin de archivos en la carpeta tmpl

Figura 3.16: Estructura del directorio html de la plantilla

93

Lo siguiente ser abrir el archivo default_form.php copiado, y modicarlo al gusto.Las etiquetas que corresponden a la zona a personalizar son:

addScriptDeclaration: http://docs.joomla.org/JDocument/addScriptDeclarationaddStyleDeclaration: http://docs.joomla.org/JDocument/addStyleDeclaration

Otra manera de realizar el trabajo es utilizando las etiquetas y. El funcionamiento sera el mismo, pero todo el cdigoquedara dentro del del documento.

NotaPara realizar la funcionalidad JavaScript, se ha aprovechado que Joomla utiliza Mootoolscomo framework JavaScript. Esta biblioteca posee una clase JavaScript llamada Fx.Slideque permite realizar el tipo de efecto se necesita. Ms informacin sobre Fx.Slide: http://mootools.net/docs/more/Fx/Fx.Slide

NotaUna buena prctica es incorporar el texto Bsqueda avanzada dentro de los archivos delidioma de la plantilla y no en el mismo archivo .php.

De esta manera ya se tiene terminada la personalizacin del componente. En caso que se quiera realizarlo mismo con otros componentes se deben realizar los mismos pasos descritos anteriormente.

3.3.1. Conclusiones

Se ha podido comprobar el potencial de las plantillas de Joomla para la personalizacin de componentesy mdulos. Esta prctica posee varias ventajas importantes:

Adaptacin a las necesidades sin mucho esfuerzo;No se modic ningn archivo del ncleo de la extensin permitiendo que, en caso de actualiza-cin, no se pierda el trabajo realizado, minimizando el tiempo de mantenimiento;Centralizacin del trabajo: el mismo transcurri dentro de la carpeta html de la plantilla.

3.4. Incorporacin de jQueryAnteriormente se mostr el aprovechamiento de Mootools para facilitar el armado de funcionesJavaScript. Sin embargo, puede suceder que se necesite utilizar a jQuery, otra popular bibliotecaJavaScript para dotar de funcionalidades a la plantilla.

NotaMs informacin sobre jQuery: http://jquery.com/ Aprender a utilizar jQuery: http://librojquery.com/

96

Figura 3.17: Diseo nal de la pgina de resultados

97

Figura 3.18: Diseo de la pgina de resultados al hacer clic en el enlace Bsqueda avanzada

Los pasos para incorporar jQuery en la plantilla son los siguientes:

Descargar la biblioteca jQuery: http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Guardar el archivo jquery.min.js dentro de la carpeta js de la plantilla;Abrir el index.php de la plantilla e insertar a la biblioteca dentro del , despus de ladirectiva pero antes de la llamada al archivo template.js:

La lnea anterior permite que jQuery funcione sin problemas con otras bibliotecas JavaScript(como es el caso de Mootools). Hay que tener en cuenta que, cuando se escriban funcionesjQuery, en lugar de utilizar el smbolo $, se deber utilizar la palabra jQuery. Por ejemplo,la siguiente funcin:

$("#footer").hide();

Pasa a ser:jQuery("#footer").hide();

Ms informacin sobre jQuery.noConflict(): http://api.jquery.com/jQuery.noConflict/

Y listo. De esta forma es posible utilizar jQuery sin problemas en la plantilla.

3.4.1. Creacin de un slideshow con jQuery

Aprovechando que se incorpor a jQuery en la plantilla, se mostrar la manera de crear un slideshowde imgenes para completar la funcionalidad planeada en la pgina de inicio:

Figura 3.19: Diseo del slideshow

Para esto, se utilizar la extensin de la biblioteca jQuery Cycle Plugin: http://jquery.malsup.com/cycle/Recordar que la zona que conforma al slideshow en la plantilla esta compuesta de la siguiente forma:

99

La posicin interpoint-slideshow_inferior mostrar a un mdulo del tipo HTML personalizado, endonde se incorporarn varias imgenes para hacer funcionar al slideshow. Al insertar las imgenes, elHTML nal queda de la siguiente manera:

Es probable que al hacerlo, todo el slideshow se vea mal. Esto por ahora no importa, ya que luego, alestablecer las funciones relativas al slideshow el problema se habr solucionado.Lo siguiente a realizar ser descargar jQuery Cycle Plugin: http://jquery.malsup.com/cycle/download.html.Descomprimir el archivo .zip descargado y copiar el archivo jquery.cycle.all.min.js en la carpetajs de la plantilla, de forma que quede en conjunto con jquery.min.js y template.js:Luego, insertar a jquery.cycle.all.min.js en la plantilla. La llamada al archivo debe quedar pordebajo de jquery.min.js pero antes de template.js:

Figura 3.20: Archivos dentro de la carpeta js

next: '#slideshow_der '});

});

La creacin del slideshow es muy fcil, tan solo se debe especicar:

El ID del contenedor de las imgenes: #slideshow_contenedor;El efecto a utilizar entre transiciones: scrollHorz;El tiempo de transicin entre imagenes: 3000 milisegundos;Los IDs de los elementos para pasar a la siguiente o anterior imagen: #slideshow_izq y #slideshow_der.

Ms informacin y otras opciones sobre la utilizacin de jQuery Cycle Plugin: http://jquery.malsup.com/cycle/

3.5. Personalizacin de las pginas de erroresUna de los aspectos al que menos se suele prestar atencin en el momento de crear un sitio son laspginas de errores. stas son muy importantes, ya que, en caso de presentarse un error ante el usuario,se lo debe incentivar a que no abandone la pgina y contine en ella.

101

Figura 3.21: Slideshow en funcionamiento

Cada error siempre va acompaado por un cdigo de estado HTTP. Los tipos de errores ms comunesson:

404 - Pgina no encontrada: Sucede cuando el usuario quiere acceder a una pgina que noexiste ms;500 - Error interno: Sucede al existir un error interno del servidor web.

NotaMs informacin sobre los cdigos de estado HTTP: http://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP

Como se puede observar, no posee un aspecto muy amigable.Lo que se har es modicar la pgina de errores para que herede el diseo del sitio. Para esto, hacerloes necesario modicar el archivo error.php que se encuentra en la carpeta raz de la plantilla. Al abriral archivo se encontrar lo siguiente:

Figura 3.22: Diseo predeterminado de la pgina de error 404 en Joomla

if (!isset($this->error)) {$this->error = JError::raiseWarning(404, JText::_('JERROR_ALERTNOAUTHOR ')

);$this->debug = false;

}?>

JERROR_LAYOUT_YOU_HAVE_NO_ACCESS_TO_THIS_PAGE'); ?>

:

//Parametros de la plantilla$imagenLogo = $params->get('logo');$eslogan = $params->get('eslogan ');

?>


Lorem ipsum dolor sit amet

La pgina que esta buscando ya no se encuentra disponible.Lo invitamos a realizar un bsqueda...

o ir a la

Para entender de mejor manera lo incorporado se detallar cada seccin:

3.5.1. Seccin 1: Parmetros de la plantilla

A igual que en index.php, se necesita acceder a las valores de los parmetros de la plantilla. Sinembargo, aqu se realiza diferente forma, utilizando getApplication(), el cual posee el objeto PHPglobal de la aplicacin.

NotaMs informacin sobre getApplication: http://docs.joomla.org/JFactory::getApplication

3.5.2. Seccin 2: Tipo de documento, ttulo y archivos CSSxml version="1.0" encoding=""?>

Para la cabecera, se mostrar el logotipo del sitio y se alinear en el centro.

3.5.4. Seccin 4: Mensajes de error

La pgina que esta buscando ya no se encuentra disponible.Lo invitamos a realizar un bsqueda...

o ir a la

NotaUna buena prctica es no incorporar los textos en nuestro idioma dentro del archivo, sinoutilizar los archivos del idioma de la plantilla. Esto se puede realizar una vez comprobadoque los textos a mostrar son los correctos.

3.5.5. Seccin 5: Footer

El documento se termina mostrando, en el pie, el nombre del sitio y el ao corriente.Por otro lado, es necesario escribir algunos estilos CSS para los elementos de la pgina de error. Entemplate.css se incorpora:/* Paginas de error---------------------------------------------------------*/#error {

text-align: center;padding: 50px 0;

}

#error p{font-size: 25px;margin: 0;

}

#error input{font-size: 25px;border: 5px solid #ccc;

}

#error_descripcion{border: 1px solid #CCC;margin: 20px 0;

}

#error_descripcion p{font-size: 9px;

}

110

Figura 3.23: Diseo nal de la pgina de error 404

111

Figura 3.24: Diseo nal de la pgina de error 500

112

Captulo 4

Apndice

4.1. Evitar que Mootools cargue de forma predeterminadaExisten ocasiones en que no se desea cargar a Mootools en la plantilla, ya sea porque se va a utilizar otrabiblioteca JavaScript o porque se necesita agilizar la velocidad de la pgina reduciendo las peticionesa archivos que no se utilizan.Para quitar cualquier archivo .js se debe realizar lo siguiente:En index.php, antes de la directiva insertar:

En este caso, se estar eliminando de la plantilla los archivos mootools-core.js, core.js, caption.js,mootools-more.js. Algo a tener en cuenta es que Joomla (y muchas extensiones) suelen hacer uso deMootools, por lo que realizar esta prctica puede traer problemas posteriores.

4.2. Estilos determinados para diferentes navegadoresUn problema comn al disear una pgina es tratar de hacer que el diseo sea compatible con lamayora de los navegadores. A partir de Joomla! 1.6 el CMS incorpora una nueva caracterstica quees la incorporacin de estilos especcos dependiendo del tipo de navegador web.Suponiendo que se desea mostrar estilos diferentes para Internet Explorer yMozilla Firefox, lo primeroa realizar ser crear dos archivos: template_msie.css y template_mozilla.css. El primero ser el archivoque cargar Internet Explorer, mientras que el otro ser el que cargue Mozilla Firefox.Luego, en el archivo index.php de la plantilla se incorpora:

if (!is_array($archivos)):$archivos = array($archivos);

endif;foreach($archivos as

desarrollo_plantillas_joomla

Documents

Transcript of desarrollo_plantillas_joomla