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