UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS

CICLO II-2013

GUIA DE LABORATORIO 6

Sitios Web Administrables con Joomla

Objetivo: En este material se desarrolla una aplicación en Joomla!, cada alumno debe realizar su propia instalación y configuración de Joomla! Es un Sistema de Gestión de Contenidos (CMS) reconocido mundialmente, que le ayuda a construir sitios web y otras aplicaciones potentes. Joomla! es una solución de código abierto y está disponible libremente para cualquiera que desee utilizarlo. Un CMS es un sistema de software para computadoras que permite organizar y facilitar la creación de documentos y otros contenidos de un modo cooperativo. Con frecuencia, un CMS es una aplicación web usada para gestionar sitios web y contenidos web.

1. Para instalar Joomla 2.5 debemos preparar su entorno de ejecución. Para el entorno Windows es necesario instalar un paquete de aplicaciones que nos permite montar un servidor web local en la computadora. En nuestro caso utilizaremos Wamp Server, WAMP (Windows, Apache, MySQL, PHP), un entorno que trae incorporado Apache, MySQL, PHP y además el entorno de gestión de base de datos web llamado phpMyAdmin.

Verifique que WAMP Server se encuentra instalado en su máquina y ejecútelo. Si está desarrollando esta guía en su casa, instale el wampserver basándose en la guía que esta publicada en el aula (semana del 23 al 27 de Septiembre)

Si no está el acceso directo en el escritorio, búsquelo en inicio, todos los programas y busque WampServer:

I-Instalación de Joomla! y creación del Sitio

Posiblemente en este punto le pida contraseña, digite msm-115

En su barra de inicio deberá aparecer el server ejecutándose, y cuando cargué todos los servicios se tornará color verde:

2. Descargar el archivo desde:

Aula Virtual: Novedades, Instaladores .

3. Renombrar el comprimido “Joomla_2.5.6-Spanish-Pack_Completo.zip” que fue descargado, a uno que contenga su carnet de estudiante, como ejemplo debemos renombrarlo “joomla_carnet.zip”, en donde carnet tendrá el formato xx99999. Es sumamente importante renombrar este archivo con su número de carnet.

Antes Después

4. Copiamos el archivo en el siguiente directorio: C:\wamp\www\

5. Ahora descomprimiremos el archivo “joomla.zip” dando clic derecho sobre el y elegimos la opción “Extraer en joomlacarnet\”:

Ahora que descomprimimos nuestro archivo, borramos el archivo joomla_carnet.zip

Borramos el archivo zip

6. Ahora abrimos el navegador y escribimos la siguiente dirección en nuestra barra de direcciones: localhost/joomlacarnet/

7. Aparecerá la pantalla de instalación de Joomla 2.5.x versión Español. tal como muestra la figura:

Seleccione la opción “Español (Format International)” y presione el botón “Siguiente”.

8. En la siguiente pantalla verifique la información que muestra. Y luego presione el botón “Siguiente”:

9. Aparecerá la pantalla de licencia publica general GNU, de clic en siguiente:

10. En la siguiente pantalla configuraremos las base de datos en donde joomla desplegara sus datos iniciales, la cual es soportada por WAMP Server. En el campo “Tipo de Base de Datos” seleccionamos la opción “Mysql”,

en “Nombre de Host” escribimos “localhost”, en el campo “Usuario” escribimos “root”, y finalmente daremos un nombre a la base de datos que se creara, en este caso llevara el nombre de la base de datos incluirá su número de carnet

como se en el siguiente ejemplo “bd_joomla_carnet” en donde carnet tendrá el formato xx99999. Verifique la siguiente imagen y luego de clic en finalizar:

Valor asignado

11. En la siguiente pantalla nos indica que debemos escribir la configuración de nuestra conexión FTP, pero como estamos trabajando con un servidor local vamos a omitir este paso, solo debemos de dar clic en siguiente.

12. Nos aparecerá la siguiente pantalla donde debemos de colocar la información de la configuración principal. En la configuración básica solamente colocaremos el nombre de nuestro sitio el cual tendrá el siguiente formato: “msm115_joomla_carnet”, debe de colocar su número de carnet donde dice carnet. Debe de colocar su dirección de correo electrónico, posteriormente en el apartado “Usuario del administrador” debe de colocar su número de carnet, luego debe de digitar una contraseña para el administrador y confirmarla (en la tarea debe ser administrador el nombre de la contraseña). Luego debemos de dar clic en siguiente.

13. En esta parte es sumamente importante que eliminemos la carpeta de instalación de joomla que se encuentra dentro de los archivos de joomla copiados a la dirección C:\wamp\www\, por fortuna el asistente de instalación nos brinda la opción de eliminar dicho directorio desde el propio asistente, como se muestra en la siguiente imagen, debemos de dar clic en “Eliminar la carpeta de instalación” y posterior a esto debemos de clic en siguiente.

Clic aquí para

eliminar la carpeta de

instalación

Si la operación se realizó con éxito nos debe de aparecer el siguiente mensaje:

Y posterior a esto debemos de clic en siguiente y con eso la instalación ha terminado.

14. Si deseamos acceder a nuestro sitio debemos de buscar en la parte superior izquierda de la pantalla el siguiente botón:

Al presionar clic en Sitio no direccionara a la página de inicio.

Si deseamos entrar para administrar joomla y editar nuestro sitio, debemos de digitar lo siguiente en nuestro navegador:

Recordemos que en lugar de la palabra Carnet debe de digitar su número de carnet, nos debe de aparecer la siguiente pantalla:

Al ingresar encontrar una gran variedad de opciones con las cuales puede editar su sitio web y administrar en forma general su instalación de Joomla. El panel de administración tiene el siguiente aspecto.

Debemos de colocar

nuestro usuario y

contraseña para entrar

como administradores

En Joomla podemos gestionar diferentes elementos y contenidos, tal como observamos en la imagen anterior de nuestro Panel de Administración. Los elementos básicos de gestión son las categorías, artículos y menús.

1. Comenzaremos realizando la Gestión de Categorías. En nuestro sitio podemos tener una gran variedad de contenido, el cual podemos clasificarlo para su mejor búsqueda, organización o comprensión. Por ejemplo si queremos un sitio en el cual poseamos información de las diferentes materias impartidas por la EISI, podemos realizar la categoría: Todas las Materias, y dentro de ella cada materia en especifico, por ejemplo: Manejo de Software. Para ello en el Panel de Administración damos clic en la opción Gestor de Categorías:

Y al dar clic aparecerán las categorías que poseemos. Para crear una nueva categoría damos clic en nuevo, opción que se encuentra en la parte superior derecha:

Al dar clic en nuevo aparecerá un formulario para la creación de una nueva categoría y la llenamos con los siguientes datos:

II- Gestionando Nuestro Sitio

El alias se genera de forma automática. Luego damos clic en Guardar y Nuevo.

2. Los cambios seran guardados y comenzaremos la creacion de nuestra subcategoria Manejo de software, y llenamos los siguientes datos:

Debido a que esta es una subcategoria en el campo “padre” seleccionamos que su padre sera “Todas las Materias” es decir, la categoria creada en el paso anterior.

Luego presionamos clic en Guardar y nuevo

3. Ahora ya tenemos las categorías que utilizaremos, el siguiente paso es crear artículos, los cuales pertenecerán a una categoría y se mostraran al usuario para su visualización.

Instalación de editor para las Hojas Web (Artículos)

4. Desde el FTP de la asignatura http://aula.fia.ues.edu.sv/materialpublico/msm115/instaladores/ Seleccionar:

Luego en el Panel de Administración de Joomla seleccionamos la opción Gestor de extensiones: Después en la sección subir archivo o paquete clic en “Seleccionar Archivo”:

Seleccionamos el archivo descargado anteriormente: JCE 2.2.7.2 (Zip Archive) y luego clic en Subir e instalar.

Aparecerá la siguiente ventana:

5. Después ir a configuraciones globales de nuestro panel de Administración de Joomla: Al ingresar a las configuraciones globales nos seleccionamos Editor por Defecto, y en la lista desplegable seleccionamos “Editor-JCE”: Cambiamos el que tiene definido (TinyMCE) por el Editor JCE

Luego clic en Guardar y Cerrar.

6. Ahora seguiremos con nuestra creación de un artículo inicial. Para ello damos clic en la opción Añadir un Nuevo Artículo de nuestro Panel de Administración: Nos aparecerá el formulario de edición del nuevo artículo y llenamos los datos requeridos y como observaran aparecerán nuevas herramientas para la edición del artículo, proporcionadas por el Editor-JCE:

Llenamos los campos de nuestro artículo a crear de la siguiente manera, realizaremos el programa de la asignatura:

Recordemos que este artículo (pagina) pertenecerá a la categoría Manejo de Software para Microcomputadoras (MSM-115) ya que es el Programa de la Asignatura de MSM-115:

Para finalizar damos clic en Guardar y Cerrar.

7. Ahora ya tenemos nuestro primer contenido, sin embargo debemos establecer una forma de acceso, esto lo lograremos mediante los menús. Para crear un nuevo menú nos vamos a la opción Gestión de Menús del Panel de Administración: Dentro del Gestor de Menús damos clic en la opción “Elementos de Menú”:

Podemos observar que se encuentra el elemento de menú por defecto llamado “inicio”:

Damos clic en Nuevo y comenzaremos la creación del nuevo menú. En Tipo Elemento Menú vamos a seleccionar el tipo: Articulo Destacados. Y el titulo sea Todas las Materias. El alias se genera de forma automática.

Aparecerá automáticamente en la parte derecha una serie de opciones y en las Opciones de Plantilla seleccionamos la categoría “Todas las Materias”, por medio de esto permitimos que muestre los artículos destacados de todas las materias:

Para finalizar damos clic en Guardar y Nuevo.

Ahora crearemos un SubMenu llamado “Manejo de Software para

Microcomputadoras (MSM-115)” el cual estará dentro del Menu “Todas las

Materias”.

Haciéndolo de la siguiente forma:

En este caso nuestro Tipo Elemento Menú seleccionaremos Lista de Categorías. Nuestro alias se generara automáticamente, y una parte importante es que el padre de este Submenú será el Menú creado anteriormente “Todas las Materias”:

Aparecerá automáticamente en la parte derecha una serie de opciones y en las Configuración Requerida seleccionamos la categoría “Manejo de Software para Microcomputadoras”, por medio de esto permitimos que muestre los artículos de esta categoría:

Para finalizar damos clic en Guardar y Cerrar.

Ahora tendremos la siguiente estructura de Elementos Menús:

Seleccionamos todos los menús y damos clic en Reconstruir: Esto lo realizaremos cada vez que modifiquemos o adicionemos menús.

8. Si recargamos la pagina de nuestro sitio podremos ver el nuevo menú, damos clic en Todas las Materias, luego en Manejo de Software para Microcomputadoras (MSM-115) y podremos observar nuestro articulo:

9. Ahora cambiaremos la plantilla por defecto que trae Joomla por otra diferente, en el Panel de Administración damos clic en Gestor de Plantillas: Al ingresar podremos observar los siguientes estilos:

Seleccionamos el estilo “Beez2 - Defecto”. Y presionamos clic en Establecer por defecto

10. Entramos al estilo

11. En opciones avanzadas cambiaremos algunos campos, estos son: Logo, Descripción Sitio y Color Plantilla.

Para el logo(imagen) Primero presione clic en iniciar seleccionar, luego examinar

Seleccionaremos el Logo de la Universidad de El Salvador.

Nota: Si no lo tienes, descárgalo () Luego presiona clic en iniciar subida Se mostrara el mensaje Subida completada y el archivo de imagen disponible

Después seleccionamos la URL Imagen presionando clic en la imagen(1) (ues01.png) y clic en insertar(2)

En Descripción del Sitio cambiamos el valor por “Materias de Ingeniería de Sistemas Informáticos” y en Color Plantilla seleccionamos la opción “Naturaleza”. Damos clic en Guardar y Cerrar.

12. Al recargar nuestra página del sitio o al dar clic en la opción ver sitio: O entrando al navegador.

Observaremos los cambios realizados:

Y dentro del menú de Manejo de Software… veremos

Para llevarse el proyecto para continuarlo en su casa, deberá consultar la guía de importación-exportación de proyectos joomla.