Joomla 3.

X
R3ADY!
Ejercicio Guiado
Paso a Paso

Rediseo Pagina del

instituto Politecnico La Salle

Contenido
Herramientas y programas a utilizar....................................1
Instalacin de Wampserver 5.4...............................................2
Instalacin de joomla 3.0......................................................... 3
Creacin de Categoras.............................................................4
Creacin de artculos................................................................ 5
Creacin del Men...................................................................... 6
Instalacin de Mdulos, Plugins y Componentes.................7
Instalacin de Plantilla Mountains.................................... 7.1
Instalacin de mdulos Personalizar HTML...................7.2
Instalacin galera de imgenes ligthbox.......................7.3
Instalacin de videos remotos de YouTube...................7.4
Instalacin de content slider.............................................7.5
Instalacin de Mapa de Goolge Map.................................7.6
Instalacin de Quikcontact.................................................7.7
Ubicacin de modulo Buscar en nuestro sitio.................... 8
Conclusin.................................................................................... 9
Ejercicio Finalizado de Forma Remota..................................10

HERRAMIENTAS
http://extensions.joomla.org/extensions/
maps-a-weather/maps-a-locations/
street-maps/1147

plugin googlemap

http://www.joomla24.com/Joomla_3x_Templates/Joomla_3x_Templates/Mountains_Theme.
html

Mountains

http://jextensions.com/jquery-lightbox-joomla/

Modulo je lightbox

Modulo bt contentslider
jevents_3.1.21
Simple Youtube
com_jce
CK Slideshow

http://extensions.joomla.org/extensions/
news-display/articles-display/articles-showcase/19125
http://extensions.joomla.org/extensions/calendars-a-events/events/events-calendars/95
http://www.joomshaper.com/
joomla-extensions/simple-youtube

https://www.joomlacontenteditor.net/

http://extensions.joomla.org/extensions/photos-a-images/slideshow/
image-jquery-slideshow/20362

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 fcilmente tus
bases de datos.
http://www.wampserver.com/en/

Instalacion
Haga doble clic en el archivo descargado y
siga las instrucciones. Todo es automtico. 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 descargndolos en
este sitio web. A continuacin, aparecern en
el men WampServer y usted ser capaz de
cambiar las liberaciones con un simple clic.
Cada versin de Apache, MySQL y PHP tiene
su propia configuracin y sus propios archivos
(datas para MySQL).
Usando wampserver
El directorio www se crear automticamente
(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
Funcionalidades de Wampserver son muy
completo y fcil de usar por lo que no vamos a explicar aqu cmo usarlos.
Con un clic izquierdo sobre el icono de
WampServer, usted ser capaz de:
administrar los servicios de Apache y MySQL
cambiar en lnea / fuera de lnea (dar acceso a todo el mundo o slo localhost)
instalar y cambiar versiones de Apache,
MySQL y PHP
administrar la configuracin de los servidores
acceder a sus registros
acceder a tus archivos de configuracin
crear alias

Proceso de Instalacin
Descargamos el archivo ejecutable
de wampservers desde la pagina
oficial ejecutamos como administrador 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 queremos instalar nuestro wapserver dejamos

el directorio por defecto C:\wamp y damos next

Comenzar el proceso de instalacin de

nuestro programa esperamos a q finalice
suele tardar unos minutos

Antes de finalizar nuestra instalacin nos

pedir el navegador q nuestro programa
va a utilizar por defecto en mi caso tengo 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 permitir acceso

Nos aparecer la siguiente pantalla

por defecto nos aparecer localhost
Como es un ejercicio de forma
local en la maquina se deja por
defecto y teclearemos nuestra direccin de correo electrnico es muy
importante ya q este correo ser el
q ocupara nuestro sitio web

Terminaremos nuestra instalacin de

forma satisfactoria y nos aparecer
la siguiente pantalla

La instalacin de wampserver es muy sencilla aunque

a veces puede llegar a tener alguna incompatibilidad
con algunos ordenadores mi instalacin est dada en
un sistema operativo de Windows 8.1 con hardware
de 32bit

JOOMLA 3.0
Joomla es un sistema gestor de contenidos
dinmicos (CMS o Content Management System) que permite crear sitios web de alta
interactividad, profesionalidad y eficiencia. La
administracin de Joomla est enteramente
basada en la gestin online de contenidos...
http://www.joomlaspanish.org/

Quienes pueden usar Joomla?

Funcionamiento

Cualquier persona que desea tener un sitio web

puede utilizar Joomla! CMS para basar la tecnologa del mismo.

El funcionamiento de Joomla se lleva

a cabo gracias a sus dos principales
elementos:

Para desarrollar sitios sobre Joomla es preciso poseer conocimientos sobre diseo web y programacin, pero para administrar sitios web basados en
Joomla solo se necesita una mnima capacitacin
sobre el manejo del programa.

La base de datos Mysql: all es

donde se guarda toda la informacin
y la mayor parte de la configuracin
del sistema, de una forma ordenada
y en distintas tablas, las cuales cada
una de ellas almacena informacin
especfica 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 datos en simples pginas web interpretables por los navegadores de Internet
(Browsers) y perfectamente inteligibles
para los usuarios navegantes y administradores.

Es tn sencilla y amigable la interfaz administrativa de Joomla, que cualquier persona puede administrar sus propios contenidos web sin la necesidad de poseer conocimientos tcnicos, 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 tcnicos del sistema estn
ocultos al usuario comn, y han sido resueltos por
los programadores de Joomla, haciendo las cosas
sencillas para que los administradores y editores
de contenidos puedan prescindir casi completamente de una capacitacin tcnica especializada.

Proceso de Instalacin

Descargado nuestro archivo de joomla lo descomprimimos y copiamos la

carpeta de joomla al directorio C:\wamp\www podemos ponerle el nombre q queramos en mi caso es joomla3.0 tenemos q evitar un nombre
con espacios para no tener problemas al momento de instalar

Ya instalado nuestro wapserver nos aparecer un pequeo icono debe de tornarse verde
lo cual indica q nuestro programa est activo le damos clic a la opcin de localhost

Nos aparecer la siguiente pantalla

segn vemos en la captura aparece
la carpeta q acabo de introducir en la
carpeta www

Antes de continuar con nuestra instalacin 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 opcin phpmyadmin

Nos aparecer la siguiente ventana la

cual nos pedir un nombre de usuario
y contrasea, en este caso el nombre
de usuario es root y en cuanto a la
contrasea la dejamos en blanco y le
daremos en continuar

Accederemos al entorno de phpmyadmin en el cual crearemos nuestra base de datos, a continuacin

pondremos el nombre q le queramos dar a nuestra base de datos
en mi caso es bdjoomla y daremos
en crear, ya creada la base de datos continuaremos con la instalacin
de joomla en caso volveremos a la
pgina de localhost

A continuacin en la pgina de localhost le daremos clic a

nuestra carpeta con el nombre de joomla3.0 que ubicamos en
el directorio www

A continuacin nos aparecer el entorno de instalacin de joomla 3.0 el

cual nos pedir el nombre de nuestro sitio, una descripcin de bsqueda,
nuestro correo electrnico, el correo electrnico es el mismo q introducimos en la instalacin de wampserver nuestro nombre de usuario puede
ser cualquiera en nuestro caso va a ser admin ya que es un ejercicio
local y la contrasea puede se admin123 que ponemos por defecto en
nuestros ejercicios en sitio fuera de lnea no tocamos nada y le daremos
clic en siguiente

Siguiendo con la instalacin accederemos con la configuracin

datos a la cual le daremos los cambios siguientes mostrados
nombre del host ser localhost por lo explicado anteriormente
cio local nuestro usuario ser root y la contrasea no tendr
quisimos acceder a phpmyadmin y seguiremos con el nombre
datos el cual es bdjoomla y daremos clic en siguiente

de la base de
en la captura el
ya q es un ejercial igual q cuando
de la base de

En la pantalla siguiente no
tocaremos nada la dejaremos
tal y como esta y le daremos siguiente

Nuestra instalacin
estar en curso esto
tardara unos cuantos
minutos

Nuestra instalacin finalizara satisfactoriamente a continuacin daremos clic

en el botn eliminar carpeta de instalacin al hacerlo podremos acceder a
nuestro panel de control en administrador o podremos acceder a nuestro
sitio desde el botn 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 categoras, artculos, complementos, plugins, componentes, y mens de
nuestro sitio con esto habremos terminado con la instalacin de
joomla en nuestro ordenador

Actualmente joomla est en su

versin 3.2 la cual no cambia
en cuanto entorno sino en la
funcionalidad de sus componentes

Creacin de Categorias
Para la creacin de categoras nos iremos
desde el panel de control en la pestaa
contenido ingresaremos a gestor de categoras

Ya dentro de gestor de categoras nos

aparecer una categora por defecto
llamada principal no le haremos ningn
cambio a continuacin daremos clic en
nuevo y empezaremos a crear nuestras
categoras

Dentro de nueva categora

los nicos cambios que le
daremos son un ttulo y un
alias a nuestra categora y
guardamos y cerramos y
hacemos el mismo procedimiento para crear todas
nuestras categoras

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

Creacin de Artculos
Siguiendo con el ejercicio local en nuestro ordenador pasaremos a la creacin de los artculos de nuestra pgina web, en este caso deberemos copiar los artculos de la pgina
original del Instituto Politcnico La Salle, pero antes q nada deberemos instalar nuestro
editor JCE q nos ayudara o facilitara la creacin de nuestros artculos.
Deberemos ingresar desde nuestro panel de control a la pestaa extensiones e ingresaremos a gestor de extensiones

Desde el botn examinar buscaremos el archivo

descargado del editor JCE una vez ubicado le
daremos a subir e instalar y esperaremos unos
cuantos segundos

Una vez instalado nos saldr de la siguiente forma la

cual nos indicara q nuestro editor fue instalador de
forma satisfactoria, a continuacin deberemos hacer
un cambio desde el panel d
control

Desde nuestro panel de control

ingresaremos a la pestaa sistema y luego entraremos a configuracin global

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

Despus de haber cambiado nuestro editor podremos ser capaces de crear todos nuestros artculos el cual se crearan copiando de la pgina original de Instituto Politcnico
La Salle y pegando a nuestro ejercicio local

Para crear nuestros artculos debemos descargar todas las imgenes que contiene la
pgina original para q nos de ningn problema a la hora de correr nuestro sitio

En nuestro directorio
C:\wamp\www\joomla3.0\images
Deberemos guardar todas las
imgenes q descarguemos
para nuestro sitio ya sea para
galeras de imgenes as con
slider de imgenes

Una vez creados nuestros artculos podemos pasar a la creacin de nuestro

men el cual ser igual en contenido
al del instituto Politcnico La Salle

Creacin de Menu Principal

En cuanto a la creacin de nuestro men principal deberemos acceder desde
nuestro panel de control a la pestaa mens al cual elegiremos la opcin de
Men Principal donde iremos para crear nuestro men

Habiendo accedido a men principal nos parecer el men inicio por defecto el cual no modificaremos y empezamos a crear nuestro men
principal dando clic en el botn nuevo

Habiendo accedido a la opcin nuevo tendremos la siguiente pantalla la

cual nos pedir tipo de men, un
ttulo, un alias, un elemento padre
y tambin nos pedir el acceso de
nuestro men

Para crear nuestro men

carreras deberemos elegir
la opcin artculos la cual
nos desplegara los tipos de
men, para este men elegiremos Categora Blog el
cual nos mostrara todos los
artculos de esa categora al
dar clic sobre el

Habiendo elegido la categora bloc nos

pedir que elijamos la categora que
queremos que muestre, en este caso
ser la categora carreras ya q es un
elemento padre lo dejaremos como elemento raz 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 simple el cual nos mostrara el articulo elegido al dar clic como es un
elemento hijo de carreras deberemos
dar a la opcin de elemento padre
y elegir carreras deberemos repetir
el proceso para cada elemento del
men

En cuanto a los enlaces de

nuestro men no sern ni categora bloc ni artculo simple, en
este caso deberemos elegir la
opcin de sistemas de enlaces y
seleccionaremos URL externa ya
q es un vnculo fuera de nuestro
sitio

Al elegir URL externa deberemos

introducir el enlace a donde queremos q se dirija en mi caso ser la
pgina del Tcnico la Salle deberemos hacer este proceso para cada
una de las pginas de nuestro men
enlaces

Habiendo realizado los proceso anteriores 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 instalacin de nuestros mdulos, componentes y plugins debimos haber descargado todas las herramientas que aparecan al inicio de la gua paso a paso, ya
tenindolas descargadas ingresaremos desde nuestro panel de
control a la pestaa extensiones y de ah a gestor de extensiones y empezaremos a instalar cada herramienta

Comensaremos instalando nuestra plantilla, 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 debemos 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 pestaa 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

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 daremos ser a la vista previa de posiciones saldr desactivado as q tendremos que activarlo esto nos servir
para conocer las posiciones de nuestra plantilla y facilitarnos la ubicacin
de nuestros mdulos

Habiendo hecho el cambio de

vista previa de posiciones nos
dar el siguiente resultado as conoceremos bien las posiciones de
nuestra plantilla para esto debemos aadir le comando ?tp=1
a la url de nuestro sitio

Creacin de Personalizar
HTML
Para la creacin de mdulos personalizar HTML deberemos crearlos desde nuestro gestor de mdulos al darle
al botn nuevo esto nos desplegara los tipos de mdulos que queramos crear en nuestro caso ser un mdulo personalizar HTML

Nos aparecer la siguiente ventana

la cual no solicita un nombre el cual
ser logo porque este mdulo mostrara
el logo de nuestro sitio en este caso
el del Tcnico La Salle y la posicin
ser la posicin logo de nuestra plantilla
Dentro del mismo modulo en salida personalizada introduciremos la imagen de logo de
nuestro sitio desde el botn imagen

Una vez precionado el boton imagen

se desplegara el entorno para elegir
nuestra imagen ojo nuestras imagenes deben de etar contenidas en
C:\wamp\www\joomla3.0\images asi
que eligiremos la de la salle y damos en insertar y solo guardamos y
cerramos

El siguiente personalizar HTML ser el de

traductor de idiomas en este caso introduciremos un cdigo HTML de traduccin as
como el mdulo del logo crearemos un mdulo personalizar HTML al cual le daremos
por ttulo traductor y ubicaremos en la posicin toolbar-r de nuestra plantilla

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
Este Codigo Sera introducido en el
.google_translate:hover img {
toggle editor de nuestro personalifilter:alpha(opacity=30);
zar html
-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 title=English onclick=window.open(http://translate.google.com/translate?u=+encodeURIComponent(location.href)+&langpair=auto%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=cursor: 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/_5jbh95HruKA/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=German 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=+encodeURIComponent(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>

Daremos clic sobre toggle editor el cual nos

facilitara la introduccin
de nuestro cdigo HTML

Habiendo pegado nuestro cdigo

HTML solo le damos guardar y cerrar

Dando una vista previa a nuestro sitio nos damos cuenta que nuestro cdigo de
traduccin de idiomas funciona correctamente
Siguiendo con la creacin de mdulos de personalizar HTML haremos 5 mdulos de esta clase que contendrn los artculos de la categora Quines Somos?
como se muestra a continuacin 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 mdulos es muy sencillo

crearemos un mdulo personalizar HTML
como hicimos anteriormente le daremos un
nombre en este caso es Qu es la Salle? y lo ubicaremos en la posicin Top-a
de nuestra plantilla

Seguido dentro de nuestro modulo accederemos salida personalizada, en

nuestro editor JCE cargaremos la imagen
desde nuestro directorio C:\wamp\www\
joomla3.0\images con el botn imagen y
seleccionaremos el de san juan bautista
la Salle y luego presionamos insertar

Nos quedara de la siguiente forma adems

de imagen le he insertado un fragmento
del artculo de Que es la Salle? a continuacin ubicaremos el botn lee ms, el
cual insertaremos dando clic sobre el botn
articulo y seleccionaremos el artculo de
que es la Salle que hemos creado anteriormente

Al seleccionar nuestro articulo nos quedara de la forma siguiente ahora lo nico que
debemos hacer es reemplazar donde dice la
Salle por Leer ms... 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 mdulo personalizar HTML el cual llevara por nombre
pie de pgina pondremos el nombre
como oculto ya que no queremos q
salga en nuestro sitio y lo ubicamos
en la posicin footer de nuestra plantilla instalada

Dentro de nuestro modulo accedemos a la

opcin de salida personalizada y en nuestro
editor copiamos la informacin del sitio original
y lo pegamos, lo centramos y solo nos queda guardar y cerrar

Nos aparecera de la siguiente manera despues que guardamos

Con esto terminamos todos los mdulos de personalizar HTML y

lo nico que no faltara es instalar todos los mdulos siguientes

Instalacin de Galeria
Para la instalacin de nuestra galera de imgenes ligthbox deberemos cargar el modulo
desde el gestor de extensin 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 mdulos desde la pestaa extensiones
Al entrar al gestor de mdulos nos
aparecer el mdulo de je ligthbox
que acabamos de instalar al igual que
otros mdulos ya instalados por defecto 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 galera en mi caso defensa, la
posicin dentro de nuestra plantilla as
tambin la versin de jquery el folder de
imgenes en mi caso tengo una carpeta
llamada defensa y el tamao de alto y
acho el cual es 40 de alto y 40 de ancho ahora solo guardamos y cerramos

Haremos el mismo proceso para cualquier

galera que queramos introducir a nuestro
sitio

Instalacin de Modulo
Simple youtube
Para instalar nuestro modulo accederemos desde
nuestro panel de control al gestor de extensiones
buscamos nuestro modulo donde lo hayamos descargado a continuacin pulsamos subir e instalar

Ya instalado nuestro modulo lo buscaremos en gestor de mdulos ahora

le daremos clic para acceder a el

Una vez dentro de nuestro modulo le pondremos de ttulo SE enciende una luz el
cual est ubicado en la pgina del Tcnico
la Salle lo ubicaremos en la posicin sidebar-a

Dentro de nuestro mismo modulo accederemos a opciones bsicas las cual nos pedir
la id de nuestro video y su tamao en altura y anchura el cual ser el siguiente realizaremos el mismo procedimiento para cada
mdulo de video de YouTube que queramos
postear en nuestro sitio

Instalacin de Content
Slider
Content slider es una herramienta muy til para mostrar artculos en transicin o movimiento es muy sencillo de configurar
Lo que haremos a continuacin es el mismo paso que hemos utilizado para instalar los mdulos anteriores as que desde gestor de extensiones subimos e instalamos
nuestro modulo

Habiendo accedido a nuestro mdulo de content slider lo publicaremos y le daremos un ttulo en

este caso se mas artculos y lo
ubicaremos en la posicin Bootom-a de nuestra plantilla

Los nicos cambios que le daremos a nuestro

modulo es en source setting aadiremos las
categoras que queremos mostrar y delimitamos
el nmero de artculos que queramos mostrar
en este caso dejaremos el nmero que aparece por defecto

Instalacin de Plugins
de 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 mdulos y precederemos 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 sobre l y accederemos al mismo

Dentro de nuestro plugin cambiaremos su estatus de despublicado a

publicado, luego accederemos a ajuste de localizacin y pondremos lo siguiente luego guardamos y cerramos

Instalacin de Quick contact

Quick 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
fcil de configurar
En cuanto su instalacin conlleva al mismo proceso de instalacin de mdulos y
plugin y lo configuraremos en nuestro gestor de mdulos
Los nicos cambios que se le dan a
este mdulo es un ttulo, una posicin
la cual ser innerbottom y los cambios
que se le dan a continuacin, lo publicamos y guardamos

Ubicacion del Modulo Buscar

El modulo buscar es muy til en un sitio web ya que nos permite de forma rpida la
bsqueda de algn artculo en nuestro sitio y su instalacin es muy sencilla
Accederemos al gestor de mdulos y daremos clic en el botn nuevo
Seleccionaremos el modulo
buscar

Dentro del mdulo le daremos el nombre

buscar y lo ubicaremos en la posicin
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 ultimo cambio ya que nuestra plantilla por defecto contiene una imagen predefinida asi que la cambiaremos por una imagen acorde a nuestro sitio
Lo que debemos hacer para hacer
este cambio en acceder al directorio C:\wamp\www\joomla3\templates\mountains\images donde est
contenida la imagen de fondo la
cual deberemos sustituir por una
imagen del mismo nombre y las
mismas dimensiones

Conclucion
Este ejercicio paso a paso esta hecho como examen del mdulo 8 de diseo grfico
el cual es la aplicacin web con joomla o drupal

+
9

Pagina Finalizada
Este es el resultado de nuestro ejercicio local
en el hemos implementado todo lo aprendido durante este mdulo desde la creacin de
mdulos hasta la ubicacin de los mismos,
tambin aprendimos que joomla es una herramienta de fcil uso para la creacin de pginas web.

10

Revista Paso a Paso del rediseo de pagina del Instituto

Politecnico La Salle
Diseo elaborado por Marcos Rub Guevara
estudiante de 2do ao de la Carrera Tecnica
de Diseo Grafico

Gracias !!!!!