7/21/2019 Joomla 3.0 R3ADY!!!
1/38
Joomla 3.X
R3ADY!
Ejercicio Guiado
Paso a Paso
Rediseo Pagina del
instituto Politecnico La Salle
7/21/2019 Joomla 3.0 R3ADY!!!
2/38
ContenidoHerramientas y programas a utilizar ................................... 1Instalacin de Wampserver 5.4 ..............................................2
Instalacin de joomla 3.0 ........................................................ 3
Creacin de Categoras ............................................................4
Creacin de artculos ............................................................... 5
Creacin del Men ..................................................................... 6Instalacin 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
7/21/2019 Joomla 3.0 R3ADY!!!
3/38
HERRAMIENTAS
Mountains
http://www.joomla24.com/Joomla_3x_Templa-
tes/Joomla_3x_Templates/Mountains_Theme.
html
Modulo je lightbox
http://jextensions.com/jquery-light-
box-joomla/
Modulo bt contentslider
http://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 Slideshow
http://extensions.joomla.org/exten-
sions/photos-a-images/slideshow/image-jquery-slideshow/20362
1
7/21/2019 Joomla 3.0 R3ADY!!!
4/38
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.
Instalacion Funcionalidades
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 de Wampserver son muy
completo y fcil de usar por lo que no va-
mos a explicar aqu cmo usarlos.
Con un clic izquierdo sobre el icono de
WampServer, usted ser capaz de:
administrar los servicios de Apache y MySQ
cambiar en lnea / fuera de lnea (dar acce
so a todo el mundo o slo localhost)
instalar y cambiar versiones de Apache,
MySQL y PHP
administrar la configuracin de los servidore
acceder a sus registros
acceder a tus archivos de configuracin
crear alias
http://www.wampserver.com/en/
7/21/2019 Joomla 3.0 R3ADY!!!
5/38
Proceso de Instalacin
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 dejamosel directorio por defecto C:\wamp y da-
mos next
2
7/21/2019 Joomla 3.0 R3ADY!!!
6/38
Comenzar el proceso de instalacin de
nuestro programa esperamos a q finalicesuele tardar unos minutos
Antes de finalizar nuestra instalacin 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
7/21/2019 Joomla 3.0 R3ADY!!!
7/38
Nos aparecer la siguiente pantalla
por defecto nos aparecer localhos
Como es un ejercicio de forma
local en la maquina se deja por
defecto y teclearemos nuestra direcin de correo electrnico es muy
importante ya q este correo ser
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
7/21/2019 Joomla 3.0 R3ADY!!!
8/38
JOOMLA 3.0
Joomla es un sistema gestor de contenidos
dinmicos (CMS o Content Management Sys-
tem) que permite crear sitios web de alta
interactividad, profesionalidad y eficiencia. La
administracin de Joomla est enteramente
basada en la gestin online de contenidos...
Cualquier persona que desea tener un sitio web
puede utilizar Joomla! CMS para basar la tecnolo-
ga del mismo.
Para desarrollar sitios sobre Joomla es preciso po-
seer conocimientos sobre diseo web y programa-
cin, pero para administrar sitios web basados en
Joomla solo se necesita una mnima capacitacin
sobre el manejo del programa.
Es tn 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 tcnicos, sin saberlenguaje 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 completamen-
te de una capacitacin tcnica 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 e
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 d
consulta y realizan modificaciones enla base de datos convirtiendo los da
tos en simples pginas web interpre-
tables por los navegadores de Intern
(Browsers) y perfectamente inteligibles
para los usuarios navegantes y adm
nistradores.
http://www.joomlaspanish.org/
7/21/2019 Joomla 3.0 R3ADY!!!
9/38
Proceso de Instalacin
Ya instalado nuestro wapserver nos aparece-
r un pequeo icono debe de tornarse verde
lo cual indica q nuestro programa est acti-
vo le damos clic a la opcin 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
segn vemos en la captura aparece
la carpeta q acabo de introducir en la
carpeta www
3
7/21/2019 Joomla 3.0 R3ADY!!!
10/38
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 phpm-
yadmin en el cual crearemos nues-
tra base de datos, a continuacin
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 instalacin
de joomla en caso volveremos a la
pgina de localhost
7/21/2019 Joomla 3.0 R3ADY!!!
11/38
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 introduci-
mos 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
7/21/2019 Joomla 3.0 R3ADY!!!
12/38
Siguiendo con la instalacin accederemos con la configuracin 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 contrasea 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
7/21/2019 Joomla 3.0 R3ADY!!!
13/38
Nuestra instalacin
estar en curso esto
tardara unos cuantos
minutos
Nuestra instalacin finalizara satisfactoriamente a continuacin daremos clicen 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
7/21/2019 Joomla 3.0 R3ADY!!!
14/38
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-
ras, 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 compo-
nentes
7/21/2019 Joomla 3.0 R3ADY!!!
15/38
Creacin de Categorias
Para la creacin de categoras nos iremos
desde el panel de control en la pestaa
contenido ingresaremos a gestor de catego-
ras
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 proce-
dimiento para crear todas
nuestras categoras
4
7/21/2019 Joomla 3.0 R3ADY!!!
16/38
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 ar-
tculos 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 ingresare-
mos a gestor de extensiones
Desde el botn examinar buscaremos el archivodescargado del editor JCE una vez ubicado le
daremos a subir e instalar y esperaremos unos
cuantos segundos
5
7/21/2019 Joomla 3.0 R3ADY!!!
17/38
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-
tinuacin deberemos hacer
un cambio desde el panel d
control
Desde nuestro panel de control
ingresaremos a la pestaa siste-
ma y luego entraremos a configu-
racin global
Dentro de configuracin
global aremos un solo
cambio el cual es cambiar
nuestro editor por defectoel cual ser JCE editor y
damos guardar y cerrar
7/21/2019 Joomla 3.0 R3ADY!!!
18/38
Despus de haber cambiado nuestro editor podremos ser capaces de crear todos nues-
tros artculos el cual se crearan copiando de la pgina original de Instituto Politcnico
La Salle y pegando a nuestro ejercicio local
7/21/2019 Joomla 3.0 R3ADY!!!
19/38
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 po-
demos pasar a la creacin de nuestromen el cual ser igual en contenido
al del instituto Politcnico La Salle
7/21/2019 Joomla 3.0 R3ADY!!!
20/38
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 pare-
cer el men inicio por defecto el cual no mo-
dificaremos y empezamos a crear nuestro men
principal dando clic en el botn nuevo
Habiendo accedido a la opcin nue-
vo tendremos la siguiente pantalla la
cual nos pedir tipo de men, un
ttulo, un alias, un elemento padrey tambin nos pedir el acceso de
nuestro men
6
7/21/2019 Joomla 3.0 R3ADY!!!
21/38
Para crear nuestro men
carreras deberemos elegir
la opcin artculos la cual
nos desplegara los tipos demen, para este men ele-
giremos 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 ele-
mento 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 sim-
ple el cual nos mostrara el articu-lo 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
7/21/2019 Joomla 3.0 R3ADY!!!
22/38
En cuanto a los enlaces de
nuestro men no sern ni cate-
gora bloc ni artculo simple, en
este caso deberemos elegir la
opcin de sistemas de enlaces yseleccionaremos URL externa ya
q es un vnculo fuera de nuestro
sitio
Al elegir URL externa deberemos
introducir el enlace a donde quere-
mos q se dirija en mi caso ser la
pgina del Tcnico la Salle debere-
mos hacer este proceso para cada
una de las pginas 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
7/21/2019 Joomla 3.0 R3ADY!!!
23/38
Instalacion de modulos,
Plugins y Componentes
Para empezar con la instalacin de nuestros mdulos, compo-
nentes y plugins debimos haber descargado todas las herra-
mientas 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 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 fueinstalada 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 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
7
7/21/2019 Joomla 3.0 R3ADY!!!
24/38
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 ubicacin
de nuestros mdulos
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 aadir le comando ?tp=1
a la url de nuestro sitio
7/21/2019 Joomla 3.0 R3ADY!!!
25/38
Creacin de Personalizar
HTMLPara la creacin de mdulos personalizar HTML deber
mos crearlos desde nuestro gestor de mdulos al darlal botn nuevo esto nos desplegara los tipos de mdu
los que queramos crear en nuestro caso ser un md
lo 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 plan-
tilla
Dentro del mismo modulo en salida persona-
lizada 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 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
7/21/2019 Joomla 3.0 R3ADY!!!
26/38
El siguiente personalizar HTML ser el de
traductor de idiomas en este caso introdu-
ciremos un cdigo HTML de traduccin as
como el mdulo del logo crearemos un m-
dulo personalizar HTML al cual le daremos
por ttulo traductor y ubicaremos en la posi-
cin toolbar-r de nuestra plantilla
.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;
}
Este Codigo Sera introducido en el
toggle editor de nuestro personali-
zar html
7/21/2019 Joomla 3.0 R3ADY!!!
27/38
Daremos clic sobre to-
ggle editor el cual nos
facilitara la introduccin
de nuestro cdigo HTM
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 mdu-
los 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
7/21/2019 Joomla 3.0 R3ADY!!!
28/38
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 Sa-
lle? y lo ubicaremos en la posicin 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 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 con-
tinuacin 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 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 ms... terminado guardamos y
cerramos y repetimos el proceso hasta llegar
al resultado siguiente
7/21/2019 Joomla 3.0 R3ADY!!!
29/38
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 persona-
lizar HTML el cual llevara por nombre
pie de pgina pondremos el nombre
como oculto ya que no queremos qsalga en nuestro sitio y lo ubicamos
en la posicin footer de nuestra plan-
tilla 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 que-da guardar y cerrar
Nos aparecera de la siguiente manera despues que guardamos
Con esto terminamos todos los mdulos de personalizar HTML ylo nico que no faltara es instalar todos los mdulos siguientes
7/21/2019 Joomla 3.0 R3ADY!!!
30/38
Instalacin de GaleriaPara 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 ex-
tensiones
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 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 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 an-
cho ahora solo guardamos y cerramos
Haremos el mismo proceso para cualquier
galera que queramos introducir a nuestro
sitio
7/21/2019 Joomla 3.0 R3ADY!!!
31/38
Instalacin de Modulo
Simple youtube
Para instalar nuestro modulo accederemos desdenuestro panel de control al gestor de extensiones
buscamos nuestro modulo donde lo hayamos des-
cargado a continuacin pulsamos subir e instalar
Ya instalado nuestro modulo lo bus-
caremos en gestor de mdulos ahorale daremos clic para acceder a el
Una vez dentro de nuestro modulo le pon-
dremos de ttulo SE enciende una luz el
cual est ubicado en la pgina del Tcnico
la Salle lo ubicaremos en la posicin side-
bar-a
Dentro de nuestro mismo modulo accedere-
mos a opciones bsicas las cual nos pedir
la id de nuestro video y su tamao en altu-
ra y anchura el cual ser el siguiente rea-
lizaremos el mismo procedimiento para cadamdulo de video de YouTube que queramos
postear en nuestro sitio
7/21/2019 Joomla 3.0 R3ADY!!!
32/38
Instalacin de Content
Slider
Content slider es una herramienta muy til para mostrar artculos en transicin o movi-
miento es muy sencillo de configurar
Lo que haremos a continuacin es el mismo paso que hemos utilizado para insta-
lar los mdulos 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 ttulo en
este caso se mas artculos y lo
ubicaremos en la posicin Boo-
tom-a de nuestra plantilla
Los nicos cambios que le daremos a nuestro
modulo es en source setting aadiremos lascategoras que queremos mostrar y delimitamos
el nmero de artculos que queramos mostrar
en este caso dejaremos el nmero que apare-
ce por defecto
7/21/2019 Joomla 3.0 R3ADY!!!
33/38
Instalacin de Plugins
de Google Map
Para insertar un mapa en nuestro sitio web necesitaremos de un plugin para visualizarlo instalaremos nuestro plugins a como hemos hecho con nuestros mdulos 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 localizacin y pondremos lo si-
guiente luego guardamos y cerramos
7/21/2019 Joomla 3.0 R3ADY!!!
34/38
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 publi-
camos y guardamos
7/21/2019 Joomla 3.0 R3ADY!!!
35/38
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 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
7/21/2019 Joomla 3.0 R3ADY!!!
36/38
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
+
7/21/2019 Joomla 3.0 R3ADY!!!
37/38
Pagina Finalizad
Este es el resultado de nuestro ejercicio local
en el hemos implementado todo lo aprendi-
do durante este mdulo desde la creacin de
mdulos hasta la ubicacin de los mismos,
tambin aprendimos que joomla es una herra-
mienta de fcil uso para la creacin de pgi-
nas web.
10
7/21/2019 Joomla 3.0 R3ADY!!!
38/38
Revista Paso a Paso del rediseo de pagina del Instituto
Politecnico La Salle
Gracias !!!!!
Diseo elaborado por Marcos Rub Guevara
estudiante de 2do ao de la Carrera Tecnica
de Diseo Grafico