GESTION Y ADMINISTRACION WEB ING. A.

COPA

GUIA DE LABORATORIO 01

IMPLEMENTACION DE UNA PAGINA WEB EN JOOMLA

PRACTICA 01: Instalar y Configurar Plantillas

1. Instalar Joomla 3.x sin datos de ejemplo de tal manera que al ejecutarlo su pgina que de la
siguiente forma:

2. Ud puede descargar PLANTILLAS JOOMLA en la web, pero para ejemplo se le proporcionara

plantillas que se encuentra en una carpeta que el docente debe proporcionarles:

3. Descargar la en una carpeta aparte el archivo IT_Future-v3.0.1 que deber contener los siguientes
archivos:

4. Ingrese al administrador del joomla para proceder a cargar la plantilla, vamos al men Extensiones
y elegimos Gestor de extensiones
1
 GESTION Y ADMINISTRACION WEB ING. A.COPA

5. En Subir Archivo Paquete elegir el Archivo tpl_ice_future de la carpeta de la plantilla

descomprimida

Este es el tema de
la plantilla

Y presionar el Botn Subir e Instalar

6. Y le debe aparecer un mensaje de que la plantilla se instal correctamente

7. Ahora subiremos 2 MODULOS y PLUGINS para ello vamos a nuestra carpeta de la plantilla
descomprimida
2
 GESTION Y ADMINISTRACION WEB ING. A.COPA

8. Y descomprimimos en una carpeta separada el archivo : IceMegaMenu_V3.0.2_Unzip_First y

dentro de esta carpeta encontramos los siguientes archivos:
Este es un mdulo para el men
de la pagina web

Este es Plugin del Men

9. Ahora igualmente subimos estos 02 archivos con el gestor de extensiones

10. Asimismo descomprimimos en una carpeta separada el archivo: iceCarousel_V3.0.1_Unzip_First
que ser necesario para el deslizante de las imgenes de la pagina Web y dentro de ella
encontraremos el modulo: mod_ice_carousel

11. Subimos tambin este archivo con el gestor de extensiones.

12. Una vez subidos los mudulos y plugin probamos nuestra pgina y supuestamente no hay ningn
cambio. Entonces para que ocurra los cambios de la plantilla nos vamos al Menu Extensiones y
elegimos gestor de plantillas

3
 GESTION Y ADMINISTRACION WEB ING. A.COPA

13. y nos muestra el gestor de plantillas y hacemos clic en la estrellita para q se active por defecto el
tema de nuestra plantilla subida

14. Ahora probamos en la vista previa nuestra pgina y deber activarse el nuevo tema de nuestra
pgina:

15. Ahora vamos activar los modulos y plugin que hemos instalado, vamos al menu extensiones
opcin gestor de modulos y activamos ambos modulos

PRACTICA 02: Implmentar un sistema de Menus

4
 GESTION Y ADMINISTRACION WEB ING. A.COPA

1. nuevamente , vamos al menu extensiones opcin gestor de plugins y activamos el plugins

iceMegaMenu

2. Nuevamente vamos al menu extensiones opcin gestor de modulos y seleccionamos el modulo

IceMegaMenu para activar el menu principal

3. Buscamos en Posicin en Ice_Future seleccionamos el Mainmenu

4. En sus parmetros elegimos por default

5
 GESTION Y ADMINISTRACION WEB ING. A.COPA

5. Para la asignacin del Menu elegimos la opcin en todas las paginas y hacemo clic en Guardar y
Cerrar

6. Al hacer vista previa nuestra pagina ya esta implementado el Menu principal

7. PARA EJEMPLO DE NUESTRA PAGINA HAREMOS UN SUPUESTO DE UNA TIENDA DE VENTA DE

DE COMPUTADORAS CON EL SIGUIENTE MENU DE EJEMPLO

SERVICIOS SOBRE NOSOTROS UBICACION CONTACTOS

8. Creamos una categora llamada TIENDA en el gestor de categoras y Luego agregaremos opciones
a nuestro menu agregando artculos (en joomla los artculos vienen a ser las pginas interiores),
elegimos el menu Gestor de artculos y agregamos un nuevo articulo

9. Agregaremos 04 ARTICULOS: SERVICIOS, SOBRE NOSOTROS, UBICACIN, CONTACTOS sin ningn

contenido todava.
10. Luego de haber creado los artculos vamos al gestor de menus y elegimos menu principal y
aadimos un nuevo elemento

6
 GESTION Y ADMINISTRACION WEB ING. A.COPA

11. Y hacemos clic en seleccionar elegimos articulo Simple , luego selecciono el articulo SERVICIOS, y
le pongo de titulo al menu SERVICIO y hago clic en Guardar y Nuevo

12. As realizar el mismo procedimiento para el resto de las opciones del menu principal para
enlazarlos con sus artculos respectivos de tal manera que al hacer vista previa a nuestra pagina
debe mostrar el sistema de mens:

TODAVIA FALTA MUCHOS ELEMENTOS A NUESTRA PAGINA, PARA ELLO CONTINUAMOS CON LA
SIGUIENTE PRACTICA:

PRACTICA 03: Crear un deslizante de imgenes para nuestra pagina de inicio

1. Vamos al menu extensiones opcin gestor de modulos y activamos el modulo iceCarosuel

7
 GESTION Y ADMINISTRACION WEB ING. A.COPA

2. En Detalles la posicin seleccionamos Icecarousel y en opciones Basicas en Select Theme

elegimos Moderna y en ancho establecemos 1175 y alto 465

3. Luego en la opcin Menu Asignado elegimos en la opcin solo en las paginas seleccionadas

4. Y solo activamos en el Men Inicio y clic en el botn guardar y cerrar

5. Ahora nos falta agregar las imgenes a nuestro deslizante, vamos a contenido y elegimos Gestor
Multimedia

8
 GESTION Y ADMINISTRACION WEB ING. A.COPA

6. Creamos una carpeta que la llamaremos DESLIZANTE haciendo clic en crear carpeta le ponemos
nombre y hacemos clicn en Crear Carpeta

7. Luego hacemos clic en la carpeta creada y clic en botn Subir luego hacemos clic en Elegir
archivos elegimos nuestras imgenes y hacemos clic en Iniciar Subida

8. Una vez subido los archivos creamos una nueva categora llamada imgenes y hacemos clic
Guardar y Cerrar

9
 GESTION Y ADMINISTRACION WEB ING. A.COPA

9. Ahora vamos al Gestor de Artculos crearemos un artculo para cada imagen , para la primera
imagen y de Titulo de ponemos OFERTA DEL MES EN ESTE JUNIO DEL MUNDIAL seleccionamos la
imagen correspondiente haciendo clic en Imagen, insertamos la imagen correspondiente y en la
categora elegimos Imgenes que la creamos anteriormente y hacemos clic en Guardar y Nuevo

10. Y hacemos lo mismo para 4 imgenes mas relacionadas y al final haga clic en guardar y cerrar
11. De ah vamos a Extensiones elegimos opcin Gestor de Modulos y elegimos el modulo
IceCarosuel Module

12. En Content Option Elegimos en source from Categorias y establecemos en category Imgenes y
guardamos y cerramos

10
 GESTION Y ADMINISTRACION WEB ING. A.COPA

Al Final le mostrara un resultado con imgenes con imgenes tal vez pequeas pero deber ajustarlo en
distintas opciones para que al final muestre un resultado final como el siguiente

En el siguiente manual seguiremos implementando nuestra pagina en joomla

11
 GESTION Y ADMINISTRACION WEB ING. A.COPA

GUIA DE LABORATORIO 02

IMPLEMENTACION DE UNA PAGINA WEB EN JOOMLA

PARTE II
**Requisito: tener implementado el laboratorio 06

PRACTICA 01: AJUSTAR LA PAGINA PARA DISPOSITIVOS MOVILES.

Hay que prevenir que nuestra pgina al reducirse lo que ocurre generalmente para dispositivos mviles
hay que ajustarlo para ello.

1. Vamos al men Extensiones elegimos Gestor de Modulos y hacemos clic en Nuevo y hacemos
clic en Personalizar HTML

2. Luego en titulo ponemos blank y en posicin elegimos Search de la plantilla Ice_Future

3. Luego en Salida Personalizada hacemos clic en el editor y hacemos un espacio con la tecla
espaciador

Presiones un
espacio ms con la
tecla espaciador

12
 GESTION Y ADMINISTRACION WEB ING. A.COPA

4. En Men Asignado elegimos en Modulo Asignado la opcin En Todas Las paginas

5. Luego hacemos clic en guardar y cerrar y hacemos vista previa a nuestras pgina y ajustamos
nuestra pgina reduciendo nuestra ventana de tal manera que se ajuste automticamente.

PRACTICA 02: AGREGAR PROMOCIONES A NUESTRA PAGINA DE INICIO.

1. Vamos al men Extensiones elegimos Gestor de Modulos y hacemos clic en Nuevo y hacemos
clic en Personalizar HTML

13
 GESTION Y ADMINISTRACION WEB ING. A.COPA

2. En Titulo escribimos GARANTIA ye acceso seleccionamos Promo1 de la plantilla Ice_future

3. En salida personalizada pegamos un texto que se ha preparado para la tienda de venta de

computadoras

4. En Menu asignado elegimos en solo las paginas seleccionadas

14
 GESTION Y ADMINISTRACION WEB ING. A.COPA

5. Y solo seleccionamos el Menu Inicio, hacemos Clic en Guardar y Nuevo;

6. En Titulo escribimos SOPORTE TECNICO ye acceso seleccionamos Promo2 de la plantilla

Ice_future

7. En salida personalizada pegamos otro texto que se ha preparado para la tienda de venta de
computadoras

15
 GESTION Y ADMINISTRACION WEB ING. A.COPA

8. En Menu asignado elegimos en solo las paginas seleccionadas

9. Y solo seleccionamos el Menu Inicio, hacemos Clic en Guardar y Cerrar; luego hacer vista previa a
nuestra pagina

10. Y deber mostrar nuestras promociones de nuestra pgina para la tienda de computadoras

16
 GESTION Y ADMINISTRACION WEB ING. A.COPA

PRACTICA 04: PERSONALIZAR EL MENU INICIO Y QUITAR ELEMENTOS.

1. Vamos al Gestor de Articulos y aadimos un nuevo articulo PARA CREAR UN ARTICULO PARA EL
MENU PRINCIPAL DE NUESTRA TIENDA

2. En Titulo ponemos INICIO y Escribimos el siguiente texto para nuestro men principal

3. Para dirigir este articulo a INICIO vamos al Gestor de menus y hacemo clic en men principal

4. Seleccionamos Inicio

17
 GESTION Y ADMINISTRACION WEB ING. A.COPA

5. Hacemos Clic en seleccionar

6. Hacemos Clic en Articulo simple

7. Seleccionamos INICIO que es el artculo que acabamos de crear y Guardar y

8. hacemos vista previa a nuestra pgina y deber ya tener texto para el inicio de nuestra pagina

18
 GESTION Y ADMINISTRACION WEB ING. A.COPA

9. tenemos que quitar los siguientes elementos para nuestro articulo INICIO

10. Nuevamente Seleccionamos Inicio

11. Clic en Opciones Avanzadas

19
 GESTION Y ADMINISTRACION WEB ING. A.COPA

12. En la parte de debajo buscamos y hacemos clic en Opciones de visualizacin en la Pagina

13. Y hacemos clic en NO Mostrar Encabezado de Pagina

14. Guardamos y cerramos y pre visualizamos nuestra pgina y deber desaparecer el elemento Inicio
por defecto y quedar nuestro Inicio que hemos creado:

Falta quitar estos

elementos

15. Luego para quitar los elementos debajo de INICIO vamos Gestor de Articulos:

20
 GESTION Y ADMINISTRACION WEB ING. A.COPA

16. Seleccionamos Opciones

17. Ponemos en NO y ocultamos todas las opciones (ojo todas las opciones)

18. Guardamos y cerramos y pre visualizamos nuestra pgina y deber desaparecer los elementos
mostrar lo siguiente:

21
 GESTION Y ADMINISTRACION WEB ING. A.COPA

19. Luego debajo del articulo inicio hay exceso de espacio al cual debemos ajustarlo, para ello vamos
al Menu Extensiones y elegimos el Gestor de plantillas

20. Seleccionamos la Opcin Plantillas

21. Elegimos la plantilla Ice_Future

22. Elegimos editar CSS Plantillas:

22
 GESTION Y ADMINISTRACION WEB ING. A.COPA

23. Luego presionamos CTRL+F y escribimos la palabra middle para buescar el cdigo CSS

24. En el cdigo Fuente en altura mnima le establecemos a cero

25. Guardamos y cerramos y pre visualizamos nuestra pagina

23
 GESTION Y ADMINISTRACION WEB ING. A.COPA

GUIA DE LABORATORIO 03

IMPLEMENTACION DE UNA PAGINA WEB EN JOOMLA

PARTE III
**Requisito: tener implementado el laboratorio anterior

PRACTICA 01: PONER UN LOGO.

Para poner un logo es necesario que sea para el caso de esta pgina un grfico de 160x48 para efectos de
este manual se le dispondr en archivo para el logo de nuestra pagina.

1. Continuando el trabajo de nuestra pgina nos vamos al men Extensiones y seleccionamos el

Gestor de plantillas y seleccionamos la plantilla Ice_future
2. Seleccionamos opciones hacemos clic en Seleccionar

3. Subimos el archivo LOGO.PNG, la elegimos y hacemos clic en Insertar luego guardamos y

cerramos y pre visualizamos nuestra pgina y deber mostrar insertado nuestro logo.

24
 GESTION Y ADMINISTRACION WEB ING. A.COPA

PRACTICA 02: PONER CONTENIDO A LA PAGINA.

Para poner contenido a la pgina debemos agregar a los mens que se crearon como artculos haremos
de ejemplo uno

1. Vamos al men contenido y seleccionamos gestor de artculos y seleccionamos el articulo

SERVICIOS y le ponemos el siguiente Texto:

2. Le insertamos una imagen haciendo clic en Imagen la subimos, la elegimos con la opcin izquirda
para que se ubique ah en el texto y la insertamos luego guardamos y cerramos

3. Previsualisamos la pagina y deber quedar de la siguiente manera:

25
 GESTION Y ADMINISTRACION WEB ING. A.COPA

PRACTICA 02: PONER MODULO DE REDES SOCIALES.

1. Vamos al men gestor de extensiones

2. Subimos el modulo mod_je_social que se les proporciono antes la subimos y la instalamos

3. Luego vamos al men de extensiones y elegimos gestor de modulos

4. Activamos el modulo mod_je_social

26
 GESTION Y ADMINISTRACION WEB ING. A.COPA

5. Luego ingresamos e este modulo y le ponemos de titulo REDES SOCIALES y en posicin le

ponemos al lado derecho

6. Luego opciones bsicas le ponemos nuestras cuentas para ejemplo bsico solo le pondremos
el carcter # en las cuentas que uds deseen

7. Luego en Menu Asignado en paginas selleccionadas check en las paginas siguientes

27
 GESTION Y ADMINISTRACION WEB ING. A.COPA

8. Guardamos y cerramos. Previsualizamos nuestra pagina de tal manera que quede asi:

9. Podemos agregar mas modulos yendo men de extensiones y elegimos gestor de modulos
Y haciendo clic en nuevo y personalizar Html

10. Le asignamos como titulo Testimonios y ocultamos mostrar titulo

11. Le ponemos un texto referido a un testimonio de algn cliente

28
 GESTION Y ADMINISTRACION WEB ING. A.COPA

12. En detalles establecemos en lado derecho

13.

13. En Menu Asignado le asignamos al men servicios

14. Guardamos y cerramos y debe mostrarnos mas o menos asi:

29