I. RESULTADOS DE APRENDIZAJE

En esta guía de práctica se pretende:

Gestionar temas/plantillas para la presentación general del sitio web implementado con CMS

Joomla.

Identificar a plantillas gratuitas de Joomla que reciben mantenimiento y actualizaciones

apropiadas.

Personalizar los parámetros (paleta de colores, logos, tipografías, etc.) de las plantillas

elegidas para Joomla

II. INTRODUCCIÓN

Qué son las plantillas

Las plantillas / templates de Joomla son el sistema encargado de definir el aspecto estético, la

disposición de los elementos y el estilo visual de los sitios web desarrollados con Joomla

La mayor ventaja que ofrece Joomla es la separación completa ofrecida por el proyecto actual del

Modelo Vista Controlador (MVC), en donde los contenidos están, por un lado, mientras que el

diseño (presentación visual) están en otro.

La ventaja de este enfoque es que se puede modificar el diseño del sitio en un instante, sin alterar

los contenidos ni su organización.

El Gestor de plantillas

A partir de Joomla 2.5 se ha cambiado drásticamente el Gestor de plantillas. Posee una interfaz de

usuario con un gran número de mejoras, que incluyen la asignación de estilos de plantillas,

opciones de configuración y algunas tareas de edición comunes como cambio de imagen de logo,

edición CSS de forma más sencilla para el usuario final con conocimiento. También se han

incluido mejoras de funcionalidad para permitir que los diseñadores de plantilla profesionales

pongan la parte creativa.

UNIVERSIDAD DON BOSCO

FACULTAD DE INGENIERIA

ESCUELA DE COMPUTACIÓN

Ciclo I

Desarrollo de Aplicaciones Web con Gestores de Contenido

Guía N° 4

Joomla: Plantillas, plug-ins y módulos

2

La ficha Plantillas muestra la lista de las plantillas que vienen preinstaladas con Joomla,

utilizadas en la interfaz de usuario (front-end) del sitio como la parte administrativa (back-end):

Beez3 y protostar.

Si selecciona la opción Extensiones-Plantillas-Plantillas, podrá listar los detalles de los paquetes

de plantillas instalados en Joomla, como el autor y los componentes que los definen.

Si hace clic en el nombre de la plantilla, se ingresa a la página de edición de los archivos php y

CSS de esa plantilla, que definen el aspecto visual del sitio web.

3

Extensiones de Joomla

Los componentes

Son el primero de los tipos de extensiones de Joomla. Un componente es una aplicación

independiente con sus propias funciones, bases de datos y su propia presentación. Dicho de otro

modo, son mini-aplicaciones que se ejecutan dentro del propio sitio web de Joomla.

Componentes nativos

Existe un cierto número de componentes que están disponibles después de la instalación de

Joomla. A estos componentes se les conoce como componentes nativos por el hecho de que

vienen como parte del paquete de Joomla.

Banners

El componente banners le permite colocar anuncios o pancartas publicitarias (mejor traducción

de banner) en el sitio web. Las tres partes de la funcionalidad de los banners son: anuncios,

clientes y categorías.

Las categorías son el medio para agrupar los banners en distintas categorías.

Los clientes hacen posible definir un cliente para cada empresa que se desee anunciar en su web a

través de los banners.

Los banners le permiten definir la categoría y el nombre del cliente al que estará asociado el

banner. En el Gestor de banners las columnas Impresiones y clics le proporcionan una visión

general del nivel de rendimiento de los banners.

Contactos

El componente contacto le permite crear una página de contacto personalizada para cada persona

con las que desee poner a sus usuarios en contacto.

III. MATERIALES Y EQUIPO

No. Requerimiento Cantidad

1 Guía de práctica #4: Joomla: Plantillas, plug-ins y módulos. 1

2 Computadora con un Navegador web y Wamp Server instalado 1

3 Conexión a Internet 1

4

IV. PROCEDIMIENTO

Ejercicio #1: Instalar la Extensión de paquetes de idioma español

1. Cargue un navegador web disponible y abra 2 fichas/pestañas nuevas, vacías en el mismo.

Luego, abra tanto el back-end como el front-end de su instalación local de Joomla, cada

entorno en una ficha/pestaña diferente.

2. Desde la ficha con el back-end, desde el panel de administración de Joomla ingrese como

administrador.

3. Dentro del panel administrativo de Joomla, ingresar al Gestor de extensiones de Joomla,

eligiendo del menú superior a la opción Extensions y luego de clic en Lenguaje(s).

4. Desde el Gestor de Lenguajes instalados, de clic en las diferentes opciones del submenú

izquierdo, para ver cuales Extensiones de paquetes de Idiomas están instalados, tanto para el

entorno administrativo como el de presentación del contenido del sitio (Content Languages).

5. De clic en 1er enlace (Installed) del menú izquierdo. Luego, haga clic en botón Install

Language.

6. En el gestor, redacte la extensión del lenguaje a buscar: Spanish y haga clic en botón Buscar.

Tal como lo muestra la imagen a continuación, se listan las extensiones de lenguajes

disponibles.

5

Localice y haga clic en botón Install del primer resultado devuelto.

Espere a que la Extensión de paquetes de lenguaje español se instale.

7. Nuevamente, desde el menú principal, elija Extensions y luego Languages. Aparece instalado

la Extensión del Lenguaje en Español.

Observe la imagen. Explore las opciones del combo (donde muestra opción Site). Vera que

puede elegir el lenguaje para el Sitio publicado (Front-End, por defecto) o también del

Administrador (Back-End).

Para activar al Español para el sitio, seleccione a lenguaje Spanish y haga clic en botón

Estrella (Set default) correspondiente.

8. Del navegador web, cambie a la ficha/Pestaña con el front-end del WebSite con Joomla.

Presione tecla F5 y vera que el lenguaje de las Secciones de la Vista pública del website

cambia al español.

6

9. Retorne al Back-End y del combo elija Administrator.

Luego, seleccione Español como lenguaje por defecto. Listo, ha cambiado el lenguaje del

panel del administrador (back-end) del WebSite al español.

10. Para demostrar que ya puede cambiar la extensión del lenguaje, haga todos los necesarios

para instalar y cambiar el lenguaje solamente del Sitio (del Front-End) a uno de los tipos de

lenguaje Alemán (German) disponibles.

11. Compruebe que el cambio de lenguaje funciona. Luego, retorne el lenguaje a Español.

7

Ejercicio #2: Instalar una plantilla

El primer paso para instalar una nueva plantilla (no disponible desde la instalación de Joomla)

es buscar una en Internet.

1. Utilice al motor de búsqueda Google y realice la siguiente búsqueda: Plantillas para Joomla 3.9 gratis. Observe la diversidad de plantillas disponibles de manera gratuita.

2. Para continuar con el procedimiento, utilizaremos la plantilla denominada JSN Voyage.

Abra una nueva ficha/pestaña e ingrese la url https://www.joomlashine.com/

3. Desplace el ratón hacia la opción Templates del menú principal del sitio y de clic en la

plantilla indicada en este paso (JSN Voyage).

El sitio ofrece una demostración de cómo se presentaría su sitio web y la interfaz

administrativa si aplica su plantilla. Además, el botón de Descargar (Download).

4. Presione botón Download. El sitio ofrece planes de pago para usar a esta Plantilla.

Seleccione la versión gratuita (30 días) y luego, siga los pasos requeridos para registrarse

como usuario del sitio.

5. Ingrese con usuario creado en el paso anterior. Luego, de los archivos disponibles para

descargar, seleccione y descargue al archivo: JSN Voyage for Joomla! 3.x (installation package).

6. Una vez descargado el archivo .zip (jsn_voyage_1.0.2_install.zip) con las plantillas

de JSN Voyage, retorne a la ficha/pestaña con el administrador (back-end) de su sitio Joomla

e ingrese con su cuenta de administrador.

7. Del menú principal, elija Extensiones->Administrar.

Se abre el Gestor de Estilos y Plantillas.

8. En la parte central, haga clic en botón Escoja el archivo.

Luego, en el cuadro de dialogo, localice y seleccione el archivo .zip de plantilla (descargado

en paso anterior).

Confirme la selección del archivo .zip y espere a que se suba e instale la Extensión de esta

Plantilla a su gestor Joomla.

Muy importante:

Observe que Joomla acepta subir archivos (.zip) de Extensiones con un límite de 2 Mb.

Si usted necesita ampliar este límite de transferencias de archivos, ejecute los pasos descritos

en el Anexo A al final del procedimiento de esta práctica.

9. Ingrese al Gestor de extensiones de Joomla, seleccionando del menú del panel de

administración de Joomla a opciones Extensiones->Plantillas.

10. De la vista devuelta, verifique que ya se instaló a la plantilla JSN Voyage.

8

11. Ubique a la fila de la plantilla instalada y presione el botón Asignar predeterminado (Set

default) para que el front-end del sitio utilice esta plantilla.

12. Ingrese al front-end del sitio web y actualice la pestaña del navegador para que el cambio se

vea realizado.

Nota:

Como podrá notar algunos módulos de la página con la plantilla protestar (plantilla

predeterminada del front-end de Joomla), ya no están visibles. Esto casi siempre se debe a

que cada plantilla maneja sus propios nombres de posiciones dentro de los módulos. Para

solventar esta situación habrá que ingresar al Gestor de módulos para colocar los elementos

no visibles en una posición que exista dentro de la plantilla seleccionada.

Ejercicio #3: Modificando a una plantilla

13. Desde la vista del gestor de plantillas, de clic sobre el nombre de la misma (JSN Voyage

Default).

Se abrirá una sesión con el sitio JoomlaShine, propietario de esta plantilla. Este le solicitara

que debe loguearse con la cuenta de usuario que usted creo al descargar al .zip de la plantilla.

Proceda a identificarse.

14. Solicite utilizar una licencia de prueba (PRO Trial license). El sitio le indica que podrá usar la

plantilla gratis por 30 días.

15. Se retorna al área de diseño de plantillas ofrecidas por JSN Voyage.

Esta plantilla está diseñada bajo el modelo “Responsive web design”, que hace que el

9

contenido de un sitio web se adapte apropiadamente a cualquier dispositivo que acceda a

internet, como PC de escritorio, Laptop, Tablet y Smartphone.

16. Observe la maquetación inicial que Voyage aplica a las páginas de contenido de su sitio web,

haciendo clic en opción Preview Layout (en la parte superior de la ventana).

17. La maquetación consiste en ver a cada elemento HTML como un contenedor de otros

conjuntos de elementos. Y cada uno de estos, puede ser contenedor de otros.

Haga clic en el rectángulo con título Header. Este elemento está definido en el elemento

Page. Si da clic en elemento interior Logo, vera la jerarquía de este en la parte superior, como

se muestra en esta imagen:

Y a la derecha, se muestran los atributos de este elemento Logo, que puede modificar.

18. Entre los atributos de Logo, localice atributo Logo y presione al botón resaltado en imagen.

En la ventana emergente, presione botón Upload y luego, haga lo necesario para ubicar y

seleccionar una imagen pequeña, que reemplazara a imagen actual de Logo de todo el sitio.

10

19. Localice en la parte superior de esa ventana de atributos al botón Save Layout.

Retorne a la ficha con el Front-end de su WebSite y presione F5. Vera que cambia imagen del

logo en la parte superior (Top) del sitio.

20. Para continuar, modificara el color de fondo de este elemento Header.

Para ello, haga clic sobre su nombre en la barra al centro del diseño de la planilla. Luego,

localice en menú superior a Styles. Se mostrarán las normas de estilos CSS3 que definen los

tipos de letras, colores de letra y fondo que puede personalizar.

Seleccione al botón resaltado en imagen y elija un color a su gusto. Haga clic en Choose y

actualice los cambios, dando clic botón Save style.

Retorne al front-end, actualícelo y confirme si se realizo el cambio en el segmento del

encabezado (header)

21. De manera similar a como realizo el cambio en el encabezado, personalice el color de fondo y

logo del pie de página del sitio (Bottom).

22. Presione el botón Close (justo a la derecha de Save Style), para retornar al entorno

administrativo de Joomla.

11

Ejercicio #4: Instalación de plug-in (SIGE) para galería fotográfica.

1. Abra una ficha/pestaña en el navegador e ingrese a la siguiente dirección:

http://joomla-extensions.kubik-rubik.de/downloads/sige-simple-image-gallery-extended/joomla-3

Y descargue el archivo .ZIP con el plug-in para la galería fotográfica.

2. Retorne al Panel de administración del website e ingrese al Gestor de extensiones. Proceda a

instalar el plug-in descargado en el paso anterior.

Confirme que se instala correctamente, al generarse el siguiente mensaje:

3. Ingrese al Gestor de plugins, filtre la lista por palabra SIGE y luego, identifique al plugin

denominado Content – Simple Image Gallery Extended (SIGE).

Habilítelo con el botón Habilitar plugin.

4. Cargue el Explorador de Windows. Ingrese a la carpeta de instalación local de Joomla,

ubicada dentro del directorio www de la aplicación wampserver. Finalmente, acceda a la

subcarpeta images. Observe un ejemplo de esta ruta:

C:\wamp64\www\(carpeta de Joomla)\images

12

5. Una vez dentro de esta carpeta, cree una nueva carpeta llamada sige_img e ingrese a la

misma. En su interior, copia ahí a una serie de al menos 5 archivos de imágenes (las que usted

desee).

Importante:

Si estuviera trabajando en su sitio web alojado en el servicio de webhosting, tendría que usar

la herramienta de administración de archivos (File Manager) que le han proporcionado para

ejecutar este paso y el anterior.

6. Regrese al back-end de Joomla, ingrese al Gestor de artículos y seleccione un artículo con

contenido en donde usted desea insertar una galería de imágenes.

7. Dentro del texto del artículo que ha seleccionado, use el editor predeterminado para ingresar

el siguiente código dentro del contenido del artículo.

Tenga cuidado de redactarlo en la posición que desea que aparezca la galería y de preferencia,

en un párrafo en blanco.

8. Guarde el cambio en el artículo con el botón Guardar y cerrar del Gestor de artículos.

9. Actualice el front-end del website e ingrese

al artículo que modifico con la galería de

fotos.

10. El articulo se modificará, mostrando una

lista de imágenes almacenadas en la carpeta

sige_img.

Observe un ejemplo de la presentación de

una galería de imágenes.

{gallery}sige_img{/gallery}

13

Anexo A

Si intenta instalar una Extensión de Joomla (desde un archivo .zip) con un tamaño mayor al

permitido por el gestor Joomla, se desencadena un error similar al siguiente:

Se ha producido un error subiendo este archivo al servidor.

El tamaño máximo permitido de PHP para subir archivos es demasiado bajo: Esto se configura desde las directivas de PHP 'upload_max_filesize' y 'post_max_size' (localizables y configurables en su archivo 'php.ini' o '.htaccess').

No se puede encontrar el paquete de instalación

Para corregir y ampliar el limite de subida de archivos .zip de Extensión de Joomla, siga estos

pasos:

1. Haga clic al icono WampServer, Localice y haga clic a opción PHP.

2. Del listado emergente, de clic en php.ini Se abre archivo de configuración de PHP.

3. En el interior de este archivo, utilice opción de menú Edición/Buscar… localice a las siguientes

variables:

* post_max_size (determina tamaño máximo de archivos a subir desde método POST de un

form web)

* upload_max_filesize (que determina tamaño máximo a subir)

4. Cuando encuentre a cada variable anterior, modificarle a un tamaño más grande (por ej. Si

tiene 2M puede cambiarlo a 50M),

5. Guarde los cambios en archivo php.ini y cierre la edición del mismo.

6. Reinicie a todos los servicios de WampServer, dando clic a su icono principal y eligiendo

opción Restart All Services.

Luego de restablecer servicios, retorne al gestor de subida de archivos de Joomla y vera que el

limite de tamaño de archivos de Extensiones se amplió (observe la imagen a continuación):