Idiomas
Páginas
Jurídico
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