Gente detrás de este libro
Escritores
Dao Ngoc Anh Bui Thi Mo
Editores
Nguyen Thi Thanh Huyen Bui Anh Tuan Bui Huy Thang
Diseñadores
Ho Huy Tung Luu Minh Son
Traducción al español
Daniel Hacohen Sergio Rocha
Fecha de Publicación: Julio 2013
Tercera Edición.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
3
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
4
Contenidos
Gente detrás de este libro ............................................................................................................................... 2
Contenidos ........................................................................................................................................................... 4
Características del Joomla! 3.x ........................................................................................................................ 5
Paso1: conozca el CMS Joomla! ................................................................................................................... 6
¿Qué es el CMS Joomla!? ........................................................................................................................................... 6
¿De qué está hecho Joomla!? .................................................................................................................................... 9
Paso 2: Instalando Joomla! 3.x en su hospedaje local ......................................................................... 26
Instalando XAMPP........................................................................................................................................................ 27
Instalando Joomla! ...................................................................................................................................................... 30
Paso 3: Crear contenido para su propio sitio Joomla! ......................................................................... 32
Preparando la estructura del contenido................................................................................................................. 32
Creando contenido ...................................................................................................................................................... 33
Manejando el contenido con el JSN PowerAdmin .............................................................................................. 49
Hacer que los artículos se vean bien ...................................................................................................................... 50
Paso 4: Personaliza la apariencia de tu sitio web con una Plantilla Joomla!................................ 77
¿Qué es una plantilla Joomla!? ............................................................................................................................... 77
Seleccionando una plantilla Joomla! ...................................................................................................................... 79
Instalando la plantilla Joomla! .................................................................................................................................. 81
Paso 5: Ordenando los módulos en posiciones ............................................................................................. 86
¿Qué es un módulo y su posición en Joomla!? .................................................................................................. 86
Agregando un nuevo módulo a una página ............................................................................................................. 90
Paso 6: Entendiendo la funcionalidad del sitio con las Extensiones Joomla! ............................. 97
Trabajando con la extensión por defecto de “Contactos” ............................................................................... 98
Agregando nuevas extensiones ............................................................................................................................... 109
Paso 7: Gestiona tu página web Joomla! con JSN PowerAdmin .................................................... 114
Gestiona tu sitio web Joomla! con “Gestor de Sitios” (Site Manager ) ....................................................... 117
Acceso rápido a cualquier elemento con Búsqueda de Foco (Spotlight Search) .................................... 130
Maneja el estilo de la plantilla con el Gestor de Estilo de Plantilla (Template Style Manager) .............. 132
Otras características ................................................................................................................................................. 136
Configuración .............................................................................................................................................................. 140
Conclusión ...................................................................................................................................................... 143
Referencias ...................................................................................................................................................... 144
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
5
Características del Joomla! 3.x
Joomla! 3.x es la última version de Joomla!. Es la publicación rápida que estará siendo apoyada hasta Abril del
2013. Esta nueva versión es un mundo totalmente nuevo y excitante, con muchas mejoras atractivas. Usted
puede ver las 6 principales mejoras en la infografía de abajo.
Para más información sobre las características de Joomla! 3.x acuda a http://www.joomla.org/3/en.
Six great features of Joomla! 3.x
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
6
Paso1: conozca el CMS Joomla!
En el pasado si se necesitaba un sitio de internet, la única opción era contratar a un estudio profesional que lo
construyera, y luego necesitaría depender absolutamente en ellos para el mantenimiento del sitio. Pero ahora, con
el aumento de programas abiertos, uno mismo puede, fácilmente, construir su sitio utilizando un (CMS) Contenido
Manejado Sistemáticamente. Hay distintos CMS disponibles, pero el más apropiado para sitios pequeños a
medianos es Joomla!.
¿Qué es el CMS Joomla!?
Logotipo Joomla!
El CMS Joomla! es un paquete basado en internet que permite crear y manejar sitios de internet. Con él se
pueden controlar:
1. Contenido del sitio como texto, fotos videos, etc.
2. La apariencia del sitio utilizando plantillas
3. La funcionalidad del sitio usando extensiones
Existen dos partes dentro del sistema: La parte frontal (lo que los visitantes al sitio ven) y la parte trasera (lo que
los administradores del sitio ven).
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
7
La parte frontal
La parte frontal es lo que la gente ve cuando visitan al sitio de internet. Normalmente existen ciertas partes
estandarizadas como son el logotipo, la barra de menú, columna lateral, y el texto principal empaquetados en
un atractivo diseño.
La parte frontal del sito
Viendo un artículo en la parte frontal
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
8
La parte trasera
La parte trasera es el área administrativa y es donde se controla el sitio de internet. El acceso es permitido por
medio “firmar acceso” y solo a los usuarios con permisos de administración.
La parte trasera de Joomla!
Editando un artículo en la parte trasera
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
9
¿De qué está hecho Joomla!?
Ahora exploremos las partes principales de Joomla!
Contenido
En Joomla!, el contenido consiste de artículos, categorías y media.
Artículos
Los artículos son los principales bloques de construcción de un sitio Joomla!. En la parte frontal se puede
fácilmente reconocer un artículo como una pieza de texto que puede o no incluir imágenes, presentados en la
zona principal de contenidos.
The article “Getting started”
En la parte trasera, los artículos son administrados usando el “Gestor de Artículos” al cual se puede acceder
por medio de “Contenido” => “Gestor de Artículos”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
10
El “Gestor de Artículos”
Aquí se pueden crear nuevos artículos, editarlos, elegir si publicarlos o des-publicarlos, etc.
Categorías
Las categorías ayudan a organizar los artículos de forma más conveniente. Pensemos en las categorías como
folders que contienen archivos. Por ejemplo, una categoría “Productos” puede contener todos los artículos
relacionados con sus productos. O una categoría llamada “Sobre Nosotros” puede contener artículos como
“Nuestra Compañía”, “Nuestra Visión”, “Mesa Directiva”, etc.
En la parte trasera las categorías son manejadas con el “Gestor de Categorías” accesible por medio del menú
“Contenido” => “Gestor de Categorías”.
El “Gestor de Categorías”
Aquí se podrá crear nuevas categorías, editarlas, elegir si publicarlas o des-publicarlas, etc.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
11
Etiquetas
Las etiquetas son palabras claves o términos asignados a una pieza de información. Describen el contenido del
artículo. Por ejemplo, puedes agregar las etiquetas “Plantillas Joomla!” y “Extensiones Joomla!” al artículo
“Comenzando con Joomla!”.
Los artículos con etiquetas similares se agruparán en conjunto de tal forma que a la hora que el usuario desee
realizar una búsqueda de una etiqueta en concreto, pueda encontrarlo mas fácilmente. Puedes fácilmente crear
un elemento de menú (o un modulo) para mostrar todas las etiquetas que has creado.
En el back-end, las etiquetas se encuentran en el tablero de edición del artículo. Puedes verlo en “Contenido”
=> “Gestor de Artículos” y luego ve a cada artículo para asignarle las etiquetas.
La función de “Etiqueta” ate permite asignar palabras claves a un artículo en particular
Para gestionar todas tus etiquetas, ve a “Componentes” => “Etiquetas”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
12
Ve a “Componentes” -> “Etiquetas” para gestionar tus etiquetas
Medios
Puesto de manera simple, medios es todo lo que no sea texto y que se puede poner en los contenidos. Esto no
solamente pueden ser imágenes, sino además video y otros elementos multimedia.
Los medios son administrados por medio del “Gestor de Medios” accesible por medio del menú “Contenido”
=> “Gestor de Medios”.
El “Gestor de Medios”
Aquí se puede crear nuevos folders de medios, subir archivos, etc. Discutiremos el uso del gestor de Medios en
más detalle en el capítulo Paso 3: Crear contenido para su propio sitio Joomla!
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
13
Menús
Por medio de los menús los visitantes pueden accesar y navegar en el contenido del sitio. Se pueden crear
múltiples menús y configurarlos para que se muestren en distintas partes como hasta arriba, o en una columna
lateral, etc.
Menú de ejemplo
En el ejemplo de arriba, el administrador creó un menú “Inicio” con varios elementos de sub-menú como “Antes
de iniciar”, “Usando Joomla!”, etc.
Para controlar los menús, vaya a el gestor de menús, por medio de “Menús” => “Gestor de Menús”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
14
El “Gestor de Menús” en el administrador de Joomla!
En el gestor de menús, se pueden crear menús y componentes del menú ligándolos a cualquier parte del sitio
que se desee. Cuando el menú está listo se puede crear un modulo de menú para desplegar el menú en la parte
frontal.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
15
Usuarios
Joomla! permite al sitio tener múltiples usuarios registrados. Todos los usuarios son organizados en grupos, los
cuales tienen permiso para accesar a ciertas partes del sitio. Por defecto hay varios grupos de usuarios como
“Autor”, “Editor”, “Publicista” etc. Por ejemplo:
Los usuarios asignados al grupo de “Administrador” pueden accesar tanto a la parte frontal como trasera
Los usuarios asignados al grupo de “Registrado” pueden solo entrar a la parte frontal. Se pueden
administrar a los usuarios, grupos de usuarios y niveles de acceso en el Gestor de Usuarios por medio del
menú “Usuarios”.
El menú “Usuarios” en la parte trasera.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
16
Extensiones
Las extensiones son programas escritos especialmente para Joomla! para extender la funcionalidad del sitio de
internet. Por ejemplo, si se desea que haya un slideshow de fotos o una galería de videos o una forma avanzada
de contactos, entonces se necesitará instalar extensiones para estos propósitos.
Por defecto Joomla!, es empaquetado con varias extensiones que cubren las necesidades básicas. Si se desea más,
entonces existen miles (literalmente) de extensiones disponibles en el Joomla! Extension Directory. Este es el
directorio de extensiones oficial de Joomla! mantenido por el equipo principal de Joomla!.
El “Directorio de Extensiones” del sitio de Joomla!
Hay 5 tipos básicos de extensiones: componentes, módulos, plugins, plantillas y lenguajes. Cada uno de estas
extensiones operan distintas funcionalidades específicas.
¡Demos un vistazo!
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
17
Componentes
El componente es la forma más compleja de extensión. Puede ser visto como una aplicación que desempeña
ciertas funciones y despliega contenidos específicos en el sitio. Como mencionamos anteriormente, una galería
de video es un ejemplo de componente. También puede ser un “carrito de compras”, un sistema para agendar,
foros, y mucho más.
El componente “Canales Electrónicos” en la vista trasera
El contenido producido por un componente se despliega en el área principal de contenidos. En el ejemplo de
arriba, usted puede ver una lista de “Canales electrónicos” generada por el componente “Canales electrónicos”.
Todos los componentes están localizados en la sección “Componentes”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
18
El menú “Componentes” en la parte trasera
Por defecto, Joomla! Es empaquetado con los siguientes componentes: “Anuncios”, “Contactos”, “Canales
Electrónicos”, “Redirección”, “Buscar”, “Búsqueda Inteligente”, “Etiquetas” y “Enlaces Web”.
Módulos
Los módulos tienen un rol similar al de los componentes, pero en una menor escala. Ellos desempeñan tareas
simples y despliegan contenido en pequeños bloques en el sitio.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
19
Los Módulos como aparecen en la parte frontal
Ejemplos de módulos son: la caja de búsqueda, menú, forma de acceso, información de derechos de autor del
pie de página, etc. En muchos casos los módulos trabajan en conjunción con componentes para presentar
contenido. Por ejemplo, un componente de carro de compras se usa para administrar productos y un módulo es
usado para mostrar los productos “más solicitados”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
20
Todos los módulos son accesibles mediante el menú “Extensiones” => “Gestor de Módulos”.
El “Gestor de Módulos” en la parte trasera
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
21
Plantillas
Las plantillas controlan el aspecto de diseño gráfico del sitio. Estas determinan las capas, colores, tipografías,
gráficos y otros aspectos del diseño que harán al sitio único.
En general, una plantilla consiste en 3 elementos:
Elementos gráficos estáticos, como imágenes de fondo, diseño decorativo, logotipo, etc.
El área principal de contenido que muestra información generada por los componentes.
Las múltiples posiciones para mostrar el contenido presentado por los módulos en locaciones específicas.
Ejemplo de imagen de fondo, posición de módulos y área de cuerpo principal /contenido
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
22
En la parte trasera se pueden controlar las plantillas en “Extensiones” => “Gestor de Plantillas”.
“Gestor de plantillas”
Por defecto, Joomla! 3.x viene con 2 plantillas: “Protostar” and “Beez3”. Pero existen miles de plantillas, tanto
gratuitas como comerciales, disponibles. Revise esta lista del las mejores 10 plantillas para usuarios de Joomla!
3.0.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
23
Aquí algunos ejemplos de plantillas:
JSN Pixel
JSN Boot
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
24
Plugins
Los plugins están diseñados para desplegar contenido en componentes y módulos. Los plugins pueden desempeñar
tareas en ciertos puntos mientras que el sitio se está cargando. Se puede pensar a los plugins como una forma más
versátil de interactuar con el sistema.
Plugins de contenido “Visitas” and “Lea más” en la parte frontal
Ejemplos de plugins que pueden haberse visto son los de funcionalidad de votación y el botón de “Lea más…”
dentro de los artículos. Todos los plugins son controlados mediante “Extensiones” => “Gestor de Plugins”.
Gestor de Plugins
En el paquete principal de Joomla! 3.x, los plugins se dividen en 11 categorías: “autentificación”, “captcha”,
“contenido”, “editor”, “editores-xtd”, “extension”, “buscador”, icono-rápido”, “búsqueda”, “sistema” y
“usuario”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
25
Idiomas
Idiomas permite correr al sitio en más de un idioma. Por ejemplo, si se desea usar Frances para el área de
administrador de sitio de Joomla! solo se necesita descargar el paquete de traducción de Frances, del Directorio
de extensiones para idiomas de Joomla! e instalarlo utilizando el “Gestor de Extensiones”.
“Language Manager”
Ambos lenguajes instalados serán visibles entonces en “Extensiones” => “Gestor de Idiomas” en la parte
trasera.
>>> El próximo paso
Ahora que ya tiene nociones sobre Joomla! es momento de experimentarlo en carne y hueso. Instalemos
Joomla! 3.x en su hospedaje local y probémoslo.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
26
Paso 2: Instalando Joomla! 3.x en su
hospedaje local
Instalar Joomla! 3.x en su hospedaje local es simple pero puede convertirse en algo confuso en el primer intento.
Así que para este paso, daremos instrucciones de cómo hacerlo correctamente desde cero.
Primero aclaremos el significado de “Hospedaje Local”. Como usted sabe, cualquier sitio de internet necesita ser
hospedado en un servidor de internet para que pueda ser mostrado a los usuarios. Normalmente se necesitará
comprar un paquete de hospedaje de algún proveedor de hospedaje como Rackspace o GoDaddy. Dependiendo del
paquete que se elija, el proveedor instalará a su servidor de internet en uno de sus equipos, los cuales son accesibles
al público. El hospedaje local, es básicamente el mismo tipo de servidor de internet pero instalado en su propia
computadora.
Ahora para que pueda correr Joomla! necesitará no solo un servidor de internet, sino adicionalmente dos cosas
más: un intérprete de scripts de PHP y un sistema de base de datos MySQL. Suena complicado pero gracias a Dios
existe un paquete sencillo llamado XAMPP que tiene todos estos elementos incluidos.
Instalemos XAMPP en su computadora.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
27
Instalando XAMPP
1. Se descarga el paquete de instalación XAMPP en http://www.apachefriends.org/es/xampp.html
2. Se corre el instalador siguiendo las instrucciones que este da tal como se hace con cualquier otro programa.
3. Se abre el “XAMPP Control Panel Application” y se pulsa Start a “Apache” y a “MySQL”.
XAMPP Control Panel Application
Eso es todo, el hospedaje local está ya instalado. Se puede probar si funciona o no pulsando la dirección
“http://localhost” en el navegador de internet. Se debería poder ver algo como la ilustración siguiente:
XAMPP for Windows interface
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
28
4. Se crea una base de datos en phpMyAdmin.
Desde la interface de XAMPP, se pulsa a “phpMyAdmin” para iniciar la creación de la base de datos.
Clic a “phpMyAdmin”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
29
5. A continuación se hace clic en “Database” en la barra de herramientas, como se ilustra en la imagen
siguiente:
Click “Database”
6. Ahora se teclea un nombre para la base de datos y luego se hace clic en “Create”
Creando la base de datos
Ahora ya se está listo para instalar Joomla!.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
30
Instalando Joomla!
1. Se descarga el paquete completo de Joomla! 3.x desde http://www.joomla.org/download.html
2. Se crea un nuevo folder llamado “Joomla3x” en el folder “htdocs” dentro de la carpeta del XAMPP.
Usualmente ésta se encuentra en “C:\xampp\htdocs”
3. Se desempaqueta el paquete que había descargado en el directorio “Joomla3x”
4. Se entra en la dirección “http://localhost/Joomla3x”
5. Se sigen los pasos en la instalación de Joomla!:
a. Paso 1. Configuración Principal
Seleccionar Idioma: Se elije su propio idioma del menú desplegable, por ejemplo, “Español
(España)”
Nombre del Sitio: Se teclea el nombre para el sitio
Descripción: Se teclea una descripción para el sitio
Sitio Fuera de línea: se decide el status del sitio para cuando se acceda a la parte frontal de
éste: Se pulsa “Si” para modo “fuera de línea” y “No” para modo “En línea” (accesible).
Email del Administrador: Se teclea una dirección de email válida para el sitio
Nombre de Usuario del Administrador: Se teclea “admin” por defecto
Contraseña del Administrador: Se teclea la contraseña deseada
Confirmar Contraseña Administrador: Se vuelve a tecleear la misma contraseña
Se pulsa “Siguiente” para continuar al Paso 2
b. Paso 2. Configuración de la Base de Datos
Tipo de base de datos: Se elige MySQLi
Nombre del Host: Se teclea “localhost”
Nombre de Usuario: Se teclea “root”
Contraseña: se deja en blanco
Nombre de la Base de Datos: Se teclea el nombre de la base de datos que se creó:
“Joomla3x”
Prefijo de la Tabla: Se deja para que se genere automáticamente
Proceso de la Base de Datos antigua: Se pulsa “Respaldar” para respaldar la base de datos de
anteriores instalaciones de Joomla!, o “Remover” para remover esas tablas
Se pulsa “Siguiente” para continuar al siguiente paso.
c. Paso 3. Revisión
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
31
Finalización: Se puede optar por instalar información de muestra o no, pulsando en la
sección correspondiente.
Revisión: Este es el paso para revisar toda la información configurada en el paso 1. Luego de
revisarlse se pulsa ”Instalar”.
Cuando la instalación finalice, solo se necesita hacer clic al botón “Remover folder de
Instalación” para completar el proceso de instalación. Después de esto se puede pulsar
“Sitio” para ver el sitio recién creado (la parte frontal) o “Administrador” para acceder al
área de administración (la parte trasera).
¡Ahora tiene su primer sitio Joomla! instalado exitosamente! No fue tan difícil ¿verdad? Si se tiene cualquier
problema con el proceso de instalación, se puede intentar con las siguientes fuentes para consulta:
Foro Oficial de Joomla!
El foro de Joomla! es uno de los más activos (y amistosos) en el mundo, y es un gran lugar para obtener
ayuda y conocer a otros usuarios de Joomla! Hay muchas preguntas y respuestas que son discutidas aquí.
Debido a que nuestro tema es la instalación de Joomla! 3.x, se puede encontrar la información en la
categoría “Installation Joomla! 3.x”.
Ayuda de Joomla! en vivo (http://joomla.cmshelplive.com/)
Este sitio provee servicio de ayuda bajo demanda sobre Joomla!. Por supuesto, tiene que pagarse dinero
por el servicio pero los problemas serán resueltos por expertos de Joomla!.
Otros recursos de aprendizaje de Joomla!
Hay muchos otros sitios que pueden ser usados como recursos para aprender Joomla!:
o http://docs.joomla.org/Beginners
o http://www.joomlatutorials.com/
o http://www.joomlablogger.net/
o http://www.ostraining.com/
>>> El próximo paso
Instalar Joomla! 3.x en su hospedaje local es el primer paso que se necesita hacer exitosamente antes de iniciar con
el sitio de Joomla!. Ahora, con el sitio listo, llenémoslo con contenido.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
32
Paso 3: Crear contenido para su propio sitio
Joomla!
Naturalmente el elemento más importante en cualquier sitio es el contenido. En este paso:
1. Se preparará la estructura del contenido
2. Se crearán las categorías y artículos
3. Se creará un menú
4. Se administrará su contenido con el “JSN PowerAdmin”
Preparando la estructura del contenido
Crear contenido es como acomodar productos en una tienda de víveres. En Joomla! los artículos son como
productos, las categorías son como los anaqueles que contienen a los productos, y los menús son como los
separadores de estos anaqueles. Ahora, imaginemos que se tiene un sitio de internet que vende objetos lujosos.
La estructura del contenido podría verse así:
1. Acerca
a. Acerca mi sitio
b. Cómo comprar/ordenar productos
c. Cómo hacer los pagos
2. News
a. Ultimas Noticias
b. Recién llegadas
c. En Venta
d. Cupones
e. Promociones
3. Soporte
a. Línea directa de información
b. Servicio a Clientes en Línea
c. Contáctenos
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
33
Creando contenido
Cuando la estructura de contenido está lista en el papel, ahora se debe reproducir en Joomla! Comencemos con
la creación de las categorías.
Categorías
1. Se va a “Contenido” => “Gestor de Categorías” y se pulsa en “Añadir Categoría”
Add a new category
2. A continuación se teclea el título de la categoría “Acerca” y se pulsa el botón “Guardar y Cerrar” de
la barra de herramientas.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
34
Entrando información de la Categoría
Luego de guardar, se puede ver la nueva categoría “Acerca” que aparece en el Gestor de Categorías.
La categoría “Acerca”
Se pueden crear el resto de las categorías de la misma manera.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
35
6 new categories
Cuando las categorías están listas es hora de crear los artículos.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
36
Artículos
Agreguemos un nuevo artículo en la categoría “Acerca”.
1. Se acude a “Contenido” => “Gestor de Artículos” y se pulsa “Añadir Artículo”
Add new article
2. A continuación es necesario configurar 3 parámetros:
Título: Se teclea “Acerca de mi sitio”.
Categoría: Se selecciona “Acerca” de la lista.
Texto del Artículo: Se teclea el contenido del artículo.
Por ahora, asumamos que se tiene un artículo con texto simple. Después, en la sección “Hacer que los
artículos se vean bien” discutiremos cómo crear artículos ricos en contenido.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
37
3. Si se desea que un artículo sea mostrado en la portada, por favor, se localiza el parámetro de
“Destacado” y se cámbia a “Si”. Esto hará que el artículo aparezca en la portada del sitio.
El parámetro “Destacado” del Gestor de Artículos
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
38
4. Al terminar, se pulsa el botón “Guardar y Cerrar” en la barra de herramientas para guardar el artículo
recién creado.
Pulsar el botón “Guardar y Cerrar” para guardar el artículo
Ahora se tiene un nuevo artículo en el Gestor de Artículos.
El nuevo artículo “Acerca de mi sitio”
De la misma manera se crearán dos artículos más: “Cómo comprar/ordenear productos” y “Cómo Hacer los
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
39
pagos” en la categoría “Acerca”.
Tres artículos recién creados
Ahora que se ha completado el proceso de creación de contenido, hay una cosa finalmente por hacer: crear un
menú de elementos con las ligas a estos artículos.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
40
Menús
En Joomla! un menú es una colección de vínculos a ciertos elementos como artículos. En la parte trasera, todos los
menús están localizados en la sección “Menús”. Por defecto Joomla! tiene pre-instalado con un menú llamado
“Menú Principal”.
“Main Menu” presentation at the front-end
Agreguemos nuevos elementos al Menú “Menú Principal”.
1. Se pulsa el “Menú Principal” en el menú desplegable “Menús”.
Se pulsa “Menú Principal” para ver los elementos de menú asociados
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
41
2. Ahora, se pulsa el botón “Nuevo” para crear un nuevo elemento del menú.
Click the button “New” to create a new menu item
3. A continuación se pulsa “Seleccionar” para elegir el tipo de elemento.
Seleccionar el tipo de elemento
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
42
4. Hay muchos tipos de elementos que se pueden crear en un vínculo como Contactos”, “Artículos”,
“Búsqueda Inteligente”, “Canal Electrónico” y así. En este caso se necesita crear un vínculo a un solo
artículo así que elegimos pulsando sobre “Un Solo Artículo”.
Seleccionando el tipo de elemento “Un solo Artículo”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
43
5. Ahora se necesita llenar el parámetro “Título del Menú”, por ejemplo con “Acerca de mi sitio”.
Introduciendo el artículo
6. Luego se deberá elegir el artículo que se desea desplegar, en la parte derecha se pulsa el botón
“Seleccionar” para elegir el artículo.
Se pulsa el botón “Seleccionar”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
44
7. Una pantalla desplegable se mostrará, se elige el artículo “Acerca de mi sitio”.
Se pulsa sobre el artículo que se desea elegir
8. Se pulsa “Guardar y Nuevo” para crear otros dos elementos más de menu que vinculen a los otros dos
artículos “Cómo comprar/ordenar productos” y “Cómo hacer los pagos”.
Pulse “Guardar y Nuevo”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
45
Después de crearlos, ahora se tienen 3 nuevos elementos de menú.
Tres elementos de Menú recién creados
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
46
Etiquetas
Puedes crear un nuevo menú o modulo para mostrar tus etiquetas; puedes hacerlo de la siguiente forma:
Crea un menú de etiqueta: Ve a “Menús” => “Gestor de Menús” => “Agregar nuevo elemento de
Menú” y luego elige “Etiquetas” en Tipo de Menú.
Crea un nuevo elemento de menú para mostrar tus etiquetas
Crea un modulo de Etiquetas: Ve a “Gestor de Módulos” => “Nuevo” => elige el tipo “Etiquetas
Populares”.
Crea un nuevo modulo para mostrar tus etiquetas
Ahora, puedes ir al front-end y ver el resultado.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
47
Los nuevos artículos en el menú principal
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
48
Cuando se pulse cada vínculo se deberá poder accesar al artículo correspondiente.
El artículo “Acerca de mi sitio”
Ahora se pueden repetir los pasos pertinentes para crear vínculos a todos los artículos necesarios.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
49
Manejando el contenido con el JSN PowerAdmin
Al trabajar con Joomla! si se han creado muchos menús, artículos o módulos, se verá que puede resultar difícil
localizar uno en específico. Por esto una extensión que pueda ayudar a hacerlo rápida y simplemente sería de
gran ayuda. Nuestra recomendación es una extensión popular y gratuita llamada JSN PowerAdmin.
JSN PowerAdmin ayuda a:
1. Buscar cualquier elemento en la parte trasera con Spotlight Search. Así se puede ahorrar tiempo al
buscar elementos que se deseen editar.
2. Controlar el sitio de internet en un solo lugar con el Site Manager. Desde ahí, el administrador puede
editar un artículo o manejar los módulos y elementos de menú con la funcionalidad arrastrar-y-soltar.
JSN PowerAdmin Site Manager
Esta extension es altamente calificada por los usuarios de Joomla! en el JED con más de 30 votos y más de 30
revisiones.
Descargue el JSN PowerAdmin Gratuito - Conozca más sobre el JSN PowerAdmin en Youtube.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
50
Hacer que los artículos se vean bien
Ya sabemos cómo crear artículos. Es momento de volvernos más avanzados y crear artículos que sean más
atractivos. Hay varias formas en las que se puede hacer esto como dar formato al texto, agregarle imágenes,
ligas, etc.
Dar format al texto
Si se ha trabajado con el Word de Microsoft o cualquier otro procesador de texto, entonces dar formato al texto en
Joomla! parecerá muy familiar. De cualquier forma, es mucho más simple que con Word de Microsoft debido a
que hay menos opciones básicas.
Se acude al Gestor de Artículos y se pulsa en el artículo “Acerca de mi sitio” para abrirlo. Ahora enfoquemos
el área del editor de artículos.
Editar el artículo
Al mirar de cerca las opciones de formato – la mayoría de los íconos se ven familiares con los que se usan para
convertir su texto a negrillas, itálico o subrayado, o a los íconos para alinear o justificar el texto. Solo se
selecciona el texto al que se desea dar estilo y se pulsa el ícono con la función deseada.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
51
Botones de formateo del texto en Joomla!
Se pueden hacer encabezados de distintos “niveles” en el texto seleccionándolos del menú desplegable
“Párrafo”. Despliegue el menú y seleccione el apropiado, desde “Encabezado 1” a “Encabezado 6”.
Eligiendo estilos de encabezados para el texto
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
52
Se verá que el texto ahora es más grande:
Encabezado 1 en el texto
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
53
Agregando Imágenes
Antes de agregar imágenes al los artículos, se deberán organizar en folders específicos. Esto hará más fácil de
encontrarlas y manejarlas.
Creando folders de Imágenes
1. Se acude a “Contenido” => “Gestor de Medios”, luego se pulsa en “Crear Folder” en la barra de
herramientas
2. Se teclea el nombre del folder “acercamisitio” y se pulsa el botón “Crear Folder”.
Create a new folder for images
Ahora se tiene un nuevo folder en el Gestor de Medios.
El folder “acercamisitio” en el Gestor de Medios
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
54
Subiendo Imagenes
Ahora es momento de subir archivos a la nueva carpeta de imágenes creada “acercamisitio”
1. Se hace clic en el folder “acercamisitio”, luego se pulsa el botón verde “Subir”
Click “Upload”
2. Luego se pulsa “Seleccionar Archivos” para navegar las imágenes disponibles.
Choose files
3. Se selecciona la imagen que se desea subir. En este punto se puede seleccionar solo un archivo por vez,
pero más adelante mostraremos como seleccionar múltiples archivos de una sola vez.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
55
Seleccionar archive de imagen
4. Se hace clic en el botón “Iniciar Subida” para subir la imagen.
Iniciar Subida
Ahora, el archivo recién subido está en el folder “acercamisitio”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
56
La imagen mostrada en el folder “acercamisitio”
Por medio de esta forma de subir archivos solo puede hacerse de una imagen a la vez, de tal forma que puede
tomar mucho tiempo y esfuerzo si se tienen muchas imágenes para subir. Afortunadamente existe otro método
para subir múltiples archivos – con el “subidor de flash”.
Por favor nótese que para este método se requiere tener Flash Player instalado en la computadora. Démosle un
vistazo:
1. En el Gestor de Media, se hace clic en el botón “Opciones” de la barra de herramientas.
Pulse el botón “Opciones”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
57
2. En la página “Opciones del Gestor de Medios”, se cambia el parámetro “Habilitar las subidas en
Flash” a “Si” y se pulsa “Guardar y Cerrar”.
Habilitar subidas en Flash
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
58
3. De regreso a la pantalla principal, debería verse ahora como en la ilustración de abajo. Ahora puede
pulsar “Explorar Archivos” para localizar las imágenes que se desean subir.
Browse files
4. Para seleccionar múltiples archivos se mantiene pulsada la tecla “CONTROL” y se hace clic en cada
una de las imágenes que se desea subir, luego se pulsa el botón “Abrir” en la pantalla.
Seleccionando Imágenes
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
59
5. Se hace clic en el botón “Iniciar la Subida” y se espera a que el proceso de subida concluya.
Subiendo Imágenes
Ahora ya se tienen las imágenes en el folder.
Las imágenes recién subidas
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
60
Agregando imágenes al artículo
Una vez que las imágenes ya están en el servidor, estas se pueden agregar a los artículos. Usemos el mismo
artículo “Acerca de mi sitio”.
1. Con el artículo abierto, se coloca el cursor en el punto del texto donde se desea insertar la imagen y se
pulsa el botón “Imagen” debajo del panel de texto del artículo.
Agregar una imagen al artículo
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
61
2. Se elige la imagen apropiada a insertar.
Abriendo el folder de imágenes
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
62
3. Se teclean los parámetros de Descripción de Imagen y Título de la Imagen y se pulsa el botón
“Insertar” en la parte de arriba para concluir el proceso de inserción
Elegir la imagen hacienda clic en ella y agregando sus parámetros
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
63
4. Se revisa cómo la imagen fue insertada en el artículo.
An image is inserted in the text
Ahora se podría sentir a la imagen muy grande o pequeña y desear cambiar sus dimensiones o alineación. Para
esto, se pulsa primero sobre la imagen y luego en el botón “Insertar/Editar imagen”, de las opciones de
formato arriba del área de texto del editor, a fin de modificarla.
El botón para editar/insertar imagen
Una pantalla desplegable aparecerá. Aquí se puede editar la imagen a como se desee. Por ejemplo, cambiemos
las dimensiones y el alineamiento a la “Derecha”, luego pulsemos el botón “Actualizar” abajo.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
64
Edit the image
Se pulsa el botón “Guardar y Cerrar” en la barra de herramientas del Gestor de Artículos y se puede acudir a
la parte frontal para ver cómo quedó el artículo con su nueva imagen.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
65
El artículo con su nueva imagen en el sitio
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
66
Agregando ligas
Agregando ligas internas
Es muy común necesitar crear ligas internas entre los artículos. Estas ligas son, no solo útiles, para los usuarios que
navegan en el contenido, sino también buenas para los Optimizadores de Máquinas de Búsqueda (SEO por sus
siglas en inglés). Veamos cómo crear ligas internas en un artículo.
1. Se abre el artículo al que se desean agregar ligas internas
2. Se selecciona el texto base para ligar (llamado texto ancla)
3. Se pulsa el botón “Artículo” abajo del editor de texto
Insertando una liga a un artículo
4. Ahora se ve una ventana desplegable con la lista de todos sus artículos. Se localiza el artículo que se
desea ligar y se pulsa en su título.
Seleccionando el artículo apropiado
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
67
Como resultado, el título del artículo es usado como texto vínculo/ancla.
New link in the text
Usted puede cambiar el texto del vínculo como lo haría con un texto normal.
El texto ancla después de ser editado
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
68
5. Se Pulsa “Guardar” y se puede ir a la parte frontal para ver el artículo con su nuevo vínculo.
El artículo con su nuevo vínculo o liga.
Si se desea editar la liga, solo se hace clic en el botón “Insertar/editar liga” como se muestra a continuación:
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
69
Editando la liga
O se puede remover el vínculo pulsando el botón “Desvincular”.
Desvinculando un artículo
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
70
Agregando ligas externas
En la sección previa hemos visto como crear ligas internas, vg. aquellas que vinculan a artículos en su propio sitio.
En esta sección veremos cómo crear ligas externas que vinculen a cualquier página en el Internet.
1. Se selecciona el texto al que se desea aplicar el vínculo y luego se pulsa el ícono “Insertar/editar liga”.
Agregando una liga externa
Una ventana desplegable como la que se muestra a continuación aparecerá:
Agregando una URL externa
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
71
2. Se teclean los 4 valores siguientes en la página que aparece:
URL de la liga
Es el destino de la liga, por ejemplo la dirección de internet de la página que deseamos vincular
Objetivo
Aquí hay dos opciones a elegir: “Abrir vínculo en la misma ventana” o “Abrir vínculo en una nueva
ventana” (Cuando se deja “Sin Cambios” la liga se abrirá en la misma ventana)
Título
Texto breve que describa al vínculo
Clase
Como nuevos en Joomla!, por ahora dejémoslo en “Sin Cambios” (las otras dos opciones son
Subtítulo y Sistema de Salto de Página)
3. Se pulsa el botón “Insertar” para insertar la liga. Luego de esto se podrá ver el texto vinculado a un sitio
de internet externo.
El texto vinculado
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
72
Agregando “Saltos de Página” y “Leer Más”
En el caso de artículos largos, tal vez se prefiera dividir el artículo en secciones más pequeñas y separadas. Con
Joomla! usted tiene dos opciones para ayudar a sus visitantes a leer artículos largos.
1. Salto de Página
Este elemento divide una artículo en páginas separadas como por ejemplo Página 1, Página 2, Página 3,
etc. Los saltos de página son ideales para artículos muy largos.
2. Leer Más
Este elemento divide un artículo complete en una introducción y el resto del artículo. Si desea leer el
resto del artículo, el visitante tendrá que hacer clic en la liga “Leer Más”.
Ahora aprenderemos como trabaja cada uno de ellos.
Agregando un “Salto de Página”
1. Se coloca el cursor de texto en su artículo en la posición donde se desea dividir el artículo.
2. Se hace clic en el botón “Salto de Página” abajo del editor de artículos.
Agregando salto de página
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
73
3. Agregue el título que desea dar a la nueva página en el campo del parámetro “Título de la Página” y
pulse el botón “Insertar Salto de Página”.
Insertar Salto de Página
4. Eso es todo lo que se necesita, ahora se verá una línea punteada mostrando donde está el salto de página
dentro del artículo como en la imagen de abajo:
Línea punteada mostrando el salto de página
5. Pulse el botón “Guardar”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
74
6. Al ver el resultado en el sitio, Se encontrará una lista dentro del artículo, solo se necesita hacer clic en el
titulo o en “Siguiente” para ver la página.
Un nuevo salto de página en el sitio
Nota:
Se pueden agregar tantos saltos a la página como se deseen.
Se pueden borrar los saltos de página abriendo el artículo (en la parte trasera) y colocando el cursor
sobre el final de la línea punteada de salto de página y pulsando la tecla “Retroceso” del teclado.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
75
Agregando una liga “Leer Más”
Agregar una liga “Leer Más” es muy similar al proceso de agregar un salto de página.
1. Se coloca el cursor en la parte del artículo donde se desea divider entre introducción y el resto del
artículo.
2. Se pulsa el botón “Leer Más” debajo del editor de artículos.
Insertando una liga “Leer Más”
Se verá una línea roja.
Línea punteada “leer más”
3. Se pulsa el botón “Guardar” para finalizar.
Aquí está el artículo con la liga “Leer más”, en la parte frontal. Solo se necesita pulsar el botón “Leer
Más...” para ver el artículo completo (inclusive la parte que se usó como introducción).
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
76
El artículo con la liga “Leer Más…”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
77
Paso 4: Personaliza la apariencia de tu sitio
web con una Plantilla Joomla!
Hemos terminado de preparar el contenido para el sitio web. Ahora es tiempo de pensar en su apariencia.
¿Qué es una plantilla Joomla!?
Como mencionamos anteriormente, una plantilla controla la presentación gráfica de tu sitio. Determina la
presentación, disposición, colores, gráficas y otros aspectos del diseño, que hacen que el sitio sea único. Hay
dos tipos de plantillas: “Plantilla del Sitio” (Site template) para la presentación de la vista frontal y“Plantilla
del Administrador” (Administrator template) para la presentación de la parte trasera.
Plantillas del sitio
La plantilla del sitio cambia la forma en que el sitio se ve para los visitantes al mismo.
Plantilla en la parte delantera
La mayor parte del tiempo, estará trabajando con la plantilla del sitio, para ajustar la imagen y apariencia del
sitio web.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
78
Plantilla del Administrador
Las plantillas del administrador cambian la forma en que la interface del administrador (vista trasera) se ve.
Plantilla del Administrador en el back-end
Si se está armando un sitio propio, probablemente nunca se tendrá que cambiar la plantilla del administrador
(vista trasera). Cuando se arman sitios para clientes, podrías necesitarse hacer pequeños cambios en la plantilla
del administrador para reflejar la marca del cliente.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
79
Seleccionando una plantilla Joomla!
Fuentes de plantillas
La forma más rápida de incursionar en el diseño del sitio web es usando una plantilla existente de Joomla!.
Hay muchas disponibles en Internet.
Fuentes de plantillas gratuitas (Free templates)
La comunidad de Joomla! crea miles de plantillas gratuitas de donde seleccionar. Puedes revisar las siguientes
páginas:
http://www.joomla24.com/
http://www.joomlaos.de/
http://www.bestofjoomla.com
Fuentes de plantillas comerciales (Commercial templates)
Si se tiene suficiente presupuesto para comprar una plantilla, entonces recomendamos dar una mirada a los
siguientes proveedores.
http://www.joomlart.com
http://www.rockettheme.com
http://www.joomlashine.com/
http://www.yootheme.com
http://www.gavick.com
Buscando en el Internet
Se puede buscar en Google con las palabras claves: “Plantillas Joomla!” o “plantillas para Joomla!”y es
posible obtener muchos resultados al respecto.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
80
Criterios para elegir la plantilla correcta
Hay muchas plantillas Joomla! para seleccionar. Y existen muchos criterios que pueden ayudar a seleccionar la
plantilla correcta.
Compatibilidad
¿Qué versión de Joomla! soporta? Es necesario elegir una plantilla que soporte Joomla! 3.x
Comercial o No-Comercial
¿Se quiere tener una plantilla de alta calidad y soporte o se tiene un presupuesto ajustado y por
consiguiente es necesario decidir por una plantilla gratuita? Normalmente, las plantillas comerciales
son más flexibles, tienen mejor calidad, documentación más comprensiva y mejor soporte que las no
comerciales.
Documentación
¿Qué tan bien documentada está? ¿La documentación ayuda a entender todas las características de la
plantilla? ¿Muestran las formas de personalizar la plantilla?
Soporte Técnico
¿Habrá soporte técnico para la plantilla? ¿De qué forma es posible obtenerlo? – vía un foro, por medio de
un sistema de ticket, etc. ¿En cuánto tiempo se obtendrá respuesta del experto? – 12 horas, 24 horas o
varios días, etc.
Diseño
¿Va acorde a la apariencia que quieres darsele al sitio? ¿Es similar al diseño que se deseab y no habrá
que pasar mucho tiempo personalizando la plantilla? O de otra forma, ¿es fácil personalizarla como se
quiere?
Características
Las plantillas profesionales le proporcionan muchas características, mientras que las gratuitas son más
limitadas en cuanto a características adicionales.
Si se desea para un individuo o un usuario ordinario, una plantilla gratuita podría ser una elección adecuada. Sin
embargo, si se está creando un sitio web para un negocio o empresa, seguramente valdrá la pena invertir un poco de
dinero en una plantilla comercial de un proveedor profesional. No se piense que se desperdicia dinero al hacerlo;
aparte de tener código y diseño de alta calidad, también se obtendrá una buena documentación y soporte. El tiempo
que se ahorrará en dejar a punto la plantilla, valdrá más la pena que el dinero que se habrá invertido.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
81
Instalando la plantilla Joomla!
Luego de haber elegido la plantilla Joomla! apropiada, es hora de instalarla.
1. Hay que dirigirse a “Extensiones” => “Gestor de Extensiones”
“Extensiones” => “Gestor de Extensiones”
2. Se pulsa en el botón de “Explorar” y se busca el archivo de la plantilla que se haya descargdo, luego pulse
el botón “Subir e instalar”. Luego, se recibirá una notificación que informa que la plantilla se ha instalado
exitosamente.
Buscando el archivo de la plantilla en la computadora
3. Ahora que se tiene la nueva plantilla instalada, es hora de aplicarla a tu sitio web. Se pulsa “Extensiones”
=> “Gestor de Plantillas”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
82
Se elige “Gestor de Plantillas”
4. Se selecciona la casilla de verificación al lado de la nueva plantilla Joomla!, y se pulsa el ícono
“Predeterminada” y se establecerá la plantilla como el diseño por defecto para el sitio web Joomla!
Eligiendo “Por Defecto”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
83
5. Ahora, se podrá ver el diseño en la parte frontal pulsando el nombre del sitio web desde la parte superior
izquierda del panel del administrador (la parte trasera).
Pulsando para ver el sitio en la parte frontal
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
84
Crear múltiples estilos de plantilla para asignárselos a múltiples elementos de menús
Puedes crear diferentes plantillas en diferentes páginas web en tu sitio web.
En este sitio web, casi todas las páginas usan Beez2, excepto una página que usa Beez5
Por ejemplo, tienes un sitio que usa la plantilla Protostar, y luego quieres que otra página use la plantilla Beez3.
Puedes hacerlo fácilmente de la siguiente forma:
En este caso, he creado un nuevo menú al principio del menú, llamado Beez3. Ve a Menús -> Menú Principal
-> Agregar Nuevo menú. Puedes seleccionar cualquier tipo de elemento que desees, por ejemplo, elegiré el
elemento de menú tipo: Mostrar un solo artículo, título de menú “Beez3”, selecciona el artículo “Getting
Started” y graba (guardar los cambios) el menú.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
85
Selecciona el artículo “Getting Started”
Luego ve a Extensiones -> Gestor de Plantillas -> Beez3, en la sección de “Asignación de Menú”, elige el
elemento de menú Beez3.
Elije el elemento de menú “Beez3”
Ahora, puedes grabar el menú e ir al front-end para ver el resultado.
Nota:
Puedes asignar solo un estilo de plantilla a un elemento de menú. Si asignas más de una, solo tomará efecto la
última que hayas asignado.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
86
Paso 5: Ordenando los módulos en posiciones
Nota: Se puede hacer este paso fácilmente con el JSN PowerAdmin con su característica de ordenar módulos
visualmente.
¿Qué es un módulo y su posición en Joomla!?
Como mencionamos anteriormente, un módulo realiza la simple tarea de mostrar contenido como unos
pequeños bloques posicionados alrededor de la página. Cada módulo está localizado en una posición
específica, por ejemplo el “Menu Principal” está puesto en la posición “izquierda”. Cada posición está
diseñada para ocupar un lugar en el diseño de la página, por ejemplo “izquierda” está colocado en la parte
izquierda del contenido principal. Cada plantilla puede tener diferentes posiciones ocupando diferentes lugares
en la página.
Acá hay otra forma de ver este concepto. Imagínese al sitio web como una pared. En dicha pared hay varias
pizarras (posiciones de módulos) colgadas en diferentes lugares. En cada pizarra, hay varios post-it pegados
(los módulos) en diferentes lugares. Así, al final se tendrá a la pared llena de post-it pegados colgando de la
misma.
Hay dos tipos de módulos: “Módulos del sitio” que se utilizan en la parte frontal y “Módulos Administradores”
para la parte trasera.
Módulos del Sitio en la parte frontal
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
87
¿Cómo puedo ver las posiciones de módulos disponibles en una plantilla?
Es difícil ver todas las posiciones disponibles en una plantilla con tan solo mirar la pagina web. Afortunadamente,
Joomla! provee una herramienta para los usuarios que permite ver las posiciones en enmarcadas. A continuación
las instrucciones para cómo verlas:
1. Se entra a “Extensiones” => “Gestor de Plantillas”.
2. En el Gestor de Plantillas, pulsar el ícono de “Opciones” en la barra.
3. Luego, activar el parámetro “Prever Posición de Módulos” y pulsar en “Guardar y Cerrar”.
Permitir la visualización de posiciones de módulos en la plantilla
4. Ahora, pulsar en la pestaña “Plantillas”.
Se pulsa en la pestaña de plantillas
5. En la ventana desplegable se mostrarán todas las plantillas instaladas. Deslizar hacia abajo a la plantilla Beez3 y
pulsar en “Vista Previa” para ver las posiciones de los módulos de esta plantilla.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
88
Pulsar en “Vista previa”
6. Una página nueva se abrirá en una nueva pestaña de su navegador, esta página muestra las posiciones de los
módulos de la plantilla, como se ve en la siguiente imagen:
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
89
Posiciones de módulos en el sitio
Ahora es posible ver las posiciones de los módulos en la plantilla. Esto ayudará a elegir la posición correcta
cuando se agregue un nuevo módulo.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
90
Agregando un nuevo módulo a una página
Ahora que nos hemos familiarizado con los conceptos de módulos y sus posiciones en Joomla!, aprendamos
como agregar un nuevo módulo en la pagina web.
Familiarizándose con los módulos por defecto
Por defecto, Joomla! viene con varios módulos listos para usarse. Veamos:
Módulos de Usuario
Módulos diseñados para presentar usuarios y servicios.
Quién está conectado
Este módulo muestra el número de invitados (visitantes no registrados) y usuario registrados que están
actualmente en nuestro sitio.
Últimos Usuarios
Este módulo muestra los últimos usuarios registrados.
Ingreso (Login)
Este módulo muestra un formulario de ingreso con nombre de usuario (login), contraseña (passoword) y
otros hipervínculos.
Módulos de Contenido
Módulos diseñados para la presentación de artículos..
Últimas Noticias
Este módulo muestra el listado de los artículos recientemente publicados.
Contenido más leído
Este módulo muestra un listado de los artículos recientemente publicados con mayor número de visitas.
Artículo – Flash de Noticias
Este módulo muestra un número fijo de artículos específicos para una categoría.
Artículos – Artículos Relacionados
Este módulo muestra otros artículos relacionados el que se esté viendo actualmente.
Artículos Archivados
Este módulo muestra un listado de los meses del calendario que contienen artículos archivados.
Categorías de Artículos
Este módulo muestra las categorías que corresponden una categoría padre o superior
Categoría de Artículo
Este módulo muestra los artículos de una categoría en particular.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
91
Mostrar módulos
Módulos diseñados para presentación de contenido enriquecido.
HTML Personalizado
Este módulo permite crear un Módulo HTML personalizado usando el editor WYSIWYG.
Pantalla de canales
Este módulo muestra un canal sindicado (RSS).
Píe de página
Este módulo muestra la información de derechos de autor Joomla!.
Imagen aleatoria
Este módulo muestra una imagen aleatoria seleccionada de un directorio de imágenes.
Vínculos web
Este módulo muestra el listado de vínculos web en una categoría.
Anuncio
El módulo de Anuncio se usa para mostrar los anuncios del componente Anuncios (como es el caso de
los banners).
Utilidad de los módulos
Los módulos están diseñados para ejecutar pequeñas tareas.
Módulo de Búsqueda Inteligente
Este módulo provee búsquedas utilizando el componente de búsqueda inteligente.
URL Embebida
Este módulo muestra una ventana incrustada (iFrame) en una ubicación específica.
Selector de Idioma
Este módulo muestra los idiomas disponibles para el contenido pudiendo elegir entre los que estén
habilitados.
Búsqueda
Este módulo mostrará una caja de búsqueda.
Estadísticas
Este módulo muestra información estadística sobre tu servidor, usuarios del sitio web, artículos, vínculos
a páginas, etc.
Canales electrónicos
El módulo sindicado mostrará un vínculo que permitirá a los usuarios tomar un canal generado por el
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
92
sitio.
Módulos de utilidad
Módulos diseñados para mostrar la navegación del sitio.
Menú
Este módulo muestra un menú en el sitio
Ruta de Navegación
Este módulo muestra la ruta de navegación dentro del sitio.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
93
Agregando un nuevo módulo
Ahora, veamos como agregar un nuevo módulo.
1. Se pulsa “Extensiones” => “Gestor de Módulos”, luego se pulsa el botón “Nuevo” de la barra.
Pulsando en “Nuevo” para agregar un módulo nuevo
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
94
2. De la ventana emergente, se elige el módulo que se desee agregar. Por ejemplo, agreguemos el módulo
“Datos de acceso” (Login) que permite a los usuarios ingresar al sitio web como usuarios registrados.
Seleccionando el módulo “Datos de acceso”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
95
3. Ahora, será necesario agregar la información para el nuevo módulo. No olvidemos elegir la posición
donde se deseas colocar el módulo.
Ingresando información para el módulo
4. Finalmente, se pulsa el botón “Guardar y Cerrar” para completar el proceso. Y vemos el resultado en la
parte frontal.
Módulo de Datos de Acceso en la parte frontal
Se pueden agregar más módulos utilizando el mismo proceso.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
96
Configurando opciones del módulo
Ordenando los módulos
Ahora sabemos que todos los módulos se ubican en una posición como las notas pegadas en una pizarra. Y así
como pasa en el vida real, también en Joomla! se pueden reordenar los módulos usando la función arrastrar y
soltar. Veamos cómo se hace:
1. Se accede al “Gestor de Módulos”.
2. Se pulsa sobre el ícono para arrastrar y soltar el módulo en la posición deseada.
Pulsando en el ícono para arrastrar y soltar el módulo en una nueva posición
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
97
Paso 6: Entendiendo la funcionalidad del sitio
con las Extensiones Joomla!
Como mencionamos anteriormente, las extensiones son programas escritos para usar dentro de Joomla! y
extender así la funcionalidad de Joomla!. Por ejemplo, si se desea tener una presentación de imágenes, una
galería de video o un formulario de contacto avanzado, entonces se tendrán que instalar extensiones para dichos
propósito. Para información más detallado sobre las extensiones Joomla!, por favor habrá que revisar la
sección anterior de Extensiones.
Por defecto Joomla! se instala con varias extensiones cubriendo las necesidades básicas.
Anuncios
Extensión para mostrar y gestionar anuncios de imagen
Contactos
Extensión para administrar a los contactos y mostrar el formulario de contacto
Fuentes de Noticias
Extensión para gestionar y mostrar canales RSS generados por el sitio
Redireccionar
Extensión para gestionar el redireccionamiento de URLs dentro del sitio
Vínculos Web
Extensión para gestionar y mostrar los vínculos
Ahora veamos de cerca a una de las extensiones que vienen por defecto para entender cómo funcionan las
extensiones en general.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
98
Trabajando con la extensión por defecto de “Contactos”
En esta sección, aprenderemos como usar la extensión Joomla! de “Contactos”. Esta extensión te permite crear
un formulario de contacto para que las personas puedan enviar mensajes por medio del correo electrónico a
contactos del sitio.
Creando la categoría de contacto
Necesitamos tener contactos antes de que los usuarios puedan ponerse en contacto con ellos por medio del
formulario. Pero para organizar mejor los contactos, necesitamos crear primero sus categorías.
1. Dirigirse a “Componentes” => “Contactos” => “Categorias”
Click en la categoría de contactos
2. Luego, se pulsa el botón “Nuevo” en la barra para crear una nueva categoría de contactos.
Pulsando “Nuevo “para crear una nueva categoría
3. Luego se completa el título de tu nueva categoría de contacto, por ejemplo “Administradores del Sitio” y se
guardan los cambios pulsando en “Guardar y Cerrar”.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
99
La nueva categoría de contacto
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
100
Creando un nuevo contacto
Cuando las categorías de contactos están listas, se pueden crear contactos individuales.
1. Se entra en “Componentes” => “Contactos” => “Contactos”
Se pulsa “Contactos” del menú "Componentes"
2. Luego, se pulsa en el botón “Nuevo” de la barra para crear un nuevo contacto.
Pulsando el botón “Nuevo” para crear un nuevo contacto
3. Luego se teclean los siguientes campos en la sección “Editar Contacto”:
Nombre
Se Ingresa el nombre del contacto – podría ser nuestro propio nombre
Categoría
Se selecciona la categoría que has creado anteriormente
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
101
Ingresa la información de contacto
4. Luego, en la pestaña de “Detalles del Contacto” se teclea la dirección de correo electrónico en el
parámetro “E-mail”. Este parámetro es muy importante, ya que toda la información que se recolecte del
formulario de contactos será enviada a esta dirección.
Ingresando la dirección de correo del contacto
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
102
5. Finalmente, se pulsa en “Guardar y Cerrar” para guardar los cambios en este contacto.
Crear un ítem del menú para mostrar un formulario de contacto
Ahora que hemos creado un contacto al que se le podría enviar un formulario, es hora de crear el formulario para
que los usuarios puedan teclear en él para ponerse en contacto.
1. Se selecciona el elemento de menú “Menus” => “Menú Principal” => “Agregar nuevo elemento del
menú”
Agregar nuevo elemento al menú
2. Luego se pulsa en “Seleccionar” para elegir el tipo de elemento de menú.
Se pulsa el botón “Seleccionar” para el tipo de elemento de menú
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
103
3. Luego, elige “Contacto Único”.
Selecciona “Contacto Único”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
104
4. Luego, se deberá seleccionar el contacto deseado pulsando en el botón “Seleccionar”.
Pulsar en “Selecccionar”
5. Luego se pulsa sobre el contacto creado anteriormente.
Pulsando el contacto deseado
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
105
6. Luego se completa en el campo de “Título del Menú” con el título que se le desea dar, por ejemplo,
“Contacto”.
Llenando el campo de “Título de menú”
7. Finalmente, se pulsa “Guardar y Cerrar” para grabar este elemento del menú.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
106
Ahora, vayamos a la página web en la parte frontal para ver el resultado. Observamos en el “Menú Principal” y
veremos un elemento de menú “Contacto”. Al pulsar sobre este se verá un formulario de contacto.
Formulario de contacto en el sitio
Ahora hemos agregado un formulario de contacto básico. Para futuros ajustes, hay muchas opciones
disponibles.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
107
Más ajustes
Dirígirse a “Contactos” o “Categorías” y se pulsa en “Opciones” en la barra.
Pulsando el botón " Opciones”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
108
En la página mostrada, se pueden configurar todo tipo de parámetros según se necesite.
Opciones del Gestor de Contactos
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
109
Agregando nuevas extensiones
Las extensiones predeterminadas de Joomla! son buenas para empezar, pero con el tiempo y la experiencia, no
serán suficientes. Según la página vaya evolucionando, se querrá agregar más funcionalidades que irán más
allá de las extensiones predeterminadas. En esta parte, veremos las extensiones que se podrían agregar a la
página web y cómo hacerlo.
Definir las extensiones a ser instaladas
Por supuesto, cada página web tiene su propio propósito y no hay una lista predeterminada de extensiones que
logren dichos propósitos. De cualquier forma, hay algunos tipos de extensiones que cualquier página debería
tener. Por ejemplo, galería de imágenes, galería de videos, construcción de formularios, integración con redes
sociales, presentación en dispositivos móviles, etc. Hay muchos artículos que hablan al respecto y acá hay
algunos de los más útiles.
Extensiones de Joomlashine– JSN PowerAdmin, JSN Uniform y JSN ImageShow: Todas estas están
desarrolladas para las necesidades más comunes de páginas web. Estas extensiones reciben muchos cumplidos
de los usuarios Joomla! Por ser extensiones con buen código, fáciles de usar y con características
comprensivas.
Las 10 mejores! extensiones - Brian Teeman: El listado de extensiones según el criterio propio de Brian.
Featured extensions on JED (Extensiones destacadas en el JED – el directorio de extensiones Joomla!)
Mis 10 mejores! extensiones de Joomla! - Kristoffer Sandven: Las extensiones personales favoritas del
famoso bloguero de Joomla!. Tanto para la parte frontal como para la parte trasera.
Mis extensiones Joomla! "debes tenerlas" - Anthony Olsen: Un listado de extensiones que aumentan las
habilidades del núcleo Joomla!. Habrá que revisar en el listado para asegurarnos que estas extensiones
estén soportadas por Joomla! en su versión 3.x.
Extensiones Joomla! 3.x en el JED: Todas estas extensiones, son cuidadosamente revisadas por el
equipo del JED antes de publicarse. También se deberá revisar los puntajes y comentarios de la
comunidad para elegir las que más se ajusten a las circunstancias del sitio.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
110
JSN PowerAdmin – Una extensión que simplifica la interface de administración
JSN Uniform – Extensión sencilla para generar y gestionar múltiples formularios
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
111
Encontrando extensiones útiles
El mejor lugar para encontrar extensiones útiles es el Directorio de extensiones Joomla! (JED). Es una
excelente fuente con gran número de extensiones Joomla! divididas por categorías basadas en su funcionalidad.
Directorio de extensiones Joomla!
Todas las extensiones tienen una sección de votos y comentarios, donde se pueden revisar y juzgar por nosotros
mismos. Este directorio es moderado por profesionales y se puede tener cierto nivel de confianza en los
elementos ahí publicados.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
112
Instalando nuevas extensiones
Después de seleccionar y descargar la extensión que creamos necesaria para el sitio, se deberá saber cómo
instalarla y hacerla funcionar en el sitio.
1. Ir a “Extensiones” => “Gestor De Extensiones”
2. Luego, se pulsa el botón “Examinar” para seleccionar el paquete de la extensión Joomla! que se haya
descargado previamente.
Click en Examinar (Browse)
3. Después se pulsa en “Subir e Instalar” para subir e instalar este archivo en el sitio. (es importante
durante este proceso no salir de esta página hasta no ver el mensaje de conclusión de la instalación)
Pulsar “Subir e instalar”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
113
Joomla! automáticamente sabe el lugar correcto para colocar la extensión basada en su tipo. Por ejemplo, si
la extensión es un componente, se le verá en el menú “Componentes”; o si la extensión es un módulo, se le
podrá encontrar en el “Gestor de Módulos” y así sucesivamente.
JSN UniForm en Componentes
Desinstalando extensiones
Si se encuentras una extensión que no cumple las necesidades del sitio, se deberá desinstalar.
1. Se acude a “Extensiones” => “Gestor de Extensiones” y se pulsa “Administrar”.
2. Se ingresa el nombre completo o parte del mismo en el campo de “Filtro” y se pulsa el ícono de
“Buscar”.
3. Se selecciona la casilla al costado de la extensión que se deseas desinstalar y se pulsa el botón de
“Desinstalar” en la barra.
Desinstalando la extensión
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
114
Paso 7: Gestiona tu página web Joomla! con
JSN PowerAdmin
Ya tienes tu sitio web Joomla! luego de haber seguido los 6 pasos descritos anteriormente. Luego, seguramente
puede que necesites actualizar contenido diariamente o mensualmente: editar artículos publicados, crear nuevos
menús o nuevos módulos, etc.
No tienes que hacer todo esto con muchos clicks y muchos pasos como te hemos mostrado. Es hora de
revelarte un secreto: JSN PowerAdmin. JSN PowerAdmin es una extensión de navegación administrativa
que hace que gestionar tu sitio web Joomla! sea más sencillo que nunca – con Spotlight Search (Búsqueda de
Foco), Site Manager (Gestor de Sitio), Template Styles Manager (Gestor de estilo de Plantilla) y más.
Características principales de JSN PowerAdmin
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
115
Gestor de Sitio (Site Manager): Gestiona las tres secciones principales de tu sitio web: Menús
(Menu’s), Componentes (Component’s) y Módulos (Modules), en un mismo lugar.
Gestor de Sitio
Búsqueda de Foco (Spotlight Search): Para buscar un elemento de una página web, como artículos, en
pocos segundos.
Búsqueda de Foco con una lista de resultados
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
116
Gestor de Estilo de Plantillas (Template Style Manager): Para controlar el estilo de la plantilla –
editar, establecer por defecto, duplicar, borrar o desinstalar la plantilla – fácilmente.
Estilo de Plantilla
JSN PowerAdmin es totalmente GRATIS. Solo tienes que descargarlo e instalarlo en el back-end de Joomla!
según las instrucciones en la sección “Instalando nuevas extensiones”
Descarga gratuitamente JSN PowerAdmin
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
117
Gestiona tu sitio web Joomla! con “Gestor de Sitios” (Site Manager )
Toma mucho tiempo cuando tienes que ir a cada menú, modulo o artículo para editarlo. Ahora, puedes
controlar tu sitio web fácil y rápidamente con Site Manager (Gestor de Sitios). Este contiene Menú (Menu),
Componentes (Component) y Módulos (Module) en una sola área.
Para accede has click en Site Manager, click en “Components” -> “JSN PowerAdmin” -> “Site Manager”.
Gestor de Sitios incluye paneles de Menú (Menu), Componentes (Component) y Módulos (Module)
Más convenientemente, puedes ajustar de tamaño las 3 secciones como quieras. Desplaza la barra entre 2
secciones a la posición que deseas agrandar o reducir. Además, todos los cambios que realices acá se guardan
automáticamente.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
118
Gestiona Menús (Manage Menus)
Elementos de menú en el front-end
Puedes controlar menús y elementos de menús fácilmente con la pestaña MENU en el Gestor de Sitios (Site
Manager).
Controla todos los menús o ítems de menú
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
119
Ver elementos:
Todos los elementos de menús publicados se muestran. Algunos no publicados no. Para
mostrar/ocultar estos elementos despublicados, da click en el ícono arriba a la derecha.
Click en el ícono para mostrar elementos no publicados
Click en el ícono para mostrar elementos no publicados
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
120
Crea un nuevo menú / element de menú:
Instrucciones para agregar un nuevo menú y elementos al menú
Edita el menú actual / elementos de menú:
Edita el menú actual o un elemento de menú
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
121
Arrastra y suelta para mover elementos en un menú:
Arrastra elementos del menú y elige el lugar para soltarlo
Personaliza elementos de menú:
También puedes Despublicar (Unpublish), Rehacer (Rebuild), Portada (Set as home), Comprobar los
elementos de menú (Check in menu items), etc.
Controla todos los menús o elementos de menú
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
122
Maneja Contenido
La sección de COMPONENTE (COMPONENT) te muestra todo el contenido de los elementos de menú
seleccionados. Te deja editar los elementos, mostrar u ocultar elementos, según desees.
Click en “Seleccionar” (Select) para editar un artículo
Ver elementos:
Da click en el icono de abajo para mostrar/ocultar elementos deshabilitados en la página.
Click para mostrar u ocultar elementos no publicados
Editar artículos/categorías:
Acá, puedes editar un artículo rápidamente después de haberlo seleccionado. Da click en el artículo
para mostrar las opciones debajo:
Editar artículo: Para modificar el contenido del artículo.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
123
Ocultar/Mostrar elementos: Click para mostrar u ocultar elementos habilitados o
deshabilitados con dos opciones “Para todas las páginas globalmente” ó “Para esta página
únicamente”.
Habilitar vínculo/Deshabilitar vínculo: Click para mostrar un vínculo
habilitado/deshabilitado con dos opciones: “Para todas las páginas globalmente” ó “Para esta
página únicamente”.
o Para todas las páginas globalmente: El cambio en el elemento será aplicado a todos
los componentes en todas las páginas del sitio.
o Para esta página únicamente: El cambio en el elemento será aplicado para esta
página únicamente.
Editar artículo, mostrar u ocultar elemento y vínculo en un artículo
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
124
Editando una categoría es lo mismo que editar un artículo.
Editar u ocultar elemento en una categoría
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
125
Gestionar módulos
En la sección de MÓDULOS (MODULES) puedes gestionar todos los módulos de la plantilla actual por
defecto.
Módulos en el front-end
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
126
Ver módulos:
Los módulos publicados se muestran. Los módulos despublicados y sus posiciones que tienen un
módulo ingresado se muestran o se ocultan. Puedes gestionar estos elementos haciendo click en el
botón azul arriba a la derecha y marcando “Módulos”, “Posiciones” o ambos.
Click para mostrar o no mostrar Módulos o Posiciones
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
127
Crea un nuevo módulo:
Click en cualquier posición para agregar un nuevo módulo
Ver posiciones de módulos
Puedes dar click en la posición de un módulo y seleccionar “Ver posición” para ver todas las posiciones
de módulos de la plantilla.
Click en cualquier posición para ver las posiciones de la plantilla que está por defecto
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
128
Editar los módulos actuales (current modules):
Con cualquier módulo, puedes seleccionarlo para Editarlo, Cambiar su posición, Despublicarlo, etc.
Con módulos que están marcados, puedes marcarlos antes de editarlos.
Editar módulos (Edit modules)
Cambia posiciones de módulos mostrando todas las posiciones de la plantilla
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
129
Arrastra y Suelta para mover las posiciones de módulos.
Arrastra y suelta (Drag and drop) un módulo a una nueva posición
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
130
Acceso rápido a cualquier elemento con Búsqueda de Foco (Spotlight
Search)
Necesitas dar muchos clicks para buscar objetos en el front y/o backend de Joomla!. Búsqueda de Foco
(Spotlight Search) te ayuda a buscar elementos en tu sitio web y acceder a ellos rápidamente:
En el front-end, copia el título que deseas editar.
Dirígete al back-end, pega el título en el espacio de Spotlight Search, el cual se ubica en la esquina
superior derecha de tu panel de administración.
Vas a obtener todos los resultados de varios tipos de elementos inmediatamente. Tan solo selecciona
el apropiado elemento para editarlo.
El resultado se mostrará inmediatamente
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
131
Da click en el ítem para tener acceso inmediato a la página de ajuste. Acá, podrás cambiar el contenido
como lo harías normalmente.
Ten acceso inmediato a la página de ajustes
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
132
Maneja el estilo de la plantilla con el Gestor de Estilo de Plantilla
(Template Style Manager)
JSN PowerAdmin te provee una forma rápida de acceder todos los estilos instalados de la plantilla. También
puedes realizar algunas operaciones básicas en la plantilla tales como Editar, Establecer por defecto,
Duplicar, Borrar y Desinstalar rápidamente con algunos clicks.
Ahora veamos como cambiar la plantilla por defecto.
La plantilla por defecto en el front-end es ahora Beez3
Dirígete a “Extensions” => “Template manager” y da click en “Template Styles” en el sub-menú.
Selecciona “Estilo de Plantilla” (Template Styles)
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
133
Luego, en ventana modal, verás todas las plantillas instaladas, tanto las del sitio como las de
administrador. La plantilla por defecto está seleccionada en amarillo.
Gestor de estilo de plantillas
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
134
Da click en la plantilla que deseas establecer como predeterminada y elige “Make Default”. Por ejemplo,
hemos elegido la plantilla Protostar.
Click en "Hacer Predeterminada " (Make Default)
Finalmente, da click en “Cerrar” (Close) para salir de la ventana modal.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
135
Ahora, vamos al front-end para ver el resultado. La plantilla ahora es Protosta.
Protosta es la plantilla predeterminada
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
136
Otras características
Acceso rápido a elementos editados previamente
Todos los elementos que has configurado en el pasado se almacenan en Historia (History). Puedes acceder a
ellos con un par de clicks.
Click en el ícono de Reloj arriba al costado de la Búsqueda de Foco (Spotlight search box).
Click en el ícono de reloj
Da click en el elemento que deseas acceder.
Click en el elemento que editaste en el pasado
Serás re direccionado a ese elemento.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
137
Acceso rápido al perfil del usuario
Normalmente como administrador, deseas revisar tus mensajes, tu perfil o simplemente la cantidad restante en
tu sesión. Para ir a tu perfil, tu:
Encontraras el ícono de Persona arriba, junto al ícono de reloj. La cantidad de color azul representa el
porcentaje restante de tiempo en tu sesión.
El ícono de persona
Desplaza el ratón sobre el ícono y da click a Perfil (Profile) en el menú desplegable. Una nueva ventana
modal aparecerá para que edites tu perfil.
Da click en “Perfil” para ir a la página del usuario
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
138
Página de Ajustes del perfil en la ventana modal
Menú administrador mejorado
Hasta cierto punto puede que desees remover una extensión. No necesitas ir a “Gestor de Extensión”
(Extension Manager) como de costumbre; puedes desinstalarlo con la función de DesinstalaciónRápida
(Quick Uninstall). Funciona con algunas extensiones de Joomla! por defecto (Anuncios, Contactos, etc.) y
todas las extensiones de terceros de tu sitio Joomla!.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
139
Desinstalación rápida de una extensión
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
140
Configuración
Para ayudarte a gestionar el back-end de Joomla! en la forma que prefieras, JSN PowerAdmin tiene una página
de “Configuración” (Configuration). Acá podrás configurar el logo y su vínculo de menú, cobertura de
búsqueda o número de historial; apagar la característica de “Desinstalar” (Uninstall) o gestionar el soporte de
extensiones en encendido (on).
Dirígete a “Component” => “JSN PowerAdmin” y da click en “Configuration”
Dirígete a la página de Configuración/Ajustes de JSN PowerAdmin
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
141
Puedes configurarla como desees en la página de “Configuración” (Configuration).
Vista previa de la página de “Configuración”
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
142
“Joomla! 2.5 Simple&Fácil” – La versión anterior de Joomla! 3.x Simple&Fácil
Este libro electrónico (e-book) Joomla! 3.x Simple&Fácil es una actualización a la versión anterior Joomla!
2.5 Simple&Fácil, la que obtuvo más de 50.000 descargas.
Aunque la versión 3.x de Joomla! es la última versión, solo es una de soporte corto (Hasta abril del 2013), si
deseas armar un sitio en la versión estable de Joomla!, deberías elegir la versión 2.5 (la que tiene soporte hasta
Primavera del 2013) y te recomendamos para ello el manual paso a paso de Joomla! 2.5 Simple&Fácil.
Joomla! 2.5 Simple&Fácil, escritos por el equipo de JoomlaShine
93 páginas
Idiomas: Inglés, Alemán y Danés
El libro electrónico está disponible en Inglés, German y Danés. Puedes descargarlo GRATIS.
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
143
Conclusión
Un buen libro es como un tesoro y esperamos que pienses así mientras lees este libro. Todo nuestro
conocimiento sobre Joomla! 3.x ha sido editado de forma muy cuidadosa para traerte 6 capítulos de la más útil
información para ayudarte a crear tu sitio paso-a-paso con Joomla! 3.x. Sabrás los aspectos básicos de Joomla!
para que puedas construir una página completa: desde como instalarlo hasta como trabajar con este CSM.
En el equipo de Joomlashine hemos querido dejar de todo corazón lo mejor en este libro. Siéntete en la libertad
de compartir lo que has aprendido con todos los demás. También ha sido nuestro propósito y un honor haberte
compartido nuestro conocimiento.
Aunque hemos hecho nuestro mejor esfuerzo, siempre podemos haber cometido errores. Apreciaremos todas
las ideas y comentarios de nuestros lectores para hacerlo mejor aun!
“Joomla! 3.x Made Easy” © JoomlaShine.com
Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine
144
Referencias
*Publicado a finales de octubre del 2012, Joomla! 3 – En 10 Pasos fáciles, escrito por Hagen Graff es también
un buen libro para principiantes. Con información detallada sobre Joomla! 3.x, te garantizo que podrás
encontrar más conocimiento de utilidad que te ayuden a construir tu sitio. Este libro tiene diferentes versiones
de idioma, tales como Inglés, Alemán, Francés y ahora está en Español, así que podrás elegir la versión que
corresponda. Esta versión es de descarga gratuita.
También puedes ir a nuestro blog oficial de Joomlashine o ver nuestro canal en Youtube para aprender más
sobre Joomla!, así como para estar actualizado con las últimas noticias de Joomla!. No solo hay temas
interesantes, sino también encontrarás temas útiles sobre Joomla! que no querrás perderte. Puedes dejar tus
comentarios debajo de cada artículo – lo apreciaremos mucho!
Finalmente, podemos recomendarte algunos buenos sitios que consideramos puedes usar como referencia:
http://docs.joomla.org/
http://www.joomlatutorials.com/
http://www.joomlablogger.net/
http://www.ostraining.com/blog/joomla/
http://www.theartofjoomla.com/
http://www.youtube.com/user/Joomla
http://www.joomla-wiki.de/dokumentation/Joomla!_Wiki
http://www.joomlaportal.de/forum.php
http://www.joomlaspanish.org/foros/
http://www.joomla.it/mediawiki/index.php/Pagina_principale
* son referencias en inglés, ya que este libro no es una referencia a Joomla! en español; es una traducción del material original en inglés