Construyendo un sitio con Joomla-Tutorial

Con el objeto de describir las características, semejanzas, diferencias, fortalezas y debilidades de cada CMS iremos construyendo una página básica con cada uno de ellos. Para la contrucción del sitio con Jommla hemos adquirido el dominio www.aprendejoomla.com.mx y hemos hosteado e instalado el sitio. Es importante hacer notar que trabajaremos con la versión Joomla 1.7 que es la más actual a la fecha en el que se escribe este artículo.

Como se describió Joomla tiene dos partes el Frontend y el Backend. Al Front entramos simplemente escribiendo el url www.aprendejoomla.com.mx en el navegador, mientras que al Back entramos con la siguiente url www.aprendejoomla.com.mx/administrator.

Una vez introducido el nombre de usuario y la contraseña tenemos la siguiente imagen en el lado del administrador o Backend

En la versión 1.5 el sistema aparecía solamente con el menú, mientras que en esta versión, al momento de la instalación se crean 3 módulos: Breadcrums, Login Form, Banner, Main Menu. Con el objeto de ser más claros en la explicación hemos suprimido todos los módulos a excepción de Main Menú. Esto se realiza seleccionándolos y oprimiendo el botón de Papelera. Las imágenes del administrador y del Front para iniciar este tutorial son las siguientes:

 

Vamos a cambiar la posición del menú a 0, lo cual se logra:

1.- Damos un clic en la palabra Main Menu

2.- Damos un clic en el botón que dice Seleccione Posición

3. Seleccionamos beez_20 en el filtro que dice Seleccionar Plantilla

-Esto se realiza con el objeto de solamente ver las posiciones de la platilla activa, es decir la que estamos usando, y no ver todas las posiciones de todas las plantillas- esto es algo que no era necesario en la versión pasada y me parece que no aporta en mucho, sino por el contrario

4.- Damos un clic en Guardar y Cerrar

Colocación de Módulos

Con el objeto de que la página se vea estética y funcional vamos a colocar varios módulos.

Modulo Quién está en Línea

1.- Damos un clic en Nuevo

2.- Seleccionamos el tipo de módulo Quién está en Línea

3.- Escribimos en el título: Amigos en Línea

4.- Seleccionamos la posición número 6

5. Cerramos y guardamos

Modulo Acceso

1.- Damos un clic en Nuevo

2.- Seleccionamos el tipo de Acceso

3.- Escribimos en el título: Regístrate

4.- Seleccionamos la posición número 7

5. En la parte derecha en dónde dice Texto anterior escribimos: Regístrate para recibir nuestra información

6. Cerramos y guardamos

Modulo Personalizar HTML –para Desarrollado por…

1.- Damos un clic en Nuevo

2.- Seleccionamos el tipo de módulo Personalizar HTML

3.- Escribimos en el título: Digitalizate

4.- Seleccionamos la posición número 14

5. En el editor de texto escribimos: Un desarrollo de Digitalizate

6. Damos un clic en el ícono del eslabón – o cadena que representa que vamos a hacer un link

7. En el editor de texto escribimos: Un desarrollo de Digitalizate

8. En dónde dice Link URL escribimos: http://www.digitalizate.net

9. Damos un clic en el botón Insert

10. Cerramos y guardamos

Modulo Personalizar HTML –para Bienvenida

1.- Damos un clic en Nuevo

2.- Seleccionamos el tipo de módulo Personalizar HTML

3.- Escribimos en el título: Bienvenidos

4.- Seleccionamos la posición número 12

5. En el editor de texto escribimos: Bienvenidos a Aprende Joomla. Aquí  presentamos un tutorial de como construir una sencilla página web con Joomla en su versión 1.7. Esperamos que les sea de utilidad

6. Vamos a Google y buscamos una imagen agradable de Joomla y le damos Copiar

7. En el editor Pegamos la imagen

8. En dónde dice Link URL escribimos: http://www.digitalizate.net

9.- En la sección Menú Asignado, seleccionamos la opción Sólo en las Páginas Seleccionadas

9. Marcamos la opción Home

9. Cerramos y guardamos

Estas son las pantallas del Back y del Front hasta este paso

Modificación de la plantilla

Con el objeto de que nuestro sitio tenga una mejor presencia vamos a modificar la plantilla, para que incluya nuestro nombre y eslogan.

1.- Seleccionamos en el menú de Extensiones la opción: Gestor de Plantillas

2.- Damos un clic en Beez2 - Default

3.- En el costado derecho damos un clic en el botón Limpiar –para quitar el Logo de Joomla

4.- En donde dice Título del Sitio escribimos: Aprende Joomla

5. En Descripción del sitio escribimos: Tutorial de la versión 1.7

6. Cerramos y guardamos

Creación de una página para un formulario de contacto

Vamos a crear una nueva página para mostrar en ella un formulario de contacto para que los visitantes nos puedan mandar un mensaje. Para ellos primero debemos crear un Formulario de Contacto en el componente correspondiente y después crear una botón en el menú principal, que muestre este formulario. Los pasos son los siguientes.

Creación del Componente Contacto.

1.- Seleccionamos en el menú de Componentes la opción: Contactos

2.- Damos un clic en Nuevo

3.- Escribimos en Nombre: Envíanos un mensaje

4.- En el costado derecho damos un clic en Detalles del Contacto

5. en la opción Email escribimos hugo@digitalizate.net –que es el mail en el que recibiremos los mensajes

6. Llenamos algunos otros datos

7. Cerramos y guardamos

Una vez que se ha creado el formulario, debemos de proceder a crear un nuevo botón en el menú principal que muestre nuestro formulario.

Creación de un nuevo Botón en el Menú Principal.

1.- Seleccionamos Main Menu en la sección Menús

Observamos que tenemos un botón llamado Home – para mayor claridad cambiamos el nombre a Inicio

2.- Damos un clic en Nuevo

3.- En la opción Tipo Elemento Menú damos un clic en Seleccionar

4.- Damos un clic en Contacto único

5.- En Título Menú escribimos: Contáctanos

6.- En el costado derecho damos un clic en Detalles del Contacto

7.- Seleccionamos Envíanos un mensaje- que es el formulario recién creado.

8. Cerramos y guardamos

Creación de un artículo en la página principal

Finalmente vamos a crear un artículo cuyo contenido va a ser precisamente este tutorial y lo vamos a mostrar en la página principal:

1.- Seleccionamos Gestor de Artículos en la sección Contenido.

Esta es la parte más importante de nuestro sitio, pues aquí se crean todos los contenidos de nuestra página

2.- Damos un clic en Nuevo

3.-  En Título Menú escribimos: Tutorial JOOMLA! 1.7

4.- En el editor de texto escribimos – o cortamos y pegamos el contenido de este tutoriol

5. Cerramos y guardamos

6.- Damos un clic en ícono que aparece debajo de Características – esto hace que se publique en la página principal

Al final de nuestro tutorial, la página queda así

Y puede ser consultada en www.aprendejoomla.com.mx