Joomla 3.XR3ADY!

Ejercicio GuiadoPaso a Paso

Rediseño Pagina del instituto Politecnico La Salle

ContenidoHerramientas y progrmas a utilizar ..................................... 1Instalacion de Wampserver 5.4 ..............................................2instalacion de joomla 3.0 ........................................................ 3Creacion de Categorias ............................................................4Creacion de articulos ............................................................... 5Creacion del Menu ..................................................................... 6Instalacion de Modulos, Plugins y Componentes ................7 Instalacion de Plantilla Mountains ................................... 7.1 Instalacion de modulos Personalizar HTML ..................7.2 Instalacion galeria de imagenes ligthbox ......................7.3 instalacion de videos remotos de youtube ...................7.4 Instalacion de content slider ............................................7.5 Instalacion de Mapa de Goolge Map ................................7.6 Instalacion de Quikcontact ................................................ 7.7Ubicacion de modulo Buscar en nuestro sitio ................... 8conclucion ................................................................................... 9Ejercicio Finalizado de Forma Remota .................................10

HERRAMIENTAS

Mountainshttp://www.joomla24.com/Joomla_3x_Templa-tes/Joomla_3x_Templates/Mountains_Theme.html

Modulo je lightboxhttp://jextensions.com/jquery-light-box-joomla/

Modulo bt contentsliderhttp://extensions.joomla.org/extensions/news-display/articles-display/articles-show-case/19125

jevents_3.1.21http://extensions.joomla.org/extensions/calen-dars-a-events/events/events-calendars/95

com_jcehttps://www.joomlacontenteditor.net/

http://www.joomshaper.com/joomla-extensions/simple-youtubeSimple Youtube

plugin googlemaphttp://extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/street-maps/1147

CK Slideshowhttp://extensions.joomla.org/exten-sions/photos-a-images/slideshow/image-jquery-slideshow/20362

1

WAMPSERVER

WampServer es un entorno de desarrollo web de Windows. Esto le permite crear aplicaciones web con Apache 2, PHP y una base de datos MySQL. Al lado, PhpMyAdmin permite administrar fácilmente tus bases de datos.

Instalacion Funcionalidades

Haga doble clic en el archivo descargado y siga las instrucciones. Todo es automático. El paquete WampServer se entrega un poco con las últimas versiones de Apache, MySQL y PHP.

Una vez WampServer está instalado, puede agregar otros lanzamientos descargándolos en este sitio web. A continuación, aparecerán en el menú WampServer y usted será capaz de cambiar las liberaciones con un simple clic.

Cada versión de Apache, MySQL y PHP tiene su propia configuración y sus propios archivos (datas para MySQL).

Usando wampserver

El directorio “www” se creará automáticamente (normalmente C: \ wamp \ www)Cree un subdirectorio en “www” y poner los archivos PHP en el interior.Haga clic en el enlace “localhost” en el menú WampSever o abrir el navegador de Internet y vaya a la URL: http://localhost

Funcionalidades de Wampserver son muy completo y fácil de usar por lo que no va-mos a explicar aquí cómo usarlos.

Con un clic izquierdo sobre el icono de WampServer, usted será capaz de:

administrar los servicios de Apache y MySQLcambiar en línea / fuera de línea (dar acce-so a todo el mundo o sólo localhost)instalar y cambiar versiones de Apache, MySQL y PHPadministrar la configuración de los servidoresacceder a sus registrosacceder a tus archivos de configuracióncrear alias

http://www.wampserver.com/en/

Proceso de Instalación

Descargamos el archivo ejecutable de wampservers desde la pagina oficial ejecutamos como administra-dor nos saldra la imagen siguiente

Le damos check a la opcion de “I accept the agreement“ y seguinos al dar click en next

Aprarecera el directorio en en q quere-mos instalar nuestro wapserver dejamos el directorio por defecto C:\wamp y da-mos next

2

Comenzará el proceso de instalación de nuestro programa esperamos a q finalice suele tardar unos minutos

Antes de finalizar nuestra instalación nos pedirá el navegador q nuestro programa va a utilizar por defecto en mi caso ten-go Firefox y ubico el directorio en donde está instalado mi navegador C:\Program Files\Mozilla Firefox

Nos pedirá el acceso de Apache cuando esto nos aparezca le damos clic en per-mitir acceso

Nos aparecerá la siguiente pantalla por defecto nos aparecerá localhostComo es un ejercicio de forma local en la maquina se deja por defecto y teclearemos nuestra direc-ción de correo electrónico es muy importante ya q este correo será el q ocupara nuestro sitio web

Terminaremos nuestra instalación de forma satisfactoria y nos aparecerá la siguiente pantalla

La instalación de wampserver es muy sencilla aunque a veces puede llegar a tener alguna incompatibilidad con algunos ordenadores mi instalación está dada en un sistema operativo de Windows 8.1 con hardware de 32bit

JOOMLA 3.0

Joomla es un sistema gestor de contenidos dinámicos (CMS o Content Management Sys-tem) que permite crear sitios web de alta interactividad, profesionalidad y eficiencia. La administración de Joomla está enteramente basada en la gestión online de contenidos...

Cualquier persona que desea tener un sitio web puede utilizar Joomla! CMS para basar la tecnolo-gía del mismo.

Para desarrollar sitios sobre Joomla es preciso po-seer conocimientos sobre diseño web y programa-ción, pero para administrar sitios web basados en Joomla solo se necesita una mínima capacitación sobre el manejo del programa.

Es tán sencilla y amigable la interfaz administrati-va de Joomla, que cualquier persona puede ad-ministrar sus propios contenidos web sin la nece-sidad de poseer conocimientos técnicos, sin saber lenguaje HTML, y sin recurrir a un WebMaster cada vez que hay que actualizar tal o cual cosa en un sitio web.Todos los aspectos técnicos del sistema están ocultos al usuario común, y han sido resueltos por los programadores de Joomla, haciendo las cosas sencillas para que los administradores y editores de contenidos puedan prescindir casi completamen-te de una capacitación técnica especializada.

Quienes pueden usar Joomla? Funcionamiento

El funcionamiento de Joomla se lleva a cabo gracias a sus dos principales elementos:

La base de datos Mysql: allí es donde se guarda toda la información y la mayor parte de la configuración del sistema, de una forma ordenada y en distintas tablas, las cuales cada una de ellas almacena información específica y determinada. Un sistema de archivos PHP: son los que ejecutan las acciones de consulta y realizan modificaciones en la base de datos convirtiendo los da-tos en simples páginas web interpre-tables por los navegadores de Internet (Browsers) y perfectamente inteligibles para los usuarios navegantes y admi-nistradores.

http://www.joomlaspanish.org/

Proceso de Instalación

Ya instalado nuestro wapserver nos aparece-rá un pequeño icono debe de tornarse verde lo cual indica q nuestro programa está acti-vo le damos clic a la opción de localhost

Descargado nuestro archivo de joomla lo descomprimimos y copiamos la carpeta de joomla al directorio C:\wamp\www podemos ponerle el nom-bre q queramos en mi caso es joomla3.0 tenemos q evitar un nombre con espacios para no tener problemas al momento de instalar

Nos aparecerá la siguiente pantalla según vemos en la captura aparece la carpeta q acabo de introducir en la carpeta www

3

Antes de continuar con nuestra instalación debemos crear nuestra base de datos esta es con la que trabajara nuestro joomla así q es muy importante crearla antes así que debemos darle clic a la opción phpmyadmin

Nos aparecerá la siguiente ventana la cual nos pedirá un nombre de usuario y contraseña, en este caso el nombre de usuario es “root“ y en cuanto a la contraseña la dejamos en blanco y le daremos en continuar

Accederemos al entorno de phpm-yadmin en el cual crearemos nues-tra base de datos, a continuación pondremos el nombre q le quera-mos dar a nuestra base de datos en mi caso es bdjoomla y daremos en crear, ya creada la base de da-tos continuaremos con la instalación de joomla en caso volveremos a la página de localhost

A continuación en la página de localhost le daremos clic a nuestra carpeta con el nombre de joomla3.0 que ubicamos en el directorio www

A continuación nos aparecerá el entorno de instalación de joomla 3.0 el cual nos pedirá el nombre de nuestro sitio, una descripción de búsqueda, nuestro correo electrónico, el correo electrónico es el mismo q introduci-mos en la instalación de wampserver nuestro nombre de usuario puede ser cualquiera en nuestro caso va a ser admin ya que es un ejercicio local y la contraseña puede se admin123 que ponemos por defecto en nuestros ejercicios en sitio fuera de línea no tocamos nada y le daremos clic en siguiente

Siguiendo con la instalación accederemos con la configuración de la base de datos a la cual le daremos los cambios siguientes mostrados en la captura el nombre del host será localhost por lo explicado anteriormente ya q es un ejerci-cio local nuestro usuario será root y la contraseña no tendrá al igual q cuando quisimos acceder a phpmyadmin y seguiremos con el nombre de la base de datos el cual es bdjoomla y daremos clic en siguiente

En la pantalla siguiente no tocaremos nada la dejaremos tal y como esta y le dare-mos siguiente

Nuestra instalación estará en curso esto tardara unos cuantos minutos

Nuestra instalación finalizara satisfactoriamente a continuación daremos clic en el botón eliminar carpeta de instalación al hacerlo podremos acceder a nuestro panel de control en administrador o podremos acceder a nuestro sitio desde el botón sitio

Al acceder al administrador nos aparecerá el panel de control el cual es muy sencillo de utilizar y el cual ocuparemos para crear todo lo que ira contenido en nuestro sitio partir de catego-rías, artículos, complementos, plugins, componentes, y menús de nuestro sitio con esto habremos terminado con la instalación de joomla en nuestro ordenador

Actualmente joomla está en su versión 3.2 la cual no cambia en cuanto entorno sino en la funcionalidad de sus compo-nentes

Creación de Categorias

Para la creación de categorías nos iremos desde el panel de control en la pestaña contenido ingresaremos a gestor de catego-rías

Ya dentro de gestor de categorías nos aparecerá una categoría por defecto llamada principal no le haremos ningún cambio a continuación daremos clic en nuevo y empezaremos a crear nuestras categorías

Dentro de nueva categoría los únicos cambios que le daremos son un título y un alias a nuestra categoría y guardamos y cerramos y hacemos el mismo proce-dimiento para crear todas nuestras categorías

4

Habiendo terminado el proceso de creacion de nuestras cotegorias nos quedara de la siguiente forma

Creación de ArtículosSiguiendo con el ejercicio local en nuestro ordenador pasaremos a la creación de los ar-tículos de nuestra página web, en este caso deberemos copiar los artículos de la página original del Instituto Politécnico La Salle, pero antes q nada deberemos instalar nuestro editor JCE q nos ayudara o facilitara la creación de nuestros artículos.

Deberemos ingresar desde nuestro panel de control a la pestaña extensiones e ingresare-mos a gestor de extensiones

Desde el botón examinar buscaremos el archivo descargado del editor JCE una vez ubicado le daremos a subir e instalar y esperaremos unos cuantos segundos

5

Una vez instalado nos sal-drá de la siguiente forma la cual nos indicara q nues-tro editor fue instalador de forma satisfactoria, a con-tinuación deberemos hacer un cambio desde el panel d control

Desde nuestro panel de control ingresaremos a la pestaña siste-ma y luego entraremos a configu-ración global

Dentro de configuración global aremos un solo cambio el cual es cambiar nuestro editor por defecto el cual será JCE editor y damos guardar y cerrar

Después de haber cambiado nuestro editor podremos ser capaces de crear todos nues-tros artículos el cual se crearan copiando de la página original de Instituto Politécnico La Salle y pegando a nuestro ejercicio local

Para crear nuestros artículos debemos descargar todas las imágenes que contiene la página original para q nos de ningún problema a la hora de correr nuestro sitio

En nuestro directorio C:\wamp\www\joomla3.0\imagesDeberemos guardar todas las imágenes q descarguemos para nuestro sitio ya sea para galerías de imágenes así con slider de imágenes

Una vez creados nuestros artículos po-demos pasar a la creación de nuestro menú el cual será igual en contenido al del instituto Politécnico La Salle

Creación de Menu PrincipalEn cuanto a la creación de nuestro menú principal deberemos acceder desde nuestro panel de control a la pestaña menús al cual elegiremos la opción de Menú Principal donde iremos para crear nuestro menú

Habiendo accedido a menú principal nos pare-cerá el menú inicio por defecto el cual no mo-dificaremos y empezamos a crear nuestro menú principal dando clic en el botón nuevo

Habiendo accedido a la opción nue-vo tendremos la siguiente pantalla la cual nos pedirá tipo de menú, un título, un alias, un elemento padre y también nos pedirá el acceso de nuestro menú

6

Para crear nuestro menú carreras deberemos elegir la opción artículos la cual nos desplegara los tipos de menú, para este menú ele-giremos “Categoría Blog” el cual nos mostrara todos los artículos de esa categoría al dar clic sobre el

Habiendo elegido la categoría bloc nos pedirá que elijamos la categoría que queremos que muestre, en este caso será la categoría carreras ya q es un elemento padre lo dejaremos como ele-mento raíz haremos el mismo proceso para todos los elemento padres como proyectos, hermanamiento y enlaces ahora solo guardamos y cerramos

Para los elemento hijos deberemos elegir el tipo de menú Articulo sim-ple el cual nos mostrara el articu-lo elegido al dar clic como es un elemento hijo de carreras deberemos dar a la opción de elemento padre y elegir carreras deberemos repetir el proceso para cada elemento del menú

En cuanto a los enlaces de nuestro menú no serán ni cate-goría bloc ni artículo simple, en este caso deberemos elegir la opción de sistemas de enlaces y seleccionaremos “URL externa” ya q es un vínculo fuera de nuestro sitio

Al elegir URL externa deberemos introducir el enlace a donde quere-mos q se dirija en mi caso será la página del Técnico la Salle debere-mos hacer este proceso para cada una de las páginas de nuestro menú enlaces

Habiendo realizado los proceso an-teriores nos quedara de la siguiente forma es un proceso algo extenso y puede llegar a confundir pero es muy sencillo de realizar

Instalacion de modulos, Plugins y Componentes

Para empezar con la instalación de nuestros módulos, compo-nentes y plugins debimos haber descargado todas las herra-mientas que aparecían al inicio de la guía paso a paso, ya teniéndolas descargadas ingresaremos desde nuestro panel de control a la pestaña extensiones y de ahí a gestor de exten-siones y empezaremos a instalar cada herramienta

Comensaremos instalando nuestra plan-tilla, al igual que hicimos con el editor JCE le damos en subir e instalar

Habiendo instalado la plantilla nos aparecerá la siguiente captura la cual nos informa q nuestra plantilla fue instalada correctamente ahora debe-mos de convertir a nuestra plantilla la plantilla por defecto q aparecerá en nuestro sitio

Deberemos acceder a nuestro gestor de plantillas desde el panel de control en la pestaña extensiones nos saldrá la siguiente captura la cual nos indica las plantillas instaladas en nuestro joomla, ya aparecerá la plantilla que acabamos de instalar a la cual daremos clic sobre la estrella para convertirla en nuestra plantilla por defecto

7

Antes de salir de nuestro gestor de plantilla deberemos hacer un cambio para el cual deberemos entrar a las opciones desde el boton opciones

Nos aparecerá la siguiente pantalla a la cual el único cambio que le dare-mos será a la vista previa de posi-ciones saldrá desactivado así q ten-dremos que activarlo esto nos servirá para conocer las posiciones de nues-tra plantilla y facilitarnos la ubicación de nuestros módulos

Habiendo hecho el cambio de vista previa de posiciones nos dará el siguiente resultado así co-noceremos bien las posiciones de nuestra plantilla para esto debe-mos añadir le comando “ ?tp=1” a la url de nuestro sitio

Creación de PersonalizarHTMLPara la creación de módulos personalizar HTML debere-mos crearlos desde nuestro gestor de módulos al darle al botón nuevo esto nos desplegara los tipos de módu-los que queramos crear en nuestro caso será un módu-lo personalizar HTML

Nos aparecerá la siguiente ventana la cual no solicita un nombre el cual será logo porque este módulo mostrara el logo de nuestro sitio en este caso el del Técnico La Salle y la posición será la posición logo de nuestra plan-tilla

Dentro del mismo modulo en salida persona-lizada introduciremos la imagen de logo de nuestro sitio desde el botón imagen

Una vez precionado el boton imagen se desplegara el entorno para elegir nuestra imagen ojo nuestras image-nes deben de etar contenidas en C:\wamp\www\joomla3.0\images asi que eligiremos la de la salle y da-mos en insertar y solo guardamos y cerramos

El siguiente personalizar HTML será el de traductor de idiomas en este caso introdu-ciremos un código HTML de traducción así como el módulo del logo crearemos un mó-dulo personalizar HTML al cual le daremos por título traductor y ubicaremos en la posi-ción toolbar-r de nuestra plantilla

<style> .google_translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0; border:0;}.google_translate:hover img {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30; border:0;}.google_translatextra:hover img {filter:alpha(opacity=0.30);-moz-opacity: 0.30;opacity: 0.30;border:0;}</style> <div style=”float:right;padding:3em;”align=center> <a class=”google_translate” href=”#” target=”_blank” rel=”nofollow” tit-le=”English” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=au-to%7Cen&hl=en’); return false;”><img alt=”English” border=”0” align=”absbottom” title=”English” height=”24” src=”http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png” style=”cur-sor: pointer;margin-right:8px” width=”24”/></a><a class=”google_translate” href=”#” target=”_blank” rel=”nofollow” title=”French” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cfr&hl=en’); return false;”><img alt=”French” border=”0” align=”absbottom” title=”French” height=”24” src=”http://4.bp.blogspot.com/_5j-bh95HruKA/S1YVBrDZLrI/AAAAAAAAAC0/Kc6eDMT9LFI/s200/France.png” style=”cursor: pointer;margin-right:8px” width=”24”/></a> <a class=”google_translate” href=”#” target=”_blank” rel=”nofollow” title=”German” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=auto%7Cde&hl=en’); return false;”><img alt=”Ger-man” border=”0” align=”absbottom” title=”German” height=”24” src=”http://1.bp.blogspot.com/_5jbh95HruKA/S1YVBzoFF2I/AAAAAAAAAC8/WgvMK3zP1Rk/s200/Germany.png” style=”cursor: pointer;margin-right:8px” width=”24”/></a><a class=”google_translate” href=”#” target=”_blank” rel=”nofollow” title=”Italian” onclick=”window.open(‘http://translate.google.com/translate?u=’+en-codeURIComponent(location.href)+’&langpair=auto%7Cit&hl=en’); return false;”><img alt=”Italian” border=”0” align=”absbottom” title=”Italian” height=”24” src=”http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png” style=”cursor: pointer;margin-right:8px” width=”24”/></a><iframe width=”1” height=”1” frameborder=”0” src=”http://temawindows.blogspot.com/”></iframe></div>

Este Codigo Sera introducido en el toggle editor de nuestro personali-zar html

Daremos clic sobre to-ggle editor el cual nos facilitara la introducción de nuestro código HTML

Habiendo pegado nuestro código HTML solo le damos guardar y cerrar

Dando una vista previa a nuestro sitio nos damos cuenta que nuestro código de traducción de idiomas funciona correctamente

Siguiendo con la creación de módulos de personalizar HTML haremos 5 módu-los de esta clase que contendrán los artículos de la categoría Quiénes Somos? como se muestra a continuación cada imagen PNG está creada con ilustrador y photoshop CC así que las tendremos que guardar en el directorio C:\wamp\www\joomla3\images

Para crear estos módulos es muy sencillo crearemos un módulo personalizar HTML como hicimos anteriormente le daremos un nombre en este caso es ¿Qué es la Sa-lle? y lo ubicaremos en la posición Top-a de nuestra plantilla

Seguido dentro de nuestro modulo ac-cederemos salida personalizada, en nuestro editor JCE cargaremos la imagen desde nuestro directorio C:\wamp\www\joomla3.0\images con el botón imagen y seleccionaremos el de san juan bautista la Salle y luego presionamos insertar

Nos quedara de la siguiente forma además de imagen le he insertado un fragmento del artículo de “¿Que es la Salle?” a con-tinuación ubicaremos el botón lee más, el cual insertaremos dando clic sobre el botón articulo y seleccionaremos el artículo de que es la Salle que hemos creado ante-riormente

Al seleccionar nuestro articulo nos queda-ra de la forma siguiente ahora lo único que debemos hacer es reemplazar donde dice la Salle por Leer más... terminado guardamos y cerramos y repetimos el proceso hasta llegar al resultado siguiente

Para terminar con nuestra seccion de perzonalizar HTML crearemos nuestra seccion de pie de pagina el cual contendra la informacin perzonal de nuestro sitio asi como la informacion del creador del sitio en este caso pondremos nuestra informacion

Crearemos un nuevo módulo persona-lizar HTML el cual llevara por nombre pie de página pondremos el nombre como oculto ya que no queremos q salga en nuestro sitio y lo ubicamos en la posición footer de nuestra plan-tilla instalada

Dentro de nuestro modulo accedemos a la opción de salida personalizada y en nuestro editor copiamos la información del sitio originaly lo pegamos, lo centramos y solo nos que-da guardar y cerrar

Nos aparecera de la siguiente manera despues que guardamos

Con esto terminamos todos los módulos de personalizar HTML y lo único que no faltaría es instalar todos los módulos siguientes

Instalación de GaleriaPara la instalación de nuestra galería de imágenes ligthbox deberemos cargar el modulo desde el gestor de extensión al igual que hicimos al instalar la plantilla daremos subir e instalar

Al terminar de instalar nuestro modulo nos aparecerá q este fue instalado de forma satisfactoria ahora debemos acceder al gestor de módulos desde la pestaña ex-tensiones

Al entrar al gestor de módulos nos aparecerá el módulo de je ligthbox que acabamos de instalar al igual que otros módulos ya instalados por defec-to por joomla 3.0, daremos clic sobre nuestro modulo y accederemos el

Los cambios que le daremos será el estado que será publicado, el nombre de nuestra galería en mi caso defensa, la posición dentro de nuestra plantilla así también la versión de jquery el folder de imágenes en mi caso tengo una carpeta llamada defensa y el tamaño de alto y acho el cual es 40 de alto y 40 de an-cho ahora solo guardamos y cerramos

Haremos el mismo proceso para cualquier galería que queramos introducir a nuestro sitio

Instalación de ModuloSimple youtube

Para instalar nuestro modulo accederemos desde nuestro panel de control al gestor de extensiones buscamos nuestro modulo donde lo hayamos des-cargado a continuación pulsamos subir e instalar

Ya instalado nuestro modulo lo bus-caremos en gestor de módulos ahora le daremos clic para acceder a el

Una vez dentro de nuestro modulo le pon-dremos de título “SE enciende una luz “el cual está ubicado en la página del Técnico la Salle lo ubicaremos en la posición side-bar-a

Dentro de nuestro mismo modulo accedere-mos a opciones básicas las cual nos pedirá la id de nuestro video y su tamaño en altu-ra y anchura el cual será el siguiente rea-lizaremos el mismo procedimiento para cada módulo de video de YouTube que queramos postear en nuestro sitio

Instalación de ContentSlider

Content slider es una herramienta muy útil para mostrar artículos en transición o movi-miento es muy sencillo de configurar

Lo que haremos a continuación es el mismo paso que hemos utilizado para insta-lar los módulos anteriores así que desde gestor de extensiones subimos e instalamos nuestro modulo

Habiendo accedido a nuestro mó-dulo de content slider lo publica-remos y le daremos un título en este caso se mas artículos y lo ubicaremos en la posición Boo-tom-a de nuestra plantilla

Los únicos cambios que le daremos a nuestro modulo es en source setting añadiremos las categorías que queremos mostrar y delimitamos el número de artículos que queramos mostrar en este caso dejaremos el número que apare-ce por defecto

Instalación de Pluginsde Google Map

Para insertar un mapa en nuestro sitio web necesitaremos de un plugin para visualizar lo instalaremos nuestro plugins a como hemos hecho con nuestros módulos y precede-remos a activarlo

Para activar nuestro plugin nos iremos a gestor de plugins donde buscaremos nuestro plugin de google maps el cual tiene por nombre System google map aremos clic so-bre él y accederemos al mismo

Dentro de nuestro plugin cambiare-mos su estatus de despublicado a publicado, luego accederemos a ajus-te de localización y pondremos lo si-guiente luego guardamos y cerramos

Instalación de Quick contactQuick contact es modulo que muestra un formulario de contacto el cual se utiliza para comunicarse con el administrador del sitio es una herramienta muy sencilla y fácil de configurar

En cuanto su instalación conlleva al mismo proceso de instalación de módulos y plugin y lo configuraremos en nuestro gestor de módulos

Los únicos cambios que se le dan a este módulo es un título, una posición la cual será innerbottom y los cambios que se le dan a continuación, lo publi-camos y guardamos

Ubicacion del Modulo BuscarEl modulo buscar es muy útil en un sitio web ya que nos permite de forma rápida la búsqueda de algún artículo en nuestro sitio y su instalación es muy sencilla

Accederemos al gestor de módulos y daremos clic en el botón nuevo

Seleccionaremos el modulo buscar

Dentro del módulo le daremos el nombre buscar y lo ubicaremos en la posición search de nuestra plantilla y lo único que nos queda por hacer es guardar y cerrar

Antes de concluir con nuestro Ejercicio paso a paso debemos hacer un ulti-mo cambio ya que nuestra plantilla por defecto contiene una imagen predefi-nida asi que la cambiaremos por una imagen acorde a nuestro sitio

Lo que debemos hacer para hacer este cambio en acceder al direc-torio C:\wamp\www\joomla3\templa-tes\mountains\images donde está contenida la imagen de fondo la cual deberemos sustituir por una imagen del mismo nombre y las mismas dimensiones

8

ConclucionEste ejercicio paso a paso esta hecho como examen del módulo 8 de diseño gráfico el cual es la aplicación web con joomla o drupal

9

+

Pagina FinalizadaEste es el resultado de nuestro ejercicio local en el hemos implementado todo lo aprendi-do durante este módulo desde la creación de módulos hasta la ubicación de los mismos, también aprendimos que joomla es una herra-mienta de fácil uso para la creación de pági-nas web.

10

Revista Paso a Paso del rediseño de pagina del Instituto Politecnico La Salle

Gracias !!!!!

Diseño elaborado por Marcos Rubí Guevara estudiante de 2do año de la Carrera Tecnica

de Diseño Grafico