Joomla3.XSimple&Facil

Gente detrs de este libro

Escritores

Dao Ngoc Anh Bui Thi Mo

Editores

Nguyen Thi Thanh Huyen Bui Anh Tuan Bui Huy Thang

Diseadores

Ho Huy Tung Luu Minh Son

Traduccin al espaol

Daniel Hacohen Sergio Rocha

Fecha de Publicacin: Julio 2013

Tercera Edicin.

Joomla! 3.x Made Easy JoomlaShine.com

Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

3

Contenidos Gente detrs de este libro ............................................................................................................................... 2

ContenidosContents .......................................................................................................................................... 3

Caractersticas 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 artculos 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 mdulos en posiciones ............................................................................................. 85

Qu es un mdulo y su posicin en Joomla!? .................................................................................................. 85

Agregando un nuevo mdulo a una pgina ............................................................................................................. 89

Paso 6: Entendiendo la funcionalidad del sitio con las Extensiones Joomla! ............................. 96

Trabajando con la extensin por defecto de Contactos ............................................................................... 97

Agregando nuevas extensiones ............................................................................................................................... 108

Paso 7: Gestiona tu pgina web Joomla! con JSN PowerAdmin .................................................... 113

Gestiona tu sitio web Joomla! con Gestor de Sitios (Site Manager ) ....................................................... 116

Acceso rpido a cualquier elemento con Bsqueda de Foco (Spotlight Search) .................................... 129

Maneja el estilo de la plantilla con el Gestor de Estilo de Plantilla (Template Style Manager) .............. 131

Otras caractersticas ................................................................................................................................................. 135

Configuracin .............................................................................................................................................................. 139

Conclusin ...................................................................................................................................................... 142

Referencias ...................................................................................................................................................... 143



4

Caractersticas del Joomla! 3.x Joomla! 3.x es la ltima version de Joomla!. Es la publicacin rpida que estar siendo apoyada hasta Abril del

2013. Esta nueva versin es un mundo totalmente nuevo y excitante, con muchas mejoras atractivas. Usted

puede ver las 6 principales mejoras en la infografa de abajo.

Para ms informacin sobre las caractersticas de Joomla! 3.x acuda a http://www.joomla.org/3/en.

Six great features of Joomla! 3.x



5

Paso1: conozca el CMS Joomla! En el pasado si se necesitaba un sitio de internet, la nica opcin era contratar a un estudio profesional que lo

construyera, y luego necesitara depender absolutamente en ellos para el mantenimiento del sitio. Pero ahora, con

el aumento de programas abiertos, uno mismo puede, fcilmente, construir su sitio utilizando un (CMS) Contenido

Manejado Sistemticamente. Hay distintos CMS disponibles, pero el ms apropiado para sitios pequeos 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).



6

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

La parte frontal del sito

Viendo un artculo en la parte frontal



7

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

La parte trasera de Joomla!

Editando un artculo en la parte trasera



8

De qu est hecho Joomla!?

Ahora exploremos las partes principales de Joomla!

Contenido

En Joomla!, el contenido consiste de artculos, categoras y media.

Artculos

Los artculos son los principales bloques de construccin de un sitio Joomla!. En la parte frontal se puede

fcilmente reconocer un artculo como una pieza de texto que puede o no incluir imgenes, presentados en la

zona principal de contenidos.

The article Getting started

En la parte trasera, los artculos son administrados usando el Gestor de Artculos al cual se puede acceder

por medio de Contenido => Gestor de Artculos.



9

El Gestor de Artculos

Aqu se pueden crear nuevos artculos, editarlos, elegir si publicarlos o des-publicarlos, etc.

Categoras

Las categoras ayudan a organizar los artculos de forma ms conveniente. Pensemos en las categoras como

folders que contienen archivos. Por ejemplo, una categora Productos puede contener todos los artculos

relacionados con sus productos. O una categora llamada Sobre Nosotros puede contener artculos como

Nuestra Compaa, Nuestra Visin, Mesa Directiva, etc.

En la parte trasera las categoras son manejadas con el Gestor de Categoras accesible por medio del men

Contenido => Gestor de Categoras.

El Gestor de Categoras

Aqu se podr crear nuevas categoras, editarlas, elegir si publicarlas o des-publicarlas, etc.



10

Etiquetas

Las etiquetas son palabras claves o trminos asignados a una pieza de informacin. Describen el contenido del

artculo. Por ejemplo, puedes agregar las etiquetas Plantillas Joomla! y Extensiones Joomla! al artculo

Comenzando con Joomla!.

Los artculos con etiquetas similares se agruparn en conjunto de tal forma que a la hora que el usuario desee

realizar una bsqueda de una etiqueta en concreto, pueda encontrarlo mas fcilmente. Puedes fcilmente 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 edicin del artculo. Puedes verlo en Contenido

=> Gestor de Artculos y luego ve a cada artculo para asignarle las etiquetas.

La funcin de Etiqueta ate permite asignar palabras claves a un artculo en particular

Para gestionar todas tus etiquetas, ve a Componentes => Etiquetas



11

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 imgenes, sino adems 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

ms detalle en el captulo Paso 3: Crear contenido para su propio sitio Joomla!



12

Mens

Por medio de los mens los visitantes pueden accesar y navegar en el contenido del sitio. Se pueden crear

mltiples mens 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 mens, vaya a el gestor de mens, por medio de Mens => Gestor de Mens.



13

El Gestor de Mens en el administrador de Joomla!

En el gestor de mens, se pueden crear mens y componentes del men ligndolos 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.



14

Usuarios

Joomla! permite al sitio tener mltiples 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.



15

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 galera de videos o una forma avanzada

de contactos, entonces se necesitar instalar extensiones para estos propsitos.

Por defecto Joomla!, es empaquetado con varias extensiones que cubren las necesidades bsicas. Si se desea ms,

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 bsicos de extensiones: componentes, mdulos, plugins, plantillas y lenguajes. Cada uno de estas

extensiones operan distintas funcionalidades especficas.

Demos un vistazo!



16

Componentes

El componente es la forma ms compleja de extensin. Puede ser visto como una aplicacin que desempea

ciertas funciones y despliega contenidos especficos en el sitio. Como mencionamos anteriormente, una galera

de video es un ejemplo de componente. Tambin puede ser un carrito de compras, un sistema para agendar,

foros, y mucho ms.

El componente Canales Electrnicos 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 electrnicos generada por el componente Canales electrnicos.

Todos los componentes estn localizados en la seccin Componentes.



17

El men Componentes en la parte trasera

Por defecto, Joomla! Es empaquetado con los siguientes componentes: Anuncios, Contactos, Canales

Electrnicos, Redireccin, Buscar, Bsqueda Inteligente, Etiquetas y Enlaces Web.

Mdulos

Los mdulos tienen un rol similar al de los componentes, pero en una menor escala. Ellos desempean tareas

simples y despliegan contenido en pequeos bloques en el sitio.



18

Los Mdulos como aparecen en la parte frontal

Ejemplos de mdulos son: la caja de bsqueda, men, forma de acceso, informacin de derechos de autor del

pie de pgina, etc. En muchos casos los mdulos trabajan en conjuncin con componentes para presentar

contenido. Por ejemplo, un componente de carro de compras se usa para administrar productos y un mdulo es

usado para mostrar los productos ms solicitados.



19

Todos los mdulos son accesibles mediante el men Extensiones => Gestor de Mdulos.

El Gestor de Mdulos en la parte trasera



20

Plantillas

Las plantillas controlan el aspecto de diseo grfico del sitio. Estas determinan las capas, colores, tipografas,

grficos y otros aspectos del diseo que harn al sitio nico.

En general, una plantilla consiste en 3 elementos:

Elementos grficos estticos, como imgenes de fondo, diseo decorativo, logotipo, etc.

El rea principal de contenido que muestra informacin generada por los componentes.

Las mltiples posiciones para mostrar el contenido presentado por los mdulos en locaciones especficas.

Ejemplo de imagen de fondo, posicin de mdulos y rea de cuerpo principal /contenido



21

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.



22

Aqu algunos ejemplos de plantillas:

JSN Pixel

JSN Boot



23

Plugins

Los plugins estn diseados para desplegar contenido en componentes y mdulos. Los plugins pueden desempear

tareas en ciertos puntos mientras que el sitio se est cargando. Se puede pensar a los plugins como una forma ms

verstil de interactuar con el sistema.

Plugins de contenido Visitas and Lea ms en la parte frontal

Ejemplos de plugins que pueden haberse visto son los de funcionalidad de votacin y el botn de Lea ms

dentro de los artculos. 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 categoras: autentificacin, captcha,

contenido, editor, editores-xtd, extension, buscador, icono-rpido, bsqueda, sistema y

usuario.



24

Idiomas

Idiomas permite correr al sitio en ms 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 traduccin de Frances, del Directorio

de extensiones para idiomas de Joomla! e instalarlo utilizando el Gestor de Extensiones.

Language Manager

Ambos lenguajes instalados sern visibles entonces en Extensiones => Gestor de Idiomas en la parte

trasera.

>>> El prximo 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 probmoslo.



25

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 cmo 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 algn 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 pblico. El hospedaje local, es bsicamente 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

ms: un intrprete 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.



26

Instalando XAMPP

1. Se descarga el paquete de instalacin 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 direccin

http://localhost en el navegador de internet. Se debera poder ver algo como la ilustracin siguiente:

XAMPP for Windows interface



27

4. Se crea una base de datos en phpMyAdmin.

Desde la interface de XAMPP, se pulsa a phpMyAdmin para iniciar la creacin de la base de datos.

Clic a phpMyAdmin



28

5. A continuacin 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!.



29

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 haba descargado en el directorio Joomla3x

4. Se entra en la direccin http://localhost/Joomla3x

5. Se sigen los pasos en la instalacin de Joomla!:

a. Paso 1. Configuracin Principal

Seleccionar Idioma: Se elije su propio idioma del men desplegable, por ejemplo, Espaol

(Espaa)

Nombre del Sitio: Se teclea el nombre para el sitio

Descripcin: Se teclea una descripcin para el sitio

Sitio Fuera de lnea: se decide el status del sitio para cuando se acceda a la parte frontal de

ste: Se pulsa Si para modo fuera de lnea y No para modo En lnea (accesible).

Email del Administrador: Se teclea una direccin de email vlida para el sitio

Nombre de Usuario del Administrador: Se teclea admin por defecto

Contrasea del Administrador: Se teclea la contrasea deseada

Confirmar Contrasea Administrador: Se vuelve a tecleear la misma contrasea

Se pulsa Siguiente para continuar al Paso 2

b. Paso 2. Configuracin 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

Contrasea: 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 automticamente

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



30

Finalizacin: Se puede optar por instalar informacin de muestra o no, pulsando en la

seccin correspondiente.

Revisin: Este es el paso para revisar toda la informacin configurada en el paso 1. Luego de

revisarlse se pulsa Instalar.

Cuando la instalacin finalice, solo se necesita hacer clic al botn Remover folder de

Instalacin para completar el proceso de instalacin. Despus de esto se puede pulsar

Sitio para ver el sitio recin creado (la parte frontal) o Administrador para acceder al

rea de administracin (la parte trasera).

Ahora tiene su primer sitio Joomla! instalado exitosamente! No fue tan difcil verdad? Si se tiene cualquier

problema con el proceso de instalacin, se puede intentar con las siguientes fuentes para consulta:

Foro Oficial de Joomla!

El foro de Joomla! es uno de los ms 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 instalacin de Joomla! 3.x, se puede encontrar la informacin en la

categora 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 sern 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 prximo 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, llenmoslo con contenido.



31

Paso 3: Crear contenido para su propio sitio

Joomla! Naturalmente el elemento ms importante en cualquier sitio es el contenido. En este paso:

1. Se preparar la estructura del contenido

2. Se crearn las categoras y artculos

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 vveres. En Joomla! los artculos son como

productos, las categoras son como los anaqueles que contienen a los productos, y los mens son como los

separadores de estos anaqueles. Ahora, imaginemos que se tiene un sitio de internet que vende objetos lujosos.

La estructura del contenido podra verse as:

1. Acerca

a. Acerca mi sitio

b. Cmo comprar/ordenar productos

c. Cmo hacer los pagos

2. News

a. Ultimas Noticias

b. Recin llegadas

c. En Venta

d. Cupones

e. Promociones

3. Soporte

a. Lnea directa de informacin

b. Servicio a Clientes en Lnea

c. Contctenos



32

Creando contenido

Cuando la estructura de contenido est lista en el papel, ahora se debe reproducir en Joomla! Comencemos con

la creacin de las categoras.

Categoras

1. Se va a Contenido => Gestor de Categoras y se pulsa en Aadir Categora

Add a new category

2. A continuacin se teclea el ttulo de la categora Acerca y se pulsa el botn Guardar y Cerrar de

la barra de herramientas.



33

Entrando informacin de la Categora

Luego de guardar, se puede ver la nueva categora Acerca que aparece en el Gestor de Categoras.

La categora Acerca

Se pueden crear el resto de las categoras de la misma manera.



34

6 new categories

Cuando las categoras estn listas es hora de crear los artculos.



35

Artculos

Agreguemos un nuevo artculo en la categora Acerca.

1. Se acude a Contenido => Gestor de Artculos y se pulsa Aadir Artculo

Add new article

2. A continuacin es necesario configurar 3 parmetros:

Ttulo: Se teclea Acerca de mi sitio.

Categora: Se selecciona Acerca de la lista.

Texto del Artculo: Se teclea el contenido del artculo.

Por ahora, asumamos que se tiene un artculo con texto simple. Despus, en la seccin Hacer que los

artculos se vean bien discutiremos cmo crear artculos ricos en contenido.



36

3. Si se desea que un artculo sea mostrado en la portada, por favor, se localiza el parmetro de

Destacado y se cmbia a Si. Esto har que el artculo aparezca en la portada del sitio.

El parmetro Destacado del Gestor de Artculos



37

4. Al terminar, se pulsa el botn Guardar y Cerrar en la barra de herramientas para guardar el artculo

recin creado.

Pulsar el botn Guardar y Cerrar para guardar el artculo

Ahora se tiene un nuevo artculo en el Gestor de Artculos.

El nuevo artculo Acerca de mi sitio

De la misma manera se crearn dos artculos ms: Cmo comprar/ordenear productos y Cmo Hacer los



38

pagos en la categora Acerca.

Tres artculos recin creados

Ahora que se ha completado el proceso de creacin de contenido, hay una cosa finalmente por hacer: crear un

men de elementos con las ligas a estos artculos.



39

Mens

En Joomla! un men es una coleccin de vnculos a ciertos elementos como artculos. En la parte trasera, todos los

mens estn localizados en la seccin Mens. 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 Mens.

Se pulsa Men Principal para ver los elementos de men asociados



40

2. Ahora, se pulsa el botn Nuevo para crear un nuevo elemento del men.

Click the button New to create a new menu item

3. A continuacin se pulsa Seleccionar para elegir el tipo de elemento.

Seleccionar el tipo de elemento



41

4. Hay muchos tipos de elementos que se pueden crear en un vnculo como Contactos, Artculos,

Bsqueda Inteligente, Canal Electrnico y as. En este caso se necesita crear un vnculo a un solo

artculo as que elegimos pulsando sobre Un Solo Artculo.

Seleccionando el tipo de elemento Un solo Artculo



42

5. Ahora se necesita llenar el parmetro Ttulo del Men, por ejemplo con Acerca de mi sitio.

Introduciendo el artculo

6. Luego se deber elegir el artculo que se desea desplegar, en la parte derecha se pulsa el botn

Seleccionar para elegir el artculo.

Se pulsa el botn Seleccionar



43

7. Una pantalla desplegable se mostrar, se elige el artculo Acerca de mi sitio.

Se pulsa sobre el artculo que se desea elegir

8. Se pulsa Guardar y Nuevo para crear otros dos elementos ms de menu que vinculen a los otros dos

artculos Cmo comprar/ordenar productos y Cmo hacer los pagos.

Pulse Guardar y Nuevo



44

Despus de crearlos, ahora se tienen 3 nuevos elementos de men.

Tres elementos de Men recin creados



45

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 Mens => Gestor de Mens => 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 Mdulos => Nuevo => elige el tipo Etiquetas

Populares.

Crea un nuevo modulo para mostrar tus etiquetas

Ahora, puedes ir al front-end y ver el resultado.



46

Los nuevos artculos en el men principal



47

Cuando se pulse cada vnculo se deber poder accesar al artculo correspondiente.

El artculo Acerca de mi sitio

Ahora se pueden repetir los pasos pertinentes para crear vnculos a todos los artculos necesarios.



48

Manejando el contenido con el JSN PowerAdmin

Al trabajar con Joomla! si se han creado muchos mens, artculos o mdulos, se ver que puede resultar difcil

localizar uno en especfico. Por esto una extensin que pueda ayudar a hacerlo rpida y simplemente sera de

gran ayuda. Nuestra recomendacin es una extensin 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 artculo o manejar los mdulos 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 ms de 30 votos y ms de 30

revisiones.

Descargue el JSN PowerAdmin Gratuito - Conozca ms sobre el JSN PowerAdmin en Youtube.



49

Hacer que los artculos se vean bien

Ya sabemos cmo crear artculos. Es momento de volvernos ms avanzados y crear artculos que sean ms

atractivos. Hay varias formas en las que se puede hacer esto como dar formato al texto, agregarle imgenes,

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 ms simple que con Word de Microsoft debido a

que hay menos opciones bsicas.

Se acude al Gestor de Artculos y se pulsa en el artculo Acerca de mi sitio para abrirlo. Ahora enfoquemos

el rea del editor de artculos.

Editar el artculo

Al mirar de cerca las opciones de formato la mayora de los conos se ven familiares con los que se usan para

convertir su texto a negrillas, itlico 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 funcin deseada.



50

Botones de formateo del texto en Joomla!

Se pueden hacer encabezados de distintos niveles en el texto seleccionndolos del men desplegable

Prrafo. Despliegue el men y seleccione el apropiado, desde Encabezado 1 a Encabezado 6.

Eligiendo estilos de encabezados para el texto



51

Se ver que el texto ahora es ms grande:

Encabezado 1 en el texto



52

Agregando Imgenes

Antes de agregar imgenes al los artculos, se debern organizar en folders especficos. Esto har ms fcil de

encontrarlas y manejarlas.

Creando folders de Imgenes

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



53

Subiendo Imagenes

Ahora es momento de subir archivos a la nueva carpeta de imgenes creada acercamisitio

1. Se hace clic en el folder acercamisitio, luego se pulsa el botn verde Subir

Click Upload

2. Luego se pulsa Seleccionar Archivos para navegar las imgenes disponibles.

Choose files

3. Se selecciona la imagen que se desea subir. En este punto se puede seleccionar solo un archivo por vez,

pero ms adelante mostraremos como seleccionar mltiples archivos de una sola vez.



54

Seleccionar archive de imagen

4. Se hace clic en el botn Iniciar Subida para subir la imagen.

Iniciar Subida

Ahora, el archivo recin subido est en el folder acercamisitio.



55

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 imgenes para subir. Afortunadamente existe otro mtodo

para subir mltiples archivos con el subidor de flash.

Por favor ntese que para este mtodo se requiere tener Flash Player instalado en la computadora. Dmosle un

vistazo:

1. En el Gestor de Media, se hace clic en el botn Opciones de la barra de herramientas.

Pulse el botn Opciones



56

2. En la pgina Opciones del Gestor de Medios, se cambia el parmetro Habilitar las subidas en

Flash a Si y se pulsa Guardar y Cerrar.

Habilitar subidas en Flash



57

3. De regreso a la pantalla principal, debera verse ahora como en la ilustracin de abajo. Ahora puede

pulsar Explorar Archivos para localizar las imgenes que se desean subir.

Browse files

4. Para seleccionar mltiples archivos se mantiene pulsada la tecla CONTROL y se hace clic en cada

una de las imgenes que se desea subir, luego se pulsa el botn Abrir en la pantalla.

Seleccionando Imgenes



58

5. Se hace clic en el botn Iniciar la Subida y se espera a que el proceso de subida concluya.

Subiendo Imgenes

Ahora ya se tienen las imgenes en el folder.

Las imgenes recin subidas



59

Agregando imgenes al artculo

Una vez que las imgenes ya estn en el servidor, estas se pueden agregar a los artculos. Usemos el mismo

artculo Acerca de mi sitio.

1. Con el artculo abierto, se coloca el cursor en el punto del texto donde se desea insertar la imagen y se

pulsa el botn Imagen debajo del panel de texto del artculo.

Agregar una imagen al artculo



60

2. Se elige la imagen apropiada a insertar.

Abriendo el folder de imgenes



61

3. Se teclean los parmetros de Descripcin de Imagen y Ttulo de la Imagen y se pulsa el botn

Insertar en la parte de arriba para concluir el proceso de insercin

Elegir la imagen hacienda clic en ella y agregando sus parmetros



62

4. Se revisa cmo la imagen fue insertada en el artculo.

An image is inserted in the text

Ahora se podra sentir a la imagen muy grande o pequea y desear cambiar sus dimensiones o alineacin. Para

esto, se pulsa primero sobre la imagen y luego en el botn Insertar/Editar imagen, de las opciones de

formato arriba del rea de texto del editor, a fin de modificarla.

El botn 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 botn Actualizar abajo.



63

Edit the image

Se pulsa el botn Guardar y Cerrar en la barra de herramientas del Gestor de Artculos y se puede acudir a

la parte frontal para ver cmo qued el artculo con su nueva imagen.



64

El artculo con su nueva imagen en el sitio



65

Agregando ligas

Agregando ligas internas

Es muy comn necesitar crear ligas internas entre los artculos. Estas ligas son, no solo tiles, para los usuarios que

navegan en el contenido, sino tambin buenas para los Optimizadores de Mquinas de Bsqueda (SEO por sus

siglas en ingls). Veamos cmo crear ligas internas en un artculo.

1. Se abre el artculo al que se desean agregar ligas internas

2. Se selecciona el texto base para ligar (llamado texto ancla)

3. Se pulsa el botn Artculo abajo del editor de texto

Insertando una liga a un artculo

4. Ahora se ve una ventana desplegable con la lista de todos sus artculos. Se localiza el artculo que se

desea ligar y se pulsa en su ttulo.

Seleccionando el artculo apropiado



66

Como resultado, el ttulo del artculo es usado como texto vnculo/ancla.

New link in the text

Usted puede cambiar el texto del vnculo como lo hara con un texto normal.

El texto ancla despus de ser editado



67

5. Se Pulsa Guardar y se puede ir a la parte frontal para ver el artculo con su nuevo vnculo.

El artculo con su nuevo vnculo o liga.

Si se desea editar la liga, solo se hace clic en el botn Insertar/editar liga como se muestra a continuacin:



68

Editando la liga

O se puede remover el vnculo pulsando el botn Desvincular.

Desvinculando un artculo



69

Agregando ligas externas

En la seccin previa hemos visto como crear ligas internas, vg. aquellas que vinculan a artculos en su propio sitio.

En esta seccin veremos cmo crear ligas externas que vinculen a cualquier pgina en el Internet.

1. Se selecciona el texto al que se desea aplicar el vnculo y luego se pulsa el cono Insertar/editar liga.

Agregando una liga externa

Una ventana desplegable como la que se muestra a continuacin aparecer:

Agregando una URL externa



70

2. Se teclean los 4 valores siguientes en la pgina que aparece:

URL de la liga

Es el destino de la liga, por ejemplo la direccin de internet de la pgina que deseamos vincular

Objetivo

Aqu hay dos opciones a elegir: Abrir vnculo en la misma ventana o Abrir vnculo en una nueva

ventana (Cuando se deja Sin Cambios la liga se abrir en la misma ventana)

Ttulo

Texto breve que describa al vnculo

Clase

Como nuevos en Joomla!, por ahora dejmoslo en Sin Cambios (las otras dos opciones son

Subttulo y Sistema de Salto de Pgina)

3. Se pulsa el botn Insertar para insertar la liga. Luego de esto se podr ver el texto vinculado a un sitio

de internet externo.

El texto vinculado



71

Agregando Saltos de Pgina y Leer Ms

En el caso de artculos largos, tal vez se prefiera dividir el artculo en secciones ms pequeas y separadas. Con

Joomla! usted tiene dos opciones para ayudar a sus visitantes a leer artculos largos.

1. Salto de Pgina

Este elemento divide una artculo en pginas separadas como por ejemplo Pgina 1, Pgina 2, Pgina 3,

etc. Los saltos de pgina son ideales para artculos muy largos.

2. Leer Ms

Este elemento divide un artculo complete en una introduccin y el resto del artculo. Si desea leer el

resto del artculo, el visitante tendr que hacer clic en la liga Leer Ms.

Ahora aprenderemos como trabaja cada uno de ellos.

Agregando un Salto de Pgina

1. Se coloca el cursor de texto en su artculo en la posicin donde se desea dividir el artculo.

2. Se hace clic en el botn Salto de Pgina abajo del editor de artculos.

Agregando salto de pgina



72

3. Agregue el ttulo que desea dar a la nueva pgina en el campo del parmetro Ttulo de la Pgina y

pulse el botn Insertar Salto de Pgina.

Insertar Salto de Pgina

4. Eso es todo lo que se necesita, ahora se ver una lnea punteada mostrando donde est el salto de pgina

dentro del artculo como en la imagen de abajo:

Lnea punteada mostrando el salto de pgina

5. Pulse el botn Guardar.



73

6. Al ver el resultado en el sitio, Se encontrar una lista dentro del artculo, solo se necesita hacer clic en el

titulo o en Siguiente para ver la pgina.

Un nuevo salto de pgina en el sitio

Nota:

Se pueden agregar tantos saltos a la pgina como se deseen.

Se pueden borrar los saltos de pgina abriendo el artculo (en la parte trasera) y colocando el cursor

sobre el final de la lnea punteada de salto de pgina y pulsando la tecla Retroceso del teclado.



74

Agregando una liga Leer Ms

Agregar una liga Leer Ms es muy similar al proceso de agregar un salto de pgina.

1. Se coloca el cursor en la parte del artculo donde se desea divider entre introduccin y el resto del

artculo.

2. Se pulsa el botn Leer Ms debajo del editor de artculos.

Insertando una liga Leer Ms

Se ver una lnea roja.

Lnea punteada leer ms

3. Se pulsa el botn Guardar para finalizar.

Aqu est el artculo con la liga Leer ms, en la parte frontal. Solo se necesita pulsar el botn Leer

Ms... para ver el artculo completo (inclusive la parte que se us como introduccin).



75

El artculo con la liga Leer Ms



76

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 presentacin grfica de tu sitio. Determina la

presentacin, disposicin, colores, grficas y otros aspectos del diseo, que hacen que el sitio sea nico. Hay

dos tipos de plantillas: Plantilla del Sitio (Site template) para la presentacin de la vista frontal yPlantilla

del Administrador (Administrator template) para la presentacin 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.



77

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, podras necesitarse hacer pequeos cambios en la plantilla

del administrador para reflejar la marca del cliente.



78

Seleccionando una plantilla Joomla!

Fuentes de plantillas

La forma ms rpida de incursionar en el diseo 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

pginas:

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.



79

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 versin 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 ms flexibles, tienen mejor calidad, documentacin ms comprensiva y mejor soporte que las no

comerciales.

Documentacin

Qu tan bien documentada est? La documentacin ayuda a entender todas las caractersticas de la

plantilla? Muestran las formas de personalizar la plantilla?

Soporte Tcnico

Habr soporte tcnico para la plantilla? De qu forma es posible obtenerlo? va un foro, por medio de

un sistema de ticket, etc. En cunto tiempo se obtendr respuesta del experto? 12 horas, 24 horas o

varios das, etc.

Diseo

Va acorde a la apariencia que quieres darsele al sitio? Es similar al diseo que se deseab y no habr

que pasar mucho tiempo personalizando la plantilla? O de otra forma, es fcil personalizarla como se

quiere?

Caractersticas

Las plantillas profesionales le proporcionan muchas caractersticas, mientras que las gratuitas son ms

limitadas en cuanto a caractersticas adicionales.

Si se desea para un individuo o un usuario ordinario, una plantilla gratuita podra ser una eleccin 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 cdigo y diseo de alta calidad, tambin se obtendr una buena documentacin y soporte. El tiempo

que se ahorrar en dejar a punto la plantilla, valdr ms la pena que el dinero que se habr invertido.



80

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 botn de Explorar y se busca el archivo de la plantilla que se haya descargdo, luego pulse

el botn Subir e instalar. Luego, se recibir una notificacin 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



81

Se elige Gestor de Plantillas

4. Se selecciona la casilla de verificacin al lado de la nueva plantilla Joomla!, y se pulsa el cono

Predeterminada y se establecer la plantilla como el diseo por defecto para el sitio web Joomla!

Eligiendo Por Defecto



82

5. Ahora, se podr ver el diseo 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



83

Crear mltiples estilos de plantilla para asignrselos a mltiples elementos de mens

Puedes crear diferentes plantillas en diferentes pginas web en tu sitio web.

En este sitio web, casi todas las pginas usan Beez2, excepto una pgina que usa Beez5

Por ejemplo, tienes un sitio que usa la plantilla Protostar, y luego quieres que otra pgina use la plantilla Beez3.

Puedes hacerlo fcilmente de la siguiente forma:

En este caso, he creado un nuevo men al principio del men, llamado Beez3. Ve a Mens -> Men Principal

-> Agregar Nuevo men. Puedes seleccionar cualquier tipo de elemento que desees, por ejemplo, elegir el

elemento de men tipo: Mostrar un solo artculo, ttulo de men Beez3, selecciona el artculo Getting

Started y graba (guardar los cambios) el men.



84

Selecciona el artculo Getting Started

Luego ve a Extensiones -> Gestor de Plantillas -> Beez3, en la seccin de Asignacin 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 ms de una, solo tomar efecto la

ltima que hayas asignado.



85

Paso 5: Ordenando los mdulos en posiciones Nota: Se puede hacer este paso fcilmente con el JSN PowerAdmin con su caracterstica de ordenar mdulos

visualmente.

Qu es un mdulo y su posicin en Joomla!?

Como mencionamos anteriormente, un mdulo realiza la simple tarea de mostrar contenido como unos

pequeos bloques posicionados alrededor de la pgina. Cada mdulo est localizado en una posicin

especfica, por ejemplo el Menu Principal est puesto en la posicin izquierda. Cada posicin est

diseada para ocupar un lugar en el diseo de la pgina, por ejemplo izquierda est colocado en la parte

izquierda del contenido principal. Cada plantilla puede tener diferentes posiciones ocupando diferentes lugares

en la pgina.

Ac hay otra forma de ver este concepto. Imagnese al sitio web como una pared. En dicha pared hay varias

pizarras (posiciones de mdulos) colgadas en diferentes lugares. En cada pizarra, hay varios post-it pegados

(los mdulos) en diferentes lugares. As, al final se tendr a la pared llena de post-it pegados colgando de la

misma.

Hay dos tipos de mdulos: Mdulos del sitio que se utilizan en la parte frontal y Mdulos Administradores

para la parte trasera.

Mdulos del Sitio en la parte frontal



86

Cmo puedo ver las posiciones de mdulos disponibles en una plantilla?

Es difcil 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 continuacin

las instrucciones para cmo 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 parmetro Prever Posicin de Mdulos y pulsar en Guardar y Cerrar.

Permitir la visualizacin de posiciones de mdulos en la plantilla

4. Ahora, pulsar en la pestaa Plantillas.

Se pulsa en la pestaa de plantillas

5. En la ventana desplegable se mostrarn todas las plantillas instaladas. Deslizar hacia abajo a la plantilla Beez3 y

pulsar en Vista Previa para ver las posiciones de los mdulos de esta plantilla.



87

Pulsar en Vista previa

6. Una pgina nueva se abrir en una nueva pestaa de su navegador, esta pgina muestra las posiciones de los

mdulos de la plantilla, como se ve en la siguiente imagen:



88

Posiciones de mdulos en el sitio

Ahora es posible ver las posiciones de los mdulos en la plantilla. Esto ayudar a elegir la posicin correcta

cuando se agregue un nuevo mdulo.



89

Agregando un nuevo mdulo a una pgina

Ahora que nos hemos familiarizado con los conceptos de mdulos y sus posiciones en Joomla!, aprendamos

como agregar un nuevo mdulo en la pagina web.

Familiarizndose con los mdulos por defecto

Por defecto, Joomla! viene con varios mdulos listos para usarse. Veamos:

Mdulos de Usuario

Mdulos diseados para presentar usuarios y servicios.

Quin est conectado

Este mdulo muestra el nmero de invitados (visitantes no registrados) y usuario registrados que estn

actualmente en nuestro sitio.

ltimos Usuarios

Este mdulo muestra los ltimos usuarios registrados.

Ingreso (Login)

Este mdulo muestra un formulario de ingreso con nombre de usuario (login), contrasea (passoword) y

otros hipervnculos.

Mdulos de Contenido

Mdulos diseados para la presentacin de artculos..

ltimas Noticias

Este mdulo muestra el listado de los artculos recientemente publicados.

Contenido ms ledo

Este mdulo muestra un listado de los artculos recientemente publicados con mayor nmero de visitas.

Artculo Flash de Noticias

Este mdulo muestra un nmero fijo de artculos especficos para una categora.

Artculos Artculos Relacionados

Este mdulo muestra otros artculos relacionados el que se est viendo actualmente.

Artculos Archivados

Este mdulo muestra un listado de los meses del calendario que contienen artculos archivados.

Categoras de Artculos

Este mdulo muestra las categoras que corresponden una categora padre o superior

Categora de Artculo

Este mdulo muestra los artculos de una categora en particular.



90

Mostrar mdulos

Mdulos diseados para presentacin de contenido enriquecido.

HTML Personalizado

Este mdulo permite crear un Mdulo HTML personalizado usando el editor WYSIWYG.

Pantalla de canales

Este mdulo muestra un canal sindicado (RSS).

Pe de pgina

Este mdulo muestra la informacin de derechos de autor Joomla!.

Imagen aleatoria

Este mdulo muestra una imagen aleatoria seleccionada de un directorio de imgenes.

Vnculos web

Este mdulo muestra el listado de vnculos web en una categora.

Anuncio

El mdulo de Anuncio se usa para mostrar los anuncios del componente Anuncios (como es el caso de

los banners).

Utilidad de los mdulos

Los mdulos estn diseados para ejecutar pequeas tareas.

Mdulo de Bsqueda Inteligente

Este mdulo provee bsquedas utilizando el componente de bsqueda inteligente.

URL Embebida

Este mdulo muestra una ventana incrustada (iFrame) en una ubicacin especfica.

Selector de Idioma

Este mdulo muestra los idiomas disponibles para el contenido pudiendo elegir entre los que estn

habilitados.

Bsqueda

Este mdulo mostrar una caja de bsqueda.

Estadsticas

Este mdulo muestra informacin estadstica sobre tu servidor, usuarios del sitio web, artculos, vnculos

a pginas, etc.

Canales electrnicos

El mdulo sindicado mostrar un vnculo que permitir a los usuarios tomar un canal generado por el



91

sitio.

Mdulos de utilidad

Mdulos diseados para mostrar la navegacin del sitio.

Men

Este mdulo muestra un men en el sitio

Ruta de Navegacin

Este mdulo muestra la ruta de navegacin dentro del sitio.



92

Agregando un nuevo mdulo

Ahora, veamos como agregar un nuevo mdulo.

1. Se pulsa Extensiones => Gestor de Mdulos, luego se pulsa el botn Nuevo de la barra.

Pulsando en Nuevo para agregar un mdulo nuevo



93

2. De la ventana emergente, se elige el mdulo que se desee agregar. Por ejemplo, agreguemos el mdulo

Datos de acceso (Login) que permite a los usuarios ingresar al sitio web como usuarios registrados.

Seleccionando el mdulo Datos de acceso



94

3. Ahora, ser necesario agregar la informacin para el nuevo mdulo. No olvidemos elegir la posicin

donde se deseas colocar el mdulo.

Ingresando informacin para el mdulo

4. Finalmente, se pulsa el botn Guardar y Cerrar para completar el proceso. Y vemos el resultado en la

parte frontal.

Mdulo de Datos de Acceso en la parte frontal

Se pueden agregar ms mdulos utilizando el mismo proceso.



95

Configurando opciones del mdulo

Ordenando los mdulos

Ahora sabemos que todos los mdulos se ubican en una posicin como las notas pegadas en una pizarra. Y as

como pasa en el vida real, tambin en Joomla! se pueden reordenar los mdulos usando la funcin arrastrar y

soltar. Veamos cmo se hace:

1. Se accede al Gestor de Mdulos.

2. Se pulsa sobre el cono para arrastrar y soltar el mdulo en la posicin deseada.

Pulsando en el cono para arrastrar y soltar el mdulo en una nueva posicin



96

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 presentacin de imgenes, una

galera de video o un formulario de contacto avanzado, entonces se tendrn que instalar extensiones para dichos

propsito. Para informacin ms detallado sobre las extensiones Joomla!, por favor habr que revisar la

seccin anterior de Extensiones.

Por defecto Joomla! se instala con varias extensiones cubriendo las necesidades bsicas.

Anuncios

Extensin para mostrar y gestionar anuncios de imagen

Contactos

Extensin para administrar a los contactos y mostrar el formulario de contacto

Fuentes de Noticias

Extensin para gestionar y mostrar canales RSS generados por el sitio

Redireccionar

Extensin para gestionar el redireccionamiento de URLs dentro del sitio

Vnculos Web

Extensin para gestionar y mostrar los vnculos

Ahora veamos de cerca a una de las extensiones que vienen por defecto para entender cmo funcionan las

extensiones en general.



97

Trabajando con la extensin por defecto de Contactos

En esta seccin, aprenderemos como usar la extensin Joomla! de Contactos. Esta extensin te permite crear

un formulario de contacto para que las personas puedan enviar mensajes por medio del correo electrnico a

contactos del sitio.

Creando la categora 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 categoras.

1. Dirigirse a Componentes => Contactos => Categorias

Click en la categora de contactos

2. Luego, se pulsa el botn Nuevo en la barra para crear una nueva categora de contactos.

Pulsando Nuevo para crear una nueva categora

3. Luego se completa el ttulo de tu nueva categora de contacto, por ejemplo Administradores del Sitio y se

guardan los cambios pulsando en Guardar y Cerrar.



98

La nueva categora de contacto



99

Creando un nuevo contacto

Cuando las categoras de contactos estn 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 botn Nuevo de la barra para crear un nuevo contacto.

Pulsando el botn Nuevo para crear un nuevo contacto

3. Luego se teclean los siguientes campos en la seccin Editar Contacto:

Nombre

Se Ingresa el nombre del contacto podra ser nuestro propio nombre

Categora

Se selecciona la categora que has creado anteriormente



100

Ingresa la informacin de contacto

4. Luego, en la pestaa de Detalles del Contacto se teclea la direccin de correo electrnico en el

parmetro E-mail. Este parmetro es muy importante, ya que toda la informacin que se recolecte del

formulario de contactos ser enviada a esta direccin.

Ingresando la direccin de correo del contacto



101

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 podra 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 botn Seleccionar para el tipo de elemento de men



102

3. Luego, elige Contacto nico.

Selecciona Contacto nico



103

4. Luego, se deber seleccionar el contacto deseado pulsando en el botn Seleccionar.

Pulsar en Selecccionar

5. Luego se pulsa sobre el contacto creado anteriormente.

Pulsando el contacto deseado



104

6. Luego se completa en el campo de Ttulo del Men con el ttulo que se le desea dar, por ejemplo,

Contacto.

Llenando el campo de Ttulo de men

7. Finalmente, se pulsa Guardar y Cerrar para grabar este elemento del men.



105

Ahora, vayamos a la pgina 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 bsico. Para futuros ajustes, hay muchas opciones

disponibles.



106

Ms ajustes

Dirgirse a Contactos o Categoras y se pulsa en Opciones en la barra.

Pulsando el botn " Opciones



107

En la pgina mostrada, se pueden configurar todo tipo de parmetros segn se necesite.

Opciones del Gestor de Contactos



108

Agregando nuevas extensiones

Las extensiones predeterminadas de Joomla! son buenas para empezar, pero con el tiempo y la experiencia, no

sern suficientes. Segn la pgina vaya evolucionando, se querr agregar ms funcionalidades que irn ms

all de las extensiones predeterminadas. En esta parte, veremos las extensiones que se podran agregar a la

pgina web y cmo hacerlo.

Definir las extensiones a ser instaladas

Por supuesto, cada pgina web tiene su propio propsito y no hay una lista predeterminada de extensiones que

logren dichos propsitos. De cualquier forma, hay algunos tipos de extensiones que cualquier pgina debera

tener. Por ejemplo, galera de imgenes, galera de videos, construccin de formularios, integracin con redes

sociales, presentacin en dispositivos mviles, etc. Hay muchos artculos que hablan al respecto y ac hay

algunos de los ms tiles.

Extensiones de Joomlashine JSN PowerAdmin, JSN Uniform y JSN ImageShow: Todas estas estn

desarrolladas para las necesidades ms comunes de pginas web. Estas extensiones reciben muchos cumplidos

de los usuarios Joomla! Por ser extensiones con buen cdigo, fciles de usar y con caractersticas

comprensivas.

Las 10 mejores! extensiones - Brian Teeman: El listado de extensiones segn 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 ncleo Joomla!. Habr que revisar en el listado para asegurarnos que estas extensiones

estn soportadas por Joomla! en su versin 3.x.

Extensiones Joomla! 3.x en el JED: Todas estas extensiones, son cuidadosamente revisadas por el

equipo del JED antes de publicarse. Tambin se deber revisar los puntajes y comentarios de la

comunidad para elegir las que ms se ajusten a las circunstancias del sitio.



109

JSN PowerAdmin Una extensin que simplifica la interface de administracin

JSN Uniform Extensin sencilla para generar y gestionar mltiples formularios



110

Encontrando extensiones tiles

El mejor lugar para encontrar extensiones tiles es el Directorio de extensiones Joomla! (JED). Es una

excelente fuente con gran nmero de extensiones Joomla! divididas por categoras basadas en su funcionalidad.

Directorio de extensiones Joomla!

Todas las extensiones tienen una seccin 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.



111

Instalando nuevas extensiones

Despus de seleccionar y descargar la extensin que creamos necesaria para el sitio, se deber saber cmo

instalarla y hacerla funcionar en el sitio.

1. Ir a Extensiones => Gestor De Extensiones

2. Luego, se pulsa el botn Examinar para seleccionar el paquete de la extensin Joomla! que se haya

descargado previamente.

Click en Examinar (Browse)

3. Despus se pulsa en Subir e Instalar para subir e instalar este archivo en el sitio. (es importante

durante este proceso no salir de esta pgina hasta no ver el mensaje de conclusin de la instalacin)

Pulsar Subir e instalar



112

Joomla! automticamente sabe el lugar correcto para colocar la extensin basada en su tipo. Por ejemplo, si

la extensin es un componente, se le ver en el men Componentes; o si la extensin es un mdulo, se le

podr encontrar en el Gestor de Mdulos y as sucesivamente.

JSN UniForm en Componentes

Desinstalando extensiones

Si se encuentras una extensin 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 extensin que se deseas desinstalar y se pulsa el botn de

Desinstalar en la barra.

Desinstalando la extensin



113

Paso 7: Gestiona tu pgina 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 artculos publicados, crear nuevos

mens o nuevos mdulos, 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 extensin de navegacin administrativa

que hace que gestionar tu sitio web Joomla! sea ms sencillo que nunca con Spotlight Search (Bsqueda de

Foco), Site Manager (Gestor de Sitio), Template Styles Manager (Gestor de estilo de Plantilla) y ms.

Caractersticas principales de JSN PowerAdmin



114

Gestor de Sitio (Site Manager): Gestiona las tres secciones principales de tu sitio web: Mens

(Menus), Componentes (Components) y Mdulos (Modules), en un mismo lugar.

Gestor de Sitio

Bsqueda de Foco (Spotlight Search): Para buscar un elemento de una pgina web, como artculos, en

pocos segundos.

Bsqueda de Foco con una lista de resultados



115

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

Estilo de Plantilla

JSN PowerAdmin es totalmente GRATIS. Solo tienes que descargarlo e instalarlo en el back-end de Joomla!

segn las instrucciones en la seccin Instalando nuevas extensiones

Descarga gratuitamente JSN PowerAdmin



116

Gestiona tu sitio web Joomla! con Gestor de Sitios (Site Manager )

Toma mucho tiempo cuando tienes que ir a cada men, modulo o artculo para editarlo. Ahora, puedes

controlar tu sitio web fcil y rpidamente con Site Manager (Gestor de Sitios). Este contiene Men (Menu),

Componentes (Component) y Mdulos (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 Mdulos (Module)

Ms convenientemente, puedes ajustar de tamao las 3 secciones como quieras. Desplaza la barra entre 2

secciones a la posicin que deseas agrandar o reducir. Adems, todos los cambios que realices ac se guardan

automticamente.



117

Gestiona Mens (Manage Menus)

Elementos de men en el front-end

Puedes controlar mens y elementos de mens fcilmente con la pestaa MENU en el Gestor de Sitios (Site

Manager).

Controla todos los mens o tems de men



118

Ver elementos:

Todos los elementos de mens publicados se muestran. Algunos no publicados no. Para

mostrar/ocultar estos elementos despublicados, da click en el cono arriba a la derecha.

Click en el cono para mostrar elementos no publicados

Click en el cono para mostrar elementos no publicados



119

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



120

Arrastra y suelta para mover elementos en un men:

Arrastra elementos del men y elige el lugar para soltarlo

Personaliza elementos de men:

Tambin puedes Despublicar (Unpublish), Rehacer (Rebuild), Portada (Set as home), Comprobar los

elementos de men (Check in menu items), etc.

Controla todos los mens o elementos de men



121

Maneja Contenido

La seccin de COMPONENTE (COMPONENT) te muestra todo el contenido de los elementos de men

seleccionados. Te deja editar los elementos, mostrar u ocultar elementos, segn desees.

Click en Seleccionar (Select) para editar un artculo

Ver elementos:

Da click en el icono de abajo para mostrar/ocultar elementos deshabilitados en la pgina.

Click para mostrar u ocultar elementos no publicados

Editar

Joomla3.XSimple&Facil

Documents

Transcript of Joomla3.XSimple&Facil