Diseño de Sitios Web Administrables Con Joomla 3

Diseño de sitios web administrables con Joomla 3
Autor: Luis Angulo Aguirre
© Derechos de autor registrados:

Empresa Editora Macro EIRL
© Derechos de edición, arte gráfico y diagramación reservados:

Empresa Editora Macro EIRL
Corrección de estilo:
Jorge Giraldo Sánchez
Coordinación de arte y diseño:

Alejandro Marcas León
Diagramación:
Lizbeth Eufracio Quispe
Sebastián Álvarez Sánchez
Edición a cargo de:

© Empresa Editora Macro EIRL
Av. Paseo de la República N.° 5613 , Miraflores, Lima, Perú
( Teléfono: (511) 748 0560

* E-mail: proyecto@editorialmacro.com
Página web: www.editorialmacro.com
Primera edición: setiembre de 2014

Tiraje: 1000 ejemplares
Impresión:
Talleres gráficos de la Empresa Editora Macro EIRL
Jr. San Agustín N.° 612-624, Surquillo, Lima, Perú
ISBN N.° 978-612-304-216-5

Hecho el depósito legal en la Biblioteca Nacional del Perú Nº 2014-12576
Prohibida la reproducción parcial o total, por cualquier medio o método, de este libro
sin previa autorización de la Empresa Editora Macro EIRL.
Luis Angulo Aguirre
Luis Angulo Aguirre es ingeniero industrial titulado por la Pontificia Universidad Católica del Perú,
colegiado en el Colegio de Ingenieros del Perú, docente del Centro de Proyección Social de la Universidad
Nacional de Ingeniería CEPS-UNI y especialista en proyectos de e-learning y programas de capacitación
a distancia. Ha sido coordinador de Educación a Distancia en INICTEL-UNI, director general del Instituto
Perú Pacífico y del Instituto Unicenter; además, ha sido docente de IPAE, Toulouse Lautrec y la Escuela
Nacional de Control. Ocupó los cargos de gerente de operaciones de OMNIVISION – MultiCanal CA
(Venezuela) y de gerente de informática de la SBML (Sociedad de Beneficencia de Lima Metropolitana).
Índice
Capítulo 1
Introducción: Una nueva y fácil manera de construir sitios web............................................................ 13
1.1 Únase a la revolución de la CMS.......................................................................................15
1.2 Tipos de gestores de contenido.........................................................................................16
1.3 Por qué elegir Joomla........................................................................................................16
1.4 Tipos de sitios que se pueden construir con Joomla.........................................................17
1.5 Aprender a usar Joomla....................................................................................................20
1.6 Acerca del sitio ejemplo....................................................................................................21
Capítulo 2
Instalación: Hacer que Joomla funcione.................................................................................................. 23
2.1 Qué se necesita para empezar..........................................................................................25
2.2 Actualizar desde versiones anteriores de Joomla.............................................................27
2.2.1 Actualización de Joomla 1.5 y 3.x...........................................................................27
2.2.2 Actualización de Joomla 2.5 a 3.x...........................................................................28
2.3 Instalación de Joomla en cuatro pasos..............................................................................29
2.3.1 Pasos para descargar los archivos de Joomla..........................................................29
2.3.2 Colocar los archivos en el servidor web..................................................................30
2.3.3 Crear una base de datos.........................................................................................31
2.3.4 Ejecutar el asistente de instalación de Joomla........................................................33
2.4 Cambiar el idioma.............................................................................................................39
2.5 Obtenga ayuda..................................................................................................................40
Capítulo 3
Primeros pasos: Conociendo Joomla....................................................................................................... 41
3.1 Hacer el cambio y construir sitios web a la manera Joomla..............................................43
3.1.1 Lo sentimos, las páginas web han dejado de existir...............................................43
3.1.2 Los beneficios del enfoque CMS para los sitios web...............................................44
3.1.3 Un sitio web construido a partir de bloques...........................................................45
3.2 Introducción al frontend y al backend: La interfaz de Joomla...........................................46
3.2.1 Su área de trabajo: El backend................................................................................47
3.2.2 El frontend..............................................................................................................48
3.3 Explorando el frontend: El sitio web como lo mira el usuario...........................................48
3.3.1 Un paseo por el sitio de ejemplo............................................................................49
3.3.2 Explorando el contenido de ejemplo......................................................................51
3.4 Tomar el control: La administración de su sitio en el backend..........................................52
Ejercicio 1: Conectarse al backend....................................................................................52
3.4.1 Echar un vistazo al Panel de control........................................................................53
3.4.2 Entender las herramientas y controles de backend................................................55
3.5 Comience a administrar su sitio........................................................................................56
3.5.1 Tres tipos de tareas de backend..............................................................................57
Ejercicio 2: Publicar su primer artículo ..................................................................57
Ejercicio 3: Añadir un módulo al sitio ....................................................................59
Ejercicio 4: Configurar las preferencias en Joomla .................................................62
Capítulo 4
Fundamentos para la construcción web: Crear un sitio en una hora..................................................... 65
4.1 Conozca a su cliente..........................................................................................................68
4.2 Limpieza: Eliminar los datos de ejemplo...........................................................................68
Ejercicio 1: Borrar artículos y categorías...........................................................................69
Ejercicio 2: Borrar menús..................................................................................................71
4.3 Construir su nuevo sitio en tres pasos...............................................................................73
4.3.1 Paso 1: Personalizar el diseño.................................................................................73
Ejercicio 3: Crear una copia de la plantilla actual....................................................73
Ejercicio 4: Preparar una nueva imagen del logotipo.............................................74
Ejercicio 5: Ajustar los detalles del diseño .............................................................76
4.3.2 Paso 2: Agregar contenido......................................................................................78
Ejercicio 6: Crear una categoría de noticias............................................................78
Ejercicio 7: Crear un artículo...................................................................................80
Ejercicio 8: Agregar un enlace de menú.................................................................82
Ejercicio 9: Agregar artículos no categorizados......................................................87
Ejercicio 10: Asignar artículos a la página principal................................................90
4.3.3 Paso 3: Agregar extras a través de extensiones......................................................91
Ejercicio 11: Crear un contacto...............................................................................92
Ejercicio 12: Crear un enlace de menú a un formulario de contacto......................93
Ejercicio 13: Crear un bloque de mensaje..............................................................95
Ejercicio 14: Cambiar la configuración del sitio......................................................97
Capítulo 5
Organizar eficazmente su contenido....................................................................................................... 99
5.1 Construir sobre el sitio de ejemplo...................................................................................101
5.2 Agrupar el contenido.........................................................................................................101
5.2.1 Diseñar un mapa del sitio.......................................................................................101
Ejercicio 1: Crear un mapa del sitio preparado para el futuro................................102
5.2.2 Transferir su mapa del sitio a Joomla......................................................................104
5.2.3 Cómo convertir un mapa del sitio en un sitio web.................................................105
5.3 Crear categorías y subcategorías.......................................................................................106
Ejercicio 2: Crear una categoría y subcategoría.................................................................106
5.3.1 En qué casos necesita más niveles de subcategoría...............................................107
5.3.2 Agregar contenido a las nuevas categorías.............................................................109
5.4 Mostrar las principales categorías y subcategorías en su sitio..........................................109
Ejercicio 3: Crear un enlace que apunte a una categoría principal ...................................109
5.5 Afinar la estructura de su sitio...........................................................................................113
Ejercicio 4: Mover contenido de una categoría a otra......................................................113
5.6 Renombrar las categorías..................................................................................................114
Ejercicio 5: Renombrar una categoría...............................................................................114
5.6.1 Cambiar las configuraciones de la categoría...........................................................115
5.7 Construir un sitio sin usar categorías................................................................................119
Capítulo 6
Crear contenido de calidad: Agregar y editar artículos...................................................................... 123

6.1 Crear y editar artículos: Más allá de los conceptos básicos..............................................125
6.2 Hacer que sus palabras se vean bien: Formatear el texto del artículo..............................127
Ejercicio 1: Agregar un estilo al texto del artículo.............................................................127
6.3 Agregar imágenes a los artículos.......................................................................................130
Ejercicio 2: Subir imágenes...............................................................................................131
Ejercicio 3: Insertar y alinear las imágenes.......................................................................132
6.4 Cambiar el modo en que se muestra el artículo................................................................136
6.4.1 Dividir un artículo en un texto de introducción y un texto principal......................136
Ejercicio 4: Crear un texto de introducción.............................................................136
6.5 Crear artículos de varias páginas.......................................................................................138
Ejercicio 5: Usar saltos de página para dividir un artículo................................................138
6.6 Mostrar imágenes y enlaces con los artículos...................................................................141
Ejercicio 6: Agregar imágenes y enlaces a un artículo......................................................141
6.7 Afinar los detalles: Cómo cambiar la configuración del artículo.......................................144
6.8 Configuración de las preferencias generales para todos los artículos...............................147
Ejercicio 7: Crear un archivo de noticias...........................................................................151
Capítulo 7
Ayude a sus visitantes a encontrar lo que quieren: Gestión de menús............................................ 153

7.1 Cuántos menús puede tener.............................................................................................155
7.2 Crear una navegación amigable: Limpiar el menú principal..............................................156
7.2.1 Opción 1: Cambiar el orden de los elementos del menú........................................156
Ejercicio 1: Cambiar el orden de los elementos del menú......................................157
7.2.2 Opción 2: Crear elementos de submenú................................................................158
Ejercicio 2: Crear un elemento de menú secundario..............................................158
7.2.3 Opción 3: Agregar un nuevo menú separado.........................................................160
Ejercicio 3: Crear un nuevo menú vacío..................................................................160
Ejercicio 4: Mover hipervínculos al nuevo menú....................................................161
Ejercicio 5: Indicar a Joomla dónde mostrar el menú.............................................163
7.3 Usar el menú desplegable horizontal como menú principal.............................................165
Ejercicio 6: Mostrar enlaces al menú principal en el menú superior................................165
7.4 Crear submenús divididos.................................................................................................167
7.5 Explorar los ajustes del módulo de menú.........................................................................170
7.6 Cambiar a la pantalla del módulo de menú.......................................................................170
7.7 Qué tipos de enlaces de menú están disponibles.............................................................173
7.8 Crear enlaces de texto plano.............................................................................................177
Ejercicio 7: Crear enlaces al texto.....................................................................................177
Capítulo 8
Apertura del sitio: Permitir que los usuarios ingresen y contribuyan.............................................. 179
8.1 Cuáles son los grupos de usuarios predeterminados y sus permisos................................181
8.2 Permitir a los usuarios conectarse y aportar contenido....................................................185
Ejercicio 1: Agregar un usuario con permisos de autoría en el frontend .........................185
8.3 Habilitar a los contribuyentes de contenido para conectarse al frontend........................187
Ejercicio 2: Colocar un Formulario de Acceso en la página principal................................187
Ejercicio 3: Conectarse como un colaborador de contenido al frontend..........................188
8.4 Revisar y publicar los envíos de contenido del equipo......................................................190
Ejercicio 4: Revisar y publicar el contenido enviado.........................................................190
8.5 Habilitar el autorregistro: Permitir que los visitantes se registren....................................193
8.5.1 Permitir que los usuarios creen sus propias cuentas..............................................194
8.5.2 Mostrar un enlace al menú de acceso....................................................................194
Ejercicio 5: Registrarse y conectarse usted mismo.................................................195
8.6 Ocultar contenido a los usuarios no registrados...............................................................196
Ejercicio 6: Ocultar contenido a los usuarios no registrados............................................196
8.7 Hacer que sus visitantes deban «Registrarse para leer más»............................................198
Ejercicio 7: Ocultar parcialmente el contenido a los usuarios no registrados..................198
8.8 Crear grupos de usuarios a medida...................................................................................200
8.8.1 Permisos que se pueden asignar a los grupos de usuarios.....................................200
8.8.2 Niveles de acceso de visualización disponibles.......................................................201
8.9 Crear un grupo de usuarios personalizado para administrar los contactos......................202
Ejercicio 8: Paso 1 - Crear un grupo de usuarios...............................................................202
Ejercicio 9: Paso 2 – Indicar a Joomla lo que el grupo puede ver.....................................203
Ejercicio 10: Paso 3 - Indicar a Joomla lo que el grupo puede hacer................................204
Ejercicio 11: Paso 4 - Agregar usuarios al nuevo grupo....................................................206
Capítulo 9
Sacar el máximo provecho de su sitio: Ampliar Joomla..................................................................... 207

9.1 Extensiones de todas las formas y tamaños......................................................................209
9.2 Mejorar su sitio usando extensiones de núcleo................................................................212
9.2.1 Destacar los artículos usando el módulo Noticias de actualidad............................212
Ejercicio 1: Agregar Noticias de actualidad a la página principal............................212
9.2.2 Crear una lista de contactos usando el componente Contactos.............................216
Ejercicio 2: Agregar una serie de contactos............................................................217
9.3 Mejorar su sitio usando extensiones de terceros..............................................................222
9.3.1 Probar una alternativa al módulo Noticias de Actualidad.......................................222
Ejercicio 3: Descargar e instalar una extensión.......................................................222
Ejercicio 4: Poner la extensión a trabajar................................................................223
9.3.2 Mostrar imágenes en una galería Lightbox.............................................................227
Ejercicio 5: Crear una galería de imágenes.............................................................227
9.4 Usar extensiones para mejorar su espacio de trabajo......................................................230
Ejercicio 6: Remplazar editor de texto predeterminado de Joomla...................................230
9.4.1 Mucho más por explorar.........................................................................................233
9.5 Administrar el idioma del sitio..........................................................................................234
9.5.1 Cambiar las cadenas de texto predeterminadas.....................................................235
Ejercicio 7: Eliminar o sustituir los textos predeterminados ..................................235
9.6 Actualizar las extensiones.................................................................................................237
Capítulo 10
Crear un diseño atractivo: Trabajar con plantillas................................................................................... 239
10.1 Esto es lo que hacen las plantillas...................................................................................241
10.1.1 Y es por esto que las plantillas son muy divertidas.............................................242
10.2 Cambiar los ajustes de la plantilla actual........................................................................243
10.2.1 Las plantillas de estilos........................................................................................243
10.3 Personalizar la plantilla actual usando las opciones integradas......................................244
Ejercicio 1: Cambiar las opciones de color y presentación del sitio................................244
10.4 Cambiar a una plantilla diferente....................................................................................247
10.4.1 Plantillas que vienen con Joomla........................................................................247
10.4.2 Previsualizar las plantilas disponibles.................................................................248
10.5 Configurar una plantilla diferente como predeterminada...............................................249
Ejercicio 2: Activar una plantilla diferente......................................................................249
10.6 Aplicar Estilos de plantilla para páginas individuales......................................................251
Ejercicio 3: Crear un Estilo de plantilla para una página específica.................................251
10.7 Descargar e instalar una nueva plantilla..........................................................................253
Ejercicio 4: Descargar y activar una nueva plantilla........................................................253
Ejercicio 5: Agregar el archivo del logotipo.....................................................................254
Ejercicio 6: Agregar un módulo de menú........................................................................255
Ejercicio 7: Colocar módulos en nuevas posiciones de la plantilla..................................257
10.8 Personalizar una plantilla: Ajustar los estilos CSS............................................................260
10.8.1 Comprender aspectos básicos de CSS.................................................................260
Ejercicio 8: Personalizar el color de fondo usando CSS.......................................261
10.9 Analizar el CSS de Joomla utilizando herramientas de desarrollo web...........................263
10.9.1 Amplíe sus conocimientos de CSS.......................................................................264
10.10 Hacer una copia de seguridad y restaurar una plantilla personalizada.........................265
10.10.1 Dónde puede encontrar una nueva plantilla para sus sitios............................265
10.11 Crear su propia plantilla................................................................................................266
10.11.1 Recursos para la creación de plantillas............................................................267
10.11.2 Usar un framework de plantilla como base para su propia plantilla..............268
Bibliografía................................................................................................................................269
Introducción
Joomla es uno de los más populares Sistemas de Gestión de Contenido (CMS – Content Management
System) de código abierto, desarrollado y apoyado activamente por una gran comunidad de usuarios
en todo el mundo. Es una herramienta gratuita, divertida y rica en funciones para cualquier persona
que quiera crear sitios web dinámicos e interactivos. Incluso los principiantes podrán implementar
Joomla para crear sitios web profesionales, a pesar de que puede ser todo un reto llegar más allá de
los conceptos básicos y construir un sitio que cumpla totalmente sus necesidades. Este libro le ayudará
a usar Joomla de manera rápida, aprendiendo paso a paso para obtener el máximo provecho de sus
características avanzadas. Está dividido en diez capítulos, desarrollados de la siguiente manera:
Capítulo 1. Introducción: Una nueva y fácil manera de construir sitios web; en este capítulo aprenderá
por qué desea utilizar Joomla para crear un sitio avanzado, de apariencia fresca, que sea fácil de
ampliar, personalizar y mantener.
Capítulo 2. Instalación: Hacer que Joomla funcione; le ayudará a aprender cómo instalar Joomla en su
propio computador o en un servidor web, y cómo crear un sitio de muestra.
Capítulo 3. Primeros pasos: Conociendo a Joomla; aquí se familiarizará con los conceptos básicos de
Joomla, la interfaz de administración y los principios de un sitio web construido a partir de componentes.
Capítulo 4. Fundamentos para la construcción web: Crear un sitio en una hora; aquí se enfrentará a
un desafío de la vida real: usar Joomla para crear un sitio web básico, pero ampliable. Va a personalizar
el sitio de muestra de Joomla para satisfacer sus necesidades, añadiendo contenidos, enlaces del menú
y cambiando el aspecto del sitio.
Capítulo 5. Organizar eficazmente su contenido; hace que sea fácil de añadir y encontrar información
en su sitio mediante el diseño de una estructura clara, ampliable y administrable para su contenido.
Capítulo 6. Crear contenido de calidad: Agregar y editar artículos; le enseñará a crear páginas de
contenido que sean atractivas y fáciles de leer, y aprenderá acerca de las diferentes maneras de agregar
imágenes para retocar el diseño de la página.
Capítulo 7. Ayude a sus visitantes a encontrar lo que quieren: Gestión de menús; le enseñará cómo
puede ayudar a los visitantes a encontrar con facilidad lo que buscan, mediante el diseño de una
navegación clara y sencilla a través de los menús.
Capítulo 8. Apertura del sitio: Permitir que los usuarios ingresen y contribuyan; muestra cómo
permitir a los usuarios iniciar sesión, y permitirles crear y administrar el contenido del sitio web.
Capítulo 9. Sacar el máximo provecho de su sitio: Ampliar Joomla; le enseña cómo ampliar las
capacidades de Joomla utilizando todo tipo de extensiones, utilizando una galería de imágenes para
mostrar imágenes atractivamente, mostrando automáticamente artículos resumidos en la página
principal, o la mejora de su espacio de trabajo mediante la instalación de un editor de contenido más
sencillo.
Capítulo 10. Creación de un diseño atractivo: Trabajar con plantillas; explica cómo las plantillas le
darán a su sitio una apariencia fresca, y harán que sea fácil crear un aspecto personal, diferente del
«típico» sitio Joomla. También aprenderá a instalar y personalizar las plantillas.
Para seguir los tutoriales y ejercicios de este libro, necesitará un computador con acceso a Internet;
se recomienda contar con una cuenta de alojamiento web para que pueda instalar Joomla en línea.
El libro está dirigido a cualquier persona que quiera construir y mantener un buen sitio web y obtener
el máximo provecho de Joomla. Le ayuda a construir sobre las habilidades y conocimientos que ya
tenga de creación de sitios web, pero si usted es nuevo en este tema, no tendrá ninguna dificultad para
comprender las instrucciones. Por supuesto, vamos a tocar los términos y conceptos básicos (como
HTML y CSS), pero si no está familiarizado con esto, también encontrará referencias a algunos recursos
de la Web.
Cap.
I n t ro d u c c i ó n : Un a
n u eva y f á c i l m a n e r a d e
1
c o n st r u i r s i t i o s we b
CAP. 1: I ntroducción: Una nueva y fácil manera de construir sitios web 15
Si usted desea construir un sitio web que tenga aspecto profesional y sea fácil de usar y mantener; que
además, pueda ser actualizado sin mucho esfuerzo y cambiar su apariencia tome unos pocos minutos;
por otro lado, no desea hacer todo este trabajo solo, sino que busca poder habilitar a otras personas
para que accedan y escriban nuevo contenido sin tener que entender HTML u otros lenguajes de
programación. Y cuando su sitio crezca, deberá ser fácil de extender con nuevas funcionalidades, tal
vez agregando un foro o un boletín informativo. Si todo esto es lo que está buscando, sea bienvenido
a Joomla.
Cuando se trata de crear un gran sitio web de aspecto profesional y que sea fácil de usar, realmente no
se puede superar el poder de un Sistema de Gestión de Contenidos (CMS) como Joomla. Sin escribir una
sola línea de código, puede crear toda clase de sitios con una variedad de características interesantes
y avanzadas.
1.1 Únase a la revolución de la CMS

Es posible que usted haya creado sitios web de una manera tradicional, lo que básicamente significa
la creación de documentos HTML –páginas web– uno por uno. A medida que el sitio crezca, acabará
con una gran cantidad de documentos HTML, tratando de mantenerlos y asegurándose que todos los
enlaces del menú se mantengan actualizados. Además, es probable que sea usted mismo quien dé
mantenimiento al sitio, debido a que es difícil para otras personas encontrar un camino alrededor de
la estructura de su sitio, o ser competentes en el manejo del software de edición web que usted utiliza.
La creación de sitios web se ha visto notablemente facilitada por los gestores de contenidos (CMS). Un
CMS es una aplicación que se ejecuta en un servidor web y que le permite desarrollar y mantener un
sitio web en línea. Presenta una enorme variedad de características, que van desde funciones básicas
para agregar y modificar contenido, hasta funciones avanzadas, como el registro de usuarios o la
capacidad de colocar un buscador dentro del sitio. En definitiva, un CMS permite construir sitios web
que habitualmente involucrarían un equipo completo de profesionales de la web, dedicando una gran
cantidad de tiempo, dinero y conocimientos.
Esta magia es posible debido a que un CMS es un conjunto avanzado de scripts (escritos en un lenguaje
de programación como PHP) que utiliza una base de datos para almacenar el contenido de su sitio web.
A partir de esa base de datos, recupera las piezas de contenido y los presenta en forma de página web.
Esta forma dinámica de almacenar y presentar contenido hace que un CMS sea muy flexible. ¿Quiere
mostrar solo una selección de artículos correspondientes a una categoría específica de la página?
¿Desea mostrar solo los textos de introducción de los artículos más recientes en la página principal?
¿Quiere agregar una lista de enlaces a los contenidos más recientes? ¿Quiere limitar el acceso a los
usuarios registrados? Todo es posible, solo debe elegir la configuración correcta. Además, un CMS
permite integrar todo tipo de características adicionales, como formularios de contacto, galerías de
imágenes y mucho más.
Lo mejor es que los sistemas CMS como estos se pueden descargar e implementar muy rápidamente.
Puede escoger su CMS entre una gama de productos de código abierto de libre acceso. Su nuevo sitio
basado en CMS puede estar mañana mismo en línea.
16 DISEÑO DE SITIOS WEB ADMINISTRABLES CON JOOMLA 3
1.2 Tipos de gestores de contenido

Los gestores de contenido se pueden clasificar según diferentes criterios:
A. Por sus características:

}}Según el lenguaje de programación empleado, por ejemplo, Active Server Pages, Java, PHP, ASP.
NET, Ruby On Rails, Python, PERL.
}}Según la licencia: código abierto o software propietario.
B. Por su uso y funcionalidad:

}}Blogs, pensados para ser usados como páginas personales
}}Foros, utilizados para compartir opiniones
}}Wikis, pensados para el desarrollo colaborativo
}}Enseñanza, plataforma para aplicar contenidos de enseñanza on-line
}}Comercio electrónico, plataforma de gestión de usuarios, catálogo, compras y pagos
}}Publicaciones digitales
}}Difusión de contenido multimedia
}}Propósito general
Nota ¿Qué es un software libre? El código fuente de este tipo de software está
desbloqueado, a diferencia del software desarrollado comercialmente.
Todos pueden tener acceso al código fuente de Joomla y se anima a que los
desarrolladores modifiquen y ayuden a mejorar el software constantemente.
El nombre Joomla significa todos juntos. Es mucho más que un producto de

software, ya que se trata de una comunidad internacional de personas que
trabajan juntas de forma voluntaria para ampliar y mejorar el producto. Como
todo software de código abierto, Joomla se distribuye de forma gratuita; sin
embargo, algunas extensiones de Joomla son comerciales, pues se tiene que
pagar por ellas, pero aun así no deja de ser un software abierto (es decir, se
obtiene acceso al código fuente).
1.3 Por qué elegir Joomla

Tal vez se pregunte por qué debería usar Joomla habiendo tantos CMS de código abierto alrededor,
todos ellos excelentes herramientas, cada uno con sus propios usos y beneficios típicos. A continuación
le damos la respuesta:
}}Es fácil de usar, ya que cuenta con una interfaz de usuario clara y amigable que sigue mejorando
con los años. La interfaz rediseñada de Joomla3 permite que sea fácil crear y publicar artículos para
mantener actualizado su sitio; además, puede administrar el contenido en cualquier momento y
lugar, si está usando un navegador web en un PC, una tablet o un smartphone.
Fig. 1.1 Joomla es accesible desde cualquier tipo de dispositivo
}}La adición de nuevas características a su sitio puede tomar unos pocos clics. Hay miles de extensiones
disponibles para Joomla, que van desde sistemas de menú hasta sistemas de comentarios y foros.
}}Es muy fácil cambiar la apariencia del sitio, ya que hay abundantes plantillas para Joomla y se
pueden instalar en cuestión de minutos, dando a su sitio un aspecto más atractivo e intuitivo.
}}La versión más reciente de Joomla añade muchas mejoras y nuevas características: el CMS es más
fácil de instalar, la salida HTML está basada en los últimos estándares, una mejor pantalla de editor
de texto para crear contenido y una docena de pequeños cambios hacen que sea el CMS más fácil
de trabajar y uno de los más potentes.
Aparte de estos beneficios típicos, Joomla viene con todas las ventajas de un CMS de vanguardia. Para
nombrar solo algunas:
}}Es muy fácil agregar o editar contenidos y mantenerlos organizados sin que importe la cantidad.
Joomla permite clasificar el contenido con un número ilimitado de categorías de varios niveles.
}}La labor de mantener al día los hipervínculos está muy automatizada. Por ejemplo, puede agregar
la categoría Páginas de resumen sin tener que actualizarlas manualmente, ya que en una categoría
página general, Joomla agregará automáticamente enlaces a todas las páginas nuevas que va a
poner en esa categoría.
}}No tiene que mantener el sitio web usted mismo. Otros usuarios pueden agregar contenido, nuevos
elementos de menú y mucho más.
Las cifras parecen indicar que Joomla es el CMS de código abierto para desarrolladores web más
utilizado en el mundo. Hay unos veinte millones de sitios web en todo el mundo y este número sigue
creciendo rápidamente día a día. Es uno de los mayores proyectos de software de código abierto, ya
que cuenta con el apoyo de una comunidad de usuarios enorme, y que constantemente está siendo
perfeccionado por un equipo internacional de voluntarios.
1.4 Tipos de sitios que se pueden construir con Joomla

Revisemos algunos buenos ejemplos del mundo real, de sitios construidos usando Joomla. Viendo
estos inspiradores ejemplos podrá encontrar la motivación para empezar de inmediato, creando
algo igual o tal vez aún mejor. Estos son solo algunos ejemplos de la sección de vitrina de Joomla
(http://community.joomla.org/showcase). Los usuarios de Joomla provienen de organizaciones muy
diferentes, cada uno con sus propios objetivos y grupos destinatarios. Lo que tienen en común es
que usan Joomla de la misma manera que usted podría hacerlo, adaptando el CMS a sus necesidades
específicas, por lo que es perfectamente adecuado para el contenido que presentan y la impresión
que dan.
A continuación, se presenta un ejemplo tomado del portal de la Alianza para la Educación Católica
en los Estados Unidos (ace.nd.edu). La página principal utiliza diversas formas de presentar lo más
destacado, a través de una cantidad impresionante de contenidos del sitio.
Fig. 1.2 Portal de la Alianza para la Educación Católica

Fuente: <ace.nd.edu>
El siguiente sitio web se llama la Maison de Lucy, y proporciona una visión clara y atractiva de sus
servicios y proyectos.
Fig. 1.3 La Maison de Lucy

Fuente: <lamaisondelucy.com/>
Joomla puede manejar sitios complejos con miles de páginas. A continuación, un ejemplo de sitio rico
en contenido con el diseño del sitio web del Museo Guggenheim, hecho a medida.
Fig. 1.4 Sitio web del Museo Guggenheim

Fuente: <http://www.guggenheim.org/>
Un último ejemplo demuestra que los sitios de Joomla no tienen que parecerse en nada a un sitio
basado en CMS típico. Usted puede utilizar absolutamente un diseño diferente y aprovechar la
funcionalidad predeterminada de Joomla para alimentar el sitio. Este sitio presenta una empresa
holandesa de eventos.
Fig. 1.5 Empresa holandesa de eventos

Fuente: <puurspecialevents.nl>
TIP
Si está buscando un poco más de inspiración, navegue por la

sección de vitrina (showcase) de Joomla, en http://community.
joomla.org/showcase o visite www.bestofjoomla.com y eche un
vistazo alrededor de la sección Best of Sites.
1.5 Aprender a usar Joomla

Puede sonar demasiado bueno para ser verdad, pero ¿puede Joomla realmente crear sitios web de
última generación de manera fácil como el ABC? Siendo honestos, se hará razonablemente fácil, pero
se requiere invertir algo de tiempo y esfuerzo; después de todo, el trabajo con Joomla (o cualquier
CMS) es muy diferente al de la construcción de sitios web de la manera tradicional. Se dará cuenta
de esto tan pronto como empiece la instalación del sistema, ya que, a diferencia de crear un sencillo
sitio web estático que consiste en un par de páginas HTML, la construcción de un sitio desarrollado en
Joomla necesita algo más de preparación. Necesitará un espacio de hosting que cumpla con requisitos
específicos y tendrá que crear una base de datos. Este libro le guiará paso a paso a través del proceso.
Una vez configurado Joomla, pronto dominará la creación de un sitio básico. El siguiente reto
es conseguir un formato adecuado a sus objetivos particulares. Después de todo, usted no quiere
cualquier sitio desarrollado en Joomla, sino construir un sitio específico, dirigido a un público objetivo
específico. Diseño de sitios web administrables con Joomla 3 le ayudará a ir más allá de un sitio básico
y elegir las opciones que se ajusten a sus objetivos.
Incluso usando un CMS necesitará tiempo y esfuerzo para crear y mantener grandes sitios web; sin
embargo, Joomla hará que sea mucho más fácil y divertido para usted y los miembros de su equipo
web poner en marcha su sitio web y mantenerlo en constante evolución.
Diseño de sitios web administrables con Joomla 3 le enseñará cómo utilizar Joomla para hacer la mejor
página web posible. Después de todo, si está interesado en las características y capacidades de Joomla,
puede obtener una impresión razonable explorando la interfaz por sí mismo y probar los menús y
opciones. Sin embargo, incluso una interfaz fácil de usar no le dice cómo implementarla de la mejor
manera en circunstancias de la vida real. ¿Cuál es la mejor y más rápida manera de empezar? ¿Qué
características y opciones son particularmente útiles? ¿Cuáles son las que probablemente no tenga
que molestarse en utilizar en absoluto? Este libro quiere ayudarle a domar la bestia llamada Joomla,
a encontrar su propio camino y cumplir sus expectativas con un sitio web de buena apariencia y fácil
de usar.
Este libro se basa en el aprendizaje práctico, ya que su estructura refleja el proceso de construcción
de un sitio web. En los primeros capítulos aprenderá cómo instalar Joomla, hará un recorrido por el
sistema y tendrá una idea de cómo trabaja. Posteriormente, aprenderá todo lo que se necesita para
construir y mantener su propio sitio, como por ejemplo:
}}Dominar los fundamentos de la creación de un sitio web básico en una hora.

}}Adaptar y expandir el sitio según sus necesidades de cambio. Vamos a establecer una estructura de
sitio y aprender cómo agregar diferentes tipos de páginas.
}}Cómo involucrar a los visitantes de su web y convertirlos en usuarios activos que puedan registrarse
y agregar contenido.
}}Ampliar las capacidades de Joomla y agregar características especiales al sitio (por ejemplo una
galería de imágenes). Cambiar el diseño del sitio y hacerlo más atractivo.
TIP
¡Siéntase libre de saltar capítulos!
No se preocupe, para aprender el uso de Joomla no tiene que seguir

todos los capítulos del libro y los ejercicios paso a paso. Después
que haya pasado por los capítulos de introducción, tal vez se sienta
cómodo para saltar a los capítulos sobre cómo cambiar el diseño
de su sitio o agregar extensiones. Eso está bien, ya que se puede
pasar directamente a la mayoría de los nuevos capítulos y seguir
los ejercicios allí, siempre y cuando tenga una versión de trabajo de
Joomla y un contenido ficticio disponible.
En el sitio web de Joomla hay dos versiones disponibles para su descarga: 2.5 y 3.x. Joomla 2.5 contará
con apoyo hasta el 2014. Todavía se usa actualmente, sobre todo por los desarrolladores web con
experiencia que necesitan un CMS maduro y quieren elegir entre miles de extensiones desarrolladas
específicamente para 2.5.
Joomla 3.0 es la primera versión de la próxima generación. Es estable y fiable, y los desarrolladores
de Joomla seguirán haciendo mejoras hasta que la nueva versión de largo plazo 3.5 esté acabada. Si
empieza a usar Joomla ahora, su mejor opción es la versión 3.2, ya que se beneficiará de las últimas
mejoras, funciones y del número de extensiones elegibles que crecen rápidamente todos los días.
Nota Como Joomla 3 está siendo desarrollado activamente, nuevas características

pueden estar disponibles. Un ejemplo es el componente Etiquetas, que se
agregó en la versión 3.1.
1.6 Acerca del sitio ejemplo

En el curso de este libro aprenderá cómo construir un sitio real paso a paso. En lugar de aprender
sobre las capacidades de Joomla en términos generales, podrá cumplir con los retos del mundo real
de construcción web. A lo largo del libro alcanzará todos los objetivos de su cliente ficticio, es decir:
«Quiero un sitio web en el que los miembros de mi equipo puedan hacer actualizaciones ellos mismos»
o «Quiero un sitio web que sea fácil de navegar a través de una gran cantidad de contenido».
Ahora, ¿quién es ese cliente suyo? Es Fascination, una empresa que fabrica medias panty para damas.
Ellos necesitan mostrar un catálogo de sus productos y tener un sitio web que informe al público
acerca de sus objetivos, ofertas y promociones, y que muestre un catálogo detallado de sus productos,
animando a la gente a visitar la tienda y comprar.
Tomará el sitio Fascination a través de diferentes etapas de desarrollo. Primero basará el sitio en el
diseño y presentación predeterminado de Joomla, tal como se ve a continuación:
Más tarde, agregará funciones avanzadas y dará formato a los contenidos y al diseño del sitio para
satisfacer las necesidades de cambio de su cliente.
El sitio Fascination es un buen ejemplo de lo que se puede lograr con Joomla. Usted comienza con un
sitio web básico y luego va agregando características sofisticadas a medida que avanza. Por supuesto,
puede seguir a lo largo de este libro sin tener que realizar todas las acciones descritas, pero encontrará
que es una manera efectiva y divertida de aprender la construcción de un sitio y perfeccionar sus
habilidades paso a paso.
Cap.
I n st a l a c i ó n : H a c e r qu e
Joomla funcione
2
CAP. 2: I nstalación : H acer que joomla funcione 25
Joomla no es solo un paquete ordinario de software que puede instalar en su propio computador,
sino que necesita un servidor web para funcionar. Si usted es nuevo en Joomla, la instalación de una
aplicación web podrá parecerle desalentadora, y es que el proceso de instalación es probablemente la
parte menos interesante de trabajar con Joomla. Sin embargo, solo debe seguir unos cuantos pasos,
pues el proceso es bastante sencillo. Toma un poco de preparación, pero si tiene todo listo va a caminar
a través del amigable asistente de configuración de Joomla que se toma la mayor parte de la molestia
que causa la instalación.
Con ayuda de este capítulo podrá instalar Joomla en un servidor web, lo que permitirá a usted o
cualquier otra persona con acceso a Internet, ver y visitar inmediatamente su sitio desarrollado por
Joomla. Este será accesible a través de su propia dirección web (URL), como http://www.ejemplo.com.
Al construir y personalizar el sitio, usted podrá acceder a él a través de su navegador.
En este capítulo, aprenderá qué se necesita para instalar Joomla, cómo dejarlo en funcionamiento, qué
se obtiene al instalarlo y dónde encontrar más ayuda sí queda bloqueado.
2.1 Qué se necesita para empezar

Para instalar y ejecutar Joomla necesitará espacio de hosting y algunas herramientas. Aquí hay una lista
completa de los requisitos.
A. Espacio de hosting
En primer lugar, necesitará espacio de alojamiento (hosting), un lugar en el servidor web donde
puede configurar su sitio haciéndolo accesible para cualquier persona con acceso a Internet. Su
cuenta de hosting debe soportar el lenguaje de programación PHP, ya que Joomla está escrito en
dicho lenguaje; además, debe soportar el tipo de base de datos que usa Joomla, llamado MySQL, y
tiene que ejecutar el software de servidor Apache. En concreto, estos son los requisitos del sistema
para Joomla 3.x:
}}PHP 5.3.1 o superior. PHP es el lenguaje de programación en que Joomla está escrito.
}}MySQL 5.1 o superior. La base de datos MySQL es donde Joomla almacena sus datos (el contenido
de su sitio).
}}Apache 2. x o superior. Apache es el software de servidor web que procesa las instrucciones de
PHP para saber cómo extraer los contenidos de la base de datos y mostrar una página web.
}}Soporte de XML y Zlib. La instalación de PHP de su proveedor debe soportar XML y la funcionalidad
Zlib. Por otra parte, el ajuste de PHP llamado Magic Quotes GPC debe estar desactivado. Si este
ajuste no está desactivado, su proveedor de hosting deberá corregir esto.
No debería tener ninguna dificultad para encontrar cuentas de hosting que cumplan con estos requisitos
del sistema. Si no está seguro, el proveedor de hosting debe decirle si su servicio es compatible con
Joomla.
Puede encontrar los requisitos detallados del sistema en el sitio oficial de ayuda de Joomla:
http://www.joomla.org/technical-requirements.html
TIP
¿Qué pasa si no tiene el espacio de hosting?
Si aún no tiene una cuenta de hosting, puede instalar Joomla en su

computador. Esto implica que primero debe instalar un software de
servidor web, lo que hará que Joomla se ejecute en su computador como
si se tratara de un servidor web real. La forma más rápida de hacerlo es
utilizar un paquete de instalación todo-en-uno. Visite http://bitnami.org
para descargar el programa gratuito de código abierto BitNami Joomla
Stack, que instalará de forma automática tanto el software de servidor
web y Joomla de una sola vez.
Otra opción es instalar primero el software de servidor web y luego el de

Joomla en su computador. Hay varios paquetes disponibles de software
de servidor web que son libres, como XAMPP para equipos con Windows,
Linux y Apple, WampServer para Windows y MAMP para Apple. Vea
www.wampserver.com, www.apachefriends.org/en/xamppp.html o
www.mamp.info. Este enfoque es útil para fines de prueba y hace más
fácil desarrollar un sitio sin tener acceso a un servidor web. Sin embargo,
también hay un par de inconvenientes. Va a tener acceso a su sitio Joomla
desde un solo computador, y cuando su sitio esté listo para el mundo
tendrá que instalarlo en un servidor web real de todos modos. En este
libro nos centraremos en la instalación y ejecución de Joomla en un
servidor web.
B. Software FTP
Para transferir archivos desde su computador al servidor web, es necesario un software FTP. FTP es
la abreviatura de File Transfer Protocol. Un programa de FTP es comparable al explorador de archivos
de Windows o al Finder de Mac. Se utiliza para administrar los archivos y moverlos de un lugar a
otro; la única diferencia es que el programa FTP le permite mover archivos desde su computador a
su espacio de hosting en un servidor web (y viceversa).
Si es nuevo en FTP, haga una búsqueda en Internet de tutoriales de FTP, para familiarizarse con los
procedimientos básicos. Véase, por ejemplo, http://www.desarrolloweb.com/manuales/72/.
TIP
¿Está buscando software FTP? Eche un vistazo al software libre
(open source) FileZilla, disponible para equipos que ejecutan
Windows, Apple y Linux. Puede descargarlo desde http://filezilla-
project.org. Y si está usando Mozilla Firefox, podría usar FireFTP, un
plugin FTP para ese navegador.
C. Más de un navegador
No debería tener problemas para administrar su sitio Joomla con el navegador que utilice; sin
embargo, las personas que crean sitios web a menudo instalan más de un navegador en su
computador. Además del siempre popular Microsoft Internet Explorer, es posible que desee instalar
Google Chrome (www. google.com/chrome) y Mozilla Firefox (www.mozilla.org). Tener más de un
navegador le permite comprobar si su sitio se ve bien en los principales navegadores. Asegúrese de
tener la versión actual de estos navegadores, ya que los más antiguos pueden no mostrar los sitios
web actuales como se debe (especialmente las versiones anteriores de Microsoft Internet Explorer
son notorias a este respecto).
Una ventaja especial de contar con Chrome o Firefox es que estos navegadores ofrecen un par
de características que facilitarán su trabajo como desarrollador web. Google Chrome viene con
herramientas de desarrollo incorporadas; haga clic derecho en una página web y seleccione la
característica Inspeccionar Elemento para conseguir una mirada bajo el capó y analizar el código
fuente HTML y CSS de una página. Esto puede ser de gran ayuda cuando quiera personalizar el
estilo y la presentación de su sitio web. Firefox dispone de una funcionalidad similar mediante la
instalación del complemento Firebug1.
2.2 Actualizar desde versiones anteriores de Joomla

Si ya ha construido sitios web con Joomla 1.5 o Joomla 2.5, puede actualizar y cambiar su sitio existente
a Joomla 3.0 o una versión superior; sin embargo, este no es un proceso automatizado. El esfuerzo que
tome depende de la versión de Joomla en la que está funcionando su sitio actual, y de qué extensiones
y plantillas está utilizando. ¿Qué se puede hacer si desea mantener el contenido y la estructura
existentes de su sitio web al actualizar a Joomla 3.x? A continuación, un resumen de las posibilidades.
Nota Cuando decida actualizar su sitio, asegúrese de crear una copia de

seguridad. De esta manera, si algo sale mal siempre puede volver a la
situación anterior. Una gran (y gratuita) herramienta para respaldar sitios
Joomla es Akeeba Backup, que está disponible para todas las versiones de
Joomla desde 1.5 en adelante. Visite www.akeebabackup.com para más detalles.
2.2.1 Actualización de Joomla 1.5 y 3.x
Si su antiguo sitio todavía está trabajando con Joomla 1.5, el cambio a Joomla 3.x implicará un
proceso de migración importante. No hay ninguna funcionalidad integrada que se encargue de la
actualización; la razón principal es que la estructura de la base de datos de contenido ha cambiado
sustancialmente desde Joomla 2.5. Sin embargo, hay algunas herramientas disponibles para ayudarle
a migrar su sitio a la versión más reciente.
Puede probar una extensión gratuita para Joomla llamada jUpgrade. Este componente moverá todo
el sitio, incluyendo su base de datos, desde 1.5 a 2.5. Al momento de escribir el libro, jUpgrade no
admite la migración a Joomla 3.x. Después de migrar a Joomla 2.5, tendrá que actualizar Joomla 2.5
siguiendo el procedimiento descrito más adelante en este capítulo.
Usando jUpgrade, tendrá que actualizar algunas cosas usted mismo. Por ejemplo, una plantilla que
se utiliza en Joomla 1.5 no funcionará en las versiones más altas, por lo que tendrá que usar una
plantilla nueva o actualizar la antigua. Lo mismo vale para las extensiones usadas en su antiguo sitio.
En definitiva, jUpgrade será muy útil si desea migrar el propio CMS y su contenido principal
(artículos y extensiones de Joomla predeterminados). Puede encontrar un tutorial detallado sobre la
actualización de Joomla 1.5 usando jUpgrade en el siguiente sitio web:
http://www.joomm.net/index.php/joomla-tips-and-tutorials/upgrading-joomla-1-5-to-2-5
1
Para mayor información sobre el uso de herramientas de desarrollo web, revisar el décimo capítulo.
Nota Actualmente existe una extensión comercial disponible que se encarga

de la migración de sitios Joomla 1.5 a 3.0 en un paso, su nombre es SP
Upgrade; sin embargo, tenga en cuenta que las plantillas y extensiones
tendrán que ser actualizadas manualmente. Vea http://extensions.joomla.org/
extensions/migration-a-conversion/joomla-migration/15609.
2.2.2 Actualización de Joomla 2.5 a 3.x
A partir de Joomla 2.5, el CMS soporta las actualizaciones con un solo clic para mantenerlo al día.
Puede utilizar el componente incorporado de actualización de Joomla 2.5 para actualizar a la versión
3.0 o superior; sin embargo, hay algunas cosas a tener en cuenta:
}}Elsistema de plantillas de Joomla 3.x ha cambiado, lo que significa que no podrá usar su antigua
plantilla de Joomla 2.5 en Joomla 3.x. Tendrá que averiguar si el desarrollador de la plantilla ha
creado una nueva versión que sea compatible con Joomla 3.x, o tendrá que convertir la plantilla
antigua.
}}La mayoría de las extensiones de terceros desarrolladas para Joomla 2.5 tendrán que ser
convertidas por sus desarrolladores para que sean compatibles con Joomla 3.x. Si es necesario
utilizar una extensión que aún no está lista para Joomla 3.x, es posible que tenga que buscar una
extensión lista para 3.x de otro desarrollador que ofrezca una funcionalidad similar.
En el capítulo anterior, ha encontrado información sobre el ciclo de liberación de Joomla, habrá

versiones de Joomla 3.x hasta que se publique la próxima versión de Joomla 3.5.
Por defecto, en Joomla 2.5 solo recibirá actualizaciones para Joomla 2.5 (por ejemplo, 2.5.1 y
así sucesivamente). Para habilitar la actualización automática de Joomla 2.5 a Joomla 3.x, vaya
a Componentes | Actualización de Joomla. Haga clic en Opciones y seleccione Servidor de
actualizaciones: Soporte de corta duración - STS.
Después de guardar esta configuración, Joomla notificará las actualizaciones tan pronto como estén
disponibles, y le permitirá actualizar Joomla 2.5 hasta 3.x o superior.
2.3 Instalación de Joomla en cuatro pasos

Si ha configurado una cuenta de hosting web y tiene las herramientas necesarias, ya está listo para
empezar. La instalación de Joomla sigue estos pasos:
}}Descargar los archivos de Joomla desde www.joomla.org
}}Colocar los archivos en el servidor web
}}Crear una base de datos
}}Instalar Joomla mediante un asistente de instalación
El resto de este capítulo le servirá como una guía detallada de este procedimiento.
2.3.1 Pasos para descargar los archivos de Joomla
Empiece descargando la versión actual de Joomla.
1. Apunte su navegador a www. joomla.org. En la página principal, haga clic en el botón Joomla 3.
Esta acción le llevará a la página de descarga. Seleccione la última versión2.
Asegúrese de descargar el Full Package (las otras versiones son actualizaciones para las instalaciones
existentes de Joomla).
2. El archivo de descarga predeterminado es un archivo ZIP. Descargue este archivo a su disco duro.
3. Descomprima el archivo comprimido a una carpeta de su disco duro. Si no tiene un programa de
software para descomprimir archivos revise http://www. 7zip.org, un programa de descompresión
de archivos de código abierto.
2
En esta publicación se hace referencia a la versión 3.2.2.
Usted ha descargado y extraído los archivos de software de Joomla. Todos los archivos necesarios para
instalar Joomla ahora se almacenan en una carpeta de su computadora.
2.3.2 Colocar los archivos en el servidor web
A continuación, inicie su programa de FTP y suba todos los archivos descomprimidos en la carpeta
en el servidor web. Se hace de la siguiente manera:
1. En su programa de FTP, vaya a la carpeta que contiene los archivos descomprimidos de Joomla.
Seleccione todos los archivos (no seleccione la carpeta, solo su contenido).
2. Seleccione el directorio de destino y el directorio raíz del servidor web. El directorio raíz se llama a
menudo httpdocs, htdocs, httpd, public_html o www. Si no puede encontrar la carpeta, su empresa
proveedora de hosting deberá ayudarle.
Nota No se preocupe por el nombre de la carpeta raíz (httpdocs o cualquiera de

los otros nombres listados anteriormente). Este nombre no se mostrará
en la dirección web de su sitio. Los visitantes no tienen que escribir www.
ejemplo.com/httpdocs, sino www.ejemplo.com, que los llevará a su sitio; sin
embargo, si crea una carpeta dentro de httpdocs, este nombre de carpeta se
mostrará en su dirección web. Si crea una carpeta llamada httpdocs/joomla e
instala Joomla allí, su sitio será accesible solo a través de www.ejemplo.com/
joomla. Esto significa que debe crear una subcarpeta si esto es lo que quiere (por
ejemplo, cuando está haciendo una prueba de Joomla y desea seguir usando el
directorio raíz para su sitio actual).
3. En su programa de FTP, seleccione todos los archivos de la carpeta de Joomla. La lista de los archivos
debe ser similar a la de la mitad izquierda de la pantalla que se muestra en la siguiente captura. Esta
ilustración muestra la pantalla de FileZilla, pero si está usando otro programa FTP esta no debería
ser muy diferente.
En el servidor web (el lado derecho de la pantalla del programa FTP), seleccione la carpeta de destino
(httpdocs).
4. En su computadora, al lado izquierdo de la pantalla del programa FTP, seleccione todos los archivos
en la carpeta que contiene los archivos de Joomla que previamente han sido descomprimidos. Haga
clic derecho en la lista con los archivos seleccionados y seleccione Subir para copiar los archivos de
Joomla en el directorio raíz del servidor web.
Acaba de conseguir que su programa de FTP copie todos los archivos de Joomla desde su equipo al
servidor web. No se preocupe si esto toma algún tiempo; subir miles de archivos de Joomla puede
tardar diez minutos o más, dependiendo de la velocidad de su conexión a Internet.
TIP
Algunas empresas de hosting web soportan una función que permite
una transmisión más rápida: usted puede cargar el archivo ZIP y
extraer Joomla en el servidor web, usando la herramienta de gestión
de archivos del panel de control del servidor web. Si su proveedor de
hosting soporta esta característica, es mucho más rápido que extraer
el archivo ZIP en su computador y subir miles de archivos separados.
2.3.3 Crear una base de datos
El siguiente paso es crear una base de datos vacía para Joomla. Si es nuevo en Joomla, comprender
el concepto de una aplicación web con una base de datos puede tomarle algún tiempo. La base de
datos no es un archivo normal que se puede crear (o copiar, mover o eliminar) en el servidor web;
para crear y gestionar una base de datos, se utiliza un software especial. La mayoría de empresas de
hosting web ofrecen acceso a bases de datos a través de una interfaz web (usualmente llamado Panel
de control). Los paneles de control más populares son Plesk y cPanel. Encontrará más información
sobre el panel de control que está disponible para usted en la información de su cuenta de hosting.
En el siguiente ejemplo se usará el panel del proveedor Godaddy para crear una nueva base de
datos. Si su compañía de hosting proporciona otro panel de control, el procedimiento básico no será
muy diferente; sin embargo, si no está seguro de cómo acceder al panel de control de su servidor
web, el proveedor deberá proporcionarle todos los detalles. También encontrará documentación
en línea para los paneles de control de alojamiento web más comunes; para CPanel, busque MySQL
Database Wizard en http://docs.cpanel.net para encontrar información sobre este tema.
TIP
Algunos proveedores de hosting web no permiten a sus usuarios crear
su propia base de datos; en lugar de ello, proporcionan una base de
datos preinstalada. De ser el caso, puede ir directamente al paso 4,
donde se ejecuta el asistente de instalación de Joomla. Necesitará
algunos detalles de la base de datos para esto: el nombre de la base
de datos, el nombre de usuario de la base de datos y una contraseña
para este usuario. Compruebe la información de la cuenta que ha
recibido de su proveedor.
1. Inicie sesión en el panel de control de Godaddy con la información de la cuenta que ha recibido de
este proveedor de hosting. Para agregar una nueva base de datos, haga clic en Databases y haga
clic en MySQL.
2. Ingrese un nombre para la nueva base de datos, por ejemplo, joomladatabase. También un usuario
(por ejemplo, joomlausuario) y un password seguro. Haga clic en OK.
3. Aparece una pantalla que confirma la creación de la base de datos:
4. Anote los datos que necesita para instalar Joomla más tarde: el nombre de la base de datos, el
nombre de usuario de base de datos y la contraseña de la base de datos.
Al usar un panel de control web, ha establecido una base de datos vacía y creada por un usuario para
esa base de datos. Ya casi ha terminado, este es el último paso en la preparación de la instalación de
Joomla.
2.3.4 Ejecutar el asistente de instalación de Joomla
Si ya tiene todos los archivos de Joomla copiados al servidor web y una base de datos lista para ser
llenada, finalmente procederá a instalar Joomla.
1. Ingrese la URL de su sitio web (por ejemplo, http:// www.ejemplo.com) en su navegador. Aparecerá
la siguiente pantalla de instalación:
TIP
El instalador de Joomla comprobará si la configuración de su servidor
web cumple con los requisitos de la instalación. De ser así, será llevado
a la pantalla Configuración principal. Si cualquiera de los ajustes del
servidor web requeridos no se cumple, no podrá instalar Joomla.
En ese caso, se mostrará una pantalla de los ajustes necesarios y
marcará los que requieran atención. Si hay algún problema, póngase
en contacto con su proveedor de hosting para que le apoye a corregir
la configuración del servidor web.
2. En la pantalla Configuración principal, cambie los ajustes e ingrese información de la siguiente

manera:
}}Seleccionar el idioma. Puede seleccionar el idioma que desea utilizar durante la instalación. En
este caso, debemos cambiar al idioma Español.
}}Nombre del sitio. Ingrese el nombre del sitio web y se mostrará en la barra de título del navegador
(y en algunos casos en el encabezado del sitio). En este ejemplo se ha ingresado Fascination;
aprenderá más acerca de este apreciado cliente por su sitio de ejemplo en capítulos posteriores.
}}Descripción. Por el momento está bien dejar este espacio en blanco. Aquí puede introducir una
o dos frases para explicar lo que su sitio tiene que ofrecer. La información es importante para los
motores de búsqueda, pero puede agregar esto en una etapa posterior a través de las opciones
de configuración de Joomla.
}}Correo electrónico del administrador. Ingrese una dirección de correo electrónico válida. Joomla
usará esto para enviar mensajes del sistema y se utilizará como la dirección de correo electrónico
de la cuenta de usuario de administrador predeterminada.
}}Nombre de usuario del administrador. Su nombre de usuario predeterminado es admin. Por
razones de seguridad, deberá elegir un nombre de usuario difícil de adivinar (de preferencia
más complicado que admin). Sin embargo, en este ejemplo vamos a mantener la configuración
predeterminada por conveniencia.
}}Contraseña del administrador. Ingrese la contraseña del administrador del sitio. Esta debe ser
distinta a la que ingresó previamente para el usuario de base de datos. Esta nueva contraseña
será creada aquí y ahora, y se usará para conectarse a Joomla después de la instalación.
}}Sitio fuera de línea. Esto se establece en No de manera predeterminada. Después de la instalación,
el sitio (vacío) estará inmediatamente en línea. Si desea mantenerlo inaccesible para los visitantes
y que sea accesible solamente para usted después de que inicie su sesión, seleccione Sí. En ese
caso, después de la instalación de Joomla los visitantes verán un mensaje indicando que el sitio
está temporalmente fuera de línea.
3. Haga clic en el botón Siguiente. Esto le llevará a la pantalla Configuración de la base de datos.
En esta pantalla ingrese los siguientes datos:
}}Tipo de base de datos. Es probable que aparezca la opción MySQLi. En la actualidad, la mayoría
de los servidores web soportan MySQLi (MySQL Improved), que permite una comunicación más
rápida y más segura con la base de datos que el tradicional tipo de base de datos MySQL.
}}Hospedaje. Por lo general es localhost, a menos que su empresa de hosting web le haya
proporcionado otro nombre.
}}Usuario. Ingrese el nombre de usuario para la base de datos que creó anteriormente. Si no la ha
creado usted mismo, su proveedor de hosting debe ofrecerle los detalles de la bases de datos y
del usuario. En nuestro ejemplo, el nombre de usuario es databaseadmin.
}}Contraseña. Ingrese la contraseña del usuario de la base de datos que ha creado al configurar
la base de datos. Una vez más, si el proveedor de hosting ha creado la base de datos, debe
proporcionarle la contraseña de usuario para la base de datos.
}}Base de datos. Ingrese el nombre de la base de datos que eligió al crearla. Si usted no ha creado
una, debe ingresar el nombre que ha recibido de su proveedor de hosting.
}}Prefijo de las tablas. Puede dejar este campo sin cambios. Un prefijo de las tablas solo es
relevante cuando una base de datos es compartida por varias instalaciones de Joomla. De esta
manera, cada uno de ellas puede buscar los datos apropiados en la base de datos mediante la
comprobación del prefijo correcto.
}}Proceso para una base de datos antigua. Esta opción solo es relevante cuando antes ha instalado
Joomla, y necesita vaciar las tablas (los contenidos) de una base de datos anterior. Seleccione
Respaldar para realizar copias de seguridad del contenido de las bases de datos existentes de una
instalación anterior de Joomla, o seleccione Borrar para eliminarlas.
4. Una vez que la pantalla Configuración de base de datos se ha completado, haga clic en Siguiente.
Joomla comprobará ahora si se puede conectar a la base de datos.
5. Si ve un mensaje de error, probablemente haya cometido un error de escritura al ingresar los datos
de la base de datos. Asegúrese de haber escrito correctamente la contraseña. Puede volver a la
pantalla de detalles de la base de datos, introducir los datos correctos y hacer clic de nuevo en
Siguiente.
6. Si todo marcha correctamente, se llegará a la pantalla de Finalización.
Aunque se trata de una pantalla impresionantemente larga (tendrá que desplazarse hacia abajo para
verla en su totalidad), su principal objetivo es dar una visión general de todos los ajustes actuales. Aquí
solo tendrá que realizar una o dos opciones.
}}Instalar los datos de ejemplo. Cuando se crea un sitio Joomla por primera vez, una buena idea
es instalar los datos de ejemplo. Puede elegir entre varios conjuntos de datos de ejemplo; puede
seleccionar Datos de ejemplo tipo Blog para instalar Joomla con algunos artículos, menús y módulos
de blogs. En este caso, seleccione Datos de ejemplo Learn Joomla English (GB). Con esta opción de
datos de ejemplo se obtiene una muestra de un sitio ya preparado que puede aprovecharse para
construir sobre esta base; viene lleno con páginas, menús y extensiones de ejemplo. Si quiere seguir
los ejercicios de este libro tendrá que instalar los Datos de ejemplo Learn Joomla English (GB).
Si no instala los datos de ejemplo tendrá que crear todo el contenido desde cero. Preferirá esta opción
cuando su conocimiento de Joomla le permita saber por dónde empezar, cómo agregar contenido y
cómo personalizar las cosas.
Configuración del correo electrónico. Si desea que Joomla le envíe un correo electrónico con un
resumen de todos los ajustes del sitio seleccione Sí. Al hacerlo, se le presentará una opción adicional:
si también desea que le envíen las contraseñas por correo electrónico. Por razones de seguridad se
recomienda no enviar contraseñas por correo electrónico.
7. Haga clic en el botón Siguiente. Joomla ahora comenzará la instalación y mostrará los progresos. En
unos pocos minutos se presentará la última pantalla:
Ahora está listo para empezar pues solo queda una cosa por hacer. Antes de poder usar Joomla, debe
eliminar la carpeta denominada installation. Esta carpeta contiene información necesaria para la
instalación, aunque ya no sea relevante (y no quiere revelar su contenido a los hackers). Haga clic en el
botón Eliminar carpeta de instalación para realizar esta acción; el texto del botón cambiará a Carpeta
de instalación eliminada con éxito.
¡Felicidades! Ahora Joomla ya está instalado. En la pantalla actual, haga clic en el botón Sitio para ver
el aspecto de su sitio Joomla.
Pero en Joomla hay mucho más de lo que el visitante puede ver. Para ir a la página secreta de acceso
a su sitio, ingrese la URL de su sitio en la barra de dirección del navegador, agregando la palabra
administrator: www.ejemplo.com/administrator.
Visualizará la siguiente página:

Aquí puede conectarse a la interfaz administrativa o backend del sitio usando el nombre de usuario (el
que escogió en la página Configuración principal de la rutina de instalación) y la contraseña que creó
durante la instalación (asegúrese de ingresar la contraseña de administrador del sitio, no la de usuario
de la base de datos). Haga clic en Conectar para revelar la siguiente interfaz web de Joomla:
2.4 Cambiar el idioma

La instalación que acaba de realizar muestra una interfaz en inglés. Para cambiar el idioma a español
haga lo siguiente:
}}Estando en el backend, vaya a Extensiones | Gestor de Idiomas.

}}En la ventana que aparece haga clic en Instalar Idiomas.
}}Aparecerá una larga lista de idiomas dividida en varias fichas; vaya a la ficha 3, y active la casilla de
verificación Spanish.
}}Haga clic en el botón Instalar.
}}Aparecerá el mensaje Instalar Spanish se ha realizado correctamente.
}}Ahora vuelva a Extensiones | Gestor de Idiomas.
}}En la columna izquierda está seleccionada la opción Instalado - Sitio. Haga clic en la estrella
correspondiente a Spanish, que está en la columna Predeterminado.
Ahora elija Instalado - Administración y repita el paso anterior.
8. Debe salir y volver a acceder al backend y podrá ver una interfaz en español como la siguiente:
2.5 Obtenga ayuda

¿Necesita más ayuda y consejos sobre la instalación de Joomla?
}}Visite el sitio de documentación de Joomla en http://docs.joomla.org, y compruebe las páginas

de introducción a las páginas de Joomla en http://www.joomla.org/about-joomla/getting-started.
html.
}}No olvide que hay muchos video-tutoriales gratuitos en YouTube. Busque «instalar Joomla 3.0» y se
le presentarán varias guías de instalación.
}}Si está teniendo problemas con la instalación de Joomla, es probable que su problema ya haya
sido resuelto en el foro oficial de Joomla dedicado a los problemas de instalación. En http://forum.
joomla.org, busque la sección Installation o use la función de búsqueda del foro.
Cap.
P r i m e ro s p a s o s :
Conociendo Joomla
3
CAP. 3: P rimeros pasos : C onociendo joomla 43
Usted acaba de instalar Joomla. Esto significa que ahora puede entrar al sitio web y empezar a utilizar una
de las más interesantes y potentes herramientas de construcción. Antes de comenzar la construcción
de su propio sitio en el próximo capítulo, vamos a tomar algún tiempo para familiarizarnos con la forma
en que funciona Joomla. El sistema cuenta con una interfaz limpia y amigable que es fácil de aprender y
con la que es divertido trabajar; se sorprenderá lo rápido que se puede realizar la gestión de contenido
con tan solo unos pocos clics. Este capítulo es una introducción a las funciones básicas de Joomla.
En este capítulo, podrá familiarizarse con la forma en que Joomla realiza la construcción y el
mantenimiento de sitios web; explorar la interfaz de usuario, probar las principales pantallas y barras
de herramientas; examinar el sitio de ejemplo que Joomla instaló; probar algunas de las tareas de
administración más comunes; y publicar su primer contenido, agregar una extensión y ajustar algunas
opciones de configuración.
De esta manera, tendrá una idea de lo que se siente al usar Joomla como su caja de herramientas web
y estará preparado para construir su propio sitio en el próximo capítulo.
3.1 Hacer el cambio y construir sitios web a la manera Joomla

Si usted es nuevo en Joomla y en sistemas de gestión de contenidos (CMS), encontrará que la creación
de sitios utilizando un CMS toma algo de tiempo para acostumbrarse. Incluso si tiene cierta experiencia
en la construcción de sitios web, tendrá que adaptarse a una manera diferente de trabajar. Pero sin
duda vale la pena el esfuerzo, ya que Joomla le facilitará el trabajo de verdad.
Antes de explorar el sitio de ejemplo que ha instalado en el capítulo anterior, vamos a echar un breve
vistazo a lo que hay de diferente en la construcción de sitios web con Joomla.
Como se sabe, hace varios años, al menos antes del 2005, cuando apareció Joomla, la mayoría de
los sitios web eran artesanales. La creación de un sitio web significaba la creación de páginas, y por
cada nueva página web había que crear un documento HTML independiente. Se tenía que diseñar
una página base y usarla una y otra vez, agregando nuevas páginas y adaptando el diseño para que se
adecúe al tipo de contenido. Sea cual sea la herramienta que utilizaba, Adobe (entonces Macromedia)
Dreamweaver, Microsoft FrontPage, o tal vez un editor de texto plano, se debía diseñar, codificar,
editar o construir la misma página web para que sus visitantes la vieran en su sitio web.
Conseguir cualquier cosa publicada en la Web significaba subir páginas HTML (documentos) de su
computador a un servidor web. Agregar y actualizar los contenidos o gestionar los hipervínculos era
básicamente una tarea artesanal, ya que se abría una página en un editor, se hacían cambios y se
subían de nuevo al servidor web. Esos eran los viejos tiempos de los sitios web estáticos.
Esos días son cosa del pasado. En la actualidad, la mayoría de los sitios web son dinámicos y usan
un CMS para que sea más fácil crear y administrar el contenido. Estos sitios basados en CMS bien
se construyen desde cero (por los programadores web que personalizan un CMS para satisfacer las
necesidades específicas del cliente), o se basan en un CMS genérico como Joomla que puede ser
personalizado y ampliado. Y este dinamismo hace que trabajar con un CMS sea algo totalmente nuevo
y diferente.
3.1.1 Lo sentimos, las páginas web han dejado de existir
La principal diferencia entre el enfoque de la antigua escuela estática y la construcción de un sitio

usando un CMS como Joomla es que no hay páginas web.
Por supuesto, un visitante que navega por su sitio todavía experimenta ese sitio web
como –básicamente– un conjunto de páginas. En Joomla, sin embargo, lo que su visitante ve no es
realmente una página; más bien, es una colección de pequeños bloques de datos interactivos que
el CMS saca de una base de datos. Estos bloques se pueden arreglar y combinar en páginas web de
muchas maneras diferentes.
Tan pronto como su visitante hace clic en un enlace, estará enviando una solicitud a Joomla para
ensamblar partes y piezas de datos para presentar una página web completa. Si el visitante hace
clic en Home, verá una página compuesta por encabezados, imágenes y resúmenes de textos. Si
hace clic en el enlace Leer más, se muestra una nueva combinación de datos. Esta puede consistir
en el mismo encabezado del artículo de la página principal, posiblemente el mismo texto e imagen
de resumen e imagen (ahora se combinan con el texto completo) que los relaciona con artículos,
anuncios relacionados y diferentes opciones de menú.
Al crear sitios web estáticos la página HTML que diseñó debería ser la misma que el visitante del
sitio debería ver. Esta relación uno-a-uno se ha ido por la ventana. Por supuesto, para un visitante,
un sitio basado en Joomla todavía consiste en las páginas web que ve en su navegador; sin embargo,
detrás de las escenas, en Joomla usted no estará editando «páginas», ya que después de todo no
hay páginas en Joomla. Para cambiar la salida (la página web) usted edita los diferentes bloques de
construcción. Estos bloques pueden ser de cualquier parte de la página final: el artículo principal,
una entrada de menú, un anuncio o una lista de hipervínculos a artículos relacionados.
3.1.2 Los beneficios del enfoque CMS para los sitios web
El enfoque dinámico de los CMS como Joomla, hace flexible la creación de sitios web. Usted no tiene
que crear manualmente docenas de páginas de contenido rígido, copiar menús y otros elementos
comunes de página a página a medida que amplía su sitio. En su lugar, elegirá un diseño básico de
páginas y agregará cualquier combinación de bloques de construcción que necesite.
}}¿Quiere crear una página principal con cuatro títulos, textos resumen, enlaces leer más, un menú
principal, una imagen aleatoria, un formulario de acceso o una lista de enlaces a los artículos más
populares? Puede hacer esto fácilmente, ya que el CMS Joomla le permite combinar diferentes
bloques de contenido en su página principal. No se necesitan conocimientos de programación.
}}Si su sitio tiene una sección sobre fotografía digital, ¿desearía que todas las páginas con contenido
sobre cámaras réflex digitales se muestren en un anuncio (banner) para atraer la atención a su
boletín especial sobre fotografía? En Joomla esto se hace sin problemas.
}}¿Le gustaría tener diferentes elementos en su página principal cada día de semana? ¿Desea
establecer una fecha de inicio y una fecha final para la publicación de sus artículos? Todo es posible.
Mientras está de vacaciones, puede hacer que su página principal se actualice automáticamente
con los artículos que preparó de antemano.
En resumen, usted determina qué bloques de contenido Joomla se agregan a cualquier página
específica, y también establece el orden y la disposición de estos bloques en la pantalla del navegador.
Toda esta magia es posible gracias al PHP incorporado en Joomla. Se utiliza el potente lenguaje de
script PHP para comunicarse con una base de datos, recoger solo los bloques de datos que necesita
y presentarlos de la manera deseada.
3.1.3 Un sitio web construido a partir de bloques
Ahora, ¿qué tienen de parecido estos bloques de construcción con la vida real? La siguiente es una
ilustración de un sistema diseccionado para la construcción de páginas de Joomla.
Una página web en Joomla, básicamente se compone de las tres partes que se muestran en las
siguientes capturas de pantalla. Una presentación base (1), el bloque de contenido principal (2), y
tantos bloques de funciones como desee (3):
1. La presentación base. Define la presentación de todo el contenido (la cantidad de columnas,

colores de fondo, gráficos de cabecera, etc.). Esta presentación base también contiene «posiciones»
(espacios que Joomla puede llenar con sus bloques de contenido). En Joomla, esta presentación
base se define en una plantilla. En general, usted configura la plantilla una vez y se olvida de ella, ya
que esta controla el diseño gráfico, y no es parte de su rutina diaria de gestión de contenidos. Va a
aprender más sobre el uso de plantillas en el capítulo 10.
2
2. El área de contenido principal. Esta es la parte esencial, ya que incluye el contenido crudo. Si va
a publicar un artículo, mostrar un formulario de contacto o una galería de fotos, estas aparecerán
aquí. En Joomla, esta área se llama mainbody. En la mayoría de los casos el mainbody aparece en
el medio de la página.
3. Los bloques alrededor del área de contenido principal. Ejemplos de ello son el cuadro de búsqueda, el
Menú Principal en la barra lateral de la derecha y el Formulario de Acceso. Estos bloques se denominan
módulos, y pueden contener funcionalidades avanzadas: menús, listas dinámicas con hipervínculos
a contenidos populares, imágenes aleatorias, presentaciones de diapositivas, etc. Cualquier cosa que
se muestre en la parte superior, izquierda, derecha o inferior de una página Joomla se hace utilizando
módulos. La instalación predeterminada de Joomla viene con docenas de módulos, ya que el sistema
es muy extensible.
En resumen, la plantilla funciona como un marco; el área de contenido principal o mainbody, es el
bloque de construcción central y esencial que encaja perfectamente en el medio; y los módulos son
bloques que se pueden agregar y organizar en torno al mainbody, como usted guste, para agregar
funciones esenciales a su sitio.
3.2 Introducción al frontend y al backend: La interfaz de Joomla

Entonces, ¿cómo se llega a construir el sitio web que se desea, utilizando el conjunto de bloques de
construcción de Joomla?, ¿y cómo se llega al área de contenido principal para mostrar el contenido
de la manera que usted desea?, ¿cómo se trabaja con los módulos? Para responder a estas preguntas,
primero debe observar la interfaz de Joomla, el espacio de trabajo que contiene todas las herramientas
y controles que necesitará para cualquier mágica construcción web.
La siguiente captura de pantalla muestra las dos caras del sitio de ejemplo Joomla instalado en el
capítulo anterior: el frontend y el backend.
3.2.1 Su área de trabajo: El backend
Joomla es una aplicación web y una herramienta de software que está instalada en un servidor
web y a la que se accede a través de un navegador. La creación y gestión de un sitio con Joomla es
una actividad en línea. Esté donde esté, si tiene acceso a Internet, puede conectarse a la interfaz
de administración de Joomla para gestionar su sitio. Esto significa que cada sitio Joomla tiene una
«entrada para el staff» que los visitantes del sitio nunca llegarán a ver. Es la interfaz de administración
o backend de su sitio, y se accede a través de una página principal de sesión que se muestra cuando
se agrega /administrator a la dirección URL del sitio. De forma predeterminada, solo el administrador
del sitio tiene permiso para conectarse al backend; más tarde, el administrador puede dar acceso
a otros colaboradores. Aunque también hay una herramienta como la edición de frontend, por lo
general usted administrará su sitio usando el backend, que es la interfaz para todas las tareas de
administración del sitio, tales como la adición de contenido, el cambio de menús o la personalización
de la presentación.
3.2.2 El frontend
La cara pública de su sitio Joomla se llama frontend, palabra que no quiere decir otra cosa que «su
sitio web, tal como el visitante lo ve».
En el resto de este capítulo aprenderá más acerca de estas dos nociones básicas de Joomla. En primer
lugar, se observará el frontend (el resultado final de cualquier cosa que haga en Joomla) mediante
la exploración de los contenidos del sitio web de ejemplo Joomla. Después de eso, examinaremos
cómo funciona el backend y veremos algunas actividades de gestión de contenidos de la vida real.
3.3 Explorando el frontend: el sitio web como lo mira el usuario

Primero observe los elementos de la página principal en el sitio de ejemplo de Joomla. Esto le dará un
buen resumen de los diferentes módulos que ofrece Joomla.
En la captura de pantalla anterior usted puede ver el aspecto de la página principal después de instalar
Joomla con los datos de ejemplo Learn Joomla. Como puede observar, el ejemplo se centra en la
presentación de mucha información, y la página principal empuja al lector hacia el contenido a través
de textos de introducción y varios menús. Hay una imagen principal, la imagen de cabecera, que se
mantiene sin cambios en todas las páginas.
La captura de pantalla anterior de la página principal muestra los siguientes elementos:
1. Caja de búsqueda. Los resultados de búsqueda se muestran en el área de contenido principal.

2. Menú superior. Un menú en la parte superior de la página.
3. Imagen de cabecera. Muestra una imagen seleccionada en una o varias páginas.
4. Mainbody de la página principal. Contiene textos introductorios de artículos seleccionados.

5. Breadcrumb. Muestra la ruta a la página actual.
6. Menú de usuario. Un menú para el usuario registrado.
7. Dos menús diferentes. About Joomla y This Site.
8. Formulario de acceso. Para los usuarios registrados.
Este sitio con un contenido de ejemplo demuestra perfectamente lo que Joomla es capaz de hacer. El
hecho de que ya está lleno de artículos, menús y extensiones le da una gran oportunidad de probar las
capacidades de Joomla y decidir qué características encajan con las necesidades de su sitio.
3.3.1 Un paseo por el sitio de ejemplo
Observe de cerca el sitio de demostración y vea algunos ejemplos de presentaciones de página en

la vida real. Vea cómo el contenido en el mainbody y los módulos alrededor del área de contenido
cambian dependiendo del hipervínculo de menú en que haga clic:
1.- Ingrese la URL de su sitio web (por ejemplo, http://www.misitio.com) en su navegador web.
Si en el capítulo 2 ha instalado Joomla en otra carpeta, la URL sería http://www.misitio.com/
otronombredecarpeta. Reconocerá la página principal, como se muestra en la siguiente captura
de pantalla. El mainbody (la parte visible de la misma se indica en la pantalla) se compone de
cuatro artículos de textos de introducción.
2.- Vamos a explorar cómo el diseño cambia en una página diferente. En el menú About Joomla,
haga clic en Getting Started. Se dará cuenta de que el mainbody muestra un solo artículo, que
es el tipo más común de contenido de la página. El formulario de acceso no se muestra en esta
página. Una vez más, el mainbody se resume en la siguiente captura de pantalla.
3. Ahora, revise otro tipo de diseño de página. En el menú About Joomla, haga clic en Using Joomla
y en Using Extensions. Este enlace le llevará a una página en la que el mainbody comienza con
un pequeño texto introductorio que describe la categoría principal, Extensión. Debajo hay una
lista de enlaces a (y las descripciones de) las subcategorías de la categoría Extensions, tales como
Components, Modules y Templates.
A primera vista, el sitio de ejemplo de Joomla puede parecer abrumador. Hay gran cantidad de
contenido, muchos menús y diferentes tipos de presentaciones de página web. Pero, de hecho,
muchas páginas de sitios Joomla se construyen alrededor de las presentaciones de tres páginas que
acaba de descubrir: la página principal (mostrando los artículos destacados), las páginas de contenido
(con un artículo principal en el mainbody), y las páginas intermedias. Estas últimas funcionan como
páginas de resumen que enlazan a una o más categorías de contenido. Las páginas de resumen
pueden contener una breve descripción de las categorías de contenido o textos introductorios a los
propios artículos (iguales a las que ha visto en la página principal). Estas páginas de resumen ayudan
a los usuarios a descubrir los contenidos del sitio, ofreciéndoles un resumen de los artículos sobre
temas relacionados.
También ha descubierto cómo el mainbody se puede combinar con diferentes módulos. En el sitio de
ejemplo, la página principal contiene un formulario de acceso en la columna de la derecha. En otras
páginas no se muestra este bloque.
3.3.2 Explorando el contenido de ejemplo
Tómese su tiempo para explorar el resto del sitio de ejemplo Joomla. Se dará cuenta que hay mucho
más para explorar que las páginas con «contenido clásico» (artículos, textos, e imágenes) que hemos
visto hasta ahora. Aunque las páginas de contenido clásico pueden estar en el núcleo de muchos
sitios web, en un sitio dinámico todos los tipos de contenido dinámico se pueden mostrar en el
mainbody. Pruebe el enlace Login en el menú This Site de la página principal, o pruebe el cuadro
Buscar. Verá que el mainbody muestra una página de formulario de acceso y los resultados de la
búsqueda.
Por ahora no vamos a profundizar en estos diferentes tipos de contenido dinámico, aunque
es importante darse cuenta que existen y toman las capacidades de Joomla mucho más allá de
la tradicional presentación de texto e imágenes. Vamos a cubrir este tema con más detalle en los
próximos capítulos.
Mundo real
Familiarícese con otros sitios de ejemplo
¿Está listo para explorar un enlace a un sitio con un diseño completamente diferente? En el
menú horizontal superior, haga clic en el enlace Sample Sites. Usted verá un nuevo menú que
aparece en la columna de la derecha y ofrece enlaces a Australian Parks y a Fruit Shop. En el
menú Fruit Shop, haga clic en el enlace Welcome. Se encontrará con un sitio completamente
diferente.
El sitio de ejemplo Fruit Shop parece ser un sitio web independiente, no solo por el contenido, sino
también debido al diseño del sitio, el cual es bastante diferente. No deje que esto le confunda.
Todo es parte de un gran sitio de ejemplo Joomla, aquel donde ha instalado Joomla con los datos
de ejemplo Learn Joomla. El truco es que los enlaces de menú que apuntan al sitio Fruit Shop
tienen asignadas plantillas específicas. Como una plantilla en Joomla controla el aspecto general
del sitio, los enlaces del menú Fruit Shop parecen abrir un sitio totalmente diferente; sin embargo,
al hacer clic en el enlace Home, volverá otra vez a la página principal predeterminada del sitio de
ejemplo.
Aplicar plantillas a enlaces de menú específicos dentro del sitio puede dar a los visitantes la
impresión de explorar un conjunto independiente de sitios web. Por lo general, es probable que
utilice solo una plantilla en su sitio web; sin embargo, puede usar diferentes plantillas para dar
a las diferentes partes del sitio un aspecto diferente. Por ejemplo, que las secciones del sitio se
centraron en grupos particulares de productos o de servicios. Aprenderá más acerca de cómo
asignar plantillas a partes específicas del sitio en el capítulo 10.
3.4 Tomar el control: La administración de su sitio en el backend

El backend es la cabina que el piloto tiene en su jet Joomla. Es la interfaz de administración que le
permite administrar su sitio. Está bien organizado, por lo que debería encontrar rápidamente lo que
busca. Vamos a echar un vistazo a la interfaz de backend en estos momentos.
Ejercicio 1: Conectarse al backend

Para que podamos echar un vistazo a la interfaz de administración de Joomla, veremos cómo se puede
acceder al backend del sitio y entrar en el Panel de control de Joomla.
1. En la barra de dirección del explorador, ingrese la dirección de su sitio web y agregue /administrator.
Si su sitio es http://www.misitio.com, escriba http://www.misitio.com/adminitrator en la barra de
direcciones.
2. Ya ha visto esta pantalla después que instaló Joomla en el capítulo anterior, la entrada secreta a su
sitio. Verá la siguiente pantalla de acceso:
3. Ingrese su nombre de usuario y contraseña, y haga clic en el botón Conectar.

4. Después que haya ingresado correctamente sus credenciales, entrará en la verdadera interfaz de
administración: la página principal del backend (el Panel de control). Esta interfaz proporciona
acceso a todas las funciones que necesita como administrador del sitio, tales como agregar
contenido, cambiar los menús, personalizar la presentación, y así sucesivamente.
Ha accedido al backend de su sitio y ha entrado al Panel de control, solo accesible a los usuarios
con especiales derechos de acceso. Volverá allí para cada actividad de administración del sitio.
Como administrador del sitio, es probable que desee agregar un marcador en su navegador a la
URL con /administrator.
3.4.1 Echar un vistazo al Panel de control
Echemos un vistazo al Panel de control con más detalle. En la siguiente captura de pantalla, se
describen las cuatro áreas de la pantalla principal del Panel de control.
En la captura de pantalla anterior, se han agregado los números para aclarar las cuatro secciones del
Panel de control. Observemos más de cerca a cada una de ellas:
a. Menú superior (1)

El menú superior horizontal es una característica esencial del Panel de control. Es realmente donde
se realizan todas las acciones, ya que cada elemento del menú principal da acceso a una lista
desplegable con todas las herramientas y funciones de gestión de contenidos de Joomla. Estos son
los elementos del menú principal:
||Sistema: Establece opciones globales de configuración y realiza el mantenimiento del sistema.
||Usuarios: Gestiona los usuarios, gestiona los niveles de acceso de los usuarios, envía correo a
los usuarios.
||Menús: Añade y gestiona los menús y los enlaces a los menús.
||Contenido: Añade o cambia los artículos, cambia la estructura del sitio, gestiona los archivos
multimedia (imágenes).
||Componentes: Gestiona características especiales, tales como anuncios (banners) y contactos.
||Extensiones: Administra las extensiones, plantillas e idiomas para ampliar la funcionalidad y

la capacidad de su sitio web.
||Ayuda: Páginas de ayuda online y soporte para Joomla.
Este menú superior es el que se va a usar una y otra vez cuando trabaje en su sitio. Por ahora,
echemos un vistazo a los otros paneles y controles; después de eso empezaremos a explorar la
amplia gama de capacidades ocultas detrás de todos los elementos del menú superior.
b. Los submenús del sistema (2)

Los submenús del sistema en la columna izquierda le dan un acceso rápido a los subcomponentes
de la página actual. Los menús y las opciones de menú que aparecen en esta columna son sensibles
al contexto, ofreciendo opciones relacionadas con las decisiones que toma en la barra de menú
superior horizontal.
c. Paneles de información (3)

Estas tres listas de visualización de la información contienen los últimos usuarios que han
accedido (Logged-in users), los artículos más populares (Popular Articles) y los artículos agregados
recientemente (Recently Added Articles). El objetivo de estos paneles es darle una rápida visión
general de la información actualizada de los usuarios y el contenido de su sitio. Haga clic en
cualquiera de los elementos de la lista para editarlo. Por ejemplo, hacer clic en el título de un
artículo popular le llevará a la página donde puede editar dicho artículo.
d. Vista previa y barra de información (4)

En la parte inferior de la pantalla del administrador hay una barra horizontal que siempre permanece
visible. En esta parte del panel de control se encuentran las siguientes funciones:
||Ver sitio. Abre la página principal del sitio web en una nueva ficha o ventana del navegador.
||Visitantes. La información sobre el número de visitantes que están actualmente conectados en

la interfaz del sitio.
||Administradores. El número de usuarios que han accedido al backend del sitio. Actualmente hay
solo una persona: usted.
||Mensajes (un pequeño icono de sobre). Indica el número de mensajes privados no leídos. Estos
son mensajes enviados por otros usuarios del sitio.
||Desconectar. Salir del backend.
TIP
A la derecha de la parte superior de la barra de menú se muestra el
nombre del sitio. Este nombre es el que ingresó anteriormente, durante
la instalación de Joomla. Si ha seguido adelante en el capítulo 2, verá el
nombre del ejemplo que vamos a construir en este libro, Fascination.
Es probable que use este nombre de sitio a menudo, ya que haciendo
clic en él puede ir rápidamente a la página principal del sitio web en una
nueva ficha del navegador. Otro atajo útil: si hace clic en el logotipo azul
de Joomla que se muestra en todas las pantallas de backend en la
parte izquierda de la barra superior, volverá al Panel de control la pantalla
de inicio del backend.
3.4.2 Entender las herramientas y controles de backend
El Panel de control es la página principal del backend. Sea cual sea la acción que realice, las decenas
de enlaces en la página del Panel de control le llevan a las herramientas apropiadas o Gestores,
como los llama Joomla. Ejemplos de ello son el Gestor de Artículos, el Gestor de Menús, y el Gestor
de Usuarios. Ahí es donde se realiza la verdadera acción.
Aunque hay muchos gestores diferentes y otros tipos de herramientas de administración, su forma
de trabajar es bastante fácil de entender. Todas las páginas de la interfaz comparten la misma
presentación de base y muestran una barra de herramientas en la posición superior de la pantalla.
En la siguiente captura de pantalla, se pueden ver los botones de control de la barra de herramientas
Gestor de Artículos:
Muchas páginas de gestores comparten las funciones más utilizadas, como Nuevo, Editar, Publicar
y Papelera. Tomemos el Gestor de artículos como ejemplo y echemos un vistazo a las funciones de
los botones de la barra de herramientas con más detalle.
}}Nuevo: Crea un nuevo artículo.

}}Editar: Edita un artículo.
}}Publicar: Hace un artículo visible para sus visitantes.
}}Despublicar: Marca un artículo como invisible para sus visitantes (sin tirarlo a la Papelera).
}}Destacado: Asigna un estado al artículo para mostrarlo en un resumen de artículos seleccionados
(destacados), en la página principal o en otra página de vitrina para artículos destacados.
}}Archivar: Archiva los artículos y los hace asequibles solo a través de un enlace de menú especial
para contenido archivado.
}}Papelera: Envía un artículo a la Papelera para eliminarlo.
}}Lote: Seleccione cualquier número de artículos y haga clic en Lotes para mover o copiar todos los
artículos seleccionados a la vez, o cambiar los niveles de acceso del artículo.
}}Ayuda: Vea la ayuda online de Joomla.
}}Opciones: Cambiar la configuración general del artículo.
La barra de herramientas siempre está en relación al contexto, pues mostrará los botones
correspondientes a la actividad actual. Al seleccionar un artículo y hacer clic en el botón Editar en el
Gestor de artículos, será llevado a la pantalla de edición del artículo.
En esta pantalla verá el siguiente conjunto de botones de la barra de herramientas:
}}Guardar: Guarda los cambios sin cerrar la ventana actual.

}}Guardar y cerrar: Guarda los cambios y cierra la ventana actual (vuelve al Gestor de artículos).
}}Guardar y Nuevo. Guarda los cambios y abre una nueva pantalla de edición de artículos vacía.
Esto le permite crear rápidamente una serie de artículos sin tener que cerrar la pantalla Nuevo
artículo.
}}Guardar como copia. Guarda el artículo y sale de la pantalla actual, dejando su contenido abierto
para que edite una copia del artículo que acaba de guardar.
}}Versiones.Muestra las diferentes versiones del elemento seleccionado, es decir, un historial de
los cambios realizados.
}}Cerrar. Cancela sin guardar los cambios.
}}Ayuda. Ayuda en línea de acceso Joomla.
Como puede ver, la mayoría de los botones de la barra de herramientas son fáciles de entender.
Tenga en cuenta la diferencia entre Guardar y Guardar y cerrar. Haga clic en Guardar para guardar
los cambios sin salir de la página actual. Encontrará que al editar el texto de un artículo, es más
fácil hacer clic en Guardar para almacenar los cambios sin salir de la pantalla actual. Cuando esté
satisfecho con los resultados, haga clic en Guardar y cerrar para cerrar la pantalla de edición. Lo
mismo se aplica a cualquier incidencia de Guardar y Guardar y cerrar en otras pantallas de la
interfaz de Joomla.
TIP
Al hacer clic en el botón Guardar de vez en cuando, al escribir un artículo
largo asegurará que el contenido de este se guarde. Puede perder todos
los cambios no guardados cuando deje abierto (sin acción) el editor de
artículo durante más de quince minutos. Más adelante en este capítulo
aprenderá cómo cambiar este ajuste de quince minutos para permitir que
tome un poco más de tiempo para sus descansos y pueda tomar un café
bien merecido.
3.5 Comience a administrar su sitio

Se ha observado la presentación de la pantalla del Panel de control y las principales barras de
herramientas del backend. Probablemente tenga curiosidad por probar cómo funciona en realidad
todo esto. En primer lugar, vamos a darle un poco más de sentido al Panel de control y averiguar lo
que realmente necesita saber para empezar a trabajar en esta impresionante caja de herramientas.
Después de todo, su barra de menú principal consta de siete opciones de menú con más de cuarenta
elementos de submenú.
No vamos a entrar en todos los elementos de menú y sus capacidades; mas bien, aprenderá cómo
utilizar las opciones de menú importantes a medida que avanza la construcción de su sitio en los
capítulos siguientes. Por ahora, vamos a seguir adelante y ver cuáles son las funciones principales.
3.5.1 Tres tipos de tareas de backend
A grandes rasgos, las siete opciones de la barra de menús del Panel de control constan de tres
grupos. Algunos los usará a diario, mientras que otros tendrá que desplegarlos de vez en cuando.
En el siguiente diagrama puede ver cuáles son estos tres grupos. En el resto de este capítulo vamos
a intentar explicarlos, no en el orden en que aparecen en la barra de menú, sino por orden de
importancia en sus actividades cotidianas de gestión de contenidos.
Probemos un ejemplo de cada uno de estos tres tipos de acciones para la gestión de contenido y del
sitio:
}}Ejemplo de gestión de contenido: crear y publicar contenido.

}}Ejemplo de gestión de extensión: añadir un módulo.
}}Ejemplo de gestión del sitio: cambiar la configuración del sitio.
A. Ejemplo de gestión de contenido

Es bueno tener un sitio de ejemplo lleno de un texto ficticio sobre Joomla, pero también es
necesario que agregue su propio contenido. Publique algo, lo que sea, en su propio sitio web
Joomla.
Ejercicio 2: Publicar su primer artículo

Echemos un vistazo a los pasos necesarios para publicar su primer artículo.
1.- Navegue hasta Contenido | Gestor de Artículos.

2.- En la barra de herramientas, haga clic en el botón Nuevo (el verde con el signo más).
3.- De manera alterna, puede utilizar el menú desplegable Contenido | Gestor de artículos | Aña-
dir nuevo artículo. Esto le llevará más rápido a la pantalla Gestor de artículos: Añadir un nuevo
artículo.
4.- En la pantalla Gestor de artículos: Añadir un nuevo artículo, rellene el campo Título como se
muestra en la siguiente captura de pantalla. Ingrese un título (por ejemplo, Mi primer artículo)
y agregue un poco de texto del artículo en la caja de edición de texto. Cualquier texto será útil;
por ahora solo estamos probando el sitio de ejemplo.
5.- Deje como está el cuadro desplegable Categoría, ya que está bien tener este artículo asignado
a la categoría Sample Data-Articles. Aprenderá cómo crear categorías y organizar el contenido
en los dos capítulos siguientes.
6.- Asegúrese que Estado esté ajustado en Publicado. Esta es la opción predeterminada.
7.- Coloque Destacado en Sí para asegurarse que su artículo se mostrará en la página principal.
8.- Haga clic en el botón Guardar en la barra de herramientas en la parte superior izquierda de la
página. Joomla le informará: Artículo guardado correctamente.
9.- Haga clic en Ver Sitio en la parte inferior de la pantalla. Esto le llevará a la página principal de
su sitio.
Como puede ver, su primer artículo se ha publicado en la primera página.

En unos pocos pasos usted ha creado y publicado nuevo contenido. Al elegir la opción Destacado, ha
logrado que el texto del artículo se muestre en la página principal. No se preocupe, aprenderá cómo
crear artículos en otras páginas de contenidos y hacerlos accesibles a través de enlaces de menú en el
siguiente capítulo.
B. Ejemplo de gestión de extensión. Añadir un módulo

Acaba de agregar un artículo a su sitio; sin embargo, en Joomla también puede agregar fácilmente
otros tipos de contenido. Mediante el uso de extensiones puede agregar nuevas funcionalidades al
sitio. Un ejemplo de una extensión es el bloque formulario de acceso en la página principal.
Las extensiones son adiciones separadas para Joomla, puede descargarlas desde la Web y
agregarlas a su instalación de Joomla en un par de clics. Debido a que hay muchas extensiones
disponibles, Joomla tiene una extensión ilimitada. Por defecto, algunas extensiones, sobre todo las
más simples, se incluyen en la instalación predeterminada. En el siguiente ejemplo activará una de
estas extensiones incluidas: el módulo «Los más populares». Esto añadirá un pequeño bloque o
módulo al sitio que lista automáticamente los artículos más populares.
Ejercicio 3: Añadir un módulo al sitio

Acceda al backend del sitio y agregue un bloque con enlaces a los artículos más leídos en el sitio.
Vamos a agregar este bloque o módulo, como Joomla lo llama.
1.- Vaya a Extensiones | Gestor de Módulos. Haga clic en Nuevo. Se muestra una lista de los tipos
de módulos disponibles.
2.- Haga clic en el nombre del tipo de módulo que desea agregar: Los más populares.
3.- Se abre la pantalla Gestor de Módulos: Módulo Los más populares. Aquí es donde puede admi-
nistrar la configuración de este módulo. Cambie los detalles de la siguiente manera:
||Título. Ingrese un título que aparecerá encima de la lista de hipervínculos listados, como
Popular.
||Posición. Seleccione la ubicación en la página donde se muestra el módulo. Haga clic en
Escriba o seleccione una posición para mostrar una lista desplegable que contiene todas las
posiciones disponibles. Desplácese hacia abajo hasta que vea las posiciones para Protestar, la
plantilla del sitio actual. Ahora seleccione Derecha [position-7], lo que significa que el módulo
aparecerá en la columna de la derecha.
4.- Haga clic en la ficha Asignación de menú para seleccionar las páginas en las que desea que el
módulo aparezca. Seleccione Asignación del módulo: Solo en las páginas seleccionadas.
5.- De forma predeterminada se seleccionan todas las páginas, por lo que para hacer su selección,
primero haga clic en Ninguno para anular la selección de todas las páginas.
6.- Para encontrar los elementos del menú Main menu que está buscando, haga clic en el signo me-
nos al lado izquierdo del nombre del menú About Joomla, esto contrae el menú (oculta todos
los elementos del menú). También, haga clic en el signo menos a la izquierda de Australian Parks
y Fruit Shop. Ahora, los elementos del menú Main menu son fácilmente visibles.
7.- Justo debajo del encabezado Main menu, seleccione el enlace Home. De esta forma el módulo
aparecerá solo en la página principal.
8.- Puede dejar todas las demás configuraciones sin cambiarlas. Haga clic en Guardar y en Ver sitio
para ver los resultados.
Un nuevo bloque se muestra en la página principal y apunta dinámicamente a los cinco artículos más
populares. La belleza de un módulo como este es que se configura una vez y luego se olvida de él. No
hay necesidad de mantenimiento manual; cuando otros artículos se vuelvan más populares, Joomla
actualizará automáticamente la lista.
Las extensiones pueden ser fácilmente activadas o desactivadas. Al desactivar una extensión, no
borra nada, ya que esta y todos los ajustes que haya elegido siguen disponibles en el backend, pero
ya no es visible para el visitante del sitio. De esta manera, aún es posible que vuelva a utilizarla más
tarde. Para hacer invisible el bloque de módulo que contiene los artículos más populares, vuelva
a Extensiones | Gestor de módulos, haga clic en el nombre del módulo recién creado (Popular) y
cambie la configuración de Publicado a Despublicado.
C. Ejemplo de gestión del sitio. Configurar los ajustes básicos del sitio
El menú Sistema y el menú Usuarios en la barra de menús del Panel de control ofrecen algunas
de las funciones más avanzadas, que van desde el mantenimiento de las bases de datos hasta la
gestión de usuarios. En el curso de este libro usted aprenderá las funciones más importantes para
la gestión diaria del sitio. Por ahora, vamos a echar un vistazo al Sistema | Configuración Global
donde se pueden establecer las preferencias de Joomla.
Ejercicio 4: Configurar las preferencias en Joomla
Al navegar por el backend de Joomla se habrá dado cuenta que, después de un cierto tiempo de
inactividad, Joomla le pide conectarse de nuevo. Por defecto, Joomla lo desconecta cuando ha estado
durante quince minutos sin realizar ninguna actividad. Al desarrollar un sitio, puede ser bastante
molesto tener que conectarse cada vez que regrese a su escritorio con una taza de café recién hecho.
Vamos a cambiar esto con el ajuste de la duración de la sesión en las preferencias de Joomla.
1. Desde el Panel de control, vaya a Sistema | Configuración Global. (También puede hacer clic en
el enlace Configuración Global en el menú Configuración del lado izquierdo, ya que es un acceso
directo).
2. Configuración Global se divide en cinco fichas de configuración: del Sitio, del Sistema, del Servidor,
de los Permisos y de Filtros de texto. Haga clic en la ficha Sistema para mostrar el siguiente panel
de configuración:
3. En la página Configuración del sistema, desplácese hacia abajo hasta que vea el encabezado
Configuración de las sesiones. Cambie Duración de la sesión a 45 minutos.
4. Haga clic en Guardar en la barra de herramientas. A partir de ahora, solo tiene que conectarse de
nuevo si deja el backend de Joomla sin tocar durante más de 45 minutos.
Acaba de facilitar su vida como administrador al cambiar uno de los ajustes predeterminados del
sistema. Ahora puede dejar el computador en reposo, incluso sin realizar ninguna acción en el backend,
durante 45 minutos antes que Joomla le indique que debe conectarse de nuevo.
Mundo real
Explore las opciones de configuración
Eche un vistazo a las otras opciones de Configuración global, pero tenga cuidado. Lo mejor es
dejar la mayoría de las configuraciones sin cambiar; no toque las opciones de Configuración
del servidor y la opción Configuración de la base de datos (en la página Servidor) a menos que
sepa lo que está haciendo, ya que contienen datos críticos que Joomla necesita para funcionar
correctamente. Puede cambiar fácilmente la configuración de algunos sitios inofensivos. Tal
vez le gustaría cambiar el nombre del sitio (el nombre que aparece en la barra de encabezado
de backend) o reemplazar el texto predeterminado de Joomla en el campo de Descripción
de metadatos con palabras apropiadas, que permitan a los motores de búsqueda saber lo
que hay en su sitio; sin embargo, si todavía no está familiarizado con estos conceptos, no se
preocupe, va a aprender más sobre las opciones que necesite a lo largo del libro.
TIP
¿Buscando todas las respuestas?
En el curso de este libro aprenderá mucho más sobre el Panel de

control y el tipo de funcionalidad que tiene que ofrecer. No vamos a
cubrir cada detalle minúsculo de la interfaz de administración, pero,
por suerte, Joomla ofrece una exhaustiva referencia en línea para
todos los menús, submenús backend, opciones, configuraciones y
pantallas del backend. En el backend, haga clic en Ayuda en la pantalla
Configuración global.
Cap.
Fu n d a m e n to s p a r a l a
c o n st r u c c i ó n we b : C r e a r
4
un sitio en una hora
CAP. 4: Fundamentos para la construcción web : C rear un sitio en una hora 67
En el capítulo anterior, usted se ha familiarizado con la interfaz de Joomla, ha explorado el sitio de

ejemplo y probado la interfaz de administración.
Ya tiene una buena comprensión de cómo funcionan las cosas, por lo que ahora es tiempo de empezar
a construir un sitio web. En este capítulo construirá un sitio completo en tan solo una hora. Suponga
que acaba de recibir una llamada de su primer cliente; este ha diseñado nuevos productos y necesita
difundirlos a sus potenciales clientes, pero todavía no tiene un sitio web al que puedan referirse.
Necesita un sitio web y lo necesita de forma rápida. ¿Puede ayudarlo?
Esta es una oportunidad perfecta para poner a prueba su nuevo kit de herramientas de construcción
web, aunque al ser nuevo en Joomla, tal vez necesite algo más que una hora. Si comienza ahora, esté
seguro de cumplir con el plazo y tener tiempo para realizar todas sus actividades diarias.
En este capítulo podrá eliminar los datos de ejemplo de Joomla para crear un lienzo (canvas) en blanco
para su sitio; personalizar la plantilla del sitio, agregar contenido (crear un marco, agregar artículos y
agregar elementos de menú) y nuevas características (crear un formulario de contacto y un bloque de
mensajes especiales), y terminar su primer sitio web completamente funcional, basado en Joomla.
En la siguiente captura de pantalla se ve lo que va a construirse a lo largo de este capítulo. A pesar que
todavía utiliza la presentación básica del sitio de ejemplo de Joomla, está perfectamente adaptado a
las especificaciones del cliente.
4.1 Conozca a su cliente

Su primer cliente es una empresa textil que se dedica a la fabricación de medias para damas y su
nombre es Fascination. Esta empresa forma parte de la Sociedad Nacional de Industrias, la cual publica
mensualmente una revista. Se ha encargado a los directivos de la empresa Fascination que escriban
un artículo sobre su experiencia en el sector textil; además, la empresa también quiere publicar ese
artículo en un sitio web para difundir su mensaje y mostrar al público sus actividades y trayectoria. La
lista de requerimientos de Fascination es la siguiente:
}}El aspecto del sitio debe encajar con el logotipo y los colores institucionales de la empresa.
}}El sitio debe presentar varias páginas de contenido de una manera bien organizada, proporcionando
una base sólida para una mayor expansión.
}}Lapágina principal debe mostrar una selección de noticias sobre el sector industrial.
}}Los visitantes deben ser invitados a ponerse en contacto; tiene que haber un formulario de contacto.
Nota Acceder de nuevo
Para continuar con los ejercicios de este capítulo usted debe acceder al
backend de su sitio. Recuerde que solo toma dos pasos:
}}En el navegador, acceda al backend agregando administrator a la URL de su
sitio web: www.misitio.com/administrator.
}}Ingrese su nombre de usuario y contraseña y haga clic en el botón Conectar.
Una vez que haya accedido verá el Panel de control, que es la página principal
del backend.
4.2 Limpieza: Eliminar los datos de ejemplo

En el capítulo 2 ha instalado Joomla con los datos de ejemplo del sitio. Realizará esta acción una vez,
sobre todo porque usted es nuevo en Joomla y quiere conocer sus posibilidades. En los capítulos
anteriores ha explorado el contenido del ejemplo. Ahora que está comenzando a construir su propio
sitio, ya no necesita todo ese contenido. Desafortunadamente, no hay un botón «Desinstalar datos de
ejemplo». Puede instalar Joomla de nuevo sin los datos de ejemplo, pero en este caso solo limpiaremos
el sitio de ejemplo.
Ciertamente, la limpieza de Joomla puede parecer casi tan emocionante como borrar la pizarra del
aula antes de empezar la lección; sin embargo, es una buena manera de prepararse para su primer
sitio Joomla. Verá que quitar el contenido del sitio de ejemplo de Joomla le dará información útil sobre
la forma en que está construido. Poco a poco, revelará los distintos tipos de contenido que se han
utilizado para llenar la estructura vacía del CMS.
Si ha instalado Joomla sin los datos de ejemplo puede omitir los dos pasos siguientes:
A. Paso 1: Eliminar el contenido de ejemplo
Primero debe eliminar el contenido del ejemplo actual. Este se compone de tres grupos:
}}Contenido real: Los artículos y contenedores que Joomla utiliza para organizar los artículos, llamados
categorías. Aprenderemos más acerca de ellos en el resto de este capítulo.
}}Enlaces
del menú: Hacia esos artículos o categorías.
}}Módulos: Los pequeños bloques de funciones prefabricadas, como el formulario de acceso.
Ejercicio 1: Borrar artículos y categorías
Para eliminar el contenido, siempre empiece con los artículos reales. Esto debido a que no puede
retirar los contenedores (categorías) si no están vacíos.
1.- Navegue a Contenido | Gestor de artículos.

2.- Por encima de la lista de artículos, al lado derecho, verá que hay dos cuadros desplegables:
Título-Ascendente, y 20. El número 20 indica la cantidad de artículos que se muestran en esta
pantalla de lista artículo. Haga clic en el botón 20 y cambie el valor a Todos.
3.- Ahora se muestra la lista completa de los artículos de ejemplo en la página.

4.- Seleccione la casilla de verificación en la parte superior de la lista, justo al lado izquierdo del
encabezado Estado. De esta manera, todos los elementos de la columna se seleccionan.
5.- Haga clic en el botón Papelera en la barra de herramientas. Joomla mostrará un mensaje confir-
mando que los artículos han sido movidos a la papelera.
6.- Cuando los artículos están en la papelera, todavía se encuentran en la base de datos de Joomla
por si desea restaurarlos; sin embargo, no va a necesitar estos artículos de nuevo. Para eliminar-
los de forma permanente, en el cuadro desplegable Seleccionar estado, al lado izquierdo de la
pantalla, seleccione Movido a la papelera.
7.- Todos los artículos que están en la papelera se muestran en la página. Una vez más, seleccione
todos los artículos y haga clic en Vaciar la Papelera, para que se eliminen todos los artículos.
Ahora elimine las categorías de ejemplo, o sea los recipientes para artículos que ya no existen.
8.- Navegue a Contenido | Gestor de Categorías. Asegúrese que se muestren todas las categorías.
En el cuadro desplegable que indica el número de artículos mostrados seleccione Todos.
9.- Marque la casilla de la fila superior para seleccionar todas las categorías. Anule la selección de
una sola categoría: Uncategorised. Queremos mantener esta, ya que se utiliza para los artículos
que no se ajustan a una categoría regular.
10.- Haga clic en Papelera. Verá un mensaje que confirma que las categorías han sido movidas a la
papelera correctamente.
11.- Para eliminar de forma permanente las categorías, en el desplegable Seleccionar Estado, selec-
cione Movido a la Papelera. Seleccione todas las categorías y haga clic en Vaciar la Papelera.
Todas las categorías se borran definitivamente.
Eche un vistazo a la interfaz del sitio. Se dará cuenta que todo el contenido ha sido retirado del sitio
de ejemplo a excepción de los menús, el módulo Acceso y el módulo Buscar.
En este ejemplo, el encabezado del sitio muestra el nombre del sitio actual. Si ha seguido a lo largo
del capítulo 2, este será Fascination, el nombre del cliente de ejemplo que vamos a utilizar en el
resto de este libro. Si desea cambiar el nombre del sitio que aparece en la cabecera, puede hacerlo
navegando a Sistema | Configuración global | Configuración del sitio | Nombre del sitio y cambiar
el valor actual.
B. Paso 2: Borrar menús y otros módulos

Además de artículos y categorías, el sitio de ejemplo contiene menús y módulos. En realidad, los
mismos menús son módulos; de hecho, aprenderá más sobre esto en el capítulo 7, que trata sobre
crear la navegación en su sitio.
Ejercicio 2: Borrar menús
Debido a que gran parte de los ejemplos de menús son redundantes para nuestro objetivo, vamos
a eliminarlos. No hay que preocuparse, ya que siempre puede crear nuevos menús. Solo vamos a
borrar las instancias específicas de los menús que se utilizaron en el sitio de ejemplo.
1.- Vaya a Menús | Gestor de Menús. Seleccione los tres menús de ejemplo que no va a necesitar
más: About Joomla, Australian Parks, y la Fruit Shop. No seleccione Main Menu, Top, y User
Menú. Vamos a conservar estos tres menús más genéricos, ya que podemos volver a usarlos en
nuestro nuevo sitio.
2.- Haga clic en el botón Borrar. Aparecerá un mensaje de advertencia, haga clic en Aceptar para con-
firmar que desea eliminar los menús, sus contenidos y los módulos de menú asociados. Verá un
mensaje de confirmación, que tiene solo tres menús que quedan en la pantalla Gestor de Menús.
Vamos a mantener el Main menu, ya que no necesitamos los enlaces redundantes que contiene,
pues su contenido acaba de ser eliminado. El único enlace que tenemos que mantener es Home,
ya que es necesario para que cualquier sitio Joomla funcione correctamente. Usted conoce la
práctica de borrar elementos por ahora y los pasos a seguir son similares a los que se necesitaron
para eliminar artículos o categorías.
3.- Navegue hasta Menús | Main Menu. Seleccione todos los elementos de menú, excepto Home.
Haga clic en Papelera para borrar los elementos de menú seleccionados.
4.- Como no va a necesitar estos enlaces del menú más, es posible eliminarlos permanentemente de
la papelera. En la lista desplegable Seleccionar Estado, seleccione Movido a la Papelera. Seleccio-
ne todos los elementos, haga clic en Vaciar la Papelera y confirme.
Para poder armar su primer sitio Joomla, ha eliminado una gran cantidad de contenido de ejemplo,
como artículos, categorías y menús. Ahora el sitio está casi vacío.
Mundo real
Limpiar la lista de módulos
El sitio de ejemplo contiene diversos módulos que son redundantes para nuestro propio
sitio. Probablemente ni siquiera ha visto a todos en acción, ya que la mayoría de ellos solo
se muestran en su página específica de demostración en el sitio de ejemplo; sin embargo,
puede eliminar de forma segura estos ejemplos de módulos. No se preocupe, pues siempre
se pueden volver a crear algunos de estos módulos. Como ejemplo, vamos a crear un nuevo
módulo en este capítulo y a averiguar más acerca de los módulos en los próximos capítulos
sobre la ampliación de Joomla. Al eliminar los módulos, acaba de deshacerse de las instancias
específicas de los que se utilizaron en el sitio de ejemplo, y no la funcionalidad del módulo.
La práctica de eliminación de módulos le resultará familiar a estas alturas. En resumen: en

el menú desplegable Extensiones, haga clic en Gestor de módulos. El Gestor de Módulos
muestra una lista de los módulos que están en uso. Asegúrese que todos se muestren. En el
cuadro de selección que indica el número de elementos mostrados, seleccione Todos, luego
haga clic en la casilla de verificación a la izquierda del encabezado Estado. Ahora, anule la
selección de los módulos genéricos que va a utilizar en su propio sitio: asegúrese de mantener
This Site, Top, User Menu, Search, Login Form, y Breadcrumbs. Tenga cuidado, ya que hay
módulos con nombres similares que pueden borrarse, como Breadcrumbs en la posición
Ninguno y el módulo llamado Login.
Después que haya eliminado todos los módulos que no necesite (utilizando el botón
Papelera), eche un vistazo al sitio. Los resultados son impresionantes: artículos, categorías,
menús y módulos redundantes han desaparecido. Nos quedamos con un lienzo en blanco
perfectamente adecuado para el nuevo sitio.
TIP
Recuerde, la instalación de Joomla con los datos de ejemplo solo es
recomendable cuando es nuevo en Joomla y quiere familiarizarse con el
sistema mediante la exploración de sus presentaciones de página, menús
o módulos. Cuando usted ya conoce Joomla, es más fácil y más rápido
empezar a construir su sitio web sin necesidad de instalar primero los
datos de ejemplo.
4.3 Construir su nuevo sitio en tres pasos

Ahora tiene un lienzo en blanco. El sitio está vacío, ya que no hay contenido y solo cuenta con unos
pocos elementos básicos de diseño. Es momento de empezar a construir algo nuevo, fresco y atractivo.
En el resto de este capítulo vamos a agregar nuevos contenidos, para reemplazar el que acabamos de
eliminar al reconstruir el sitio de ejemplo.
Lo haremos en tres pasos:
1.- Personalizar la presentación. Se ajusta el diseño básico para satisfacer sus necesidades.
2.- Agregar contenido. Diseñar una estructura para su contenido (usando categorías) y agregar
artículos que se ajusten al marco de contenido.
3.- Agregar extras. Agregar más funcionalidad a su sitio, como un formulario de contacto o un pe-
queño bloque de contenido para llamar la atención sobre un tema específico.
4.3.1 Paso 1: Personalizar el diseño
En el capítulo 3 ha visto que la presentación general del sitio (columnas, colores, tipografía, etc.) se
encuentra en los archivos de la plantilla del sitio. Joomla le permite editar la plantilla actual utilizando
el Gestor de plantillas. En este caso, reemplazaremos el logotipo de Joomla con la imagen del logo
de su cliente y modificaremos un poco del texto del encabezado.
Ejercicio 3: Crear una copia de la plantilla actual
En primer lugar, vamos a hacer una copia de la plantilla actual. Este es el mejor enfoque si desea
modificarla. Evite el riesgo de que cualquier cambio de código sobrescriba la plantilla original. Joomla
le permite crear fácilmente una copia de todos los archivos de la plantilla en una carpeta nueva.
1.- Para crear una copia, vaya a Extensiones | Gestor de plantillas. Haga clic en Plantillas en el
submenú del lado izquierdo.
2.- En la pantalla Gestor de plantillas: Plantillas, haga clic en el enlace Detalles y Archivos de la
plantilla Protostar. Le llevará a la pantalla Gestor de plantillas: Personalizar Plantillas. Haga clic
en el botón Copiar e ingrese un nombre para la copia de plantilla (por ejemplo, Protostar_copy).
Solo se pueden utilizar letras, números, guiones y guiones bajos. Haga clic en Copiar plantilla en
la pantalla emergente. La ventana emergente se cierra. Ahora haga clic en Cerrar para volver a
la pantalla Plantillas.
3.- Por último, cambie a la pantalla Gestor de plantillas: Estilos haciendo clic en el enlace Estilos en
el menú que está a la izquierda. Aquí puede configurar la nueva plantilla como la predetermina-
da. Haga clic en la estrella blanca junto a Protostar_copy-Predeterminado para que esta sea su
nueva plantilla predeterminada; luego, la estrella se vuelve naranja.
Ha utilizado la fotocopiadora de plantillas incorporada en Joomla para crear una copia exacta
de la plantilla que desea utilizar y cambiar. Ahora puede dejar intacta la plantilla original, lo cual
puede ser útil si desea volver a la configuración predeterminada. Además, puede cambiar de forma
segura la configuración y el código de la plantilla copiada sin la preocupación de que los cambios se
sobrescriban con una actualización de los archivos de plantillas originales.
Ahora que ha creado una copia de la plantilla Protostar, es el momento de personalizar un poco esta
copia. Después de todo, no queremos que nuestro diseño se parezca a cualquier sitio predeterminado
de Joomla. Haremos nuestra marca mediante la creación de una nueva imagen del logotipo, y la
agregaremos a la plantilla.
Ejercicio 4: Preparar una nueva imagen del logotipo
Para crear una nueva imagen del logotipo, siga estos pasos:
1.- Abra la herramienta de edición de imágenes. En este ejemplo, vamos a utilizar Adobe Photo-
shop, pero puede usar cualquier otro editor de imágenes.
2.- Una imagen del logotipo que bordee los 270 píxeles de ancho por 90 píxeles de alto, encajará
perfectamente en el espacio de cabecera de la plantilla existente (en el capítulo 10 aprenderá a
echar un vistazo al código HTML y CSS para averiguar las dimensiones utilizadas en las diferentes
partes del diseño de página). Haga clic en Nuevo. En los cuadros Ancho y Alto, llene 270 y 90
píxeles respectivamente. Elija Contenido de fondo: Transparente.
3.- En Photoshop, el archivo PNG muestra un fondo como tablero de ajedrez gris y blanco. Esto in-
dica que el fondo es transparente, los colores del fondo de cabecera brillarán. De esta manera,
la imagen del logotipo que cree se mezclará muy bien con el diseño general.
4.- Ahora puede crear cualquier logotipo que le guste. Vamos a saltar los detalles, ya que estos
dependen de las necesidades específicas de su sitio y la herramienta que esté utilizando. Para
este ejemplo, se ha creado un logotipo moderno utilizando Photoshop. Vea la siguiente figura:
5.- Guarde la imagen como un archivo PNG. En Photoshop, haga clic en Guardar para Web y dis-
positivos; seleccione el formato de archivo PNG-24 y guarde la imagen como logofascination.
png. Asegúrese de marcar la casilla Transparencia para preservar el fondo transparente. Haga
clic en Guardar.
6.- En la siguiente pantalla, seleccione una ubicación en su equipo y haga clic en Guardar de nuevo.
Su imagen de logotipo está lista.
7.- En el backend del sitio Joomla ahora puede cargar y activar el archivo de la imagen del nuevo
logotipo.
8.- Vaya a Extensiones | Gestor de plantillas. La plantilla actual (predeterminada) se llama Protos-
tar_copy. Haga clic en el enlace Protostar_copy-Predeterminado, luego haga clic en la ficha
Avanzado. Verá la opción Logo que le permite seleccionar un archivo de imagen del logotipo.
Haga clic en Seleccionar. Se abrirá una ventana emergente.
9.- En la ventana emergente, haga clic en Examinar y busque el archivo logofascination.png en su
computador. Haga clic en Iniciar subida.
10.- Se muestra el mensaje Subida completada. Ahora haga clic en la miniatura de la nueva imagen
del logotipo (el nombre del archivo aparecerá automáticamente en el campo URL de la ima-
gen) y haga clic en Insertar.
11.- La ventana emergente se cierra y se vuelve a la pantalla Gestor de Plantillas: Editar estilo.
La nueva imagen del logotipo se ha establecido; sin embargo, también haremos algunos otros
ajustes para personalizar la plantilla. Cambie los siguientes valores:
||Título: Ingrese Fascination.

||Descripción: Ingrese Empresa textil de medias.
12.- Haga clic en Guardar y cerrar y haga clic en Ver sitio para ver el resultado.
Como puede ver, ahora aparecen el nuevo logotipo y la nueva línea de la etiqueta, tal como lo
habíamos esperado.
TIP
Vivir sin Photoshop: alternativas libres
Photoshop puede ser una muy buena herramienta para la edición gráfica,
pero no es precisamente barata. El editor de gráficos Paint de Windows
puede hacer el trabajo, pero sus capacidades son demasiado básicas.
Afortunadamente, hay muchas excelentes y gratuitas alternativas de
Photoshop. Simplemente vaya a www.pixlr.com, haga clic en Abrir editor
de fotos y ¡empiece a crear y editar!
Si usted está buscando software libre de edición de gráficos, haga una

búsqueda en Internet para Paint.NET o GIMP. Ambos son programas muy
capaces; Paint.NET es amigable para los principiantes y, al mismo tiempo,
bastante potente. GIMP, acrónimo de GNU Image Manipulation Program,
es sin duda el más popular contendiente gratuito de Photoshop. Es un
programa de código abierto que está disponible para todas las plataformas
(Windows, Apple OS y Linux) y cuenta con muchas herramientas de edición
de imágenes y retoque fotográfico.
Ejercicio 5: Ajustar los detalles del diseño
Tal vez esté satisfecho con la plantilla tal como está, ahora que ha personalizado el logotipo y el
texto del lema; sin embargo, en muchos casos es posible que desee personalizar el diseño aún más.
Para ello, tiene que editar los archivos CSS de la plantilla. Las CSS (Cascading Style Sheets) definen
el diseño del sitio, y el código HTML proporciona la estructura básica de la página. CSS se utiliza
para personalizar el diseño, el color y la tipografía. Volveremos a revisar los principios de CSS, pero
la mejor manera de averiguar cómo funciona es jugar un poco con el CSS. Como ejemplo, vamos a
cambiar el estilo y el texto del lema. Ahora el lema es bastante pequeño y poco visible, así que vamos
a hacerlo más grande y más destacado.
1.- Vaya a Extensiones | Gestor de plantillas y haga clic en el enlace del menú Plantillas en el lado
izquierdo; luego, haga clic en Detalles y archivos de la plantilla Protostar_copy para editar la
plantilla copiada. Esto le llevará a la pantalla que muestra los archivos (editables) de la plantilla
actual. Haga clic en css / template.css. Este es el archivo CSS que la plantilla Protostar_copy
utiliza actualmente.
2.- Se abre la pantalla del editor del Gestor de plantillas. Aquí puede editar o agregar el código CSS
para el archivo de código template.css. El archivo no contiene ningún estilo en particular para
la descripción del sitio en este momento; el aspecto del lema está determinado por el marcado
CSS general para todo el texto del párrafo. El texto del lema no tiene un nombre CSS específico
(o una clase, en términos de CSS) que se le aplique. Para cambiar el estilo del lema del texto
vamos a agregar código CSS mediante una clase .site-description. Esto le indicará al navegador
cómo representar el texto del lema. Agregue el siguiente código al principio de la pantalla de
código:
.site-description {
color: silver;
font-size: 14px;
font–weight: bold;
padding-left: 104px;
}
3. Para describir este código:

}}Color: Silver, indica que el texto debe tener un color gris.
}}Font-size: 14px, indica que la fuente debe ser un poco más grande que el valor original.
}}Font-weight: Bold: indica que el lema debería ser traducido como texto en negrita.
}}Padding-left: 104px indica que el lema debe ser colocado 104 píxeles a la derecha de su posición
actual, alineándolo con el texto del logotipo.
4. Haga clic en el botón Guardar y cerrar.
5. Haga clic en Ver sitio para ver los resultados en el frontend. Si sigue viendo el viejo diseño, recargue
la página presionando F5.
Se dará cuenta que la frase se ve mucho mejor y se destaca un poco más.
La nueva imagen de su sitio está empezando a tomar forma. Ha sustituido la imagen del logotipo
original, pero también ha agregado un par de líneas en la hoja de estilos CSS de la plantilla actual de
Joomla.
Hojas de estilo CSS
Acaba de cambiar el código en uno de los archivos de la plantilla de Joomla. En concreto, ha editado un
archivo CSS. Si realmente quiere personalizar el aspecto de su sitio web, debe editar los archivos CSS.
No se preocupe, no tiene que ser un experto en código para adaptar la plantilla CSS a sus necesidades.
Ahora, ¿qué es CSS? Vamos a entrar en el tema de las plantillas con más detalle en el capítulo 10, pero
aquí haremos una breve introducción sobre las hojas de estilo y sus funciones.
}}Probablemente sepa que las páginas web son documentos que contienen código HTML que le
dice al navegador web qué contenido se debe mostrar y, más o menos, dónde será colocado este
contenido en la página web.
}}Los documentos HTML se pueden enlazar a archivos de Hojas de Estilo en Cascada (CSS). Estos
archivos CSS le dicen al navegador web cómo deben mostrarse los datos en el archivo HTML. CSS
es un conjunto relativamente simple de reglas que definen los colores, fuentes, diseño y más sobre
las páginas web.
Puesto que las instrucciones de CSS se almacenan en un archivo separado, estas instrucciones de
presentación se pueden enlazar a (y ser usados por) cualquier cantidad de documentos HTML. En
otras palabras, el cambio de una línea en un archivo CSS puede modificar la apariencia de una serie
de páginas web que usan ese archivo CSS. Acaba de ver un ejemplo de esto cuando hizo que todas las
páginas en el sitio muestren un lema más grande, editando el archivo template.css.
La pantalla del editor de CSS integrado a Joomla hace que sea fácil ajustar rápidamente los detalles
de la presentación de la plantilla actual; sin embargo, sí es necesario tener algún conocimiento de CSS
para esto. Si es nuevo en CSS, puede encontrar gran cantidad de información en la Web, solo ponga en
Google la frase «introducción a CSS» o «tutorial CSS» y se le presentarán muchos recursos. Para obtener
una introducción rápida, eche un vistazo a www.yourhtmlsource.com/stylesheets/introduction.html.
Exploraremos CSS con más detalle en el capítulo 10.
Mundo real
Explore la configuración de la presentación
Como hemos visto, existen diferentes formas de influir en el aspecto de la plantilla actual.
La primera forma es mediante el uso de las opciones que están integradas en la plantilla
que le permiten seleccionar diferentes ajustes y valores (vía Gestor de Plantillas | Estilos),
y la segunda forma es mediante la edición de la hoja de estilo de la plantilla (el código de la
plantilla actual, a través de Gestor de plantillas | Plantillas).
Experimente un poco con las opciones incorporadas en la plantilla. Familiarícese con los efectos
que tienen las diferentes opciones probando algunos ajustes del ancho y combinaciones de
color. Elija sus preferencias, haga clic en Guardar, y haga clic en Ver sitio para ver la salida en
el frontend.
Se dará cuenta que las opciones de plantilla solo le permiten cambiar un conjunto limitado de
opciones. Es mucho más poderosa la posibilidad de editar el archivo o los archivos CSS de la
plantilla en el editor de Joomla; de esa manera, sus opciones de presentación son limitadas
solamente por sus conocimientos de CSS. Es una buena idea revisar el archivo template.css
en el editor de archivos CSS de la plantilla para tener una idea de lo que la codificación CSS
puede hacer. Las reglas CSS están, en su mayor parte, escritas en inglés, pero no debe tener
dificultad en entenderlas.
4.3.2 Paso 2: Agregar contenido
La plantilla personalizada se ve bien, pero el sitio aún está vacío. Ya es hora de poblarlo con algunos
artículos. En el capítulo anterior ha creado un simple artículo en el ejemplo de sitio Joomla; sin
embargo, al crear su propio sitio usted querrá elegir un enfoque más estructurado.
Primero crear una base: elaborar categorías
Si tiene experiencia en el diseño de páginas web estáticas, probablemente ha agregado nuevas

páginas al sitio en dos pasos. Primero, comienza creando un nuevo documento HTML -la página- y,
luego, agrega un enlace a esa página, asegurándose que pueda encontrar su nuevo contenido.
En Joomla, tiene que tomar un poco de acción preparatoria. Antes de crear nuevas páginas, es una
práctica común crear primero los contenedores de su contenido. Estos contenedores se denominan
categorías. Puede crear tantas categorías como desee. Las categorías contienen a los artículos. No
vamos a entrar en detalles en este momento, pues estaremos explorando los detalles de organizar el
contenido en el capítulo siguiente. Por ahora, vamos a experimentar un poco y ver cómo funciona el
uso de categorías en el trabajo de Joomla.
Vamos a seguir tres pasos en la creación de contenidos. Para este sitio básico, una categoría se va a
dividir en dos subcategorías y nos permitirá clasificar todos los contenidos.
Ejercicio 6: Crear una categoría de noticias
Su cliente, Fascination, quiere publicar una serie de artículos sobre las actividades actuales de la
empresa en su sitio. ¿Cómo podemos clasificar estos artículos al modo de Joomla? Primero vamos a
agregar una categoría como un contenedor para estos artículos.
1. Navegue hasta Contenido | Gestor de Categorías. Haga clic en el botón Nuevo. (Como alternativa,
puede hacer clic en el menú emergente Contenido | Gestor de Categorías | Añadir nueva
categoría).
2. Se abre la pantalla Gestor de categorías: Añadir un Artículo de categoría. En el campo Título,
escriba Noticias. No se preocupe por el resto de los campos, puede dejarlos vacíos por ahora.
3. Haga clic en Guardar y cerrar. Se muestra un mensaje (la categoría ha sido guardada correctamente)
y se le lleva a la pantalla Gestor de categorías. Verá los resultados: aparte de Uncategorised, ahora
hay otra categoría: Noticias.
En Joomla, ha creado grupos de contenido (categorías) antes que realmente pueda empezar a
agregar los artículos y enlaces del menú. Sin embargo, al agregar categorías en el backend, notará
que nada cambia en el frontend. Para conseguir que se presenten, vamos a agregar el contenido a la
categoría y crear un enlace de menú que apunte a los contenidos de la categoría.
Crear artículos y usar los campos Imágenes y Enlaces
Ahora llegamos a la esencia de la gestión de contenidos. Vamos a hacer algunos artículos, aplicar el
formato adecuado y agregar imágenes.
Ejercicio 7: Crear un artículo
En primer lugar, vamos a crear un artículo en la categoría Noticias.
Vaya a Contenido | Gestor de Artículos | Añadir nuevo artículo. Se abre la pantalla Gestor de artículos:
Añadir un nuevo artículo.
1. En el cuadro Título, escriba el título del artículo (en este ejemplo, Importación de productos de la
Comunidad Económica Europea).
2. En el cuadro desplegable Categoría, seleccione Noticias. Ahora puede ver por qué era necesario
crear una categoría antes. Sin ellas no se puede asignar un nuevo artículo a los «contenedores»
adecuados de la estructura general del sitio.
3. En la pantalla del editor, escriba el artículo. En este ejemplo, vamos a usar un texto ficticio. Es fácil
copiar y pegar cualquier cantidad de texto de párrafo ficticio de www. lipsum.com
4. Para dividir el texto del artículo ingrese un texto de introducción y el texto principal del artículo,
coloque el cursor al principio de la primera línea a continuación del primer párrafo. Haga clic en
el botón Leer más en la parte inferior de la pantalla del editor. Aparece una línea punteada roja
indicando la separación entre el texto de introducción y el texto principal del artículo.
5. Escriba algo por encima de la línea roja, por ejemplo «texto de introducción».
6. Por último, vamos a agregar una imagen a este artículo. Debajo de la pantalla del editor de artículo,
haga clic en botón Imagen. Esta característica le permite agregar una imagen que Joomla mostrará
al comienzo del texto del artículo y/o el texto de introducción. Aparecerá una pantalla emergente
con las miniaturas de las imágenes disponibles en la carpeta de imágenes predeterminada de
Joomla. Navegue hasta las imágenes disponibles y haga clic en una de las miniaturas.
7. En el cuadro emergente, haga clic en Insertar. La ventana emergente se cierra.
8. Repita los dos pasos anteriores para agregar una imagen al artículo completo. Una vez más,
seleccione una imagen (preferiblemente de mayor tamaño).
Este es el aspecto de la pantalla Gestor de Artículos: Añadir un nuevo artículo una vez que haya
terminado de insertar todos los datos del artículo.
9. Haga clic en Guardar y cerrar para guardar los cambios que ha hecho. Le llevará a la pantalla Gestor
de artículos: Artículos. Los detalles del artículo se muestran en la lista de los artículos.
10. El nuevo artículo está listo, pero si ahora hace clic en el enlace Ver sitio, puede estar decepcionado.
¡No hay ninguna señal de su nuevo artículo en el sitio web! Esto es porque tiene que tomar un
último paso y agregar un enlace al menú.
Ha creado un verdadero artículo, que consta de texto e imágenes. Para agregar imágenes, ha
utilizado el botón Imagen. Es un escenario común para el contenido web que las imágenes se
coloquen al principio de un artículo. Se tiene un modo seguro de insertar diferentes imágenes
colocadas exactamente al inicio del texto de introducción y del texto completo del artículo.
Para que Joomla muestre por separado el texto de introducción, (con un enlace Leer Más para el
artículo completo) ha utilizado el botón Leer más en el editor de artículo. Esto divide el texto de
artículo en un texto de introducción y un texto principal del artículo. En el editor, la separación se
indica mediante una línea de puntos rojos.
Probablemente recuerde haber visto esta división en el trabajo en la página principal del sitio de
ejemplo que contiene varios textos cortos de introducción. Solo cuando los usuarios hacen clic en el
enlace Leer más acceden a una página con el texto completo del artículo.
Hacer visible el contenido en el sitio: Crear un enlace de menú
El artículo que acaba de crear está listo y se almacena en la base de datos de Joomla, pero sigue siendo
invisible en el frontend del sitio. Eso es porque no hay un enlace que apunte al mismo. El Main Menu
(titulado This Site) está vacío, excepto por el enlace Home.
Ejercicio 8: Agregar un enlace de menú
Vamos a terminar los tres pasos para crear contenido y agregar un enlace a su artículo.
1. Navegue hasta Menús | Main Menu | Añadir nuevo elemento del menú. Se abre la pantalla Gestor
de menús: Añadir un elemento de menú.
2. Junto al cuadro Tipo de elemento del menú, haga clic en el botón Seleccionar y seleccione Artículos
| Mostrar una categoría en formato Blog. Este tipo de enlace de menú le dice a Joomla que muestre
una página que contiene textos de introducción y enlaces Leer más a todo el contenido de una
categoría específica.
3. En la lista desplegable Seleccionar una categoría, seleccione Noticias.
4. En el campo Título del elemento del menú, escriba Noticias. Haga clic en Guardar.
La creación de un enlace a la categoría Noticias cambia mucho el frontend. El sitio ahora tiene el
siguiente aspecto:
}}La página Home está vacía, pero el menú contiene un nuevo enlace: Noticias.
}}Cuando el visitante haga clic en el enlace Noticias, se le muestra una página del tipo Blog.
Esta es una página resumen de todos los contenidos de la categoría Noticias. El resumen se
compone de textos de introducción y enlaces Leer más a los artículos completos. Por ahora, hay
un solo texto de introducción al artículo. Al agregar nuevos artículos a la categoría, se agregarán
automáticamente a la página de resumen que se muestra a continuación:
}}Cuando el visitante haga clic en el enlace Leer más, se le redireccionará al artículo completo. La
ruta de navegación justo debajo del artículo refleja la estructura de la categoría: Inicio | Noticias
| Importación de productos de la Comunidad Económica Europea.
Esto es lo importante de los menús
El ejemplo anterior ilustra el poder de los enlaces de menú de Joomla. Solo mediante la adición de
un enlace del menú usted logrará que los contenidos sean accesibles de varias maneras. Lo que haya
agregado a la categoría preparada no necesita de nuevos enlaces del menú. Cualquier nuevo contenido
se mostrará a través del enlace a la categoría Noticias que ya ha creado.
Es importante notar que los enlaces del menú de Joomla son muy especiales. Ellos no solo apuntan a
las páginas existentes, sino que determinan lo que la página mostrará. El tipo de elemento del menú
Categoría Blog que acaba de implementar contiene docenas de opciones y ajustes, sobre los que se
tratará más adelante. La elección de un tipo particular de elemento del menú y sus ajuste le indican
a Joomla exactamente qué buscar en la base de datos y cómo mostrarlo. Es por eso que usted ve una
impresionante lista de tipos de elementos del menú cuando agrega un nuevo enlace a un menú. De
hecho, estos tipos de elemento de menú representan diferentes formas preestablecidas para mostrar
todo tipo de contenidos.
La presentación Categoría Blog hace que Joomla muestre parte de los artículos en un estilo de blog, es
decir, como una serie de breves textos de introducción en una página. Si ha creado un enlace del menú
directo al nuevo artículo usando una Presentación de Artículo, el enlace del menú deberá señalar el
mismo contenido en una presentación diferente, o sea, la página del artículo completo.
En el capítulo 7 vamos a explorar más profundamente el arte de crear elementos de menú y los efectos
que los diferentes tipos de elementos de menú y sus ajustes tienen en los resultados finales: una
amplia gama de tipos de página web.
Mundo real
Cree más categorías y artículos

Para el sitio de ejemplo necesitará unas cuantas categorías y artículos adicionales. Su cliente
quiere publicar contenidos en dos temas específicos: las reuniones y eventos en que participa
la empresa, lo que requiere dos nuevas categorías. Puede agregar estas características
utilizando los mismos pasos que siguió para crear la categoría Noticias. En primer lugar,
agregue una categoría más llamada Reuniones y haga clic en Guardar y nuevo; esto guardará
la primera categoría y abrirá una nueva pantalla en blanco para crear de inmediato una
segunda. Cree una segunda categoría denominada Eventos y haga clic en Guardar y cerrar. El
Gestor de Categorías debe mostrar los resultados. En total ha agregado tres categorías.
Agregue algunos artículos ficticios a las categorías.
TIP
Una manera rápida de agregar nuevos (ficticios) artículos, es usando el

botón Guardar como copia en la pantalla Gestor de artículos: Editar un
artículo. Abra cualquier artículo que desee utilizar como base para uno
nuevo y modifique su Título. Deje el campo Alias (se encuentra en la ficha
Opciones de Pantalla de edición) vacío y haga clic en Guardar como copia.
Eso es todo, ha creado un nuevo artículo. Para crear más artículos, repita
los siguientes pasos: cambie el título, borre el alias y haga clic en Guardar
como copia. Por supuesto, puede cambiar más detalles sobre el artículo,
cambiar algún texto del artículo, agregar otra imagen o asignar el artículo
a una categoría diferente. En cualquier caso, grabar el artículo como copia
es mucho más rápido que crear una serie de nuevos artículos separados y
llenar todos los detalles.
Para seguir con los ejemplos utilizados en este libro, cree artículos con los títulos que se muestran en
la siguiente captura de pantalla. En este ejemplo se han agregado tres artículos a cada una de las dos
nuevas categorías (en total ya tenemos siete artículos).
Como se puede ver, el Gestor de artículos muestra un resumen de todo el contenido del sitio. En la
columna Título se muestran todos los artículos, y debajo de cada título puede ver la categoría a la cual
se ha asignado el artículo.
En su caso, el orden de los artículos en la lista puede ser diferente del orden que se muestra en la
captura de pantalla anterior. Por defecto, los artículos están ordenados por título, pero en la figura
anterior los ha visto ordenados por categoría. Para cambiar la forma en que están ordenados los
artículos, haga clic en el cuadro desplegable sobre la lista de artículos (en el lado derecho).
Añadiendo un par de categorías, tendrá una base para agregar cualquier cantidad de contenido en los
temas principales. En capítulos posteriores vamos a ampliar esta estructura.
Crear enlaces del menú al nuevo contenido
Ahora que ha agregado algunas categorías y artículos, el siguiente paso es hacer que el contenido sea
accesible a través del menú. Ya ha visto cómo funciona esto: vaya a Menús | Main Menu | Añadir
nuevo elemento del menú.
Primero, haga clic en Seleccionar y agregue un nuevo elemento del menú del tipo Artículos | Mostrar
una categoría en formato de Blog. Llame a este enlace del menú Eventos y haga que apunte a la
categoría Eventos.
Después de guardar este enlace del menú, cree el mismo tipo de enlace del menú para la categoría
Reuniones. (Recuerde que en casos como estos el botón Guardar y nuevo es su mejor opción.)
El menú principal debe contener ahora un total de cuatro elementos del menú: Home, Noticias,
Eventos, y Reuniones. Haga clic en Ver sitio para echar un vistazo al frontend. Se dará cuenta que
el sitio está empezando a tomar forma. Si hace clic en un enlace que apunta a cualquiera de las
categorías, Joomla mostrará los textos de introducción de los artículos en esa categoría en particular.
Si ha agregado una foto a los textos de introducción, el resultado deberá ser algo como la siguiente
figura: una página de resumen que contiene la introducción de todo el contenido de la categoría. No
se preocupe si el orden real de los artículos es diferente en su configuración; por defecto, los artículos
están dispuestos con los más recientes en la parte superior.
del
China
En este ejemplo, todos los artículos contienen una imagen (alineada a la derecha) en el texto de
introducción. Estará de acuerdo en que esto hace que la página resumen de la categoría Blog
tenga un aspecto bastante atractivo, incluso si no hemos cambiado ninguna de las configuraciones
predeterminadas.
Agregar páginas de contenido individual: Artículos no categorizados
Por ahora, su cliente deseará tener un tipo diferente de página de contenido en su primera página
web. Digamos que le gustaría una página con la declaración de la Misión. Como no hay necesidad de
más contenido similar a este, sería una exageración crear una categoría solo para este artículo. Por
suerte, Joomla permite agregar artículos no categorizados. Probablemente ha notado que hay una
categoría predeterminada llamada Uncategorized (sin categorizar) para este propósito. Los artículos
sin categorizar son artículos normales, solo que se les asigna a la categoría Uncategorized.
Ejercicio 9: Agregar artículos no categorizados
Vamos a crear una página de Declaración de la Misión agregando un artículo sin categorizar.
1. Navegue hasta Contenido | Gestor de artículos. Haga clic en Nuevo.

2. En el cuadro Título, escriba Misión. En el cuadro desplegable Categoría, asegúrese de seleccionar
Uncategorized.
3. En el área de edición de texto, añada el texto de la Misión y, si desea, agregue una imagen.
Para este ejemplo hemos introducido el siguiente texto:
«Producir bienes y servicios en el sector TEXTIL, para un mercado mundial, fijando para ello
estándares de excelencia y productividad.»
«Buscar la satisfacción de las necesidades de uso de calcetines, medias, panty-medias y productos

afines de nuestros clientes de todas las edades.»
4. Haga clic en Guardar y cerrar.

El artículo no categorizados está terminado, solo necesitamos un enlace al menú para que sea
visible.
5. Navegue hasta Menús | Main Menu | Añadir nuevo elemento del menú.
6. En la pantalla Gestor de menús: Añadir un elemento de Menú, va a crear un enlace a un solo
artículo. Seleccione el apropiado Tipo de elemento del menú y haga clic en Artículos | Mostrar un
solo Artículo. Se cierra la ventana emergente.
7. Haga clic en el botón Seleccionar junto al cuadro Seleccionar artículo para elegir el artículo al que
este enlace del menú será vinculado. En el cuadro emergente, seleccione el artículo Misión. La
ventana emergente se cierra.
8. En el cuadro de menú de título, escriba Misión.
9. Haga clic en Guardar y cerrar. Haga clic en Ver sitio para apreciar los resultados. El menú muestra
ahora un nuevo enlace al artículo Misión.
Su primer artículo sin categoría está listo.
Los artículos no categorizados son una solución perfecta para colocar en su sitio el contenido que no
se ajusta a la estructura de categorías. Por ahora, ha agregado un artículo sin categorizar y un enlace
del menú que apunta a ese artículo específico. En la interfaz de su sitio web, la salida es la siguiente:
}}Un nuevo enlace del menú se muestra como el último elemento en el Main menu.
}}Al hacer clic en el enlace Misión se muestra una página de un solo artículo.
Mundo real
Reorganice el menú principal mediante arrastrar y soltar
Se habrá dado cuenta que los elementos del menú principal se muestran en el orden en que
los ha creado. Los dos últimos elementos de menú que acaba de agregar se muestran en la
parte inferior del menú. Puede cambiar el orden de los elementos en el menú principal: vaya
a Menús | Main Menu y haga clic en los tres puntos verticales al lado izquierdo de cualquiera
de los títulos de los artículos. Ahora puede arrastrar y soltar el artículo a la posición deseada.
Trate de hacer esto ahora. Por ejemplo, trate de mover el enlace del artículo Misión a la
segunda posición.
No hay necesidad de grabar este nuevo ajuste; cuando eche un vistazo al frontend del sitio,
podrá ver inmediatamente los efectos.
TIP
Cómo ocultar el título del menú
El menú principal como se muestra en el frontend tiene un título: This site.

Es posible que desee editar o borrar ese título, ya que los menús de los sitios
web genéricos no necesitan un título. Para cambiar el título del menú, debe
editar las propiedades del módulo del menú. Vaya a Extensiones | Gestor
de módulos, Y haga clic en el título This site. Se abrirá la pantalla Gestor de
módulos: Módulo menú. Seleccione Mostrar título: Ocultar y guarde los
cambios. A partir de ahora, el título del menú estará oculto.
Colocar contenido en la página principal
Ahora que ha rellenado su sitio con contenido, hay una página esencial que debe cuidar. Como aún no
hemos agregado nada a la página principal, su área de contenido principal todavía está vacía.
Puede parecer extraño que no se empiece con la página principal al agregar contenido, después de
todo, es la entrada oficial al sitio. Sin embargo, necesita tener el contenido real, o sea los artículos,
antes de que pueda empezar a publicar cualquier cosa en su página principal. Después de todo, la
página principal es generalmente una selección de elementos de contenido (resúmenes, imágenes o
enlaces) extraídos del resto del sitio.
Agregar elementos a la página principal
¿Cómo controla qué piezas de contenido se muestran en la página principal? Cuando escribe un nuevo
artículo (Contenido | Gestor de artículos | Nuevo), o edita un artículo existente en el Gestor de
artículos, puede elegir si desea que el artículo se muestre en la página principal. En la pantalla Gestor
de artículos: Editar un artículo, en Destacado coloque Sí.
Otra forma rápida de agregar elementos a la página principal (o eliminarlos) es usando la pantalla de
resumen del Gestor de Artículos (Contenido | Gestor de Artículos). Una estrella blanca en la columna
Estado indica que el artículo no se muestra en la página principal (esta es la opción predeterminada). Al
hacer clic en la estrella cambia su color a naranja, lo que indica que el artículo se mostrará en la página
principal. Vamos a tratar esto ahora mismo.
Ejercicio 10: Asignar artículos a la página principal
Vamos a agregar un par de artículos a la página principal a través del Gestor de artículos.
1. Navegue hasta Contenido | Gestor de artículos.

2. En la columna Estado, haga clic en la estrella blanca al lado de cuatro artículos: Elaboración de
un Flujo de caja, Cómo exportar a la China, Congreso anual de la SIN, Reunión con clientes de
provincias. La estrella blanca se vuelve naranja. Los resultados se muestran en la siguiente captura
de pantalla. Se han configurado los cuatro artículos para mostrarse en la página principal.
3. Haga clic en Ver sitio. Ahora tiene una página principal llena de contenido. Cuatro artículos se
muestran en la página principal como textos de introducción con enlaces Leer más.
Al hacer clic en el icono de la columna Destacado en el Gestor de artículos, ha agregado cuatro

artículos a la página principal. En el frontend, estos cuatro artículos se muestran ahora en la página
principal de Joomla según el diseño predeterminado; el primer texto de introducción se muestra a lo
ancho de todo el mainbody, los otros textos de introducción se presentan en tres columnas. Dejaremos
esto por ahora, pero puede estar seguro que aprenderá cómo ajustar estas opciones de visualización
de los contenidos en los próximos capítulos.
TIP
Hay mucho más que solo artículos en la página principal
¿Cómo se determina lo que se muestra en la página principal? Parcialmente

lo hace indicando que los artículos deben ser destacados. Por defecto, los
artículos destacados aparecen en la página principal y se muestran en el
área de contenido principal o mainbody. Esa es la parte de la página donde
se muestran los cuatro textos de introducción en la captura de pantalla
anterior. Pero hay más en la página principal (toda la página que el usuario
ve cuando hacen clic en Inicio). Esa página también contiene módulos,
como los menús y la función de búsqueda. La visualización de un módulo
en la página principal es algo que se controla a través de la configuración
de los propios módulos. Podrá ver un ejemplo de esto más adelante en
este capítulo, cuando agreguemos un módulo para el sitio.
4.3.3 Paso 3: Agregar extras a través de extensiones
Usted ha avanzado a grandes pasos, ya que ha personalizado el diseño de su nuevo sitio, enmarcado
la estructura, creado y publicado el contenido para coincidir. Ahora puede agregar extras funcionales
o simplemente elegantes. Para ello, vamos a usar los componentes y otras extensiones de Joomla.
Ahí es donde está el real poder mágico de Joomla.
Componentes y extensiones. ¿Cuál es la diferencia?

Para administrar la funcionalidad ampliada de Joomla, debe trabajar tanto con el menú Componentes
como con el menú Extensiones en el backend. De hecho, los componentes también son extensiones,
y amplían la funcionalidad de Joomla. Los componentes se encuentran en el menú independiente
Componentes, en el backend de Joomla, ya que son más potentes y más complejos, son aplicaciones
dentro de la aplicación Joomla. A través del menú Extensiones, puede encontrar módulos y plugins.
Estos son complementos más pequeños que pueden contener todo tipo de información dinámica. A
veces, los componentes y los módulos están diseñados para trabajar juntos.
A pesar de las diferencias que existen entre los tipos de extensiones, estas generalmente tienen el
mismo propósito. Todas son de mucha ayuda para mejorar la funcionalidad de su sitio.
Nota Por ahora, vamos a utilizar los componentes y extensiones que se incluyen
en la configuración predeterminada de Joomla. Más adelante es probable
que desee agregar otras extensiones. Hay miles de ellas disponibles en la
web, que proporcionan toda la funcionalidad posible que desee agregar a su
sitio. Aprenderá más acerca de cómo agregar extensiones en el capítulo 9.
Agregar un formulario de contacto
Cuidemos los últimos elementos en la lista de deseos de su cliente y permitamos que los visitantes del
sitio se pongan en contacto a través de un formulario de contacto. Agregar este formulario tomará dos
pasos. En primer lugar, vamos a crear un contacto; después de eso, vamos a crear un enlace de menú
que muestre un formulario de contacto.
Ejercicio 11: Crear un contacto
Vamos a agregar un contacto; es decir, alguien cuyo correo electrónico y otros datos de contacto se
pueden mostrar en la página del formulario y que recibirá los datos del formulario en su buzón de
correo.
1. Navegue hasta Componentes | Contactos. Se abre el Gestor de contactos. Haga clic en Nuevo.
2. En la pantalla Gestor de contactos: Contacto, ingrese los detalles del contacto. En el cuadro
Nombre, escriba Personal de Fascination.
3. En la lista desplegable Categoría, seleccione Uncategorised. No hay necesidad de diferentes tipos
de categorías de contactos en nuestro sitio.
4. Haga clic en la ficha Nuevo contacto e ingrese los detalles de la información de contacto que desea
mostrar. En este caso, está bien que solo rellene el cuadro Correo electrónico y el cuadro Teléfono.
Es importante especificar una dirección de correo electrónico válida, porque aquí es a donde se
enviarán los datos del formulario. En el campo Cargo, escriba algo así como Personal de Oficina
o Consultor general, ya que este es el texto que se mostrará por encima del número de teléfono.
5. Haga clic en la ficha Visualización, para especificar si desea mostrar u ocultar datos específicos
del contacto en la página del formulario de contacto. En este caso, las opciones predeterminadas
están bien. Se podría, por supuesto, mostrar más detalles de contacto para ofrecer a los visitantes
diversas formas de responder.
Para crear un formulario de contacto, primero ha creado un contacto. Usando el Componente

Contacto de Joomla, puede construir un completo sistema de contactos organizados por categorías
de contactos. Para nuestro objetivo, serán suficientes solo un nombre de contacto y su dirección de
correo electrónico.
Ejercicio 12: Crear un enlace de menú a un formulario de contacto
Ahora que existe un contacto, puede agregar un enlace a un formulario de contacto en el menú
principal.
1. Navegue hasta Menús | Top. Vamos a agregar el nuevo enlace al menú superior horizontal.
2. Haga clic en Nuevo.
3. En la lista Tipo de elemento del menú, seleccione Contactos | Mostrar un solo contacto.
4. Haga clic en el botón Seleccionar junto al cuadro Seleccionar contacto, para seleccionar el contacto
apropiado Personal de Fascination.
5. Ingrese un Título del elemento del menú, por ejemplo, Contáctenos. Verifique que el cuadro Menú
tenga seleccionada la opción Top.
6. Haga clic en la ficha Opciones básicas del contacto. En el cuadro desplegable Formato, elija Plano
De lo contrario, el formulario de contacto se mostrará en paneles independientes (desplegable o
por pestañas), y esto no es lo que queremos.
7. Haga clic en Guardar y cerrar. El sitio ahora tiene un enlace al menú Contacto, que muestra un
formulario de contacto.
Ha utilizado el componente Contactos para crear un nuevo contacto, y agregó un enlace de menú a un
formulario de contacto. Una vez más, ha experimentado lo poderosos que son los enlaces del menú
en Joomla. Simplemente seleccionando el Tipo de elemento del menú: Mostrar un solo Contacto, ha
creado un enlace del menú que lleva al visitante a una página de formulario de contacto.
Mundo real
Limpie el menú TOP
Si está utilizando el Top Menú que vino con los datos de ejemplo de Joomla, verá que el menú
todavía contiene algunos enlaces de ejemplo redundantes. Para eliminarlos, vaya a Menús |
Top, seleccione los enlaces del menú que no son necesarios y haga clic en Papelera. Puede
mantener los enlaces de menú Home y Contáctenos.
Agregar un bloque de mensajes especiales
Las personas de Fascination están satisfechas con el sitio actual, pero les gustaría mostrar un poco
más de atención a su próxima reunión, que es el Congreso de la SNI en la ciudad de Lima. ¿Podría
colocar algún tipo de bloque de mensajes en la página principal, en lugar de limitarse a agregar otro
artículo? En Joomla todo es posible. Para ello, utilice uno de los módulos que están disponibles en
Joomla, llamado HTML personalizado. En este bloque de módulo, puede agregar todo el contenido
que desee (texto, imágenes, hipervínculos y más), y colocar el bloque en una posición específica en
páginas específicas.
Ejercicio 13: Crear un bloque de mensaje
Para agregar un bloque de mensaje sobre un Evento en la página principal, vamos a agregar un nuevo
módulo del tipo HTML personalizado.
1. Vaya a Extensiones | Gestor de Módulos y haga clic en Nuevo para crear un nuevo módulo.
2. En la pantalla Seleccionar un tipo de módulo, seleccione HTML personalizado.
3. Ingrese un Título: XV Congreso de la SNI.
4. En la lista desplegable Posición, desplácese hasta encontrar la lista de posiciones disponibles para
la plantilla actual, Protostar. Seleccione Derecha [position-7]. Esto agregará el bloque a la columna
de la derecha de la plantilla actual. (Podrá averiguar cuáles son las posiciones disponibles en el
capítulo 10.)
5. Para insertar una imagen, haga clic en el botón Imagen en la parte inferior del editor. Si utiliza los
archivos de ejemplo para este libro, suba e inserte archivo de imagen sni.png.
6. Agregue un poco de texto. En este ejemplo estamos ingresando un texto breve: ¡Reserve su
participación ahora! y un número de teléfono. Haga clic en Guardar. La pantalla del editor ahora
se ve así:
7. Por último, vamos a determinar en qué páginas aparecerá el módulo. Haga clic en la ficha Asignación
de Menú para seleccionar Asignación del Módulo: Solo en las páginas seleccionadas. Haga clic en
Ninguno para anular la selección de todas las páginas. Ahora seleccionaremos la página Home.
8. Haga clic en Guardar y cerrar y luego haga clic en Ver sitio.
Ha utilizado un pequeño módulo simple pero muy flexible, llamado HTML personalizado. Su sitio ahora
muestra un bloque de información especial en la columna derecha de la página principal.
Terminando: Cambiar la configuración del sitio
La página web de una hora se ha terminado; sin embargo, hay algunos ajustes que deben introducirse
en el backend.
Ejercicio 14: Cambiar la configuración del sitio
La configuración del sitio aún muestra algunos valores predeterminados que no coinciden con el nuevo
contenido del sitio. Vamos a ingresar el nombre del sitio apropiado y agregar los metadatos.
1. Vaya a Sistema | Configuración Global.

2. En la sección Configuración del sitio, en el cuadro Nombre del sitio, escriba: Fascination – medias
exclusivas. En la sección Configuración SEO, seleccione Incluir el nombre del sitio en el título de
las páginas: Después. De esta manera, la información del sitio se mostrará en la barra de título o
en la ficha actual del navegador web de los visitantes, de esta manera:
3. En la sección Configuración de los metadatos (es posible que tenga que desplazarse hacia abajo
para verlo), agregue un poco de texto. Esta metadescripción se utiliza en las páginas de resultados
de los motores de búsqueda. En el cuadro Metadescripción del sitio, ingrese: Fascination es una
empresa textil dedicada a la confección de medias para damas.
4. Joomla también le ofrece la posibilidad de agregar metapalabras clave para el sitio. La mayoría
de los motores de búsqueda ignoran las metapalabras clave en estos días, pero no le hará daño
introducir algunas palabras clave que caractericen los contenidos del sitio: textil, medias, damas,
lencería, Fascination. Guarde los cambios haciendo clic en Guardar y cerrar.
Al ingresar un par de líneas en la pantalla Configuración global, hemos asegurado que el nombre
correcto del sitio aparecerá en el navegador web de los visitantes, y que los motores de búsqueda
recogerán la información adecuada acerca de los contenidos del sitio.
Cap.
O r g a n i z a r e f i c a z m e n te s u
c o n te n i d o
5
CAP. 5: O rganizar eficazmente su contenido 101
En el capítulo anterior se vio que la creación de un sitio web en Joomla gira en torno a tres tareas
principales: diseñar una presentación, crear contenidos y agregar extras. La parte central es, por
supuesto, la creación de contenidos. Puede tener un sitio Joomla utilizando una simple plantilla
predeterminada; puede tener un sitio sin agregar funcionalidad adicional, pero no se puede tener un
sitio sin contenido. Por eso, en los próximos capítulos nos concentraremos en la gestión y la creación
de contenido. En capítulos posteriores, vamos a trabajar en el diseño y el agregado de extras.
En este capítulo aprenderá cómo transformar un mapa de sitio básico en un proyecto viable para un
sitio basado en Joomla, y como diseñar un marco claro y escalable para su contenido; además, sabrá
cómo agruparlo con el sistema de categorías y subcategorías de Joomla. Por último, podrá utilizar
páginas sin categorizar para construir sitios que no requieran un contenido multinivel.
5.1 Construir sobre el sitio de ejemplo

El sitio de Fascination que desarrolló en el capítulo 4 era un gran sitio pequeño, perfectamente
adecuado para los propósitos iniciales de su cliente en su primera presencia en la web. Ahora, es el
momento de dejar espacio para el crecimiento. Su cliente tiene una gran cantidad de información
sobre nuevos productos que quiere presentar al público. Se le pide que diseñe una estructura del sitio
que haga fácil agregar más contenido, mientras que al mismo tiempo facilite a los visitantes encontrar
rápidamente su camino a través del sitio.
Usted puede hacer esto. Joomla le permite construir sitios de todo tipo y tamaño, ya sea que contengan
unas pocas páginas o miles de ellas. Si se planifica con antelación y comienza con una sólida estructura
básica, será recompensado con un sitio que sea fácil de mantener y ampliar. En este capítulo vamos a
revisar el sitio que se ha construido, y observaremos las diferentes formas en que el contenido puede
ser estructurado y replanteado si es necesario.
5.2 Agrupar el contenido

Para sentar las bases de su sitio no va a utilizar Joomla. Elabore un mapa del sitio para disponer
las principales partes de contenido y sus relaciones. Vea su sitio desde la perspectiva del usuario.
¿Qué cree que buscarán principalmente sus visitantes, y cómo puede ayudarlos a encontrar rápida y
fácilmente las cosas?
5.2.1 Diseñar un mapa del sitio
Para crear un mapa del sitio, primero recopile toda la información que planea tener en su sitio web
y organícela en un formato simple y lógico. Observe la página web de Fascination que construyó en
el último capítulo. El siguiente será el esquema básico de la página que ha creado:
Este es un mapa de sitio muy básico. Noticias, Eventos y Reuniones son categorías que tienen varios
artículos sobre estos tres temas. La Misión es una página web básica (un artículo). Contáctenos es
una página de formulario de contacto. Esta estructura era lo suficientemente buena para empezar,
pero no lo será si Fascination quiere expandir su sitio.
Ejercicio 1: Crear un mapa del sitio preparado para el futuro
Vamos a hacer un poco de espacio para el crecimiento. Imagine que su cliente planea expandir el sitio
y agregar nuevo contenido, y le ha llevado una lista de temas que desea agregar a su sitio:
}}Unas páginas para introducir los miembros fundadores de Fascination.

}}Alguna información adicional de la empresa: historia, hechos poco conocidos, etc.
}}Comentarios de economía sobre el sector textil, etc.
}}Las actividades del club que no sean conferencias y reuniones, como exposiciones de arte.
¿Cuál es la mejor manera de organizar las cosas? Vamos a averiguar qué contenido se ajusta a qué tipo
de contenedor.
1. La información sobre los fundadores Fascination encaja en una nueva categoría: Acerca de
Fascination. Esta será una categoría que contenga solo unos pocos artículos, aparte de uno sobre
los fundadores de Fascination; el artículo Misión, que no tiene categoría, también se puede mover
aquí.
2. Hasta ahora, hemos creado grupos de contenido que están a un nivel de profundidad, es decir,
categorías que contienen artículos Sin embargo, en Joomla las categorías pueden contener tantas
categorías como desee. Para organizar todo el contenido sobre Ventas, sería bueno tener un nivel
extra. Una categoría principal sobre Ventas contiene dos subcategorías: artículos sobre Ofertas y
artículos sobre Nuevos productos.
3. Ahora, ¿cómo acomodamos el contenido de las actividades que el cliente quiere agregar? Ya
tenemos dos categorías que contienen información sobre las cosas que organiza Fascination:
eventos y reuniones. Tiene sentido agregar una nueva categoría Actividades de nivel superior, ya
que es el denominador común, tanto para los grupos de artículos de Eventos como para Reuniones.
TIP
Por supuesto, le toca a usted decidir si quiere hacer que dos o más categorías
sean parte de una categoría principal (en este caso Actividades). También
podría tener tres categorías de nivel superior sobre diferentes tipos de
actividades. Sin embargo, la agrupación de contenido, como se describe
anteriormente, tiene ventajas en la gestión y presentación del contenido. Al
poner todo el contenido en un contenedor principal, puede optar por crear
un enlace de menú para mostrar todo el contenido de Actividades en una
página de resumen, independientemente de la categoría de actividad a la
que pertenecen. Veremos un ejemplo de esto más adelante.
Ha establecido una base para su sitio ¡sobre el papel! y ha creado un conjunto de grupos de contenido
(categorías, en términos de Joomla). Algunas de estas categorías contienen subcategorías.
Antes de empezar a usar Joomla para crear categorías, es una buena idea esbozar una estructura para
el contenido que tiene en mente. Básicamente, no importa cuán grande o pequeño sea su sitio web, lo
podrá organizar como el ejemplo que acaba de ver. Va a trabajar de arriba hacia abajo, desde el nivel
principal hasta los niveles más bajos, definiendo los grupos de contenido y sus relaciones. En Joomla,
puede tener tantos niveles de subcategorías como desee; sin embargo, trate de mantener el mapa del
sitio limpio y poco voluminoso. Elija una organización que tenga sentido para usted y sus visitantes.
Una compleja estructura hará que sea más difícil mantener el contenido y, en definitiva, al construir los
menús, hará más difícil diseñar caminos de navegación claros y sencillos para sus visitantes.
TIP
Consejos sobre la elección de las principales categorías

}}Puede ser útil elegir categorías en función de las principales intenciones que
tiene la gente cuando llegan al sitio. ¿Para qué están aquí? ¿Es para conocer los
productos o para unirse a un evento?
}}Las opciones comunes para las principales categorías son: Productos, Catálogos,
Empresa, Portafolio, Quiénes somos, Clientes, Noticias y Descargas.
}}Trate de no tener más de cinco a siete categorías principales. Si tuviera una
cantidad mayor, los lectores no podrán recordar todas a la vez cuando tengan
que elegir la que deseen navegar.
5.2.2 Transferir su mapa del sitio a Joomla
Veamos más de cerca nuestro nuevo mapa del sitio e identifiquemos los elementos de Joomla. Es
probable que este sitio de Joomla conste de cuatro tipos de contenido.
Los siguientes son los tipos de contenido en nuestro mapa del sitio Fascination:
Tipo de contenido Descripción

Home El elemento de nivel superior será la página principal.
Son los principales grupos de contenido que podemos identificar

Categorías
como categorías.
Este pequeño lugar tiene cuatro categorías principales, dos de las
cuales contienen dos categorías. En Joomla, puede presentar los
artículos en una determinada categoría sobre páginas resumen de
categoría.
Cada una de las categorías sostiene el contenido real: esto es lo
que finalizará como un artículo en Joomla.
La página principal, las categorías y los artículos existen para

contener artículos, es decir, todos son texto e imágenes. Sin
embargo, la mayoría de los sitios son susceptibles de contener
también otro tipo de contenido, o sea, artículos que contienen una
Contáctenos
funcionalidad especial. Un ejemplo es el formulario de contacto
en el mapa del sitio mostrado anteriormente. Otros ejemplos son
los libros de visitas, formularios de pedidos, carritos de compras,
galerías de fotos, etc.
Nota ¿Cuál es la finalidad de los artículos no categorizados?
En este mapa del sitio hemos puesto todo el contenido del artículo en
categorías; sin embargo, la mayoría de las veces encontrará que hay uno o dos
artículos que en realidad no pertenecen a ninguna de las categorías: una página
de Suscripciones o una simple página Acerca de nosotros. En Joomla puede
agregar estos artículos no categorizados. Ha visto un ejemplo de esto al construir
su primer sitio en el capítulo anterior.
Por otra parte, los artículos no categorizados son útiles en la construcción de

un sitio muy pequeño de unas pocas páginas. En lugar de crear categorías que
sostienen solo un artículo, puede dejar todo el contenido sin categorizar. Verá
algunos ejemplos de esto al final del capítulo.
También se pueden usar los artículos no categorizados como marcadores de

posición para los artículos que aún no han sido asignados a una categoría. Más
tarde, siempre se pueden agrupar los artículos no categorizados colocándolos en
una (nueva) categoría.
Básicamente, los tres grupos descritos anteriormente son todo lo que tenemos para un sitio Joomla.
Cuando tenga su plan diseñado para el sitio, no se encontrará con ninguna sorpresa al construirlo, ya
que puede transformar cualquier cantidad de contenido y funcionalidad en un sitio web.
5.2.3 Cómo convertir un mapa del sitio en un sitio web
¿Cuál es la mejor manera de llegar desde el mapa del sitio a un sitio Joomla en la vida real? En este
libro vamos a trabajar en este orden:
A. Organizar: Crear contenedores de contenido. Ha visto que gran parte del mapa del sitio que
acabamos de crear consiste en contenedores de contenido y categorías. En este capítulo vamos a
crear todos los contenedores necesarios para nuestro sitio de ejemplo.
B. Agregar contenido: Llenar los contenedores con los artículos. A continuación, vamos a agregar
artículos a las categorías. Los artículos son el contenido clásico con los que se hacen la mayoría de
las páginas web. Para nuestro sitio de ejemplo, trabajaremos los contenidos de los artículos en el
siguiente capítulo.
C. Colocar sus contenidos en la pantalla: Crear la página principal y las páginas resumen de
contenido. A continuación, querrá orientar e invitar a los visitantes. Puede lograrlo utilizando dos
tipos especiales de páginas en el mapa del sitio: la página principal y las páginas de resumen de las
categorías de Joomla (páginas de inicio secundarias).
D. Hacer que todo se pueda encontrar: Crear menús. Los elementos de nivel superior en su mapa del
sitio, probablemente terminarán como elementos de menú en el sitio. Para abrir su sitio al mundo,
creará y personalizará menús que ayuden a los visitantes a navegar fácilmente por el contenido.
Este es el tema del capítulo 7.
Nota ¿Qué sucede con el material de contenido especial?
En la lista anterior hemos explicado el contenido clásico, como los artículos,

las páginas de inicio y de resumen, y los menús que unen todo. Todavía
no hemos mencionado una parte esencial del mapa del sitio: los contenidos
especiales. En un sitio web dinámico es muy probable que tenga mucho más
que simples artículos antiguos; puede agregar galerías de imágenes, formularios,
catálogos de productos, mapas del sitio, y mucho más. Es importante identificar
esas páginas especiales desde el principio, pero las añadirá posteriormente
utilizando los componentes y las extensiones de Joomla. Es por eso que vamos
a concentrarnos primero en la construcción de una base sólida, y más tarde
agregaremos todos los extras deseados.
Vamos a empezar con el primer paso ahora, y tener nuestro sitio organizado.
5.3 Crear categorías y subcategorías

Vamos a acceder nuevamente a Joomla y dar al primer paso en la lista de tareas descrita anteriormente,
es decir, la creación de contenedores de contenido. En el capítulo anterior se ha dado un anticipo de
cómo crear categorías en Joomla. Es bastante sencillo, y lo mismo pasa con la creación de categorías
dentro de otras categorías (llamadas subcategorías o categorías anidadas). Vamos a ver cómo funciona
esto para nuestro sitio de ejemplo.
Ejercicio 2: Crear una categoría y subcategoría
Hemos visto lo que el sitio Fascination puede hacer con algunos contenedores de contenido extra. Ya
hemos esbozado en el papel qué categorías son necesarias, así que vamos a agregar la primera nueva
categoría: Acerca de Fascination.
1. Navegue hasta Contenido | Gestor de Categorías | Añadir nueva categoría.

2. En la pantalla Gestor de Categoría: Añadir una nueva Categoría de artículos, rellene el campo
Título. En este ejemplo, escriba Acerca de Fascination.
3. Deje los otros valores sin cambios. Haga clic en Guardar y cerrar. Será conducido a la lista Gestor
de Categorías. La categoría Acerca de Fascination se muestra ahora en la lista de la pantalla Gestor
de Categorías.
4. De acuerdo con nuestro mapa del sitio, las siguientes categorías que necesitamos están anidadas:
una categoría principal (Ventas), que contiene dos subcategorías (Ofertas y Nuevos productos).
Para agregarlas, en la pantalla Gestor de categorías, haga clic en Nuevo.
5. En la pantalla Gestor de Categorías: Añadir un artículo de categoría, escriba Ventas, en el campo
Título.
6. Haga clic en Guardar y nuevo. Este botón hace que sea más fácil crear una serie de categorías de
una sola vez; la categoría actual se guarda y se abre la pantalla Añadir una nueva Categoría de
artículos.
7. Ingrese los detalles para la siguiente categoría que desee crear. En el campo Título, escriba Ofertas.
En la parte derecha de la pantalla, busque el cuadro desplegable Categoría raíz y seleccione Ventas,
como se muestra en la siguiente captura de pantalla:
8. Haga clic en Guardar y nuevo otra vez. En la siguiente pantalla, ingrese el título de la siguiente
nueva categoría: Nuevos productos. Asegúrese que esta categoría sea también una subcategoría
de la categoría padre Eventos. Haga clic en Guardar y cerrar.
Ha agregado la categoría Acerca de Fascination y la categoría Ventas, con dos subcategorías. Acerca
de Fascination contendrá solo algunos artículos (como la declaración de la Misión). Como Ventas
es un tema mucho más importante en nuestro sitio web, contiene un par de subcategorías que le
permitirán clasificar de una manera lógica una gran cantidad de contenido relacionado con las ventas
de la empresa.
5.3.1 En qué casos necesita más niveles de subcategoría
Desde Joomla 1.6, no hay límites para el número de subcategorías que cualquier categoría puede
contener; sin embargo, lo mejor es mantener limitado el número de niveles de categoría, ya que cada
nuevo nivel de contenido añade complejidad a su sitio. En nuestro sitio de ejemplo, un solo nivel
de subcategorías es todo lo que necesitamos, mientras que en sitios de gran tamaño, sin duda tiene
sentido usar más niveles de organización del contenido. Imagine un sitio que muestre reseñas de los
productos. El siguiente esquema ilustra cómo ese sitio puede utilizar cuatro niveles de categorías
para organizar una categoría principal de reseñas en subcategorías de tipos de productos, marcas y
modelos.
Mundo real
Reorganice las categorías existentes
Volvamos al mapa del sitio Fascination. El árbol de categorías del sitio de ejemplo está casi
terminado. Una cosa que queda por hacer es agrupar las dos categorías separadas que ya
creamos en el capítulo anterior, Eventos y Reuniones. Necesita hacer esto en subcategorías
de una nueva categoría principal: Actividades. Por suerte, en Joomla es fácil reorganizar las
categorías y moverlas hacia arriba o hacia abajo en el árbol de categorías.
Para ello, primero debe crear una nueva categoría denominada Actividades y hacer clic
en Guardar y cerrar. Ahora abra la categoría existente Eventos (en la pantalla Gestor de
categorías, haga clic en su título) y cambie la Categoría raíz por Actividades. Haga lo mismo
para la categoría Reuniones. En la pantalla Gestor de categorías, los resultados se muestran
de la siguiente manera:
Nota Puede reconocer fácilmente las subcategorías en la pantalla Gestor de

categorías, ya que siempre se muestran con sangría. Una subcategoría de
primer nivel se muestra sangrada en una posición, mientras que una de
segundo nivel se mostrará sangrada dos posiciones, y así sucesivamente.
El mapa del sitio que antes hemos esbozado en el papel se ha convertido ahora en un árbol de categorías
de Joomla. Consta de cuatro categorías principales, dos de los cuales contienen subcategorías. Es una
estructura clara y lógica.
5.3.2 Agregar contenido a las nuevas categorías
Agregando nuevas categorías, usted ha creado espacio para el crecimiento. Dejaremos estos
contenedores vacíos por el momento, pues en los próximos capítulos vamos a agregarle artículos. Si
desea agregar un poco de contenido (ficticio) a cualquiera de las nuevas categorías, puede hacerlo
repitiendo los pasos que tomó en el capítulo. En resumen, vaya al Contenido | Gestor de artículos
y haga clic en Nuevo. Añada un título y en el cuadro desplegable Categoría, seleccione alguna de las
nuevas categorías. Agregue un poco de texto al artículo y coloque un enlace «Leer más» después
del primer párrafo, para que Joomla muestre por separado un texto de introducción y el texto del
cuerpo. Haga clic en Guardar y nuevo para abrir rápidamente una nueva pantalla del editor de
artículos vacía, o haga clic en Guardar como copia para guardar el artículo actual y salir del editor
de artículos.
5.4 Mostrar las principales categorías y subcategorías en su sitio

Todas las categorías incluyen un contenido que le dice a Joomla cómo agrupar las cosas en el backend.
Ahora, ¿cómo se coloca el contenido en esos contenedores para mostrarlo en su sitio web? Ya hemos
visto en el capítulo 4 que una forma de hacerlo es agregando un enlace del menú del tipo categoría de
blog. De esta forma, se agregan enlaces del menú a las categorías Eventos y Reuniones.
Vamos a estudiar con algo más de detalle la creación de los enlaces del menú que apuntan a las
categorías. ¿Cómo hace para crear un enlace del menú, y mostrar los contenidos de la nueva categoría
principal Actividades (categoría de nivel superior) y sus subcategorías?
Ejercicio 3: Crear un enlace que apunte a una categoría principal

La creación de un enlace del menú que apunte a una categoría, requiere los siguientes pasos:
1. Navegue hasta Menús | Main menú y haga clic en Nuevo.

2. Se abre la pantalla Gestor de Menús: Añadir un elemento de menú. En la sección Tipo de elemento
del menú, seleccione Artículos | Mostrar una categoría en formato Blog.
3. En la lista desplegable Seleccionar una Categoría, seleccione Actividades.
4. Ingrese un título de menú (es decir, Actividades) y haga clic en Guardar y cerrar.
Como podrá ver en la siguiente captura de pantalla, Actividades ahora aparece como el último
elemento de menú en el Gestor de elementos del Menú. El orden en que se presentan aquí los
elementos del menú es el mismo orden en que estarán en el Main menú del sitio web. Si desea
mover el enlace Actividades hacia arriba en el Main menú haga clic en los tres pequeños puntos
de la columna Orden para arrastrar y soltar cualquier elemento del menú a la posición deseada.
La columna Orden es la que está al lado izquierdo con dos pequeños triángulos azules apuntando
hacia arriba y hacia abajo en la fila superior. En este ejemplo vamos a dejar el orden sin cambios.
5. Haga clic en Ver sitio y luego en el nuevo enlace Actividades en el menú principal, para ver lo que
ha cambiado en el frontend.
Poco atractivo, ¿no es así? Como puede ver, un enlace del menú a una categoría de nivel superior que
sostiene a otras categorías, muestra un enlace directo tanto a las categorías Eventos como a Reuniones
que creó anteriormente. Debido a que la categoría nivel superior Actividades está vacía, el enlace de
menú Actividades apunta a una página que contiene solo dos enlaces a las subcategorías; sin embargo,
si agrega un artículo a la categoría Actividades, por ejemplo Actividades del mes que pertenece a la
categoría Actividades, la pantalla cambia de la siguiente manera:
Como puede ver, el enlace Actividades ahora apunta a una página que contiene los textos de
introducción de la categoría principal (en este caso solo hay un artículo en ella) y en la parte inferior
de la página hay dos enlaces a las subcategorías. Cuando el usuario haga clic en el enlace Eventos o
en el enlace de Reuniones, será llevado a una página que muestra los contenidos de esa subcategoría
específica.
Mundo real
Explore las posibilidades de las páginas de categorías
Cuando las categorías contienen subcategorías, la configuración predeterminada de las

páginas de categorías del blog requiere que los visitantes hagan clic en los enlaces a las
subcategorías en la parte inferior de la página para ver qué artículos contienen. Sin embargo,
también es posible lograr que los artículos de todas las subcategorías se muestren en la página
Actividades. Echemos un vistazo a las posibilidades en este momento.
Para cambiar el diseño de la página del tipo Blog, vaya a Menú | Main menú y modifique el
elemento de menú Actividades haciendo clic en el elemento de menú Título. En la pantalla que
aparece, haga clic en la ficha Formato tipo blog o destacados y coloque el cuadro desplegable
Incluir subcategorías en Todos. Guarde los cambios.
Cuando el visitante haga clic en el enlace Actividades en el frontend, se mostrará una página
conteniendo los textos de introducción del artículo, tanto de la categoría principal Actividades como
de las subcategorías Eventos y Reuniones.
Se habrá dado cuenta que un pequeño cambio hace una gran diferencia. Siéntase libre de explorar
las otras opciones del tipo de elemento del menú Categoría Blog, y pruebe sus efectos sobre la
visualización de la página. Puede optar por mostrar los contenidos de la categoría en muchos otros
formatos.
Nota Si ha seguido los ejercicios de las secciones anteriores, ya dispone de un

menú bastante desordenado que contiene enlaces separados tanto para
Actividades como para sus subcategorías, Eventos y Reuniones. Eso está
bien por ahora, ya que vamos a limpiar y reorganizar nuestros menús del
sitio en el capítulo 7.
5.5 Afinar la estructura de su sitio

Es un hecho real: probablemente no obtendrá la estructura correcta de su sitio a la primera vez, a
menos que tenga un sitio muy sencillo o estático. ¿Es eso algo malo? No lo es, porque los sitios web
evolucionan y Joomla hace que sea fácil seguir adelante con una estructura provisional y cambiar las
cosas cuando sea necesario. Tal vez porque hay nuevo contenido disponible que debe ingresar en
una nueva categoría. O tal vez porque cuando está agregando contenido, se da cuenta que su bien
organizado sitio no es del todo lógico. Eso está bien, ya que mantener una estrecha vigilancia sobre
la estructura de su sitio web es un proceso continuo. Por suerte, una vez definidas las categorías, se
pueden cambiar fácilmente sin ningún tipo de consecuencias para los artículos que puedan contener.
Ya ha visto lo fácil que es agregar nuevas categorías, y es igual de sencillo mover el contenido de una
a otra.
Ejercicio 4: Mover contenido de una categoría a otra
La categoría principal Actividades contiene un par de artículos que puede desear mover a la categoría
Noticias. Vamos a limpiar la categoría Actividades - Reuniones y mover algún tema a la categoría
Noticias.
1. Navegue hasta Contenido | Gestor de artículos. En la lista, seleccione los elementos que desea
pasar de la categoría Reuniones a la categoría Noticias. En este ejemplo, hemos seleccionado el
siguiente artículo:
2. Haga clic en el botón Lote. Aparecerá un cuadro emergente llamado Procesar por lotes los artículos
seleccionados. En el cuadro desplegable Seleccionar categoría a mover o copiar, seleccione la
categoría destino, Noticias. Luego haga clic en Procesar.
3. Se muestra el mensaje Proceso por lotes completado correctamente. En la pantalla Gestor de

artículos, el artículo seleccionado es ahora parte de la categoría Noticias.
Ha cumplido el reto de vida real de la gestión de contenidos. Ahora, no solo es capaz de crear una
sólida estructura de contenidos para su sitio web, sino también sabe cómo mejorarla. Puede mover
cualquier cantidad de contenido existente a otra categoría.
Mundo real
Mueva categorías enteras
A veces es posible que desee mover una (sub) categoría y todo su contenido a otra categoría
principal. Trate de hacerlo usted mismo, pues no es muy diferente de mover artículos, como
acaba de hacer. Imagínese que desea mover la subcategoría Ofertas desde la categoría
principal Ventas a otra categoría principal. En la pantalla Gestor de categorías, seleccione la
categoría que desea mover. Haga clic en el botón Lote y e n la pantalla Procesar por lotes las
categorías seleccionadas use la lista desplegable Seleccionar categoría a mover o copiar para
seleccionar la categoría de destino. Haga clic en Procesar para mover la categoría a su nueva
categoría principal. Es muy sencillo mover toda la categoría, incluyendo todos los artículos que
contiene. Esta flexibilidad es muy cómoda cuando está creando o reestructurando su sitio.
5.6 Renombrar las categorías

Como acabamos de ver, Joomla permite reorganizar fácilmente la estructura del sitio y su contenido.
También puede renombrar las categorías que contienen artículos sin que ningún contenido se pierda.
Ejercicio 5: Renombrar una categoría
En el sitio web de su cliente hay una categoría llamada Actividades. Su cliente quiere dejar claro que
esta sección del sitio no es acerca de las actividades organizadas por otras empresas e instituciones,
sino que es solo acerca de Fascination. Usted puede cambiar el nombre de la sección por Actividades
de Fascination.
1. Navegue hasta Contenido | Gestor de Categorías y haga clic en el título de la sección Actividades
para abrirla y editarla.
2. En la pantalla de edición, cambie el título a Actividades de Fascination.
3. En el campo Alias, quite el alias existente (recuerde, el alias es el nombre interno de Joomla para
el artículo que se utiliza al crear URL amigables). Deje este cuadro en blanco; Joomla lo llenará con
actividades de Fascination cuando guarde los cambios. Puede comprobarlo ahora haciendo clic en
Guardar. Se dará cuenta que el cuadro Alias se llenará automáticamente.
4. Haga clic en Cerrar. En el Gestor de Categoría se muestran el nuevo título y el alias.
Al cambiar el nombre de la categoría, todas las referencias internas de Joomla al nombre se
actualizan automáticamente. Todos los artículos en la categoría renombrada reflejarán los cambios
realizados. Por ejemplo, en el Gestor de artículos todos los elementos que pertenecían a la categoría
Actividades se actualizan ahora para mostrar que están en la categoría Actividades de Fascination.
No hay trabajo manual aquí, y lo más importante es que no se pierde nada.
Mundo real
Nombre y renombre
El uso de etiquetas apropiadas, cortas y descriptivas para las categorías (y para los enlaces
del menú a las que apuntan) es esencial. Después de todo, estas son las palabras que guían
a los usuarios a los contenidos que usted desea que descubran. Es una buena idea modificar
estas etiquetas hasta que esté completamente de acuerdo con ellas. Al cambiar los nombres
de las categorías, es posible que también desee cambiar las etiquetas de enlace de menú, ya
que estas no se cambian automáticamente con el nombre de la categoría. Trate de encontrar
etiquetas cortas y apropiadas para los enlaces del menú. Para cambiar las etiquetas de los
enlaces de menú, vaya al Main Menu, seleccione cualquiera de los elementos del menú y
cambie lo que está en el campo Título (tal como Actividades).
TIP
Al cambiar Títulos (de categorías o elementos de enlace de menú), asegúrese

de borrar el contenido del cuadro Alias. Joomla creará automáticamente un
Alias para el nuevo título.
5.6.1 Cambiar las configuraciones de la categoría
Ya ha creado una gran cantidad de categorías sin alterar ninguna de las configuraciones
predeterminadas; sin embargo, en algunos casos es posible que desee tener más control sobre los
detalles de la categoría. En la siguiente tabla puede ver las opciones que están disponibles en la
pantalla Gestor de Categoría: Editar una categoría de artículos / Añadir una nueva Categoría de
Categoría.
La pantalla se divide en cuatro secciones principales, accesibles a través de fichas: Categoría,

Publicación, Permisos y Opciones. Estas pantallas le permiten ingresar más detalles sobre los
contenidos de la categoría (mediante la adición de una descripción), para determinar si una categoría
es visible o no para grupos de usuarios específicos, y así sucesivamente.
Vamos a echar un vistazo a las opciones que están disponibles al crear o editar una categoría.
Añadir o editar categorías: un resumen de los ajustes

El título de la categoría tal como se va a mostrar. Puede usar minúsculas,
Título
mayúsculas y espacios.
Alias Deje en blanco el cuadro Alias, que es el nombre interno del elemento.
Al guardar la categoría, Joomla llenará automáticamente su nombre en minúsculas
sin espacios ni caracteres especiales. Si el Título es Sobre Fascination, el alias
será sobre-fascination. El Alias se muestra en la URL de la página (www.ejemplo.
com/sobre-fascination.html) cuando use URL amigables para los motores de Joomla.
En el área de edición de texto Descripción, puede introducir y dar formato a un texto

descriptivo breve ingresando el tema de la categoría.
Las descripciones de la categoría se pueden visualizar en la parte superior de

las páginas que muestran los contenidos de la categoría (una vez proporcionada
la Descripción de la Categoría, en la ficha Categoría, el cuadro desplegable
Descripción Descripción de la categoría se coloca en Mostrar, para el enlace del menú que
apunta a esa página resumen de categoría).
Seleccione la categoría a la que va a pertenecer esta categoría. Seleccione Sin

Categoría raíz
principal, si se trata de una categoría de primer nivel o raíz.
Asigne etiquetas a los elementos del contenido. Los nombres de etiquetas deben
Etiquetas
ser únicos.
El estado puede ser:
}}Publicado, es decir, visible en la parte frontal del sitio.

}}Despublicado, es decir, no visible en el sitio pero sí en el backend.
}}Archivado, es decir, movido al archivo. Puede hacer que artículos y categorías
Estado archivadas sean visibles con un enlace especial al menú.
}}Movido a la papelera.
Las categorías despublicadas pueden ser útiles cuando su sitio se encuentra activo
y está preparando una nueva categoría. Con esta opción, los visitantes del sitio no
sabrán que la categoría está allí hasta que la publique.
Al elegir la configuración de Acceso apropiada, controla quién tiene acceso a esta

categoría.
}}Todos los usuarios (Público)

}}Los usuarios registrados (Registered)
}}Los usuarios con derechos especiales (Special)
}}Los invitados (Guest)
Acceso
}}Usted (Super User)
El valor predeterminado Público, deberá estar bien. Cuando empiece a trabajar con
diferentes tipos de usuarios en su sitio, puede cambiar estos ajustes (consulte el
capítulo 8, en los niveles de acceso de usuario).
También puede crear niveles de acceso personalizados.
Si tiene un sitio multilingüe, este cuadro de lista desplegable le permite seleccionar

Idioma
el idioma para esta categoría.
Esta característica puede llegar a ser muy útil: en el campo Nota, puede agregar
notas para sí mismo o para otras personas que tienen acceso al servidor. Por
Nota
ejemplo, puede describir el propósito de la categoría («Nueva categoría genérica en
las actividades de la empresa»).
La ficha Publicación
Fecha de creación La fecha en que se ha creado la categoría.
Creado por Seleccione el usuario que se muestra como autor de esta categoría.
Fecha de modificación La fecha en que se ha modificado la categoría.
Modificado por El usuario que la ha modificado.
Veces visto Número de impresiones para esta categoría.
ID Número de registro en la base de datos.
Es un párrafo adicional para usarse a modo de descripción de la página en la salida

HTML. Se mostrará generalmente en los resultados de los motores de búsqueda.
Los metadatos se añaden al código fuente del documento HTML. Es la información
Metadescripción
que no se muestra en la página web, pero que los motores de búsqueda procesan.
Los metadatos para una categoría anulan a los metadatos globales o a los del
elemento de menú.
Es una lista de palabras clave o frases, separadas por una coma, a usarse en la
salida HTML. No todos los motores de búsqueda utilizan metapalabras clave para
Metapalabras clave
indexar contenido, pero la metadescripción es ciertamente importante. Por ejemplo,
Google utiliza las páginas de resultados para describir el contenido de la página.
Es el autor de este contenido. Agregue un metautor para hacer posible que los
Autor
motores de búsqueda muestren el autor del documento.
Instrucciones para los robots. La etiqueta metarrobots se utiliza para indicar si los
Robots
motores de búsqueda deben indexar los contenidos de esta categoría o no.
La ficha Opciones
Es una poderosa característica que le permite seleccionar una presentación
personalizada para la categoría actual, siempre que la plantilla seleccionada (o
componente) permita estas opciones adicionales de presentación. Una plantilla
Presentación alternativa puede contener las llamadas modificaciones de la plantilla, presentaciones
personalizadas que modifican las presentaciones predeterminadas de las
categorías de Joomla. Puede encontrar más información en http://tinyurl.com/
jlayouts.
Imagen Esta opción afecta la manera en que se muestran las páginas generales de
contenido de la categoría. En la parte superior de estas páginas puede mostrar
una imagen y una breve descripción. Aquí puede seleccionar la imagen que se
mostrará con esa descripción; sin embargo, también puede optar por insertar una
imagen en la descripción de sí mismo, como se muestra en la página anterior en
el ejemplo bajo Descripción
La ficha Permisos
La ficha Permisos le permite determinar lo que a los diferentes grupos de

Pública, Huésped, y así usuarios se les permite trabajar con esta categoría. Un ejemplo es que se puede
sucesivamente determinar qué grupos de usuarios pueden editar o crear contenido en esta
categoría. Puede leer más acerca de los permisos en el capítulo 8.
5.7 Construir un sitio sin usar categorías

Al organizar el contenido de su sitio podrá terminar con artículos que no pertenecen a ninguna categoría.
Estos los puede agregar como artículos no categorizados. Por lo general, los artículos no categorizados
contienen contenido estático, como una página Acerca de nosotros o alguna información legal; sin
embargo, también puede optar por construir su sitio web utilizando solo artículos sin categorizar.
A veces, las potentes capacidades de organización de sitios de varios niveles de Joomla son simplemente
demasiado. Sitios muy pequeños (sitios de brochure) de unas cinco a diez páginas, sin niveles de página
secundarias, pueden constar de únicamente artículos no categorizados.
Digamos que su profesora de yoga local le pide desarrollar un sitio web. Ella probablemente no
necesitará mucho más contenido que el mostrado en el siguiente diagrama:
En este caso, no hay capas de contenido por debajo del nivel de enlace del menú. Probablemente
habrá cinco enlaces del menú: Inicio, Acerca de Yoga, Acerca de mí, Horarios de clase, y Contactos.
Tres de ellos apuntarán a un artículo (Acerca de Yoga, Acerca de mí, y Horarios de clase). La página
Contacto también podría ser un artículo sencillo, pero vamos a suponer que esta es, como hemos
visto antes, un formulario de contacto generado por el componente Contactos de Joomla. Así es como
podríamos traducir el mapa del sitio anterior en términos de Joomla:
Las cajas con contorno de puntos grises representan artículos no categorizados; la caja con un fondo
gris representa una página de funcionalidad especial (en este caso un formulario de Contacto).
Esta misma estructura simple de un nivel será adecuada para todo tipo de sitios pequeños con un tema
específico, es decir, un sitio de portafolio para una empresa de una sola persona o un sitio de eventos.
Una empresa editorial tendrá una estructura de sitio Joomla similar al siguiente:
Para un sitio de eventos como un congreso o seminario, una estructura como la que se muestra en el
siguiente diagrama estaría bien:
Aunque dejará intacta gran parte de la funcionalidad integrada para la gestión de los sitios grandes y
ricos en contenido, todavía vale la pena utilizar Joomla para sitios como estos. Todas las otras ventajas
de Joomla todavía se mantienen, como la capacidad de agregar cualquier funcionalidad adicional que
desee. Si su cliente desea un formulario de registro para su sitio de seminario o una galería de fotos
para su sitio de portafolio, puede agregarlos utilizando las extensiones de Joomla. Por supuesto, su
cliente podrá administrar y actualizar contenido fácilmente.
La creación de un sitio pequeño, como en los ejemplos mostrados anteriormente, significa que usted
se salta algunos pasos, ya que no hay necesidad de crear ninguna categoría. Estas son las acciones que
va a realizar:
1. Crear las páginas de contenido no categorizados (artículos) que necesita.

2. Agregar enlaces de menú al Main Menú. En este caso, enlazará directamente a los artículos en vez
de a las categorías.
Pongamos como ejemplo un sitio de tres páginas sobre la base de una instalación limpia de Joomla
(sin datos de ejemplo). La creación de la configuración básica de un sitio pequeño como este le tomará
solo unos minutos.
En este ejemplo, en nuestro nuevo

y vacío sitio Joomla, hemos creado
cuatro artículos no categorizados. A
todos ellos los hemos puesto para
mostrarse en la página principal
como Artículos Destacados.
Para cada uno de estos artículos

hemos agregado un enlace
del menú en el Main Menu
(mediante Menús | Main Menu
| Añadir nuevo elemento del
menú).
Esto es lo que ve el visitante.

El Main Menu contiene cua-tro
enlaces a artículos. La Página
principal muestra los textos de
introducción de los artículos con
enlaces Leer más.
Cuando el usuario hace clic en

un enlace, se muestra el artículo
completo.
Eso es todo al configurar un pequeño sitio web de un nivel en Joomla. Escriba algunos artículos y cree
enlaces que apunten a ellos. Después de hacerlo, puede centrarse en los extras que desee agregar (vea
el capítulo 9, sobre la extensión de Joomla) y en el diseño (vea el capítulo 10).
TIP
Reducir el tamaño de la página principal
Para un sitio muy pequeño, puede construir la página principal predeterminada

usando el sistema de Artículos Destacados de Joomla. Seleccione algunos
artículos para mostrar (totalmente o solo como textos de introducción)
en la página principal. Es posible que desee algo más simple para este tipo
de sitio. Así, puede mostrar un solo artículo en particular como su propio y
personalizado contenido de la página principal. Podrá leer más acerca de este
enfoque en el capítulo 6, en las opciones de visualización de la página principal.
Mundo real
Organice un sitio
Imagine que le han solicitado la construcción de un sitio web informativo para una pequeña
empresa. ¿Cómo hacerlo? Piense en lo que quiere lograr, desarrolle un esquema de las
categorías principales y secundarias, y transforme este esquema para Joomla. ¿Cuáles serían
sus principales categorías y subcategorías? ¿Dónde poner los artículos no categorizados?
Y ¿qué hay de la creación de un sitio web pequeño para usted mismo? Usando las habilidades
de estructuración de los sitios que ha adquirido en este capítulo, siga adelante y cree una gran
estructura que sea a la vez realizable en Joomla y atractiva para sus visitantes.
Cap.
C r e a r c o n te n i d o d e
calidad: Agregar y
6
editar artículos
CAP. 6: C rear contenido de calidad : Agregar y editar artículos 125
Una vez que haya creado una estructura de categorías y subcategorías, las cosas pueden moverse muy
rápido. No hay nada que le impida crear un sitio rico en contenido si desea agregar una docena, cientos
o incluso miles de páginas. En este capítulo, nos centraremos en la adición y edición de artículos, que es
el tipo de contenido esencial para la mayoría de los sitios. Más adelante, es posible que desee agregar
otros tipos de contenido (como galerías de imágenes o foros); vamos a tratar esto en el capítulo 9.
Al crear el sitio de ejemplo en el capítulo 4, ya ha visto cómo puede crear un nuevo artículo con
la configuración predeterminada. Ha dejado solos a todos los botones y parámetros de función
adicionales. Pero en la vida real, probablemente quiera más control. Quiere asegurar que su contenido
se vea muy bien, agregar imágenes y especificar exactamente cómo mostrar las cosas y qué detalles
mostrar. Joomla le permite editar los artículos y ajustar la configuración para satisfacer sus necesidades
con exactitud.
En este capítulo usted aprenderá a crear, editar y formatear artículos; dividir un artículo en texto de
introducción y texto del cuerpo; trabajar artículos largos dividiéndolos en una serie de páginas; y
ajustar la configuración general del artículo.
Puede verse tentado a pensar que un artículo es lo mismo que una página. Estrictamente no lo es,
debido a que Joomla no piensa en términos de páginas, sino que considera que cualquier página
web es construida a partir de numerosas bases de datos o elementos conducidos, y casi cualquier
combinación de esos elementos puede aparecer en el navegador del visitante como una página web.
Aunque en Joomla un artículo sin duda estará en el centro de una página de contenido, hay grandes
posibilidades de que sea mucho más que esa página. En los artículos habrá todo tipo de contenido
dinámico. En aras de la simplicidad, en adelante solo usaremos de vez en cuando la palabra página (o
página de contenido) para los artículos.
6.1 Crear y editar artículos: Más allá de los conceptos básicos

En los últimos capítulos ha agregado y editado artículos. Recapitulemos los pasos a seguir:
}}Para crear un nuevo artículo, vaya a Contenido | Gestor de artículos y haga clic en Nuevo. Como
alternativa, utilice el método abreviado de menú Contenido | Gestor de artículos | Agregar nuevo
artículo.
Cualquiera de estos dos métodos abrirá la pantalla Gestor de artículos: Añadir un nuevo artículo.
}}Para editar un artículo existente, vaya a Contenido | Gestor de artículos. Seleccione el artículo
(seleccione la casilla de verificación del lado izquierdo del título del artículo) y haga clic en el botón
Editar en la barra de herramientas. También hay disponible un acceso directo, solo haga clic en el
título del artículo para abrirlo en la pantalla Gestor de artículos: Editar un artículo.
Aparte de los títulos de la pantalla, las pantallas Añadir un nuevo artículo y Editar un artículo son
idénticas. Ya que está familiarizado con algunas de las funciones más importantes, en este capítulo
iremos a secciones aún no exploradas.
La pantalla Editor de artículos se muestra en la siguiente captura:
La pantalla del Editor de artículos consta de cuatro secciones.
1. Los botones de la barra de herramientas, que le permiten grabar el artículo o cancelar los cambios.
2. Sobre el texto del artículo agregue el Título y deje que Joomla genere automáticamente el alias.
3. L a parte superior de la pantalla contiene seis fichas. Al hacer clic en cualquiera de estas se muestra
una pantalla en la que puede definir opciones específicas.
}}Contenido, que contiene al Editor de Textos.
}}Publicación, Opciones de imágenes y enlaces y Opciones, le permiten configurar el artículo para
que aparezca y se comporte de la manera que usted necesita.
}}Opciones de la pantalla de edición es una característica avanzada que le permite personalizar
la apariencia de la pantalla de edición del artículo, en especial para los usuarios que tienen
permisos para editarlo. Puede especificar qué opciones del artículo deben estar disponibles en
la pantalla de edición.
}}A través de la ficha Permisos puede establecer autorizaciones para grupos de usuarios al nivel
de este artículo específico. Usando la configuración de permisos puede controlar qué grupos de
usuarios específicos pueden o no ver este artículo, o si se les permite editarlo. Aprenderá más
acerca de los permisos en el capítulo 8.
4. El Editor de textos propiamente dicho, que le ofrece una sencilla interfaz del tipo procesador de
textos para ingresar y dar formato al texto. En la parte derecha, seleccione la Categoría apropiada,
el Estado publicado o no, o si debe ser un artículo destacado.
Debajo de la pantalla del editor, hay cuatro botones:
a. Artículo: Le permite agregar enlaces a otros artículos que se encuentran en el sitio web.
b. Imagen: Permite agregar imágenes que se mostrarán al comienzo del artículo.
c. Salto de página: Fuerza una siguiente página.

d. Leer más: Permite el ingreso de un texto de introducción.
Ahora, vamos a explorar el poder del editor de artículos de Joomla. Vamos a averiguar cómo podemos
modificar los artículos para conseguir que se muestren tal y como queremos.
TIP
Por lo general, en la pantalla Añadir nuevo artículo tiene que

seleccionar la categoría a la cual pertenece. Cuando se añade
una serie de artículos en la misma categoría, se puede establecer
una más específica que se encuentre ya seleccionada cuando se
abra la pantalla Añadir un nuevo artículo. Para ello, en la pantalla
Gestor de artículos: Artículos, seleccione la categoría deseada
en el filtro: Seleccionar Categoría. Ahora bien, esta categoría
será la predeterminada al hacer clic en Nuevo para crear un
nuevo artículo.
6.2 Hacer que sus palabras se vean bien: Formatear el texto del artículo
Su cliente Fascination quiere agregar un nuevo contenido a su sitio, que explique las bondades y
características de un nuevo producto que van a sacar al mercado. Le han enviado un archivo de texto
y le han pedido que convierta el contenido en una página nueva. ¿Por favor, puede crear un nuevo
artículo y que se vea bien?
Ejercicio 1: Agregar un estilo al texto del artículo
Vamos a crear un nuevo artículo y ver cómo podemos formatearlo adecuadamente.
1. Navegue hasta Contenido | Gestor de artículos y haga clic en Nuevo.

2. En el cuadro Título, escriba Nuevas medias Panty. Este es el tipo de contenido que se adapta
a la categoría Nuevos productos, así que vamos a seleccionar categoría principal Ventas y la
subcategoría Nuevos productos.
3. De forma predeterminada, el campo Estado está ajustado en Publicado. Vamos a ponerlo en

Despublicado. De esta manera, el artículo permanecerá invisible para los visitantes de su sitio
hasta que haya terminado con él y lo publique.
4. No queremos que este artículo aparezca en nuestra página principal, así que dejamos Destacado
en No.
5. En la pantalla del editor de texto, agregue un poco de texto al artículo. Si desea copiar contenido
desde un documento de procesador de textos, primero quítele todo el formato. De esa manera,
evita que etiquetas invisibles del procesador echen a perder el texto de su artículo. Para ello, abra
la aplicación Bloc de notas en su PC y pegue el texto desde el procesador de textos al documento
del Bloc de notas. Esto le dará un archivo de solo texto limpio que se puede copiar y pegar en la
ventana del editor de Joomla. Haga clic derecho y seleccione Pegar en el menú emergente.
6. En este ejemplo hemos agregado cinco párrafos: un texto introductorio y cuatro párrafos separados.
Escriba un subtítulo por encima de cada uno de los cuatro párrafos. En el ejemplo hemos utilizado
los subtítulos Antecedentes, Descripción, Especificaciones técnicas y Público objetivo.
7. Vamos a utilizar las herramientas del editor de texto para cambiar el formato de los elementos
del texto. Coloque el cursor en cualquier lugar de la línea que contiene el subtítulo Antecedentes.
Haga clic en el cuadro desplegable Formato (muestra el formato Paragraph por defecto), y elija el
formato predefinido Header 3, tal como se muestra en la siguiente captura de pantalla:
En la captura de pantalla anterior, el formato Header 3 se está aplicando al subtítulo de un artículo.

Como los títulos del artículo principal en Joomla por lo general tienen un formato Header 2, el formato
Header 3 se ajusta para el siguiente nivel (los subtítulos dentro de un artículo).
TIP
¿Quiere más control del formato?
El estilo de fuente del encabezado se establece ahora en el formato Header 3. En
realidad, la apariencia depende de la hoja de estilos CSS de la plantilla que está
utilizando. En la plantilla predeterminada de Joomla que estamos usando, el estilo
Header 3 es pre formateado como una fuente Open sans de color azul. Cuando
instale una plantilla diferente, sus títulos y el resto de diseño CSS definidas se verán
completamente distintas.
Y si realmente quiere ser creativo y hacer una bonita presentación del artículo, querrá
cambiar los estilos de la plantilla CSS usted mismo y adaptarlos a sus necesidades. No
se preocupe, vamos a llegar a los detalles de las plantillas y el estilo en el capítulo 10.
8. Seleccione los otros tres subtítulos y aplíqueles también el estilo Header 3. Cuando haya terminado
de formatear el texto haga clic en Guardar y cerrar.
TIP
Esta pantalla del Editor de artículos le da una idea aproximada de

cómo se verá el artículo, pero no es una previsualización fiable de
este; en el frontend, las fuentes utilizadas y la presentación general
pueden ser muy diferentes debido a los estilos CSS específicos de la
plantilla. Esto significa que siempre debe comprobar el aspecto del
artículo navegando el frontend del sitio tan pronto como el artículo
haya sido publicado. Para tener esta vista previa disponible durante
la edición de un artículo, es una buena idea abrir el frontend en una
nueva ficha del navegador, y cambiar entre las ventanas de las dos-
fichas del navegador utilizando la combinación de teclas Ctrl + Tab.
Más adelante podrá ver cómo funciona, después que haya agregado
un enlace del menú para el artículo actual y establecido el estado del
artículo como Publicado.
Ha creado un nuevo artículo en la categoría Ventas, y formateado un texto usando la interfaz del editor
de texto. Mientras lo prepara, puede establecer que sea invisible (no publicado); más tarde, publicará
el texto terminado con un solo clic.
Mundo real
Cambiar el formato
Siéntase libre de abrir el artículo que acaba de crear y explorar las distintas opciones de
formato de texto. Eche un vistazo a la forma de aplicar la sangría, listas con viñetas, etc. Es
posible que desee seleccionar el primer párrafo y aplicar un estilo audaz para lograr que se
destaque como el párrafo principal. La aplicación de estilos al texto seleccionado funciona,
como era de esperar, igual que el software de procesamiento de textos. Utilice la tecla Enter
para iniciar un nuevo párrafo; use Shift + Enter para iniciar una nueva línea (pero no un nuevo
párrafo).
Asegúrese de revisar el botón Cambiar Editor. Al hacer clic, este cambia a un editor de texto
plano que muestra el código HTML del artículo.
Esto puede ser especialmente útil si usted conoce algo de HTML, ya que tal vez desee editar
directamente el código HTML o comprobar si hay etiquetas no deseadas. Puede volver a la vista Lo que
ves es lo que obtienes (WYSIWYG), haciendo clic otra vez en el botón Cambiar editor.
TIP
Extender el editor de texto
Joomla viene instalado con el editor de texto que acaba de usar. En realidad, es una
extensión llamada TinyMCE. Si a usted le interesa tener algunos controles avanzados de
edición de texto, puede establecer + TinyMCE a su vista Extendida. Simplemente vaya a
Extensiones | Gestor de Plugins y haga clic en Editor- TinyMCE para editar la configuración.
Seleccione Funcionabilidad: Extendido. Esto agregará algunos botones útiles a la pantalla

del editor, como Insertar Tabla y un botón Insertar emoticonos que le permitirá agregar
elementos que no están en la versión predeterminada. La barra de herramientas del editor
de textos ampliado tiene una apariencia similar a la siguiente captura de pantalla:
Si encuentra que las capacidades de Tiny MCE son demasiado limitadas, puede sustituirlo
fácilmente por otro editor de texto (gratuito). Uno muy popular es el Editor de Contenido
Joomla (JCE). Podrá leer más acerca de la sustitución del editor de texto predeterminado
en el capítulo 9.
6.3 Agregar imágenes a los artículos

Acaba de crear una página de texto sobre algunos productos de la empresa Fascination. Eso no es
realmente lo que hace que sus visitantes visualmente orientados se motiven. Vamos a mostrarles un
mejor aspecto agregando algunas imágenes.
Imagine que le han enviado algunos archivos de imagen por correo y los ha copiado en el disco duro.
TIP
Antes de subir las imágenes, asegúrese de que estén redimensionadas

al tamaño apropiado para usarse en su página web. No es una buena
idea subir una imagen grande y redimensionarla en la pantalla del
editor, debido a que la carga de archivos de imagen ralentizará
considerablemente la pantalla de la página web en el navegador. Por
otra parte, Joomla no tiene capacidades de edición de imágenes, por
lo que no puede cambiar las dimensiones de la imagen o recortar
las imágenes una vez que se cargan. Para cambiar el tamaño de las
imágenes, utilice un software de edición de imagen (como Photoshop
o GIMP) o use una sencilla herramienta de cambio de tamaño en
línea, como http://www.picresiz.com. Busque formatos de imagen
web para encontrar más información y tutoriales sobre los mejores
formatos de imagen y tamaños de imagen para su uso en la web.
Ejercicio 2: Subir imágenes

Para agregar imágenes a un artículo, vamos a usar primero el Gestor multimedia de Joomla, y así
subriremos los archivos de las imágenes al servidor web.
1. Navegue hasta Contenido | Gestor Multimedia. El Gestor Multimedia muestra los archivos
disponibles en la carpeta predeterminada llamada Images.
2. Vamos a crear una carpeta específica para los archivos que queremos agregar. Haga clic en el botón
Crear una carpeta nueva. Aparece un campo de texto donde podrá escribir el nombre de la nueva
subcarpeta. En este ejemplo hemos ingresado productos. Ahora haga clic en el segundo botón
Crear carpeta.
3. Haga clic en el icono de la nueva carpeta productos.
4. Se le mostrará una carpeta vacía. Agregue una nueva imagen haciendo clic en el botón Subir en la
barra de herramientas.
5. Haga clic en el botón Examinar en el lado derecho del cuadro de texto Subir archivo, seleccione
unas cinco imágenes desde el disco duro de su computadora, haga clic en Abrir y a continuación
haga clic en Iniciar subida.
6. Aparece un mensaje que indica que la subida se ha completado. La sección Archivos del Gestor
Multimedia muestra miniaturas de las imágenes subidas, de la siguiente forma:
Usted ha cargado un conjunto de imágenes listas para ser insertadas en cualquier artículo. De forma
predeterminada, el Gestor multimedia de Joomla busca las imágenes que están presentes en la
carpeta Images, dentro de la carpeta del servidor web en la que Joomla ha sido instalado. Sin embargo,
Joomla no muestra el nombre Images cuando explora el Gestor Multimedia, sino que solo muestra las
imágenes y una lista de subcarpetas. Al crear nuevas subcarpetas en el Gestor Multimedia, en realidad
se agregan subcarpetas a la carpeta raíz Images.
Es una buena idea crear subcarpetas si desea mantener diferentes grupos de imágenes organizadas
(por ejemplo productos, eventos, fascination y reuniones). De esta manera, no terminará con todos los
archivos de imágenes apilados en una gran carpeta predeterminada de imágenes.
TIP
Si desea utilizar otra carpeta como directorio base predeterminado,

vaya a Contenido | Gestor Multimedia y haga clic en Opciones
(está al lado derecho). En la ficha Componentes, cambie la Ruta al
directorio de imágenes. Por ejemplo, si escribe /images/productos
como la ruta predeterminada, hará que Joomla busque en esta
carpeta al insertar las imágenes del artículo.
Ejercicio 3: Insertar y alinear las imágenes

Ahora vamos a insertar las imágenes que acaba de subir en el texto del artículo.
1. Vaya a Contenido | Gestor de Artículos y abra el artículo Nuevas medias Panty para editarlo,
haciendo clic en el título del artículo.
2. Vamos a colocar una imagen en cada uno de los párrafos del artículo. Coloque el cursor al inicio del
primer párrafo bajo el texto de introducción, justo después del primer subtítulo.
3. Haga clic en el botón Imagen en la parte inferior de la pantalla del editor de texto.
4. Una pantalla emergente se abre mostrando el contenido del directorio raíz Images. Seleccione la
subcarpeta correspondiente haciendo clic en el ícono de la carpeta Productos.
5. Seleccione la imagen que desea insertar. Joomla agrega automáticamente la ruta a la imagen en el
campo URL de la imagen.
6. Desplácese hacia abajo en la ventana emergente para agregar los otros detalles pertinentes de la
siguiente manera:
}}En el cuadro Descripción de la imagen, escriba una descripción. Este texto no se muestra, pero
informa a los motores de búsqueda de qué se trata la imagen. También se mostrará cuando el
visitante use un navegador web no visual.
}}En el cuadro Título de la imagen, ingrese un título. Esto se muestra solo cuando el visitante
de la web pasa el puntero del mouse sobre la imagen. Seleccione Sí en el cuadro desplegable
Subtítulo, solo si usted quiere que Joomla visualice el texto del título como un subtítulo justo
debajo de la imagen.
}}En el cuadro desplegable Alineación, puede elegir cómo la imagen se alineará, ya sea a la
izquierda, a la derecha o centrado. Vamos a seleccionar Izquierda para la primera imagen. En la
siguiente pantalla puede ver los efectos de la alineación a la derecha e izquierda de las imágenes.
7. Cuando haya terminado, haga clic en Insertar, en la esquina superior derecha de la pantalla
emergente para cerrarla y agregar la imagen al artículo.
8. Coloque el cursor en el párrafo siguiente y repita los pasos 4 a 6. Haga esto hasta que todos los
párrafos del texto en el cuerpo del artículo contengan una imagen.
9. La pantalla del Editor de Textos muestra más o menos el aspecto del texto del artículo, lo que
está bien para obtener una primera impresión de la salida. En el siguiente ejemplo, algunos están
alineados a la derecha en relación con el texto, mientras que otros se alinean a izquierda.
10. Como el artículo está listo para su presentación, vamos a mostrarlo en el frontend del sitio. En
primer lugar, asegúrese que el Estado del artículo se establezca en Publicado. Ahora, agregue un
enlace del menú a la categoría Ventas para que su contenido (aunque eso es solo en este artículo)
sea visible. Como ya sabe por anteriores capítulos, vaya a Menús | Main Menu | Añadir nuevo
elemento del menú, seleccione Mostrar una categoría en formato blog como el Tipo de elemento
del menú, seleccione la categoría Ventas, agregue un Título de menú (es decir, Nuevos productos)
y guarde el enlace del menú. Eso es todo, ahora se puede ver la salida del artículo sobre el frontend
haciendo clic en el enlace del menú Nuevos productos.
La adición de imágenes a los artículos es un proceso bastante sencillo. Usted sube los archivos de
imagen que desee y usa el botón Imagen para indicarle a Joomla dónde desea que se muestren.
Mundo real
Ajuste las configuraciones de la imagen
Después de haber insertado una imagen, es posible que desee ajustar la configuración de
pantalla. Para crear un poco de espacio entre las imágenes y el texto que lo rodea, haga clic en
el icono Insertar/editar imagen en la barra de herramientas del Editor de textos.
Haga clic en la ficha Avanzado. Ahora puede establecer un valor para el Espacio vertical o para el
Espacio horizontal (en píxeles). Esto creará un poco de espacio en blanco alrededor de la imagen,
haciendo un margen del texto del artículo. Haga clic en Ok para aplicar los cambios.
Nota El botón Insertar/editar imagen en el editor predeterminado (llamado

TinyMCE) no es realmente adecuado para la inserción de imágenes.
Después de hacer clic en este botón, no puede buscar el archivo de la
imagen, tiene que saber su ubicación exacta (URL). Es por eso que hay un
botón Imagen separado por debajo de la pantalla del editor de texto que está
mejor equipado para la inserción de imágenes.
Cuando desee subir imágenes y crear nuevas carpetas, el Gestor Multimedia

hará el trabajo; sin embargo, tiene algunas limitaciones. Aunque puede agregar
y eliminar archivos, no se puede mover de una carpeta a otra. Debido a esto,
muchos usuarios de Joomla prefieren utilizar un programa FTP para subir archivos
y gestionar las carpetas multimedia en el servidor web. También hay muchas
extensiones disponibles que mejoran las capacidades de gestión de imágenes
de Joomla. El Editor de contenido de Joomla (vea el capítulo 9) es un poderoso
reemplazo para el editor de texto predeterminado, lo que también hace que la
carga y la inserción de imágenes sea mucho más fácil.
6.4 Cambiar el modo en que se muestra el artículo

La pantalla del «Editor de artículos» le da mucho más poder que solo dar formato al texto y agregar
imágenes. También puede controlar cómo se debe mostrar el artículo: como un artículo individual
dividido en dos partes, o incluso dividir en tantas partes (subpáginas) como quiera. Vamos a ver cómo
podemos mejorar los artículos con estas opciones.
6.4.1 Dividir un artículo en un texto de introducción y un texto principal
Hasta ahora, no hemos agregado ninguna instrucción en nuestro artículo para cambiar la forma
en que se muestra. Vamos a echar un vistazo al frontend para ver cómo se muestra de manera
predeterminada. Para ver otra vez cómo se muestra nuestro nuevo artículo en el frontend, en el
Main menu del frontend, haga clic en el enlace Nuevas medias Panty.
Al principio de este capítulo ha creado un enlace con la categoría Nuevos productos. Como se habrá
dado cuenta (haga clic sobre el enlace Nuevas medias Panty para comprobar esto de nuevo si lo
desea), el artículo completo de cinco párrafos se presenta sobre la página de resumen de la categoría
Nuevos productos. Así no es como queremos que se visualice nuestro artículo. Si tuviéramos que
agregar más artículos a esta misma categoría, todos ellos serían mostrados completamente en una
página de resumen enorme de tipo Blog de Categoría. Para hacer que Joomla muestre aquí solo un
breve texto resumen, vamos a dividir el artículo separando el texto de introducción y el texto del
cuerpo del artículo completo.
Ejercicio 4: Crear un texto de introducción

En los artículos que ha creado en los capítulos anteriores ha visto que es bueno agregar un texto de
introducción separado a un artículo. Si no lo hace, el artículo solo se podrá mostrar por completo en
páginas de resumen como el de categorías que acaba de ver. Vamos a arreglar las cosas añadiendo un
texto de introducción a nuestro nuevo artículo.
1. Vaya a Contenido | Gestor de Artículos y abra el artículo que acaba de crear (Nuevas medias
Panty) para editarlo.
2. En la pantalla del editor de texto puede agregar una nueva primera línea. En este ejemplo hemos
ingresado Características del nuevo diseño de medias Panty.
3. Coloque el cursor justo después de esta primera línea para indicar que desea que Joomla divida
aquí el artículo y cree un enlace Leer Más para que señale el artículo completo. Haga clic en el
botón Leer más en la parte inferior de la pantalla del editor. Aparece una línea de puntos de color
rojo, como se ve a continuación:
4. En la ficha Opciones, establezca Mostrar texto de Introducción en Ocultar. Esto significa que el
texto de introducción (el texto corto que acabamos de crear) se ocultará cuando se muestre el
artículo completo. Solo se mostrará en las páginas resumen.
5. Haga clic en Guardar y luego clic en Ver sitio para ver la salida en el frontend. Esto le llevará a la
página principal. En el Main menu, haga clic sobre el enlace Nuevos productos.
Ahora, en la página de resumen de categorías, solo aparecen el texto de introducción y el enlace Leer
más del nuevo artículo.
Mientras tengamos más artículos de la categoría, se agregarán más textos de resumen.
Se muestra el artículo completo de cinco párrafos (sin el texto de resumen) cuando el visitante hace
clic en el enlace Leer Más.
En principio, cualquier artículo en Joomla puede consistir de un texto continuo. Está bien crear este
tipo de textos cuando se escriben artículos cortos (piense en las entradas de un blog). En muchos
casos usted querrá dividir los artículos en un texto de introducción (un texto resumen, en términos
periodísticos) y el texto del cuerpo del artículo real, permitiendo que Joomla publique las dos partes en
páginas separadas. Al configurar que se oculte el texto de introducción, puede crear un texto resumen
que es diferente del texto de introducción que se muestra como parte de la página completa del
artículo.
6.5 Crear artículos de varias páginas

Suponga que tiene un artículo largo con varias secciones y cada una cubre un subtema. Muchas veces
es posible que el artículo sea demasiado largo para mostrarse completamente en una sola página. No
se ajusta a la pantalla de contenido y usted no desea que el visitante tenga que desplazarse demasiado.
Hay una tediosa solución a esto. Se trata de dividir manualmente el artículo creando varios artículos
cortos individuales. Pero por suerte, también hay una salida rápida. Mediante la adición de saltos
de página en un solo artículo, Joomla mostrará este único artículo en el frontend como una serie de
páginas separadas, agregando automáticamente los enlaces de navegación y una tabla de contenidos.
Ejercicio 5: Usar saltos de página para dividir un artículo

Supongamos que a su cliente no le gusta el artículo de una página sobre pinturas feas. En lugar de tener
un solo artículo con varios subtítulos, hubiera preferido ver un par de páginas cortas que expliquen las
cosas paso a paso. Para ello, vamos a editar el artículo existente.
1. Navegue hasta Contenido | Gestor de artículos y abra el artículo Nuevas medias Panty para
editarlo.
2. Seleccione las ubicaciones de salto de página. Aquí es donde Joomla dividirá el artículo en páginas
separadas. En este ejemplo, vamos a sustituir todos los subtítulos por un salto de página. Seleccione
el primer subtítulo (Antecedentes) y elimínelo. Ahora haga clic en el botón Salto de página en la
parte inferior de la pantalla del editor. Se muestra la siguiente pantalla emergente:
3. En la pantalla emergente, ingrese el Título de Página y el Alias Tabla de contenido:

}}Título de Página: Ingrese un título para la nueva página. En este caso, el texto del anterior
subtítulo, Antecedentes. Se mostrará al lado del título del artículo, separado por un guion –
Nuevas medias Panty - Antecedentes.
}}Tabla de contenido del Alias: Este es el texto del enlace que aparecerá en la tabla de contenidos
del artículo de varias páginas. El Alias y el título de la página pueden ser los mismos; sin embargo,
lo mejor es mantener el texto Alias lo más corto posible.
4. Haga clic en Insertar salto de página. La pantalla emergente se cierra y una línea de puntos de color
gris se inserta para indicar la ubicación del salto de página.
5. Repita los pasos 2 a 4 para cada salto de página que desee y guarde el artículo. Guarde y haga clic
en Ver sitio para echar un vistazo a los resultados del frontend. En el Main menu del frontend, haga
clic en Nuevas medias Panty y localice el texto de introducción del artículo Nuevas medias Panty.
Haga clic en el enlace Leer Más.
Ahora, en lugar de un artículo Joomla ha creado una serie de páginas de artículos relacionados entre sí.
La primera página que el visitante ve es la primera subpágina. Las páginas incluyen enlaces << Anterior
y Siguiente >> a la página anterior y siguiente; los Alias de la tabla de contenido que haya ingresado al
crear saltos de página ahora se muestran como hipervínculos en una tabla de contenidos, y aparecen
al lado derecho de cada sub página.
Joomla le permite agregar saltos de página para difundir el contenido de un artículo único a través
de múltiples páginas. Para permitir que el visitante se mueva hacia atrás y adelante, se agrega
automáticamente una tabla de contenido, y la navegación anterior y siguiente a los artículos de varias
páginas.
Trabajar con los saltos de página le da un nivel adicional de contenido por debajo del nivel de artículo.
Sin embargo, se puede asumir que los visitantes no quieren hacer clic en varios enlaces para leer un
artículo. Lo mejor es reservar la navegación de múltiples páginas para los artículos que se rompen
fácilmente en partes lógicas, como tutoriales paso a paso o páginas de portafolio que muestran
diferentes clientes y proyectos.
Mundo real
Utilice deslizadores y fichas
La versión actual de Joomla ofrece algunas nuevas y creativas maneras de poner una gran
cantidad de contenido en una sola página, sin que se muestre todo al mismo tiempo. Usted no
tiene que utilizar la técnica predeterminada (como se muestra en la sección anterior), donde
una página larga se divide en varias páginas separadas usando una tabla de contenido para
la navegación. En cambio, ahora puede optar por dividir los contenidos de la página, ya sea
utilizando controles deslizantes o fichas.
La página que hemos creado antes se puede dividir en cuatro paneles. Los paneles se deslizan hacia
afuera y se deslizan hacia adentro con un clic del mouse. Cuando el usuario hace clic en el título de
cualquiera de las secciones, solo se muestra el contenido de esa sección.
Esta técnica se conoce también como «acordeón». Para cambiar la presentación de los artículos que
utilizan saltos de página, vaya a Extensiones | Gestor de Plugins y haga clic en el título del plugin
Contenido: Salto de página. En Estilo de presentación, seleccione Deslizadores.
Guarde los cambios y compruebe la salida del artículo con los saltos de página que ha creado antes.
TIP
Solo puede elegir un estilo de presentación para todos los saltos

de página en el sitio. Esto significa que no puede tener fichas en un
artículo y deslizadores en otro. Si desea utilizar las páginas avanzadas
con fichas y los deslizadores (acordeones), hay muchas extensiones
de Joomla disponibles. En el capítulo 9, usted aprenderá cómo
instalarlos y aplicarlos.
6.6 Mostrar imágenes y enlaces con los artículos

Al editar o crear un artículo en Joomla, se dará cuenta que hay una ficha Opciones de imágenes
y enlaces encima de la pantalla principal del editor. Joomla ofrece estos campos a las imágenes y
enlaces para facilitar la creación de una serie de artículos que comparten el mismo estándar de diseño,
mostrando una imagen en la parte superior del artículo y/o presentando una serie de hipervínculos
por encima (o por debajo) del artículo. Aunque usted es libre de agregar imágenes e hipervínculos
al mismo texto del artículo, los campos de Imágenes y enlaces permiten un método infalible para
insertar imágenes y enlaces que aparecen en una posición fija.
La ventaja es que usted o sus colaboradores de contenido no tienen que asegurarse repetidamente que
otros inserten las imágenes en la ubicación apropiada del artículo, lo que puede conducir fácilmente
a errores. Agregando una imagen de introducción y configurando su alineación, todos los textos del
artículo de introducción compartirán la misma presentación. Lo mismo vale para los tres hipervínculos
que pueden agregar a través de Imágenes y enlaces; si quiere artículos que empiecen con uno o más
hipervínculos, puede introducirlos aquí. Ellos aparecerán como una lista de hipervínculos en la parte
superior o en la parte inferior del artículo.
Usted ya ha visto un primer ejemplo del uso de los campos Imágenes y enlaces en el capítulo 4. Ahora,
observemos de cerca cómo funciona esta característica.
Ejercicio 6: Agregar imágenes y enlaces a un artículo

Vamos a crear un nuevo artículo en la categoría Nuevos productos, para probar las posibilidades de la
característica Imágenes y enlaces.
1. En el backend, vaya a Contenido | Gestor de Artículo | Añadir nuevo artículo.

2. En el campo Título, escriba un Resumen de productos. En la lista desplegable Categoría, seleccione
Nuevos productos.
3. Ingrese algunos párrafos de texto de relleno. Inserte una división Leer más después del primer
párrafo, colocando el cursor en el inicio del segundo párrafo y haciendo clic en el botón Leer más.
4. El artículo básico está listo. Ahora, vamos a utilizar la característica Imágenes y enlaces. En primer
lugar, vamos a agregar la imagen de introducción. En la ficha Opciones de Imágenes y enlaces, haga
clic en el botón Seleccionar para la Imagen de Introducción. Aparecerá una pantalla emergente,
que le permitirá seleccionar o, en nuestro caso, subir y seleccionar imágenes.
5. Como todavía no hemos subido las imágenes adecuadas, lo haremos de inmediato. En la sección
Subir archivo de la ventana emergente, haga clic en Examinar. Seleccione dos imágenes de su
computadora. Si está utilizando las imágenes de ejemplo que figuran en este libro, suba foto_chica.
jpg y foto_grande.jpg. Haga clic en Abrir y luego haga clic en Iniciar subida.
Ambas imágenes están cargadas y aparecen sus miniaturas.
6. Haga clic en la miniatura foto_chica.jpg para seleccionarla y luego haga clic en Insertar.
Puede hacer clic en el pequeño icono del ojo para comprobar una vista previa de la imagen
seleccionada.
7. Es correcto dejar el ajuste Flotación de la imagen sin cambios (Usar el valor global). De esta manera,
se utilizará la configuración global (establecida a través de las opciones globales del artículo). La
imagen será alineada a la izquierda del texto del párrafo.
8. A continuación, agregue una Imagen para mostrar un artículo al completo. Haga clic en Seleccionar
para abrir una ventana emergente. Haga clic en foto_grande.jpg para seleccionarla y haga clic en
Insertar.
9. Los campos de Enlace le permiten agregar un máximo de tres hipervínculos que se colocarán por
encima o por debajo del texto del artículo. En los cuadros de texto para Enlace A, Enlace B, y Enlace
C, ingrese las URL a las que estos hipervínculos deberían apuntar. Para propósitos de prueba, puede
introducir cualquier URL aquí (por ejemplo, www.google.com).
10. Por último, agregue los textos del enlace que se mostrarán en la página web: Texto del Enlace A,
Texto del Enlace B y Texto del Enlace C. En este ejemplo, he ingresado Google, Hotmail y Facebook
respectivamente (y sus respectivas URL). Guarde el artículo.
Es hora de averiguar el aspecto de la salida. En el frontend, haga clic sobre el enlace Resumen de
productos en el menú principal. Esto le llevará a la página Resumen de la categoría Nuevos productos;
haga clic en Resumen de productos para mostrar su nuevo artículo.
Acaba de crear un artículo mediante la presentación normalizada que Joomla ofrece a través de los
campos Imágenes y enlaces. Se dará cuenta que la página resumen Nuevos productos muestra el
texto de introducción y la pequeña imagen de introducción que ha agregado al artículo. Al hacer clic
en el botón Leer más se revela la historia completa, incluyendo la imagen de tamaño completo y un
conjunto de enlaces, que aparecen encima del texto del artículo.
Mundo real
Modifique la presentación del artículo
Aunque el nuevo artículo se ve bien, la configuración predeterminada pueden no ser

adecuada para sus propósitos. Por ejemplo, puede parecer extraño comenzar un artículo con
una fila de hipervínculos que solo tiene sentido después que el visitante haya leído el texto
del artículo que lo acompaña. No se preocupe, es fácil cambiar la presentación del artículo
a través de sus opciones. Para saber cómo funciona, abra el artículo para editarlo y haga clic
en la ficha Opciones. Para cambiar la posición de los tres hipervínculos, desplácese hacia
abajo y seleccione Posición de los Enlaces: Abajo. También es posible que desee ocultar
algunos detalles de los artículos que se muestran por defecto: coloque Ocultar para Mostrar
la categoría, Mostrar Autor, Mostrar Fecha de publicación, Mostrar votaciones, Mostrar
ícono «Imprimir», y Mostrar ícono «Correo». Como resultado, la salida del artículo es clara y
despejada; la atención se centra ahora en el texto principal del artículo y se muestra el conjunto
de hipervínculos después del texto principal. Estoy seguro que estará de acuerdo en que las
opciones del Artículo son una poderosa manera de personalizar la pantalla predeterminada
de los artículos y sus detalles. Vamos a averiguar más acerca de las opciones disponibles en la
siguiente sección.
6.7 Afinar los detalles: Cómo cambiar la configuración del artículo

Al editar un artículo se puede establecer una amplia gama de opciones. Estas le permiten controlar
exactamente qué detalles del artículo se mostrarán cuando se publique el artículo. Es una buena idea
explorar las opciones para asegurarse cuál es la combinación de ajustes que se adapta mejor a sus
necesidades.
El siguiente es un resumen de las opciones que puede elegir en cada artículo:
A. La ficha Publicación
Es una fecha opcional de inicio/finalización de publicación del artículo

si tiene contenido preparado que solo debe ser publicado durante un
Inicio de la
período determinado de tiempo, o si piensa en una promoción temporal,
publicación
o un mensaje especial de Año Nuevo. Use Inicio de la publicación
Finalización
para ingresar la fecha en que la nueva página debe aparecer en el sitio;
de la
coloque una fecha en el cuadro Finalización de la publicación, para
publicación
interrumpir automáticamente la publicación del contenido después de
cierto periodo.
Cambie este valor para manipular la Fecha de creación que Joomla

Fecha de puede mostrar con cualquier artículo. Al cambiar la fecha, puede atraer la
creación atención de los visitantes a un artículo existente, porque reaparecerá en
las listas o páginas con nuevos elementos o novedades.
Por defecto, Joomla mostrará el nombre del autor del artículo. Puede
anular esta configuración en Opciones | Mostrar Autor. El nombre
del autor es el nombre de usuario que ingresó cuando creó el artículo.
Siempre y cuando no haya creado otras cuentas de usuario, el nombre
del autor que se muestra será «Super User».
Creado por, Si desea que otro nombre aparezca con el artículo, puede introducir
Creado por alias aquí un alias de autor. Cuando haya creado cuentas para otros usuarios,
también puede seleccionar otro usuario haciendo clic en el siguiente
botón:
Seleccionar usuario .
Puede leer más sobre la creación de cuentas de usuario en el capítulo 8.
Fecha de
La fecha y hora en la que el artículo fue modificado por última vez.
modificación,
El usuario que modificó el artículo por última vez.
Modificado por
Revisión,
La cantidad de veces que ha sido visto o revisado este artículo.
Veces visto
Metadescripción La información de metadatos es utilizada por los motores de búsqueda.

Metapalabras Se puede agregar una descripción del artículo, metapalabras clave e
clave, clave de ingresar instrucciones para los robots (arañas del motor de búsqueda en
referencia, la web), donde puede elegir entre:
Robots, Autor,
Derechos del }}Seguir con indexación
contenido, }}Seguir sin indexar
Referencia }}No seguir con indexación
externa. }}No seguir y no indexar
B. La ficha Opciones de imágenes y enlaces
Imagen de Imagen para el texto de introducción de presentaciones, tales como las

introducción del tipo blog o destacados.
Flotación de la Los controles de ubicación de la imagen. Puede elegir entre usar el valor
imagen global, derecha, izquierda o nada.
Texto Texto alternativo que se muestra a los visitantes que no tengan acceso
alternativo a las imágenes. Se reemplazará con el subtítulo de la imagen, si lo hay.
Subtítulo Subtítulo adjuntado a la imagen.
Enlace A, Son enlaces opcionales a los que serán redirigidos los usuarios. Por
Enlace B, ejemplo: www.google.com. Puede ubicarlos en la parte superior o
Enlace C inferior del artículo completo.
C. La ficha Opciones
Estas opciones de control detallan cómo se mostrarán en la vista del

artículo completo. Por defecto, estos detalles se muestran en la parte
superior del artículo.
En el siguiente ejemplo, muchos de los detalles del artículo se han
establecido para mostrar. Esta es la configuración predeterminada y
puede dar lugar a una gran cantidad de artículos desordenados. Puede
ser difícil encontrar el contenido real del artículo con este excesivo
detalle.
Usando la opción Información de la posición del artículo, puede

Mostrar título, Mostrar mostrar esta información en la parte inferior del artículo.
las etiquetas, Mostrar
Texto de introducción,
Información de la
Posición del artículo
Información, Mostrar
la categoría, Mostrar
categoría principal,
Mostrar Autor, Mostrar
fecha de creación,
Mostrar fecha de
Modificación, mostrar
fecha de publicación,
Mostrar navegación,
Mostrar icono
«Imprimir», Mostrar Sin embargo, cualquiera que sea la posición que elija para los detalles
icono «Correo», del artículo, lo mejor es mostrar solo la información útil. A menudo,
Mostrar Votaciones, incluso puede dejar de lado todos los extras, dejando libre el propio texto
Mostrar impresiones, del artículo.
Mostrar los enlaces no
autorizados
La selección de Mostrar votaciones mostrará una escala de cinco

puntos por debajo del título del artículo cuando se muestra el artículo
completo; los visitantes pueden calificar el artículo.
Cuando está configurado en Mostrar, el Título, Categoría, Categoría

Títulos enlazables, principal o Nombre del autor del artículo, se convierten en
Categoría enlazable, hipervínculos. Esto puede ser una opción muy útil, ya que da al visitante
Categoría principal una forma alternativa de encontrar el contenido, aparte del sistema de
enlazable, Autor menú. Al hacer clic en el hipervínculo mostrado por encima o por debajo
enlazable del artículo, los visitantes navegarán directamente al artículo/categoría/
categoría principal, o a todos los artículos del mismo autor.
Si utiliza la característica Artículos y enlaces, que se describe más

adelante en este capítulo, puede optar por mostrar un conjunto de
Posición de los enlaces
hipervínculos en una posición fija, ya sea por encima o por debajo del
artículo.
Se ingresa un texto personalizado que sustituirá el texto predeterminado

«Leer más». Si introduce el texto Historia completa:, este se mostrará
en el frontend de la siguiente manera:
Texto “Leer más…”
Agregando un texto específico puede mejorar la usabilidad, ya que le

permite guiar mejor a sus visitantes hacia el contenido del artículo.
Puede seleccionar una presentación personalizada para el artículo

actual, siempre que la plantilla (o componente) seleccionada permita
estas opciones de presentación adicionales. Una plantilla puede
Presentación alternativa
contener plantillas llamadas override (modificadas), presentaciones
personalizadas que invalidan las presentaciones predeterminadas de las
categorías de Joomla.
D. La ficha Opciones de la pantalla de Edición
Mostrar opciones de
Aquí puede establecer si usted, como administrador, desea ocultar las
publicación, Mostrar las
fichas de las opciones anteriores (Contenido, Publicación y opciones
opciones del artículo,
de imágenes y enlaces) para los demás usuarios de esta pantalla de
mostrar opciones de
edición del artículo, que tienen una cuenta de tipo administrador y/o para
Imágenes y Enlaces desde
los usuarios que tienen permisos de edición del frontend. Podrá leer más
la administración, mostrar
sobre la restricción del acceso y los permisos de grupos de usuarios en
opciones de Imágenes y
el capítulo 8.
Enlaces desde el sitio
E. La ficha Permisos
En esta ficha puede establecer los permisos para grupos de usuarios a nivel de este artículo específico.
Estas configuraciones de permisos permiten a los grupos de usuarios específicos ver (o no ver) el
artículo, o permitir que lo modifiquen. Aprenderá más acerca de los permisos en el capítulo 8.
6.8 Configuración de las preferencias generales para todos los artículos

Las fichas de opciones en la pantalla del Editor del artículo le permiten establecer preferencias para
determinados artículos. Sin embargo, es probable que desee seleccionar preferencias predeterminadas
para todos sus artículos si desea que el nombre del autor aparezca, si el título debe ser un hipervínculo,
y así sucesivamente. Para introducir estas preferencias de artículos en todo el sitio, vaya a Contenido
| Gestor de Artículos y haga clic en el botón Opciones, en la barra de herramientas. Se aplicarán
estos ajustes a todos los artículos. Por supuesto, puede cambiar estas configuraciones generales al
establecer opciones específicas al editar artículos.
Verá la siguiente pantalla con nueve fichas (Artículos, Opciones de edición, Categoría, etc.):
A. Ficha Artículos
Las opciones de la ficha Artículos definen las propiedades del artículo (la mayoría de estos ajustes ya
los hemos visto en los paneles de opciones de artículos individuales). Las decisiones que tome aquí
se aplicarán a todos los artículos; sin embargo, también puede configurar las opciones de artículos
a través de los elementos del menú: cuando se crea un enlace a un artículo o categoría, también
encontrará el mismo conjunto de opciones de artículos. La configuración que elija para un elemento
de menú específico prevalece sobre la configuración general.
Una opción que solo encontrará en la pantalla Opciones del Gestor de Artículos, es Límite del «Leer
más». El número que ingrese aquí determina el número máximo de caracteres para el título del
artículo en el botón Leer más. De esta manera, puede evitar que el botón Leer más sea demasiado
grande debido a la longitud del título del artículo.
B. Ficha Opciones de edición

Esta ficha controla qué opciones están disponibles en la pantalla del Editor de artículos para otros
usuarios diferentes de usted (el todopoderoso «Súper Usuario»). Puede decidir si desea ocultar
fichas de opciones específicas (Opciones de publicación y Opciones del Artículo) para usuarios que
tienen acceso a las pantallas de edición del artículo. También puede ocultar la ficha Imágenes y
enlaces (que permite a los usuarios especificar una imagen para el texto de introducción y para el
artículo completo), para los usuarios que tienen una cuenta de administrador y/o para los usuarios
que tienen permisos de edición en el frontend. Podrá leer más sobre la restricción del acceso y los
permisos de grupos de usuarios en el capítulo 8.
C. Ficha Categoría
Aunque esta ficha se muestra entre las opciones del Gestor de artículos, las opciones de Categoría
no se aplican a los artículos, sino que determinan la forma en que las categorías se muestran en
las páginas de categorías. El mismo conjunto de opciones está disponible cuando se crea un enlace
del menú para mostrar las categorías (como el tipo de elemento de menú Categoría Blog que ya ha
probado). Una vez más, las configuraciones generales elegidas aquí se aplican solo cuando usted no
ha elegido otras opciones para elementos específicos del menú.
Una opción que solo se encuentra en la ficha Categoría es Elegir presentación. Aquí puede determinar
la presentación predeterminada a usar con los elementos, ya sea en una vista de Blog o una vista de
Lista.
D. Fichas Categorías, Opciones del formato del tipo Blogs o Destacados, Opciones del formato del
tipo Lista o Tabla y Opciones compartidas
Una vez más, estas opciones no se refieren a los artículos individuales; por el contrario, afectan a
cómo se muestran las páginas de resumen, mostrando artículos o artículos de resumen. Presentamos
una breve introducción:
}}Las opciones Categoría afectan a páginas que muestran varias categorías. También encontrará
estas opciones al crear un tipo de elemento de menú de una clase específica, denominada Lista
de todas las categorías.
}}Las Opciones de formato del Tipo Blog o Destacados afectan páginas generales de los artículos
que usan una presentación tipo blog o destacado. Esta presentación se utiliza al crear páginas
con el Tipo de elemento del menú Categoría Blog o el tipo de elemento del menú Artículos
destacados.
}}Las opciones del Formato del tipo Lista o Tabla se aplican a páginas generales que utilizan una
presentación del tipo lista o tabla. Puede crear presentaciones del tipo lista y encontrar el mismo
conjunto de opciones de visualización, agregando un tipo de elemento del menú del tipo Lista de
Categoría o Lista de Todas las categorías.
}}Las Opciones compartidas se aplican a las presentaciones de tipo Lista, Blogs, y Destacados.
E. Ficha Integración
Las opciones de integración solo son relevantes cuando utiliza fuentes de noticias (fuentes RSS)
en su sitio web. La opción Mostrar para Sindicar el enlace le permite mostrar u ocultar un enlace
de sindicación de la noticia (RSS). Se mostrará el ícono típico de los canales electrónicos en la
barra de direcciones del navegador web. La opción De cada noticia sindicada mostrar le permite
controlar qué mostrar en el feed de noticias: el texto de introducción de cada artículo o el artículo
completo. Si está configurado en «texto de introducción», solo se mostrará el texto de introducción
en cada noticia del canal electrónico. Si está en «texto completo», se mostrará todo el texto del
artículo en cada notica del canal electrónico. Las elecciones hechas aquí pueden ser anuladas por
la configuración Opciones de Integración, de los tipos de elementos de menú específicos (como un
enlace del tipo Categoría Blog).
F. Ficha Permisos
Aquí se pueden establecer los permisos predeterminados para todo el contenido del artículo. Por
ejemplo, puede permitir editar o borrar artículos a grupos específicos de usuarios. Puede leer más
acerca de los permisos de usuario en el capítulo 8.
G. Archivar los artículos

A medida que su sitio crece, es posible que desee limpiar sus contenidos. Es probable que no desee
mostrar artículos antiguos, como las noticias del año pasado, entre su contenido actual. En Joomla
hay diferentes maneras de lograr esto. Una opción es despublicar los artículos antiguos; de esa
manera, los artículos están todavía disponibles en el backend, pero el visitante no puede verlos
más. Otra opción es crear un archivo. Los artículos archivados están todavía disponibles, pero ya
no forman parte del contenido del sitio ordinario. Puede hacerlos visibles a través de un enlace del
menú del tipo de elemento de menú de Artículos archivados.
El archivo es algo que se hace a mano. Para archivar uno o varios artículos a la vez, seleccione el
artículo(s) deseado(s) en el Gestor de artículos y pulse el botón Archivar de la barra de herramientas.
TIP
Si quiere archivar automáticamente los artículos que son más

antiguos que un periodo de tiempo determinado, considere el uso de
extensiones de Joomla como AutoArchive. Puede encontrarlo en el sitio
de extensiones de Joomla.
(http://extensions.joomla.org/search?q=timed+content&q=auto-
archive).
Encuentre más información sobre la instalación y el uso de extensiones

en el capítulo 10.
También puede cambiar el Estado del artículo a Archivado

cuando haya abierto la pantalla de edición del artículo.
Para ver qué artículos han sido archivados, vaya al Gestor de artículos y seleccione Archivado en el
cuadro de selección Estado.
Usted puede editar un artículo archivado, lo cual es bastante útil. Después de todo, aunque los artículos
son archivados, es posible que desee corregir un error tipográfico o eliminar alguna información
obsoleta. Para editar un artículo archivado, simplemente haga clic en el Título del artículo en el Gestor
de artículos, para abrir la pantalla Gestor de artículos: Editar un artículo.
Para «desarchivar» un artículo, selecciónelo y cambie el Estado de Archivado a Publicado (o

Despublicado, si no desea mostrar el artículo). Haga clic en Guardar para confirmar el cambio de
estado.
Ejercicio 7: Crear un archivo de noticias

Vamos a crear un archivo para algunas viejas páginas de noticias en el sitio Fascination:
1. Navegue hasta Contenido | Gestor de artículos. En la caja del filtro Seleccionar Categoría,
seleccione Noticias para ver solo los artículos en esa categoría.
2. Seleccione los artículos que desea archivar. En el siguiente ejemplo, hemos seleccionado Evaluación
de defensa civil.
3. Haga clic en el botón Archivar, en la barra de herramientas.
4. Aparece el mensaje «1 artículo ha sido archivado». El artículo desaparece de la lista. Para ver el
contenido archivado, seleccione Archivado en la lista desplegable Seleccionar Estado.
Usted ha creado un (pequeño) Archivo de noticias, pero no hay manera que el visitante vea su
contenido. Vamos a crear un enlace.
5. Navegue hasta Menús | Main Menu | Añadir nuevo elemento del menú. En el cuadro Tipo de
elemento del menú, seleccione Artículos | Mostrar los Artículos archivados.
6. Ingrese un Título para el hipervínculo: Noticias archivadas. Ajuste todas las demás opciones que
desee y haga clic en Guardar.
En el frontend se muestra un enlace al Archivo. En este momento no hay ningún artículo; sin embargo,
si el sitio contiene un archivo de muchos artículos, el visitante puede filtrar o buscar los archivados por
palabra clave o fecha de publicación.
Usted ha creado un archivo de artículos obsoletos. Los visitantes pueden ver un resumen de los
contenidos del archivo haciendo clic en el enlace Noticias archivadas, en el menú principal.
Cap.
Ay u d e a s u s v i s i t a n te s a
encontrar lo que quieren:
7
Gestión de menús
CAP. 7: Ayude a sus visitantes a encontrar lo que quieren : Gestión de menús 155
En Joomla, el contenido y los menús están estrechamente relacionados. En los capítulos anteriores,
usted ha podido observar que los enlaces del menú no solo apuntan a las páginas existentes, como se
podría esperar si tiene experiencia construyendo sitios web a la manera antigua. Al agregar un enlace
del menú, no se le indica a Joomla a qué página debe apuntar el enlace de menú, sino que le instruye
acerca de lo que debe hacer esa página. Ya ha visto cómo funciona esto al agregar contenido a su sitio.
Añadiendo enlaces del menú, ha creado páginas de categorías y otros tipos de páginas.
Por otra parte, para sus visitantes los menús de Joomla no son diferentes a otros menús del sitio
web. Para ellos, los menús deben proporcionar un medio fácil de navegación. En este capítulo nos
concentraremos en los menús como un medio para navegar, nos centraremos en cómo se pueden
ajustar los menús para diseñar una navegación clara e intuitiva, y cómo puede ayudar a los visitantes a
encontrar lo que quieren sin dificultad.
Hasta ahora, hemos agregado enlaces de menú utilizando principalmente la configuración predeterminada.
Vamos a ver cómo podemos mejorar los menús y la navegabilidad del sitio. En este capítulo aprenderá
a realizar lo siguiente: añadir un nuevo menú, crear submenús, ajustar la configuración del módulo de
menú y crear hipervínculos en los textos de los artículos.
7.1 Cuántos menús puede tener

En cualquier sitio web de Joomla puede crear tantos menús como desee. El sitio de muestra
predeterminado que instaló en el capítulo 2 es un ejemplo, ya que contiene no menos de seis menús.
En la página principal se muestran tres de ellos: el Top Menu horizontal, el menú About Joomla, y el
Menú Principal (titulado This Site). Puede verlos en la siguiente captura de pantalla:
Se necesita al menos un menú para que Joomla funcione correctamente, y este es el que contiene
el enlace a la página principal. Por defecto, ese es el menú denominado Main menu. En el sitio de
ejemplo hay varios menús, pero en la vida real el uso de esta cantidad de menús sería confuso tanto
para los visitantes de su sitio como para los que realizan el mantenimiento del sitio.
Es bueno poder crear tantos menús como desee, ya que le permite configurar diferentes menús para
cada tipo de función y usuario. Por ejemplo, puede tener un menú principal (en la parte superior de
la página) que contenga enlaces principales, y otro (en algún lugar de la página) que contenga enlaces
secundarios. También puede querer tener un menú especial con enlaces de acción (por ejemplo, Inicio
de sesión y Registro) y otro menú que solo muestre a los visitantes quién ha iniciado sesión.
TIP
Los menús son módulos
Ya ha visto algunos ejemplos de módulos en acción, como el

HTML personalizado. Recuerde que los módulos son los bloques
de construcción de Joomla que pueden contener todo tipo de
funcionalidad. Los menús también son módulos. De hecho, cada
nuevo menú que agrega es una nueva instancia del módulo Menú.
Esto hace que los menús sean muy flexibles. No solo puede tener
tantos menús (módulos de menú) en su sitio como desee, sino
que también puede indicarle a Joomla exactamente dónde (en qué
parte de la pantalla, en qué posición del módulo) y cuándo (en qué
páginas específicas, para qué usuarios específicos) quiere que estos
aparezcan.
¿Suena confuso? No se preocupe, vamos a practicar cómo agregar

y personalizar los menús en este capítulo y, una vez dominado,
realmente apreciará la increíble flexibilidad del menú de Joomla.
7.2 Crear una navegación amigable: Limpiar el menú principal

Cuando construya un sitio, comenzará a agregar enlaces al menú principal. Este menú es siempre parte
de la instalación de Joomla, incluso si no instala los datos de ejemplo. Pero a medida que evoluciona su
sitio, puede convertirse en una larga y desordenada lista de hipervínculos. Incluso el menú de nuestro
pequeño sitio de ejemplo Fascination ya contiene demasiados enlaces. Cuando encuentre que el Menú
principal se vuelve largo y desordenado, ¿qué opciones tiene para mejorar la navegación del sitio?
7.2.1 Opción 1: Cambiar el orden de los elementos del menú
Por defecto, un nuevo elemento de menú se añade al final del ya existente. Si agrega un nuevo
enlace a cualquier menú, siempre aparecerá como el último elemento.
Esto probablemente no sea lo que quiere. El orden en que se agregan elementos no es necesariamente
el orden que desea que se muestre a su visitante. Es una buena idea reorganizar los enlaces tan pronto
como haya llenado el menú con hipervínculos.
TIP
Eliminar los elementos innecesarios del menú
En los capítulos anteriores, hemos agregado un par de enlaces para

propósitos de demostración o simplemente para probar cómo se
realizan las acciones. Para deshacerse de los enlaces redundantes
en menú, vaya a Menús | Main menu, seleccione los elementos
que ya no desee y haga clic en el botón Papelera. En nuestro sitio
de ejemplo, podemos eliminar un par de enlaces que ya no son
necesarios (ya que hay otros enlaces presentes para llegar a un mismo
contenido): Eventos, Reuniones y Resumen de artículos de Noticias.
La eliminación de un elemento de menú siempre puede ser revertida
cambiando el Estado a Publicado. Para eliminar definitivamente los
elementos de menú, seleccione todos los artículos con Estado: En
Papelera y haga clic en Vaciar Papelera.
Ejercicio 1: Cambiar el orden de los elementos del menú

En el sitio de ejemplo Fascination, vamos a mover los elementos del menú principal para presentarlos
en un orden más lógico. Los elementos que consideramos más importantes deben estar en la mitad
superior del menú, mientras que los enlaces a contenidos menos importantes o estáticos deben
colocarse abajo. A continuación, se muestra el menú original en el lado izquierdo y en la parte derecha
se muestra un orden más lógico, del más al menos importante.
Solo tarda unos pocos pasos ajustar el orden de los elementos del menú:
1. Navegue hasta Menús | Main menu.

2. En lista desplegable Ordenar tabla Por: por encima de la lista de elementos de menú, seleccione
Ordenar.
3. Ahora, haga clic en los tres cuadrados verticales en la parte izquierda del elemento de menú que
desea mover y arrastrar, y suelte el elemento de menú en su nueva posición, de la siguiente forma:
4. Repita el paso anterior hasta que esté satisfecho con la secuencia de los elementos del menú.
Los elementos del menú ahora se muestran en el orden que usted ha elegido. Noticias y Actividades
han subido desde su posición original.
7.2.2 Opción 2: Crear elementos de submenú
Todavía hay espacio para mejorar nuestro menú principal. Aunque en la actualidad hay solo cinco
enlaces a la izquierda, la forma en que están organizados todavía puede confundir a los visitantes.
Tener un enlace Noticias y un enlace Noticias archivadas separados, ambos en el mismo nivel del
menú, es extraño. Noticias archivadas probablemente no debería ser un enlace de alto nivel, así
que vamos a cambiarlo a un enlace secundario que solo se mostrará después de hacer clic en el
enlace Noticias.
Ejercicio 2: Crear un elemento de menú secundario

Así es como se elimina Noticias archivadas del nivel primario en el
menú principal y se lo muestra como un enlace de subnivel:
1. Para editar el contenido del Main menu, desplácese hasta

Menús | Main menu.
2. Haga clic en el título del tema que desea editar, Noticias
archivadas.
3. En la sección Detalles, establezca el cuadro Elemento principal
en Noticias.
4. Haga clic en Guardar y cerrar. En la lista de elementos de menú del Gestor de menús, el nuevo
elemento de menú de nivel inferior se muestra con sangría.
5. Para asegurar que el menú muestre los subenlaces según lo previsto, vamos a ver una configuración
del módulo de menú actual. Vaya a Extensiones | Gestor de módulos. En la lista desplegable
Seleccionar tipo, seleccione Menú. Haga clic en el módulo de menú This site para editarlo.
6. Compruebe si Nivel Final se ajusta a Todos. Esto indica que se mostrarán todos los niveles de
submenú. Deje Mostrar elementos del menú establecido en No, a menos que quiera que se
muestren siempre los elementos del menú (incluso si no se ha hecho clic al enlace del menú
principal).
7. Haga clic en Ver sitio, para ver la salida en el frontend.

8. El Main menu muestra ahora seis enlaces primarios. Cuando el usuario hace clic en Noticias,
aparece un enlace secundario Noticias archivadas.
Mediante la asignación de un elemento principal al mismo, se convierte un enlace del menú en un

enlace de submenú. Usando enlaces principales («padre») y enlaces secundarios («hijos») puede
aclarar la coherencia del sitio.
Para cambiar los contenidos de un menú, utilice el Gestor de Menús. Para cambiar la ubicación
y el comportamiento del menú, así como la visualización de los enlaces del submenú, usted ha
cambiado la configuración del módulo del menú. Esta combinación de configuración del Módulo de
Menú y del Gestor de Menús puede parecer confusa, pero vamos a practicar usando ambos lados
del backend de Joomla en la siguiente sección, donde se agregará un menú completamente nuevo.
7.2.3 Opción 3: Agregar un nuevo menú separado
Ya ha visto cómo puede reorganizar los elementos del menú y agregar diferentes niveles. Otra forma
de mejorar un menú es quitando los enlaces que realmente no encajan, y crear uno separado para
estos enlaces que pueda mostrar en otro lugar de la página. De esta manera, puede o bien hacer
hincapié en esos enlaces en la jerarquía visual de la página web o puede optar por hacer que sean
menos prominentes.
Vamos a echar un vistazo a los elementos del Main menú de Fascination. Imagine que su cliente
le ha pedido reorganizar la navegación para que los visitantes puedan encontrar rápidamente la
información sobre nuevos productos que están en este sitio. Es difícil para el visitante distinguir
entre enlaces a contenidos de productos que fabrica la empresa y enlaces sobre la organización
detrás del sitio. Una buena solución sería la creación de un menú separado sobre los contenidos
relacionados con Fascination.
Ejercicio 3: Crear un nuevo menú vacío

En el menú principal del sitio de ejemplo, tres elementos son aptos para ser mostrados en otro
menú. Estos enlaces son de interés para los visitantes que desean conocer más sobre la organización
Fascination. Vamos a crear un nuevo menú llamado Acerca de Fascination, de modo que podamos
mover aquí los enlaces del menú ¿Quién es Fascination?, Declaración de la Misión y Contáctenos.
1. Navegue hasta Menús | Gestor de Menús. Haga clic en Nuevo.

2. En la pantalla Gestor de Menús: Añadir un menú, escriba el Título, que es el nombre que será
mostrado con el menú. Ingrese también el Tipo de menú, o sea el nombre que Joomla utiliza para
identificar el menú; este no será visible en el frontend, ya que cuando ingrese un nombre, Joomla
lo grabará sin espacios ni caracteres especiales.
En el siguiente ejemplo, hemos ingresado Acerca de Fascination tanto el título del menú como el
tipo de menú. Después de hacer clic en Guardar, se dará cuenta que el texto del Tipo de menú ha
cambiado automáticamente a Acerca de Fascination.
3. La Descripción es opcional, aunque puede ser útil para ayudar a distinguir entre los distintos menús
en el backend. Por ahora, ingrese al menú Acerca de Fascination y haga clic en Guardar y cerrar.
Esto le llevará al Gestor de Menús. Al final de la lista puede ver una nueva entrada. El menú Acerca
de Fascination ha sido creado.
Si ahora hiciera clic en el enlace Acerca Fascination, vería otra vez todos los detalles del menú: Título,
tipo de Menú y Descripción.
En el Gestor de menús ha creado un nuevo menú. Es visible en el backend de Joomla pero, por
supuesto, aún está vacío.
Ejercicio 4: Mover hipervínculos al nuevo menú

Una manera de llenar un nuevo menú es mediante la creación de nuevos enlaces (Menús | About
Fascination | Nuevo). Sin embargo, en este caso vamos a mover los tres enlaces existentes desde el
menú principal a nuestro nuevo menú:
1. En el Gestor de menús, localice el Main menu y haga clic para editarlo.

2. Seleccione los elementos de menú que desee mover al nuevo menú. En este ejemplo, hemos
seleccionado ¿Quiénes son Fascination? y Misión. En la parte superior de la pantalla, haga clic en
el botón Lote para mover los elementos del menú.
3. Aparecerá una pantalla emergente llamada Proceso por lotes de los elementos del menú
seleccionados. En la lista desplegable Seleccionar Menú o nivel principal a mover o copiar,
desplácese hasta Acerca de Fascination | Añadir a este menú. El texto en la lista desplegable
cambia a Añadir a este menú.
4. Haga clic en el botón Procesar. Aparece un mensaje que dice Proceso por lotes completado
correctamente.
5. Haga clic en Menús en el menú de la izquierda para cambiar a la pantalla Gestor de menús: menús.
Se muestran dos elementos de la columna Publicado del menú About Fascination.
6. Haga clic en el número 2 para ver las actuales opciones de menú. Se muestran los contenidos del
menú Acerca de Fascination.
Todo está muy bien configurado, y el nuevo menú Acerca de Fascination contiene los hipervínculos
deseados. Solo hay una cosa por hacer: que sea visible en su sitio web.
Ejercicio 5 : Indicar a Joomla dónde mostrar el menú

Para conseguir realmente que el nuevo menú se muestre en el sitio, tiene que crear un módulo de
menú. El módulo es el bloque de funcionalidad que contiene su menú y es necesario para poder
mostrar los contenidos. Vamos a decirle a Joomla dónde lo desea mostrar.
1. Vaya a Menús | Gestor de menús para ver todos los menús. Busque el menú Acerca de Fascination.
Haga clic en el enlace Añadir un módulo para este tipo de menú que se encuentra en la columna
Módulos enlazados. En realidad, se trata de un acceso directo al Gestor de Módulos, que le
ahorra unos cuantos clics para navegar a Extensiones | Gestor de módulos, hacer clic en Nuevo y
seleccionar Menu.
2. En la pantalla Gestor de módulos: Módulo Menú, escriba un título para el menú Acerca de
Fascination. Seleccione Posición: Derecha [position-7]. Esto hará que el nuevo menú aparezca en
la misma columna que el Main menu.
3. Haga clic en Guardar y luego en Ver Sitio. Aparecerá un menú separado.
El nuevo menú About Fascination se muestra en la columna de la derecha.
4. ¡Ya casi ha terminado! Observamos que nuestro nuevo menú aparece en la columna de la derecha,
pero queremos que aparezca debajo del Main menu para establecer una mejor jerarquía visual.
Esto nos tomará un paso extra. Si ha hecho clic fuera de la pantalla de edición de módulo, vaya de
nuevo a Extensiones | Gestor de módulos y seleccione el módulo Acerca de Fascination para de
editar de nuevo el menú.
5. En la sección Detalles hay dos parámetros que controlan dónde aparecerá el menú en el frontend.
Dejaremos «Posición» sin cambios (para mantener el menú en la columna de la derecha). En el
cuadro desplegable Orden, el valor actual es 1. El número indica que el menú es ahora el punto
más alto en esta posición de módulo. Para cambiar este valor, seleccione una posición más baja
(en este ejemplo es 2: This site). Esto posicionará el nuevo menú debajo de la posición actual del
Main menu.
6. Haga clic en Guardar y cerrar y luego en Ver sitio para comprobar que el menú secundario se
publica ahora en la posición correcta.
En este ejemplo hemos optado por tomar dos enlaces fuera del menú principal y mostrarlos en un
menú separado. Hemos tenido éxito en la limpieza del menú principal previamente hacinado; ahora,
este muestra solo cuatro enlaces principales. Todos los enlaces que apuntan al contenido sobre la
organización Fascination han sido movidos a un menú separado.
TIP
No se preocupe si no le gusta el formato predeterminado del menú

principal ni el submenú de Joomla. Muchas plantillas permiten menús
de estilo atractivo. Si tiene algunas habilidades de codificación CSS,
puede editar los estilos de menú usted mismo. Verá ejemplos de
estilo con CSS en el capítulo 10.
Mundo real
Cambie las configuraciones del menú
Es posible que desee experimentar con los ajustes del módulo de menú (vaya a la pantalla
Gestor de módulos: Módulo de menú del menú Acerca de Fascination) para ajustar la posición
del menú en la página web. Pruebe algunas diversas posiciones de módulo de menú, por
ejemplo Izquierda (position-8). En el capítulo 9, vamos a explorar las posiciones disponibles
de los módulos con más detalle.
Además de la configuración de la posición, hay muchos otros ajustes del módulo de menú que
se pueden manipular a su gusto. Vea la sección Exploración los ajustes del módulo de menú
más adelante en este capítulo para obtener una visión completa.
¿Gestor de Menús o Gestor de Módulos?

Nota
Para personalizar un menú usted a veces utiliza el Gestor de Menús y otras
el Gestor de Módulos. ¿Cuál es la diferencia? El Gestor de Menús se utiliza
para todo lo que tenga que ver con los contenidos del menú. No tiene nada que
ver con la visualización del módulo de menú que usted controla mediante la
configuración del módulo.
7.3 Usar el menú desplegable horizontal como menú principal

En Joomla 3, el menú superior horizontal es el más importante del sitio. No solo es visualmente
destacado, también es el menú que permanecerá visible incluso si el sitio se muestra en la pequeña
pantalla de un smartphone o de una tablet. Protostar, la plantilla predeterminada de Joomla,
está configurada para adaptarse automáticamente a dichas pantallas pequeñas; sin embargo, la
presentación del contenido no cambia cuando el sitio se muestra en una pantalla más pequeña. Puede
probar esto ahora cambiando el tamaño de la ventana del navegador.
Como puede ver en la imagen anterior, el menú de la parte superior sigue siendo visible, pero la
columna de la derecha (que contiene el menú This site) ha desaparecido. De hecho, el contenido de la
columna derecha sigue ahí, pero necesita desplazarse hacia abajo hasta el final a la parte inferior de
la pantalla para verlo.
Esto significa que en nuestro sitio actual (utilizando la plantilla de sitio predeterminada) sería mejor
si utilizamos el menú de la parte superior como nuestro menú del sitio predeterminado. Este no es el
caso, pero es fácil de asignar el contenido del menú principal al menú superior (y viceversa).
Ejercicio 6: Mostrar enlaces al menú principal en el menú superior

Vamos a colocar el módulo superior del menú para mostrar los contenidos del Main Menu.
1. Vaya a Extensiones | Gestor de módulos. Localice el módulo de menú llamado Top y haga clic en
su nombre para editarlo.
2. Haga clic en el cuadro desplegable Seleccionar Menú para seleccionar Main Menu (en lugar de la
selección actual, Top).
3. Asegúrese que Nivel final se encuentre establecido en Todos y Mostrar elementos del menú se
encuentre en Sí. De esta manera, el menú mostrará los enlaces del submenú y no solo los enlaces
de nivel principal. Guarde sus cambios.
4. Eche un vistazo al frontend para ver la salida. Como puede ver, el menú Top ahora muestra los
contenidos del menú principal (Main menú). Pase el cursor del mouse sobre el enlace Noticias para
ver los enlaces desplegables que están trabajando, incluso si solo hay un enlace submenú (es decir,
el enlace Noticias archivadas) en estos momentos.
Mundo real
Limpie los menús y los enlaces del menú
En este momento el sitio contiene dos módulos de menú que muestran el mismo contenido del
menú. Tanto el módulo del menú Top como el módulo del menú llamado This site muestran
los contenidos del Main Menu. Puede corregir fácilmente esto asignando el contenido del
menú Top al módulo de menú This site. Para ello, vaya al Gestor de Módulos, abra el módulo
de menú llamado This site, y en la pantalla que aparece asegúrese que Seleccionar Menú
tenga seleccionada la opción Top.
Guarde los cambios y eche un vistazo a la interfaz del sitio. Los contenidos previamente
asignados a la parte superior del menú, solo dos enlaces, ahora se muestran en el menú This
Site.
Podríamos dejar este menú como está, pero nos sirve para un propósito: el enlace Home
ya está presente en el menú superior horizontal, así que ¿por qué no movemos el enlace
de Contáctenos a otro menú y despublicamos el menú superfluo por completo? Para esto,
navegue hasta Menús | Top, seleccione el enlace Contáctenos y haga clic en el botón Lote
para moverlo al Main Menu. A continuación, desplácese hasta Extensiones | Gestor de
Módulos, localice el módulo This site y haga clic en la marca verde en la columna Estado
para despublicar el módulo de menú. Ahora el menú superior muestra todos los enlaces
principales, incluyendo Contáctenos.
7.4 Crear submenús divididos

Al inicio de este capítulo ha creado enlaces al submenú al seleccionar el Elemento principal apropiado
para cualquier enlace del menú. De forma predeterminada, cada nuevo enlace es de nivel superior,
y su Elemento principal se establece en Elemento de menú raíz. Cambiando el Elemento principal a
otro enlace del menú, el enlace del menú actual se convierte en uno de submenú.
Por lo general, los enlaces del submenú aparecerán en el mismo menú que los enlaces de sus elementos
principales (padres). Ya vio cómo funciona, tanto en el menú vertical This Site (donde los elementos
del submenú se hacen visibles después de que el visitante ha hecho clic en un elemento del menú
principal) como en el menú horizontal Top (donde los elementos del submenú se hacen visibles como
elementos desplegables, cuando el cursor del mouse pasa sobre un elemento del menú principal).
También puede optar por una presentación totalmente diferente. Una práctica común es poner los
principales enlaces de navegación horizontal en la parte superior de la página, y mostrar los enlaces
de segundo nivel en un módulo de menú separado (por ejemplo, en un menú vertical en la columna
izquierda). Esto crea una clara distinción visual entre los elementos del menú principal y sus elementos
de submenú. Al mismo tiempo, está claro que los dos menús comparten algún tipo de relación. El
elemento principal puede marcarse como «activo» (usando un diverso estilo o color) cuando aparezca
el submenú correspondiente.
Un ejemplo se muestra en la siguiente captura de pantalla. Un enlace primario, Actividades, se muestra

en una barra horizontal del menú principal. Al hacer clic en este enlace, un submenú separado muestra
enlaces secundarios (enlaces del submenú) a Eventos, Reuniones, Exposiciones y Seminarios.
Esta configuración del menú puede ser útil si usted tiene varios contenidos de submenú. En lugar de
mostrar todos los enlaces en el mismo menú, puede utilizar una columna o cualquier otra parte de la
página para mostrar una lista de enlaces del submenú.
¿Cómo se construye este tipo de sistema de menús en Joomla? En resumen, usted crea una copia
del menú principal, configura el menú principal original para mostrar solo los enlaces de alto
nivel, y establece la copia para mostrar únicamente los enlaces de segundo nivel. Joomla mostrará
automáticamente el submenú apropiado cuando el elemento primario se elige en el menú superior.
No vamos a agregar un sistema de menús divididos en nuestro sitio de ejemplo, ya que no tiene la
cantidad de contenido que justifique una elaborada navegación multinivel. Sin embargo, siéntase libre
de experimentar en su propia página web, ya que es una técnica muy poderosa. Los siguientes son los
pasos necesarios:
1. Supongamos que ha creado un menú Top con dos o más enlaces de submenú.
Vaya a Extensiones | Gestor de módulos. Seleccione el módulo de menú Top y haga clic en Duplicar.
2. La misma lista contiene ahora una copia llamada Top (2). Abra la copia e ingrese un nuevo título
(por ejemplo, Submenú). Seleccione una Posición (por ejemplo la position-7).
3. Establezca el Estado del módulo en Publicado.
4. Establezca el Nivel inicial en 2 y el Nivel final en 2. Esto hará que el menú muestre solo los elementos
de segundo nivel.
5. Haga clic en Guardar y cerrar. La copia del menú está lista.

6. Ahora edite el módulo de menú Top original para mostrar los elementos del nivel superior. Coloque
el Nivel inicial en 1 y el Nivel final en 1. Esto indica que el menú solo mostrará enlaces primarios.
7. El submenú está hecho. Por defecto, los enlaces del submenú siempre están ocultos. Solo cuando
el visitante hace clic en el enlace Actividades del menú superior, aparece el menú secundario en
otra parte de la página.
Mundo real
Organice los menús tal como lo desee
Las capacidades del menú dividido de Joomla le permiten diseñar de manera exacta el tipo
de navegación apropiado para su sitio. Puede colocar una fila de enlaces del menú principal
en la parte superior de la página, y la posición de enlaces secundarios (submenú) en el
lado izquierdo o en la columna derecha. Trate de averiguar qué disposición de los enlaces
principales y secundarios se adapta mejor a su sitio y cómo puede realizar esto en Joomla. A
continuación se presentan algunas sugerencias y arreglos comunes de la navegación por el
sitio para ayudarlo:
TIP
La plantilla predeterminada de Joomla permite menús desplegables

simples; sin embargo, hay muchas extensiones disponibles que
están diseñadas específicamente para soportar menús desplegables
horizontales más avanzados. También hay extensiones disponibles
que soportan los menús desplegables horizontales en cualquier
plantilla. Vamos a ver un ejemplo de esto en el capítulo 10, Crear un
diseño atractivo: Trabajar con plantillas.
7.5 Explorar los ajustes del módulo de menú

Al crear o editar un módulo de menú, los detalles y opciones de los módulos le permiten controlar
exactamente dónde y cómo este se muestra. En muchos casos, la configuración predeterminada lo
hará, pero si usted realmente quiere el control sobre sus menús, es una buena idea para explorar la
amplia gama de posibilidades adicionales. En el Gestor de módulos, haga clic en el nombre del menú
(como Top, This site o Sobre Fascination). Aparece la pantalla Gestor de módulos: Módulo de menú.
7.6 Cambiar a la pantalla del módulo de menú

Para personalizar las propiedades del menú, vaya a Extensiones | Gestor de módulos y encuentre el
módulo de menú apropiado. Hemos visto que también hay un acceso directo disponible que le llevará
directamente desde el Gestor de menús a la configuración del módulo de menú correspondiente.
En la columna Módulos enlazados, haga clic en el enlace del módulo de menú. Por lo general,
habrá solo un módulo enlazado disponible; sin embargo, si utiliza más instancias del mismo menú
en diferentes posiciones de los módulos, estos serán listados aquí. El acceso directo en la columna
Módulos enlazados mostrará una pantalla emergente con (casi) todas las mismas opciones de los
módulos que se encuentran a través del Gestor de Menús.
Vamos a echar un vistazo de cerca a todas las opciones disponibles en la pantalla Gestor de módulos:
Módulo de menú.
A. La ficha Módulo
Los valores de la ficha Módulo controlan las propiedades básicas, tales como el título del menú y la
posición del menú.
Propiedades Descripción
Seleccione un menú desde la lista de selección desplegable. Por ejemplo:
Seleccionar menú
Main Menú, Top, User Menú y otro que puede haberse creado.
Seleccione un elemento del menú para que se use siempre como la base
para mostrar el menú. Debe asignar un nivel de inicio que esté a un nivel
igual o superior del elemento del menú base. Esto hará que el módulo
Elemento de menú base se muestre en todas las páginas en las que esté asignado. Si se ha
seleccionado Actual, el elemento del menú activo se usará como elemento
base. Esto hará que el módulo solo muestre submenús cuando esté activo
este elemento del menú.
Nivel de inicio en la estructura para empezar a mostrar elementos del menú.

Nivel inicial Se configura el nivel inicial y final al mismo dato, y Mostrar elementos del
menú está en Sí, solo se mostrarán los elementos del menú de ese nivel.
Nivel de finalización en la estructura para terminar de mostrar elementos del

Nivel final menú. Si selecciona Todos, se mostrarán todos los niveles, dependiendo
de la configuración de Mostrar elementos del menú.
Mostrar elementos del

Expande la estructura del menú y hace siempre visibles sus elementos.
menú
Muchas veces se puede ocultar el título. Después de todo, ¿por qué un

menú principal se llama Main menu o This site? Los visitantes de la web
Mostrar el título reconocen un menú cuando lo ven. Solamente los menús de funciones
especiales (Login) deberían mostrar un título. El efecto dependerá del
estilo de cada plantilla.
Escriba o seleccione la posición predeterminada en donde desea que se

muestre el módulo. Las opciones que tiene aquí dependen de la plantilla
Posición que está utilizando. Los diseñadores de plantillas pueden agregar tantas
posiciones como quieran, lo que le da mayor flexibilidad en la asignación
de posiciones a los menús y otros módulos.
Seleccione Publicado para mostrar el módulo de menú en el sitio, y

Estado seleccione Despublicado para ocultarlo, o Movido a la papelera para
enviarlo a la papelera.
Si un (menú) módulo se debe mostrar durante un periodo limitado de tiempo,

Inicio de la publicación,
ingrese la fecha inicial y final aquí. Si desea posponer la publicación, solo
Fin de la Publicación
ingrese una fecha de inicio.
Propiedades Descripción
Al aplicar diferentes niveles de acceso a diferentes partes de su sitio, podrá

determinar quién tiene acceso a este menú. Cuando se pone en Público,
Acceso todos los visitantes pueden ver el menú. Elija Registrados para dar acceso
solo a los usuarios registrados, y Especial para dar acceso solo a los
usuarios con estatus de autor o superior.
Puede poner más de un módulo dentro de una Posición; cambiando la

configuración del Orden, puede controlar el orden de los módulos en la
Orden posición seleccionada. El cuadro desplegable muestra todos los módulos
en la Posición actual (por ejemplo, vea el Ejercicio 1: Cambiar el orden de
los elemento de menú, explicado anteriormente en este capítulo).
Si tiene un sitio multilingüe, asigne el idioma correspondiente a este

Idioma
módulo.
Espacio para una breve nota acerca de este módulo, para usted o para
Nota
otras personas que tienen acceso a la interfaz de administración.
B. La ficha Asignación de menú

La sección Asignación de menú le permite controlar en qué páginas (a través de qué enlaces del
menú), será accesible el módulo de menú.
Opción Descripción
¿En qué páginas se debe mostrar el Módulo? Por defecto, un módulo
se mostrará en todas las páginas. Elija entre: En todas las páginas, En
Asignación del Módulo
ninguna página, Solo en las páginas seleccionadas, o En todas las páginas
menos en las seleccionadas.
C. La ficha Permisos del módulo

Gestione la configuración de privilegios para los diferentes grupos de usuarios: Public, Guest,
Manager, Author, Editor, Publisher, etc.
Define las acciones que puede realizar el grupo de usuario, que son:
}}
Borrar: Permite a los usuarios de este grupo borrar cualquier contenido en esta extensión.
Acción }}
Editar: Permite a los usuarios de este grupo editar cualquier contenido en esta extensión.
}}
Editar estado: Permite a los usuarios de este grupo cambiar el estado de cualquier
contenido de esta extensión.
Si cambia la configuración, las modificaciones se aplicarán en este elemento. Tiene

las opciones:
Heredado. Quiere decir que, para determinar el estado del permiso, se tendrá en
cuenta lo que haya asignado desde la configuración global, es decir, desde los grupos
Seleccione la nueva de nivel superior y desde la categoría.
configuración
Denegado. Quiere decir que da igual cómo esté configurado el estado de los permisos
sobre esa acción desde la configuración global, o desde los grupos de nivel superior,
o desde la categoría; es decir, el grupo al que le cambie el estado del permiso a
«Denegado» desde este apartado, no podrá realizar esa acción sobre este elemento
(incluyendo a todos sus subgrupos, si tuviera).
Permitido. Quiere decir que el grupo al que le cambie el estado de la acción

a Permitido desde aquí, podrá realizar dicha acción sobre este elemento
(pero si esta configuración entra en conflicto con lo asignado desde la
configuración global, o con lo asignado en los grupos de nivel superior,
o con lo asignado desde la categoría, la configuración que aplique desde
aquí no tendrá efecto, y el conflicto será indicado con un No permitido
(bloqueado debajo del estado de configuración calculada).
Si realiza algún cambio en la configuración, haga clic en Guardar para

Configuración calculada que se pueda recalcular la nueva configuración. Obtiene las opciones:
Permitido o No permitido.
D. La ficha Avanzado
Es probable que solo se ajuste la ficha Opciones avanzadas en ciertas situaciones específicas.
ID de la etiqueta Un atributo para asignar el «ID» a la etiqueta raíz del menú (es opcional).
Un prefijo para aplicar a la clase CSS de los elementos del módulo. Permite
Clase CSS
el estilo personalizado e individual del módulo
Los valores JavaScript para posicionar una ventana emergente. Por

Posición de destino
ejemplo: «top=50, left=50, width=200,height=300».
Aquí puede seleccionar una presentación personalizada para el módulo

Presentación alternativa actual, siempre que la plantilla seleccionada (o módulo) permita estas
opciones de presentación adicionales.
Si ha establecido un valor de almacenamiento en caché en la configuración

Caché, Duración de la
global, puede anularlo aquí para este módulo. Se establece el tiempo de
caché
duración de la caché para el módulo antes de actualizarse.
Estas opciones le permiten personalizar la presentación del módulo, es

decir, especificar la etiqueta HTML usada para el título del módulo y el
Etiqueta del módulo,
propio módulo. El tamaño del bootstrap especifica el número de columnas
Tamaño del Bootstrap,
que usará el módulo.
Etiqueta del Encabezado,
Clase del encabezado,
La clase del encabezado se refiere a la clase CSS para el encabezado o
Estilo del Módulo
título del módulo. El estilo del módulo se usa para modificar el estilo de la
plantilla para esta posición.
7.7 Qué tipos de enlaces de menú están disponibles

Hasta ahora, nos hemos centrado en crear menús y en ajustar la visualización y la configuración del
menú. Por supuesto, los menús se refieren a los hipervínculos que contienen, así que vamos a observar
la forma en que se crean y modifican. Como la creación de los enlaces del menú es una actividad
esencial en Joomla, ya está familiarizado con los pasos básicos que se necesita para crear estos.
Navegue a Menús, haga clic en el nombre del menú, y luego clic en Nuevo.
Cada vez que se crea un nuevo enlace, primero tiene que seleccionar el Tipo de elemento del menú.
Se le presenta con una pantalla emergente con una impresionante lista de tipos disponibles. Haga clic
en cualquiera de los encabezados para revelar todas las opciones disponibles.
Nota Esta lista de Tipos de elementos del Menú puede ser diferente en su
instalación particular de Joomla. Después de instalar un componente
que contiene sus propios nuevos tipos de páginas, estos pueden aparecer
también en la lista Tipo de elemento del menú.
Cuando construya el sitio de ejemplo, habrá agregado enlaces usando algunos de los tipos de elemento
del menú disponibles. Por ejemplo, ya ha creado enlaces que apuntan a los artículos (Artículos |
Mostrar un solo artículo) y otros que apuntan a las páginas generales del artículo (Artículos | Mostrar
una categoría en formato Blog). También ha agregado un enlace a través de Contactos | Mostrar un
solo contacto para agregar una página de función especial o un formulario de contacto.
Sin embargo, hay muchos más tipos de elementos de menú a elegir. Recuerde que los tipos de elementos
del menú de Joomla no tratan sobre los diferentes tipos de navegación de menús, sino que tratan
sobre la creación de diferentes tipos de contenido. Representan diferentes formas preestablecidas de
mostrar todos los tipos de contenidos.
En la siguiente tabla se ofrece una breve reseña de lo que significan los Tipos de elementos del menú
disponibles y cómo puede desplegarlos. No vamos a entrar en los detalles aquí (cómo los Tipos de
elementos del menú de Joomla no tratan realmente sobre la navegación, sino sobre la creación de
contenido); sin embargo, es una buena idea revisar las opciones del menú mencionados a continuación
para tener una idea de lo que tienen que ofrecer. Vamos a cubrir los tipos de elementos del menú
relevantes con más detalle en otros capítulos sobre la adición de contenido (las referencias a estos
capítulos se muestran en la tabla).
Nombre ¿Qué tipo de enlace de menú es este?
Probablemente utilizará más estos enlaces. Estos son enlaces del menú
que apuntan a un artículo o a páginas generales (páginas de categorías), o
páginas que contienen artículos destacados (véase el capítulo 6).
Tiene las siguientes opciones.
}}Mostrar el formulario para crear y enviar un artículo

Artículos
}}Mostrar los artículos archivados
}}Mostrar todas las categorías
}}Mostrar todos los artículos destacados
}}Mostrar un solo artículo
}}Mostrar una categoría en formato blog
}}Mostrar una categoría en formato de lista
Muestra una página donde se presenta un formulario de búsqueda y una

lista de los resultados de búsqueda. Buscar es el antiguo sistema de
Buscar motores de búsqueda de Joomla. Está todavía disponible solo en caso que
el nuevo sistema de Búsqueda inteligente no funcione correctamente (lo
que, por ejemplo, puede ocurrir en sitios muy grandes).
Un enlace a una página de búsqueda del sitio alternativo, sustituyendo

el sistema de búsqueda estándar que se encuentran más abajo en la
lista. La característica Búsqueda inteligente cuenta con auto-completado
Búsqueda inteligente y sugiere frases de búsqueda alternativas. Funciona en conjunto con un
plugin y un componente, ambos llamados Smart Search. Para poder utilizar
este sistema, primero debe activar el plugin Smart Search y utilizar el
componente Smart Search para indexar todo el contenido.
Muestra todos los canales electrónicos que hay dentro de una categoría, en
Canales electrónicos
formato del tipo lista o tabla.
Estos enlaces del menú llevan a los visitantes del sitio a una página con
los datos sobre uno o más contactos. Estos son parte del componente
Contactos de Joomla (vea el capítulo 4).
Tiene las opciones:

Contactos
}}Mostrar los contactos destacados
}}Mostrar todas las categorías de contactos
}}Mostrar todos los contactos de una categoría
}}Mostrar un solo contacto
Tiene las opciones:
}}Crear un alias a otro elemento del menú (una copia de un enlace del
menú existente)
Enlaces del sistema
}}Crear un separador (No es un enlace, sino una línea utilizada para
separar visualmente las diferentes partes del menú)
}}Crear una URL (a un sitio externo)
}}Encabezado del menú
Nombre ¿Qué tipo de enlace del menú es este?
Enlace a páginas con enlaces a otros sitios. Los enlaces web que desea
mostrar deben ser ingresados a través del componente de enlaces web.
Tiene las opciones:

Enlaces web
}}Mostrar todas las categorías de enlaces web
}}Mostrar todos los enlaces web de una categoría
}}Mostrar un formulario para crear y enviar un enlace web
Enlace a una página que muestra una página web externa en este sitio (en
un cuadro).
Tiene las opciones:

Etiquetas
}}Elementos etiquetados
}}Lista compacta de elementos etiquetados
}}Lista de todas las etiquetas
Gestor de la Muestra las opciones de configuración para el sitio, o muestra las opciones
configuración de la plantilla.
Enlace a páginas especiales para los usuarios con permisos adicionales,

por ejemplo, un registro y en la página principal de sesión.
Gestor de usuarios Tienen las opciones:
}}Mostrar la información del perfil de usuario

}}Mostrar un formulario de datos de acceso
Muestra una URL embebida dentro de un marco de ventana. Por ejemplo,

URL embebida
un video de YouTube.
Mundo real
Pruebe los Tipos de elementos del menú
La extensa lista de Tipos de elementos del menú parece atractiva, ¿por qué no probar los
diferentes tipos de elementos de menú? Agregue un nuevo enlace de menú al menú principal
y seleccione un tipo de elemento de menú que no haya utilizado todavía. Compruebe los
tipos de enlace de menú Buscar, Enlace externo, o Separador, que son bastante sencillos.
Algunos otros, como el enlace a Usuarios, son bastante complejos y no tendrán sentido a
primera vista, pero no se preocupe, no van a estropear su sitio de manera permanente y
puede fácilmente cambiar o eliminar otra vez los elementos del menú no deseados. En el
curso de este libro, aprenderá a utilizar muchos de estos tipos de elementos del menú.
Nota Por qué usted tiene que crear enlaces del menú de forma manual
Puede preguntarse por qué Joomla no automatiza el proceso de agregar

enlaces del menú tan pronto como crea nuevos contenidos. La creación manual
de los enlaces del menú le da mucho más control. Usted determina a qué tipo de
página apunta un enlace del menú, en qué orden aparecen los enlaces del menú,
en qué páginas aparecerán y así sucesivamente. Y no se preocupe, solamente
hará que los elementos de menú apunten a las páginas principales y grupos de
contenido, no a todas y cada una de las páginas. Los menús generalmente apuntan
a páginas generales, un par de artículos seleccionados y las páginas de funciones
especiales (como una página de búsqueda). Joomla creará automáticamente los
enlaces a cualquier cantidad de artículos por debajo de los niveles principales,
el uso de las páginas de información general, como hemos visto en el capítulo 6,
Crear contenido de calidad: Agregar y editar artículos.
7.8 Crear enlaces de texto plano

A veces usted querrá mostrar hipervínculos que no forman parte de un menú, sino que están
incrustados en un texto del artículo. Para crearlos, utilice el botón Artículo, ubicado en la parte inferior
de la pantalla del Editor de artículos:
Esto hace que la adición de enlaces sea muy sencilla. Vamos a ver cómo funciona.
Ejercicio 7: Crear enlaces al texto

Vamos a crear un hipervínculo interno, es decir, un enlace de texto de una página a otra página en el
mismo sitio.
1. Vaya a Contenido | Gestor de artículos y abra el artículo al que desea agregar un enlace.
2. Coloque el cursor del mouse en el texto del artículo, en la posición en la que desea insertar el
hipervínculo.
3. Ahora haga clic en el botón Artículo, en la parte inferior de la pantalla del editor. Aparecerá una
pantalla emergente, enumerando todos los artículos en el sitio. Haga clic en el título del artículo
que desea establecer como enlace (en este ejemplo, Congreso anual de la SNI).
4. La pantalla emergente se cierra. Se inserta un enlace al artículo de destino.
5. Vamos a modificar un poco el texto del enlace. De manera predeterminada, se trata del título del
artículo de destino. Para cambiar esto, puede editar el texto del hipervínculo al igual que lo haría
con cualquier otro texto en la pantalla del Editor de artículo. Sin embargo, si desea reemplazar
todo el texto del hipervínculo, es más fácil cambiar a la vista de código HTML. De lo contrario, usted
podría quitar inadvertidamente el hipervínculo cambiándola a texto sin formato. Para editar el
texto, haga clic en el botón Cambiar editor.
6. Ahora se muestra el código HTML del texto. Busque el código del hipervínculo, el código que
empieza con <a href. Debe ser similar al siguiente:
<ahref="index php?option=com_content&view=article& id = 80 & amp; catid = 80
`& Itemid = 476 "> Congreso anual de la SNI < / a> < / p>
7. Para reemplazar el texto del enlace por Registrarse en el congreso, cámbielo de la siguiente manera:
8. <ahref="index php?option=com_content&view=article& id = 80 & amp; catid = 80
`& Itemid = 476 "> Registrarse en el congreso < / a> < / p>
9. Haga clic en Guardar y cerrar y haga clic en Ver sitio. Examine al artículo que ha editado, que ahora
contiene un enlace de texto.
Ha creado un hipervínculo de texto de un artículo a otra página en el mismo sitio. Puede crear un
hipervínculo a cualquier página en el sitio, siempre que ya exista un enlace del menú que apunte a él.
TIP
Si a menudo se necesita agregar enlaces de texto a artículos, hay otro
editor disponible que le da aún más flexibilidad: el Editor de contenido
Joomla (JCE), que le permite simplemente hacer clic y seleccionar
cualquier elemento en el sitio, no solo los artículos. Para saber más
sobre el editor JCE, consulte el capítulo 9.
Cap.
Apertura del sitio:

Permitir que los usuarios
8
ingresen y contribuyan
CAP. 8: Apertura del sitio : Permitir que los usuarios ingresen y contribuyan 181
En los últimos capítulos ha configurado un pequeño gran sitio, pero todavía hay algo bastante pasado
de moda al respecto. Usted es la única persona que tiene acceso al sitio, y permiso para agregar y
administrar contenido. Esto significa que aún no se ha beneficiado de las herramientas integradas de
Joomla para crear un equipo de usuarios especialmente designados, que pueden conectarse al sitio
para agregar o editar contenido. En Joomla, se le permite agregar tantos colaboradores de contenido
según sea necesario y se les puede dar permiso para crear o editar artículos, o para realizar más
acciones.
Pero la apertura de su sitio al mundo no termina ahí, ya que Joomla ofrece algunos métodos de gran
alcance para involucrar a los visitantes de su web y convertirlos en usuarios activos. Puede permitir a
los visitantes registrarse y darles acceso exclusivo a contenido Premium. Además, puede permitir que
se califiquen los artículos, dando a los demás una buena indicación del contenido de lectura obligada.
En este capítulo, usted aprenderá a crear y administrar cuentas de usuario, permitiendo a los
miembros del equipo web acceder y mantener los contenidos del sitio; configurar el auto-registro para
los visitantes del sitio y crear contenido solo para usuarios registrados; además, podrá crear grupos y
permisos de usuarios, es decir, un ejemplo práctico de cómo se puede utilizar ACL.
Uno de los cambios más recientes en Joomla es la introducción de un nuevo sistema para administrar
los permisos de usuario, llamado Listas de Control de Acceso (Access Control Lists - ACL). Actualmente,
Joomla le ofrece un control casi infinito de lo que los usuarios pueden ver y hacer en el sitio; sin
embargo, fuera del sistema de ACL viene con un conjunto de grupos de usuarios básicos y permisos
predeterminados, y en muchos casos estos pueden ofrecer todas las características que usted necesita.
Primero vamos a echar un vistazo a lo básico, y más tarde en este capítulo vamos a cubrir un ejemplo
de las formas más avanzadas para implementar el sistema de ACL, mediante la elaboración de grupos
de usuarios hechos a medida y sus diferentes configuraciones de permisos.
8.1 Cuáles son los grupos de usuarios predeterminados y sus permisos
Después de instalar Joom-

la, una serie de grupos
de usuarios ya están
presentes, cada uno con
sus propios permisos apli-
cados. Vamos a echar un
vistazo a la configuración
predeterminada.
Para ver los grupos pre-

determinados y sus
permisos, vaya a Sistema |
Configuración global y haga
clic en la ficha Permisos. Se
muestra la siguiente pantalla,
llamada Configuración de
los permisos:
Aquí, todos los grupos de usuarios disponibles en la actualidad se muestran en un conjunto de paneles.
Un grupo de usuarios es un conjunto de personas que comparte los mismos permisos, como Público,
Gestor o Administrador. El panel que muestra los permisos del grupo actual se muestra expandido
(por defecto, este es el grupo superior, Público).
En el panel ampliado para el grupo Público, se muestran los permisos genéricos (en todo el sitio):
Acceso al sitio, Acceso a la Administración, y así sucesivamente. Estas configuraciones de permisos
controlan las cosas que a los usuarios se les permite hacer en el sitio. Para los grupos de usuarios
predeterminados, estos permisos ya se han ajustado.
Al agregar nuevas cuentas de usuario al sitio, se asigna los usuarios a uno de estos grupos de usuarios,
otorgándoles diversos niveles de acceso al sitio. Si necesita ajustes hechos a medida de los permisos,
puede crear sus propios grupos de usuarios con un conjunto específico de permisos. Sin embargo,
lo mejor es comenzar a usar los grupos predeterminados y sus permisos. A continuación, se dará un
resumen.
A. Usuarios públicos e invitados: Los visitantes del sitio

El nivel público es el nivel más básico, ya que cualquier persona que visite su sitio es considerada
parte del grupo Público. Los miembros de este grupo pueden ver el frontend interfaz del sitio, pero
no tienen ningún permiso especial.
De forma predeterminada, el nivel de Acceso de contenidos en un sitio Joomla se establece

en Público. El administrador del sitio puede establecer el nivel de acceso a diferentes tipos de
contenidos, que van desde módulos y elementos de menú hasta los artículos individuales, que se
muestran en la siguiente captura de pantalla:
Cuando el Acceso se establece en Público, esto indica que cualquier persona perteneciente al grupo
público (los visitantes de su sitio) será capaz de ver el contenido. Cuando el acceso se establece en
cualquiera de los otros niveles disponibles (tema que será cubierto más adelante en este capítulo),
se aplican reglas de visualización específicas para grupos de usuarios específicos.
A primera vista, el grupo Invitados parece similar al grupo de usuarios Público. Los invitados
son usuarios que no han iniciado sesión; sin embargo, la presencia del grupo Invitados tiene un
propósito específico. Aparte de los contenidos públicos, el contenido Invitado está oculto una vez
que los usuarios han iniciado sesión. Asignar el nivel de acceso de Invitado le permite mostrar
el contenido a los usuarios no-registrados, y le permite ocultar el contenido para los usuarios
registrados. Por ejemplo, si tiene un módulo de anuncio (banner) en su sitio web que dice Acceda
ahora, puede ocultar este módulo a las personas que ya han iniciado sesión al establecer su nivel
de acceso a Invitado.
B. Los usuarios Registrados: El grupo de usuarios que pueden acceder

Estos son los visitantes regulares del sitio, excepto por el hecho de que han registrado y activado
su cuenta. Después de haber iniciado sesión con sus datos de cuenta, los usuarios registrados
pueden ver el contenido que se ha ocultado a los visitantes ordinarios del sitio (usuarios públicos),
debido a que el nivel de Acceso de ese contenido se ha ajustado a Registrado. El ajuste de Acceso
a Registrado le permite presentar todo tipo de contenidos para los usuarios registrados, que los
usuarios normales (públicos) no pueden ver.
Aunque los usuarios registrados tienen derechos especiales de acceso, no pueden aportar
contenidos. Son parte de la comunidad de usuarios, no del equipo web.
C. Autor, Editor y Publicador: Los contribuyentes de contenido al frontend

Hasta ahora, usted ha experimentado únicamente las capacidades de edición del backend de
Joomla. Para cambiar cualquier cosa en el sitio, inicie sesión en el servidor para acceder a la interfaz
de administración. También es posible conectarse a la interfaz y editar o agregar artículos de
inmediato, a través de una pantalla de editor de contenido frontend. Vamos a ver cómo funciona
eso más adelante.
La idea detrás de tener posibilidades de edición del frontend es reducir el umbral para los
contribuyentes de contenido no técnico. Ellos no tienen que molestarse en aprender la interfaz del
backend y pueden editar o agregar artículos directamente en una interfaz que ya conocen, es decir,
el frontend público del sitio.
A los Autores, Directores y Editores se les permite conectarse al frontend para editar o agregar
artículos. Hay tres tipos de contribuyentes de contenido al frontend, cada uno con sus niveles de
permisos específicos:
}}Los Autores, que pueden crear nuevos contenidos para su aprobación por un Publicador o alguien
superior en rango. Pueden editar sus propios artículos, pero no editar los artículos creados por
otros.
}}Los Editores, que pueden crear nuevos artículos y editar los ya existentes. Un Publicador o
superior deben aprobar sus envíos.
}}Los Publicadores, que pueden crear, editar y publicar, despublicar, o mover a la papelera artículos
en el frontend. No pueden eliminar contenido.
Los autores y editores no pueden publicar contenido. Solo después de la aprobación de un

Publicador (o alguien superior en rango) el contenido que envían será visible. Aunque esto tiene
sus ventajas, alguien estará haciendo un doble control de todo el contenido antes que se haya
publicado, ya que tener que revisar todos los nuevos artículos puede crear una carga de trabajo
adicional para los que tienen permisos de publicación, y posiblemente podría convertirse en un
cuello de botella que impida un flujo constante de nuevo contenido. Eso podría ser una razón para
asignar permisos de Publicador en vez de Autor a los miembros de su equipo web. Los publicadores
tienen los mismos permisos que los autores y los editores, pero son los que en realidad también
pueden publicar contenido.
TIP
En general, la asignación de un usuario al grupo Editorial será una

buena opción cuando se desea que los miembros del equipo web
agreguen y publiquen contenido de forma individual, sin tener que
concederles acceso al (más complejo) backend del sitio. Los editores
pueden crear fácilmente nuevos contenidos, sin tener que aprender
su manera alrededor en el backend, o ser capaces de crear el caos
por cambiar las cosas que no deberían.
D. Gestor, Administrador, SuperUsuario: Los contribuyentes de contenido al backend

Por último, hay tres tipos de usuarios de backend. Ellos tienen todos los permisos del grupo
frontend, pero también se les permite conectarse al servidor para agregar y administrar contenido,
o para realizar tareas administrativas.
}}Los Gestores pueden hacer todo lo que los editores pueden, pero también se les permite
conectarse al backend del sitio para crear, editar o borrar artículos. También pueden crear y
administrar las categorías. Ellos tienen acceso limitado a las funciones de administración.
}}Los Administradores pueden hacer todo lo que los Gestores pueden, y tienen acceso a más
funciones de administración. Pueden administrar usuarios, editar o configurar las extensiones,
y cambiar la plantilla del sitio. Ellos pueden usar pantallas administrativas (Gestor de Usuarios,
Gestor de artículos, etc.) y pueden crear, borrar, editar y cambiar el estado de los usuarios,
artículos, etc.
}}Los Súper Usuarios pueden hacer todo lo posible en el backend. Cuando se instala Joomla,
siempre hay una cuenta de SuperUsuario creada, por lo general, por la persona que construye y
personaliza la página web. En el ejemplo de la actual página web, usted es el SuperUsuario.
E. Proveedores y Clientes: Dos ejemplos de grupos de usuarios

Si ha instalado Joomla con el contenido de muestra, se dará cuenta de dos grupos en la pantalla
Configuraciones de Permisos que no hemos cubierto todavía: Shop Suppliers (Example) y
Customer Group (Example). Estos grupos de usuarios se han agregado como parte de los datos de
ejemplo, para mostrar cómo usted puede crear grupos personalizados.
8.2 Permitir a los usuarios conectarse y aportar contenido

Vamos a ver cómo puede utilizar los grupos de usuarios predeterminados para agregar un par de
personas que puedan conectarse al sitio y aportar contenido. Después de instalar Joomla, solo hay un
usuario presente, el Súper Usuario. Al navegar a Usuarios | Gestor de Usuarios, puede comprobar los
detalles de la cuenta del Súper Usuario, el Nombre (por defecto es Super User), el Usuario (esto es
admin, a menos que lo haya cambiado usted mismo al configurar su cuenta), si esta cuenta de usuario
está en estado Habilitado, la dirección de correo electrónico del usuario, la Fecha de la última visita
y la Fecha de registro del usuario y el ID del usuario (un número de identificación de usuario que es
utilizado por el sistema).
Haga clic en el Nombre del usuario para editar los detalles de su cuenta. Por ejemplo, por razones de
seguridad probablemente desea cambiar el Usuario predeterminado (admin) por algo que sea más
difícil de adivinar. Solo tiene que introducir un nuevo nombre y guardar los cambios. La próxima vez
que inicie sesión, utilice sus credenciales actualizadas.
TIP
También hay un atajo disponible que le lleva a la configuración de

su propio usuario; el Editor de Perfil es un icono de enlace rápido
en el Panel de control. En esta pantalla, puede cambiar su Nombre,
Usuario, Contraseña y otros detalles; sin embargo, no puede manejar
todos los detalles de la cuenta aquí. Por ejemplo, solo puede cambiar
los grupos de usuarios a los que se les ha asignado esta cuenta a
través de Usuarios | Gestor de usuarios y haciendo clic en la cuenta
Nombre.
Vamos a ver cómo se puede hacer uso del Gestor de usuarios, el Gestor del backend de Joomla donde
puede ver, editar y crear los usuarios del sitio. Vamos a agregar algunas otras personas en el sitio, que
además del Super User, les permita agregar contenido.
Ejercicio 1: Agregar un usuario con permisos de autoría en el frontend

Vamos a crear cuentas de usuario para un par de miembros de la empresa, que van a convertirse en
contribuyentes de contenido.
1. Vaya a Usuarios | Gestor de usuarios.

2. Solo hay un usuario: usted. Por defecto, Joomla llama a este primer usuario Super User (y este
usuario pertenece al grupo de Super Users). Para agregar otro usuario, haga clic en el botón Nuevo,
en la barra de herramientas.
3. En la pantalla Añadir nuevo usuario, agregue Detalles de la cuenta si lo desea. En este ejemplo,
hemos ingresado Juan Perez en el campo Nombre. En el campo Nombre de usuario hemos
ingresado jperez. Ingrese una contraseña y una dirección de correo electrónico válida para el nuevo
usuario.
4. Haga clic en la ficha Grupos de usuarios asignados y seleccione Author. Esto permitirá al nuevo
usuario enviar y editar contenido (después de acceder en la frontend del sitio).
5. Haga clic en Guardar y cerrar. La pantalla Gestor de usuarios muestra ahora el nuevo usuario.
En la lista de usuarios de sitio en el Gestor de usuarios, ya no está solo. Como el Sr. Juan Perez
ha asignado al grupo de usuarios Author, ahora se le permite conectarse al frontend y agregar
contenido. Sin embargo, para permitir que el nuevo usuario haga algo, tendremos que crear un
camino para que él inicie sesión en el frontend. Después de todo, el método de acceso que usted ha
estado utilizando (a través de una URL del backend, como http://www.susitio.com /administrator)
solo es accesible a los usuarios con acceso backend, y el señor Juan Perez no tiene esos permisos.
8.3 Habilitar a los contribuyentes de contenido para conectarse al frontend

Una vez que haya asignado usuarios al grupo de Autores, Editores o Publicadores, tiene que haber una
entrada al frontend del sitio. En Joomla, la entrada al frontend es el formulario de acceso. Después de
instalar Joomla, el módulo Formulario de Acceso ya está activado y mostrado en la página principal. Si
no ha cambiado esta configuración predeterminada, puede omitir el paso siguiente. Si ha desactivado
o eliminado el Formulario de Acceso, actívelo como se describe en la siguiente sección:
Ejercicio 2: Colocar un Formulario de Acceso en la página principal

El módulo Acceso es parte de la instalación predeterminada de Joomla. Así es como se asegura que sea
visible en la página principal.
1. Vaya a Extensiones | Gestor de módulos. Localice el módulo Login Form (Formulario de Acceso) y
haga clic en su nombre para editar la configuración del módulo. Seleccione Estado: Publicado para
publicar el módulo. La Posición está en position -7, para mostrar el módulo de Login en la columna
de la derecha en la plantilla del sitio actual.
2. Asegúrese que Asignación de Menú se establezca solamente en Home; de esta manera, el módulo
de Login solo se mostrará en la página principal. Podemos asumir con seguridad que los usuarios
probablemente van a querer conectarse al sitio directamente desde la página principal, así que
no hay necesidad de saturar el valioso espacio en pantalla con un formulario de acceso en otras
páginas.
3. En este ejemplo, vamos a dejar las opciones de la ficha Módulo sin cambios. Puede introducir aquí
algún Texto inicial o Texto final, es decir, un texto que se muestra antes o justo debajo del módulo
Login.
4. Haga clic en Guardar y luego en Ver sitio para comprobar la salida en el frontend. En la columna de
la izquierda, el formulario de acceso se mostrará por debajo del menú principal.
Ahora, ha permitido a los usuarios acceder a su sitio a través de un Formulario de Acceso. Tal vez se ha
dado cuenta que tan pronto como se agrega este formulario, también se muestra un enlace llamado
Crear una cuenta. Por defecto, Joomla está configurado para permitir el autoregistro del usuario. Podrá
leer más sobre el registro de usuario más adelante en este capítulo.
Ejercicio 3: Conectarse como un colaborador de contenido al frontend

Hay un usuario asignado al grupo Author, hay un Formulario de Acceso para permitir a este usuario a
entrar en el sitio. ¿Por qué no probamos cómo nuestro Autor accede y envía contenido?
1. Vaya al frontend del sitio y utilice el Formulario de acceso para conectarse como nuevo usuario (en
este ejemplo jperez).
2. En la columna de la derecha, aparece un Menú de usuario (User Menu). Este es parte de la
instalación predeterminada de Joomla, y está llamado a ser solamente visible cuando un usuario
ha iniciado sesión (por eso aparece de repente). El Menú de usuario proporciona enlaces solo a
las funcionalidades disponibles para los usuarios registrados. Por ejemplo, permite que el autor
vea y edite sus datos de usuario. Sin embargo, estamos sobre todo interesados en la posibilidad de
ingresar nuevos contenidos, así que vamos a hacer clic en el enlace Enviar un artículo (Submit an
Article). Ahora, aquí hay una sorpresa, ¡el frontend de Joomla se convierte en un editor de páginas
web en vivo!
3. Para propósitos de prueba, escriba un título, un texto del artículo y seleccione la categoría apropiada
(haga clic en la ficha Publicando para encontrar el cuadro desplegable Categoría). En este ejemplo,
hemos creado un artículo ficticio llamado Fascination da la bienvenida a este sitio web, en la
categoría Noticias.
4. Haga clic en Guardar para enviar el artículo. Usted verá un aviso: Artículo enviado correctamente.
Acaba de conectarse en su propio sitio como si fuera parte del grupo de usuarios Autor. Como autor,
puede enviar contenido al frontend del sitio. El nuevo artículo no se publica en el sitio todavía, pero
llegaremos a eso en unos momentos.
Mundo real
Cree un menú de usuario frontend
En el ejemplo anterior, ha visto que aparece de repente un Menú de usuario cuando un usuario
registrado inicia sesión. Este Menú de usuario está preinstalado cuando elige instalar Joomla
con los datos de ejemplo. Ahora, si usted no ha instalado los datos de ejemplo, va a desea que
sus Autores se registren para poder enviar contenido. Para ello, cree su propio menú especial
para los usuarios del frontend.
El procedimiento es bastante sencillo, y estos son más o menos los pasos a seguir: en el Gestor
de menús, cree un nuevo menú y llámelo, por ejemplo, Menú de Usuario. Ahora tiene un menú
vacío, haga clic en el nombre del menú y haga clic en el botón Nuevo para agregar enlaces.
Para habilitar que los autores (o superior) envíen un artículo, en la lista Tipo de elemento
de menú agregue un enlace al tipo Artículos | Mostrar el formulario para crear y enviar un
artículo. Establezca el nivel de Acceso a Special, lo que garantiza que el enlace de menú solo
este visible para los usuarios con permisos de Autor o superior. Guarde sus cambios y agregue
un módulo de menú destinado a mostrar el menú. En el Gestor de menús, en la parte derecha
haga clic en Agregar un módulo para este tipo de menús. Asegúrese de configurar su nuevo
módulo de menú que se publicará. Si no recuerda cómo crear un menú, eche un vistazo de
nuevo al capítulo 7.
Nota Permitir a los usuarios gestionar sus propias cuentas
El formulario de acceso predeterminado ya permite a los usuarios

conectarse, crear una nueva cuenta, y recuperar su contraseña o nombre de
usuario. Sin embargo, en lugar de usar el formulario de acceso también puede
crear enlaces del menú por separado a una página de acceso, una página de auto-
registro, o a una página que permita a los usuarios gestionar los detalles de sus
cuentas (por ejemplo, para cambiar su contraseña). Encontrará estos tipos de
enlaces particulares en la sección Gestor de Usuarios de la pantalla Seleccione un
Tipo de elemento del menú. Vamos a tratar algunos de estos enlaces al Gestor de
Usuarios más adelante en este capítulo, en la sección Permitir que los visitantes
se registren.
8.4 Revisar y publicar los envíos de contenido del equipo

Hasta ahora, ha visto cómo se pueden crear cuentas de usuario para los miembros del equipo en su
sitio y cómo puede permitirles entrar. También ha cambiado a otro rol para ver su sitio a través de los
ojos de una sesión iniciada por miembros del equipo, es decir, Autor o alguien que es capaz de enviar
(pero no publicar) contenido. Ahora vamos a ver cómo puede enviar el contenido para que se muestre
en el sitio.
Ejercicio 4: Revisar y publicar el contenido enviado

Una vez más, vuelva a su rol original, el Súper Usuario. Ahora que un autor ha enviado un artículo,
usted debe revisar y aprobar el nuevo contenido para publicarlo.
1. Inicie sesión en el backend de su sitio en su rol predeterminado, Súper Usuario. En la barra de

información (en la zona inferior izquierda de la pantalla) Joomla le notificará que tiene exactamente
el mensaje siguiente:
2. Haga clic en el enlace número 1. Alternativamente, puede ver los mensajes a través de Componentes
| Mensajería | Leer mensajes privados. Verá esta pantalla:
3. Haga clic en Artículo nuevo para leer el mensaje que dice: Se ha enviado un nuevo artículo por Juan
Perez, titulado «Fascination da la bienvenida a este sitio web».
TIP
Recibir recordatorios de envíos
¿Quiere obtener una notificación por correo electrónico cada vez

que un nuevo contenido es enviado? Navegue hasta Componentes
| Mensajería | Leer mensajes privados y haga clic en el botón Mi
configuración, en la barra de herramientas. Seleccione Notificar la
recepción de mensajes: Sí.
4. Para revisar y publicar el nuevo artículo, vaya a Contenido | Gestor de artículos y localice el nuevo
artículo. (Otra forma de encontrar nuevos artículos es navegar hasta Sitio | Panel de control y
explorar el panel Artículos agregados recientemente). Se dará cuenta que un círculo rojo en la
columna Estado indica que el artículo está todavía despublicado. Haga clic en el título del artículo
para ver y editar como desee.
5. Cuando esté satisfecho con el artículo, haga clic en Guardar. En la columna Estado del Gestor de
artículo, haga clic en el círculo rojo. Se convertirá en una marca de verificación de color verde y
blanco.
6. Haga clic en Ver sitio. En la sección Noticias se muestra el nuevo artículo.
Iniciando sesión como administrador del sitio, puede revisar los artículos que han sido presentadas por
los autores. Puede revisar un artículo, editarlo y publicarlo si está de acuerdo con él.
Mundo real
Explorar los permisos de diferentes grupos de usuarios
Hasta ahora ha visto lo que a los autores se les permite hacer en Joomla. ¿Por qué no explorar
los permisos de otros Grupos de usuarios? Es una buena idea cambiar los permisos de los
usuarios del nuevo ejemplo e iniciar sesión como este usuario, conociendo las posibilidades
de cada grupo de usuario. El cambio de los permisos de usuario solo le tomará unos pocos
clics. Los siguientes son algunos consejos para que comience.
A. Averigüe lo que los editores y publicadores pueden hacer

Vaya a Usuarios | Gestor de usuarios y haga clic en el nombre del usuario de prueba (en nuestro
ejemplo, Juan Perez) que ha agregado anteriormente y que ha asignado al grupo Autor. Ahora, en
el apartado Grupos de usuarios asignados, seleccione Editor para darle al usuario nuevos permisos
de edición en el frontend. Haga clic en Guardar y conéctese al frontend con el usuario y contraseña
del Sr. Perez. Verá que hay una pequeña diferencia, si hace clic en el icono de la rueda que se
muestra junto al título del artículo, accederá a un enlace especial llamado Editar.
Esto abre una gama de nuevas posibilidades. Al hacer clic en él, la página web se convierte en
una pantalla de editor, justo como la que usted ha visto antes, cuando ha enviado un artículo
(ver Ejercicio 3: Conectarse como un colaborador de contenido al frontend, anteriormente en
este capítulo). Como puede ver, los editores pueden cambiar el texto de los artículos existentes
editándolos en el frontend del sitio y publicando inmediatamente el artículo editado. A pesar de
que no pueden crear y publicar contenido por su cuenta (sin el consentimiento de un Publicador o
superior), se les permite hacer cambios al contenido existente bajo su control.
Para saber lo que pueden hacer los Publicadores, cambie el grupo de usuarios al que pertenece
Sr. Perez por Publicador. Tras conectarse al frontend, a primera vista no hay diferencias entre
este rol y el rol de editor. Sin embargo, después que haya editado o creado un artículo, este será
inmediatamente publicado luego de haberlo grabado. El artículo no se someterá primero a revisión.
B. Averig�e lo que los usuarios del backend pueden hacer

Un paso final en la actualización de las cuentas de usuario es la asignación de una de las tres
cuentas de backend: Gestor, Administrador, o Súper Usuario. Por ejemplo, cambie la cuenta de
usuario Publicador existente y asigne el usuario al grupo Manager. Ahora puede conectarse con
este Usuario y Contraseña al backend del sitio (a través de http://www.misitio.com/administrator).
Después de conectarse se le llevará al Panel de control del backend, donde puede agregar y editar
contenido de la misma manera que está acostumbrado en su rol como administrador del sitio.
Como al nuevo usuario se le ha asignado el rol de Manager, tiene permisos para hacer la mayoría
de cosas que pueden los administradores del sitio con el contenido (crear nuevas categorías y
artículos, administrar contactos, y así sucesivamente).
Sin embargo, se dará cuenta que un manager no puede gestionar usuarios, extensiones o
plantillas. En comparación con las opciones del backend a las que usted como Súper Usuario está
acostumbrado, solo están disponibles un número limitado de menús, elementos de menú y los
accesos directos.
8.5 Habilitar el autorregistro: Permitir que los visitantes se registren

En la sección anterior, estableció manualmente nuevas cuentas de usuario en el servidor utilizando el
Gestor de usuarios. Darle acceso al equipo de colaboradores de contenido al sitio es una gran manera
de colaborar en el mantenimiento del sitio y mantener su contenido actualizado.
Otra forma de aperturar su sitio es permitir el auto-registro de los usuarios. De esa manera, una
comunidad de usuarios puede desarrollar y cualquier cantidad de usuarios pueden inscribirse sin que
el administrador del sitio tenga que hacer o aprobar algo (por supuesto, el administrador sigue siendo
responsable y tiene la capacidad de bloquear o eliminar usuarios).
Los usuarios registrados no aportan contenido, pero sí tienen acceso exclusivo a partes del sitio en
donde el nivel de Acceso se establece en Registrado. Primero vamos a encontrar la manera de crear
contenido de solo miembros y permitir que los visitantes se unan mediante el auto-registro.
8.5.1 Permitir que los usuarios creen sus propias cuentas
Pudo haber saltado de su atención, pero al configurar un Formulario de acceso (ver Ejercicio:
Colocar un formulario de acceso en la página principal, anteriormente en este capítulo), también
ha habilitado el autoregistro del usuario. Por defecto, el módulo Login no solo permite que los
usuarios existentes se conecten, sino que también contiene un enlace invitando a los visitantes a
crear una nueva cuenta.
TIP
Si no desea que los usuarios puedan registrarse, vaya a Usuarios

| Gestor de usuarios y seleccione el botón Opciones. En la ficha
Componente, asegúrese que Permitir el registro de usuarios esté
establecido en No (el valor predeterminado es Sí). Ahora, el enlace
Crear una cuenta desaparecerá.
8.5.2 Mostrar un enlace al menú de acceso
Aunque Joomla por defecto está configurado para mostrar un pequeño formulario de acceso en la
página principal, puede encontrar esto demasiado grande o llamativo. Si prefiere mostrar solo un
pequeño enlace de Acceso (Login) que apunte a una página independiente de acceso, eso también
es posible.
Para agregar un enlace de Acceso, navegue hasta Menús | Main Menu, haga clic en Nuevo y, en la
pantalla emergente, Seleccionar un Tipo de elemento de menú, seleccione Gestor de Usuarios |
Mostrar un Formulario de datos de Acceso. Agregue un título para el enlace (por ejemplo, Inicio
de sesión), y haga clic en Guardar y cerrar. Ahora una página Formulario de acceso se mostrará
después que el visitante haya hecho clic en el enlace de Acceso
Como el Formulario de acceso en la columna derecha de la página principal ya no es necesario,

despublique el módulo Formulario de acceso a través de Extensiones | Gestor de módulos.
Ejercicio 5: Registrarse y conectarse usted mismo

Vamos a ver lo que los visitantes del sitio tienen que hacer para crear una cuenta. Para probar esto,
vamos a crear nosotros mismos una cuenta de usuario simulada. Cierre sesión en el sitio y vaya al
frontend.
1. En el frontend, haga clic en el enlace Crear una cuenta, debajo del Formulario de acceso, en la
columna de la izquierda (si ha creado un enlace del menú a una página independiente de acceso,
tal como se describe anteriormente, a continuación, haga clic en este enlace del menú y haga clic
en ¿No tiene una cuenta?). Esto le llevará a la página de registro de usuario. Ingrese sus datos y
asegúrese de usar una dirección de correo electrónico válida.
2. Después de hacer clic en Registrar, se le lleva a la página principal. En esta, Joomla muestra un
mensaje del sistema confirmando que su cuenta ha sido creada.
3. Joomla ahora le enviará un e-mail generado automáticamente. Contiene un enlace en el que debe
hacer clic en para activar su nueva cuenta de usuario. Esto le llevará a la página principal y se
mostrará un mensaje de confirmación. Su cuenta se ha activado correctamente. Ahora puede
conectarse utilizando el usuario y la contraseña que eligió durante el registro.
¡Usted es ahora oficialmente un miembro de su propia página web! Trate de hacer esto utilizando el
Formulario de acceso en la página principal. Ingrese su usuario y contraseña y haga clic en el botón
Conectar. Se dará cuenta que el Formulario de acceso confirma que está conectado y muestra un
enlace Desconexión. Sin embargo, conectarse como usuario registrado aún no tiene mucho sentido,
ya que no hay contenido especial que solo los usuarios registrados puedan acceder. Nos encargaremos
de eso en un minuto.
TIP
También puede permitir a los usuarios a registrarse sin tener que

introducir una dirección válida de correo electrónico. Para ello, vaya
a Usuarios | Gestor de usuarios y haga clic en el botón Opciones.
Establezca Nueva activación de cuentas de usuario en Ninguno. Sin
embargo, tenga en cuenta que esto puede facilitar que los spammers
puedan crear cuentas de usuario falsas en su sitio.
8.6 Ocultar contenido a los usuarios no registrados

La creación de contenidos de solo miembros no toma mucho más que establecer el nivel de acceso
de un elemento Registrado. Este artículo será ocultado para los usuarios regulares, pero se mostrará
para aquellos que han iniciado sesión. La mayoría de bloques de construcción de Joomla se pueden
ajustar a un nivel de acceso específico. Ya sea que este bloque es simplemente una página específica,
un módulo o la totalidad de los contenidos de una categoría específica, se puede establecer que sea
visible solo para los usuarios registrados. Básicamente, esto significa que usted puede hacer que su
sitio se vea muy diferente para distintos tipos de usuarios. Los usuarios públicos solo pueden ver un
sitio web básico; en cambio, los usuarios registrados tienen el mismo contenido, más varios artículos,
menús, enlaces del menú o módulos adicionales.
Ejercicio 6: Ocultar contenido a los usuarios no registrados

Vamos a explorar cómo funciona el ocultamiento de contenido. De forma predeterminada, cada
elemento de menú es visible, y el Nivel de acceso se establece en Público. Vamos a cambiar esa
configuración para el enlace Actividades, que se muestra actualmente en el menú principal.
Vamos a hacer que el enlace Actividades solo sea visible para usuarios registrados que han iniciado
sesión.
1. Vaya a Menus | Main menu y haga clic sobre el enlace Actividades para editarlo.
2. En la ficha Detalles, establezca Acceso en Registrado (registered), y haga clic en Guardar y cerrar.
Eso es todo. Al cambiar un único parámetro de elemento de menú, ha ocultado efectivamente el

elemento de menú a los usuarios no registrados. La salida se muestra en la siguiente captura de
pantalla:
El enlace Actividades solo se mostrará cuando un usuario registrado haya iniciado sesión.
Mundo real
Cambie la configuración del nivel de acceso
Es posible que desee explorar la forma en que puede cambiar los niveles de acceso para
diferentes elementos en su sitio. Eche un vistazo a los detalles de cualquier artículo, elemento
de menú o módulo. Hallará que siempre está disponible el mismo conjunto de opciones de
nivel de Acceso. Por ejemplo, si desea hacer que un menú completo sea visible solo para
usuarios registrados, debe establecer el nivel de Acceso de ese módulo de menú particular.
Nota ¿De qué trata el nivel de acceso especial? Se habrá dado cuenta que hay
cuatro niveles de acceso predeterminados, no solo Público, Invitado y
Registrado, sino también Especiales. Lo que se establece en Especial solo
es visible para los autores y superior. Podrá leer más acerca de los niveles
de acceso más tarde en este capítulo, en la sección ¿Qué niveles de acceso
Visualización están disponibles?
8.7 Hacer que sus visitantes deban «Registrarse para leer más»
Es genial poder ocultar totalmente el contenido a los usuarios no registrados, pero este enfoque tiene
un inconveniente. No anima a los usuarios a registrarse, ya que simplemente no pueden ver lo que se
están perdiendo. A veces, es mejor mostrar a los usuarios no registrados solo una parte de un artículo
e invitarlos a unirse (Registrarse) para leer más.
En el sitio de ejemplo, vamos a hacer precisamente eso. No vamos a ocultar completamente el

contenido a los usuarios no registrados, ya que esto dejaría un sitio web con muy escasa información
para los visitantes nuevos, lo que no los va a persuadir de explorar las cosas ocultas.
Ejercicio 7: Ocultar parcialmente el contenido a los usuarios no registrados

Suponga que su cliente quiere ofrecer a sus miembros del sitio algunos contenidos exclusivos; cualquier
persona que se registre al sitio de Fascination podrá leer todo acerca de las exclusivas ofertas de la
empresa. Vamos a hacer que el contenido del enlace de menú Actividades | Reuniones se muestre
parcialmente, a menos que los usuarios se registren.
1. Asegúrese que está conectado al backend del sitio como Super Usuario. Abra el enlace del menú
Actividades (Menús | Main Menu) para editarlo. Asegúrese que el enlace en sí es visible para
todos. El Estado debe ser Publicado, y el acceso debe ser Public.
2. En la ficha Opciones, desplácese hasta el final y establezca Mostrar los enlaces no autorizados a
Sí. Este es el paso que se ocupa de la magia de «Regístrese para leer más». De todos los artículos
que han sido asignados al estado Registrado, solo se mostrará el texto de introducción. Guardar y
cerrar el enlace de menú.
3. Para establecer el nivel de acceso de los artículos deseados a Registrado, vaya a Contenido | Gestor
de artículos. En el cuadro desplegable Seleccionar Categoría, seleccione Reuniones.
4. Seleccione todos los artículos de Reuniones haciendo clic en la casilla de la fila superior izquierda.
5. Haga clic en el botón Lotes. En la pantalla emergente Procesar por lotes los artículos seleccionados,
hay un cuadro desplegable Asignar nivel de Acceso. Seleccionar Registered.
6. Haga clic en Procesar. En la columna Acceso, puede ver que todos los artículos son ahora Registered.
7. En el frontend, navegue a través del enlace Actividades a la página de resumen que contiene los
artículos de las categorías Reuniones (y Conferencias). Se dará cuenta que todos los artículos de
Reuniones ahora se muestran solo parcialmente, con el hipervínculo Regístrese para leer más.
Usted ha creado páginas web que pueden
ser totalmente vistas solo por los usuarios
registrados. Los artículos para los usuarios
registrados se muestran parcialmente con
un enlace Regístrese para leer más... Así, los
usuarios no registrados obtienen una muestra
del contenido registrado. Cuando los visitantes
del sitio hagan clic en el enlace Regístrese para
leer más... serán llevados automáticamente a
una página de acceso independiente.
Los visitantes que no han creado una cuenta

pueden hacer clic en ¿Todavía no tiene una
cuenta? Si los visitantes ya tienen una cuenta,
puede registrarse aquí. Usted puede comprobar
esto por sí mismo, accediendo de inmediato
con la cuenta de usuario ficticia que creó
anteriormente.
8.8 Crear grupos de usuarios a medida

Hasta ahora, hemos usado los grupos de usuarios y sus conjuntos de permisos que están disponibles
en Joomla listas para usarse. Sin embargo, también puede crear grupos de usuarios a medida y
asignarles permisos para hacer y ver solamente lo que usted les permita. En lugar de utilizar los grupos
de usuarios existentes y sus conjuntos predefinidos de permisos, puede crear tantos grupos como
desee y otorgar a las personas de esos grupos cualquier combinación de los permisos. Si lo desea,
puede establecer permisos para partes específicas del sitio, permisos aplicados a todo el sitio o a
componentes, categorías o artículos específicos (como un solo artículo).
La creación de un grupo de usuarios personalizado y la asignación de permisos implica los siguientes

cuatro pasos:
1. Crear un grupo de usuarios (un grupo de personas que comparten los mismos permisos).
2. Indicar a Joomla lo que el grupo puede ver. ¿Qué es visible en el sitio y qué es lo que se oculta a
ellos? En términos de Joomla, esto significa asignar un Nivel de acceso de visualización para el
grupo.
3. Indicar a Joomla lo que el grupo puede hacer. ¿Qué acciones se pueden llevar a cabo en el sitio? En
términos de Joomla, esto significa establecer los Permisos para este grupo de usuarios.
4. Agregar usuarios al grupo.
En primer lugar, veremos los tipos de permisos que puede asignar y qué Niveles de acceso de
visualización están disponibles. Después de eso, vamos a averiguar cómo configurar un nuevo grupo
de usuarios con permisos específicos utilizando este enfoque de cuatro pasos.
8.8.1 Permisos que se pueden asignar a los grupos de usuarios
Al asignar permisos (tales como los permisos para todo el sitio encontrados a través de Sistema |
Configuración global | Permisos), diez tipos de permisos están disponibles, tales como Acceso al
sitio, Acceso a la Administración, y así sucesivamente. La siguiente tabla muestra el significado de
los nombres de permisos:
Nombre del permiso Permite al usuario hacer lo siguiente:

Acceso al sitio Acceder al frontend del sitio web.
Acceder a la interfaz de administración del

Acceso a la Administración
backend.
Acceder a la interfaz del sitio web cuando está

Acceso fuera de línea fuera de línea (cuando el sitio se encuentra en
construcción).
Hacer cualquier cosa en el sitio. Estos usuarios

Súper Usuario
tienen todos los permisos del Súper Usuario.
Tener acceso administrativo al backend de Joomla,

Acceso a la Interfaz de administración
menos a la configuración global.
Crear Crear contenido nuevo.

Borrar Borrar contenido.
Editar Editar todo el contenido.
Publicar, despublicar, mover a la papelera y

Editar estado
archivar el contenido.
Editar propios Editar contenido que han creado ellos mismos.

Para permitir o denegar que los usuarios hagan las cosas, cada uno de los permisos disponibles
se puede configurar para Permitido o Denegado a un grupo de usuarios. Si el permiso no está
permitido o denegado explícitamente, está Sin asignar.
Nota Los grupos de usuarios padres e hijos
Al crear un nuevo conjunto de permisos para un grupo nuevo, no tiene

que configurar todos y cada permiso manualmente, ya que los permisos
son heredados entre los grupos. Es decir, un grupo de usuarios hijo recibe
automáticamente los permisos establecidos por su padre. Público es el grupo
de padres, Gestor es un hijo de Público, Administrador es un hijo de Gestor.
Los permisos son heredados por todos los grupos de hijos (a menos que estos
permisos se establezcan explícitamente a Permitido o Denegado, para romper la
relación de herencia). En otras palabras, un grupo de hijos puede hacer cualquier
cosa que un grupo de padres puede hacer, y más como es un hijo y por lo tanto
tiene establecidos sus propios permisos específicos, si agrega un nuevo grupo
como hijo del grupo Registrado, esto significa que su nuevo grupo hereda el
derecho de conectarse al sitio. En la pantalla Configuración de permisos, la
sangría de los nombres de grupos de usuario indica la jerarquía de permisos.
Si cambia la configuración, las modificaciones se aplicarán en este grupo y en todos sus subgrupos,
componentes y contenidos. Note que:
}}Heredado. Quiere decir que, para determinar el estado del permiso, se usará lo asignado desde
el grupo principal.
}}Denegado. Quiere decir que da igual cómo esté configurado el grupo principal, es decir, ese
grupo ya no podrá realizar esta acción (incluyendo a todos sus subgrupos, si tuviera).
}}Permitido. Quiere decir que el grupo podrá realizar esa acción (pero si esta configuración entra
en conflicto con lo asignado desde el grupo principal, no tendrá efecto, y el conflicto será indicado
con un No permitido (bloqueado) debajo del estado de configuración calculada).
}}Sin asignar. Solo se usa para el grupo público desde la configuración global. El grupo público es
el grupo principal de entre todos los demás grupos. Si un permiso está sin asignar, será tratado
como si estuviera asignado en Denegado, pero con la diferencia de que se podrá cambiar el
estado desde los subgrupos, componentes, categorías y elementos.
8.8.2 Niveles de acceso de visualización disponibles
Acabamos de ver qué cosas se les permite hacer a los usuarios a través de la configuración de
Permisos. Sin embargo, la determinación de lo que los usuarios pueden hacer no es todo lo que hay
que configurar en los permisos. También querrá controlar lo que los usuarios pueden ver en el sitio.
Aquí es donde entran los Niveles de acceso de visualización. Al asignar un nivel de acceso, usted
controla si los usuarios solo pueden ver el sitio público, si tienen acceso a secciones especiales del
frontend, o quizás acceder al backend. ¿Qué artículos, menús, módulos o componentes del grupo
de usuarios puede ver realmente?
Por defecto, están disponibles cuatro Niveles de acceso de Visualización: Público, Invitado,
Registrado, y Especial. El Nivel de acceso Personalizado es solo un ejemplo utilizado en los datos
de muestra. Vaya a Usuarios | Gestor de usuarios y haga clic en la ficha Niveles de acceso para ver
los niveles disponibles.
Esto es lo que significan los niveles de acceso de visualización predeterminados:
}}Público. Significa que no hay permisos especiales de visualización implicados. Es el conjunto de

permisos para el grupo de usuarios Público, que solo se permite el acceso al sitio público.
}}Invitado. Es el conjunto de permisos para usuarios invitados. Estos son los usuarios que no han
iniciado sesión. El propósito de este nivel de acceso es darles a los usuarios que no han iniciado
sesión acceso a determinados contenidos; en otras palabras, ocultar cosas a los usuarios una vez
que hayan iniciado sesión. El contenido que ha sido asignado al nivel de acceso de Invitado será
visible para los usuarios invitados, pero no para los usuarios que han iniciado sesión, es decir,
usuarios Registrados o usuarios Especiales.
}}Registrado. Es el conjunto de permisos para Usuarios registrados. Estos pueden conectarse al sitio
para ver las partes que se establecen en el nivel de acceso Registrado. El Contenido Registrado está
oculta a usuarios Público e Invitado.
}}Especial. Es el conjunto de permisos de visualización para todos los usuarios que participan en
el mantenimiento del sitio. En la configuración predeterminada, esto significa que el contenido
Especial es accesible para Autores, Directores, Editores, Gestores, Administradores y SuperUsuarios.
Los Niveles de acceso de visualización pueden establecerse para todo tipo de contenido en el sitio,
a partir de módulos y elementos de menú a los artículos individuales, cambiando el valor de la lista
desplegable Acceso.
8.9 Crear un grupo de usuarios personalizado para administrar los contactos

Vamos a ver cómo podemos crear un grupo de usuarios personalizado en nuestro sitio. Nuestro cliente
quiere establecer una base de datos de contactos en el sitio, utilizando el componente Contactos de
Joomla. Esto permitirá a los visitantes encontrar contactos específicos en la organización y ver sus
datos de contacto. Para crear esta base de datos, nos gustaría tener un nuevo tipo de usuario, alguien
que sea capaz de administrar la base de datos de contactos de su sitio, accedido a través Componentes
| Contactos.
Supongamos que queremos permitir que el asistente administrativo de la empresa gestione y actualice
la información de contacto. Esto significa que queremos que acceda al backend, pero no queremos que
él sea capaz de ver o cambiar otra cosa que no sea el menú y la funcionalidad Contactos. Vamos a ver
cómo lograr esto.
Ejercicio 8: Paso 1 - Crear un grupo de usuarios

1. Vaya a Usuarios | Grupos y haga clic en Nuevo, para crear un nuevo grupo llamado Administrador
de Contactos.
2. Coloque Grupo principal en Registered. De esta manera, el nuevo grupo obtiene el permiso de
inicio de sesión del grupo Registered, pero no otros permisos.
3. Haga clic en Guardar y cerrar para aplicar los cambios.

Usted ha creado un nuevo grupo de usuarios. Como estos usuarios heredan los permisos de
Registrados, pueden conectarse al sitio, pero hasta el momento no se han asignado permisos
específicos a este grupo.
Ejercicio 9: Paso 2 – Indicar a Joomla lo que el grupo puede ver

Para especificar lo que los miembros del nuevo grupo de usuarios puede ver y hacer, vamos primero
especificar qué Nivel de acceso tiene este grupo de usuarios. Este nivel define lo que los usuarios
pueden acceder y ver en el sitio, pero no les da el derecho de hacer cualquier cosa.
En este caso, queremos que el nuevo grupo de usuarios acceda al backend. Para ello, podemos
utilizar un Nivel de acceso existente: el nivel Especial. En la configuración predeterminada de Joomla,
cualquier persona con el nivel Especial puede acceder a los controles del backend.
1. Vaya a Gestor de usuario: Usuarios | Niveles de acceso. Se muestran los niveles actuales de acceso
de visualización.
2. Para agregar el nuevo grupo de usuarios al nivel de acceso Especial, haga clic en Nombre del
nivel de acceso | Special. En la opción Grupos de usuarios, seleccione el nuevo grupo de usuarios
Administrador de Contactos para este nivel, haciendo clic en el cuadro de selección a la izquierda
del nombre Administrador de contactos.
3. Asegúrese de guardar los cambios.

Hasta ahora ha creado un grupo de usuarios y ha hecho posible que vean el backend una vez que
hayan iniciado sesión, asignándoles el nivel Especial; sin embargo, todavía no pueden realmente
conectarse al backend. El inicio de sesión en el backend es una acción, y ese permiso de acción
específica se establece a través del permiso Acceso a la Administración en la Configuración Global.
Ejercicio 10: Paso 3 - Indicar a Joomla lo que el grupo puede hacer

Vamos a darle el permiso al Administrador de contactos para conectarse al backend.
1. Vaya a Sistema | Configuración global y haga clic en la ficha Permisos. Seleccione el grupo de
usuarios Administrador de contactos. Se muestran los permisos para el grupo.
2. Para este grupo, cambiar el permiso Acceso a la Administración a Permitido.
Si se conectase al sitio como Administrador de Contactos ahora, sería capaz de acceder al backend,
pero prácticamente no habría ninguna funcionalidad disponible. Usted acaba de ver la interfaz del
backend con solo unas pocas opciones de menú (que le permiten editar su perfil de cuenta).
Así que ahora que hemos establecido los permisos adecuados a nivel de todo el sitio, es el momento
de establecer permisos más específicos. Tenemos que permitir que nuestro nuevo grupo pueda
administrar efectivamente los contactos en el backend. Para ello, personalizamos los permisos del
componente Contactos.
3. Vaya a Componentes | Contactos y haga clic en el botón Opciones.

4. Haga clic en la ficha Permisos para cambiar los permisos a Permitido para este grupo en cualquier
acción, como se muestra en la siguiente imagen:
5. Haga clic en Guardar y cerrar para confirmar los cambios.

La Configuración de permisos se ha realizado. Los usuarios de este grupo pueden ahora acceder al
backend y gestionar los contactos, pero no van a ser capaces de hacer otro tipo de acción.
Nota ¿Para qué partes del sitio puede establecer permisos?
Puede establecer permisos en un máximo de cuatro niveles en el sitio web, que van desde
los permisos de todo el sitio hasta los permisos en el nivel de los elementos individuales, como los
artículos.
1. Permisos de todo el sitio, a través de Sistema | Configuración global | Permisos. Usted ha

visto estos permisos predeterminados en todo el sitio para cada grupo al principio de este
capítulo.
2. Permisos para los componentes. Los Componentes de Joomla son Artículos, Menús,
Usuarios, Anuncios, etc. Hay una pantalla de Permisos en cada uno de los componentes
de Joomla. Por ejemplo, vaya a Gestor de artículos | Opciones | Permisos para acceder
a la pantalla Permisos del Gestor de artículos.
3. Permisos para las categorías. En la pantalla donde se crea o edita una categoría (Gestor
de Categorías | Editar o Nuevo), hay una sección de Permisos de Categoría. Aquí se
establecen los permisos para todos los elementos, es decir, los artículos dentro de una
categoría.
4. Permisos para artículos. Vaya a Contenido | Gestor de artículos | Opciones | Permisos
para establecer los permisos para todos los artículos o abra cualquier artículo para
establecer permisos específicos en la sección Permisos de artículos.
Ejercicio 11: Paso 4 - Agregar usuarios al nuevo grupo

Hasta el momento no hay miembros asignados al nuevo grupo. Vamos a crear un nuevo usuario.
1. Vaya a Usuarios | Gestor de usuarios y haga clic en Añadir un nuevo usuario. Ingrese los datos
requeridos: Nombre, Nombre de Usuario, Contraseña, y correo electrónico. Por supuesto,
en lugar de crear un nuevo usuario también puede editar los permisos del usuario que agregó
anteriormente, es decir, Juan Perez.
2. En la sección Grupos de usuarios asignados, asigne el nuevo usuario al grupo apropiado, marcando
la casilla a la izquierda del nombre del grupo Administrador de contactos.
3. Guarde los cambios.

Usted ha configurado un grupo de usuarios y ha asignado los niveles y los permisos de acceso
adecuados. Probablemente querrá saber si todo está configurado correctamente, cierre la sesión e
inicie sesión en el backend como el nuevo usuario. Se dará cuenta que la interfaz de backend está
casi vacía. La mayoría de los menús y atajos habituales han desaparecido o no funcionan. Solo las
funciones correspondientes al nuevo grupo de usuarios están disponibles, el único componente
que el usuario puede ver y acceder es Contactos.
Haga clic en el enlace de submenú Componentes | Contactos | Contactos. Se dará cuenta que
todas las funciones relacionadas con la gestión de contactos están disponible para el nuevo usuario.
Cap.
Sacar el máximo
p r ove c h o d e s u s i t i o :
9
Ampliar Joomla
CAP. 9: Sacar el máximo provecho de su sitio : Ampliar joomla 209
Cuando tenga su sitio básico potenciado con Joomla y tenga cubierto todo su contenido y funcionalidad,
lo más probable es que usted quiera algo más. Tal vez su cliente tenga necesidades específicas, o tal
vez lo que desea es aumentar el factor sorpresa de su sitio y agregar algunos efectos visualmente
atractivos o ingeniosos. Vamos a hacer más cosas con Joomla y hacer que su sitio se destaque del resto.
Para esto, usaremos las llamadas extensiones.
El verdadero poder de Joomla reside en su extensibilidad. Si necesita alguna funcionalidad que no

esté integrada en la instalación básica de Joomla (o núcleo), es muy probable encontrarla en la base
de datos de extensiones de Joomla. Las extensiones son pequeñas piezas de software que se pueden
descargar e instalar para que formen parte del backend, extendiendo las capacidades de Joomla.
En este capítulo, podrá probar las extensiones del núcleo de Joomla, descargar e instalar extensiones
de terceros, y colocar extensiones para mejorar su sitio o la interfaz de administración.
No deje que el término extensión lo confunda, ya que algunas extensiones son parte del núcleo de
Joomla. Se integran en el paquete básico de Joomla. Muchas de ellas proporcionan funcionalidad
esencial, por lo que ni siquiera podrá desinstalarlas. La función de búsqueda de Joomla, su sistema
de menús o su funcionalidad de Contactos, son ejemplos de estas extensiones preinstaladas. Esto
significa que usted ya tiene alguna experiencia con las extensiones. Tan pronto como comience a usar
Joomla, habrá implementado extensiones.
En este capítulo nos centraremos en las posibilidades de algunas extensiones del núcleo que no hemos
cubierto todavía, y también en el uso de extensiones de terceros. Vamos a instalar algunas extensiones
que debería tener y descubrir cómo funcionan.
9.1 Extensiones de todas las formas y tamaños

Antes de entrar en el maravilloso mundo de las extensiones, es bueno saber que estas vienen en
diferentes formas y tamaños. Básicamente, hay tres tipos de extensiones: grandes, medianas y
pequeñas. Nos ocuparemos de cada una de ellas a continuación.
A. Las grandes: Componentes

Se gestionan a través del menú Componentes en el backend. Son las extensiones más amplias,
proporcionando muchas opciones de administración y configuración. La salida del componente por
lo general se muestra en el área de contenido principal. Un ejemplo es el componente Contactos
(para administrar un sistema de contactos, datos de contacto y formularios de contacto). Vamos a
tener una visión más detallada de este componente más adelante en este capítulo.
B. Las medianas: Módulos

Los módulos son bloques que contienen una funcionalidad especial. Ya hemos visto ejemplos en
los ejercicios anteriores, tales como el módulo Menú. Usted maneja los módulos en Extensiones |
Gestor de módulos.
Los módulos suelen mostrarse alrededor del área principal de contenido: en las columnas del lado
izquierdo y del lado derecho, o en el encabezado y pie de página. Estas posiciones de los módulos
están predefinidas por el diseñador de la plantilla. En la plantilla predeterminada, las posiciones
tienen nombres tales como posición-1; en otras plantillas, se utilizan nombres descriptivos como
izquierda, derecha, y así sucesivamente. En la siguiente captura de pantalla, se pueden ver las
principales posiciones de los módulos disponibles en la plantilla predeterminada:
TIP
¿Qué posiciones de módulo están disponibles?
Al crear los módulos, usted los coloca en una Posición modular

específica. Para saber qué posiciones de los módulos están disponibles
en la plantilla actual, vaya a Extensiones | Gestor de plantillas. Haga
clic en el botón Opciones y asegure que Previsualizar la posición de los
módulos se establezca en Habilitado. A partir de ahora, cada plantilla
que se encuentre en la sección Gestor de plantillas | Plantillas
contendrá un enlace Previsualizar. Haga clic en este enlace para
ver la plantilla incluyendo una superposición que muestra todas las
posiciones disponibles y sus nombres de posición (como position-7).
Al cambiar a una plantilla diferente, es probable que tenga que volver
a asignar los módulos a sus nuevas posiciones. Aprenderá más sobre
esto en el próximo capítulo sobre el uso de plantillas.
C. Las pequeñas: Plugins

El tercer tipo de extensión es llamado Plugins. Estos son por lo general pequeñas mejoras, tal como
un botón adicional en el editor de texto que facilita la inserción de hipervínculos.
Nota En el menú Extensiones también encontrará el Gestor de Plantillas y el

Gestor de Idiomas. No los vamos a cubrir aquí, ya que sirven a propósitos
muy específicos.
}}Las plantillas determinan la presentación, los colores y la tipografía de la

página. Consulte el capítulo 10, sobre el uso de plantillas.
}}Los archivos de idioma permiten configurar el idioma predeterminado para
el frontend y el backend del sitio. En el frontend, traducirá todos los textos
predefinidos (como Leer más y Escrito por) a un idioma de su elección. Al
final de este capítulo, vamos a echar un vistazo a la funcionalidad Gestor de
idiomas.
Aunque técnica y prácticamente hay diferencias importantes entre estos componentes, módulos y
plugins, el resultado es que todos ellos extienden las capacidades de Joomla agregando funcionalidad
extra en el backend de su sitio. Acaba de elegir la herramienta que hace el trabajo; a veces esto significa
que va a utilizar un componente, a veces un módulo y a veces un plugin (y a veces una combinación).
D. ¿Dónde conseguir extensiones?

Aparte de las pocas docenas de extensiones que forman parte de la instalación predeterminada de
Joomla, puede encontrar en la web miles de extensiones adicionales desarrolladas por terceros. La
mayoría de ellas se listan en http://extensions.joomla.org, el Directorio de Extensiones de Joomla
(o JED, como es llamado cariñosamente por la comunidad Joomla).
Aquí podrá ver que las extensiones ofrecen un sinnúmero de nuevas posibilidades, para una mejor
presentación de los contenidos (a través de menús alternativos, listas de enlaces y galerías), para
interacción con el usuario (mediante los foros y comentarios), o herramientas del backend (para
mejoras de la interfaz).
Examine de vez en cuando las categorías del JED (sistemas de navegación, foros, etc.) y eche un vistazo
a la sección Nuevos y notables (New and noteworthy). Eche un vistazo a las Actualizaciones recientes
(recently updated) y las extensiones más Populares para encontrar algunas verdaderas joyas. Es una
buena idea leer los comentarios de otros usuarios. A menudo le darán una buena indicación de si una
extensión tiene la madurez suficiente y si tiene soporte del desarrollador.
La JED lista muchas extensiones, pero hay muchos más portales de extensiones y los sitios de los
desarrolladores. En Google busque por extensiones indispensables de Joomla o mejores extensiones
de Joomla, y asegúrese de que tiene suficiente café preparado para embarcarse en una larga y
aventurera búsqueda del tesoro en línea. Sin embargo, es importante que descargue extensiones de
fuentes confiables. La JED es el lugar más seguro para encontrar las extensiones, ya que deja de listar
una extensión tan pronto como se le descubren vulnerabilidades de seguridad.
TIP
¿Cuánto cuestan las extensiones?
Muchas extensiones de Joomla son gratuitas o están disponibles por

un precio razonable. A veces, los desarrolladores requieren que se
registre para poder descargar la extensión. Tanto las extensiones
libres como las comerciales por lo general se distribuyen bajo
una licencia de código abierto, la Licencia Pública General (GPL –
General Public License). Joomla es también un software GPL. Una
ventaja importante del uso de software y extensiones GPL es que,
básicamente, cualquier persona puede utilizar y modificar el código
fuente. Esto implica que no depende del desarrollador del software
original para las actualizaciones o personalizaciones.
9.2 Mejorar su sitio usando extensiones de núcleo

Vamos a explorar algunas extensiones que forman parte del paquete básico de Joomla. Pondremos a
trabajar el módulo Noticias de actualidad y después de eso vamos a echar un vistazo más de cerca al
uso de una extensión más compleja, el componente Contactos.
9.2.1 Destacar los artículos usando el módulo Noticias de actualidad
Cuando su sitio crezca, es importante asegurarse que la página principal refleje adecuadamente
todas las categorías de contenido, para evitar que su valioso nuevo contenido permanezca
desapercibido. Seleccione Artículos destacados, que controla qué artículos aparecen en el área
central de la página principal. Pero hay más formas de atraer la atención a los artículos específicos.
Ejercicio 1: Agregar «Noticias de actualidad» a la página principal

Vamos a utilizar el módulo Noticias de actualidad para mostrar al azar un texto de introducción
del artículo, desde una categoría seleccionada cada vez que se carga la página. Cada vez que el
visitante regresa, otro elemento se mostrará en la posición del módulo Noticias de actualidad.
1. Vaya a Extensiones | Gestor de módulos. Haga clic en Nuevo y seleccione Artículos - Noticias
de actualidad.
2. Asegúrese que Estado se establezca en Publicado, para que se pueda mostrar el módulo. Esta
es la configuración predeterminada.
3. En el cuadro Título, escriba un título apropiado. En este ejemplo, ingresaremos Congresos re-
cientes como título del módulo. Asegúrese que Mostrar el título se establezca en Mostrar.
4. Seleccione Posición: Derecha [position-7] para mostrar el módulo en una de las cajas disponi-
bles en esta plantilla, por debajo del contenido principal.
5. Haga clic en la ficha Asignación de menú y seleccione Solo en las páginas seleccionadas. Ajuste
el módulo para que se muestre solo la página Home.
6. En Categoría, seleccione la categoría en la que Joomla deberá mostrar uno o más textos de in-
troducción del artículo Conferencias.
7. Establezca Mostrar las imágenes en Sí; de esta manera, se mostrarán las imágenes en el texto
de introducción del artículo. Las imágenes solo se ajustarán si no son más anchas que la posición
del módulo disponible, mientras que las imágenes más grandes no cambian automáticamente
de tamaño.
8. Establezca Mostrar el título del artículo en Sí para mostrar el título del artículo (y no solo el
texto de introducción).
9. Establezca Títulos enlazables en Sí para convertir el título de los artículos de Noticias de actua-
lidad en un hipervínculo.
10. Seleccione Enlace «Leer más... » en Mostrar, para mostrar un enlace Leer más después del
texto de introducción.
11. En el cuadro Cantidad de artículos, escriba 1. Esto hará que el módulo muestre un artículo des-
de la categoría seleccionada.
12. En el cuadro desplegable Orden de los resultados, seleccione Aleatorio. Esto hará que el módu-
lo muestre artículos al azar de la categoría seleccionada, cada vez que el visitante vuelva a visitar
esta página. (También puede elegir Fecha de Creación para ordenar por fecha, u Ordenando
para dejar el orden como está en el Gestor de artículos).
13. Haga clic en Guardar y luego haga clic en Ver sitio.

El módulo Noticias de actualidad se muestra en la columna de contenido principal, de la siguiente
captura de pantalla:
El módulo Noticias de actualidad puede ayudarle a atraer la atención sobre un conjunto específico
de artículos; cada vez que la página se vuelva a visitar (recargado en el navegador del usuario),
se muestra el texto de introducción de una nueva noticia al azar de la categoría seleccionada.
No deje que el nombre Noticias de actualidad le engañe, ya que el módulo no es solo para los
elementos de noticias. Se puede utilizar para mostrar uno o más objetos de cualquier categoría. La
parte divertida de usar una selección al azar es que se puede sorprender al visitante con contenido
diferente en cada nueva visita, sin tener que refrescar realmente su sitio.
Mundo real
Cambie la configuración de Noticias de actualidad
Al igual que con casi cualquier módulo, los ajustes y parámetros determinan en gran medida
la salida de Noticias de actualidad. En la siguiente captura de pantalla, puede ver un aspecto
similar si cambia los ajustes de posición y de presentación.
En este caso, Posición está en Izquierda [position-8], la columna izquierda de la plantilla Protostar
(solo se mostrará si algún contenido está asignado a la misma). Hemos elegido mostrar dos textos
de introducción a artículos al azar desde la categoría Reuniones en una columna. De esta manera,
el módulo Noticias de actualidad le permite mostrar los textos de introducción de artículos de una
categoría seleccionada en un bloque separado (por ejemplo) sobre la página principal.
TIP
Usando el mismo módulo de dos veces (o más)
Suponga que quiere usar el módulo Noticias de actualidad un par

de veces en la misma página. ¿Es eso posible? Sí, usted puede tener
varias instancias de cualquier módulo en una página. Ya hemos visto
un ejemplo de instalación de Joomla con los datos de ejemplo, ya que
el sitio de muestra presenta varios menús en una página (como Main
Menu, Top Menu y User Menu). Estas son copias del tipo de módulo
Menú.
En la captura de pantalla anterior, se han utilizado dos instancias del
módulo Noticias de actualidad para mostrar el contenido de diferentes
categorías en diferentes posiciones del módulo (en la columna de la
izquierda se ven los textos de introducción de la categoría Reuniones,
y en la columna de la derecha verá una introducción del artículo desde
la categoría Conferencias).
Para hacer esto es más fácil crear una copia del primer módulo, de
modo que no tenga que crear la segunda instancia desde sus bases.
Vaya a Extensiones | Gestor de módulos, seleccione el módulo que
desea copiar y haga clic en Duplicar, en la barra de herramientas. En
el Gestor de módulos, se mostrará una copia llamada [nombre del
módulo] (2). Probablemente querrá dar a la copia un título diferente,
seleccionar otra posición, y establecer la fuente a otra Categoría.
9.2.2 Crear una lista de contactos usando el componente Contactos
En el capítulo 4, ya ha desplegado el componente integrado Contactos de Joomla para crear

un formulario de contacto genérico. Sin embargo, el componente Contactos tiene mucha más
funcionalidad de la que se necesita para crear un sencillo formulario. En su lugar, se puede
establecer un sistema de contactos que muestre todos los contactos en tantas categorías como
necesite. Imagine que quiere mostrar una lista de contactos que permita al visitante seleccionar el
departamento específico o miembro del personal con el que quiere estar en contacto. El resultado
será como se muestra en la siguiente captura de pantalla:
Cuando el usuario hace clic en cualquiera de los nombres de los funcionarios, se muestran los datos
de contacto correspondientes, como en la siguiente captura de pantalla:
Este sistema permite que el visitante encuentre el contacto apropiado, examine sus datos y se
comunique a través de un formulario de contacto para cada contacto. Vamos a ver cómo podemos
crear un par de contactos y crear una lista mediante el componente Contactos.
Ejercicio 2: Agregar una serie de contactos

Vamos a crear una categoría de contactos, agregar datos de contacto y, finalmente, hacer un enlace del
menú para que apunte al nuevo grupo de contactos.
1. Navegue hasta Componentes | Contactos | Categorías. Si ha instalado Joomla utilizando los

datos de muestra, todavía pueden haber categorías de ejemplos presentes. Es fácil eliminarlas:
selecciónelas todas (asegúrese de que está seleccionado Todo en el cuadro desplegable, en la parte
derecha por encima de la lista de contactos) y haga clic en Papelera.
2. Haga clic en Nuevo para crear una nueva categoría de contactos. En el campo Título, escriba Staff
de Fascination.
En el cuadro Descripción, escriba una breve descripción que se mostrará por encima de la lista de
contactos. En este ejemplo hemos ingresado ¿Está interesado en nuestros productos? ¿Desea
participar de nuestras promociones? No dude en consultar a nuestro staff.
Haga clic en Guardar y cerrar.
3. Haga clic en el enlace Contactos, en el menú de la izquierda, y haga clic en Nuevo. Ingrese los
detalles para un nuevo contacto. En este ejemplo, hemos ingresado en el campo Nombre:
Sebastián Pacheco. Además, ingrese la información que sea necesaria. Seleccione una imagen para
mostrar una foto del contacto y agregue un Cargo (como secretario). Ingrese un número de teléfono
y una dirección de correo electrónico para el contacto, incluso si no va a mostrar la dirección de
correo electrónico, se puede utilizar cuando el visitante usa el formulario de correo electrónico
para este contacto. Haga clic en Guardar y nuevo.
4. Repita el paso anterior para ingresar la información de un par de otros contactos. Cuando haya
terminado, haga clic en Guardar y cerrar.
Ahora tenemos una nueva categoría de contactos que sostiene un conjunto de contactos. Vamos a
agregar un nuevo enlace de menú para mostrar la lista de contactos.
5. Navegue hasta Menús | Main Menu. Edite el enlace Contáctenos existente (o bien, si aún no ha
creado un enlace Contáctenos anteriormente, basta con hacer clic en Nuevo para crear un nuevo
elemento de menú). En la sección Tipo de Elemento de menú, seleccione Contactos | Mostrar
todos los contactos de una categoría. En Seleccionar una categoría, asegúrese de seleccionar la
categoría Staff de Fascination.
6. Haga clic en la ficha Opciones del formato del tipo lista o tabla. Establezca qué detalles desea
mostrar en la lista de contactos. Establezca teléfono, localidad, provincia y país en Ocultar. No
queremos mostrar demasiados detalles en la lista de resumen de contactos. En Paginación,
seleccione Ocultar; obtendrá una pequeña lista de contactos, por lo que no queremos molestar a
los visitantes con una lista desplegable.
7. En la pantalla Opciones básicas del contacto, seleccione qué detalles se muestran en la página de
detalles de cada contacto. En Formato, seleccione Fichas. Establezca Nombre, Cargo del contacto
y Teléfono en Mostrar. En la ficha Opciones del correo, en el cuadro Mostrar el Formulario de
contacto, seleccione Mostrar, para asegurarse que todos los contactos pueden llegar a través de
su propio formulario de contacto.
8. Haga clic en Guardar y cerrar y, a continuación, haga clic en Ver sitio. En el menú superior del
frontend, haga clic en el enlace Contáctenos para ver los resultados. El sitio ahora debería mostrar
un enlace del menú a una lista de contactos que está representada en las dos capturas de pantalla
anteriores.
Utilizando el componente Contactos, hemos creado una pequeña base de datos de las personas y sus
detalles. Cuando el usuario hace clic en el enlace del menú que apunta a la categoría Contactos, se
muestra una lista.
Al hacer clic sobre cualquiera de los nombres en la lista, se revelan los detalles del contacto y un enlace
con fichas a un formulario de contacto, lo que permite al visitante enviar un correo electrónico a la
persona seleccionada.
Mundo real
Pruebe la configuración de componentes de contacto
Se habrá dado cuenta que puede introducir un gran número de detalles por cada contacto, y
también seleccionar qué detalles desea mostrar u ocultar en la lista de contactos y la página
de información de contacto. Experimente con las configuraciones y opciones. Las opciones
que se encuentran en la pantalla Contactos, bajo Componentes, son parámetros generales
para todos los contactos y páginas de contacto; se puede hacer caso omiso de estos mediante
ajustes más específicos, a través del enlace del menú que apunta a un contacto específico.
Hemos visto cómo puede usar un módulo o un componente. Sin embargo, el paquete básico de Joomla
contiene muchas más extensiones. Vamos a echar un vistazo a los módulos y componentes que forman
parte de la instalación predeterminada. Vaya a Extensiones | Gestor de Módulos y haga clic en Nuevo
para ver una lista de los módulos disponibles.
Nombre del módulo ¿Qué puede hacer con él?

Anuncios El módulo de anuncios muestra los anuncios activos del com_banners.
Muestra una lista de hipervínculos a páginas con un tema relacionado al

Artículos - Artículos de la página actual. La relación se establece por medio de metapalabras
relacionados clave. Si la página actual y otros dos artículos contienen la palabra clave
tutorial, a continuación los dos elementos aparecerán en la lista de enlaces.
Ha leído sobre este módulo al principio de este capítulo. No es solo para

Artículos – Noticias de
las noticias, sino que le permite visualizar los textos de introducción de una
actualidad
serie de artículos en cualquier categoría.
Al archivar artículos en Joomla, puede usar este módulo para mostrar

una lista de enlaces a los artículos archivados (por orden de fecha). Se
Artículos archivados
establece la cantidad de meses a mostrar. Hemos explorado artículos
archivados en el capítulo 6.
Este módulo muestra una lista de títulos y textos de artículos (o textos

de introducción) de artículos de una o varias categorías. De hecho, este
Artículos de la categoría es un potente módulo que se puede utilizar para mostrar los artículos
seleccionados que cumplen con criterios específicos en una posición de
módulo.
Buscar Muestra el campo de búsqueda del sitio.
Este módulo le permite mostrar un canal electrónico con noticias

sindicadas. Los usuarios pueden hacer clic en él para subscribirse a las
Canales electrónicos
actualizaciones de la página actual y leerlos en una aplicación especial (un
lector de noticias).
Muestra una lista de categorías a partir de una categoría principal. Puede

usarlo para permitir que las personas dirijan su atención a las subcategorías
Categorías de artículos
y puedan navegar más fácilmente a contenidos de un nivel inferior en la
estructura del sitio.
Este módulo muestra un formulario que los usuarios pueden utilizar para
Datos de acceso conectarse o crear una nueva cuenta. Usted ha visto esto en acción en el
capítulo 8.
Este módulo muestra enlaces web pertenecientes a una categoría definida

Enlaces web
desde el componente com_weblinks.
Muestra un conjunto de estadísticas del sitio web, como el número de

Estadísticas
artículos, la cantidad de usuarios y las visitas.
Muestra las etiquetas usadas en el sitio web, en un formato del tipo lista o
Etiquetas populares del tipo nube de etiquetas. Las etiquetas pueden ordenarse por el título o
la cantidad de elementos.
Muestra enlaces a otros elementos con etiquetas similares. La cercanía de

Etiquetas similares
la coincidencia se puede especificar.
Este es un módulo simple pero muy flexible para mostrar el contenido en

HTML personalizado cualquier lugar de la página. Consulte el capítulo 4 para un ejemplo de su
uso.
Nombre del módulo ¿Qué puede hacer con él?
Muestra una imagen aleatoria desde una carpeta de imágenes cada vez
que la página se vuelve a cargar. Es una forma sencilla de sorprender al
Imagen aleatoria
visitante con una página que tiene un aspecto diferente en cada visita,
incluso cuando no hay nuevo contenido agregado.
Muestra una lista de enlaces a los artículos a los que se ha accedido con
Los más populares
más frecuencia.
Este es el módulo de menú predeterminado de Joomla. Todos los menús en

Menú
Joomla son instancias de este módulo de menú genérico.
Utilice este módulo en lugar del módulo de Búsqueda normal, junto con
Módulo de búsquedas el componente Búsqueda inteligente y el plugin de contenido Búsqueda
inteligentes inteligente. La Búsqueda inteligente es un sistema de búsqueda
mejorado para su sitio.
Este es un módulo que probablemente no vaya a utilizar. Se muestra un

Pie de página
aviso de copyright de Joomla en el sitio.
Quién está en línea Muestra cuántos usuarios están conectados actualmente en el sitio.
Muestra un conjunto de hipervínculos que ayuda a los visitantes a

Ruta de navegación
comprender dónde se encuentran (es decir, Home | Categoría | Artículo).
Utilice este módulo si trabaja con contenido en varios idiomas en su sitio.

Selector de idioma
Los usuarios pueden elegir su idioma preferido usando esta variable.
Muestra una lista de enlaces a las actualizaciones de noticias (Noticias

Sindicación del sitio Externas) de otro sitio web. Crea la sindicación de noticias en las páginas
de su sitio donde se muestra el módulo.
URL embebida Muestra un marco embebido en un lugar específico.
Útil si los usuarios están autorizados a registrarse y conectarse al sitio.

Usuarios recientes Este módulo muestra una breve lista de los usuarios que han iniciado
sesión recientemente.
Muestra una lista de los artículos más actuales que se han publicado.
Últimas novedades Algunos artículos pueden haber expirado y seguir siendo de lo más
recientes.
TIP
Cada módulo que es listado en el Gestor de módulos tiene un Título

y un Tipo. El título es el nombre (personalizable) del módulo que se
puede mostrar en el frontend del sitio. El tipo de módulo es el Nombre
(fijo) que Joomla utiliza internamente. Como se vio anteriormente,
se puede utilizar en varias ocasiones el mismo tipo de módulo (por
ejemplo, Menú), pero debe distinguir las copias de módulos de su
nombre (por ejemplo, Top Menu o User Menu).
Navegue hasta el menú Componentes para ver los componentes que forman parte del núcleo de
Joomla. El siguiente es un breve resumen:
Nombre del
¿Qué puede hacer con él?
Componente
Mediante el componente Actualización, puede comprobar si hay

actualizaciones disponibles para el software del núcleo de Joomla. Si
los hay, la actualización será solo una cuestión de hacer clic en el botón
Actualización de Joomla Actualizar. Usted no tiene que acordarse de comprobar el componente
Actualización: hay un icono rápido en el panel de control que se encarga
de comprobar si hay actualizaciones, y que le llevará directamente a este
componente si hay actualizaciones disponibles.
Gestionar anuncios de publicidad en su sitio web. Puede crear nuevos

Anuncios (Banners)
anuncios y gestionar los clientes del anuncio.
Acceder a las estadísticas de búsqueda para ver cuántas búsquedas se

Buscar
hicieron para ciertas palabras clave o combinaciones de palabras clave.
Es la funcionalidad de búsqueda mejorada; es una combinación de este

componente, el módulo de Búsqueda inteligente y el plugin Búsqueda
inteligente. Puede utilizar la búsqueda inteligente en lugar de la búsqueda
Búsqueda inteligente predeterminada al habilitar el plugin, crear un índice de búsqueda utilizando
el componente y utilizando el módulo Búsqueda inteligente (o enlace de
menú). La Búsqueda inteligente es más rápida y más fácil de usar, ya que
da sugerencias de los usuarios y completa automáticamente las frases de
búsqueda.
Canales electrónicos Agrega fuentes de noticias de otros sitios a su sitio Joomla.
Añade y gestiona la información de contacto y enlaza contactos para los

Contactos usuarios registrados. Al principio de este capítulo se vio un ejemplo de su
uso.
Agregar y clasificar los enlaces a otros sitios web (para mostrarlos en su

Enlaces web
sitio a través del tipo de Enlace de Menú llamado Enlace web).
Ayuda a buscar etiquetas dentro del código fuente. Puede filtrar por Estado
Etiquetas (publicado, despublicado, archivado, movido a la papelera), por tipo de
Acceso (público, invitado, registrado, especial, superusuario) y por Idioma.
Envía y recibe mensajes privados (hacia y desde otros administradores que

Mensajería
tienen acceso al backend del sitio).
Hay mensajes de postinstalación importantes y que requieren de su

Mensajes de postinstalación atención. Puede revisarlos en cualquier momento. Esta área de información
no se mostrará si lo tiene configurado en Ocultar todos los mensajes.
Cuando cambian las URL de su sitio web, puede redirigir a los usuarios que
Redirección aún utilizan la URL antigua a la nueva página, introduciendo aquí las URL
antiguas y nuevas.
9.3 Mejorar su sitio usando extensiones de terceros

Cuando se encuentre con limitaciones en las extensiones del núcleo de Joomla, será el momento
de revisar algunas extensiones más sofisticadas. Cualquier funcionalidad que se pueda imaginar es
probable que exista en forma de un componente, módulo o plugin (o una combinación). Se tarda
solo unos pocos pasos para agregar una nueva extensión a su sitio web. En primer lugar, descargue la
extensión (como archivo ZIP); a continuación, instale a través de Gestor de extensiones de Joomla y,
finalmente, ajuste la configuración para conseguir que funcione de la manera deseada.
9.3.1 Probar una alternativa al módulo Noticias de Actualidad
Al principio de este capítulo ha explorado un módulo que viene con Joomla, Noticias de actualidad.
Esto es genial si quiere llamar la atención sobre un par de artículos seleccionados. Sin embargo,
hay muchos módulos similares disponibles que ofrecen mayor funcionalidad y son mucho más
versátiles. Vamos a hacer un ejercicio para averiguar cuáles son las diferencias.
Ejercicio 3: Descargar e instalar una extensión

Vamos a instalar un módulo alternativo para mostrar textos de introducción en la página principal, BT
content slider.
1. Navegue hasta http://extensions.joomla.org/extensions/news-display/articles-display/articles-

showcase/19125 y haga clic en Download para descargar el archivo ZIP que contiene la extensión.
Le llevará a la página del desarrollador. Después de hacer clic en el botón Download, haga clic en
la parte superior del botón Register para registrar una cuenta gratuita y conectarse en el sitio. Le
llevará a la página de descarga, donde puede descargar el archivo ZIP. Asegúrese de seleccionar la
versión más reciente para Joomla 3.x.
2. En el backend de su sitio, vaya a Extensiones | Gestor de Extensiones. Esto le llevará a la pantalla
Instalación del Gestor de Extensiones.
3. Ahora instale la extensión, haga clic en Examinar para seleccionar el archivo de extensión ZIP en su
computador. Haga clic en Subir e instalar. Una vez completada la instalación, verá un mensaje (la
instalación del módulo se ha realizado correctamente).
¡Enhorabuena, ha instalado satisfactoriamente su primera extensión! El nuevo módulo se puede
encontrar ahora a través de Extensiones | Gestor de módulos y puede agregar una o más instancias
del módulo a su sitio. Vamos a ver cómo funciona eso en un minuto.
Ejercicio 4: Poner la extensión a trabajar

Vamos a BT Content Slider para mostrar los textos de introducción de los artículos en la página principal.
1. Si ha seguido adelante y ha instalado el módulo Noticias de actualidad antes, es posible que desee
ocultar ese módulo ahora. Para ello, vaya a Extensiones | Gestor de módulos. Localice el módulo
Noticias de actualidad, que se titula Congresos recientes.
2. Haga clic en la casilla de verificación verde en la columna Estado para despublicar este módulo
Noticias de actualidad, es decir, ocultarlo en el frontend.
3. En el Gestor de módulos, localice el módulo BT Content Slider (mod_bt_ contentslider) y haga clic
en su Título para ver las opciones disponibles.
Se ve muy diferente en comparación con el módulo predeterminado Noticias de actualidad, ya que la

configuración de Content Slider se divide en ocho fichas. En las fichas de opciones, están disponibles
docenas de opciones para personalizar la extensión, pero usted solo tiene que ajustar algunas opciones
para hacer que este módulo funcione.
4. Vamos a empezar con la ficha Módulo. En el campo Título, ingrese Novedades sobre Fascination.
Queremos mostrar este título en el frontend, así que compruebe que la opción Mostrar título se
establezca en Mostrar.
5. Seleccione Posición: position-3. Esto mostrará el contenido del módulo entre el encabezado y el
contenido principal. Una forma rápida de ingresar la posición deseada es simplemente escribir en
el campo Posición; Joomla sugerirá automáticamente las posiciones disponibles. Establezca Estado
en Publicado.
6. Haga clic en la ficha Asignación de menú y ajuste el módulo para mostrarlo únicamente en la
página Home (principal).
7. En la ficha Source Setting, seleccione las categorías que deben ser la fuente de la salida del módulo.
En este ejemplo, hemos elegido mostrar el contenido de las categorías Eventos y Reuniones. Por
supuesto, si no ha agregado ningún contenido ficticio a estas categorías, para este fin cualquier
otra categoría que contiene artículos es aceptable. Lo mejor es utilizar los artículos que tienen
imágenes, ya sea en el texto de introducción como en los campos imágenes y enlaces; el módulo
Content Slider mostrará las miniaturas de estas imágenes.
8. Haga clic en Guardar y luego haga clic en Ver sitio para ver la salida de la página principal.
Debe quedar como la siguiente captura de pantalla:
Este es el aspecto de la salida del módulo con la configuración predeterminada. Se muestran tres
textos de introducción del artículo, que incluyen una miniatura de la imagen del artículo. Notará
que los contenidos del módulo cambian de forma automática: cada pocos segundos un nuevo
conjunto de textos de introducción se desliza en su lugar. Pruebe las viñetas de navegación en la
parte superior derecha del bloque de módulo y notará que estos controles permiten al visitante
explorar manualmente las introducciones disponibles.
9. Vamos a cambiar esta presentación básica. Vaya de nuevo a la configuración del módulo y en la
ficha Módulo, busque la opción Number of Rows (Número de filas) y cámbiela a 2. En la ficha Item
Layout Setting, coloque Alignment of image a Left (Izquierda). Guarde estos cambios y vea cómo
ahora la salida cambia , tal como se muestra en la siguiente captura de pantalla:
El módulo muestra ahora las miniaturas alineadas en el lado de la mano izquierda y se coloca por
encima del título y el texto de introducción. Además, nos hemos fijado en él para mostrar los textos
de introducción disponibles en dos filas.
10. Vamos a cambiar la presentación una vez más. En la ficha Item Layout Setting, establezca Show intro
Text (Mostrar texto de Introducción) en No, Show Category name (Mostrar nombre de categoría)
en No, y Show Read More (Mostrar Leer Más) en No. Coloque Width Thumbnails (Tamaño de
miniaturas) en 100 píxeles para que las imágenes sean un poco más pequeñas. En Módulo, cambie
Number of Rows (Número de filas) de nuevo a 1. Los resultados en la interfaz son diferentes otra
vez.
En lugar de los textos de introducción, ahora se muestra una fila deslizante de imágenes y títulos. El
visitante puede hacer clic en la imagen para leer el artículo o navegar a través de las imágenes que
se desplazan, haciendo clic en los pequeños puntos de la esquina superior derecha.
Hemos instalado el módulo Content Slider para mostrar los textos de introducción de una categoría
seleccionada en la página principal. El módulo ofrece una gran cantidad de opciones y ajustes
preestablecidos, lo que permite crear una pantalla llamativa de los artículos seleccionados. La
navegación del módulo incluye un efecto de deslizamiento que invita a los visitantes a explorar
diferentes artículos, mucho más de lo que hace una presentación estática de Noticias de actualidad.
El módulo es sensible: al cambiar el tamaño de la pantalla del navegador, verá cómo el tamaño de
la imagen y otras presentaciones se adaptan a los cambios.
Mundo real
Explore las opciones del módulo
Hemos abordado solo algunas posibilidades de este módulo, así que ¿por qué no probar
algunas otras opciones? La Animación automática del panel es una característica popular,
pero puede ser demasiado sofisticada para su sitio. Para desconectar la pantalla deslizante
automática, bajo Effect Setting (Ajuste del efecto) establezca Auto Start en No. Otra opción de
gran alcance es el Navigation effect (Efecto de navegación); actívela a Fade (Desvanecer) para
hacer que la siguiente serie de textos de introducción disponibles se desvanezcan (en lugar de
deslizarse a la vista).
Si acaba de ver uno o dos textos de introducción y ningún otro contenido se ha deslizado,
lo más probable es que la categoría que ha elegido no contenga suficientes artículos. Cree
algunos nuevos artículos ficticios para ver el efecto.
TIP
Es una buena idea establecer Artículos destacados en Ocultar. Esto

ocultará los artículos destacados entre los contenidos de la categoría
seleccionada. Después de todo, estos ya están configurados para
mostrarse en el mainbody de la página principal. Si establece Artículos
destacados en Mostrar solo los artículos destacados, el módulo
mostrará solamente los artículos destacados. Esto es útil si se desea
mostrar artículos destacados de categorías particulares a través de
este módulo; a continuación, puede establecer el enlace Home para
mostrar los artículos destacados de otras categorías.
Content Slider es un buen ejemplo de la diferencia entre las extensiones integradas de Joomla y
las extensiones que están disponibles a través de los desarrolladores de terceros. En general, las
extensiones de base son de peso ligero, simples y hacen su trabajo muy bien. Sin embargo, las
extensiones de terceros están obligados a tener más opciones y características. Por otra parte, por
lo general, puede elegir entre varias extensiones excelentes para llevar a cabo el mismo tipo de
funcionalidad.
9.3.2 Mostrar imágenes en una galería Lightbox
En nuestro sitio web queremos mostrar imágenes de nuestros productos, permitiendo al visitante
disfrutar de la mayor cantidad de detalles posibles. Esto significa que, definitivamente, necesitamos
una galería de imágenes utilizando un efecto del tipo lightbox. Se trata de un enfoque común en
muchos sitios: las imágenes se muestran como miniaturas, que se maximizan después de que
el visitante hace clic sobre ellas. La imagen a tamaño completo se abre en un formato lightbox,
greybox, slimbox, o como llamen a esta técnica los diferentes desarrolladores. Se ve bien y es
funcional también, ya que le permite mostrar muchas pequeñas miniaturas, dejando al visitante
elegir a qué fotos desea echar un vistazo más de cerca.
Ejercicio 5: Crear una galería de imágenes

Para mostrar todas las imágenes como una galería, vamos a utilizar un plugin de http://www.kubik-
rubik.de/
1. Navegue hasta http://joomla-extensions.kubik-rubik.de/sige-simple-image-gallery-extended.

También puede hacer una búsqueda en Internet para «Simple Image Gallery Extended – SIGE»,
esto le llevará a la misma página. Descargue la versión más reciente, que al momento de escribir
este libro, se llama plg_sige_v3-2.zip.
2. Vaya a Extensiones | Gestor de Extensiones. Seleccione el archivo ZIP del plugin que ha descargado
y haga clic en Subir e instalar. Verá un mensaje cuando haya finalizado la instalación (Instalación de
plugin se ha realizado correctamente).
3. Como se trata de un plugin, vamos a utilizar el Gestor de Plugin para habilitar la extensión. Vaya
a Extensiones | Gestor de Plugins y localice el plugin Content - Simple Image Gallery Extended.
Haga clic en la equis roja y blanca en la columna Estado. Se convierte en una marca de verificación
de color verde, lo que indica que el plugin está activo.
4. El plugin no tiene parámetros adicionales, por lo que ya está todo listo. Haga clic en Guardar y
cerrar.
5. Ahora solo tiene que crear un nuevo artículo (o editar uno existente) que contendrá la galería de
imágenes. Navegue hasta Contenido | Gestor de artículos y haga clic en Nuevo. En este ejemplo
se ha creado un artículo titulado Catálogo de productos, y lo hemos asignado a la categoría Ventas
| Nuevos productos.
6. En el artículo, ingrese el texto del artículo y agregue este código donde desea que aparezcan las
imágenes: {gallery} headers {/gallery}. Esto indicará al plugin que muestre todos los archivos de
imagen en la carpeta Images/headers en el artículo. Para propósitos de prueba, esto está bien;
se trata de la carpeta que contiene las imágenes de cabecera, que es instalada con los datos de
ejemplo de Joomla. Por supuesto, también puede apuntar el módulo a cualquier otra subcarpeta
de la carpeta Images, si se quiere.
7. Haga clic en Guardar. Ha terminado. En el frontend, haga clic en el enlace en el menú principal para
navegar hasta el nuevo artículo. Se mostrará la siguiente imagen:
8. Haga clic en las fotos en miniatura para que se muestre como una imagen de tamaño completo en
un lightbox.
Se puede quitar el enlace al sitio del desarrollador del plugin que se muestra debajo de la galería. En
las opciones del plugin, establezca Mostrar enlace al autor en No.
Usted ha configurado una pequeña galería que impresionará a sus visitantes. Para ello, solo tiene que
introducir el nombre de la carpeta de imágenes entre el código {gallery} y {/gallery} en el texto del
artículo. La base para esta carpeta es la carpeta predeterminada de imágenes de Joomla, llamada
images. El código {gallery} encabezados {/gallery} indica que los archivos de imágenes en la carpeta
images/encabezados aparecerán como miniaturas en el artículo. Al hacer clic en cualquiera de las
miniaturas se abre un lightbox con la imagen en tamaño completo, lo que permite al usuario navegar
a través del conjunto disponible de imágenes.
Mundo real
Agregue sus propias imágenes
En este caso, hemos usado las fotos de ejemplo que ya están presentes en los datos de
ejemplo de la instalación predeterminada de Joomla. Para mostrar sus propias fotos, súbalas
a una nueva carpeta, por ejemplo images/misimagenes. En este caso, el código necesario en
su artículo será {gallery}misimagenes{/gallery}. Si sus habilidades de subir imágenes no son
tan buenas, consulte nuevamente el capítulo 6.
El plugin para la galería de imágenes es genial si tiene una o dos páginas en las que desee que se
muestren las imágenes emergentes. Si usted está buscando una herramienta de galería más
sofisticada, que le permita gestionar un gran número de imágenes y que las muestre a sus visitantes
de una manera estructurada, es posible considerar el uso de un componente de galería. Un ejemplo
muy conocido es Phoca (www.phoca.cz/phocagallery). Phoca puede presentar grandes colecciones
de imágenes utilizando categorías y subcategorías. Los visitantes pueden navegar las fotos usando
pantallas emergentes del tipo lightbox.
9.4 Usar extensiones para mejorar su espacio de trabajo

Las extensiones no solo amplían la funcionalidad del frontend de su sitio. También hay extensiones
disponibles que mejoran y amplían el backend. Por ejemplo, puede reemplazar el editor de artículos
del backend por uno más potente.
Ejercicio 6: Remplazar editor de texto predeterminado de Joomla
El editor de texto predeterminado está bien para la introducción de texto, pero algunas de las
funciones avanzadas (por ejemplo, agregar imágenes o insertar hipervínculos) no son realmente fáciles
e intuitivas. Vamos a instalar el Joomla Content Editor (JCE), un reemplazo muy popular y de libre
acceso para el editor predeterminado de Joomla (que se llama TinyMCE). Para muchos usuarios de
Joomla, JCE es lo primero que se debe agregar después de la instalación de Joomla.
1. Vaya a http://www.joomlacontenteditor.net y descargue el paquete de instalación simple para la

versión actual de Joomla. El paquete de instalación es un archivo comprimido.
2. Navegue a Extensiones | Gestor de Extensiones. Haga clic en Examinar para localizar el archivo
comprimido que acaba de descargar y haga clic en Subir e instalar. Una vez que ambos están
instalados, verá un mensaje que dice: La instalación de los componentes se ha realizado
correctamente.
3. Indique a Joomla que desea que JCE sea el editor predeterminado. Vaya a Sistema | Configuración
Global. En el panel Configuración del sitio, establezca Editor predeterminado al Editor - JCE y
guarde los cambios.
Usted acaba de instalar el editor JCE. ¿Cuál es la novedad? A partir de ahora, cada vez que se crea o
edita un artículo, verá los botones del editor JCE.
A primera vista, las diferencias entre la JCE y el editor predeterminado pueden parecer poco visibles,
pero van a hacer una gran diferencia en la edición de artículos del día a día. Estos son algunos ejemplos
de los beneficios:
}}Ahora puede crear rápidamente enlaces de texto a otros elementos del menú. En el capítulo 7 ha
visto que se pueden crear enlaces a artículos con el botón Artículo, pero ¿si lo que realmente desea
es enlazar a otro tipo de página, como un formulario de Contacto? En JCE, seleccione una o varias
palabras en el artículo y haga clic en el icono de hipervínculo (Insert / Edit link) en la fila inferior. JCE
ahora le permite seleccionar cualquier página de destino en una lista.
}}En la sección Atributos, agregar un Título de enlace (el pequeño texto emergente que el visitante ve
cuando pasa el puntero del mouse sobre el enlace real), y haga clic en Insertar. Eso es todo.
}}Otra mejora que usted y sus colegas editores de contenido podrán apreciar es que resulta más fácil
insertar imágenes con JCE. Para agregar una imagen a un artículo, ya no use el botón Imagen que
está debajo de la pantalla del editor. En su lugar, haga clic en el icono Insert / Edit Image para abrir
el propio Gestor de imágenes de JCE.
}}Para agregar una imagen, haga clic en la carpeta deseada, seleccione el archivo de imagen, consulte
la vista previa y haga clic en Insert.
}}JCE le permite controlar fácilmente la alineación y márgenes de la imagen. Por ejemplo, establezca
la Alineación de la imagen a Izquierda y ajuste el Margen de Derecha e Inferior a 10 píxeles, para
que el texto fluya bien alrededor de la imagen. La pequeña ventana de Vista previa muestra el
efecto deseado, como se muestra en la siguiente captura de pantalla:
}}También puede establecer sus preferencias de alineación y márgenes mediante las opciones de
configuración del componente JCE (bajo Parámetros del plugin | Administrador de imágenes |
Valores predeterminados).
}}ElAdministrador de imágenes también permite subir más de una imagen al mismo tiempo, desde
su disco duro al servidor web. Puede mover, quitar o cambiar el nombre de las imágenes y obtener
una vista previa de ellas en tamaño completo.
TIP
Creación de un enlace a un archivo PDF o Word
¿Necesita crear un enlace a un archivo PDF o a un archivo de Word que

los visitantes del sitio puedan descargar? Usando JCE esto es fácil. En
un artículo, seleccione el texto que debe convertirse en hipervínculo,
haga clic en el botón Insert / edit link y haga clic en el botón Examinar
(al lado derecho del campo URL). Ahora puede navegar a cualquier
archivo PDF o de Word en el Explorador de archivos. Si este todavía
está en su computadora, puede optar por subirlo ahora haciendo clic
en el icono Subir. A continuación, seleccione el archivo de modo que
la dirección URL aparezca en el campo URL. Haga clic en Insertar y su
enlace de archivo está listo.
En resumen, JCE permite hacer más cosas con texto e imágenes, y ayuda a que la edición sea más fácil.
El desarrollador también ofrece un conjunto de excelentes complementos para JCE, que se pueden
obtener por un precio razonable.
Nota Puede ajustar la configuración de la JCE a través de Componentes | JCE

Editor | Panel de control. Si no está contento con la presentación y el orden
de los iconos y botones, puede ajustar el JCE a sus necesidades a través de
Componentes | JCE Editor | Panel de control | Perfiles del Editor | Default
| Características y Presentación. Otra manera de personalizar JCE es utilizar su
sistema integral de Perfiles de Editor que le permite determinar lo que diferentes
usuarios (por ejemplo, editores o web masters) pueden ver y hacer en JCE. Puede
asignar cada perfil a grupos de usuarios específicos. Esta funcionalidad será muy
útil si quiere limitar lo que los diferentes tipos de usuarios pueden hacer, por
ejemplo, si no quiere permitir que los editores agreguen imágenes a un artículo.
9.4.1 Mucho más por explorar
Con miles de extensiones disponibles, la mejor manera de encontrar el complemento perfecto para
su sitio es explorar la Base de datos de extensiones de Joomla. Como aperitivo, aquí tiene una
pequeña muestra de los diferentes tipos de funcionalidad que ofrecen.
AllVideos: Muestra videos de YouTube (u otros) dentro Plugin Googlemaps: Visualiza Google maps dentro de los
de los artículos. artículos, módulos o componentes.
Virtuemart: Integra una tienda de comercio electrónico Kunena: Es un componente que le permite implementar un
dentro de un sitio Joomla. foro comunitario en su sitio.
Al momento de leer esto, los ejemplos de extensión en las capturas de pantalla anteriores deben
estar listos para Joomla 3. Si no, puede estar seguro de encontrar alternativas en la base de datos de
extensiones de Joomla. Es fácil encontrar extensiones compatibles mediante la búsqueda avanzada
(http://extensions.joomla.org/extensions/advanced-search). Aquí puede buscar de acuerdo a
criterios específicos, es decir, el tipo de extensión que está buscando, si debe ser una extensión
libre o comercial, y la versión de Joomla con la que debe ser compatible.
TIP
Encontrar extensiones imprescindibles
Cada usuario de Joomla probablemente tiene sus propias extensiones

favoritas, pero hay algunas que seguramente casi todos los usuarios
de Joomla deberían implementar. Una buena manera de encontrar
buenas extensiones es hacer una búsqueda avanzada en Internet
de las “mejores extensiones” o “las extensiones imprescindibles de
Joomla”. Obtendrá algunos consejos sobre extensiones interesantes,
tanto para la mejora de la funcionalidad del frontend como del
backend de su sitio.
9.5 Administrar el idioma del sitio

En el menú Extensiones también encontrará el Gestor de idiomas. Aquí puede agregar e instalar
idiomas, tanto para la interfaz de administración como para el frontend del sitio. Para instalar un
nuevo paquete de idioma, haga clic en Instalar idioma. Esto le llevará a una visión general de todos los
paquetes de idioma disponibles. La adición de un idioma es solo cuestión de seleccionar y hacer clic
en el botón Instalar. Una vez instalado, estará disponible en el Gestor de idiomas y podrá hacer que
sea el nuevo idioma predeterminado. Ajuste el idioma predeterminado para el frontend y backend de
su sitio web.
9.5.1 Cambiar las cadenas de texto predeterminadas
Cualquier sitio Joomla puede contener una gran cantidad de cadenas de texto incorporadas. Usted
las ve presentadas en el frontend cuando se muestran los artículos, basta pensar en palabras
y frases tales como Leer más, Más artículos y Detalles. Estos textos forman parte del paquete
predeterminado de Joomla, y en la mayoría de los casos no tendrá que molestarse en cambiarlos.
Sin embargo, a veces los textos predeterminados no se ajustan a su sitio web. Afortunadamente,
es fácil quitar estos textos o reemplazarlos con sus propias palabras. Esto se hace a través de
Modificaciones de idioma.
Ejercicio 7: Eliminar o sustituir los textos predeterminados

Digamos que queremos eliminar la palabra Detalles, que se muestra en cada artículo. Después de
todo, ocupa un valioso espacio en la pantalla y realmente no transmite en sí información útil. La
sección Detalles de un artículo de forma predeterminada tiene el siguiente aspecto:
1. En el backend de Joomla, vaya a Extensiones | Gestor de idiomas, y en el menú, haga clic en

Modificaciones y luego clic en Nuevo. En la sección Buscar el texto desea cambiar, escriba las
palabras que está buscando y haga clic en Buscar. Joomla mostrará todos los resultados. En este
caso, el primer resultado es el que estamos buscando.
2. Haga clic en el resultado de la búsqueda (en este caso COM_CONTENT_ARTICLE_INFO Detalles). Se

muestra automáticamente en la sección Crear una nueva modificación en el lado izquierdo de la
pantalla. En el campo Texto, ingrese el texto con el que desea reemplazar el actual. En este caso, no
queremos mostrar ningún texto en absoluto, por lo que dejamos el campo Texto vacío.

Mediante la creación de una modificación de idioma, puede borrar o cambiar fácilmente el texto
de la pantalla predeterminada en Joomla. En este caso, ha eliminado los Detalles: los encabezados
que Joomla muestra por encima de los detalles del artículo al vaciar el campo Texto.
Mundo real
Haga textos predeterminados que se ajusten a sus necesidades
En el ejemplo anterior ha eliminado un texto, ya que es igual de fácil reemplazar un texto

por otro. Como ejemplo, vamos a cambiar el texto Categoría, que por defecto se muestra
como parte de los detalles del artículo. Cree una nueva modificación igual que lo hizo hace
un minuto, ingrese el texto a buscar, Categoría, y haga clic en Buscar. Haga clic en el primer
resultado de búsqueda en la lista. Ahora, cambie el texto Categoría: %s por En: %s y guarde su
modificación. En el frontend, puede ver el resultado del código s% que ha cambiado; es una
variable que Joomla sustituye por el nombre de la categoría.
Tenga en cuenta que las modificaciones de idioma afectan a todo el sitio. Si cambia una palabra genérica,
como Artículo, esta será sustituida en todas las páginas. Si no está satisfecho con los resultados de una
modificación del lenguaje, siempre puede borrarla para volver a la configuración predeterminada.
TIP
Es realmente fantástico que las modificaciones de lenguaje también

se puedan utilizar para cambiar los textos que se utilizan en muchas
extensiones. De esta manera, cuando una extensión no se ha
traducido (completamente), puede reemplazar fácilmente el texto
en el idioma original.
Usando el Gestor de idiomas y un conjunto de extensiones incorporadas, Joomla hace que sea
relativamente fácil crear un sitio web multilingüe.
9.6 Actualizar las extensiones

Los desarrolladores de extensiones liberan regularmente actualizaciones para resolver errores
o problemas de seguridad. Si tiene un gran número de extensiones, es difícil controlar todas esas
extensiones cuando las actualizaciones estén disponibles. Afortunadamente, Joomla cuenta con una
función de actualización automática. Si las extensiones son compatibles con esta característica, puede
actualizarlas muy fácilmente. Vaya al Gestor de extensiones y haga clic en el enlace Actualizar en el
menú de la parte izquierda. En la pantalla Gestor de extensiones: Actualizar, haga clic en Buscar. Si hay
actualizaciones disponibles, selecciónelas e instálelas usando el botón Actualizar.
Nota Por razones de seguridad, lo mejor es eliminar por completo las extensiones
que no use más. De esta forma, no arriesga el código de las extensiones
obsoletas y posiblemente inseguras, que son explotadas por los hackers.
Para eliminar una extensión, haga clic en la ficha Gestionar en la pantalla Gestor
de extensiones. Seleccione la extensión que desee eliminar y haga clic en el
botón Desinstalar.
Cap.
Crear un diseño
a t r a c t i vo : Tr a b a j a r c o n
10
plantillas
CAP. 10: C rear un diseño atractivo : T rabajar con plantillas 241
Es probable que no desee crear sitios web que parezcan sitios típicos de Joomla. Ahí es donde las
plantillas vienen al rescate, debido a que Joomla le permite instalar una plantilla diferente en pocos
minutos, dando a su sitio un aspecto fresco. Hay cientos de plantillas disponibles en la web, por lo que
es posible la aplicación de cualquier estilo imaginable a su sitio. Además, puede personalizar fácilmente
las plantillas para satisfacer sus necesidades. Y si usted es un diseñador de sitios web, puede crear su
propia plantilla desde cero.
En este capítulo, vamos a explorar el poder de las plantillas. Aprenderá a modificar los ajustes de
la plantilla predeterminada; aplicar diferentes plantillas para diferentes páginas; descargar e instalar
plantillas de terceros; y personalizar plantillas ajustando el código CSS y HTML.
10.1 Esto es lo que hacen las plantillas

Una plantilla Joomla es un conjunto de archivos que contienen el código HTML y CSS, que definen el
aspecto de su sitio web. HTML es el código utilizado para construir páginas web, y CSS es el código
utilizado para dar estilo a las páginas. Se puede decir que HTML es como los ladrillos y el mortero de
su sitio, mientras que CSS proporciona el papel pintado y la pintura. Vamos a ver cómo funciona esto.
Sin ningún CSS aplicado, su navegador web mostrará un típico sitio de Joomla, como se muestra en
el lado izquierdo de la siguiente captura de pantalla. Aunque las capturas de pantalla son demasiado
pequeñas para que pueda discernir el texto de la pantalla, se dará cuenta de que en el lado izquierdo
se muestran textos planos e imágenes, con un mínimo de estilo. Sin embargo, en el lado derecho se
muestra el mismo contenido con estilos CSS aplicados. A través del CSS, se añade la presentación y el
diseño general de la página.
En realidad, una plantilla contiene mucho más que los códigos HTML y CSS. Después de todo, Joomla
tiene que saber dónde se debe colocar el contenido dinámico dentro de la estructura de la página
HTML. Es por eso que una plantilla también contiene algunas instrucciones escritas en lenguaje PHP,
que indican a Joomla dónde colocar el contenido principal, los menús y otros módulos.
242 DISEÑO DE SITIOS WEB INTERACTIVOS CON JOOMLA 3
Resumiendo, las plantillas determinan casi cualquier parte del diseño, desde el número de columnas a
la posición de los elementos, los colores, los gráficos o la elección de las fuentes.
10.1.1 Y es por esto que las plantillas son muy divertidas
Artística, básica, llamativa, informal, lúdica, corporativa o limpia, cualquiera que sea su gusto en
plantillas, es muy probable que encuentre una que se adapte a sus necesidades. La siguiente es
una pequeña selección de plantillas gratuitas de Joomla que se ofrecen en la web. (Se exhiben solo
algunos de los muchos diseños posibles.)
Fig. 10.1 Diversas plantillas de Joomla

Fuente: <http://www.joomla-monster.com>
No es difícil encontrar excelentes (a menudo gratis) plantillas en la Web. Al final de este capítulo,
aprenderá más acerca de dónde encontrar una gran variedad de plantillas. Sin embargo, primero
vamos a echar un vistazo a las plantillas que vienen con Joomla. En primer lugar, activará una de las
plantillas que se incluyen con Joomla, después de eso, podrá descargar y personalizar una nueva desde
la Web.
10.2 Cambiar los ajustes de la plantilla actual

Su punto de partida para la gestión y personalización de las plantillas actuales es el Gestor de Plantillas
(Extensiones | Gestor de plantillas). La pantalla Gestor de plantillas se compone de dos pantallas
principales, a las que se accede a través del menú de la izquierda: Estilos y Plantillas. En la pantalla
Estilos seleccione cuál de las plantillas disponibles desea utilizar en el sitio. La plantilla predeterminada
para el backend se llama Protostar, mientras que la plantilla predeterminada para el frontend del sitio
se llama Isis. Si ha seguido los ejercicios del capítulo 4, la plantilla actual predeterminada debería ser
llamada Protostar_copy.
10.2.1 Las plantillas de estilos
¿Por qué la primera pantalla que aparece en el Gestor de plantillas se llama Estilos? Podría esperar
que esta pantalla le permita personalizar los estilos CSS y las hojas de estilo que controlan el diseño
de la plantilla; sin embargo, este no es el caso. Un Estilo de plantilla es una variación que puede
crear sobre la base de una plantilla existente. Joomla le permite guardar una combinación de una
plantilla que incluye ajustes incorporados como un Estilo de plantilla. A continuación, puede asignar
este Estilo de plantilla a uno o más elementos de menú. En otras palabras, los estilos le permiten dar
estilo individualmente a páginas o a grupos de páginas.
Un ejemplo de esto es que usted puede establecer la página principal para utilizar un esquema de
color verde (el primer Estilo de plantilla) y otras páginas con un esquema de color azul (el segundo
Estilo de plantilla). Vamos a echar un vistazo al trabajo con Estilo de plantilla en la sección Aplicar
estilos de plantilla a páginas individuales.
Nota Los dos significados de la palabra Predeterminado (Default)
En la pantalla Estilos, la palabra Predeterminado se utiliza en dos sentidos

diferentes. En la barra de botones de la parte superior, el botón Establecer
como predeterminado funciona como era de esperar: permite que la plantilla
seleccionada sea la opción predeterminada, ya sea para el frontend como para
el backend. Sin embargo, también se dará cuenta que existen plantillas llamadas
predeterminadas, como Protostar - Default y Beez3 - Default. En este caso,
Default (predeterminada) significa que es la plantilla que usa sus ajustes normales
(en otras palabras: su Estilo de plantilla sin cambios, con los valores por defecto).
Se trata de distinguir las plantillas predeterminadas de plantillas con un estilo
específico aplicado, como Beez3 - Fruit Shop. Esta última plantilla se basa en
la plantilla Beez3, pero es grabada separadamente como un Estilo de Plantilla
específico para el sitio de ejemplo Fruit Shop.
10.3 Personalizar la plantilla actual usando las opciones integradas

Las plantillas pueden incluir todo tipo de opciones, permitiendo que el administrador del sitio cambie
el ancho, los colores, presentación de columnas de la plantilla y mucho más, sin tocar una sola línea
de código HTML o CSS. Vamos a ver cuáles son las principales opciones de la plantilla actual (el estilo
predeterminado de la plantilla Protostar) y cómo afectan a la apariencia de la plantilla.
Ejercicio 1: Cambiar las opciones de color y presentación del sitio
Primero observaremos algunos ajustes que afectan al esquema de color y a la presentación global.
1. Vaya a Extensiones | Gestor de Plantillas y haga clic en Estilos. Se muestra la pantalla Gestor de
plantillas: Estilos.
2. En la lista de plantillas disponibles, haga clic en protostar_copy – Predeterminado.
3. Le llevará a la pantalla Editar estilo. Haga clic en la ficha Avanzado, donde se muestran las opciones
disponibles.
4. Veamos los efectos de estas opciones personalizadas. La opción Template Colour (Color de la
Plantilla) permite algunos cambios muy poderosos en el aspecto del sitio. Vamos a probar un
esquema de color alternativo.
5. Haga clic en Template Colour para seleccionar el color para los énfasis en el sitio web: la línea
de color en la parte superior de la página, el color de los enlaces del menú y títulos. Aparecerá
una paleta de colores que le permitirá elegir un color. Seleccione un color dentro de la paleta
emergente para confirmar su elección.
6. Haga lo mismo con el Background Colour (Color de fondo), el color para el fondo de la página (que
por defecto es de color gris claro).
7. Haga clic en Guardar y luego en Ver sitio para ver la salida.
Como puede ver, el ajuste Template Colour cambia los colores de los encabezados, enlaces y
mucho más.
8. Por último, vamos a averiguar cuáles son los efectos del ajuste Google Font Name.
Por defecto, Protostar utiliza la fuente Open Sans para todos los encabezados. Open Sans es una
fuente gratuita, disponible en las Fuentes de Google. Sin embargo, puede elegir entre cientos de
fuentes de Google que puede encontrar en http://www. google.com/webfonts. Ingrese el nombre
de la fuente (por ejemplo, Bitter). Guarde los cambios para ver el resultado en el frontend. Todos
los títulos están ahora en la fuente Bitter.
Usando las opciones integradas en la plantilla, ha cambiado los colores y las fuentes del sitio.
Cada plantilla tiene su propio conjunto de opciones. En este caso, el desarrollador de la plantilla
ha agregado pocos ajustes básicos que permiten modificar el logotipo y los colores del sitio. Otras
plantillas pueden contener muchas más opciones. Aparte de esto, también puede personalizar la
plantilla cambiando el código CSS. Vamos a ver un ejemplo de esto más adelante en este capítulo.
TIP
Cambiar el logo del sitio
Probablemente, es una de las primeras cosas que la gente nueva

hace en Joomla: cambian el logo para poner su marca en el sitio que
acaban de comenzar a construir. En el capítulo 4, Fundamentos para
la construcción web: Crear un sitio en una hora, ya ha visto cómo se
puede agregar un logotipo usando el panel de opciones de la plantilla
Protostar. Si no tiene una imagen del logotipo, la plantilla Protostar
también le permite utilizar un logotipo de texto en su lugar. En el
panel Opciones avanzadas, busque la opción Logo y haga clic en el
botón Borrar. La plantilla ahora mostrará el contenido del campo
Título en lugar de la imagen del logotipo.
10.4 Cambiar a una plantilla diferente

Hasta ahora, hemos trabajado con Protostar, la plantilla predeterminada de Joomla. Sin embargo,
hay algunas plantillas adicionales disponibles en el paquete de Joomla. Para ver una descripción
general, vaya a Extensiones | Gestor de Plantillas y haga clic en enlace Plantillas, en el menú de la
izquierda, para ir a la pantalla Gestor de plantillas: Plantillas.
Aquí todas las plantillas disponibles se muestran con imágenes en miniatura, dando una impresión
rápida del diseño de la página. En la columna Localización puede ver si se trata de una plantilla
de Sitio o de Administrador. Joomla viene con dos plantillas de sitio (Localización: Sitio) y dos
plantillas que se pueden utilizar en el backend (Localización: Administrador).
10.4.1 Plantillas que vienen con Joomla
Un cambio importante en Joomla 3 es el uso de Bootstrap, un framework (marco) que se utiliza

habitualmente en el desarrollo web. Tanto la plantilla del frontend como la del backend se basan en
Bootstrap, creado por los desarrolladores de Twitter (véase http://twitter.github.com/bootstrap).
Bootstrap hace que sea más fácil definir rápidamente la apariencia de los sitios web. Contiene CSS,
confeccionado para presentaciones, botones, formularios, iconos, estilos de tabla y un sinnúmero
de otros elementos de diseño. La idea detrás de esto es que los desarrolladores web no tienen que
empezar de cero, pues Bootstrap les ofrece una biblioteca de código fiable basado en estándares.
Esto es genial, ya que ofrece a los desarrolladores de plantillas Joomla un conjunto fijo de elementos
de diseño que se pueden utilizar fácilmente.
Una de las ventajas del uso de Bootstrap es que todas las plantillas que vienen con Joomla 3 son
adaptadas para dispositivos móviles. La presentación de la plantilla se adapta automáticamente al
tamaño de la pantalla de los diferentes dispositivos móviles.
A continuación, un resumen de las plantillas que vienen con Joomla:
Nombre de la
¿Qué tipo de plantilla es?
plantilla
Este es el sucesor de Beez2, la plantilla predeterminada en la versión anterior de Joomla.
Beez3
Ahora se actualiza para Joomla 3 y es impulsado por Twitter Bootstrap.
Es la plantilla predeterminada. En el capítulo 4, y al principio de este capítulo, usted ha

Protostar
utilizado las opciones integradas para adaptar Protostar a sus necesidades.
Es la plantilla predeterminada para el backend del administrador. Esta es la plantilla de

Isis
backend que hemos utilizado a lo largo del libro.
Hay otra plantilla de administrador disponible, llamada Hathor. Está construida de acuerdo
Hathor a las normas de accesibilidad, permitiendo a la gente el uso de diferentes navegadores
y diferentes dispositivos para tener un acceso equitativo al sitio.
10.4.2 Previsualizar las plantilas disponibles
Para obtener una buena impresión del aspecto de cualquiera de las plantillas instaladas, haga clic en
la imagen miniatura de la plantilla en la pantalla Plantillas. Por ejemplo, al hacer clic en la imagen
Beez3 se abre una pantalla emergente que muestra una imagen de vista previa.
Para cerrar la vista previa, haga clic en la cruz de la esquina superior derecha, o haga clic en cualquier
lugar del área de fondo negro.
TIP
Acaba de ver una vista previa de la plantilla. Sin embargo, de forma

predeterminada, el texto junto a las miniaturas en la pantalla Gestor de
plantillas: Plantillas dice que no hay vista previa disponible. Eso es porque
hay dos maneras de previsualizar las plantillas disponibles. Como acabamos
de ver, siempre se puede hacer clic en la miniatura de la plantilla para ver una
versión más grande de esa imagen. Para tener una verdadera vista previa, haga
clic en el botón Opciones (al lado derecho de la pantalla) para que aparezca la
pantalla Opciones del Gestor de plantilla. Coloque la opción Previsualizar la
posición de los módulos en Habilitado. De esta manera, puede obtener una
vista previa de una plantilla que incluye todas las posiciones de los módulos
disponibles a través del enlace Previsualizar.
10.5 Configurar una plantilla diferente como predeterminada

Hasta ahora hemos construido un sitio web de ejemplo utilizando la plantilla predeterminada de
Joomla, llamada Protostar. Vamos a asumir que su cliente tiene algunos requisitos más específicos. Se
ha adoptado una nueva identidad visual y quiere su sitio web refleje esto. Parece que es hora de una
revisión general del aspecto del sitio. Como primer paso, explorará la plantilla alternativa disponible
en Joomla.
Ejercicio 2: Activar una plantilla diferente
Vamos a probar una plantilla diferente en cuanto al tamaño. En este ejemplo, vamos a elegir la plantilla
Beez3.
1. Vaya a Extensiones | Gestor de plantillas.

2. Haga clic en la estrella, en la columna Predeterminado, de la plantilla Beez3 - Default. Esto
convierte a Beez3 en la plantilla predeterminada. Haga clic en Ver sitio para ver los resultados.
El nombre predeterminado del sitio Joomla! Open Source Content Management se muestra en el
encabezado. Vamos a arreglar esto ahora.
3. Haga clic en el nombre de la plantilla en la página Gestor de Plantillas: Estilos. En la ficha Avanzado,
seleccione el archivo de imagen del logotipo Fascination que ha utilizado anteriormente y escriba
el Título del sitio (en nuestro ejemplo, Fascination), y la Descripción Empresa textil de medias.
4. Como color de la plantilla, seleccione Turquesa. Esto afectará a la cabecera gráfica. Debe
reemplazarlo con un degradado de color suave. Guarde los cambios y eche un vistazo a la salida en
el frontend.
La nueva plantilla tiene ahora un mejor aspecto. Como puede ver, ha cambiado la configuración del
módulo Contenido Deslizante para mostrar solo una columna de texto de introducción (Novedades
de Fascination, en la columna de la derecha). Si tuviéramos que utilizar esta plantilla, también podría
considerar mover otros módulos a las nuevas posiciones disponibles en esta plantilla. Por ahora, solo
estamos probando esta plantilla en el tamaño, por lo que no nos vamos a molestar en la fijación de
los detalles.
El mismo contenido, diferente diseño; mediante el establecimiento de una nueva plantilla

predeterminada le ha dado al sitio un aspecto completamente nuevo. La capacidad de cambiar las
plantillas en unos pocos clics es una de las cosas que realmente hace que Joomla destaque. Sin
necesidad de ningún conocimiento de codificación, se puede transformar por completo la apariencia
del sitio.
TIP
No todas las plantillas contienen este mismo conjunto de opciones.
Los desarrolladores de plantillas pueden decidir agregar docenas de
opciones, o solo una o dos. El tener menos opciones incorporadas
no limita sus opciones de personalización. Todavía puede editar las
propiedades de la plantilla y cambiar el código HTML o CSS. Vamos a
sumergirnos en esto más adelante en este capítulo.
10.6 Aplicar Estilos de plantilla para páginas individuales

La mayoría de sitios web utilizan probablemente una plantilla. Sin embargo, en Joomla es posible
asignar plantillas específicas para dar estilo a páginas individuales o a grupos de páginas. Si su sitio está
dividido en cinco categorías principales, ¿por qué no utilizar los cinco estilos diferentes, cada uno con
su propio conjunto de opciones seleccionadas?
Ejercicio 3: Crear un Estilo de plantilla para una página específica
Vamos a asumir que su cliente tiene ciertas páginas especiales en el sitio acerca de un evento especial.
Ellos quieren hacer que esta página de evento destaque del resto del sitio. Para conseguir este efecto,
vamos a crear y aplicar un Estilo de plantilla. Vamos a crear una copia de una plantilla y utilizarla para
dar estilo solo a las páginas que están enlazadas a través de un enlace del menú específico.
1. En primer lugar, vamos a crear una página ficticia y un enlace del menú que apunte a la misma. En
este ejemplo, vamos a crear una página de artículo titulada Visita nuestra empresa, y un enlace al
Menú principal (Main Menu) del tipo Artículo – Mostrar un solo artículo, titulado Open Day.
2. Vaya a Extensiones | Gestor de Plantillas para acceder a la pantalla Gestor de plantillas: Estilos.
3. Vamos a utilizar la plantilla Beez 3 que acabamos asignar como la plantilla predeterminada y crear
una copia de la misma. Seleccione Beez3 - Default, marcando la casilla de selección a la izquierda
del nombre de la plantilla. Haga clic en el botón Duplicar:
4. Una copia de la plantilla aparece en la lista, denominada Beez3 - Default (2). Haga clic en el nombre
para editar el nuevo estilo. En la pantalla Editar Estilo, seleccione los valores que distinguen a este
estilo de la plantilla predeterminada Beez3.
}}En el campo Nombre del estilo, ingrese Beez 3 – Evento especial.
}}En la ficha Avanzado, haga clic en el botón Limpiar, que es una equis situada junto al campo
Logotipo. En el campo Título del sitio, escriba Open Day. Borre el campo Descripción del
sitio. De esta manera, solo se mostrará el nombre del evento en lugar del archivo de logotipo
predeterminado.
}}Seleccione Posición de la barra de navegación: después del contenido. Esto significa que el
contenido principal se mostrará en el lado izquierdo, antes que otras columnas.
}}En el cuadro desplegable Color de la plantilla, seleccione Rojo.
}}En la sección Asignación a los menús, marque el enlace del menú Open Day. Esto asegurará que
la plantilla solo se aplica a la página donde apunta este enlace.
5. Haga clic en Guardar. Se muestra un mensaje que confirma que los elementos del menú
seleccionados han sido asignados al nuevo estilo de la plantilla. Haga clic en Ver sitio. En la página
principal y en otras páginas de este sitio, nada ha cambiado. Sin embargo, al hacer clic en el enlace
Open Day, se dará cuenta de que el nuevo Estilo de plantilla está activo.
TIP
Asignación de plantillas desde el mismo elemento del menú
Como las plantillas están enlazadas a determinados elementos del menú,

también puede asignar plantillas (o Estilos de plantilla) directamente al editar
un enlace del menú. Esto significa que puede controlar la asignación de la
plantilla, tanto desde la pantalla de configuración de la plantilla como desde la
pantalla del elemento de menú. Para esto, en la sección Detalles del elemento
del menú, utilice el cuadro desplegable Estilo de la plantilla.
10.7 Descargar e instalar una nueva plantilla

Por supuesto, las plantillas que se incluyen en Joomla son solo algunos ejemplos de los posibles
diseños. ¿Necesita un diseño realmente diferente o quiere un diseño más atractivo? Hay cientos de
plantillas disponibles en la web. Va a descargar los archivos de la plantilla como un archivo comprimido
e instalar este archivo de plantilla comprimido a través del Gestor de extensiones. Una vez instalado,
puede activarla a través de la pantalla Estilos de la plantilla, como se ha descrito anteriormente en
este capítulo.
TIP
Físicamente, una plantilla Joomla es un paquete de archivos. Al descargar

una plantilla, estos archivos se empaquetan en un formato comprimido
(normalmente un archivo ZIP). Joomla le proporciona un potente método de
un solo clic para cargar y descomprimir el archivo ZIP, instalando así todos los
archivos de plantilla necesarios en el servidor web, listo para su uso.
Imagine que su cliente quiere algo realmente diferente, un sitio con su propia presentación específica.
En ese caso, es probable que no quiera conformarse con cualquiera de las plantillas predeterminadas
de Joomla. Busque en la web una plantilla que se ajuste al nuevo logotipo y estilo corporativo de su
cliente. Vamos a ver cómo se puede descargar una plantilla gratuita de un desarrollador profesional
de plantillas.
Ejercicio 4: Descargar y activar una nueva plantilla
Para el rediseño de su sitio, vamos a encontrar una plantilla de buen aspecto buscando en la web. En
este ejemplo, vamos a utilizar la plantilla Futuro, desarrollada por IceTheme. Es una plantilla limpia y
sencilla que ofrece suficientes oportunidades para personalizar la presentación y la apariencia.
1. Navegue a http://www.icetheme.com/downloads/joomla-themes/free-joomla-themes/future/view-
category
2. Haga clic en el botón Descargar. El archivo de plantilla comprimido (IT_Future_V.3.0.0-(unzip-
first)-9544626154.zip) se guarda en el computador.
3. Navegue hasta el archivo ZIP en su equipo y descomprímalo. El archivo ZIP contiene varios paquetes
ZIP: la plantilla, una guía de instalación y varias extensiones libres que vienen con la plantilla. Una
vez que haya descomprimido el archivo ZIP, los siguientes archivos deben estar disponibles:
4. Una vez que haya descomprimido el archivo ZIP principal, también debe descomprimir los archivos
siguientes: IceMegaMenu_Unzip_First.zip y IceCarousel_Unzip_First.zip. uso de estas extensiones no
es obligatorio, pero puede optar por implementarlas para agregar un mejor sistema de menús para
su sitio y una página de presentación de diapositivas. Puede pasar por alto el archivo Clone_Installer-
(Joomla-3.0.3).zip; este solo se utiliza para crear una copia completa del sitio de demostración
IceTheme para esta plantilla.
5. Vaya a Extensiones | Gestor de Extensiones. Haga clic en Examinar y vaya al archivo tpl_ice_future.
zip en su equipo. Selecciónelo y haga clic en Subir e instalar. Se muestra un aviso: Instalar plantilla
se ha realizado correctamente.
6. Para activar la nueva plantilla, vaya a Extensiones | Gestor de plantillas. En la página Estilos active
la casilla de verificación junto a ice_future. Haga clic en el botón Predeterminada en la barra de
herramientas.
7. Haga clic en Ver sitio. La nueva plantilla está ahora activa.
Acaba de descargar y activar una nueva plantilla. Aunque se aplica el nuevo diseño, se dará cuenta
de que muchos elementos de nuestra presentación original (como los menús) no aparecen. Esto
es común cuando pasa a una nueva plantilla. A menudo tiene que cambiar el logotipo, cambiar las
posiciones del módulo y fijar un par de otras opciones.
Ejercicio 5: Agregar el archivo del logotipo
Primero vamos a agregar el logotipo de Fascination para la nueva plantilla y configurar algunas opciones
de la plantilla.
1. Vaya a Extensiones | Gestor de Plantillas y abra la plantilla Ice Future. Haga clic en la ficha Detalles.
2. Haga clic en Seleccionar junto a Site Logo, y suba y seleccione el nuevo archivo gráfico del logotipo
para el sitio web Fascination (logofascination.png).
3. Las opciones de la plantilla también incluyen la posibilidad de agregar botones de Facebook y
Twitter en el sitio. Como no vamos a agregar botones que apuntan a una cuenta de Facebook o
Twitter, seleccione No.
4. Seleccione IceTheme Logo: No para ocultar el logotipo y enlace al desarrollador de la plantilla.
5. Guarde los cambios y vea la salida.
Ha agregado un archivo gráfico de logotipo y ha cambiado algunos ajustes. Sin embargo, este es solo
el primer paso en la preparación de nuestro nuevo diseño del sitio. Ahora vamos a asegurar que los
menús y otros módulos sean visibles de nuevo.
Ejercicio 6: Agregar un módulo de menú
La plantilla que hemos descargado, Ice Future, viene con un par de módulos libres. Usted realmente
no los necesita con el fin de poder utilizar la plantilla. Sin embargo, los módulos pueden agregar
funcionalidad útil a su sitio. Especialmente el módulo IceMegaMenu trae muchas ventajas en
comparación con el módulo Menú de Joomla, y muestra un menú que combina a la perfección con el
diseño de la plantilla. Vamos a agregar este módulo.
1. Vaya a Extensiones | Gestor de Extensiones y haga clic en Examinar para ir al módulo de menú
descargado, mod_icemegamenu_v.3.0.0.zip. Instale el módulo.
2. A continuación, seleccione el plugin plg_icemegamenu_v.3.0.0.zip e instale también este plugin.
3. Active el plugin. Vaya a Extensiones | Gestor de Plugin y busque el plugin IceMegaMenu. Haga
clic en la cruz roja en la columna Estado. Se convierte en una marca de verificación, por lo que el
plugin está activo.
4. Ahora podemos habilitar el módulo de menú y cambiar su configuración. Vaya a Extensiones
| Gestor de módulos y abra el módulo IceMegaMenu. Cambie la configuración de la siguiente
manera:
}}Cambie el Estado a Publicado y cambie la Posición a Mainmenu [mainmenu].
}}En Select Menu, elija Main Menu.
}}Haga clic en la ficha Asignación de menú y elija En todas las páginas.
5. Guarde los cambios.
Ahora hay un menú desplegable horizontal que se ajusta perfectamente a la barra azul en la parte
superior. En el siguiente ejemplo, hemos agregado algunos enlaces de submenú al enlace principal
Actividades para ilustrar el efecto desplegable:
Lo bueno de este menú es que es sensible, al igual que la propia plantilla. Puede probar esto de
inmediato: si usted hace más pequeña la pantalla del navegador, los cambios en el menú desplegable
se adaptarán al nuevo tamaño de pantalla.
Ahora ha cambiado un par de ajustes de la plantilla y agregado un mejor módulo de menú. Sin embargo,
en el sitio de Fascination tuvimos algunos otros módulos que no están visibles en la nueva plantilla. A
continuación, vamos a solucionar este problema.
TIP
Sacar el máximo partido de la extensión Mega Menú
Por lo general, una plantilla contiene solamente los archivos que se encargan
del diseño y la presentación del sitio, pero la plantilla Ice Future viene con un
módulo IceMegaMenu separado. Se ofrece como parte del paquete libre Ice
Future. Como usted ha instalado esta extensión y el plugin que la acompaña,
encontrará una serie de características adicionales para cada enlace del
menú en el menú principal.
Al usar mega menu, puede agregar más contenido al menú que sólo los enlaces:
por ejemplo, puede agregar descripciones y crear menús desplegables con
dos o más columnas. Incluso, es posible agregar el contenido del módulo a
los menús desplegables (por ejemplo, para mostrar un módulo de inicio de
sesión en un menú desplegable).
¿Cómo se utiliza esta funcionalidad mega menú? Abra cualquier enlace de

menú que contenga enlaces de submenú y haga clic en Opciones avanzadas.
Aquí encontrará los Parámetros IceMegaMenu. Aquí puede introducir un
Subtítulo (unas pocas palabras de explicación que aparecerán a continuación
del texto real del enlace de menú) y puede establecer el número de columnas
para cada submenú desplegable. La salida se parece a la siguiente figura:
Para saber más sobre las características del Ice MegaMenu, eche un vistazo a
la guía de instalación de PDF, que es parte del paquete de extensión.
Ejercicio 7: Colocar módulos en nuevas posiciones de la plantilla
Después de haber instalado una nueva plantilla, no se mostrarán todos los bloques del módulo. Esto se
debe a que diferentes plantillas contienen diferentes (y con nombres diferentes) posiciones de módulo.
Como se vio en el capítulo anterior, las plantillas contienen posiciones, conocidas como izquierda,
position-1, position-2, y así sucesivamente. En este caso, las nuevas posiciones de la plantilla son
diferentes que las posiciones de la plantilla predeterminada. El siguiente paso es asignar los módulos
que hemos utilizado en el sitio de ejemplo, para sus nuevas posiciones de plantilla.
1. Para averiguar qué posiciones de módulo están disponibles, vaya a Extensiones | Gestor de
plantillas | Plantillas y haga clic en el enlace Previsualizar de la plantilla IceFuture. Se muestran las
posiciones disponibles en la plantilla actual.
2. Vaya a Extensiones | Gestor de módulos. Abra los siguientes módulos y asígnelos a las posiciones
adecuadas:
Nombre del módulo Tipo Nueva posición

XV Congreso de la SNI HTML Personalizado footer2
BT Content Slider
BT Content Slider right
Breadcrumbs Ruta de navegación breadcrumbs
Search Buscar search
Acerca de Fascination Menú footer1
3. Guarde los cambios y haga clic en Ver sitio. Los módulos se vuelven a mostrar.
Ya casi ha terminado de dar estilo al sitio de su cliente. Ha descargado e instalado una nueva plantilla,
ha cambiado algunos ajustes y se ha asegurado que todos los módulos se muestren en las posiciones
deseadas. El sitio se ve muy bien ahora y es muy diferente de su sitio impulsado por Joomla promedio.
En las siguientes secciones, aprenderá que usted puede hacer algunos ajustes adicionales al llenar más
posiciones de módulo, y cambiar el diseño al personalizar el código de la plantilla CSS.
Mundo real
Cambie la presentación de la página y del módulo
La parte divertida de las plantillas es que usted puede cambiar fácilmente la apariencia de su
sitio, no solo mediante la aplicación de una nueva plantilla, sino también jugando un poco con
las opciones de la plantilla y experimentando con el traslado de los módulos a las posiciones
disponibles del módulo. A continuación, un ejemplo de cómo el diseño y la presentación
pueden cambiar mediante el ajuste de algunas opciones.
}}Se dará cuenta de que la posición del módulo Content Slider ha cambiado. En vez de ser mostrado en
la columna Derecha, se muestra ahora en la posición promoción de la plantilla IceFuture. La plantilla
contiene código para comprobar si los contenidos se asignan a esta posición; si lo están, una gran
barra azul se muestra en el fondo de los contenidos del módulo. Para que los contenidos del módulo
llenen esta barra horizontal, las propiedades del módulo se han configurado para mostrar cuatro
textos de introducción junto al otro (en cuatro columnas).
}}Los ajustes de enlace Menú Home se han cambiado para mostrar tres textos de introducción al lado
del otro, en tres columnas.
Siéntase libre de experimentar con los ajustes del enlace del menú de la página principal, la colocación
de módulos y los ajustes de plantilla. Sus elecciones pueden resultar en un aspecto totalmente
diferente.
10.8 Personalizar una plantilla: Ajustar los estilos CSS

En este capítulo, usted ha visto cómo personalizar las plantillas mediante las opciones incorporadas.
Sin embargo, como no todas las plantillas contienen el mismo conjunto de opciones, algunas veces
tendrá que modificar un archivo o unas pocas líneas de código para hacer que la plantilla tenga el
aspecto deseado. Usted ha experimentado esto en el capítulo 4, cuando buscaba cambiar el lema de
la plantilla Protostar y tuvo que cambiar una línea de código CSS.
En el comienzo de este capítulo, usted aprendió que las Hojas de Estilo en Cascada (CSS) se encargan
del aspecto y la apariencia de su sitio web. Si desea cambiar el aspecto del sitio, podrá editar los estilos
en su archivo CSS (o los archivos CSS, ya que el diseñador de la plantilla a menudo divide el código
necesario en diferentes archivos de hojas de estilo).
Si no está familiarizado con CSS, eche un vistazo a la explicación básica de la sección siguiente. Después
de eso, vamos a ver algunos ejemplos de cómo ajustar el código CSS de una plantilla de Joomla. Más
adelante en este capítulo, encontrará algunos recursos útiles que explican las CSS con más detalle.
10.8.1 Comprender aspectos básicos de CSS
Si desea personalizar aún más la plantilla que acaba de instalar, tendrá que saber una o dos cosas
acerca de CSS, así que vamos ver los fundamentos del código CSS. En Joomla, los códigos HTML y CSS
están contenidos en documentos separados. Así, varias páginas web (documentos HTML) pueden
estar enlazados a la misma hoja de estilos CSS, lo que supone una gran ventaja. Con la actualización
de unas pocas líneas en una sola hoja de estilos, podrá cambiar el aspecto de varias páginas sin tener
que tocar el código HTML subyacente.
Joomla ofrece un sencillo editor de texto para abrir los archivos CSS de la plantilla y para modificar el
código, con lo que se pueden hacer cambios rápidos en la plantilla. Los fundamentos de código CSS
no son difíciles de entender, ya que las reglas en una hoja de estilo CSS tienen el siguiente aspecto:
h1 {
color: red;
font-weight:
bold;
}
Esta regla se aplica al elemento h1 (un título de nivel superior) en el documento HTML. Le dice
a su navegador que diseñe este encabezado estableciendo el color del texto en rojo y el formato
de la fuente a negrita. Las reglas CSS siempre se escriben entre llaves. Las líneas que son parte de
una regla CSS («declaraciones» como el color: rojo;) siempre están separadas por punto y coma. Si
quiere cambiar el color de fondo de todos los encabezados h1 a azul, ajuste la regla de estilo h1 en
el archivo CSS y reemplace el valor original (es decir, rojo):
h1 {
color: blue;
font-weight:
bold;
}
Aquí otro ejemplo de una regla de estilo CSS:
. lead {
margin-bottom: 18px;
font-size: 20px;
line-height: 27px;
}
Este estilo tiene su propio nombre de clase, .lead. En el ejemplo, las propiedades de margin-bottom,
font-size, y line-height se puede aplicar a cualquier elemento de la página HTML con la clase .lead. La
asignación de este nombre de clase a cualquier texto hará que el navegador muestre el texto en un
tamaño de fuente relativamente grande (20 píxeles) y agregue un poco de espacio extra entre líneas
(line-height) y por debajo del párrafo (margin-bottom).
Eso es todo. Así concluye su curso intensivo de cinco minutos en CSS. Si quiere profundizar más
en CSS, aprenderá acerca de algunos grandes recursos de la web sobre este tema más adelante.
Por ahora, vamos a ver lo que el cambio de unas pocas líneas de CSS puede hacer por nuestro sitio
ejemplo.
Ejercicio 8: Personalizar el color de fondo usando CSS
La personalización de los códigos CSS de la plantilla puede ser relativamente fácil, sobre todo cuando
se trata de cambios en propiedades tales como colores, tipos de fuente e imágenes. Puede editar las
hojas de estilo de la plantilla desde el backend de Joomla. Veamos cómo.
1. Vaya a Extensiones | Gestor de plantillas. En el menú de la izquierda, haga clic en Plantillas.

2. Ahora haga clic en el enlace de la plantilla que desea editar. En este ejemplo, haga clic en Deta-
lles y archivos de la plantilla Ice_future.
3. En el lado izquierdo de la pantalla, verá que hay una sección css. Haga clic en css/template.css. Esto
abrirá el código fuente de la hoja de estilos en una pantalla de editor.
4. En la pantalla del editor, busque (o escriba) la declaración de estilo body. Debe tener este as-
pecto:
body {
background: #e5e5e5;
line-height: 26px;}
5. Cambie la línea resaltada de la siguiente manera:
background: #ffffff;
Esto va a cambiar el color de fondo de la página a blanco (el código de color para el blanco es #ffffff).
6. El logo del sitio también tiene un fondo gris. Vamos a cambiar esto de una manera similar.
Localice el estilo #logo. Debe tener el siguiente aspecto:
# logo {
float: left;
background: #e5e5e5;
display: inline-block;
padding: 0 20px;
font-size: 18px;}
7. Cambie la línea de background de la siguiente manera:
background: #ffffff;
8. Guarde los cambios y vea el frontend del sitio.

Se dará cuenta de que el sitio tiene ahora un fresco color blanco de fondo.
Si no hay cambios, presione F5 o Refrescar para forzar que su navegador recargue la página. Por
supuesto, puede cambiar el color de cualquier valor que desee: simplemente haga una búsqueda en
Internet de códigos de colores css para encontrar una descripción general de los códigos a aplicar.
10.9 Analizar el CSS de Joomla utilizando herramientas de desarrollo web

En la sección anterior, ha cambiado unas pocas líneas de código CSS en el editor de Joomla, pero
¿cómo saber qué estilo CSS particular tiene que editar para conseguir el efecto deseado?, ¿cómo
puede averiguar, por ejemplo, que el fondo del logotipo es estilado a través del estilo #logo?
En Joomla, su mejor opción sería ir al Editor de plantillas y tratar de averiguar cuál es el estilo
apropiado mediante el análisis de la hoja de estilos CSS. Sin embargo, los desarrolladores de plantillas
y extensiones tienden a agregar varios archivos CSS que contienen cualquier cantidad de estilos,
lo que complica la búsqueda. Por suerte, hay una solución mucho más eficaz. Mediante la función
Inspeccionar elemento del navegador Chrome (o el uso de Firefox, junto con su plugin de desarrollo
web Firebug) puede inspeccionar cualquier página web y analizar el código HTML actual y los estilos
CSS importantes, que se muestran en secciones separadas de la ventana del navegador.
Echemos un vistazo a un ejemplo, utilizando el navegador Chrome. Suponga que desea averiguar qué
código CSS necesita cambiar para personalizar el color de fondo del logotipo en la plantilla actual. Abra
su sitio web en Chrome, haga clic derecho en cualquier parte en la ventana y seleccione Inspeccionar
elemento. En la mitad inferior de la ventana del navegador, dos pantallas mostrarán el código HTML
y el código CSS de la página web actual. Ahora puede comenzar la inspección de los elementos de
la página, simplemente haciendo clic en el pequeño ícono en forma de lupa en la parte inferior de
la pantalla del navegador y pasando el mouse sobre la página web. Seleccione cualquier parte de la
página web para ver todo el código relacionado, como se muestra en la siguiente captura de pantalla:
Al hacer clic en el área del logotipo en la página web (1), vemos que el logotipo de fondo es estilado
a través del estilo div#logo. En la pantalla inferior-izquierda (2) puede ver el código HTML de este
elemento DIV, en la pantalla inferior-derecha (3) puede ver el CSS relevante. En este caso, el color de
fondo se establece en e#5e5e5.
Ahora, aquí está la parte divertida: incluso puede editar el CSS y escribir otro código de color (por
ejemplo, #ffffff para el blanco) y ver de inmediato los efectos. Esta es una gran manera de poner a
prueba los cambios de código. Sus cambios no se almacenan, ya que el navegador no tiene acceso a
los archivos de Joomla. Para confirmar los cambios, edite los archivos CSS originales usando el editor
de CSS de Joomla o cualquier otro editor de texto y guarde el archivo CSS. La herramienta inspector
incluso le dice exactamente qué archivo CSS contiene el código actual.
Para obtener más información acerca del uso de herramientas para desarrolladores de Chrome, eche
un vistazo a este tutorial en http://falasco.org/chrome-developer-tools. Puede encontrar herramientas
similares para Firefox buscando un tutorial de Firebug
10.9.1 Amplíe sus conocimientos de CSS
¿Quiere profundizar más en el arte de crear y editar hojas de estilo? Encontrará una gran variedad
de recursos útiles en la web. Solo busque un tutorial CSS o eche un vistazo a:
}}Tutorial CSS desde http://es.html.net/tutorials/css/

}}El sitio del Tutorial CSS: http://www.csstutorial.net/introductionCSS.php
}}Tutoriales, ejemplos y demos CSS de W3Schools: http://www.w3schools.com/
TIP
Edición de la plantilla HTML
Si desea realizar más cambios fundamentales a una plantilla, Joomla también

le permite editar el código HTML de la plantilla. Hay un editor HTML disponible
en el backend de Joomla, al igual que la pantalla del editor de CSS. Si lo desea,
puede modificar el código de la plantilla. Puede agregar, cambiar, eliminar o
mover cualquier elemento de las páginas existentes, es decir, las columnas,
encabezado y pie de página. Por supuesto, solo debería hacer esto si tiene
conocimientos de HTML, no se arriesgue a estropear la presentación del sitio.
Incluso si usted no desea sumergirse a fondo en HTML, poder cambiar la

plantilla HTML directamente desde Joomla es todavía útil. Le permite cambiar
o eliminar elementos no deseados que a veces son «codificados» (es decir,
una parte fija del código HTML) en la plantilla, como un texto de pie de página
o un aviso de copyright. Para acceder al editor HTML, vaya a Extensiones |
Gestor de plantillas. En la página Plantillas, haga clic en Detalles y Archivos
de la plantilla [nombre de la plantilla]. En la parte izquierda, verá enlaces a
carpetas CSS y HTML que mostrarán un editor de código; puede cambiar el
código y guardar sus cambios inmediatamente en el archivo original.
10.10 Hacer una copia de seguridad y restaurar una plantilla personalizada

La edición de una plantilla directamente desde Joomla es una gran manera de ajustar la presentación
a medida que avanza. Usted puede aplicar los cambios en el backend y de inmediato una vista previa
de los efectos de cada ajuste que ha realizado. Sin embargo, hay un inconveniente: todos los cambios
en los archivos de plantilla solo se almacenan en el servidor web. Si por alguna razón usted tuviera que
volver a instalar la plantilla, se perderán los cambios.
Para evitar que esto suceda, haga una copia de seguridad de la plantilla tan pronto como haya
terminado la personalización. Esta es la forma:
}}Iniciesu programa FTP y vaya a la carpeta que contiene la plantilla a la que desea hacer una copia
de seguridad. En el caso de la plantilla ice_future, esto sería algo como /httpdocs/templates/
ice_future. Aquí httpdocs es la carpeta raíz de la instalación de Joomla en el servidor web; en su
situación, la carpeta raíz puede tener otro nombre, como www o htdoscs.
}}Descargue la carpeta de plantillas (incluyendo subcarpetas y su contenido) a su computadora.
Esta carpeta contiene todos los archivos de plantilla. Si desea volver a instalar la plantilla más tarde,
suba esta carpeta en la misma ubicación en el servidor web otra vez, y la carpeta plantillas en el
directorio raíz de la instalación de Joomla.
TIP
Un enfoque diferente: personalizar una plantilla fuera de línea
En este capítulo, ha personalizado una plantilla mediante la edición de los

archivos de la plantilla en la pantalla del Editor de plantillas de Joomla. Otra
opción sería descargar primero los archivos de la plantilla, abrirlos para
editarlos con el programa de edición web de su elección y subirlos de nuevo
después de haber terminado la personalización. Esto puede ser una buena
idea si conoce (y sabe trabajar con) herramientas de edición web como
Notepad++ o Adobe Dreamweaver. Los recursos para la creación de plantillas
que figuran en la siguiente sección le ayudarán en su camino si le gusta
explorar este método.
10.10.1 Dónde puede encontrar una nueva plantilla para sus sitios
Si busca en la web por «Plantillas Joomla 3.0», obtendrá una serie deslumbrante de resultados.
Puede tomar horas encontrar la plantilla que mejor se ajuste a sus metas. En cambio, es posible que
desee comenzar la búsqueda de plantillas en sitios dedicados de galería de plantillas de Joomla.
}}Buenos puntos de partida son sitios de plantillas, como www. joomla24.com, www.bestofjoomla.
com y www.cmslounge.com. Estos sitios ofrecen cientos de plantillas. Examine las colecciones y
las vistas previas de las plantillas que le gustan.
}}Compruebe las colecciones de desarrolladores profesionales de plantillas de Joomla, como www.
rockettheme.com, www.joomlashack.com, www.gavick.com, www.yootheme.com, y www.
joomlabamboo.com.
}}Hay algunos blogs que pueden tener enlaces para plantillas como: www.taringa.net, www.
argentinawarez.com, www.ba-k.com.
¿Cómo encuentra la plantilla perfecta, con la calidad y el enfoque de diseño que se adapte a sus
necesidades? Es bueno ser exigente, después de todo, la plantilla predeterminada Protostar es
bastante versátil. Es adaptable para smartphones y tablets, puede personalizar los colores y tipos de
letra, y contiene muchas posiciones de los módulos, que le dan una gran libertad para determinar
la presentación de la página. A continuación, un par de cosas más a tener en cuenta cuando esté
buscando una plantilla.
}}La plantilla no debe ser demasiado complicada. Algunos desarrolladores añaden más y más
opciones a sus plantillas. Aunque esto pueda parecer ventajoso, también significa que se
necesita tiempo para hacer que la plantilla funcione de la manera deseada. Tenga cuidado con
las plantillas pesadas, con un montón de códigos, scripts y grandes imágenes, ya que pueden
reducir la velocidad de su sitio web.
}}Usted será capaz de encontrar plantillas de calidad que son completamente gratis. También hay
muchas plantillas ofrecidas por desarrolladores comerciales. Tenga en cuenta que los fabricantes
de plantillas gratuitas a veces requieren que se mantenga un enlace de autor en el pie de página,
señalando el sitio web del desarrollador. A menudo, se trata de una cuestión de probar la plantilla
y comprobar sus restricciones de licencia.
}}¿Será adecuada una plantilla para todos los tamaños de pantalla y todos los dispositivos? En
ese caso, compruebe si la plantilla es sensible. De esta manera, ajustará automáticamente su
disposición a los diferentes dispositivos.
}}Asegúrese que la plantilla descargada sea adecuada para plantillas de Joomla 3, Joomla 1.5 y 2.5,
y que además, funcionarán en versiones más recientes.
10.11 Crear su propia plantilla

Usar una plantilla existente (y personalizarla) le ayudará a conseguir grandes resultados y ahorrar su
valioso tiempo, en comparación con la creación de su propia plantilla desde cero. Sin embargo, si
desea tener un control completo o necesita una presentación única, usted puede crear una plantilla
Joomla todo por usted mismo. No es complicado, pero sí requiere un buen conocimiento de los códigos
de HTML y CSS. Si sabe cómo construir un sitio web utilizando HTML y CSS, entonces tendrá ningún
problema en convertir su diseño en una plantilla Joomla. La mayor parte de su tiempo y esfuerzo irán
a parar a la creación de un diseño de página desde cero, en lugar de hacer los ajustes necesarios para
adaptar dicho diseño para Joomla.
Como se trata principalmente de una cuestión de HTML y CSS, no cubriremos la creación de plantillas
con todo detalle aquí. Para hacer una introducción, le daremos algunas sugerencias. Estos son los cinco
pasos principales que se necesitan para crear su propia plantilla:
}}Bocetear. Diseñe una presentación general para su sitio web. ¿Dónde quiere ubicar el contenido
principal, la navegación y los demás elementos de la página? Piense en bloques, al igual que lo hace
Joomla. Divida la página en bloques que contienen los menús, artículos e imágenes. El resultado
será una representación esquemática de la página.
}}Diseñar. Cree una presentación en un editor gráfico, como Photoshop o GIMP. El resultado es una
maqueta del diseño del sitio. Solo vamos a usar los retazos de esa imagen en la plantilla final, como
la imagen del logotipo o de algunas partes de la imagen que contienen los efectos de sombra.
}}Codificar. Transforme su diseño en código de página web utilizando HMTL y CSS. Puede utilizar
una herramienta de desarrollo web como Dreamweaver, que le permitirá ver inmediatamente los
resultados de su codificación.
}}Personalizar el código para Joomla. Adapte el código CSS y HTML para crear archivos de plantilla
Joomla. En el archivo principal de la plantilla va a insertar códigos diciendo a Joomla dónde debería
poner todo su contenido dinámico (tal como los módulos).
}}Armar su plantilla. Cualquier plantilla se compone de un conjunto de archivos, por ejemplo, un
archivo que contiene información acerca de la plantilla (nombre del autor, derecho de autor, y así
sucesivamente). Por último, deberá incluir todos estos archivos en un archivo comprimido (archivo
ZIP). Ahora la plantilla está lista para ser cargada e instalada a través de Extensiones | Instalar y
Desinstalar.
10.11.1 Recursos para la creación de plantillas
Hay muchos tutoriales en la web que le pueden ayudar en su camino cuando quiera crear plantillas
de Joomla. Puede buscar en internet del siguiente modo: Joomla plantilla tutorial. Estos sin duda le
ayudarán en su camino. Sin embargo, desde Joomla 3, la técnica detrás de plantillas ha cambiado
sustancialmente.
La principal novedad es la integración del framework de desarrollo web, llamado Twitter Bootstrap
que usted leyó al principio de este capítulo.
}}Construcción de una plantilla básica de Joomla 3.0 con Bootstrap: http://www.inmotionhosting.

com/support/edu/joomla-3/create-template
}}Tutorial: Hacer una plantilla de Joomla 3.5 [ plantilla en blanco incluida]: http://www.barryflood.
com/create-a-template-for-joomla-35.php
}}Plantilla en blanco y Tutorial de Twitter Bootstrap: Tutorial para Joomla: Una guía para la
creación de su propia plantilla Joomla, basada en una plantilla vacía de forma gratuita. http://
blank.vc/de/blog/6-blank-template-and-twitter-bootstrap-tutorialfor-joomla.html
TIP
El uso de software generador de plantillas
¿Qué sucede si quiere crear su propia plantilla desde cero, pero no se siente
seguro utilizando los lenguajes de programación? Puede considerar el uso de
un programa de software basado en Windows, especial para crear plantillas
para Joomla, llamado Artisteer. Es un programa muy fácil de usar, que le
permite utilizar plantillas de ejemplo o sugerencias de diseño; sin embargo,
usted también puede optar por un control manual completo sobre el diseño
y la apariencia del sitio. Puede exportar su diseño como plantilla Joomla e
instalarlo de la forma habitual. Hay algunas advertencias: el programa no es
libre (cuesta alrededor de $ 100) y el código que genera es menos optimizado
que el HTML y CSS hecho a medida. Sin embargo, puede ser una gran solución
si usted es creativo y quiere tener un control total sobre el diseño del sitio.
Puede descargar una versión de prueba en la página www. artisteer.com.
10.11.2 Usar un framework de plantilla como base para su propia plantilla
En lugar de descargar una plantilla ya hecha o crear su propia plantilla desde cero, también hay una
tercera opción, que es utilizar un framework de plantilla. Un framework es básicamente una plantilla
con una enorme cantidad de opciones integradas, que le permite definir la presentación, posiciones
del módulo, estilos de menú, colores, fuentes y otros, inmediatamente desde el panel de control
de la plantilla. Aunque los frameworks de plantillas vienen repletos de características y le dan una
gran cantidad de control, le obligan a pasar algún tiempo para llegar a saber cómo funciona todo
y aprender de qué manera personalizarlos (ya que los diferentes desarrolladores de frameworks
siguen sus propias estrategias específicas de diseño).
Si está interesado en los frameworks de plantillas para Joomla, esta es una buena introducción sobre
el tema: Using a Joomla Template Framework to Design your Site.
http://magazine.joomla.org/issues/issue-oct-2012/item/891-using-a-joomla-templateframework-
to-design-your-site.
Finalmente, para una comparación de frameworks, puede revisar este blog:
www.joomlashine.com/blog/9-joomla-framework-solutions-for-developers.html.en comprender
Bibliografía
Burge, S. (2012). Joomla explained (1st ed.). Boston, U.S.A.: Addison-Wesley.
Graf, H. (2012). Joomla 2.5: Beginner´s Guide (7th ed.). Indianapolis, Indiana, U.S.A: Complusoft.
Rahmel, D. (2013). Advanced Joomla (8th ed.). U.S.A: Apress.
Shreves, R. (2013). Joomla Bible (2nd ed.). Indianapolis, U.S.A.: John Wiley & Sons, Inc.
Tiggeler, E. (2013). Joomla 3: Beginner's Guide (5th ed.). Birmingham, Reino Unido: Packt Publishing.
Impreso en los talleres gráficos de
Surquillo

Diseño de Sitios Web Administrables Con Joomla 3 - Luis Angulo Aguirre PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño de Sitios Web Administrables Con Joomla 3 - Luis Angulo Aguirre PDF

Cargado por

Copyright:

Formatos disponibles

Autor: Luis Angulo Aguirre

© Derechos de autor registrados:

© Derechos de edición, arte gráfico y diagramación reservados:

Coordinación de arte y diseño:

Edición a cargo de:

( Teléfono: (511) 748 0560

Primera edición: setiembre de 2014

ISBN N.° 978-612-304-216-5

Crear contenido de calidad: Agregar y editar artículos...................................................................... 123

Ayude a sus visitantes a encontrar lo que quieren: Gestión de menús............................................ 153

Sacar el máximo provecho de su sitio: Ampliar Joomla..................................................................... 207

1.1 Únase a la revolución de la CMS

1.2 Tipos de gestores de contenido

A. Por sus características:

B. Por su uso y funcionalidad:

El nombre Joomla significa todos juntos. Es mucho más que un producto de

1.3 Por qué elegir Joomla

Fig. 1.1 Joomla es accesible desde cualquier tipo de dispositivo

1.4 Tipos de sitios que se pueden construir con Joomla

Fig. 1.2 Portal de la Alianza para la Educación Católica

Fig. 1.3 La Maison de Lucy

Fig. 1.4 Sitio web del Museo Guggenheim

Fig. 1.5 Empresa holandesa de eventos

Si está buscando un poco más de inspiración, navegue por la

1.5 Aprender a usar Joomla

}}Dominar los fundamentos de la creación de un sitio web básico en una hora.

No se preocupe, para aprender el uso de Joomla no tiene que seguir

Nota Como Joomla 3 está siendo desarrollado activamente, nuevas características

1.6 Acerca del sitio ejemplo

2.1 Qué se necesita para empezar

¿Qué pasa si no tiene el espacio de hosting?

Si aún no tiene una cuenta de hosting, puede instalar Joomla en su

Otra opción es instalar primero el software de servidor web y luego el de

2.2 Actualizar desde versiones anteriores de Joomla

Nota Cuando decida actualizar su sitio, asegúrese de crear una copia de

2.2.1 Actualización de Joomla 1.5 y 3.x

Nota Actualmente existe una extensión comercial disponible que se encarga

2.2.2 Actualización de Joomla 2.5 a 3.x

En el capítulo anterior, ha encontrado información sobre el ciclo de liberación de Joomla, habrá

2.3 Instalación de Joomla en cuatro pasos

}}Instalar Joomla mediante un asistente de instalación

2.3.1 Pasos para descargar los archivos de Joomla

Empiece descargando la versión actual de Joomla.

Esta acción le llevará a la página de descarga. Seleccione la última versión2.

2.3.2 Colocar los archivos en el servidor web

Nota No se preocupe por el nombre de la carpeta raíz (httpdocs o cualquiera de

2.3.3 Crear una base de datos

3. Aparece una pantalla que confirma la creación de la base de datos:

2.3.4 Ejecutar el asistente de instalación de Joomla

2. En la pantalla Configuración principal, cambie los ajustes e ingrese información de la siguiente

En esta pantalla ingrese los siguientes datos:

Visualizará la siguiente página:

2.4 Cambiar el idioma

}}Estando en el backend, vaya a Extensiones | Gestor de Idiomas.

}}Aparecerá el mensaje Instalar Spanish se ha realizado correctamente.

}}Ahora vuelva a Extensiones | Gestor de Idiomas.

Ahora elija Instalado - Administración y repita el paso anterior.

2.5 Obtenga ayuda

}}Visite el sitio de documentación de Joomla en http://docs.joomla.org, y compruebe las páginas

3.1 Hacer el cambio y construir sitios web a la manera Joomla

3.1.1 Lo sentimos, las páginas web han dejado de existir

La principal diferencia entre el enfoque de la antigua escuela estática y la construcción de un sitio