Universidad Centroamericana

Desarrollo Tecnolgico

Facultad de Ciencia, Tecnologa y Ambiente

Manual de Instalacin, Configuracin, y uso

de CMS: JOOMLA

Autores:

Urielma Jirn Francella Zeledn

Karen Mndez Ekaterina Bondareva

Darvin Mendoza Giorgin Romero

Moises Mena Laleshka Lpez

Desarrollo de Aplicaciones Web

Docente:

Elsner Gonzlez

ndice

Introduccin ............................................................................................................. 1

Instalacin de Joomla y configuracin de Xampp. .................................................. 2

Instalacin de una plantilla en Joomla 3.6.4 ............................................................ 9

Personalizacin de plantilla ................................................................................... 13

Instalacin de plugins en Joomla. ......................................................................... 58

1

Introduccin

La asignatura de Desarrollo de Aplicaciones Web, ha asignado la elaboracin de un

Manual de Instalacin, configuracin y uso de CMS: Joomla, con el propsito de

realizar una pgina web, implementando las herramientas de gestin de contenido

web: Joomla, wordpress, moddle, entre otros, de forma prctica segn su

clasificacin y utilidad, adoptando las mejores prcticas en la seleccin y

personalizacin de las misma.

La elaboracin del manual es para los usuarios que tengan inters, curiosidad o

motivacin en instalar, configurar CMS (gestores de contenidos) y puede ser como

un documento de consulta o apoyo en estudios informticos tecnolgicos en la

realizacin de una pgina web, blogs, etc.

El manual est estructurado de la siguiente manera: Instalacin y Configuracin de

Joomla y Xampp, Instalacin de la Plantilla, Personalizacin de la Plantilla y el Uso

de los Plugins.

2

Instalacin de Joomla y configuracin de Xampp.

Este es un pequeo manual de instalacin de Joomla y para que funcione debemos

de tener bien configurado xampp.

1. Lo primero que necesitamos es el programa XAMPP. Lo puedes

descargar aqu. Ejecutamos y vamos siguiendo las instrucciones, se

recomienda habilitar la opcin de instalar los servicios de apache y MySQL.

Cuando termine, nos aparecer el panel de control.

2. Para tener estos servicios debemos tener configurados los puertos de apache

en el archivo httpd.conf del puerto 80 al 8080.

https://www.apachefriends.org/es/index.html

3

3. Una vez configurado el puerto del apache, dispondremos a cambiar el puerto

del MySQL del 443 al 4430 en el archivo de configuracin httpd-ssl.conf .

4. Una vez hechos estos cambios en el Xampp, iniciamos con la instalacin y

configuracin de Joomla, para eso, descargamos el archivo zip de la pgina de

Joomla.

4

5. Ya descargado, vamos a la carpeta de xampp en el disco entramos a la carpeta

htdocs, creamos una carpeta que se llame Joomla, lo colocamos dentro el zip

y luego lo extraemos.

5

6. Probamos en el navegador que Joomla este corriendo con el apache.

7. Nos debera mostrar la pgina de inicio de la configuracin de Joomla, ac

procedemos a llenar todos los campos con los datos personales y contraseas

y dems datos que correspondan

6

8. Damos siguiente y nos abrir la ventana de configuracin de la base de datos,

la cual tambin llenaremos los datos como nosotros deseemos, es importante

seleccionar el tipo de base de datos Mysql tradicional.

7

9. Clickeamos en siguiente y nos mostrara la ventana final de instalacin de

Joomla seleccionamos la opcin datos de ejemplo: learn Joomla English,

damos que si a la configuracin del correo.

10. Damos clic en siguiente y despus de un tiempo de carga aparecer esto.

8

11. Eliminamos la carpeta de instalacin del directorio dando clic sobre l.

12. Accedemos al panel de control de Joomla dando clic en Administracin nos

loguemos y listo tenemos configurado he instalado Joomla

9

Instalacin de una plantilla en Joomla 3.6.4

Para empezar la instalacin de una plantilla en Joomla, debemos acceder a su

administracin con nuestro usuario y contrasea.

1. Una vez que estemos el panel de control, nos dirigimos a la pestaa

Extensiones, Manage (Gestor de Extensiones) y luego, Install.

2. Seguidamente, se mostrarn 3 opciones para instalar la plantilla:

2.1 Primer Opcin: Subir paquete

2.2 Segunda Opcin: Instalar desde una carpeta

2.3 Tercera Opcin: Instalar desde una URL

10

2.1 USANDO LA PRIMERA OPCIN: SUBIR PAQUETE

- Debemos hacer click en el boton Seleccionar archivo y seleccionar el paquete

desde nuestro equipo y dar click en el botn "Subir e Instalar".

Si se utilizan las otras opciones

INSTALAR DESDE UNA CARPETA

Se debe introducir la ruta en la que se encuentra el paquete en nuestro

servidor.

INSTALAR DESDE UNA CARPETA

Debe introducirse la URL en la que se encuentra el paquete de instalacin.

- De cualquier forma, si el paquete no contiene errores la carga e instalacin de

la plantilla deber ser exitosa.

11

- Ahora debemos establecer por defecto la plantilla que instalamos. Para eso,

accedemos nuevamente a la pestaa Extensiones Gestor de Plantillas

- Deber aparecer una lista de plantillas instaladas.

12

- Para Activar la plantilla, solamente debemos seleccionar el icono de estrella

correspondiente a nuestra plantilla; esto aplica por defecto nuestra plantilla a la

pgina. Y Listo!

En nuestro navegador accedemos a localhost:puerto/joomla y aparecer la plantilla

aplicada.

13

Personalizacin de plantilla

Activar idioma predeterminado para el contenido del sitio

Primeramente, debemos seleccionar el idioma en que estarn redactados los

componentes de nuestro sitio web. Lo configurarnos desde el panel del de control

de Joomla o desde la pestaa Extensiones.

Desde el panel de control

14

Desde la pestaa Extensiones

Seleccionamos Instalar idiomas y buscamos Spanish

15

Seleccionamos Spanish CO y damos clic en la opcin Instalar

Luego volvemos a seleccionar Idiomas desde el panel de control o la pestaa

Extensiones. Ahora seleccionamos en la barra de seleccin la opcin Sitio y

seleccionamos Spanish (Espaol) y lo marcamos como predeterminado para el

sitio haciendo clic en la estrella en la columna Predeterminado.

16

Se nos aparece un mensaje confirmando el cambio de idioma predeterminado.

Seleccionar la plantilla que usaremos

Joomla por defecto ejecuta la plantilla predeterminada en la instalacin del CMS

(comnmente protpstar, joom, beez3), as que debemos seleccionar la plantilla

con la que trabajaremos. Para este ejemplo usaremos JPeople. Para seleccionar

la plantilla podemos dar clic en Templates desde el Panel de control o en la

pestaa Extensiones la opcion Plantillas.

17

Seleccionamos Site en la barra de opciones y marcamos con la estrella en la

columna Por defecto de la plantilla que deseamos aplicar.

18

Activar visualizacin de mdulos para la plantilla

Activar los mdulos de visualizacin es el aspecto ms crucial para decidir en que

posicin colaremos elementos de nuestro sitio web, por ejemplo podemos decidir

donde ira el menu principal si arriba del sitio en uno de los costados, donde irn

los artculos, la seccin social, etc.

Nuestro sitio web lo observamos de esta manera.

Con la visualizacin de mdulos observamos la posicin de cada

compenete.

19

Observamos la posicin definida de cada componente, en los espacios donde no

se definen posicin es porque la plantilla que seleccionamos no permite agregar

componentes en esta posicin. Con nuestra plantilla de ejemplo notamos que no

podemos cambiar de posicin la galera de imgenes o el eslogan del sitio

(JPeople por defecto) pero si podemos alterar la posicin de nuestro menu

principal en cualquiera de las etiquetas de posicin que se muestran en la

pantalla.

EL modo de visualizacin de mdulos esta por la general desactivo por defecto en

Joomla. Debemos acceder primero a la configuracin global de nuestro control

panel desde la barra lateral derecha o desde la pestaa Sistema>Configuracin

global

Desde la barra lateral derecha Desde la pestaa

Sistema

20

Seleccionamos Plantillas en la barra lateral derecha.

Y seleccionamos la pestaa Plantillas

21

Y seleccionamos habilitado.

Ahora nos dirigimos a Extensiones>Plantillas y damos clic sobre el icono en forma

de ojo al lado del nombre de la plantilla que seleccionamos para visualizar los

mdulos.

22

Configurar las caractersticas propias de la plantilla

Estas caractersticas son el logotipo y eslogan del sitio web, los colores de la

plantilla, algunos componentes propios de la plantilla (en nuestro ejemplo es la

galera de imgenes) y el favicon (icono que se muestra en la pestaa en que

estamos navegando), fuentes, grficos, plugins, etc. Depende de cada plantilla.

Configuraremos lo bsico, el favicon, logotipo y eslogan. Primero debemos ir al

Manejador de plantillas (Extensiones > Plantillas o bien Plantillas desde el Panel

de control) y damos clic sobre el nombre de la plantilla.

23

O bien chequeamos la plantilla y damos clic en el botn superior Editar

Nos aparecen los detalles de la plantilla.

Cambiaremos el icono del sitio web seleccionando Logotype>Imagen Logo,

posteriormente se mostrare el explorador de archivos y seleccionaremos la

imagen.

24

Tambin el logotipo puede ser un texto, seleccionamos Logo Type > Text Logo y

en Text Logo escribimos el nombre del sitio.

Agregas el eslogan de nuestro sitio seleccionando show en Custon Slogan (Si

seleccionamos hide no aparece en el sitio web) y escribimos el eslogan de nuestro

sitio web en Site Slogan.

Agregar el pie de pagina y los botones sociales ( Facebook, Twitter, Google plus y

Email) en el pie de pgina de nuestro sitio seleccionando show. (Si seleccionamos

hide no aparecer en el sitio web) y los enlaces de las pginas que dirigirn los

botones sociales.

25

Los siguientes son caractersticas propias de la plantilla como la galera de

imgenes y el botn back-to-top (es un botn flotante que nos direcciones haca

en encabezado de la pgina en que estamos navegando)

Galera de imgenes dinmica.

Boton back-to-top (ir al encabezado)

En los ltimos detalles de la plantilla aparecen sus configuraciones. Podemos

decidir si es visible el botn back-to-top, en esta plantilla no tenemos permitido

cambiar el estilo del botn.

26

Podemos decidir en si ver la galera de imgenes en todas las pginas del sitio o

nicamente en home.

Podemos seleccionar el nmero de imgenes de la galera desde la multimedia de

Joomla o desde nuestro equipo. La plantilla nos obliga a tener un tamao

especifico de las imgenes de la galera para que no se desproporcionen.

27

Agregar elementos multimedia

Nuestro sitio web debe ser atractivo y captar la atencin del usuario lo ms rpido

posible para convencerlo de permanecer en nuestro sitio web. Por lo tanto debemos

incluir elemento multimedia (video, imagen, sonido y texto) para facilitar la

interaccin con el usuario de nuestro sitio

.

Es una buena prctica cargar todos los elementos multimedia en el CMS para

reutilizarlos en artculos, etiquetas, categoras, mens, galeras, encabezados, pies

de pginas, etc.

Desde el panel de control seleccionamos la opcion Multimedia o accedemos desde

la pestaa Contenido > Multimedia.

Desde el panel de control Desde la petala Contendio > Multimedia

28

Podemos observar la administracin de multimedia, desde esta pantalla podemos

subir directamente imgenes, video y sonidos; crear carpetas para elementos

multimedia, agregar elementos a las carpetas al igual que borrar elementos

multimedia.

Joomla incorpora carpetas predefinidas que podemos utilizar: banners (por lo

general son las imgenes de los anunciantes o propias anuncios de nuestro sitio),

headers (son las imagens de cabecera de nuestro sitio web, normalmente el logotipo

o el eslogan) y sampledata (son las imgenes de ejemplos que incorpora Joomla

despus de la instalacin del CMS). Por lo general usamos las imgenes de ejemplo

para hacer pruebas del estilo visual de nuestro sitio web y reemplazarlos por las

imgenes o videos que utilizaremos.

29

Te recomiendo explorar sampledata para hacer pruebas de como lucir el sitio web.

Ahora crearemos varias carpetas: Articulos (imgenes para los artculos que

crearemos anteriormente), sliders (imgenes para la galera dinmica propia de

nuestra aplicacin), favicons (para almacenes los iconos de la pestaa de muestro

sitio web) y videos.

Seleccionamos Crear una carpeta nueva en el manejador de multimedia, se nos

desplegara en la parte inferior un campo de texto para darle un nombre a nuestra

carpeta y damos clic en la opcion Crear carpeta.

Y nos aparecer en el directorio del lado derecho del manejador multimedia.

30

Hacemos el mismo procedimiento para las otras carpetas. El rbol de directorios

debera lucir as:

Ahora seleccionamos la carpeta artculos y damos clic en la opcion Subir en la parte

superior, se abrir el explorador de archivos donde seleccionaremos las imgenes

que contendr la carpeta.

31

Si damos clic sobre cualquier imagen que tengamos dentro de la carpeta se abrira

en pre visualizacin.

Igualmente podemos subir videos y varios formatos de imgenes y contenidos

multimedia, con la nica restriccin de que su tamao sea menor a igual 10 MB. Si

necesitamos subir un elemento y Joomla no lo permite por su formato (por ejemplo:

.svg, .avi, .bmmp, .ai, .psd, .pds, etc ) , debemos agregar el formato del archivo en

Panel de control > configuracin global y seleccionamos la opcion Multimedia.

32

En el campo Extensiones de imagen permitidas agregamos el nombre de la

extensin. Tambin en Extensiones ignoradas podemos agregar los tipos de

archivos de imagen que no sern subidos.

Agregar mens

Los mens son uno de los aspectos ms cruciales en un sitio web, permiten al

usuario navegar por todas la paginas del sitio. Lo mas optimo es tener un menu

principal en la parte superior del sitio web donde el usuarios puede acceder a

cualquier parte del sitio con solo seleccionar una opcion del menu.

Menu principal

Joomla incorpora por defecto el menu principal y dependiendo a la platilla

que estemos utlizando varias la posicin del menu principal. Para editar

este menu debemos ir a la pestaa Mens > Main men.

33

Observaremos el manejador de mens. Seleccionamos la opcin Elementos de

men en la parte derecha y luego en la barra de seleccin escogemos Main

menu. Se nos mostraran los elementos de Main men. Joomla incorpora el

elemento home.

Ahora seleccionamos Nuevo en la parte superior derecha.

34

Y completamos el campo Nombre del elemento

En el campo Tipo de elemento del menu damos clic en la opcin Seleccionar

Se nos mostrara una ventana para seleccionar el tipo de elemento de menu, esto

es para decidir que se abrir al seleccionar ese elemento, pude ser un artculo, otro

sitio web, una categora de nuestro sitio, un formulario, contactos, etc. Como buena

practica debes familiarizarte con cada uno de estos tipos de elemento, es seguro

que utilizaras muchos de estos cuando construyas tu sitio web. Para este ejemplo

seleccionaremos una articulo para el elemento de menu.

35

36

Ahora seleccionamos el artculo que se abrir al seleccionar el elemento de menu.

37

Para este ejemplo seleccionamos el articulo Getting Started que esta incorporado

con la instalacin de Joomla.

Ahora seleccionamos en que lugar del navegador se abrir nuestro artculo, si en

una nueva ventana del navegador, en una nueva pestaa del navegador (en la

misma ventana actual) o en la misma pestaa del navegador. Cuando el articulo

esta dentro de nuestro sitio web es recomendable que sea dentro de la misma

ventana del navegador, si un articulo o sito web externo debe ser en una vestaa

de navegacin, se un formulario de registro, contacto o post debe ser en una nueva

ventana del navegador.

Ahora debemos seleccionar el estilo que tendr el articulo que abrir el elemento de

menu, por recomendacin debe ser el predeterminado es decir, con la misma

plantilla en que estaos trabajando.

38

Ahora en el lado izquierdo del manejador de elementos de menu seleccionamos al

menu que pertenecer este elemento, en nuestro ejemplo a Main menu.

39

Ahora seleccionamos el elemento raz de nuestro elemento de menu, si lo

colocamos en elemento raz ser un elemento de menu de primer nivel, si

seleccionamos que su raz ser otro elemento de menu, por ejemplo Home

entonces ser un sub elemento de ese elemento de menu, en otras palabras

estaramos creando un sub menu, para este ejemplo seleccionaremos que sea un

elemento raz.

40

Ahora debemos guardar el elemento de menu para finalizar su creacin, tenemos

cuatro opciones: Guardar para almacenar los cambios que hemos realizado pero

sin salirnos del manejador de elementos de menu; Guardar y cerrar para almacenar

los cambios hechos y mostrar la lista de elementos de menu; Guardar y nuevo para

guardar los cambios que hemos hecho e ir a una nueva creacin de otro elemento

de menu; y Cerrar para cancelar los cambios que hemos realizado e ir a la lista de

elementos de men. En este ejemplo seleccionaremos Guardar y salir porque ya no

realizaremos mas cambios ni crearemos mas elementos de menu.

Ya hemos creado los elementos de men de Main menu, ahora solo nos falta

incorporarlo en la plantilla que estamos utilizando, generalmente el menu principal

lo posicionamos en la cabecera del sitio. Primero debemos visualizar las posiciones

de nuestra plantilla para conocer en donde ubicaremos el Main menu. Nos dirigimos

a la pestaa Extensiones > Plantillas y seleccionamos la vista de nuestra plantilla

por defecto

41

Podemos observar los nombres de las posiciones de los elementos en la plantilla.

Nosotros escogeremos para el menu la posicin mainmenu.

42

Para establecer esta posicin debemos ir a la pestaa Extensiones > mdulos

Observaremos el manejador de mdulos. Seleccionamos el mdulo Main menu

que incorpora Joomla por defecto.

43

Observamos el manejador de mdulos de men

44

Ahora seleccionamos la posicin para nuestro menu en la barra Posicin ubicado al

lado derecho. Tenemos que ubicarnos en la seccin de nuestra plantilla en uso,

para este ejemplo es JPeople, y seleccionamos la posicin mainmenu de JPeople.

Y seleccionamos Guardar y cerrar.

45

Ahora para visualizar nuestra pgina web y los cambios que hicimos, en este

ejemplo el cambio fue agregar elementos y mostrar Main menu en el sitio. Hacemos

clic en el nombre de nuestro sitio web en la posicin superior izquierda por encima

de la pestaa de seleccin.

Y ahora observamos nuestro sitio web con el menu principal.

46

Podemos agregar ms elemento a nuestro Main menu y sub elemento para crear

un submen. Lucira as:

Menu secundario

Adems de nuestro menu principal podemos tener mens secundarios,

estos nos dan la utilidad de listar artculos, categoras, enlaces, etc. A

diferencia del menu principal que ofrece navegabilidad a travs de todo el

sitio web y esta presenten en todas las paginas del sitio, los mens

47

secundarios generalmente solo se ubican en una nica pgina del sitio

web para navegar a travs del contenido de esa pgina o seccin del sitio

web en que esta incorporado.

Crearemos un menu secundario donde liste los contactos de docentes.

Para esto nos dirigimos a la pestaa Mens > Gestionar > Aadir nuevo

menu y creamos un nuevo menu y agregamos sus elementos y sub

elementos.

48

Ahora nos dirigimos a la pestaa Extensiones > mdulos y agregamos un nuevo

mdulo de tipo menu.

49

50

Y actualizamos la ventana de nuestro sitio web.

51

Agregar artculos

Los artculos o publicaciones de un sitio web son el cuerpo fundamental del sitio,

podemos agregar desde texto, imagen, enlaces, de video, tablas, vnculos,

animaciones, etc.

Para empezar, debemos organizar nuestros artculos del sitio en categoras y

etiquetas para luego publicarlos bajo estas. Esta es la forma organizada de trabajar

los artculos de un sitio web.

Categora

Las categoras son el aglomerado global que encierra artculos dentro de l.

Por el ejemplo, si nuestro sitio web es de una universidad las categoras

podran ser: facultades, carreras, decanaturas, becas, matriculas, eventos

etc. Los artculos referentes a informar de una facultad irn en la categora

Facultades. Tambin si una carrera de cualquier facultad realizo un evento

de apoyo social a uno comunidad, el articulo referente ira en las categoras

facultades, carreras, eventos. Esta es la manera lgica de organizar los

artculos.

Para agregar Categoras nos dirigimos a la pestaa Contenido > categoras

> agregar nueva categora. Observaremos el manejador de categoras.

52

Definimos el nombre de nuestra categora y una descripcin.

Y definimos le nivel de nuestra categora, si ser una categora padre o raz o una

categora hija de otra categora existente. Un ejemplo de categoras hijas, seran los

nombres especficos de las facultades de una universidades y su categora padre

seria Facultades.

53

Para finalizar presionamos Guardar y cerrar

Etiqueta

Las etiquetas de los artculos son los temas especficos de una categora,

por ejemplo si existe un a categora que represente la carrera de una

universidad, Ingeniera en sistemas de informacin, las etiquetas de esta

categora podran ser concurso de programacin 2010, proyectos sociales,

desarrollo multimedia, feria de aplicaciones mviles, innovacin de

software, etc.

Generalmente las etiquetas son meta palabras, describen los temas que se

desarrollan en un artculo o una categora. En Joomla podemos agregar

categoras desde el manejador de publicacin de artculos mientras creamos

un nuevo artculo o atreves de plugins para el CMS.

Articulo

Los artculos son las modificaciones ms frecuentes en un sitio web, ya

terminadas las configuraciones de nuestro sitio (mens, categoras,

imgenes, enlaces, plugins, etc.) solo debemos agregar artculos a nuestro

sitio.

Agregamos un nuevo articulo desde la pestaa Contenido > artculos > aadir

nuevo artculo.

54

El manejador de archivos es muy similar a las herramientas de edicin de texto de

Microsoft Word. Te aconsejo familiarizarte con la edicin de texto de los artculos.

En lado derecho del manejador podemos agregar la categora del articulo y sus

etiquetas.

55

56

Igual podemos agregar una imagen de cabecera al artculo y decidir el

alineamiento de la imagen.

57

Ahora solo vinculamos nuestro artculo con un elemento de menu y lo

visualizamos en nuestro sitio web.

58

Instalacin de plugins en Joomla.

1. Descargamos el plugin desde la siguiente pgina http://www.joomlaworks.net/,

una vez descargado se instala en el Panel de Control de joomla. En la seccin

de Extensions, seleccionamos Manage y se nos desplazara una lista en donde

escogemos Install.

2. Una vez realizado el paso anterior se nos abre una ventana en donde le damos

click en examinar buscamos el plugin que previamente descargamos, luego de

esto damos click en el botn Upload & Install.

http://www.joomlaworks.net/

59

3. Se nos mostrara el mensaje de que el plugin ha sido instalado exitosamente.

Luego se debe dirigir a la seccin plugins.

4. En la seccin de plugins, habilitamos el plugin en donde est la X.

60

5. Se referenciara el video en el artculo de la pgina, se guardan los cambios y

se debe cerrar.

6. Y este debe ser el resultado.

61