Post on 25-Oct-2020
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):