desarrollo plan till as joomla

8/3/2019 Desarrollo Plan Till As Joomla

1/105


2/105

Sobre este libro

Autor: Leandro D'Onofrio para Comunidad Joomla y Biblioteca Comunidad Joomla.

Correcciones: Rafael Gmez y Gustavo Ral Aragn.

Licencia: Creative Commons Reconocimiento-NoComercial-CompartirIgual 2.5 Espaa.

Obtener el material de aprendizaje

El material de aprendizaje y el cdigo fuente de los ejemplos que se desarrollan en el libro estn

hospedados en un repositorio de Github. Desde all es posible descargar un archivo .zip o .tar con

todo el material.

Tienes correcciones, mejoras o quieres colaborar en el libro?
https://github.com/dzignus/manual_jplantillas/wiki/%C2%BFTienes-correcciones,-mejoras-o-quieres-colaborar-en-el-libro%3Fhttps://github.com/dzignus/manual_jplantillashttp://creativecommons.org/licenses/by-nc-sa/2.5/es/http://comunidadjoomla.org/http://comunidadjoomla.org/http://biblioteca.comunidadjoomla.org/http://comunidadjoomla.org/http://dzign.us/


3/105

ndiceBienvenido/a

Requisitos

Software

Breve introduccin a las plantillas en Joomla!

Tipos de plantillas

Encontrar las plantillas disponibles en la administracin del CMS

Estructura bsica de una plantilla

Carpetas y archivos obligatorios

Carpetas y archivos no obligatorios

Creacin de los archivos de la plantilla

Anlisis previo

Utilizar la plantilla atomic como base

templateDetails.xml

Descubrir la plantilla en la administracin de CMS

index.php

El sistema de grillas de BluePrint

Maquetacin del diseo

template.css

Finalizando la plantilla

Temas avanzados

Estilos de plantillas, parmetros de configuracin y maquetaciones diferentes por

secciones

Cambiar la imagen del logo

Cambiar el texto del eslogan

Aplicar una maquetacin diferente

Personalizacin de mdulos y componentes

Extensiones desarrolladas en MVC

Mdulos personalizados

Personalizar la forma con que muestran los mdulos

Personalizar el HTML de un mdulo en particular

Componentes personalizados

Conclusin

Incorporacin de jQuery

Creacin de un slideshow con jQuery
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#creaci%C3%B3n-de-un-slideshow-con-jqueryhttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#incorporaci%C3%B3n-de-jqueryhttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#conclusi%C3%B3nhttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#componentes-personalizadoshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#personalizar-el-html-de-un-m%C3%B3dulo-en-particularhttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#personalizar-la-forma-con-que-muestran-los-m%C3%B3duloshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#m%C3%B3dulos-personalizadoshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#extensiones-desarrolladas-en-mvchttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#personalizaci%C3%B3n-de-m%C3%B3dulos-y-componenteshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#aplicar-una-maquetaci%C3%B3n-diferentehttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#cambiar-el-texto-del-esloganhttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#cambiar-la-imagen-del-logohttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#estilos-de-plantillas-par%C3%A1metros-de-configuraci%C3%B3n-y-maquetaciones-diferentes-por-seccioneshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#temas-avanzadoshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#finalizando-la-plantillahttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#template.csshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#maquetaci%C3%B3n-del-dise%C3%B1ohttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#el-sistema-de-grillas-de-blueprinthttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#index.phphttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#descubrir-la-plantilla-en-la-administraci%C3%B3n-de-cmshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#templatedetails.xmlhttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#utilizar-la-plantilla-atomic-como-basehttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#an%C3%A1lisis-previohttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#creaci%C3%B3n-de-los-archivos-de-la-plantillahttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#carpetas-y-archivos-no-obligatorioshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#carpetas-y-archivos-obligatorioshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#estructura-b%C3%A1sica-de-una-plantillahttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#encontrar-las-plantillas-disponibles-en-la-administraci%C3%B3n-del-cmshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#tipos-de-plantillashttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#breve-introducci%C3%B3n-a-las-plantillas-en-joomlahttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#softwarehttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#requisitoshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#bienvenidoa


4/105

Personalizacin de las pginas de errores

Apndice

Evitar que Mootools cargue de forma predeterminada

Estilos determinados para diferentes navegadores

Detectar la pgina principal del sitio

Detectar si un usuario est logueado en el sitio

Detectar un componente determinado
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#detectar-un-componente-determinadohttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#detectar-si-un-usuario-est%C3%A1-logueado-en-el-sitiohttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#detectar-la-p%C3%A1gina-principal-del-sitiohttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#estilos-determinados-para-diferentes-navegadoreshttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#evitar-que-mootools-cargue-de-forma-predeterminadahttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#ap%C3%A9ndicehttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#personalizaci%C3%B3n-de-las-p%C3%A1ginas-de-errores


5/105

Bienvenido/a

En 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 finalizar 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 modificar correctamente plantillas ya creadas;

Saber crear plantillas desde cero.

Requisitos

Para comenzar es necesario contar con los siguientes conocimientos mnimos:

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

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 flujos de control (if, if else, else).

Joomla!:

Conocimientos bsicos del CMS: administracin de contenidos, instalacin de

extensiones, manejo de componentes y mdulos.

Software

Para 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;
http://notepad-plus-plus.org/https://addons.mozilla.org/es-es/firefox/addon/firebug/http://www.mozilla-europe.org/es/http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


6/105

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 servidor

remoto (Filezilla /WinSCP /Putty);

Joomla! 1.6 o posterior instalado en el servidor local o remoto.

Breve introduccin a las plantillas en Joomla!

Antes de comenzar, puede que se pregunte qu es una plantilla y para qu sirve?. Las plantillas son

archivos que permiten controlar el diseo y la disposicin de los elementos a lo largo de un sitio. Las

mismas 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 especificadas que dependern de cada plantilla.

En particular, Joomla posee un excelente sistema de plantillas que permite adaptar cualquier sitio a

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 al

momento de crear una plantilla. Actualmente, la ltima versin es la 1.6, la cual incorpora:

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 flexibilidad y

personalizacin 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 de

navegador.

Si desea conocer en mayor detalle otras caractersticas nuevas de Joomla! 1.6, puede

visitar el sitio oficial dedicado a dicha versin: http://www.joomla.org/16/

Tipos de plantillas

Joomla cuenta con dos tipos de plantillas:

Plantillas para utilizar en la administracin (backend): Son creadas especialmente para la

parte de administracin, las cuales pueden incorporar funcionalidades que faciliten el manejo

de los contenidos en el sitio.

Plantillas para utilizar en el sitio pblico (frontend): Son creadas para ser visualizadas por

los visitantes. Pueden ser simples o complejas, todo depender del tipo de sitio y hacia

quienes est orientado. Durante este manual aprender a crear este tipo de plantillas.
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://www.joomla.org/16/http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://www.joomla.org/http://www.chiark.greenend.org.uk/~sgtatham/putty/download.htmlhttp://winscp.net/http://filezilla-project.org/http://www.mamp.info/en/index.htmlhttp://www.apachefriends.org/es/xampp.htmlhttp://netbeans.org/projects/php/http://www.aptana.com/http://macromates.com/


7/105

Encontrar las plantillas disponibles en la administracin del CMS

Las plantillas disponibles para utilizar se encuentran, dentro de la administracin, yendo a:

Extensiones Gestor de plantillas Plantillas:

A travs del filtro por locacin es posible mostrar las plantillas pertenecientes al sitio o a la

administracin. Al hacer clic sobre la imagen correspondiente, se mostrar una vista alargada del
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


8/105

diseo de la plantilla. Adems, al clickear en el enlace de detalle, podr acceder a los archivos

principales que componen a la plantilla, as como editarlos desde la misma interfaz:

Por otro lado, al acceder al apartado estilos, como se mencion antes, podr navegar por una de las

nuevas 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 un

diseo predeterminado, pero en la seccin contacto se requiere que el color de fondo sea otro y que


9/105

la estructura sea ms angosta.

Las caractersticas de personalizacin dependern de cada plantilla. Existirn plantillas que

otorgarn muchas opciones y flexibilidad mientras que otras otorgarn pocas o ninguna.

Al acceder a uno de los items enlistados, es posible acceder a las opciones de personalizacin yespecificar 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.

Estructura bsica de una plantilla

Las plantillas en Joomla! van alojadas dentro de la carpeta templates, en el directorio raiz del CMS.All dentro, cada plantilla esta separada por carpetas.


10/105

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 raiz: Es la carpeta que contiene todos los archivos de la plantilla. Su nombre no

debe poseer espacios intermedios. Su ubicacin est dentro de la carpeta templates, quese encuentra en el directorio raz;

index.php: Archivo principal de la plantilla. Contiene la estructura bsica, as como tambin

las llamadas a archivos CSS y JavaScript. Su contenido est formado por etiquetas HTML y

PHP;

templateDetails.xml: Archivo XML que sirve para instalar la plantilla en el CMS. Posee la

siguiente 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 configuracin de la plantilla.

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;


11/105

template_thumbnail.png: Pequea imagen que tambin acta como vista previa al momento

de seleccionar una plantilla en el panel de administracin;

index.html: Archivo HTML en blanco (sin etiquetas). Sirve como mtodo de seguridad en

servidores que permiten explorar directorios de archivos desde el navegador. Es

recomendable crear 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 obligatorio

incluirlos. 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 lo

general, 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 o

cuando una pgina no ha sido encontrada;

favicon.ico: Imagen que se utilizar como icono de la pgina. Joomla comprueba que el

archivo exista y, en caso positivo, se incorporan automticamente las etiquetas apropiadas

para mostrarlo;

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 permitensobrescribirla salida HTML que

imprime el CMS de forma predeterminada en componentes y mdulos. Es decir, si desea

personalizar el contenido 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

diferentes dependiendo del idioma configurado para el sitio y la administracin. Cada idioma

est separado por su correspondiente carpeta.

Creacin de los archivos de la plantilla

Anlisis previo

Antes de comenzar a crear los archivos pertenecientes a la plantilla, es muy importante trabajar un

aspecto fundamental en toda pieza de software: el anlisis previo.

A continuacin de enumeran algunas cuestiones que deber tener en cuenta al momento del anlisis:

Definiciones grficas:

Contar con un diseo grfico en el cual se basar la plantilla. El diseo deber

contemplar diferentes aspectos que permitan al usuario estar cmodo y adems

satisfaga las necesidades del sitio: Gama de colores, disposicin de los elementos,

tcnicas grficas utilizadas, usabilidad y accesibilidad.

Definiciones funcionales:
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


12/105

Dependiendo de los requerimientos y necesidades, el sitio contar con una cantidad

definida de funcionalidades. Para implementarlas, deber analizar de que forma

realizarlas: Utilizando las caractersticas que el CMS trae por defecto, instalando

extensiones de terceros o desarrollando una solucin personalizada.

Debe tener en cuenta que la plantilla sea lo suficientemente extensible y flexible para

adecuarse a distintas situaciones. Una manera de hacerlo es a travs de la

implementacin de parmetros de configuracin en la plantilla.

Definiciones tcnicas:

Si ya ha trabajado en el mundo del diseo y desarrollo web, sabr que no siempre es

posible realizar un sitio que luzca exactamente igual en todos los navegadores,

versiones y dispositivos. Particularmente, Internet Explorer suele ser el navegador

ms problemtico. Por lo tanto deber tomar como determinacin que navegadores,

versiones y dispositivos sern soportados por la plantilla.

Nombre de la plantilla e informacin asociada: Deber elegir un nombre

representativo para la plantilla y si lo desea, una licencia;

Posiciones de mdulos: Esta es una definicin que depender de los elementos que

compongan a la plantilla y su disposicin. Para hacerlo, deber delimitar el diseo en

zonas funcionales, por ejemplo: zona perteneciente al men, zona perteneciente a

la caja de bsqueda, zona perteneciente a elementos izquierdos, etc. A partir de esta

definicin, le ser fcil definir las posiciones de mdulos y sus nombres.

Tenga en cuenta que no siempre se podr contar con anticipacin con todos los puntos

nombrados, sin embargo, cuanto antes los tenga, mejor.

En el caso de este manual, se utilizar el siguiente diseo para la realizacin de la plantilla:


13/105

Crditos del diseo: PSD Style

Al realizar el anlisis, es posible definir las siguientes posiciones de mdulos y funcionalidades:
http://psdstyle.net/


14/105

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

Nombre de la plantilla: InterPoint

Licencia: GNU General Public License version 2

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

Utilizar la plantilla atomic como base

A partir de la versin 1.6, Joomla incorpora una nueva plantilla llamadaatomic, la cual tiene como

objetivo que pueda ser utilizada como base para la creacin de nuevas plantillas. Su principal

caracterstica es la de utilizar Blueprint, un frameworkCSS que permite agilizar la creacin de estilos

y maquetaciones.

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.

El nombre debe estar en minsculas y con guiones bajos (en caso de tener espacios de por

medio).
http://www.blueprintcss.org/http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


15/105

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

solitatas.

templateDetails.xmlComo se coment anteriormente, templateDetails es un archivo XML que posee toda la

informacin relacionada con el template. Su importancia radica en que es el archivo que lee

Joomla al momento de instalar la plantilla y mostrar su informacin asociada en el panel de

administracin.

Muchas de las definiciones 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/09

Ron Severdia

[email protected]

http://www.kontentdesign.com

Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.

GNU General Public License version 2 or later; see LICENSE.txt

1.6.0

TPL_ATOMIC_XML_DESCRIPTION

html

css

images

language

js

index.php

index.html


16/105

favicon.ico

templateDetails.xml

template_preview.png

template_thumbnail.png

component.php

error.php

atomic-bottomleft

atomic-bottommiddle

atomic-search

atomic-sidebar

atomic-topmenu

atomic-topquote

en-GB/en-GB.tpl_atomic.ini

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

Con la informacin recopilada, el mismo quedar:

InterPoint

2011

Comunidad Joomla

[email protected]

http://www.comunidadjoomla.org/

Comunidad Joomla 2011

GNU General Public License version 2

1.0

TPL_INTERPOINT_XML_DESCRIPTION

html

css

images

language

js

index.php

index.html

favicon.ico


17/105

templateDetails.xml



component.php

error.php

interpoint-menu_ingresar

interpoint-menu_superior

interpoint-destacado_superior

interpoint-video

interpoint-caja_medio

interpoint-destacado_inferior

interpoint-slideshow_inferior

interpoint-menu_inferior

es-ES/es-ES.tpl_interpoint.ini

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

Para entender lo modificado, a continuacin se muestra un detalle de cada seccin correspondiente

al archivo:

Seccin 1

InterPoint

2011

Comunidad Joomla

[email protected]




1.0


Las primeras etiquetas corresponden a la informacin asociada a la plantilla: Nombre, fecha de

creacin, autor, contacto, licencia, versin y descripcin.

Note que en la descripcin se ha puesto TPL_INTERPOINT_XML_DESCRIPTION, que es

una referencia que se incorporar en el archivo de lenguaje es-ES.tpl_interpoint.ini .


18/105

La idea es que todos los textos localizados estn situados en el archivo del idioma, por si en

un futuro la plantilla se utilizada en ms idiomas.

Seccin 2

html

css

images

language

js

index.php

index.html

favicon.ico

templateDetails.xml



component.php

error.php

Luego se especifican los archivos y carpetas que compondrn a la plantilla. Es muy importante, a

medida que se avanza con el desarrollo de la plantilla, ir especificando en esta seccin los archivos

nuevos creados. En caso contrario, si no existe referencia a un archivo, cuando se quiera instalar la

plantilla el CMS mostrar un error.

Seccin 3




interpoint-video





A continuacin se especifican las posiciones admitidas por los mdulos en la plantilla. El nombre de

cada una suele ser un breve resumen de la posicin o funcionalidad especifica de dicha zona. Luego,

en el archivo del idioma es-ES.tpl_interpoint.sys.ini es posible especificar una

descripcin ms explicativa de cada posicin.

Seccin 4




19/105

Por ltimo se aaden los archivos del idioma, los cuales tendrn la descripcin y textos explicativos

de las posiciones de mdulos y parmetros de la plantilla. El archivo es-

ES.tpl_interpoint.inicontendr todas las definiciones 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 elmomento de asignar un mdulo a una posicin). Para poder utilizar 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.iniy 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! 1.6"

Note que TPL_INTERPOINT_XML_DESCRIPTION hace referencia al trmino incorporado en

la etiqueta en el archivo templateDetails.xml. El texto de

descripcin se puede 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! 1.6"

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"

Guardar es-ES.tpl_interpoint.sys.ini .

Note que cada referencia de descripcin de mdulos esta compuesta porTPL_(nombre de

la plantilla)_POSITION_(nombre de la posicin del mdulo). Tambin se

ha agregado nuevamente 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.

En el momento de instalar la plantilla, los archivos es-ES.tpl_interpoint.iniyes-

ES.tpl_interpoint.sys.inise copiarn dentro de la carpeta language/es-ES, en

el directorio raiz del CMS.

En el archivo templateDetails.xml tambin se especifican las opciones de


20/105

personalizacin de 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.

Descubrir la plantilla en la administracin de CMSAntes de continuar, es importante que Joomla reconozca la copia realizada de la plantilla, ya que ser

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

Lo siguiente ser seleccionar el tem de la plantilla y presionar el botn Instalar. Si todo sali bien

debe aparecer el texto La instalacin de la extensin descubierta se ha realizado

correctamente y ms abajo la descripcin de la plantilla:


21/105

Finalmente, para poder visualizar la plantilla en el sitio, vaya a Extensiones Gestor de plantillas:

Seleccionar el tem de la plantilla nueva y presionar el botn Predeterminada. De esta forma se

lograr que al ingresar al sitio se cargue la plantilla.

index.php

Al ser uno de los archivos ms importantes, es fundamental entender las etiquetas que conforman al

index.php. A continuacin se mostrar el archivo completo para luego ir viendo en detalle cada

seccin que lo conforma.


22/105

$app = JFactory::getApplication();

?>

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


23/105

Seccin 1

defined('_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 y

contexto del CMS (de forma tal que si un usuario quiere vulnerar el sitio ejecutando un archivo en


24/105

particular, le sea difcil realizarlo).

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

Seccin 2

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

Para crear varias funcionalidades JavaScript, Joomla utiliza el frameworkMootools. Dicho framework

est compuesto por varios archivos .js que se cargan de forma predeterminada en la cabecera de

la plantilla (). Al incorporar la lnea mostrada con el argumento true, se especifica que

tambin se cargue en la plantilla el archivo mootools-more.js , el cual posee diversas funciones

que potencian an ms al framework JavaScript.

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

plantilla.

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

Seccin 3


Esta lnea guarda en la variable $app una referencia al objeto PHP de Joomla JApplication . Sin

entrar en detalles tcnicos, utilizando esta lnea es posible obtener informacin del sitio para mostrardentro de la plantilla (por ejemplo: nombre del sitio, ttulo de la pgina, nombre del template, etc).

Puede consultar la informacin relacionada con JApplication en http://api.joomla.org/Joomla-

Framework/Application/JApplication.html

Seccin 4



25/105

El cdigo mostrado crea e incorpora las etiquetas necesarias para rellenar la cabecera de la plantilla:

Etiqueta ;Etiquetas :

content-type ;

robots;

keywords;

rights;

language;

generator;

Etiqueta ;

Etiquetas para cargar estilos CSS predeterminados, favicon y RSS;

Etiquetas para cargar archivos y funciones JavaScript predeterminados.

A algunas etiquetas meta, Joomla permite desactivarlas o editarlas, mientras que a otras no. Por otro

lado, dependiendo si se est utilizando una extensin, Joomla puede cargar ms archivos CSS y

JavaScript dentro de la cabecera.

Seccin 6


26/105

En esta parte del cdigo, $this se utiliza para completar el valor del atributo href hacia los

archivos CSS: primero obteniendo la URL del sitio ($this->baseurl) y luego el nombre de la

plantilla configurada para utilizar ($this->template).

Seccin 7


27/105

Ya dentro del cuerpo del documento, entre etiquetas H1 se utiliza $app para mostrar el nombre del

sitio. Dicho nombre es obtenido de la configuracin del CMS.

Seccin 10

El siguiente trozo de cdigo se repite varias veces en el cuerpo del documento, por lo tanto es

importante entender su funcionamiento:

$this->countModules(): Esta funcin lo que hace es contar la cantidad de mdulos

publicados en una determinada posicin de la plantilla. En el ejemplo mostrado, se preguntacuantos mdulos estan publicados en la posicin atomic-search , en caso de ser igual o

mayor a 1, se ejecuta el cdigo siguiente. Esto se suele hacer para que no se muestre cdigo

HTML vaco en caso que un mdulo no est publicado (como es el caso de las etiquetas

en el cdigo que se muestra.

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

: Representa una de las

partes ms importantes de la plantilla. Con esta directiva se indica la carga de un mdulo en

particular y de una manera especifica. Esto se establecer a partir de dos atributos:name: En este atributo se debe especificar el nombre de una posicin determinada

de la plantilla. Estas posiciones son especificadas en el archivo

templateDetails.xml y su nombre debe ser nico, sin espacios y lo suficiente

descriptivo para entender que tipo de mdulo debera ir en esa zona. Por ejemplo, el

atomic-search indica que esa zona de la plantilla es adecuada para mostrar el

buscador del sitio (sin embargo, esto no es obligatorio, es posible poner el mdulo

que se desee en dicha posicin).

style: En este atributo de especifica el estilo con que se quiere mostrar un mdulo

determinado. Dicho estilo no se refiere a CSS, sino a qu tipos de etiquetas HTML

encerrarn al mdulo y de qu manera. De forma predeterminada, Joomla! cuenta

con seis estilos para mostrar un mdulo:

xhtml: El mdulo estar encerrado por solo una etiqueta la cual

tendr como atributo la clase moduletable+sufijo_del_modulo . El

sufijo es un parametro que se puede especificar en cada mdulo dentro del

panel de administracin y sirve basicamente para diferenciar 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 estarencerrado dentro de una tabla HTML.

none: El mdulo aparecer en crudo, es decir, sin ningn tipo de etiquetas
http://docs.joomla.org/JDocumentHTML/countModules


28/105

encerrndolo, solo el HTML que compone al mismo;

outline: Este estilo se suele utilizar para funciones de depuracin. El mismo

permite mostrar una linea punteada delimitando el tamao del mdulo para

notar su tamao y espacio ocupado en la plantilla.

Puede encontrar ms informacin sobre los diferentes estilos de presentacin de mdulos en

http://docs.joomla.org/What_is_module_chrome%3F

A su vez, Joomla! permite incorporar estilos personalizados para mostrar mdulos. Estos estilos

deben ir especificados en el archivo modules.php dentro de la carpeta html de la plantilla.

Ms 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 elementos

funcionales al sitio: Mens de navegacin, cajas de encuestas, formularios de ingreso, etc. La

posicin principal de la plantilla, por lo general, es ocupada por el contenido de los distintos

componentes del CMS (artculos de noticias, seccciones y categoras, etc).

Otros trozos de cdigo que incorporan posiciones de mdulos en index.php:

Note que varios trozos de cdigo utilizan estilos personalizados: container, bottommodule y

sidebar. Ms adelante se explicar la creacin de estilos personalizados de mdulos.

Seccin 11
http://docs.joomla.org/What_is_module_chrome%3F


29/105

Esta directiva debe aparecer slo una vez en la plantilla. Se utiliza para mostrar diferentes mensajes

del CMS (por ejemplo: cuando un usuario se registra en el sitio, el CMS le informa que el registro fu

satisfactorio o erroneo). Dichos mensajes aparecen en la zona en donde se incorpore la directiva.

Seccin 12

Como se coment anteriormente, el contenido de los componentes del CMS suelen ocupar la zona

principal de la plantilla. Esta lnea justamente tiene esa finalidad: permite mostrar el contenido del

componente en que se este situado (artculos, categoras, formulario de registro, etc).

Seccin 13

Finalmente, llegando al final del archivo, se incorporan una serie de etiquetas para mostrar el ao

presente y el nombre del sitio, formando un texto similar a: 2011 Mi Sitio Web.

Lo siguiente a realizar es la modificacin de index.php para crear una maquetacin en base a las

necesidades requeridas. Como se utilizar a BluePrint como herramienta, es necesario primero

entender su funcionamiento.

El sistema de grillas de BluePrint

BluePrint es una coleccin de archivos .css, los cuales poseen variados estilos predefinidos para

ahorrar tiempo en diferentes tareas del diseo web: Maquetaciones, reseteo de estilos, diseo de

formularios, tipografas, etc. Para la creacin de la maquetacin de la plantilla se utilizar su sistema

de grillas.

Puede 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 el

proceso de maquetacin. Su mecanismo permite crear un mximo de 24 columnas (o grillas) las

cuales se pueden combinar dependiendo de las necesidades:
http://www.blueprintcss.org/http://www.blueprintcss.org/http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


30/105

La clave de su utilizacin es aadir una serie de clases predefinidas en los elementos del documento

para 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

deber incorporar en el cuerpo del documento:


31/105

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 centrada horizontalmente. Luego, cada con la clase span-12 especifica que

ocupen el espacio de 12 grillas, o sea, la mitad del espacio disponible (recordar que como mximo se

dispone de 24 grillas). De la misma forma, si se desea que cada columna ocupe un tercio del espacio,

lo nico que hay que hacer es 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 visualizarde forma incorrecta.

Tambin existen otras clases que permiten modificar 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 la izquierda, todo depender del valor que se le asigne a x (por ejemplo: prepend-4 /

append-4).

Maquetacin del diseo

Ya explicado el sistema de grillas de BluePrint, se comenzar la modificacin del index.php para

agregar la maquetacin del diseo.

Modificaciones en

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

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 de

lectura de derecha a izquierda (RTL).



32/105


33/105

Maquetacin del texto superior, video y caja destacada

En esta seccin se tendr en primer lugar dos columnas y luego una columna ocupando el total del

espacio:


34/105

Note que se ha agregado para que aparezcan los

mensajes del sistema debajo de cabecera del diseo.

Maquetacin de las columnas del medio

Las columnas del medio cargaran tres artculos publicados en el home del sitio. Para eso se utilizar

la etiqueta :

Para hacer que cada artculo ocupe una columna, en la administracin del CMS, ir a MensMen

principal y luego acceder al tem que se tenga marcado como pgina de Inicio:


35/105

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


36/105

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 columnas

del medio.

Otra solucin para generar tres columnas sera utilizar tres mdulos separados y crear por

nuestra cuenta el HTML de cada columna.

Maquetacin del texto destacado inferior y slideshow


37/105

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

la zona del slideshow.

Dentro del que va a contener el slideshow, se han agregado dos etiquetas que

servirn para construir la navegacin entre imgenes.

Maquetacin del footer y zona inferior

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

men inferior:


38/105

Note que adems de las clases span8 se utiliz prepend3 para mover el contenido de las

columnas hacia la derecha en cada columna.

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



39/105


40/105

Si se observa al sitio, se visualizar algo parecido a:


41/105

En caso de no tener ningn artculo publicado en la pgina de inicio, la parte del centro

aparecer vaca.

template.css

Lleg el momento de aadir diseo a la plantilla. Para eso se editar el archivo template.css que

se encuentra dentro de la carpeta css de la plantilla. Note que ya existe contenido dentro del

archivo, lo que se har es borrarlo para luego incorporar los estilos apropiados.

Antes de comenzar a escribir los estilos, es muy importante tener preparados los recortes de

las diferentes imgenes que componen el diseo. Dichas imgenes deben ir guardadas en la

carpeta images de la plantilla.

Si no sabe recortar imgenes con Photoshop, puede consultar el siguiente artculo:

http://www.todo-photoshop.com/tutorial-photoshop/basicos/recortando_imagenes_photoshop.html

A 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.
http://www.todo-photoshop.com/tutorial-photoshop/basicos/recortando_imagenes_photoshop.htmlhttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


42/105

El nivel de comprensin de los estilos mostrados a continuacin dependaran de los

conocimientos de CSS que posea. Si desea introducirse ms en profundidad con los estilos

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 cuales pueden

mejorarse o implementarse de otra forma.

Estilos generales

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

enlaces, etc:

/* Estilos generales

---------------------------------------------------------*/

body{

background: #FFF;

color: #5f5d5d;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

}

Estilos para la parte superior

Se continua con los estilos para la parte superior:

/* 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;

}
http://www.librosweb.es/


43/105

#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

---------------------------------------------------------*/

#menu_superior ul{

margin: 20px 0 0 30px;

overflow: hidden;

padding: 0;

}

#menu_superior li{

width: auto;


44/105

float: left;

list-style: none;

margin: 0 0 0 20px;

}

#menu_superior li a{

display: block;

text-align: center;


color: #959393;

}

#menu_superior li a:hover{


}

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

}

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

Estilos para el destacado superior, video y caja media

Luego se contina con los estilos para el destacado superior, video y caja del medio:


45/105

/* 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;

color: #FFF;

font-size: 28px;


font-weight: 600;

line-height: 55px;


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{


}

/* 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;


46/105

top: 17px;

}

/* Caja medio

---------------------------------------------------------*/

#caja_medio{

background: #d9eef7;

margin: 50px 0 0 0;

}

#caja_medio p{

padding: 10px;

color: #181818;

font-size: 18px;


margin: 0;

}


47/105

Para completar los espacios se utilizaron tres mdulos del tipo HTML personalizado (uno con el

texto destacado/botn, otro con el video y otro con un pequeo texto para la caja media).

Estilos para las columnas centrales

Luego se incorporan los estilos para las columnas medias:

/* Contenido / Columnas centrales

---------------------------------------------------------*/

#contenido{

margin: 50px 0 0 0;

}

#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;



}

#contenido h2 a:hover{


}

#contenido .leading-0{

margin: 0 50px 0 0;

}


margin: 0 50px 0 0;

}


margin: 0;


48/105

}

#contenido .leading-0 h2{

padding: 0 0 0 69px;

background: transparent url(../images/interpoint-icono-1.png) no-repeat left center;

}




}




}

#contenido .readmore a{

color: #3c8203;


}

#contenido .readmore a:hover{


}

#contenido .readmore a:before {

content: ">> ";

}


49/105

Como se explic anteriormente, los contenidos de las columnas estn conformados por tres artculos

seleccionados para ser publicados en la pgina de inicio.

Estilos para el texto destacado inferior y slideshow

/* Destacado inferior

---------------------------------------------------------*/

#destacado_inferior{

margin: 50px 0 0 0;

}

#destacado_inferior .newsflash-title{

color: #035f88;

font-size: 20px;

font-weight: 600;


}

#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-align: center;

}

#destacado_inferior .readmore:hover{


}

/* Slideshow inferior

---------------------------------------------------------*/

#slideshow_inferior{

margin: 50px 0 0;

position: relative;

}

#slideshow_contenedor{


50/105

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;

}


51/105

Para los mostrar el artculo se utiliz un mdulo del tipoArtculos - Noticias de actualidad. Se lo

configur para mostrar un solo artculo, de una categora definida, ordenado por fecha. De esta

forma, en esta seccin pueden ir, por ejemplo, las ltimas noticias del sitio y cada vez que se carga

una noticia nueva, esta aparece en dicho lugar.

Para la seccin de slideshow, se utiliz un mdulo de HTML personalizado. Se incorpor una sola

imagen en modo de demostracin.

El slideshow an no es funcional. Ms adelante se explicar como agregar la funcionalidad a

la plantilla utilizando JavaScript.

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;


margin: 175px 0 0 0;

line-height: 12px;

}

#menu_inferior{


}

#menu_inferior ul{

overflow: hidden;

padding: 0;

margin: 0;

}


52/105

#menu_inferior li{

width: auto;

float: left;

list-style: none;

margin: 0 0 0 10px;

}

#menu_inferior li a{

display: block;

text-align: center;


color: #6e6d6d;

font-size: 12px;


border-left: 1px solid #6e6d6d;


line-height: 12px;

}

#menu_inferior li:first-child a{

border: 0px;

}

#menu_inferior li a:hover{


}

#menu_inferior .selected a{

color: #036e9e;

}


53/105

Para completar las zonas inferiores se us un solo mdulo Men con distintos enlaces hacia

secciones del sitio.

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;

}


54/105

/* 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 al

sitio y la accin es rechazada, el CMS muestra un mensaje. Los iconos de acciones y tooltips suelen

aparecer cuando se ingresa al sitio con permisos de edicin de artculos:

Estilos completos

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

/* Estilos generales

---------------------------------------------------------*/

body{

background: #FFF;

color: #5f5d5d;

font-family: Arial, Helvetica, sans-serif;


55/105

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;

float: right;


56/105

list-style: none;

margin: 0 0 0 20px;

}

#menu_ingresar li a{

display: block;

width: 72px;

height: 31px;

line-height: 30px;

text-align: center;


color: #FFF;

background: transparent url(../images/interpoint-boton.png) no-repeat center top;

}

#menu_ingresar li a:hover{


}

/* 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;


color: #959393;

}

#menu_superior li a:hover{


}

#menu_superior .selected a{

color: #036e9e;

}


57/105

/* Destacado superior

---------------------------------------------------------*/

#destacado_superior{

margin: 40px 0 0 0;

}

#destacado_superior h3{

color: #035f88;

font-size: 28px;


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-weight: 600;

line-height: 55px;


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{


}

/* 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;


58/105

top: 17px;

}

/* Caja medio

---------------------------------------------------------*/

#caja_medio{

background: #d9eef7;

margin: 50px 0 0 0;

}

#caja_medio p{

padding: 10px;

color: #181818;

font-size: 18px;


margin: 0;

}

/* Contenido / Columnas centrales

---------------------------------------------------------*/

#contenido{

margin: 50px 0 0 0;

}

#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;



}

#contenido h2 a:hover{


}


margin: 0 50px 0 0;


59/105

}


margin: 0 50px 0 0;

}


margin: 0;

}




}




}




}

#contenido .readmore a{

color: #3c8203;


}

#contenido .readmore a:hover{


}

#contenido .readmore a:before {

content: ">> ";

}

/* Destacado inferior

---------------------------------------------------------*/

#destacado_inferior{

margin: 50px 0 0 0;

}

#destacado_inferior .newsflash-title{

color: #035f88;

font-size: 20px;

font-weight: 600;


}


60/105

#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-align: center;

}

#destacado_inferior .readmore:hover{


}

/* 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;

}


61/105

/* Footer y men inferior

---------------------------------------------------------*/

#footer{

height: 200px;

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

}

#legal{

color: #6e6d6d;

font-size: 12px;



line-height: 12px;

}

#menu_inferior{


}

#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;


color: #6e6d6d;

font-size: 12px;


border-left: 1px solid #6e6d6d;


line-height: 12px;

}

#menu_inferior li:first-child a{

border: 0px;

}

#menu_inferior li a:hover{


}


62/105

#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;

}

#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{


padding: 5px;

font-size: 12px;

}


63/105

Finalizando la plantilla

El trabajo ya esta casi listo, las ltimas tareas a realizar son:

Verificar que el diseo se visualiza correctamente en todos los navegadores soportados. En

caso que exista algn problema de diseo con Internet Explorer, recuerde que existe elarchivo template_ie.css en donde es posible aadir estilos que nicamente sern

cargados por dicho navegador.

Experimentar con diferentes tipos de contenidos para poder comprobar lo flexible que es la

plantilla y en que situaciones es posible encontrar un error.

Crear dos capturas de pantallas: template_preview.png que ser una imagen a tamao

real del template y template_thumbnail.png que ser una imagen miniatura del diseo.

Dichas imgenes van dentro de la carpeta raiz de la plantilla:

Finalmente crear un instalador de la plantilla: es tan sencillo como seleccionar todos los

archivos que componen la plantilla y comprimirlos en un archivo .zip. Ese archivo ser el

instalador para utilizar en mltiples sitios.

Temas avanzados

Estilos de plantillas, parmetros de configuracin y maquetacionesdiferentes por secciones

Como se coment la principio del manual, Joomla! 1.6 posee una nueva funcionalidad llamada estilosde plantillas. Dichos estilos permiten, a travs de parmetros de configuracin, variar el diseo de la

plantilla en varios aspectos: colores, imgenes, maquetacin, tamaos, etc. A su vez cada estilo

puede ser asignado a una o varias secciones especificas.
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


64/105

Recuerde que el listado de estilos de plantillas se puede encontrar yendo, en la

administracin, a Extensiones Gestor de plantillas. Al ingresar a alguno de los items

enlistados se pueden visualizar los parmetros disponibles para configurar y a que secciones

aplicarlos.

En el caso de la plantilla creada de ejemplo, se le aadirn varios parmetros de configuracin para

poder:

Cambiar la imagen del logotipo;

Cambiar el texto del eslogan;

Aplicar una maquetacin diferente.

Cambiar la imagen del logo

Modificacin de templateDetails.xml

Los parmetros de configuracin de la plantilla se agregan en el archivo templateDetails.xml

aadiendo las etiquetas que se muestran a continuacin:

Como se muestra, la etiqueta ms importante es . Dicha etiqueta posee los siguientes

atributos:

name: Debe ser un nombre nico, a travs del cual se har referencia al parmetro para

obtener su valor;

type: El tipo de campo, el cual puede ser de varios tipos: text (campo de texto), list(lista de opciones), media (campo con seleccin de archivo);

label: Ser el nombre resumido que acompaa al campo cuando sea mostrado desde la

administracin;

description: La descripcin ser la explicacin del campo.

Note que para los atributos label ydescription se utiliza

TPL_INTERPOINT_LOGO_LABELyTPL_INTERPOINT_LOGO_DESC . Estas dos referencias

se deben agregar en el archivo es-ES.tpl_interpoint.ini junto a los textos

correspondientes.


65/105

Por lo tanto, templateDetails.xmlquedar de la siguiente manera:

InterPoint

2011

Comunidad Joomla

[email protected]




1.0


html

css

images

language

js

index.php

index.html

favicon.ico

templateDetails.xml



component.php

error.php




interpoint-video








66/105

Modificacin del index.php

En index.php lo primero que se har es declarar una variable para guardar el valor del parmetro

que queremos obtener. Esto es posible realizarlo dentro de las etiquetas PHP que se encuentran al

principio del documento:

Como puede ver, los parmetros se obtienen a travs de $this->params->get()pasando como

argumento el nombre del parmetro a obtener (en este caso el parmetro logo). Luego, antes del

cierre de la etiqueta se incorpora:

#logo h1{

background: transparent url() no-repeat left top;

}

De modo que, si se configur el parmetro, se aada un estilo que sobrescriba el establecido en

template.css y agregue la nueva imagen del logo en el diseo:


67/105

La cabecera del archivo index.php queda de la siguiente forma:



68/105

#logo h1{

background: transparent url() no-repeat lef

t top;

}

Cambiar el texto del eslogan

Siguiendo los mismos pasos anteriores, se modifica templateDetails.xmlaadiendo un nuevoparmetro:

Notae que se aadieron dos nuevos atributos: *default: Ser el valor predeterminado en

caso que el campo est imcompleto; *filter: Este permite especificar el tipo de

informacin que se espera en el campo (string, word, integer);

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


69/105

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


//Parametros de la plantilla

$imagenLogo = $this->params->get('logo');

$eslogan = $this->params->get('eslogan');

?>

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


70/105

TPL_INTERPOINT_OPCION_1COLUMNA

TPL_INTERPOINT_OPCION_2COLUMNAS

Note que el parmetro, al ser del tipo lista, necesita tener definidas las opciones que se

podrn seleccionar.

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

maquetacion:


71/105

?>

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

maquetacin de una sola columna. Caso contrario, se muestra una maquetacin de dos columnas.

Note que se agreg una nueva posicin de mdulo: interpoint-columna_derecha .

Esta deber ser agregada adems en templateDetails.xml y la referencia de sudescripcin 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 items del men

desea ver el nuevo diseo.

Por ejemplo, si se selecciona asignar el nuevo diseo a una categora dada, al ingresar a un articulo

de esa categora se visualizar:


72/105

Si se despublican los mdulos superiores e inferiores y se asignan algunos en la columna derecha:


73/105

Agregando algunos estilos en template.css es posible mejorar el diseo:

/* Columna izquierda

---------------------------------------------------------*/

#columna_izquierda{

margin: 50px 0 0 0;

}

#columna_izquierda h2 a {

color: #035F88;

font-family: "Myriad Pro",Arial,Helvetica,sans-serif;

font-size: 35px;

font-weight: 600;


}

#columna_izquierda h2 a:hover{


}

#columna_izquierda .article-info{


color: #181818;

font-size: 13px;

margin: 0 0 20px 0;

padding: 10px;


74/105

}

/* Columna derecha

---------------------------------------------------------*/

#columna_derecha{

margin: 50px 0 0 0;

}

/* Modulos 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;


border-bottom: 1px solid #CCC;

padding: 0 0 5px 0;

color: #3C8203;

}

#columna_derecha .mostread a:hover{


}

#columna_derecha #modlgn_username, #columna_derecha #modlgn_passwd{

width: 100%;

}


75/105

/* Paginacion

---------------------------------------------------------*/

.pagenav, .pagination{

list-style: none;

text-align: center;

margin: 20px 0;

}

.pagenav li, .pagination li{

display: inline-block;

margin: 0 10px;

}

Quedando finalmente:

Como se puede ver, los estilos en plantillas son una opcin interesante que le otorgan flexibilidad a la

plantilla, permitiendo cambiar su diseo ante distintas situaciones.


76/105

Personalizacin de mdulos y componentes

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 modificar

archivos del ncleo de dichas extensiones o del mismo CMS.

Para poder sobrescribir la estructura HTML que posea una extensin, es requisito que sta est

creada utilizando 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 extensin

utiliza MVC. La nica manera de saberlo es yendo a la carpeta de dicha extensin y mirando su

estructura de carpetas y archivos. Por ejemplo, los componentes creados con MVC suelen tener una

estructura de esta forma:

En donde existe una carpeta controllers, otra models y otra views. En sta ltima carpeta se

encuentran archivos que se utilizaran como base para personalizar el HTML del componente.

Por otro lado, los mdulos desarrollados en MVC poseen el siguiente aspecto:

En este caso, la carpeta tmpl posee archivos que se utilizaran para personalizar al gusto el HTML
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOC


77/105

del mdulo.

En Joomla, los archivos que componen cada componente pueden encontrarse dentro de la

carpeta components, en el directorio raiz del CMS. All cada componente est separado por

carpetas diferentes (com_banners, com_contact, etc). En el caso de los mdulos, estos

se encuentran en la carpeta modules, tambin en el directorio raiz del CMS. Y al igual que el

caso anterior, cada mdulo est separado en una carpeta diferente

(mod_articles_archive, mod_articles_categories, etc).

Si desea conocer un poco ms sobre MVC puede consultar:

http://es.wikipedia.org/wiki/Modelo_Vista_Controlador

http://docs.joomla.org/MVC

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

de la plantilla.

Mdulos personalizados

En 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

componen a index.php, se explic que los mdulos se pueden cargar de diferentes formas

cambiando el valor del atributo style en la directiva . Sin embargo, existen situaciones en que se necesita que un

mdulo cargue dentro de una estructura determinada. Por eso mismo, Joomla permite crearestilos personalizados de visualizacin de mdulos.

El mismo HTML que compone un mdulo: Tambin es posible personalizar las etiquetas

HTML que componen a uno o varios mdulos en particular, otorgando la flexibilidad para

adaptar un diseo 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. En el caso de la plantilla creada de ejemplo,

al acceder a la carpeta html se visualizar:
http://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://users/leandrodonofrio/Dropbox/Public/manual_jplantillas/libro/html/index.html#TOChttp://docs.joomla.org/MVChttp://es.wikipedia.org/wiki/Modelo_Vista_Controlador


78/105

Es el archivo modules.php quien se encarga de contener los diferentes estilos personalizados de

visualizacin de mdulos. Al abrir a dicho archivo, el mismo posee tres funciones definidas:

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

{

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


79/105


80/105

$headerLevel = 4;

endif;

En este bloque de cdigo, se pregunta si el atributo headerLevel posee algn valor. Si lo posee se

asigna a la variable $headerLevel dicho valor o en caso contrario se establece a 4 como valor

predeterminado.

Seccin 3

...

Continuando, se pregunta si el mdulo posee un ttulo asignado. Si lo posee, se muestra dicho ttulo

entre etiquetas , la cual podr variar dependiendo del valor establecido en el atributo

headerLevel.

Seccin 5


81/105


82/105

?>

Para mostrar en la plantilla los mdulos de la nueva forma definida, tan solo es necesario agregar una

nueva directiva en algn lugar o reemplazar alguna por la nueva. Por ejemplo, para la seccin de dos

columnas, en la parte derecha, se incorpora el nuevo estilo:

Si se verifica 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 subcarpeta

llamada tmpl. Dicha carpeta contendr uno o ms archivos .php con las etiquetas HTML que

conforman al mdulo.

Por ejemplo, si se dirige a la carpeta tmpl del mdulo mod_stats (mdulo que muestra las

estadsticas del sitio), encontrar un archivo llamado default.php que contiene:


83/105

Suponiendo el caso en el que se necesita que los datos de estadsticas del sitio, en lugar de

mostrarse dentro de etiquetas , y , se muestren dentro de una listadesordenada (, ). Para realizarlo, utilizando la plantilla creada, se debe:

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 carpeta tmpl;

De modo que la carpeta html posea la siguiente estructura de archivos:

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


84/105

Por lo tanto, si se necesita personalizar alguno de estos mdulos, tan solo se debe modificar

los archivos .php que estan dentro de cada directorio.

Componentes personalizados

Los 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

el descrito para los mdulos, con algunas diferencias. Por ejemplo, suponiendo que se necesita

personalizar los resultados de bsqueda, actualmente, dicha pantalla posee el siguiente diseo:


85/105

Para la personalizacin, se desea las zonas Condiciones de bsqueda y Buscar solo en

aparezcan ocultas y que stas sean visibles al hacer clic en un enlace con el texto Bsqueda

avanzada.

Para realizarlo, se har lo siguiente:

Ir a la carpeta del componente de bsqueda. En este caso com_search (la cual se

encuentra dentro del directorio components);

All dentro se encontrar a la carpeta views. Al entrar a ella, existir otra carpeta con elnombre search.

Dependiendo del tipo de componente, es posible encontrar ms de una carpeta dentro del

directorio views. Por ejemplo, al ir a la carpeta views del componente com_content se

encontrarn 6 directorios: archive, article, categories, category, featured y

form. Cada carpeta es una funcionalidad distinta del componente.

Al entrar a la carpeta search, se encontraran varios archivos y adems un directorio con el

nombre tmpl, el cual contiene (al igual que en el caso de los mdulos) archivos .php con las

etiquetas HTML que conforman al componente:

Note que existe ms de un archivo .php dentro del directorio. Esto es debido a que, al ser los

componentes ms complejos, suelen dividir su HTML en varios archivos para reunirlos en uno

solo (default.php).

El archivo a copiar es default_form.php , ya que posee las etiquetas HTML que

conforman las zonas a personalizar.

Lo siguiente a realizar es crear una carp

desarrollo plan till as joomla

Documents