Guía de Usuario Joomla 1.5.x
Guía de Usuario Joomla 1.5.x
x
Esta es una guía básica para usuarios principiantes de Joomla, no para desarrolladores web. Por su sencillez y
su síntesis, permitirá al usuario conocer las funciones más básicas e importantes de la gestión de contenidos.
La misma contiene los pasos a seguir para crear y administrar un sitio web en Joomla, después de la instalación
del programa en su versión Joomla 1.5.x. Asumiremos que al instalar el programa se han cargado los datos de
ejemplo, cosa que recomendamos cuando se usa Joomla por primera vez.
1.1 - La interfaz pública de Joomla -o Front-End- (el sitio que sus usuarios verán)
La apariencia de Joomla puede variar mucho dependiendo del template que se utilice. La siguiente imagen
muestra un sitio web Joomla con el template que viene por defecto (el cual tiene una configuración de 3
columnas, una cabecera -header- y un pie de página -footer-)
(imagen 1)
En esta instancia es importante comprender cómo organiza la disposición de contenidos Joomla dentro de su
interfaz gráfica pública. Las zonas rojas representan módulos, y la zona verde representa el area del contenido
principal (main content) de las páginas web.
Los módulos se disponen alrededor del contenido principal (main content): en las columnas laterales (izquierda
y derecha), en la cabecera y pié de página, y también por encima o por debajo del contenido principal.
1.2 - La interfaz administrativa de Joomla -o BackEnd- (donde usted administrará su sitio)
Primero debe ingresar a la administración de su sitio: http://www.susitio.com/administrator/ (debe
reemplazar"susitio.com" por su verdadero dominio), una vez allí debe tipear el usuario y contraseña para
acceder.
(imagen 2)
Si los datos que tipeó para acceder eran los correctos Ud. debe ser redireccionado/a al Panel de
Administración Principal:
(imagen 3)
Desde ahora en adelante, todas las acciones de administración supondrán que el usuario ya ha ingresado y se
encuentra logueado dentro de su panel administrativo. (Existe una forma de administrar Joomla desde su Front-
End, pero no lo explicaremos aquí)
CONSEJO: Conviene tener abiertas dos ventanas (o pestañas) del navegador, cada vez que administremos el
sitio.
• En una ventana cargaremos la interfaz pública del sitio http://www.susitio.com
• Y en la otra ventana cargaremos la interfaz administrativa: http://www.susitio.com/administrator/
De esta manera, podremos ir alternando la visualización en ambas. Cada vez que hacemos un cambio en el
administrador, vemos cómo queda en la parte pública, maximizando su respectiva ventana (o seleccionando su
pestaña en el navegador). Esto nos permitirá comprender rápidamente cómo funciona el sistema.
(imagen 4)
Depués ir a Content >> Article Trash >> Seleccionar los articulos >> Click en "Delete".
Estos pasos deben realizarse obligatoriamente si depués vamos a borrar las secciones y categorias.
(imagen 5)
2.2- Borrar Categorias
Ir a Content >> Category Manager >> Seleccionar las categorias >> Click en Delete
(imagen 6)
2.3- Borrar Secciones
Ir a Content >> Section Manager >> Seleccionar las secciones >> Click en Delete
(imagen 7)
2.4- Borrar o Despublicar Módulos
Recomendamos no borrar ningún módulo! en lugar de ello pueden despublicarse, y ya no se mostrarán más.
Ir a Extensions >> Module Manager >> Seleccionar Módulos a despublicar >> Click en Disable
(imagen 8)
Advertencia: NO BORRAR los módulos Main / User / Top / Other Menu, puesto que estos contienen los
enlaces de los menúes de navegación, a través de los cuales puede navegarse por las distintas páginas web de
su sitio Joomla. Para administrar menues vea el punto siguiente!
2.5- Borrar Menúes de navegación
Cada menú es un bloque (módulo) que contiene un conjunto de enlaces hacia diversas secciones o páginas web
de su sitio. No hay que confundir "menú" con "enlace del menú".
1- ir a Menus>> Menu Manager
2- Seleccionar el menú que se desea eliminar (sólo los que se instalaron como ejemplo -Example Pages,
Keyconcepts-) >> Click en "Delete"
3- Luego se cargará una página en la cual están listados los enlaces del menú a eliminar, debe hacer click en
"Delete".
(imagen 9)
Advertencia: Se recomienda NO BORRAR NUNCA los menues Main / User / Top / Other Menu. Si no
deseamos alguno de estos menues en nuestro sitio (excepto el Main Menu que es el menú principal), estos
deben ser despublicados desde la administración de módulos. El menú principal ni siquiera debería ser
"despublicado"
(imagen 12)
(imagen 14)
4.1 Editor Visual
Joomla 1.5.x ya viene con un editor de contenidos visual (WYSIWYG), llamado TinyMCE 2.x. Este editor
tiene dos areas principales: El campo de herramientas y el campo de trabajo.
(imagen 15)
4.2 Interfaz de edición/creación de un documento web
- Datos y estado del documento: Titulo del documento, alias, estado de publicación (publicado o no
publicado), sección y categoria a la cual pertenece el documento actual, front page (esto nos indica si el
documento está publicado en la página principal o no)
- Campo de trabajo: el mismo es donde va el cuerpo del documento: el texto, las imágenes, y los enlaces que
se pueden editar (todo esto se llama hipertexto).
- Campo de Herramientas: Aquí están las herramientas que sirven para "formatear" el cuerpo del documento
editado: incrustar y editar imágenes, alinear el texto/imagen, establecer jerarquías entre encabezados de textos
(títulos y subtítulos entre los diferentes párrafos), insertar tablas, enlaces, utilizar formato para los párrafos de
texto: viñetas, negritas, itálicas, etc
Al crear un documento nuevo (ver imagen 16), debe colocarle un titulo al documento, un alias (usualmente es el
mismo que colocamos en el titulo), y seleccionar una sección y categoría (previamente creadas) donde
pertenecerá ese documento.
Luego proceda a colocar el contenido del documento en el campo de trabajo, utilizando el editor visual para
formatear el contenido. Cuando el documento está listo: Guarde o aplique los cambios. (más información sobre
cómo formatear el contenido en el apartado siguiente)
(imagen 16)
4.3- Guardar/Cancelar los Cambios Realizados
1- Guardar la edición del documento (guarda y cierra el documento actual)
2- Aplicar la edición y continuar editando (guarda el cambio pero el documento actual carga nuevamente)
3- Cerrar la edición, los cambios realizados hasta el momento sin haber clickeado en los botones 1 y 2 no serán
guardados.
(imagen 17)
5- Editar/Configurar documentos
5.1- Editar Contenido, Documento/Página web
Exiten varias formas de encontrar el contenido que queremos editar (dependiendo de si se trata de un sitio web
pequeño con pocas páginas o uno grande con muchos documentos):
1- ir a >> Content >> Article Manager >>
Aparecerán todos los documentos listados, cuyos nombres se ven en la columna "Title". Haga click en el
"nombre del documento" que desea editar.
(imagen 18)
(imagen 19)
2- En Article Manager se puede filtrar la lista de contenidos por sección y / o categoría: Seleccionar Sección y
Categoria (ver imágenes 20 y 21) >> Aparecerán todos los documentos listados cuyos nombres están en la
columna Title, haga click en el que desea editar.
(imagen 20)
(imagen 21)
Cuando encontró el artículo de contenido que desea editar, debe clickear en su título (columna "Title"), y será
dirigido a la interfaz de edición del documento en cuestión, por ejemplo:
(imagen 22)
(imagen 23)
TRUCO: El botón HTML que muestra el editor visual (WYSIWYG) nos permite recuperar el código fuente del
cuerpo del documento (lo que va en el campo de trabajo). Ese código fuente HTML puede ser llevado a un
editor HTML de escritorio (como Dreamweaver o Frontpage), y luego de la edición en esos programas, puede
llevarse nuevamente el código fuente generado al editor HTML del editor TINYMCE
5.2- Agregar/insertar una Imagen
Debe colocar el cursor en donde desea que aparezca la imagen, luego debe hacer click en el botón "Image"
(abajo del campo de trabajo)
(imagen 24)
Una vez que clickea, se abrirá una ventana (ver imagen 25): Los pasos de selección son: hacer click en la
imagen que desea insertar >> puede elegir la alineación (el campo "Image URL" se rellena automáticamente)
>> Clic en "Insert".
(imagen 25)
Más utilidades de "Image" (los siguientes campos aparecen en la misma pantalla de la imagen 25): Aquí se sube
una imagen que no está en el servidor, entonces, se hace click en "Browse files" >> buscar la imagen >> click
en "Abrir" >> hacer click en "Start Upload".
(imagen 26)
(imagen 27)
Todos los textos e íconos que están en los recuadros rojos de la imagen anterior, dependiendo de la temática o el
tipo de sitio que estamos creando, pueden o no estar activados.
Si usted no desea estos elementos -Todos o algunos- lo que debe hacer es ir a Content >> Article Manager >>
Parameters
(imagen 28)
Luego se abrirá una pantalla con los parametros:
(imagen 29)
Cada punto, en la imagen, permite:
[esta sección está incompleta]
1. Opciones: No - Yes >> Al seleccionar No, no se verán links a usuarios sin loguearse en la
parte pública
2. Opciones: No - Yes >> Al seleccionar No, el punto B en la imagen 27 no aparecerá en la
parte pública
3. Opciones: No - Yes >> Si desea que el titulo (punto B) sea Linkeable, seleccionar Yes
4. Opciones: Hide - Show >>
5. Opciones: Hide - Show >> Si desea que el nombre de la sección a la cual pertenece el
artículo aparezca seleccionar Yes
6. Opciones: No - Yes >> Cuando el nombre de la sección aparece (punto 4), que sea
linkeable?
7. Opciones: Hide - Show >> Si desea que el nombre de la categoria a la cual pertenece el
artículo aparezca seleccionar Yes
8. Opciones: No - Yes >> Cuando el nombre de la categoria aparece (punto 7), que sea
linkeable?
9. Opciones: Hide - Show >> Es para el punto C en la imagen 27, si desea que no se vea
seleccionar Hide
10.Opciones: Hide - Show >> Es para el punto D en la imagen 27, si desea que no se vea
seleccionar Hide
11.Opciones: Hide - Show >> Es para el punto F en la imagen 27, si desea que no se vea
seleccionar Hide
12.Opciones: Hide - Show >>
13.Opciones: Hide - Show >> Corresponde a si se quiere que el enlace "Read More"
aparezca.
14.Opciones: Hide - Show >>
Los puntos 15, 16, 17 y 18 corresponden al punto E en la imagen, las opciones son: Hide -
Show. Aquí puede seleccionar Hide en el ícono que no desea que aparezca, por ejemplo
para que no aparezca el ícono PDF (punto 16 en la imagen 29) seleccionar Hide, entonces,
en la parte pública aparecerán los íconos Print y E-mail pero el de PDF no.
15.Opciones: Hide - Show >>
(imagen 31)
(imagen 32)
(imagen 33)
Seleccionar documento que se desea enlazar: Seleccionar Sección >> Seleccionar Categoria >> Clic en el
documento a enlazar>>Luego debe hacer clic en Save (imagen 20)
(imagen 34)
El enlace creado se verá así en la parte pública (frontend):
(imagen 35)
(imagen 37)
La interfaz pública se verá así:
(imagen 38)
7.2- Traducir Títulos de Módulos
Por si no recuerdas los módulos son esos bloques que se disponen alrededor del area de contenido principal
(main content)
Por defecto, los módulos que trae el sistema Joomla (en su versión oficial de Joomla.org), vienen titulados en
inglés, para traducir estos títulos debes hacer así:
Ingresar a Extensions >> Module Manager >> Click en el módulo el cual se quiere cambiar el idioma
(imagen 39)
En el campo Title, seleccionar Main Menu (nº1), cambiar por su traducción (nº2) y luego click en Save (nº3)
(imagen 40)
Una vez editado los módulos que utilizamos en el sitio la interfaz pública se verá, por ejemplo, así:
(imagen 41)
MUY IMPORTANTE!: Las siguientes consideraciones son aplicables también a la publicación de cualquier
sección o categoría de contenidos en Joomla. Es decir, las reglas y acciones que explicaremos a continuación,
tanto valen para administrar la página principal de un sitio Joomla, como también para la página de una
sección o categoría cualquiera.
OPCIÓN 1: Página simple
Una alternativa muy sencilla consiste en publicar un solo item de contenido (documento o página web) en la
"homepage". Entonces, cada vez que haya que actualizar la home simplemente debes editar ese item de
contenido, y ya. Generalmente esta opción es buena para sitios pequeños que no se actualizan muy seguido, o
que necesitan contenido estático en la homepage, por ejemplo, una tabla con ciertos productos destacados (este
es nuestro caso, y así está diseñada la homepage de www.desarrollodeweb.com.ar)
Para usar esta configuración simplemente creamos un documento estático (o alternativamente un documento
cualquiera dentro de una sección/categoría) y luego hacemos así: Desde Content >> Article Manager >> en la
fila del documento / contenido que queremos publicar en la home de forma estática, hacer click en la columna
"front page" (ver interfaz pública en la imagen 10, nº1)
(imagen 42)
OPCIÓN 2: Blog-List Layout
Si en la sección principal de contenidos de tu sitio (maincontent), y precisamente en la homepage quieres
colocar siempre nuevos contenidos de manera tal que el sistema automáticamente los "organice", lo mejor es
utilizar el modo de publicación "blog layout" o "list layout" de Joomla.
Este sería el caso de portales de noticias, blogs, o simplemente sitios web donde quiera destacarse la "novedad"
y/o contenidos constantemente renovados (eventos, novedades, anuncios, etc, en forma de items de contenido).
¿de donde vendrán los contenidos que queremos publicar en la homepage?
Los contenidos que publicaremos en la homepage pueden ser los items de una sección entera, también podrían
ser los items de una categoría específica (que recordemos, debe pertenecer a una sección, según la jerarquía de
contenidos Joomla), y adicionalmente podemos publicar en la homepage el contenido principal de jerarquía
superior de cualquier componente de Joomla.
Por ejemplo, si queremos tener con Joomla un carrito de compras, y utilizamos Virtuemart para ello, puede
resultar muy interesante que las categorías de productos del carrito se vean directamente en la página principal.
Lo mismo si queremos montar un "foro" con Joomla (para lo cual podríamos utilizar el componente FireBoard),
y deseáramos hacer que la página de inicio del foro sea precisamente la homepage de Joomla, que es la página
principal del sitio.
¿de qué forma se mostrarán los contenidos?
Para contenidos ordinarios de Joomla, básicamente hay dos modos de publicación Blog Layout y List Layout
Para publicar contenidos de manera similar al de un blog, tenemos la opción de Blog Layout: la última
publicación (temporalmente hablando) queda destacada en primera posición, y se coloca por encima de la
anteúltima (2da posición), y a su vez esta de la anterior.... y así sucesivamente hasta la publicación más vieja
visible dentro de la homepage. Luego el sistema organiza una paginación de contenidos, es decir, comienza a
colocar contenidos más viejos en otras páginas sucesivas.
A su vez, cada item de contenido tiene una "intro" (intro text) que puede contener imágenes, animaciones, etc.
Debajo de esa intro, el item de contenido contiene un desarrollo más detallado (más texto e imágenes). En el
modo Blog Layout, solo se verá ese copete o headline del "intro text", junto con un enlace del tipo "leer más"
para acceder al contenido completo específicado.
List Layout, es una simple lista de documentos que pertenecen a una sección y/o a una categoría específica.
Esta lista solo contiene los títulos de cada documento, con un enlace para acceder a cada uno de ellos. No hay
aquí, a diferencia de Blog Layout, bloques de texto de intro para cada item, con botones "ver más".
Luego de estas consideraciones, veamos cómo se hace en la práctica, para publicar en la homepage contenido
de toda una sección o categoría en forma de blog o lista de elementos.
La manera de configurar los distintos modos de publicar en la homepage (blog, list layout, component), y de
seleccionar las fuentes de publicación (sección, categoría, componente), es desde el enlace "Home", ubicado en
el MainMenu (menú principal de Joomla)
Desde Menus >> Main Menu >> Click en el enlace "Home" >> será redireccionado al documento "Menu
Item: [ Edit ]" >> en el cuadro "Menu Item Type" hacer click en el botón "Change Type", éste le llevará al
documento "Select Menu Item Type"
(imagen 43)
Desde "Select Menu Item Type" se puede elegir las diferentes opciones, eligiendo la que se adapte al tema de
nuestro sitio. A continuación algunas de las opciones:
Opción 1 - Seleccionamos Category Blog Layout (de "Select Menu Item Type")>> será redireccionado
nuevamente a "Menu Item: [ Edit ]" y deberá seleccionar la categoria >> Luego debe hacer click en Save (ver
interfaz pública en la imagen 10)
(imagen 44)
Opción 2 - Seleccionamos Category List Layout >> seleccionar la categoria (desde "Menu Item: [ Edit ]") >>
Click en "Save" (ver interfaz pública en la imagen 10)
Opción 3 - Seleccionamos Section Blog Layout >> seleccionar la sección (desde "Menu Item: [ Edit ]") >>
Click en "Save"(ver interfaz pública en la imagen 10)
(imagen 45)
Los pasos para utilizar el editor de Joomla para generar contenidos de código limpio son los siguientes:
1- Escribir el texto en un bloc de notas. No utilizar Word directamente para llevar texto que deba ir en páginas
web!!!!!. Si nuestros textos están en un archivo Word, al copiar y pegarlo en el campo de trabajo se genera
mucho código basura (formatos inventados por Microsoft, que no forman parte de estándares aceptados de
marcado HTML).
Entonces en este caso hacemos así: Seleccionar todo el texto a publicar, desde el archivo Word, luego copiarlo y
pegarlo en el bloc de notas. Luego...
2- Seleccionar todo el texto (desde el bloc de notas)
3- y copiarlo (Click en el botón derecho del mouse y seleccionar Copiar)
(imagen 46)
Ir Article: [Edit], en el campo de trabajo colocar el cursor, hacer click en el botón derecho >> Seleccionar
Pegar (nº1 en la imagen 47). Luego quedará como muestra el recuadro nº2 imagen 47
(imagen 47)
Para dar formato a cada parte del texto:
Comenzaremos por separar el texto en párrafos (o bloques de texto sin formato). Para ello debemos colocar
el cursor al final de cada línea y presionar la tecla "Enter"
(imagen 48)
Formatos Hn (Encabezados del documento):
Los más utilizados son H1 a H3 (dependiendo de la extensión y tipo de documento). En el ejemplo siguiente se
utiliza H1:
1- Seleccionar el texto
2- Ir a Format, seleccionar "Heading 1"
3- El texto (Documento Nuevo) quedará en formato H1
(imagen 49)
Texto en Negrita:
1- Seleccionar el texto / frase que queremos colocar en Negrita
2- Hacer click en el ícono , del campo de Herramientas
(imagen 50)
Crear un Enlace dentro del texto del documento:
1- Seleccionar el texto al cual se quiere ponerle un enlace
2- Hacer click en (campo de herramientas), luego se abrirá una ventana (ver recuadro nº3 en la imagen 51)
3- Completar los campos necesarios:
3.1- Colocar la url del enlace.
3.2- Seleccionar en qué ventana quiere que se abra la página del enlace. Por ejemplo, si es un enlace externo
seleccionar"open in new window (_blank)" para que se abra en una ventana nueva.
3.3- Colocar el título del enlace (usualmente el mismo que el nombre / anchor del enlace).
3.4- Seleccionar alguna clase / estilo (opcional).
3.5- Cuando los campos necesarios ya están completos debe hacer click en "Insert"
(imagen 51)
Crear Texto con Viñetas:
1- Separar cada frase / texto que se quiere con viñetas (del texto pegado en el campo de trabajo) colocando el
cursor al final y hacer "Enter".
2- Luego se selecciona todo el texto separado en el punto 1.
(imagen 52)
Otras aplicaciones del campo de herramientas:
(imagen 53)
a- Texto en Negrita
b- Texto en Cursiva
c- Texto Subrayado
d- Texto Tachado
e- Texto Alineado a la Izquierda
f- Texto Centrado
g- Texto Alineado a la Derecha
h- Texto Justificado
i- Estilos (estos estilos se toman desde las CSS del template de Joomla)
j- Formatos (párrafo, h1, etc)
k- Fuente tipográfica -arial, times new roman, etc- (se recomienda no usar, ya que el estilo tipográfico se toma
directamente desde las hojas de estilos CSS del template que se está utilizando)
(imagen 54)
l- Viñetas sin orden
m- Viñetas con orden (numérico)
n- Sangría de Texto
ñ- Anular Sangría de Texto
o- Crear un enlace
p- Eliminar un enlace
q- Editar / Agregar Parámetros de Imagen
r- Ver Campo de Trabajo en Códio HTML
costado derecho debe aparecer el ícono que indica que es compatible con Joomla 1.5.x
Una vez que ya tiene el componente / plugin / etc, compatible con Joomla 1.5.x debe acceder a la
administración de su sitio:
Administrator >> Panel principal >> Extensions >> Install/Uninstall
(imagen 55)
Luego será redireccionado a una interfaz como muestra la siguiente imagen:
(imagen 56)
Los pasos a seguir son:
1- Hacer click en el botón Examinar
2- Se abrirá la pantalla "Carga de Archivos", debe seleccionar el archivo que desea instalar, luego haga click en
"Abrir"
3- Ejecutando el paso 2, le aparecerá en el campo "Package File" (imagen 24 círculo 3) la ruta del archivo a
instalar, debe hacer click en "Upload file & Install". Una vez que el archivo esté instalado le aparecerá el
siguiente mensaje: "Install Component Success".
Nota: El sistema detecta automáticamente qué tipo de archivo se intenta instalar (un componente, o plugin, o
template, etc), por lo tanto no debe ir a Components para instalar un componente o a Templates para instalar
un template.
11- Desinstalar Componente, Módulos, Plugins, Lenguajes o Templates
Para desinstalar algún componente, template, etc. debe realizar los siguientes pasos (tambien reflejados en la
imagen 57):
Ir a Extensions >> Install/Uninstall >> Extension Manager
1- Click en "Components / o Plugins / o Templates",
2- Click en el "Componente / Plugin / Template" que se desea desinstalar,
3- Click en Uninstall. Una vez el "Componente / Plugin / Template" se desinstale aparecerá el siguiente
mensaje: "Uninstall Component Success".
(imagen 57)