Guía #5: Gestión de plantillas, componentes, módulos y plug-ins

Transcripción

1 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN CICLO: 02/2012 GUIA DE LABORATORIO #5 Nombre de la Práctica: Gestión de plantillas, plug-ins y módulos Lugar de Ejecución: Centro de cómputo Tiempo Estimado: 2 horas con 30 minutos MATERIA: Administración de Contenidos en Internet DOCENTES: Hugo Ernesto Dimas / Miguel Eduardo García I. OBJETIVOS En esta guía de práctica se pretende: 1. Estar en capacidad de obtener el sistema de gestión de contenidos Joomla. 2. Desarrollar la habilidad necesaria para instalar Joomla, tanto en un servidor web local como remoto. 3. Realizar la configuración inicial de Joomla para dejarlo listo para utilizarlo en la creación de sitios web. 4. Estar en capacidad de montar un sitio web sencillo con Joomla. II. INTRODUCCIÓN TEÓRICA Qué son las plantillas Las plantillas o 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 completa separación 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 1.6 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. En Joomla 1.6 y superior, las plantillas se gestionan utilizando una combinación de los propios archivos de plantillas y los estilos de plantilla. Administración de Contenidos en Internet 1 / 20

2 La ficha Plantillas muestra la lista de las cinco plantillas que vienen preinstaladas con Joomla!!, tres de ellas utilizadas en la interfaz de usuario (front-end) del sitio: Atomic, Beez5 y Beez_20 y dos de ellas utilizadas para la parte administrativas: Bluestork y Hathor. Hacer clic en el nombre de la plantilla lleva a la página de edición de los archivos php y CSS que crean el aspecto del sitio web. Lo anterior lleva a la lista de los tres Master archivos de plantilla que representan la plantilla de página principal, la plantilla de página de error y la plantilla de vista de impresión. Estas plantillas controlan el diseño de la página que los visitantes ven el sitio, cuando reciben un error y cuando hacen clic en el ícono de impresión. La sección de la derecha muestra todas las hojas de estilo que componen la plantilla en su conjunto. Administración de Contenidos en Internet 2

3 Extensiones de Joomla! Los componentes Los componentes son uno de los cinco 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 hace 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 Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de práctica #5: Gestión de plantillas, componentes, plug-ins y módulos 1 2 Computadora con sistema operativo Windows y Wamp Server instalado 1 3 Conexión a Internet 1 Administración de Contenidos en Internet 3

4 IV. PROCEDIMIENTO Ejercicio #1: Instalar el paquete de idioma español. 1. Ingresar al panel de administración de Joomla en la dirección o la dirección donde lo tenga instalado. 2. Dentro del panel administrativo, ingresar al Gestor de extensiones de Joomla. 3. Dentro del Gestor de extensiones, en la ficha Subir archivo de paquete (Upload Package File) presionar el botón Examinar. 4. Localice el archivo de paquete del idioma español que debe haber descargado previamente a la realización de esta guía de práctica y selecciónelo para subirlo al servidor donde está instalado Joomla y presione el botón Abrir del diálogo Subir archivo. En nuestro caso, lo estamos haciendo en el servidor local. 5. Presione el botón Subir e Instalar (Upload & Install) para iniciar la instalación del paquete. Administración de Contenidos en Internet 4

5 6. Espere a que el Gestor de extensiones le indique que la instalación del paquete de idiomas se ha realizado de forma correcta. Generalmente, el paquete instalador le indicará los elementos que se instalaron. 7. Una vez instalado el paquete del idioma español, ingrese al Gestor de idiomas de Joomla. 8. Como ya se instaló el paquete del idioma, deberá aparecer en el Gestor de idiomas (Language Manager) el idioma español. Lo que debe hacer es establecer como idioma predeterminado (Defaul) el idioma español. Esto se puede hacer desde el botón Establecer como predeterminado (Set default) que se muestra en el Gestor de idiomas. 9. Observe que se haya cambiado el idioma del front-end del sitio web a español. Esto debe aparecer indicado por un mensaje que podrá ver en la parte superior de la página y con la indicación del botón Establecer como predeterminado que debe aparecer activo en el idioma español. Administración de Contenidos en Internet 5

6 10. Ingrese al front-end de Joomla desde el navegador de su preferencia y verifique que algunos de los textos de los módulos presentes en el sitio web estarán ahora en idioma español. 11. Dentro del Gestor de idiomas, en el panel de administración ingrese a la opción Instalado Administrador (Installed Administrator). 12. Establezca el idioma español indicado por la opción Spanish (ES) como el idioma predeterminado, haciendo clic sobre el botón Establecer como predeterminado (Set default) y verifique que el cambio ha tenido efecto en el panel de administración. Los menús y opciones del panel deben mostrarse ahora en español. 13. Observe que el panel de administración muestre todos sus elementos en idioma español. Administración de Contenidos en Internet 6

7 Ejercicio #2: Instalar una plantilla 1. El primer paso para instalar una nueva plantilla (no disponible desde la instalación de Joomla) es buscar una en Internet. Para ello puede usar el motor de búsqueda Google y colocar una búsqueda como Plantillas para Joomla 3. Aunque los resultados pueden contener plantillas para otras versiones, en tanto sean para versiones mayores que la 3.0 o compatibles con esa versión, casi con seguridad, no habrá problemas. Pero si los puede haber para versiones menores a la 2.5. Siempre será mejor opción acudir a un sitio web comprobado de ayuda sobre Joomla o de alguna comunidad de Joomla. 2. El siguiente paso debe ser descargar la plantilla que se ha conseguido 3. Ingrese al Gestor de extensiones de Joomla desde el menú principal del panel de administración de Joomla. Administración de Contenidos en Internet 7

8 4. Presione el botón Examinar en el Gestor de extensiones para buscar la plantilla que desea utilizar. Debe haber descargado previamente esa plantilla a su equipo. 5. Seleccione el archivo con la plantilla que desea utilizar en el diálogo Subir archivo y presione el botón Aceptar. 6. Verifique que la plantilla se haya instalado correctamente, observando en el Gestor de plantillas el mensaje que aparece posterior al intento de instalación. 7. Una vez instalada correctamente la plantilla, ingrese al Gestor de plantillas desde el menú superior Extensiones. Administración de Contenidos en Internet 8

9 8. En el listado de plantillas disponibles, debe aparecer la nueva plantilla instalada. El nombre que debe aparecer es siteground-j16-5. Presione el botón Asignar predeterminado (Set default) para que el frontend del sitio utilice esta plantilla. 9. Ingrese al front-end del sitio web y actualice la pestaña del navegador para que el cambio se vea realizado. 10. 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. Para eso primero sería útil verificar qué posiciones maneja la plantilla actual. Para eso ingrese en el navegador el parámetro tp=1 en la URL. De la siguiente forma: Recuerde que para que esto funcione debe habilitar en el Gestor de plantilla la previsualización de posiciones de módulos. Administración de Contenidos en Internet 9

10 OBSERVACIÓN: Para que las posiciones de plantilla estén visibles agregando el parámetro tp=1 en la URL, es necesario tener habilitada la opción Previsualización de las posiciones de los módulos. Esto se configura en el Gestor de plantillas, ficha Opciones en el Gestor de plantillas. 11. Con las posiciones mostradas en el diseño, ingresar al Gestor de módulos y colocar los elementos no visibles en las nuevas posiciones de módulo que posee la nueva plantilla seleccionada como predeterminada. El primer elemento que habilitará será el menú Programación web. Localícelo en el Gestor de módulos y luego haga clic sobre el nombre del mismo. 12. En el Gestor de módulos, en el campo posición haga clic para desplegar la lista de posiciones de plantillas habilitadas y busque la posición 4 de la plantilla siteground-j16-5, que es la que se está usando como predeterminada del front-end actual. Administración de Contenidos en Internet 10

11 13. Presione el botón Guardar y cerrar para hacer efectivo el cambio de posición del módulo en la nueva plantilla. 14. Realice el mismo proceso para hacer visibles los menús correspondientes a Deportes de equipo y Deporte nacional. 15. Repita el mismo proceso para el módulo Enlaces de interés y Breadcrumbs. Utilice la posición 4 y la posición menuload respectivamente en cada módulo. El resultado en el front-end debe ser el siguiente: Administración de Contenidos en Internet 11

12 Ejercicio #3: Instalación de una plantilla para back-end en Joomla 3. Para la utilización de la plantilla SJ Joomla 3 será necesario instalar un plug-in previamente. Este plug-in se llama YtPlugin. 1. Ingresar al Gestor de extensiones de Joomla en el panel administrativo. 2. Presione el botón Examinar en el Gestor de extensiones para abrir el diálogo que le permitirá subir e instalar el plug-in necesario para la plantilla de administración que necesitamos. 3. En el diálogo subir seleccionar el archivo comprimido con la extensión Yt Plugin. Presione el botón Aceptar en el diálogo para terminar el proceso de selección del plug-in. 4. Presionar el botón Subir e instalar en el Gestor de extensiones. Administración de Contenidos en Internet 12

13 5. Verifique que la instalación del plug-in se haya realizado correctamente. 6. Ingrese al Gestor de plug-ins para habilitar el plug-in recientemente instalado. 7. Habilitar el plug-in de sistema, denominado Yt Plugin (for Yt Framework) presionando el botón Habilitar plug-in que aparece al lado izquierdo del nombre del plug-in. 8. Ahora que ya está instalado el plug-in requerido por la plantilla de administración, regresamos al Gestor de extensiones desde el menú superior. Administración de Contenidos en Internet 13

14 9. Dentro del Gestor de extensiones presionar el botón Examinar y localizar el archivo comprimido de la plantilla administrativa que se instalará y presionar el botón Abrir una vez que la haya seleccionado. 10. Presione el botón Subir e instalar del Gestor de extensiones para que se instale la extensión de la plantilla. 11. Verifique que se haya instalado correctamente la extensión. Solo tiene que observar el mensaje que aparece luego de haber presionado el botón Subir e instalar. Administración de Contenidos en Internet 14

15 12. Presionar el botón Asignar predeterminado para que tengan efecto los cambios de la utilización de esta nueva plantilla. Ejercicio #4: Instalación de plug-in para galería fotográfica. 1. Ingrese a la siguiente dirección para descargar el plug-in de galería fotográfica sigplus. 2. Guarde el archivo en alguna carpeta en el disco local de la computadora que está utilizando. 3. Ingrese al Gestor de extensiones para instalar el plug-in descargado. Administración de Contenidos en Internet 15

16 4. Nuevamente presione el botón Examinar, seleccione en el diálogo Subir el archivo comprimido con el plug-in de sigplus y presione abrir. Por último, presione el botón Subir e instalar cuando ya esté seleccionado el archivos. 5. Espere y verifique que el plug-in se haya instalado correctamente. Tiene que aparecer un mensaje que así se lo indique para poder continuar. Administración de Contenidos en Internet 16

17 6. Ingrese ahora al Gestor de plugins y busque el plugin denominado Content Simple Image Gallery Extended (SIGE) y habilítelo con el botón Habilitar plugin. 7. Crear una carpeta dentro de la carpeta images/ de la carpeta de instalación de Joomla y nómbrela sige_img. Este proceso debe realizarlo con el Explorador de Windows, no desde el panel administrativo. Cuando trabaje en su sitio alojado en el servicio de webhosting tendrá que usar la herramienta de administración de archivos (File Manager) que le han proporcionado. 8. Regrese al back-end de Joomla y seleccione un artículo con contenido en donde se desea insertar la galería de imágenes. Esto lo debe hacer desde el Gestor de artículos. 9. Dentro del artículo que haya seleccionado, usando el editor predeterminado ingresar el siguiente código dentro del contenido del artículo. Teniendo el cuidado de colocarlo en la posición que desea que aparezca la galería. {gallery}sige_img{/gallery} Administración de Contenidos en Internet 17

18 10. Guarde el artículo con el botón Guardar del Gestor de artículos. 11. Dentro del Polls manager presione el botón Nuevo para crear una nueva encuesta. 12. Llene el formulario de la encuesta, presionando el botón Add extra options en la sección Add options si necesita agregar más opciones. 13. Guarde la encuesta con el botón Guardar y cerrar. 14. El siguiente paso es hacer visible la encuesta en la interfaz de usuario (front-end). Esto se debe hacer desde el Gestor de módulo, así que ingresaremos a éste desde el menú Extensiones Gestor de módulos. 15. Localice el módulo relacionado con el componente de encuesta llamado apoll (esto variará dependiendo del componente que haya descargado, pero siempre deberá aparecer algún nuevo módulo con un nombre similar al del archivo de componente descargado). Una vez encontrado el componente verifique si está activo en la columna Estatus del Gestor de módulos. Si no lo estuviera, actívelo haciendo clic en el botón rojo. Administración de Contenidos en Internet 18

19 16. Verifique que el módulo se ha publicado correctamente. 17. Siempre dentro del Gestor de módulo haga clic sobre el título del módulo apoll Module para configurar la posición del módulo en la interfaz de usuario. 18. Establezca la posición del módulo presionando el botón Seleccione posición y luego busque una posición válida en la plantilla actual de la interfaz de usuario. Si no recuerda las posiciones disponibles en su plantilla actual, utilice el parámetro tp=1 en la URL (localhost/joomlafetudb/?tp=1 o localhost/joomlafetudb/index.php?tp=1). 19. En la sección Menú asignado del Gestor de módulos, asigne el módulo en todas las páginas para que realmente sea visible. No hacer esto hace que la encuesta no aparezca en ninguna página aunque tenga una ubicación. 20. Guarde y cierre y actualice la interfaz de usuario para comprobar que el módulo encuesta se puede utilizar para llenar la encuesta. Administración de Contenidos en Internet 19

20 21. Recargue la interfaz de usuario (front-end) y verifique que la encuesta funciona correctamente. V. DISCUSIÓN DE RESULTADOS 1) Busque en Internet una plantilla, un módulo y un plug-in e instálelos individualmente, de modo que se vea algún resultado en la interfaz de usuario (front-end). 2) Obtenga un componente que sea utilizable desde el módulo administrativo de Joomla. Descárguelo instálelo y utilícelo en el panel administrativo para familiarizarse con su utilidad. Deberá mostrarlo en funcionamiento al final de la práctica. VI. INVESTIGACIÓN COMPLEMENTARIA 1) Suba el sitio web completo con los ejercicios del procedimiento realizados y el análisis de resultado completados a su servidor con el webhosting registrado que posee. Sitios web sugeridos Administración de Contenidos en Internet 20