Universidad Centroamericana

Desarrollo Tecnológico

Facultad de Ciencia, Tecnología y Ambiente

Manual de Instalación, Configuración, y uso

de CMS: JOOMLA

Autores:

Urielma Jirón Francella Zeledón

Karen Méndez Ekaterina Bondareva

Darvin Mendoza Giorgin Romero

Moises Mena Laleshka López

Desarrollo de Aplicaciones Web

Docente:

Elsner González

Índice

Introducción ............................................................................................................. 1

Instalación de Joomla y configuración de Xampp. .................................................. 2

Instalación de una plantilla en Joomla 3.6.4 ............................................................ 9

Personalización de plantilla ................................................................................... 13

Instalación de plugins en Joomla. ......................................................................... 58

1

Introducción

La asignatura de Desarrollo de Aplicaciones Web, ha asignado la elaboración de un

Manual de Instalación, configuración y uso de CMS: Joomla, con el propósito de

realizar una página web, implementando las herramientas de gestión de contenido

web: Joomla, wordpress, moddle, entre otros, de forma práctica según su

clasificación y utilidad, adoptando las mejores prácticas en la selección y

personalización de las misma.

La elaboración del manual es para los usuarios que tengan interés, curiosidad o

motivación en instalar, configurar CMS (gestores de contenidos) y puede ser como

un documento de consulta o apoyo en estudios informáticos tecnológicos en la

realización de una página web, blogs, etc.

El manual está estructurado de la siguiente manera: Instalación y Configuración de

Joomla y Xampp, Instalación de la Plantilla, Personalización de la Plantilla y el Uso

de los Plugins.

2

Instalación de Joomla y configuración de Xampp.

Este es un pequeño manual de instalación 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 opción 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.

3

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

del MySQL del 443 al 4430 en el archivo de configuración httpd-ssl.conf .

4. Una vez hechos estos cambios en el Xampp, iniciamos con la instalación y

configuración de Joomla, para eso, descargamos el archivo zip de la página 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 debería mostrar la página de inicio de la configuración de Joomla, acá

procedemos a llenar todos los campos con los datos personales y contraseñas

y demás datos que correspondan

6

8. Damos siguiente y nos abrirá la ventana de configuración de la base de datos,

la cual también 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 instalación de

Joomla seleccionamos la opción datos de ejemplo: learn Joomla English,

damos que si a la configuración del correo.

10. Damos clic en siguiente y después de un tiempo de carga aparecerá esto.

8

11. Eliminamos la carpeta de instalación del directorio dando clic sobre él.

12. Accedemos al panel de control de Joomla dando clic en Administración nos

loguemos y listo tenemos configurado he instalado Joomla

9

Instalación de una plantilla en Joomla 3.6.4

Para empezar la instalación de una plantilla en Joomla, debemos acceder a su

administración con nuestro usuario y contraseña.

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

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

2. Seguidamente, se mostrarán 3 opciones para instalar la plantilla:

2.1 Primer Opción: Subir paquete

2.2 Segunda Opción: Instalar desde una carpeta

2.3 Tercera Opción: Instalar desde una URL

10

2.1 USANDO LA PRIMERA OPCIÓN: SUBIR PAQUETE

- Debemos hacer click en el botoón “Seleccionar archivo” y seleccionar el paquete

desde nuestro equipo y dar click en el botón "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 instalación.

- De cualquier forma, si el paquete no contiene errores la carga e instalación de

la plantilla deberá ser exitosa.

11

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

accedemos nuevamente a la pestaña 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

página. ¡Y Listo!

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

aplicada.

13

Personalización de plantilla

Activar idioma predeterminado para el contenido del sitio

Primeramente, debemos seleccionar el idioma en que estarán redactados los

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

de Joomla o desde la pestaña Extensiones.

Desde el panel de control

14

Desde la pestaña Extensiones

Seleccionamos Instalar idiomas y buscamos Spanish

15

Seleccionamos Spanish CO y damos clic en la opción Instalar

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

Extensiones. Ahora seleccionamos en la barra de selección la opción Sitio y

seleccionamos Spanish (Español) 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 instalación del CMS

(comúnmente 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

pestaña 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 visualización de módulos para la plantilla

Activar los módulos de visualización es el aspecto más crucial para decidir en que

posición 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 irán

los artículos, la sección social, etc.

Nuestro sitio web lo observamos de esta manera.

Con la visualización de módulos observamos la posición de cada

compenete.

19

Observamos la posición definida de cada componente, en los espacios donde no

se definen posición es porque la plantilla que seleccionamos no permite agregar

componentes en esta posición. Con nuestra plantilla de ejemplo notamos que no

podemos cambiar de posición la galería de imágenes o el eslogan del sitio

(JPeople por defecto) pero si podemos alterar la posición de nuestro menu

principal en cualquiera de las etiquetas de posición que se muestran en la

pantalla.

EL modo de visualización de módulos esta por la general desactivo por defecto en

Joomla. Debemos acceder primero a la configuración global de nuestro control

panel desde la barra lateral derecha o desde la pestaña Sistema>Configuración

global

Desde la barra lateral derecha Desde la pestaña

Sistema

20

Seleccionamos Plantillas en la barra lateral derecha.

Y seleccionamos la pestaña 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

módulos.

22

Configurar las características propias de la plantilla

Estas características son el logotipo y eslogan del sitio web, los colores de la

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

galería de imágenes) y el favicon (icono que se muestra en la pestaña en que

estamos navegando), fuentes, gráficos, plugins, etc. Depende de cada plantilla.

Configuraremos lo básico, 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 botón 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

También 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 página de nuestro sitio seleccionando show. (Si seleccionamos

hide no aparecerá en el sitio web) y los enlaces de las páginas que dirigirán los

botones sociales.

25

Los siguientes son características propias de la plantilla como la galería de

imágenes y el botón back-to-top (es un botón flotante que nos direcciones hacía

en encabezado de la página en que estamos navegando)

Galería de imágenes dinámica.

Boton back-to-top (ir al encabezado)

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

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

cambiar el estilo del botón.

26

Podemos decidir en si ver la galería de imágenes en todas las páginas del sitio o

únicamente en home.

Podemos seleccionar el número de imágenes de la galería desde la multimedia de

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

especifico de las imágenes de la galería para que no se desproporcionen.

27

Agregar elementos multimedia

Nuestro sitio web debe ser atractivo y captar la atención del usuario lo más rápido

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

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

interacción con el usuario de nuestro sitio

.

Es una buena práctica cargar todos los elementos multimedia en el CMS para

reutilizarlos en artículos, etiquetas, categorías, menús, galerías, encabezados, pies

de páginas, etc.

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

la pestaña Contenido > Multimedia.

Desde el panel de control Desde la petala Contendio > Multimedia

28

Podemos observar la administración de multimedia, desde esta pantalla podemos

subir directamente imágenes, 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 imágenes 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 imágenes de ejemplos que incorpora Joomla

después de la instalación del CMS). Por lo general usamos las imágenes de ejemplo

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

imágenes o videos que utilizaremos.

29

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

Ahora crearemos varias carpetas: Articulos (imágenes para los artículos que

crearemos anteriormente), sliders (imágenes para la galería dinámica propia de

nuestra aplicación), favicons (para almacenes los iconos de la pestaña 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

debería lucir así:

Ahora seleccionamos la carpeta artículos y damos clic en la opcion Subir en la parte

superior, se abrirá el explorador de archivos donde seleccionaremos las imágenes

que contendrá la carpeta.

31

Si damos clic sobre cualquier imagen que tengamos dentro de la carpeta se abriría

en pre visualización.

Igualmente podemos subir videos y varios formatos de imágenes y contenidos

multimedia, con la única restricción de que su tamaño 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 > configuración global y seleccionamos la opcion Multimedia.

32

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

extensión. También en Extensiones ignoradas podemos agregar los tipos de

archivos de imagen que no serán subidos.

Agregar menús

Los menús son uno de los aspectos más 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 posición del menu principal. Para editar

este menu debemos ir a la pestaña Menús > Main menú.

33

Observaremos el manejador de menús. Seleccionamos la opción Elementos de

menú en la parte derecha y luego en la barra de selección 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 opción 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 artículo, otro

sitio web, una categoría 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 artículo que se abrirá al seleccionar el elemento de menu.

37

Para este ejemplo seleccionamos el articulo Getting Started que esta incorporado

con la instalación de Joomla.

Ahora seleccionamos en que lugar del navegador se abrirá nuestro artículo, si en

una nueva ventana del navegador, en una nueva pestaña del navegador (en la

misma ventana actual) o en la misma pestaña 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 vestaña

de navegación, 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 recomendación 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 raíz de nuestro elemento de menu, si lo

colocamos en elemento raíz será un elemento de menu de primer nivel, si

seleccionamos que su raíz será otro elemento de menu, por ejemplo Home

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

estaríamos creando un sub menu, para este ejemplo seleccionaremos que sea un

elemento raíz.

40

Ahora debemos guardar el elemento de menu para finalizar su creación, 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 creación 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 pestaña 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 posición mainmenu.

42

Para establecer esta posición debemos ir a la pestaña Extensiones > módulos

Observaremos el manejador de módulos. Seleccionamos el módulo Main menu

que incorpora Joomla por defecto.

43

Observamos el manejador de módulos de menú

44

Ahora seleccionamos la posición para nuestro menu en la barra Posición ubicado al

lado derecho. Tenemos que ubicarnos en la sección de nuestra plantilla en uso,

para este ejemplo es JPeople, y seleccionamos la posición mainmenu de JPeople.

Y seleccionamos Guardar y cerrar.

45

Ahora para visualizar nuestra página 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 posición superior izquierda por encima

de la pestaña de selección.

Y ahora observamos nuestro sitio web con el menu principal.

46

Podemos agregar más elemento a nuestro Main menu y sub elemento para crear

un submenú. Luciría así:

Menu secundario

Además de nuestro menu principal podemos tener menús secundarios,

estos nos dan la utilidad de listar artículos, categorías, enlaces, etc. A

diferencia del menu principal que ofrece navegabilidad a través de todo el

sitio web y esta presenten en todas las paginas del sitio, los menús

47

secundarios generalmente solo se ubican en una única página del sitio

web para navegar a través del contenido de esa página o sección del sitio

web en que esta incorporado.

Crearemos un menu secundario donde liste los contactos de docentes.

Para esto nos dirigimos a la pestaña Menús > Gestionar > Añadir nuevo

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

elementos.

48

Ahora nos dirigimos a la pestaña Extensiones > módulos y agregamos un nuevo

módulo de tipo menu.

49

50

Y actualizamos la ventana de nuestro sitio web.

51

Agregar artículos

Los artículos o publicaciones de un sitio web son el cuerpo fundamental del sitio,

podemos agregar desde texto, imagen, enlaces, de video, tablas, vínculos,

animaciones, etc.

Para empezar, debemos organizar nuestros artículos del sitio en categorías y

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

los artículos de un sitio web.

Categoría

Las categorías son el aglomerado global que encierra artículos dentro de él.

Por el ejemplo, si nuestro sitio web es de una universidad las categorías

podrían ser: facultades, carreras, decanaturas, becas, matriculas, eventos

etc. Los artículos referentes a informar de una facultad irán en la categoría

Facultades. También si una carrera de cualquier facultad realizo un evento

de apoyo social a uno comunidad, el articulo referente ira en las categorías

facultades, carreras, eventos. Esta es la manera lógica de organizar los

artículos.

Para agregar Categorías nos dirigimos a la pestaña Contenido > categorías

> agregar nueva categoría. Observaremos el manejador de categorías.

52

Definimos el nombre de nuestra categoría y una descripción.

Y definimos le nivel de nuestra categoría, si será una categoría padre o raíz o una

categoría hija de otra categoría existente. Un ejemplo de categorías hijas, serían los

nombres específicos de las facultades de una universidades y su categoría padre

seria Facultades.

53

Para finalizar presionamos Guardar y cerrar

Etiqueta

Las etiquetas de los artículos son los temas específicos de una categoría,

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

universidad, Ingeniería en sistemas de información, las etiquetas de esta

categoría podrían ser concurso de programación 2010, proyectos sociales,

desarrollo multimedia, feria de aplicaciones móviles, innovación de

software, etc.

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

desarrollan en un artículo o una categoría. En Joomla podemos agregar

categorías desde el manejador de publicación de artículos mientras creamos

un nuevo artículo o atreves de plugins para el CMS.

Articulo

Los artículos son las modificaciones más frecuentes en un sitio web, ya

terminadas las configuraciones de nuestro sitio (menús, categorías,

imágenes, enlaces, plugins, etc.) solo debemos agregar artículos a nuestro

sitio.

Agregamos un nuevo articulo desde la pestaña Contenido > artículos > añadir

nuevo artículo.

54

El manejador de archivos es muy similar a las herramientas de edición de texto de

Microsoft Word. Te aconsejo familiarizarte con la edición de texto de los artículos.

En lado derecho del manejador podemos agregar la categoría del articulo y sus

etiquetas.

55

56

Igual podemos agregar una imagen de cabecera al artículo y decidir el

alineamiento de la imagen.

57

Ahora solo vinculamos nuestro artículo con un elemento de menu y lo

visualizamos en nuestro sitio web.

58

Instalación de plugins en Joomla.

1. Descargamos el plugin desde la siguiente página http://www.joomlaworks.net/,

una vez descargado se instala en el Panel de Control de joomla. En la sección

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 botón Upload & Install.

59

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

Luego se debe dirigir a la sección plugins.

4. En la sección de plugins, habilitamos el plugin en donde está la X.

60

5. Se referenciara el video en el artículo de la página, se guardan los cambios y

se debe cerrar.

6. Y este debe ser el resultado.

61