1. CMS que permite realizar
páginas web dinámicas e interactivas
Tutorial
Manejo de Joomla
Facultad de Ciencias de la Educación
Humanas y Tegnologías
Escuela de Arte - Diseño gráfico
Docente: Paolo Arévalo
2. Una alternativa para Crear y Gestionar sitios web
2
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
¿Que es Joomla?
Introducción
Joomla es un Sistema de Gestión de
Contenidos (CMS) Sistema de manejo de
Contenidos, reconocido mundialmente, que le
ayuda a construir sitios web y otras aplicaciones
en línea potentes. Lo mejor de todo, es que
Joomla es una solución de código abierto y
está disponible libremente para cualquiera que
desee utilizarlo.
¿Qué es un Sistema de Gestión
de Contenidos (CMS)?
Un CMS es un sistema de software para
ordenador que permite organizar y facilitar la
creación de documentos y otros contenidos de
un modo cooperativo.
Con frecuencia, un CMS es una aplicación web
usada para gestionar sitios web y contenidos
web.
¿Que podemos hacer con Joomla?
Con Joomla podremos crear: sitios web
corporativos, intranets y extranets, tiendas
virtuales, revistas digitales y cualquier otra cosa
que se nos pase por la cabeza.
CONOCIMIENTOS BASICOS
HTML - Lenguaje Hipertextos
CSS – Hojas de Estilo en Cascada
PHP – lenguaje de Programación Web
MYSQL – manejo de Base de Datos
PHPMYADMIN – Utiliza el MYSQL
SESION FTP – Realiza traspaso de archivos
de manera Remota
Conceptos Necesarios
Usuarios de Joomla
Un Usuario de Joomla tiene una serie de
permisos predefinidos, es decir las tareas que
puede realizar. Por eso, en el contexto de
gestión de un sitio web, dependiendo del
modo en que el propietario del sitio quiera
delegar las responsabilidades, se definirán unos
u otros tipos de usuarios Joomla.
Por ejemplo, un propietario puede tener a una
única persona administrando todos los aspectos
del sitio web. En este caso se crearía un usuario
Súper Administrador.
En otro caso, un propietario puede querer
tener el control sobre la publicación del
Contenido creado por otro y que las tareas de
Administración sean responsabilidad de una
persona diferente. En este caso, se crearía una
cuenta de Autor para la creación de contenidos,
una cuenta de Supervisor para la comprobación
y publicación de los contenidos y una cuenta de
Súper Administrador para mantener el diseño
de la Plantilla, la configuración de Componentes
y Módulos del sitio.
COMO SE PUEDE TRABAJAR
EN JOOMLA
Servidor de Prueba ( LOCAL)
Proveedor de Hosting (REMOTO)
3. 3
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
SERVIDOR DE PRUEBAS LOCAL
Descargar un programa en este caso se
denomina WAMP que es acrónimo de:
WINDOWS
APACHE: SERVIDOR WEB
MYSQL: MANEJADOR DE BASE DE DATOS
PHP: LENGUAJE DE PROGRAMACION
Para :
Mac es MAMP
Linux es LAMP
Con esta aplicación WAMP instala en conjunto
todas las aplicaciones (APACHE, MYSQL, PHP,
caso contrario habría que instalar por separado
de una en una.)
Hay diferente software WAMP, el que
utilizaremos para este curso es WampServer
INSTALACIÓN DE JOOMLA EN
SERVIDOR DE PRUEBAS (LOCAL)
(Windows)
http://www.youtube.com/watch?v=ZthWb26O-t8
Para empezar a trabajar en Joomla, primero
debemos tener instalado un servidor local, en
nuestro caso instalamos WampServer. Se puede
descargar de www.wampserver.com
Si WampServer se presenta en (rojo o naranja)
esto quiere decir que no va a correr por lo tanto
no podremos instalar Joomla. Para solucionar
esto nos dirigimos APACHE / httpd.com / en
Listen cambiamos a 80
ServerName de igual manera cambiamos los
valores a 80.
Ahora ya tenemos listo para poder instalar
Joomla.
Recordar la ubicación donde se instala
WampServer.
DESCARGAR JOOMLA
(www.joomlaspanish.org)
Descargamos la versión en .zip
La descomprimimos y le renombramos con
el nombre del sitio que nosotros queramos,
copiamos dentro de la ubicación donde se
intalo WampServer:
Disco Local (C) / wamp / www
Copio la carpeta que renombre.
Wamp debe estar corriendo (verde)
Ahora abrimos el navegador y ponemos lo
siguiente:
Localhost / nombre del sitio, y empezamos
a instalar Joomla o a su vez nos dirigimos a
WampServer y clic a localhost, en Your Projects
nos dirigimos a la carpeta que copiamos
dentro de ( www ) y por defecto empezara la
instalación de Joomla.
INSTALACIÓN DE JOOMLA
Idioma: Spanish
Comprobaciones: Le dejamos por defecto
como esta
Licencia: Siguiente
Configuración de Base de Datos:
Mysql
Hospedaje: localhost
Usuario: root
Contraseña: ninguna
Base de Datos: Damos un nombre
Configuración e FTP: No modificamos nada
Configuración Principal:
Nombre del Sitio
Correo electrónico
Nombre del Administrador: admin (siempre)
Contraseña del Administrador: xxxxxx (nos
4. Una alternativa para Crear y Gestionar sitios web
4
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
nombre del sitio. Se empezara a instalar Joomla.
INSTALACIÓN DE JOOMLA
Idioma: Spanish
Comprobaciones: Le dejamos por defecto
como esta
Licencia: Siguiente
Configuración de Base de Datos:
Mysql
Hospedaje: localhost
Usuario: root
Contraseña: root
Base de Datos: Damos un nombre
Configuración e FTP: No modificamos nada
Configuración Principal:
Nombre del Sitio
Correo electrónico
Nombre del Administrador: admin (siempre)
Contraseña del Administrador: xxxxxx (nos
pedirá al iniciar sesión para poder modificar el
backend)
IMPORTANTE:
(Siempre debemos borrar la carpeta de
instalación)
Clic en Eliminar carpeta de Instalación ó desde
la carpeta web / nombre del sitio / installation
(Borrar)
A partir de ese momento se puede utilizar
Joomla 2.5.8
pedirá al iniciar sesión para poder modificar el
backend)
IMPORTANTE:
(Siempre debemos borrar la carpeta de
instalación)
Clic en Eliminar carpeta de Instalación ó desde
la carpeta C/ wamp / www / nombre del sitio
/ installation (Borrar)
A partir de ese momento se puede utilizar
Joomla 2.5.8
INSTALACIÓN DE JOOMLA EN
SERVIDOR DE PRUEBAS (LOCAL)
(Mac)
http://www.youtube.com/watch?v=ZthWb26O-t8
Descargar MAMP del siguiente enlace
http://www.mamp.info
Instalamos MAMP
Abrir MAMP y modificar estos valores en
Preferencias.
Puertos:
Puerto Apache: 80
Puerto MySQL: 3306
Apache: Cambiamos la ubicación a la carpeta
web.
Debe estar en verde Servidor Apache y Servidor
MySQL para poder instalar Joomla
DESCARGAR JOOMLA
www.joomlaspanish.org
Descargamos la versión en .zip
La descomprimimos y le renombramos con
el nombre del sitio que nosotros queramos,
copiamos dentro de la carpeta web. Abrimos
nuestro navegador y ponemos: localhost /
5. 5
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
INSTALAR JOOMLA EN ESTE
SERVIDOR
El FTP permite transferir archivos de nuestra
computadora al servidor 000webhost.
Enprimerlugarnosvamosawww.000webhost.
com y en la parte derecha en el menú de
opciones, members área, nos pide el email
con el que nos dimos de alta y la contraseña y
capturamos el captcha que aparece. Clic en panel
de control y clic en view acount detail,
esta opción contiene datos importantes en la
zona de File Upload Details aparece FTP user
name y FTP password (el password aparece
con asteriscos pero es el mismo que pusimos al
momento de crear el dominio) es importante
anotar el dato de FTP user name y también el
FTP host name.
INSTALACION DE FILEZILLA
Buscamos en el explorador filezilla client lo
descargamos y procedemos a instalar.
Una vez abierto Filezilla, nos vamos archivo
Gestor de Sitios / Nuevo Sitio y damos
un nombre al sitio, ahora en servidor ponemos
el nombre de dominio (joomlaunach.comyr.
com) el dato de protocolo y cifrado lo dejamos
como esta. En modo de acceso cambiamos a
normal, en usuario copiamos el FTP User Name
y la contraseña ponemos la que al momento de
registrarnos pusimos. Le damos Aceptar. En el
icono debajo de archivo le damos a la pestaña y
aparecerá el sitio, le damos clic y se conectara si
todo está correcto.
La parte derecha es el árbol de directorios
de (joomlaunach.comyr.com). Es decir las
transferencias se realizaran de la computadora
local, al servidor remoto. La carpeta que más
nos interesa es public.html. Ahí es donde
INTALACIÓN DE JOOMLA EN
SERVIDOR REMOTO
Lo primero es contratar un servicio de hosting,
ya sea de pago o gratuito.
La ventaja de los hosting de pago es que
podemos escoger a nuestro gusto el dominio,
puede ser .com .ec .es, etc. Dependiendo el
país en que se encuentre nuestra empresa o
servicio.
Hay servidores gratuitos, en los cuales debemos
aceptar el dominio que arroja el sistema.
SERVICIO DE HOSTING GRATUITO
Registro de un dominio gratuito
en un hosting gratuito
www.000webhost.com
El hosting gratuito que ofrece webhost tiene
un buen ancho de banda y espacio suficiente,
además de contar con panel de control y con
cuentas FTP para poder realizar transferencia de
archivos. Damos en el botón inferior y Ordenar
ahora, aparece una pantalla en la que debemos
registrarnos, en ella ponemos el url con la que
aparecerá nuestro sitio en este caso webhost
nos da automáticamente el dominio, colocamos
un email y una contraseña de al menos 6
caracteres.
Aceptamos condiciones.
Accedemos a nuestro email y confirmamos el
registro, damos clic en el enlace y en Status
aparecerá Activo, además de que podemos
acceder a nuestro panel de control. Ahora
si abrimos una pestaña nueva y ponemos
la dirección url con la que creamos nuestro
dominio, nos aparecerá una ventana diciendo
que solo tenemos un archivo default.php.
6. Una alternativa para Crear y Gestionar sitios web
6
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
se copiaran todos los archivos de instalación de
Joomla.
TRANSFERIR ARCHIVOS AL FTP
(Filezilla)
Antes que nada eliminamos el archivo default.
php.
Descomprimimos el instalador de Joomla.
Nos ubicamos en el directorio de nuestra
computadora y buscamos los archivos que se
descomprimieron del instalador de Joomla y
arrastramos al directorio Remoto.
Este proceso puede tardar varios minutos,
debemos estar pendientes a ver qué tipo de
mensajes nos muestra. Una vez que haya
terminado de subir los archivos al servidor
remoto, abrimos el navegador y ponemos la
dirección de dominio (www.joomlaunach.
comyr.com) y empezara la instalación de
Joomla. Antes de pasar a crear la base de datos
en la instalación de Joomla debemos acceder a la
página www.000webhost.com y hay que crear
una base de datos en este caso 000webhost
tiene un menú que es Software y Servicios
Ingresamos a MySQL y es ahy donde vamos
a crear una base de datos:
MySQL database name: uweb
MySQL user name: root
Passwoord: xxxxxxx
Es importante guardar en bloque de notas toda
esta información, ya que al momento de la
instalación de Joomla nos pedirán estos datos.
La instalación es igual a la de un servidor local,
una vez finalizada la instalación debemos borrar
la carpeta de instalación; nos dirigimos al filezilla
al directorio remoto y borramos la carpeta
Instalation. Y ya podremos ingresar al back-end
y al fron-end.
BACKEND Y FRONTEND
Después de la instalación, en Joomla podemos
encontrar dos partes bien diferenciadas, el
front-end y el back-end.
El primero front-end es la parte pública
del CMS, la web que verá el usuario final.
Para acceder a esta web bastará con escribir
el nombre de nuestro dominio en la barra de
direcciones del navegador (http://midominio.
com).
El back-end es la parte privada de Joomla,
solo los administradores del sitio tendrán acceso
a esta sección. Desde aquí gestionaremos todos
los aspectos de nuestra página, crearemos
los contenidos, administraremos usuarios,
etc. El acceso lo realizaremos igual que en el
caso anterior, escribiendo en el navegador
la dirección de nuestra página seguida de la
palabra “administrator” (http://midominio.
com/administrator).
CAMBIAR IDIOMA JOOMLA
Joomla por defecto se instala en Ingles, para
modificar el idioma los pasos a seguir son los
siguientes:
Language Manager
Install Language
Seleccionamos Spanish
Install
Log out
Volvemos al menú de ingreso a Joomla y en
Language cambiamos Default por Spanish
7. 7
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
PERMISOS DE CARPETAS
Si no tiene permiso no deja subir archivos,
plantillas. Para poder subir todos los archivos,
debemos realizarlo a travez de nuestro servidor
en Filezilla. Seleccionamos del directorio Remoto
la carpeta Administrator, clic derecho Permisos
de Archivos / Hay que dar acceso total a estas
carpetas. Tambien se lo puede hacer atravez
de www.000webhost.com, accedemos a
members área e ingresamos a go to panel
y vamos a File Manager, este nos muestra la
estructura de nuestra pagina, y si deseamos
cambiar los permisos alguna carpeta del sitio,
la seleccionamos y click a CHMOD y aparecen
los permisos de la carpeta y seleccionamos los q
faltan y damos clic a submit y aceptamos.
De estas dos maneras se pueden modificar los
permisos de las carpetas.
ESTRUCTURANDO EL SITIO
Lo primero que debemos llevar a cabo, es
realizar un análisis de que información vamos a
presentar a nuestros usuarios, esto depende de
la información que la empresa desee mostrar.
Es muy importante hacer un bosquejo de cómo
se va a estructurar el sitio, para luego ir creando
las categorías que posteriormente veremos.
CREACION DE CATEGORIAS
Es necesario primero crear las categorías y
luego los artículos, Las categorías se crearan
de acuerdo a las necesidades que vayamos a
presentar en nuestro sitio.
Para Crear categorías, nos ubicamos en
Administrador, luego Gestor de Categorías /
Nuevo, ahí damos ciertos parámetros para
PLANTILLAS
La ventaja de diseñar páginas web con joomla
es el uso de plantillas.
Son programas diseñados con PHP, CSS,
HTML, la ventaja que nos da el uso de las
plantillas es que nuestra página va a estar
estandarizada, ya sea en colores, tipografía.
(Son formatos prediseñados)
Página recomendada es www.joomla24.com
Se debe descargar plantillas para la versión
que corresponde, ya que a diferencia de otras
versiones, están manejan distintos conceptos
respecto a las posiciones en la plantillas.
Gestor de extensiones
Extensión puede referirse a:
Plantilla, Modulo, Pluging o puede ser un
componente.
Subir Paquete
Seleccionamos el archivo (plantilla) / Subir e
Instalar
Cargar Plantilla
Extensiones / Gestor de Plantillas, es donde se
instala la plantilla y se elige que estilo queramos
dar al front-end, Establecemos por defecto para
poder aplicar a nuestro sitio.
Clic en Plantilla y Editar, encontramos varias
opciones, es lo que se puede editar. Si queremos
modificar necesitamos un software para editar
plantillas.
Opciones Plantillas:
Dentro de la pestaña plantillas, activar vista
previa de las posiciones de los modulo. Guardar
y cerrar.
8. Una alternativa para Crear y Gestionar sitios web
8
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
poder identificar a cada una de las categorías
que vayamos creando.
GESTOR DE ARTICULOS
Cuando ingresamos a Gestor de artículos
nos aparecen varias opciones, en la parte
superior encontramos los botones de opciones
de artículos: (Nuevo – Editar – Publicar
– Despublicar – Destacados (ventana
principal)– Archivo (Artículos que no deseo
que se publiquen los archivo para luego poder
publicar) – Comprobar ( Comprueba status del
articulo) – Papelera – Opciones – Ayuda )
En la parte inferior tenemos tres pestañas:
Artículos – categorías y Artículos Destacados
Ahora vamos acceder a un articulo Nuevo,
si podemos observar tenemos un editor de
texto muy básico. Antes que nada como
recomendación es cambiar el editor de texto,
para eso no dirigimos a Editor de Pluggins y
editamos el editor TinyMCE y en Opciones
Básicas Funcionalidad: Cambiamos a
Extendido.
Una vez modificado nuestro editor de texto,
podemos empezar a crear los artículos
CREAR Y PUBLICAR ARTICULOS
Al momento de crear un artículo tenemos
varios parámetros que debemos dar:
Titulo:
Alias
Categoría: Aquí es donde elegimos a que
categoría queremos que pertenezca el articulo.
Estatus: Publicado – Despublicado – Archivo
– Eliminar
Acceso: Public – Registered – Special
Permisos:
Destacados: No – Si
Idioma:
Id.
Formatos de Encabezado
En los títulos y subtítulos es importante que
estén con encabezados, ya que para los
buscadores es mas fácil poder ubicarles, no
hay que abusar de tipos de fuentes ya que el
buscador lo reconocerá como spam.
Insertar Tablas
Un elemento mas utilizado al momento de
crear un articulo son las tablas.
Se puede editar el contenido en Word y luego
copiar y pegar a Joomla dentro de la tabla
Para combinar celdas hay que seleccionar las
dos celdas y click en la opción vincular celdas
Insertar Imágenes
Para poder insertar imágenes, antes debemos
haber subido a nuestro servidor FTP ( en la
carpeta public.html / images /podemos crear
una carpeta para colocar cada una de nuestras
imágenes (botón derecho – crear directorio –
damos un nombre) a estar carpeta creada es
donde vamos a copiar todas las imágenes que
vamos a incluir en el proyecto.
Crear Hipervínculos en el texto
Para poder crear hipervínculos en algún articulo,
debemos señalar el texto que queremos
hipervincular y click en la opción de la cadena
(Inser/Edit Link), y ponemos el url al que
deseamos vincular
9. 9
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
carpeta y archivos que se vayan a descargar
Opciones de Artículos
Eliminar Datos que están por Default
Si queremos eliminar los datos que aparecen
en cada artículo (ejemplo categoría – fecha
de publicación – autor – Nº de veces vistos)
nos dirigimos al Gestor de Artículos – opciones
y ocultamos los datos que no queremos que
aparezcan.
Estas opciones se pueden dejar de acuerdo al
criterio de cada uno.
Opciones Metadatos - Agregar datos SEO
(Optimización de Motores de
Búsqueda)
En la meta descripción es describir una parte
de nuestro artículo, se recomienda hacer una
descripción diferente a lo que está en el artículo.
En meta palabras se utilizan palabras clave
separadas por una coma.
Estructurar Menú
Si tenemos artículos destacados los eliminamos
del gestor de artículos – destacados, no se
borran los artículos, solo se desactivan de
destacados. O lo desactivamos en el icono de
destacados
Para ello lo hacemos desde el Gestor de Menú,
ahí tenemos Menús y Elementos del Menú.
Para ocultar o cambiar el titulo hay que dar clic
en (Modos Enlazados con el Menú), aparecen
una serie de opciones, en Mostrar titulo lo
ponemos oculto. Todas las plantillas tienen
posiciones, es decir donde se van a colocar el
Anclas en Artículos
Cuando tenemos artículos demasiados largos,
utilizamos las barras de desplazamiento pero
para evitar desplazarnos podemos anclar a
cada parte del artículo, para esto señalamos el
texto donde queremos colocar el ancla- click en
ancla (anchor) y ponemos el nombre_ancla,
o utilizamos la nomenclatura que nosotros
deseamos.
Ahora señalamos la imagen o el botón y clic
en hipervínculo y seleccionamos en la opción
de ancla. En esta opción estarán las anclas
que creamos anteriormente. De igual manera
podemos colocar anclas en los textos y vincular
para que se dirija al principio del artículo.
Leer Más
En el Editor de texto de artículos se encuentra
una opción interesante que es la de leer mas.
Esta nos sirve para artículos demasiados largos,
lo único que debemos hacer es ubicar el cursor
de texto en la parte donde queremos que el
texto se corte y aparezca la opción de leer mas.
Descargas
Para poder realizar descargas para nuestros
usuarios debemos ingresar a nuestro servidor
FTP, y creamos una carpeta descargas en public.
html, y es ahí donde copiaremos los archivos
que vamos a compartir con nuestros usuarios.
Ahora señalamos el texto o la imagen que
queremos dar el hipervínculo de descarga y
damos a la opción Crear/Editar Hipervínculo y
copiamos el url de donde se encuentra el archivo
que queremos que nuestro usuario lo descargue
en ese caso sería: http://joomlaunach.comyr.
com/descargas/nombre de archivo. Siempre
empezara por http:// y posteriormente el
nombre de cada uno de sus sitio y nombre de
10. Una alternativa para Crear y Gestionar sitios web
10
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
menú dentro de nuestra plantilla, para que
aparezcan las posiciones hay que colocar este
código luego del url en la barra de navegación
/tp1. - Status publicado. Acceso público y las
demás opciones por default.
Elementos del Menú
Aparece la información de nuestros menús –
status – orden – acceso – tipo de elemento del
menú – (inicio es el menú por default) – clic
en el menú inicio, lo que nos interesa es lo que
se encuentra en la parte derecha. Y podemos
seguir añadiendo menús y elementos de
menús.
Contactos y Registros
Para crear un contacto, al que posteriormente
se le envíe un formulario de contacto los pasos
son los siguiente:
Componentes – Contactos - Categorías y
creamos la categoría. Posterior a esto vamos a
Componentes - Contactos le asignamos a la
categoría que anteriormente se creo. Damos los
datos necesarios en detalles de contacto.
Una vez creado el contacto nos vamos a gestor
de menú y creamos un elemento de menú,
pero en vez de poner artículo simple ponemos
contacto único. (Si solo deseamos que a un
solo contacto se le envié el formulario) también
podemos asignar a varios contactos dentro de
una categoría.
En Joomla por defecto nos viene un modulo
instalado que es (formulario de acceso) este
modulo nos sirve para que nuestros usuarios se
puedan registrar. A los usuarios que se registran
les llegara un email de confirmación y al súper
usuario de igual manera un email indicando
que se ha registrado un usuario. La ventaja de
usuarios registrados es que pueden acceder a
información solo para usuarios registrados.
Posición de Módulos en Plantillas
En Joomla se consideran posiciones para cada
una de las extensiones, para poder realizar esto
es necesario colocar este código en la barra del
navegador ?tp=1 con este código podrán
observar cada una e las posiciones que tiene la
plantilla.
Gestor de Módulos
La comunidad de Joomla tiene varias páginas
donde se pueden descargar diferentes
extensiones que contienen módulos útiles al
momento de realizar el diseño de nuestro sitio.
Desinstalar módulos
Para desinstalar los módulos de Joomla,
Seleccionamos el módulo y borramos una vez
que lo borramos, seleccionamos el estado,
y vaciar papelera, el modulo se borrara del
Gestor de Módulos, pero no se ha desinstalado,
para ello nos vamos a Gestor de Extensiones
(gestionar) hay aparecen todas la extensiones
que estamos utilizando en Joomla, buscamos
el modulo que deseamos desinstalar y clic en
desinstalar
Instalar módulos por defecto
Ahí otros módulos que trae Joomla por defecto,
para ello nos vamos al Gestor de módulos y
Nuevo, encontraremos varios módulos que
viene por defecto en Joomla.
11. 11
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
Extensiones Joomla
Para distinguir los nombres de los archivos
estos vienen al principio con una palabra que
la distingue por ejemplo los componentes viene
con la palabra com componente y los módulos
mod, los plugins plg
Joomla contaba con una extensión para realizar
encuestas pero por problemas que tenia la
comunidad de Joomla lo decidió quietarlos
Las extensiones de Joomla la
conformas:
Componentes: Por ejemplo un tienda
virtual, las ventajas de los componentes es que
los usuarios hacen uso de ellas. En el ejemplo
de la tienda virtual el administrador administra
todo.
Módulos: No es una aplicación tan completa
como es el componente, nos sirve para visualizar
cierta información por ejemplo mostrar videos e
YouTube, banners. A diferencia del componente
el usuario puede interactuar con estos módulos.
Plugins: Trabajan mas a nivel de artículos,
no se los puede colocar en una posición dentro
de la plantilla. Dentro de un articulo de puede
instalar un plugins. Solo trabaja a nivel del
articulo.
Descargar Extensiones
www.extensions.joomla.org
Esta es una pagina que la comunidad de
Joomla es la que mantiene hay podremos
encontrar extensiones de Joomla (módulos,
componentes, plugins)
Como recomendación pueden registrarse en el
foro de www.joomlaspanish.org en este foro
pueden encontrar varias recomendaciones.
Jvote System
Encuestas con Jvote System
Nos dirigimos a www.extensions.joomla.
org y en la opción de búsqueda tecleamos
polls y descargamos Jvotesystem. Una vez
descargada esta extensión no vamos al back-
end. Lo subimos e instalamos desde Gestor de
Extensiones, nos aparecerá un mensaje de que
se instalo correctamente, para verificar que la
extensión se instalo correctamente damos click
en componentes y estará ahí el componente
jvotesystem.
Damos clic en JVotesysten y accedemos. Tiene
un panel de control y varias pestañas y el botón
de opciones para poder configurar.
Para empezar, creamos una categoría de
nuestras encuestas. Clic en botón categorías
y rellenamos los datos, las demás opciones la
dejamos por default. Guardamos y cerramos.
Nos vamos a Vista Global y Clic en New
Poll (nueva Encuesta) rellenamos los datos
y ponemos una pregunta, ejm ¿Cual es el
mejor equipo del Ecuador? luego tenemos
espacios para varias opciones de respuesta. El
jvotesystem nos permite que nuestros usuarios
puedan agregar una respuesta, esto se lo puede
hacer en la pestaña de configuración.
Una vez que ya tenemos creada la pregunta
entra en acción el módulo, si nos dirigimos a
extensiones / gestor de módulos observamos
que tenemos el módulo de JVoteSystem
estará despublicado accedemos a el modulo
y cambiamos a publicado y la posición que
deseamos que ocupe en la plantilla, además
en la asignación del modulo hay que decirle
que este asignado en todas las paginas, caso
contrario asi este publicado no aparecerá en
12. Una alternativa para Crear y Gestionar sitios web
12
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
Componente swMenuFree
Nos dirigimos a la web www.extensions.
joomla.org y lo descargamos (swMenuFree).
Subimos e Instalamos en Gestor de Extensiones.
Una vez instalado el componente nos vamos a
Componentes y encontraremos el componente
swMenuFree, damos clic y podemos ingresar a
cada una de las opciones que nos brinda este
componente. Para poder modificar el menú
que por defecto tenemos en la plantilla nos
vamos al Gestor de Módulos y al Main Menú
lo despublicamos (es el que por defecto nos
brinda la plantilla) y al módulo swMenuFree
lo publicamos, pero antes que nada debemos
saber en que posición lo vamos a ubicar,
también hay que activar Mostrar en todas las
paginas, caso contrario no aparecerá así este
publicado.
El módulo swMenuFree tiene varias pestañas
en las cuales podremos modificar la posición del
menú, ya sea horizontal o vertical, el tamaño
del menú, el fondo del menú al igual que los
del submenú, el color y tamaño de letra, los
bordes y esquinas del menú. Modificando cada
una de las opciones de swMenuFree podemos
adaptar a nuestra necesidad el menú.
Para cambiar el fondo a los menús hay que
copiar las imágenes en nuestro sitio remoto
(modules/mod_submenu/free/images)
también pueden crear una subcarpeta y copiar
en esta ubicación.
ALLVIDEO
Agregar Videos con ALLVIDEO
Lo descargamos de la web www.extensions.
joomla.org no redijira a la pagina de ALLVIDEO
http://www.joomlaworks.net/extensions/
free-premium/allvideos y en la parte inferior en
Available Releases descargamos la versión para
la cual estemos trabajando.
En Gestor de Extensiones lo instalamos y nos
vamos a Gestor de Plugins este trabaja mas
a nivel de artículos si se fijan no hay posición
donde ubicarlo. Buscamos el plugins (AllVideos
(by JoomlaWorks)), para poder trabajar con
un plugins hay que publicarlo, entramos en
ese plugins y vemos las opciones que nos
proporciona.
Ahora Creamos un nuevo articulo, en el
editor de texto es donde entra lo que son los
plugins. Lo primero que debemos saber es
en que ubicación se encuentra nuestra video
copiamos la identificación del video es decir la
parte final del url (el identificador del video es
desde el signo Igual = la parte final del url). Las
instrucciones se pone entre llaves y al final hay
que cerrar las llaves más el signo de (/) ejm.
{youtube}1y4KaQXA3aQ{/youtube}
Este seria el caso para un video subido en
youtube, si el video se encuentra en flickr u
otros cambiaría el código y las palabras clave
ejm. {flickr }identificador de video{/ flickr }
Extensiones Google Maps
Antes debemos tener una cuenta en gmail para
poder hacer uso de estas extensiones
Lo descargamos de la web www.extensions.
joomla.org y en el motor de búsqueda
ponemos googlemaps, el plugins que en este
caso utilizaremos es Googlemaps Plugin y
descargamos el fichero plugin_googlemap_
J25_J30.2.18.zip, ahora vamos a descargar la
siguiente extensión Ultimate Google Adsense.
Instalamos las dos extensiones que acabamos
de descargar.
13. 13
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
Nos vamos al Gestor de Plugins y nos vamos
a Google Maps, lo Habilitamos, en la parte
derecha tenemos varios aspectos para modificar.
Para poder usar este plugin debemos tener un
API key. Para poder tener una API key debemos
tener una cuenta en gmail y en esta dirección
podemos solicitar el API key:
https://developers.google.com/maps/documentation/
javascript/tutorial#api_key
Unavezqueyaingresamosalaurlanteriormente
citada nos vamos a Obtaining an API Key, ahy
se encuentran los paso para poder crear una
API Key
Sin el API Key no se puede acceder a este plugin,
copiamos el API Key que al momento de crear
en el url anterior nos arrojó. En Googlemaps
API Key copiamos este dato en Googlemaps
API Key. Los datos importantes que debemos
tener en cuenta es Ajustes de Localización, para
obtener estos datos nos vamos a Google Maps
y en el icono de enlace tenemos las coordenadas
copiamos la latitud y longitud, y nos vamos al
back-end y en Ajustes de localización ponemos
los datos de longitud y latitud
Latitud Riobamba: -1.678243
Longitud Riobamba: -78.641478
Ahora nos vamos al articulo donde queremos
insertar el mapa ponemos la palabra clave
{mosmap} y lo aplicamos.
All Music Player
Igual que los componentes, módulos y
plugins que hemos visto hasta el momento,
lo descargamos de la pagina www.extensions.
joomla.org y se descargara el modulo y el
plugin, vamos a instalar el modulo, una vez
instalado nos dirigimos al gestor de módulos
lo publicamos y seleccionamos en que posición
queremos que se ubique el modulo, de igual
manera la asignación del modulo, esta debería
ir en todas las paginas. En la parte derecha
tenemos las opciones básicas, el dato que nos
interesa es el de Music Data. Es ahí donde
colocaremos el titulo de la canción seguido de
una coma y la ubicación del archivo mp3, es
decir (title,http://misitio.comlu.com/carpeta
music/archivo.mp3)
Slide 3D Vinaora Cub3er
Instalamos el modulo, y en la carpeta media
/mod_vinaora_cu3er_3d_slideshow / images
/ demo1 / se encuentran las imágenes que
hay que modificar.
Editor JCE Componentes y Plugin
Descargamos el componente JCE desde la
web http://www.joomlacontenteditor.net.
Descargamos el componente JCE y el plugins
JCE Media Box, este nos servirá para realizar
ventanas popupsya sea en videos, imágenes.
Una vez descargado el componente y el Plugin,
lo instalamos desde el Gestor de Extensiones,
comprobamos que el componente y el Plugin
este activado (Gestor de Módulos y Gestor de
Plugin – System – JCE MediaBox lo publicamos)
y empezamos a trabajar con JCE.
Menu Rollover con JCE
Para poder trabajar con el componente JCE, nos
dirigimos a mi perfil y modificamos el editor
al Editor JCE una vez hecho esto nos vamos
al Gestor de Módulos – Nuevo – Personalizar
HTML,Enlosparámetroscolocamosunnombre
y la ubicación que deseamos, una vez hecho
eso click en el icono de imágenes y subimos las
imágenes en upload, En esta ventana tenemos
varias opciones como son. Image – Rollover –
14. Una alternativa para Crear y Gestionar sitios web
14
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
TRABAJAR CON LAS PLANTILLAS
TEMPLATES
Todas las plantillas que instalamos a través el
gestor de extensiones, se encuentran en la
carpeta Templates, dentro de cada template
tenemos varios archivos como es la carpeta
css (estilos de hojas en cascada) js ( java scrip)
images ( imágenes que contiene la plantilla)
además esta el archivo (favicon.ico) es el
icono que se encuentra cuando visualizamos
el sitio en nuestro navegador. El archivo index.
php es donde se guarda todos los datos
de nuestra plantilla. templateDetails.xml,
guarda información de la plantilla. No todas
las plantillas guardan esta estructura. Habra
ocasiones en las que las plantillas tiene otros
archivos para que funcionen correctamente la
plantilla. Es recomendable guardar un respaldo
de toda plantilla en nuestro disco duro.
FAVICON (cambiar icono)
PordefectonuestrositiotieneeliconodeJoomla,
para modificar nos vamos a Google y buscamos
(irfanview) www.irfanview.com. El irfanview
no ayuda a poner las dimensiones de 16 x 16
px que es lo que nos pide joomla. Una vez que
abrimos la imagen que deseamos establecer
como favicon en irfanview lo guardamos con
la extensión .ico y reemplazamos por la que
Joomla tiene por defecto.
Descargar el software php designer este nos
sirve para poder modificar el index.php y los
estilos css, si deseamos personalizar au mas
nuestra plantilla.
Cambiar Header
Para poder realizar los cambios hay que saber
cuales son las imágenes que integran el header.
Advanced, es ahí donde damos los parámetros
de configuración para rollover, tamaño, url. Etc.
Ventana Popups con plugins JCE
Para insertar videos de YouTube en ventanas
emergentes, copiamos el enlace en url,
señalamos el objeto o texto que vamos a
enlazar, clic en link/enlace, en Url copiamos
el enlace, también podemos seleccionar un
enlace que se encuentre en nuestro sitio, ya
sean estos artículos, menús, una vez que
tenemos ya enlazado el objeto seleccionamos
el tipo de Popups (JCe MediaBox) colocamos
varios parámetros que nos pide y ya tenemos
una ventana emergente. Tambien podemos
modificar el color de fondo, para ello nos vamos
a Componentes seleccionamos JCE y click en el
plugin JCE MediaBox.
Galeria de Imágenes con plugin JCE
Trabajamos como si fuera un articulo, Clic en
el icono de Imágenes, en URL insertamos la
imagen que deseamos, luego en Advanced en
la opción Classes le asignamos una clase (ejm
1) asi sucesivamente vamos insertando las
imágenes que queremos que pertenezcan a una
galeria. Luego de que hayamos terminado de
insertar las imágenes y asignarles la misma clase
a todas (ejm 1 classes1) señalamos la imagen
y clic en el icono de enlace en la opción Link
en el icono Browse ubicamos la misma imagen,
posteriormente en la opción Popups en Group
le ponemos el mismo nombre que asignamos
en Classes (ejm 1), asi sucesivamente con todas
las imágenes para la categoría 1.
15. 15
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
nueva base de datos (con el mismo nombre
de la base de datos que exportamos) una vez
creada, vamos a importar y seleccionamos el
archivo, clic en continuar, es todo para importar
la base de datos, hay que tener presente que
para migrar un sitio hecho en Joomla hay que
copiar la carpeta raíz donde se encuentran
todos los archivo e importar la Base de Datos.
Gestor de Usuarios
En el Panel de Control tenemos la opción de
gestor de Usuarios, es ahí donde podemos
gestionar a todos los usuarios que previamente
se registran en nuestro sitio. En la parte inferior
del panel tenemos la opción de Grupos
Asignados, dependiendo del sitio que estemos
publicando podemos cambiarle al usuario, ya
sea como Autor, Editor, para que puedan añadir
contenido a nuestro sitio. Es recomendable
gestionar de manera adecuada a nuestros
usuarios para que no existan problemas de
publicación de contenidos, ya que puede haber
contenidos que nosotros no queramos publicar.
Configuración Global
Dentro del panel de Control de Joomla tenemos
la opción de Configuración Global, que nos
perímete configurar parámetros de Joomla.
Dentro de Configuración Global tenemos varias
pestañas:
Sitio – Sistema – Servidor – Permisos – Filtros de
texto; por lo regular la mayoría de parámetros
quedan por defectos, algunos podemos
configurar.
Sitio:
Nombre de sitio (barra del título en el
navegador) debemos poner un nombre
identificativo al sitio.
Para ello ingresamos desde gestor de plantillas
y la plantilla que tenemos por defecto. Esto no
sucede para todas las plantillas, solo en algunos
casos, como se puede observar en la plantilla
Beez2, en opciones avanzadas tenemos
varias opciones para poder cambiar el logo, la
descripción del sitio.
Base de Datos.
La base de datos de Joomla esta compuesta por
tablas,lastablastieneun prefijoyestonoayudara
a identificar tablas que pertenezcan a Joomla y
tablas que pertenezcan a las extensiones. Estas
tablas almacenan la información del back-end
y front-end. Es necesario tener un respaldo
de la base de datos ya que contiene toda la
información de los artículos y más.
Exportar Base de Datos
Para exporatr una base de datos, cuando
estamos trabajando en un servidor de pruebas
local, los pasos a seguir los siguientes:
Nos dirigimos al icono de wamp server
y seleccionamos local host, una vez que
ingresamos nos dirigimos a php myadmin, ahí
encontraremos todas las bases de datos que
hemos creado, seleccionamos la base datos que
vamos a exportar, una vez que ingresamos a la
base de datos, clic en exportar, seleccionamos
todo, y activamos la opción Añada DROP
TABLE / VIEW PROCEDURE / FUCTION /
EVENT, en Compresión – ninguna y Continuar,
guardamos en la ubicación que nosotros
deseamos.
Importar Base de Datos
Para importar una base de datos debemos tener
identificado nuestro archivo que exportamos
antes, para importar la Base de Datos de igual
manera vamos a PHP myadmin, creamos una
16. Una alternativa para Crear y Gestionar sitios web
16
Esuela de Arte - Diseño Gráfico / Docente: Paolo Arévalo
Sitio Desactivado: Es cuando nuestro sitio
este desactivado, ya sea por cambio de diseño e
identidad de página. Podemos poner un texto
o una imagen.
Nivel de Acceso: debe ser público para que
nuestro sitio pueda ser visitado en general por
todos los usuarios de la web.
Límite de Listas por defecto. Es cuando
gestionamos los diferentes ítems. Módulos –
artículos, etc.
Configuración SEO, lo dejamos por defecto.
Configuración de Metadatos:
Descripción más completa del sitio, utilizar
palabras clave para que los buscadores no
tengan en cuenta al momento de realizar
búsquedas.
Sistema:
Tenemos opciones como la ayuda de Joomla
(esta en ingles aunque trabajemos en español)
también encontramos la Configuración de
Sesión, esta nos sirve para poder cambiar
el tiempo se sesión activa. Las demás
configuraciones las dejamos por defecto.
Servidor:
Configuración del Servidor:
Ruta de la carpeta temporal, es donde
almacenamos todos los archivos que componen
nuestro sitio.
Forzar SSL, es un sistema de seguridad pero
solo lo podemos utilizar si nuestro servidor tiene
activa esta opción.
Configuración de Base de Datos:
Tenemos toda la configuración de la Base de
Datos, si en algún momento necesitamos saber
los datos.
Configuración Email:
A diferencia de cuando un usuario contacta con
nosotros recibimos en una dirección email. En
la Configuración Email determinamos el correo
email de salida de cual nosotros como súper
usuario queremos emitir email ya sean estas
noticias, boletines, etc. Para nuestros usuarios
registrados.
Permisos:
La dejamos por defecto, no hay necesidad de
modificar nada.
Filtro de Textos:
Dejamos por defecto.
Es importante saber acerca de estas
configuraciones, ya que si modificamos algún
parámetro de manera incorrecta corremos el
riesgo de que nuestro sitio deje de funcionar.
Actualizaciones
Joomla a partir de la versión 2.5 tiene la opción
de actualizar directamente las extensiones
que tenemos instaladas. También tenemos la
actualización de Joomla, nos aparecerá la versión
más reciente (versiones 2.5) y podemos instalar
directamente, es recomendable hacer de esta
manera antes que de FTP, ya que por medio
de un servidor FTP es un proceso mas largo. Es
importante realizar las actualizaciones en línea.