Joomla 3 x simple&facil by Juan Antonio Acedo Luque

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

Contenidos Gente detrás de este libro ............................................................................................................................... 2 ContenidosContents .......................................................................................................................................... 3 Características del Joomla! 3.x ........................................................................................................................ 4 Paso1: conozca el CMS Joomla! ..................................................................................................................... 5 ¿Qué es el CMS Joomla!? ........................................................................................................................................... 5 ¿De qué está hecho Joomla!? .................................................................................................................................... 8

Paso 2: Instalando Joomla! 3.x en su hospedaje local ......................................................................... 25 Instalando XAMPP........................................................................................................................................................ 26 Instalando Joomla! ...................................................................................................................................................... 29

Paso 3: Crear contenido para su propio sitio Joomla! ......................................................................... 31 Preparando la estructura del contenido................................................................................................................. 31 Creando contenido ...................................................................................................................................................... 32 Manejando el contenido con el JSN PowerAdmin .............................................................................................. 48 Hacer que los artículos se vean bien ...................................................................................................................... 49

Paso 4: Personaliza la apariencia de tu sitio web con una Plantilla Joomla!................................ 76 ¿Qué es una plantilla Joomla!? ............................................................................................................................... 76 Seleccionando una plantilla Joomla! ...................................................................................................................... 78 Instalando la plantilla Joomla! .................................................................................................................................. 80

Paso 5: Ordenando los módulos en posiciones ............................................................................................. 85 ¿Qué es un módulo y su posición en Joomla!? .................................................................................................. 85 Agregando un nuevo módulo a una página ............................................................................................................. 89

Paso 6: Entendiendo la funcionalidad del sitio con las Extensiones Joomla! ............................. 96 Trabajando con la extensión por defecto de “Contactos” ............................................................................... 97 Agregando nuevas extensiones ............................................................................................................................... 108

Paso 7: Gestiona tu página web Joomla! con JSN PowerAdmin .................................................... 113 Gestiona tu sitio web Joomla! con “Gestor de Sitios” (Site Manager ) ....................................................... 116 Acceso rápido a cualquier elemento con Búsqueda de Foco (Spotlight Search) .................................... 129 Maneja el estilo de la plantilla con el Gestor de Estilo de Plantilla (Template Style Manager) .............. 131 Otras características ................................................................................................................................................. 135 Configuración .............................................................................................................................................................. 139

Conclusión ...................................................................................................................................................... 142 Referencias ...................................................................................................................................................... 143

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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 4

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

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

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 7

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

¿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

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. 9

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

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

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

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

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

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 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

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

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 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 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 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 Aquí algunos ejemplos de plantillas:

JSN Pixel

JSN Boot 22

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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”. 23

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

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

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 26

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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 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!. 28

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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 29

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  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

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

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 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

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

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 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 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 37

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

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 39

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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 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 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 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 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

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

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 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

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

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

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 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

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 52

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

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

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 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 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 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 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 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 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 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

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

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

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 65

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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 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

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 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 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

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 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 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 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). 74

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

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

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

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

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

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” 80

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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 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

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

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

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

¿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

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

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. 88

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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. 89

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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 90

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

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 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 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

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

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

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”. 97

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

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

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 100

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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ú

101

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 3. Luego, elige “Contacto Único”.

Selecciona “Contacto Único”

102

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

103

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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ú.

104

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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.

105

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Más ajustes Dirígirse a “Contactos” o “Categorías” y se pulsa en “Opciones” en la barra.

Pulsando el botón " Opciones”

106

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 

En la página mostrada, se pueden configurar todo tipo de parámetros según se necesite.

Opciones del Gestor de Contactos

107

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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.

108

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

JSN PowerAdmin – Una extensión que simplifica la interface de administración

JSN Uniform – Extensión sencilla para generar y gestionar múltiples formularios 109

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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.

110

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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” 111

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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 112

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

113



“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

114



“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

115

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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.

116

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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ú

117

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 

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

118

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 

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ú

119

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 

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ú

120

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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. 121

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  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

122

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Editando una categoría es lo mismo que editar un artículo.

Editar u ocultar elemento en una categoría

123

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

124

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 

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

125

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 

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

126

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 

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

127

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Arrastra y Suelta para mover las posiciones de módulos.

Arrastra y suelta (Drag and drop) un módulo a una nueva posición

128

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

129



“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

130

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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)

131



“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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

132



“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 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.

133

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Ahora, vamos al front-end para ver el resultado. La plantilla ahora es Protosta.

Protosta es la plantilla predeterminada

134

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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.

135

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

136

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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!.

137

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Desinstalación rápida de una extensión

138

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

139



“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Puedes configurarla como desees en la página de “Configuración” (Configuration).

Vista previa de la página de “Configuración”

140

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

“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.

141

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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!

142

“Joomla! 3.x Made Easy” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

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

143