UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN

Transcripción

1 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN CICLO: 02/2015 GUIA DE LABORATORIO #3 Nombre de la Práctica: Creación de menús con Joomla Lugar de Ejecución: Centro de cómputo Tiempo Estimado: 1 hora con 40 minutos Asignatura: Desarrollo de Aplicaciones Web con Gestores de Contenidos Docentes: Blanca Iris Cañas/Rebeca Benítez/Manuel Guandique I. OBJETIVOS En esta guía de práctica se pretende: 1- Crear nuevos menús dentro de un sitio Web 2- Crear elementos (ítems) dentro de un menú 3- Administrar del módulo de Joomla para mostrar el menú 4- Crear menús con enlaces externos II. INTRODUCCIÓN TEÓRICA Los menús El sistema de navegación principal de los sitios web se crea utilizando menús. La importancia de realizar un buen sistema de navegación implicará que los usuarios lleguen con facilidad a la información búsqueda, algo que le permitirá obtener numerosas visitas. Si los usuarios no pueden encontrar lo que buscan de forma rápida e intuitiva, seguramente irán a buscar a otro sitio web. Cuando instala Joomla con datos de ejemplo se crean automáticamente algunos menús preestablecidos y configurados con los correspondientes módulos de menús. 1

2 Tipos de ítem de menú. Cuando se crea un ítem de menú, es necesario asignarle un tipo de ítem de menú para definir lo que se va a mostrar. Los tipos de ítem de menú se pueden clasificar en cuatro categorías: 1. Enlaces internos: este tipo de ítem de menú permite acceder a los artículos o módulos que son parte del mismo sitio web, o que están bajo el mismo dominio. 2. Enlaces externos: este tipo de ítem de menú se utiliza para acceder a páginas de un sitio web externo. Se puede utilizar para acceder a sitios web externos, como Google, Yahoo, MSN desde nuestro sitio web. 3. Separadores: sirve para crear una separación o espacio divisorio entre las opciones de un mismo menú, lo que le permite organizar el menú de forma lógica. 4. Alias: crea un enlace de alias a otro ítem de menú que ya existe. Con esto puede mostrar información que ya se encuentra en otro ítem de otro menú. Creación de menús en Joomla La creación de menús en Joomla se realiza desde el Gestor de menús del panel administrativo, razón por la cual deberán iniciar sesión como administrador en el back-end. La interfaz de administración se abre desde: Después debe ingresar a la opción Menús Gestor de menús. 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 #3 1 2 Computadora con sistema operativo Windows instalado 1 3 El paquete completo de Joomla versión (español) 1 4 Webhosting Hostinger 1 Creación de artículos para el sitio Web IV. PROCEDIMIENTO 1- Ingrese al back-end del sitio instalado digitando en la barra de direcciones del navegador de su preferencia el enlace con el siguiente formato: en donde deberá colocar el subdominio que creó en la práctica 1 en lugar de micuentahostinger. 2- Escribir el usuario y contraseña que configuro en la práctica 2 para entrar al panel de control 2

3 3- Modificar la página de inicio y modificar el texto con información que se copiara de la siguiente dirección: a b a. Cambiar a la categoría Animales b. En estado asegurarse que tiene seleccionada la opción Publicado y la opción Si en destacado 4- Agregar un artículo a cada una de las categorías ya creadas: Mamíferos y Aves 5- Al final tendrá el siguiente listado de artículos agregados en cada una de las categorías: Ejercicio #1: Creación de elementos de menú dentro del menú principal. 1. En el panel de control de Joomla hacer clic en el enlace Gestor de Menús o en el menú Menús Gestor de menús. 2. Dentro del Gestor de menús, localice el menú denominado Menú principal (Main menu). Si no ha trabajado antes con menús y si no instaló los datos de ejemplo, seguramente será el único menú que podrá observar en el listado. 3

4 3. Al dar clic en el elemento Menú principal (Main menu), ingresará al Gestor de ítems de menú del Menú principal que únicamente debe mostrar el elemento (ítem) de menú Inicio (Home). Por defecto, en el menú principal, si no instaló datos de ejemplo, debe aparecer únicamente el elemento Inicio (Home). Verifíquelo. 4. Vamos a agregar un nuevo elemento de menú al menú principal, dando clic en el botón Nuevo de la barra de herramientas superior (botón color verde). 5. Esto cargará la página Nuevo elemento de menú 6. En el formulario para crear un nuevo elemento de menú, debe ingresar la información solicitada, principalmente indicar el Tipo de elemento de menú, usando el botón Seleccionar, el Título del menú, el alias (opcional, ya que Joomla asignará un valor automáticamente, si no lo hace ud.), indicar el Estado, la localización del menú (que deberá ser Menú principal (Main Menu)), seleccionar el elemento padre (Home). 7. Haga clic en Artículos para mostrar las opciones que proporciona Joomla para este tipo de elemento de menú. 4

5 8. Haga clic sobre la opción Mostrar un solo artículo. 9. Aparecerá en el formulario un nuevo campo de selección de artículo. 10. Haga clic en el botón Seleccionar de este campo. 11. Estos son los artículos que ya ingresó desde el Gestor de artículos y que ubicó en alguna categoría de las categorías que se han creado previamente 5

6 12. Seleccione uno de los artículos que aparezcan en el listado, por ejemplo vamos a seleccionar la categoría Animales 13. Termine de llenar los detalles del nuevo elemento de menú en el formulario de creación de un nuevo elemento de menú. a. Título del elemento del menú: Mamíferos b. Alias: mamiferos-menu Al terminar, presione el botón Guardar (c) c a b 14. Verifique que se ha creado correctamente el elemento de menú. Debe aparecer un mensaje que se lo indique, independientemente de si presionó el botón Guardar, Guardar y cerrar o Guardar y nuevo. 15. Actualice la página de inicio de su sitio Joomla para observar lo que ocurre con el menú principal de su sitio web. Debería aparecer la el menú Mamíferos a la par del menú Home o Inicio. 16. Realizar pruebas para comprobar el uso del nuevo menú 6

7 Ejercicio #2: Creación de un nuevo menú. 1. Ingrese nuevamente al Gestor de menús, si acaso lo había abandonado o se había salido. 2. Dentro del Gestor de menús haga clic en el botón Nuevo en la barra de herramientas ubicada a la derecha del título Gestor de menús: Menús. 3. Llene el formulario para creación de un nuevo menú, ingresando en el Título: Clasificación de Animales, en el Tipo de menú: animales-menu (note que no se utilizan espacios en blanco ni caracteres especiales del español en este campo) y en Descripción: Presentación de las diferentes clasificaciones del reino animal. Al terminar, presione el botón Guardar. 4. Verifique que el menú se haya creado correctamente. Debe aparecer el mensaje que se muestra a continuación. 5. Cierre el formulario para ver en el listado de menús el menú recién creado. 7

8 OBSERVACIÓN: En este momento, todavía no podrá visualizar nada en el front-end. Siga el procedimiento para proseguir y poder visualizar el menú. Ejercicio #3: Creación de los elementos (ítems) del menú. 1. El menú anterior, creado en el ejercicio #2 no posee elementos, solo se ha creado un objeto que para tener funcionalidad necesita poseer elementos, que serán las opciones que se desplegarán al posicionar el menú y en las que los usuarios harán clic para navegar en el sitio web. Ingrese al Gestor de menús para comenzar a crear los elementos del menú anterior. 2. Puede dar clic en el nombre del menú O hacer clic en la opción Menús del menú superior y seleccionar la opción Añadir nuevo elemento de menú de la subopción Clasificación de Animales. 8

9 3. Cargará la página del Gestor de menús: Elementos de menú, en donde podrá crear uno a uno los elementos del menú. Haga clic en el botón Nuevo 4. En la página Gestor de menús: Añadir un elemento de menú, seleccionar el Tipo de elemento de menú, para lo que deberá presionar el botón Selecionar, ubicado junto al campo de formulario del tipo de elemento de menú 5. Seleccione el tipo de elemento de menú. En este caso crearemos un elemento de tipo Artículo y en el listado de tipos de elementos de menú seleccionar Mostrar un solo artículo. 9

10 6. Seleccione el artículo que estará referido al elemento de menú que se está creando. Para ello haga clic sobre el botón Seleccionar, junto al campo de texto en Seleccionar artículo 7. Seleccione el artículo que vinculará a la opción de menú en el diálogo emergente que aparecerá luego de presionar el botón Seleccionar, en el ejercicio seleccione el artículo: Aves 8. Llene los Detalles (Details) del formulario para creación de un nuevo elemento (ítem) de menú. d a b c a. Título del elemento del menú: Aves b. Alias: aves-menu c. Abrir en: Nueva ventana con barra de navegación Presione el botón Guardar (d) 9. Haga clic en Cerrar para que los cambios se almacenen. 10

11 10. Verifique que se haya creado correctamente el elemento de menú. 11. Vaya al menú Gestor de artículos y coloque como destacados a los siguientes artículos: Mamíferos y Peces 12. Haga clic en el la opción de menú: Menús y haga clic en Añadir un nuevo elemento del menú a la opción Clasificación de Animales 13. Siguiendo el mismo procedimiento, cree un elemento de menú adicional. En este caso, el tipo de elemento de menú será nuevamente Artículos y dentro de los tipos de artículos, seleccione Mostrar todos los artículos destacados 11

12 14. Complete los campos del formulario para creación del nuevo elemento de menú. En el título del menú coloque Otras clasificaciones, en el alias peces-mamiferos-menu. Verifique que el elemento de menú esté en Clasificación de Animales y que en el Elemento principal esté seleccionado Elemento de menú raíz. 15. En la opción Abrir en seleccionar la opción Nueva ventana con barra de desplazamiento 16. Haga clic en Guardar 17. Y cierre 18. Verifique que estén creados los dos elementos de menú en el menú Clasificación de los animales. 12

13 19. Ingrese al front-end, notará que no aparece el menú por ningún lado. Esto tiene su explicación y es que necesita crear un módulo para gestionar la presentación del menú en el front-end. Algo que haremos en el siguiente ejercicio. Ejercicio #4: Creación del módulo para mostrar el menú. 1. Crear un nuevo módulo, desde el Gestor de módulos. Puede hacerlo desde el menú del panel administrativo, en la opción Extensiones. 2. En el Gestor de módulos presionará el botón Nuevo para crear un nuevo módulo. Este módulo estará asociado al menú Clasificación de Animales que se creó en el ejercicio 2 del procedimiento. 3. Seleccione el tipo de módulo que va a crear. En este caso será un Menú. 13

14 4. Ingrese los detalles del menú, como se indica a continuación. a b c a. Título: Clasificación Animales 14

15 b. Seleccionar menú: Clasificación de Animales c. Indicando que la posición del menú será Inferior-derecha [position-3] (se utiliza cuando tenga que establecer la posición del menú en la página del front-end del sitio) 5. Haga clic en Guardar 6. Haga clic en Cerrar 7. Verifique que se haya creado correctamente el módulo para el menú Clasificación de Animales. 8. Abra otro navegador o una nueva pestaña del que está usando e ingrese al front-end para verificar que se muestra el menú luego de haber creado y configurado el módulo. 9. Cuando se tiene un menú creado con artículos destacados y se quiere agregar un nuevo artículo a este menú solo es necesario destacar el artículo, realizar el ejercicio con el articulo Aves 15

16 10. Ahora vuelva a cargar el front-end e ingrese a la opción de menú Otras Clasificaciones. Observará que esta vez carga el contenido de los tres artículos destacados. Ejercicio #5: Creación de un menú de enlaces externos. En algunas situaciones puede ser útil crear un menú de enlaces externos para cargar páginas de otros sitios que resulten buenas referencias de acuerdo al tema abordado en el sitio web. 1. Ingrese nuevamente al Gestor de menús desde el menú principal del panel de administración de Joomla. 2. Presione el botón Nuevo en el menú superior del Gestor de menús. 3. Ingrese la información del menú. Luego, presione el botón Guardar. 4. Haga clic en la opción Cerrar 5. Cree los elementos de este menú haciendo clic en el nombre del menú. 16

17 6. Presione el botón Nuevo en el Gestor de ítems de menú. 7. Seleccione el tipo de elemento de menú presionando el botón Seleccionar que aparece junto al campo de texto: Tipo de elemento del menú. 8. Haga clic en el elemento Enlaces de sistema 9. Y en el listado que se despliega clic sobre Crear una URL 10. Notará que los campos de formulario a llenar cambian al seleccionar URL externa. Ingrese en el campo Enlace la dirección del sitio que quiere cargar desde el sitio web Joomla. En este enlace utilice a c b 17

18 a. Título del elemento del menú: Listado de animales b. Abrir en: Nueva ventana con barra de desplazamiento c. Menú: Enlace externo 11. Cree ud. dos elementos de menús adicionales. Uno que titulará Animales en extensión y otro que titulará Animales más raros del mundo. Los enlaces respectivos serán: Cree el módulo para este menú para poder visualizarlo en el front-end. V. DISCUSIÓN DE RESULTADOS 1) Cree un sitio web, sobre el tema que ud prefiera. Se le pide crear al menos dos categorías, dos subcategorías en cada una de ellas y un total de seis artículos. Puede ubicar estos artículos en la subcategoría que desee. 2) Cuando ya tenga las categorías, cree dos ítems de menú dentro del menú principal, un nuevo menú que deberán cargar en tres de sus opciones tres de los artículos, y en la otra opción del menú, deberá cargar los tres artículos restantes. 3) Cree un artículo adicional, no categorizado, que deberá cargar en la página de Inicio (Home) VI. BIBLIOGRAFÍA 1. Manual Imprescindible Joomla! / Bintu Harwani. Harwani, Bintu Madrid, España: ANAYA, 2010 Biblioteca UDB Clasificación: H Menus Menu Item Article Category List 3. Creating a submenú 18