in

Joomla, Instalación de plantilla y creación de menú.

La elección de la plantilla es una elección que nos puede llevar mucho tiempo, pero una mala elección de la misma puede hacer fracasar nuestro proyecto. Si trabajamos para un cliente, lo primero que le va a gustar o no, es la parte visual; y esto es claramente la plantilla, no le interesará si la web es auto administrable y sus diversos beneficios, solo escuchará estos beneficios, si se llena los ojos con el diseño.

Por este motivo la elección de la plantilla tiene que ser la adecuada, nos puede llevar más tiempo de lo debido pero la elección de la plantilla justa, nos va a ahorrar muchísimas idas y venidas con nuestro cliente.

Si llevamos años trabajando con Joomla, en el momento que tenemos la entrevista con el cliente, nosotros automáticamente ya tenemos pensado la plantilla indicada para el trabajo, pero si recién comenzamos en este mundillo, vamos a tener que hacer una buena investigación por internet.

Existen muchísimas plantillas para Joomla, tanto comerciales como no comerciales en este tutorial solo vamos a trabajar con plantillas no comerciales, de esta manera no vamos a gastar dinero y vamos a aprender a trabajarlas en su totalidad.

Vamos a trabajar con la plantilla Simple Tech y en la web Joomla themes podrás encontrar varias plantillas gratuitas para desarrollar tus páginas.

En la plantilla Simple Tech, tenemos la opción de descarga y una vista de “Module positions” que son las posiciones de la plantilla, esto nos será de gran utilidad.
Entramos al administrador de Joomla y nos dirigimos a la opción instalar, e instalamos la plantilla en formato zip.

Ahora nos dirigimos al sitio y vemos como la plantilla ya se encuentra instalada.

Ahora vamos a crear el menú y otorgarle la posición correcta. Vamos a “Gestor de menú” para crear la primera parte del árbol de menú, hacemos clic en el número para entrar al menú.

Entramos en el menú que está creado por defecto llamado “inicio” hacemos clic en el titulo.
Podemos cambiarle el título por el que necesitamos.

Un consejo al crear el árbol del menú, hay que ponerles nombres cortos, como los que vamos a utilizar en el tutorial, por ejemplo “productos” es un buen ítem de menú, pero “nuestros productos” es muy largo. Ahora seleccionemos el artículo.

Elegimos el artículo indicado, en este caso inicio.

Ahora tenemos que limpiar el artículo, para que se parezca lo menos posible a un blog. Joomla tiene iconos bastante básicos a nivel diseño, no recomendamos dejarlos, salvo que la web lo demande.

Creamos otros dos ítems nuevos de menú, en este caso creamos “nosotros” y  “servicios”. Hacemos clic en “Guardar y nuevo”.  Vamos al icono seleccionar  y escogemos la opción artículo simple para linkear otro artículo.

Le ponemos el nombre al artículo, en este caso Nosotros  y en “Elemento Padre”, si es superior lo dejamos por defecto, pero si queremos hacer sub menú, tenemos que seleccionar el menú que queremos. (Dejamos un ejemplo de menú desplegable, en la pestaña “Nosotros”). En seleccionar elegimos nuestro artículo y en parámetros de componente hacemos lo mismo que en el anterior, una vez terminado hacemos clic en “Guardar y nuevo”. Hasta terminar el menú completo.

Ya creados los ítems, tenemos que otorgarle la posición correcta al menú. Para saber dónde va ubicado cada modulo, tenemos que tener las posiciones o normalmente llamadas “Module positions”. En este caso vienen las posiciones en la misma página de descarga, también la podemos encontrar en un archivo jpg dentro del archivo zip. O ponemos en cualquier buscador la siguiente frase (Nombre de la plantilla + module positions) y lo encontraremos con seguridad.

Nos dirigimos a “Gestor de menú” y hacemos clic en “Menú principal”.

En posición le vamos a dar el lugar indicado al menú; en este caso la posición es “Menú” esto varia depende la plantilla.

Hacemos clic en “Mostrar siempre los items en los submenús”. Esto acticvará el desplegable. Hacemos clic en “Guardar” y nos dirigimos al sitio para ver los cambios.

Cambio de logo y favicon.
Nos dirigimos vía FTP a la siguiente ruta (templates/jt004_j25/images). Y remplazamos el logo del sitio, por el actual. Tiene que tener el mismo nombre y extensión, en este caso (logo.png). Creación de logo.

Favicon (Es el logo que se detalla en la pestaña del navegador.):

Tomamos el logo en formato png y lo abrimos con un editor de imágenes.  Elegimos algo que identifique al logo, lo recortamos, le cambiamos la medida por 16 X 16 y lo guardamos con el nombre (favicon) en formato (.ico). Luego lo subimos vía FTP.

Para finalizar crearemos un formulario de contacto. Nos dirigimos a “Componentes” y seleccionamos la opción “Contacto”. Primero creamos una categoría y luego en contacto, creamos uno nuevo. Completamos el dato del “Nombre“ y escogemos la categoría creada. En “Detalles Contacto” rellena los datos de la página. Es fundamental agregar el correo electrónico, para que nos haga el formulario.

Si quieres cambiar los iconos, entra  via FTP a la siguiente ruta (tudominio/media/contacts/images/) y podrás encontrar todas las imágenes para manipularlas o reemplazarlas.

Consejo:

Puedes tener problemas con el idioma del sitio (Si vienes siguiendo los tutoriales y migraste el Joomla 1.5 a la versión 2.5). Podrás tener problemas con el idioma de la página.
Ve a gestor de idiomas eliges en todas las opciones “Español” y luego dirígete a “Gestor de Plugins” y activa el siguiente plugin “System – Language Code”.

Reportar

¿Qué te pareció?

Escrito por Federico Reggiani

Participo en NeoTeo.com, JuegosFan.com y Foto24.com como desarrollador, entre otras cosas.

3 Comments

Leave a Reply
  1. Muy buena la serie de tutoriales de joomla, aumque me gustaria que hicieran un tutorial enseñandonos como adaptar nuestra plantilla de dreamweaver o photoshop a joomla.

  2. Por favor, sigue con los tutos y tantos como puedas que estoy aprendiendo Joomla gracias a ti !!!! Y los sigo al pie de la letra.

Responder a edspal Cancelar la respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Curiosity está llegando a su nueva casa

Pencil Project: Crea prototipos para aplicaciones y sitios web