8 DESARROLLO DE LA PROPUESTA Y RESULTADOS FINALES

GUIA PARA EL DESARROLLO DE PLANTILLAS PARA EL CMS JOOMLA 2.5

LUIS FRANCISCO JAIMES CABALLERO BLANCA INES VILLAMIZAR GONZALEZ

34

GUIA PARA EL DESARROLLO DE PLANTILLAS PARA EL CMS JOOMLA 2.5

CAPITULO I

Esta gua pretende ser un documento fundamental para que tanto usuarios con conocimientos mnimos como avanzados aprendan a realizar una plantilla funcional para joomla 2.5. QUE ES JOOMLA: Joomla! es un sistema de gestin de contenidos gratuito para la creacin de sitios web. Es un proyecto de software libre que, al igual que la mayora de estos proyectos, est en constante movimiento. La palabra Joomla es una derivacin de la palabra Jumla del lenguaje africano Swahili que significa todos juntos.

El proyecto Joomla es el resultado de una acalorada discusin entre la Fundacin Mambo, que fue creada en Agosto de 2005, y su equipo de desarrolladores. Joomla fue desarrollado a partir de un sistema Mambo. Es utilizado en sitios web de todo el mundo para desarrollar desde pginas sencillas hasta complejos sitios corporativos para empresas. Es Sencillo de utilizar, administrar y sobre todo muy fiable.

Ver anexos de instalacin pg. 54

35

CAPITULO II
LAS PLANTILLAS

La creacin de plantillas (o templates) suelen ser uno de los trabajos ms comunes que emprenden los diseadores y desarrolladores web. Las plantillas son archivos que permiten controlar el diseo y la disposicin de los elementos a lo largo de un sitio. TIPO DE PLANTILLAS: Joomla cuenta con dos tipos de plantillas: PLANTILLAS PARA UTILIZAR EN LA ADMINISTRACION ( backend): Son creadas especialmente para la parte de administracin, las cuales pueden incorporar funcionalidades que faciliten el manejo de los contenidos en el sitio.

36

PLANTILLAS PARA UTILIZAR EN SITIO PUBLICO ( 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.

ESTRUCTURA BASICA DE UNA PLANTILLA: Las plantillas en Joomla! van alojadas dentro de la carpeta templates, en el directorio raz del CMS. All dentro, cada plantilla est separada por carpetas.

Todas las plantillas poseen esta estructura bsica de archivos y carpetas

37

CARPETAS Y ARCHIVOS INDISPENSABLES: Carpeta raz: 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, que se encuentra en el directorio raz. index.php: Archivo principal de la plantilla. Contiene la estructura bsica, as como tambin las llamadas a los archivos CSS y JavaScript. Su contenido est formado por etiquetas HTML y PHP. o o o o 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, Entre otros. 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.

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.

38

CARPETAS Y ARCHIVOS NO OBLIGATORIOS: Son archivos que agregan funcionalidades o caractersticas a la plantilla, pero que no es obligatorio incluirlos. 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 permiten sobrescribir la 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.

CREACION DE LOS ARCHIVOS DE LA PLANTILLA: A continuacin se darn a conocer cuenta al momento del anlisis: algunas pautas que deber tener en

39

Definiciones grficas: Contar con un diseo grfico en el cual se basar la plantilla y adems satisfaga las necesidades del sitio: Gama de colores, disposicin de los elementos, grficas, usabilidad y accesibilidad.

o o

Definiciones funcionales: Dependiendo de los requerimientos y necesidades, el sitio contar con una cantidad definida de funcionalidades. Debe tener en cuenta que la plantilla sea lo suficientemente extensible y flexible para adecuarse a distintas situaciones.

Definiciones tcnicas: 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. o 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.

CREACION DE LA CARPETA TEMPLATE Lo primero que haremos ser crear la carpeta en donde se alojaran los archivos de nuestra plantilla. Para eso vamos al directorio templates de joomla y crearemos una carpeta con el nombre que queramos, en minscula, y en caso de ser varias palabras, sin espacios. Luego podemos crear las subcarpetas y los archivos necesarios: css, images y/o HTML/PHP. CREACION DE TemplateDetails.xml Antes de empezar, debemos de saber que en este archivo especificamos todo lo relacionado con nuestra plantilla, si dejamos algo atrs, jams se mostrara de vista al usuario. Debemos dividir en tres partes el contenido de templateDetails.xml: Datos, Archivos, y posiciones.

40

1. Datos Aqu, entre cada etiqueta colocamos los datos especficos de la plantilla como su versin, autor, email, pagina web, ao, licencia y descripcin

2. Archivos Aqu especificaremos todos nuestros archivos y directorios. Los directorios irn dentro de la etiqueta <folder> y los archivos dentro de la etiqueta<filename>.

41

3 .Posiciones Es importante saber con anticipacin que posiciones usaremos en nuestro sitio. Una ayuda muy simple, es pre visualizar las posiciones de la plantilla instalada por defecto y usar los mismos nombres en nuestro archivo. Las posiciones irn entre las etiquetas <positions></positions>.

El archivo index.php Al ser uno de los archivos ms importantes, es fundamental entender las etiquetas que conforman al index.php. A continuacin se mostrar en detalle cada seccin que lo conforma. EXPLICACION DE CADA UNA DE LAS SECCIONES Seccin 1: Sesin y contexto del CMS

Se incorpora por motivos de 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 particular, le sea difcil realizarlo).

42

Seccin 2: Framework JavaScript

Para crear varias funcionalidades JavaScript, Joomla utiliza el framework Mootools. Dicho framework est compuesto por varios archivos .js que se cargan de forma predeterminada en la cabecera de la plantilla (<head />). 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. Seccin 3: Referencia a JApplication

Esta lnea guarda en la variable $app una referencia al objeto PHP de Joomla JApplication. Utilizando esta lnea es posible obtener informacin del sitio para mostrar dentro de la plantilla (por ejemplo: nombre del sitio, ttulo de la pgina, nombre del tmplate, etc.).

Seccin 4: Tipo de documento, codificacin y estilo de escritura

Este bloque de cdigo declara el tipo de documento (Doctype) de la plantilla, as como tambin la codificacin, idioma y direccin de escritura. $this es una referencia al objeto PHP de Joomla JDocumentHTML, el cual posee informacin necesaria para crear el documento HTML.

43

Seccin 5: Cabecera del documento

El cdigo mostrado crea e incorpora las etiquetas necesarias para rellenar la cabecera de la plantilla: Etiqueta <base />; Etiquetas <meta />: Etiqueta <title />; Etiquetas <link /> para cargar estilos CSS predeterminados, favicon y RSS; Etiquetas <script /> 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: Archivos CSS

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: Funcionalidades JavaScript

44

Al igual que con las llamadas a los archivos CSS, se utiliza $this para completar el atributo src, primero obteniendo la URL del sitio y luego el nombre de la plantilla utilizada. Seccin 8: Nombre del sitio

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 9: Llamado a distintos mdulos

Este 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 pregunta cuantos mdulos estn publicados en la posicin position-1, 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 <div /> en el cdigo que se muestra.

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 especfica. Esto se establecer a partir de dos atributos:

45

o 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 qu tipo de mdulo debera ir en esa zona. o style: En este atributo se 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. 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, secciones y categoras, etc.). Seccin 10: Mensajes del sistema

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 fue satisfactorio o errneo). Seccin 11: Contenido de los componentes

El contenido de los componentes del CMS suelen ocupar la zona principal de la plantilla. Permite mostrar el contenido del componente en que se est situado (artculos, categoras, formulario de registro, etc.).

46

Seccin 12: Ao presente y nombre del sitio

Llegando al final del archivo, se incorporan una serie de etiquetas para mostrar el ao presente y el nombre del sitio. El archivo .css Lleg el momento de aadir diseo a la plantilla. Para eso se editar el archivo .css que se encuentra dentro de la carpeta css de la plantilla. 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.

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.

47

Finalizando la plantilla El trabajo ya est 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, puede crear un archivo 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 raz de la plantilla. CAPITULO III COMO ENCONTRAR LAS PLANTILLAS DISPONIBLE EN LA ADMINISTRACION DEL CMS Las plantillas disponibles para utilizar se encuentran, dentro de la administracin: Extensiones Gestor de plantillas -- Plantillas

48

Gestor de Plantillas: Al hacer clic sobre la imagen correspondiente, se mostrar una vista alargada del diseo de la plantilla. Adems, al dar clic en el enlace de detalle, podr acceder a los archivos principales que componen a la plantilla, as como editarlos desde la misma interfaz. Gestor de plantillas: Personalizar plantilla

Por otro lado, al acceder al apartado estilos, como se mencion antes, podr navegar por cada una de los estilos en plantillas.

Gestor de plantillas: Estilos: lo que permite es, utilizando un mismo tmplate otorgar un diseo diferente: tamao de estructuras, cambio de imgenes y textos, posicin de elementos y diseo a determinadas secciones.

49

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 tems en listados, es posible acceder a las opciones de personalizacin y especificar a qu secciones se desea asignar el estilo.

50

Descubrir la plantilla en la administracin de CMS Para esto, en la administracin, vaya a Extensiones > Gestor de extensiones > Encontrar >. Si todo sale bien, debera aparecer la plantilla.

Lo siguiente ser seleccionar el tem de la plantilla y presionar el botn Instalar. Si todo sali bien debe aparecer el texto Encontrada instalaciones correctamente y ms abajo la descripcin de la plantilla.

Pantalla de instalacin correctamente

51

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

La nueva plantilla aparece en lista. DETALLES DE LA PLANTILLA: Si se ha trabajado la plantilla por fuera del template el proceso para instalarla es el siguiente: Crear el instalador de la plantilla: comprimir la carpeta en el archivo .Zip. Luego entramos en nuestro backend Extensiones > gestor de extensiones y presionar el botn instalar Luego en subir archivo de paquete seleccionar el archivo .zip y presionar el botn subir e instalar

52

Despus de salir el mensaje de instalacin correcta podemos visualizar la plantilla en el sitio, Vaya a extensiones > Gestor de plantillas

Es posible que nos interese ver las posiciones que utiliza la plantilla que estamos empleando en nuestra web y como se est comportando a la hora de mostrar los contenidos de la pgina para ello podemos ir a Opciones y habilitar la pre visualizacin de los mdulos.

Despus de guardar los cambios, tendremos que acceder al front-end y aadir al final de la direccin de la pagina ?tp=1 con lo que obtendremos la posicin de cada modulo.

53

INSTALACIN DE JOOMLA
Para poder instalar Joomla en el PC local, es necesario que configures tu "propia internet local", para lo que necesitars un navegador, un servidor web, un entorno PHP y un sistema de base de datos soportado por joomla!. Llamamos a esto cliente servidor o LAMP. REQUERIMIENTOS MINIMOS DEL SISTEMA Un servidor web instalado y en funcionamiento, como Apache (Versin 2.x o superior) o Microsoft IIS (versin 7 o superior). El lenguaje de scripting PHP , versin 5.2.4 o superior. El gestor de bases de datos MySQL, versin 5.0.4 o superior.

INSTALADOR WEB DE JOOMLA

Descarga Joomla! 2.5 desde joomla.org y descomprime los archivos en el directorio raz de tu servidor web (por ejemplo:/htdocs). A partir de ahora, todo el instalador web de Joomla gua el trabajo de instalacin. Desde el navegador, ve a la URL de tu servidor local http://localhost/.

PASO 1: ELEGIR UN IDIOMA:

En esta primera pgina del asistente seleccionamos el idioma que queremos utilizar durante la instalacin y una vez realizada la seleccin le damos clic en el botn 'Siguiente'.

54

PAS 2: COMPROBACION DE INSTALACION:

El asistente de instalacin realiza las comprobaciones previas para determinar que el entorno es correcto, comprueba versiones de PHP, MySQL, etc.

PAS 3: LICENCIA: Cada producto de software est licenciado de una u otra manera. Joomla! est licenciado de acuerdo con la versin 2.0 de la GNU General Public License. .

55

PAS 4: BASE DE DATOS: En esta parte se requiere que le demos informacin sobre el tipo de base de datos que vamos a utilizar, nombre del host, usuario y password de la base de datos, nombre de la base de datos, el prefijo a utilizar para el nombre de las tablas y si deseamos que realice un backup o borre las tablas que pudieran existir en el caso de que hubiramos realizamos una instalacin anterior.

Tanto el usuario como la base de datos deben estar creados antes que podamos continuar.

PASO 5: CONFIGURACION DEL FTP

Si la instalacin la estamos realizando en local no es necesario configurar el FTP, en el caso de que estis realizando la instalacin en un hosting es recomendable no configurarlo y utilizar un FTP independiente a Joomla como por ejemplo FileZilla.

56

Paso 6 Configuracin

La configuracin principal est dividida a su vez en tres pasos.

1. se requiere el nombre que deseas para tu sitio web. Este es el nombre que aparecer en la barra de ttulo de la ventana del navegador cuando alguien acceda a tu sitio. El nombre tambin es usado en muchos otros sitios, como por ejemplo los correos electrnicos de confirmacin enviados a los usuarios registrados.

2. se requieren los campos nombre, correo electrnico y contrasea de administrador.

3. En la tercera parte, debes especificar el tipo de datos iniciales que tu instalacin Joomla debera contener.

PASO 7: FINALIZACION

Ahora vers aparecer un aviso en negrita, pidindote que elimines el directorio llamado ' installation'. Deberas seguir el aviso, ya que de otro modo tu sitio Joomla! No funcionar correctamente.

57

Nota: Un archivo llamado configuration.php ha sido creado en el directorio raz de tu instalacin. Si quisieras repetir la instalacin en este punto, necesitars borrar este archivo antes de eliminar el directorio installation. Una vez eliminado el archivo (y antes de haber eliminado el directorio), si vuelves a cargar la URL de tu sitio en tu navegador el instalador de Joomla! empezar con una nueva instalacin.

ELEMENTOS DE JOOMLA ARTICULO: Un artculo normalmente consta de un ttulo, un texto y algunas opciones de configuracin. Los artculos pueden ser mostrados individualmente o como parte de una lista. Los artculos pueden estar publicados (publicar) o no publicados (despublicar). Puedes destacar artculos en tu pgina principal, puedes archivarlos o ponerlos en la papelera y recuperarlos de ella. Puedes copiarlos y moverlos. CATEGORIAS: Para poder mostrar los artculos de forma clara, debes crear categoras, y despus asignar cada artculo a una de ellas. Cada artculo slo puede ser asignado a una nica categora. Las categoras pueden anidarse hasta cualquier profundidad. Los artculos de una o mltiples categoras pueden ser asignados a un elemento de men, y ser mostrado de diversas maneras.

58

USUARIO: Se necesitan usuarios para producir contenido. Al menos un usuario est registrado en cada sitio Joomla!, concretamente el se cre durante la instalacin, con los permisos para configurarlo todo en tu sitio. Dependiendo de los permisos del usuario, puede trabajar en el frontend y/o el backend para escribir un artculo. Cada usuario necesita un nombre de usuario, una direccin de correo electrnico y una contrasea. Cada usuario puede ser asignado a cualquier grupo, as como a cualquier nivel de acceso. Esto permite al usuario crear artculos que sean visibles nicamente para cierto grupo de usuarios.

NAVEGACION: Elementos de navegacin con los enlaces necesarios. En Joomla! llamamos a esto men. Puedes crear tantos mens como desees, y anidarlos de tantas maneras como quieras. Cada men es un mdulo que puede ser situado en cualquiera de las posiciones proporcionadas por la plantilla.

MODULO: Un mdulo es algo que puedes colocar junto a un artculo. Un men, por ejemplo, es un mdulo. El pequeo bloque de registro que hay en la parte izquierda es tambin un mdulo.

PLANTILLAS:

Una plantilla es el patrn grfico de tu sitio web. Consta fundamentalmente de archivos HTML y CSS. Joomla! viene de serie con varias plantillas entre las que elegir (y hay cientos de ellas disponibles, tanto gratuitas como comerciales). Las plantillas son configurables, lo que te permite subir un logo diferente, cambiar el color de fondo, etc.

59

PLUG-INS: Un plug-in (literalmente, "enchufable" o "conectable") proporciona servicios prcticos, pero normalmente es invisible para los usuarios del sitio. Los plug-ins son extensiones, que pueden ser instaladas tantas veces como se quiera. El paquete del ncleo de Joomla trae un buen nmero de plug-ins muy tiles.

COMPONENTES: Los componentes son los pequeos paquetes sorpresa que te ayudan de a crear para

prcticamente cualquier cosa en tu sitio web. Quieres tener un sistema

reserva

talleres? Una plataforma para vender propiedades? Un foro? Una galera de imgenes?

OPCIONES:

Necesitars ajustes individuales de configuracin para tu sitio web; los llamamos opciones. Estas opciones se aplican al sitio entero, para usuarios, categoras, mdulos, componentes.

TIPO DE CONTENIDO: En el core de Joomla tenemos los artculos, categoras, enlaces, banners, contactos y feeds. Entre otros.

60