Miércoles, 13 Diciembre 2017

Como seleccionar, instalar y personalizar un Template en Joomla

Contenido[Ocultar]

En la mayoria de las ocasiones que nos disponemos a instalar y probar un template, en lo primero que nos fijamos es en la imagen que acompaña dicho template o bien una demo que nos suele presentar el desarollador del mismo y de repente lo vemos claro "Este es el template que quiero para mi web". El siguiente paso es descargarlo y procedemos a instalarlo y seleccionarlo para que podamos ver lo bonito que queda. Pues como la gran mayoria ya sabemos, DE ESO, NADA. Las posiciones de los modulos no concuerdan con los que ya tenemos en nuestra web o no disponemos de los modulos que han permitido el visionado espectacular mostrado en la DEMO...

No les voy a mostrar ninguna imagen para ilustrar este tutorial. Considero que si se las mostrase la gran mayoria no se molestarian en leer este articulo y pasarian directamente a efectuar los cambios necesarios segun las imagenes mostradas, solo mostrare las imagenes de forma que puedan darse cuenta de los cambios que se producen mientras se realiza el adecuadamiento e instalacion y como se va produciendo el cambio, hasta ser una pagina en condiciones para poder mostrar.

Para ello voy a utilizar un ejemplo sobre el cual estoy trabajando, todo se mostara en una galeria de imagenes con los pasos efectuados.Si hiciera uso de imagenes para el tutorial les aseguro que no les iba a ayudar a comprender la estructura que contiene un template joomla.

Lo que si voy a hacer es describirles y orientarles paso a paso como poder seleccionar y mostrar el template para su pagina web en las condiciones adecuadas para cuando un navegante llegue a su web, pueda acceder a todos los contenidos de forma sencilla y pueda encontrarse a gusto con su diseño.

Paso 1: Seleccionar Template

Vamos a seleccionar una plantilla (template) a nuestro gusto. Para ello les muestro varias paginas en forma de enlace para que pinchen, vean y seleccionen.

BestofJoomla - Esta web contiene la mayoria de los templates para joomla que circulan por internet, tanto gratuitos como de pago. En relacion a los templates de pago, dire en su favor que la mayoria incluyen los modulos y componentes necesarios para dicho template, aunque no siempre es asi,  por lo tanto aseguraros antes de comprar.

TemplatePlazza - Esta web cuida mucho el aspecto de sus demos y seguramente la que mejor refleja el motivo por el cual he realizado este..... vamos a llamarlo "Tutorial orientador". Cuando se prueba una de sus plantillas nos damos cuenta que el instalar el template solo es una minima parte del trabajo a realizar para darle el aspecto que buscamos a nuestra web.

Joomla24 - Templates Gratuitos para joomla 1.5, 2.5 y 3.0, yo diria que una buena fuente para empezar probando.

Categoria Templates de solojoomla - Esta es un categoria donde muestro una serie de plantillas joomla de todo tipo para portales, Blogs, Empresas... donde incluyo quickstart y plantillas, haciendo un buen uso de la informacion aqui expuesta se puede conseguir un diseño adaptado a la necesidad de cada uno. Desde esta categoria llegaran al directorio de plantillas joomla! de solojoomla.

Paso 2: Instalacion

Para instalar un template sea en joomla 1.5 o joomla 2.5 / J!3.0 es la mismo que con cualquier componente, modulo o plugin. Pero a mi entender hay otra forma que mas sencilla y es por medio de nuestro cliente FTP de toda la vida.

Descomprimimos el template y subimos la carpeta con todo su contenido a la carpeta /templates, aparecera en la parte de administracion de los templates para que puedan seleccionarlo como predefinido y visualizar el resultado. ¿Porque hago referencia a esta forma de instalar un tempalte?...

Pues es bien sencillo, como todos saben y es lo que intento explicar aqui, es raro encontrar un template que nos venga bien en su totalidad para nuestro proyecto, bien cuando se instala un template por medio del administrador se generan permisos de escritura en los archivos e imagenes, y suelen ser de "Mirame y no me toques", si intentan cambiar una imagen, un Logo... no les va a dejar.

Cuando surge el problema es cuando intentan cambiar los permisos de escritura de un archivo con su cliente FTP y.... No les deja ni cambiar, ni eliminar, ni sobreescribir , con lo cual estan en  un aprieto y deben cambiar los permisos como sea y es cuando tienen que hechar mano de aplicaciones como JoomlaXplorer, que es un componente que te permitira realizar esta operacion entre otras, que pueden encontrar en este enlace -> -Permisos Joomla-.

Asi que al menos para mi lo mejor es subir los templates directamente desde nuestro cliente FTP, al no ser que incluya algun módulo adicional que necesite el archivo XML para su instalacion, lo cual es muy raro, es mas aun no he visto ninguno. Instalen sus templates desde su cliente FTP y se evitaran algun que otro quebradero de cabeza.

Para poder realizar la acción comentada en Joomla 3.x, una vez subido el template joomla 3.x acceder a la administración, en Extensiones / Gestor de extensiones. Hacer clic en Descubrir. Si no les aparece nada, mirar arriba a la derecha y veran un icono con el mismo nombre Descubrir. Hacer clic en ese icono y deberian aparecer la plantilla que acabas de subir.
Señala la plantilla y haz clic en el icono Instalar.

La plantilla quedara instalada y deberian poder modificar a su gusto imagenes y editar archivos de esa plantilla.

Paso 3: Buscar extensiones

El segundo paso es buscar las extensiones necesarias para incrustarlas y adapatarlas a nuestro template. Para poder realizar esta tarea, existen muchas webs, pero la principal de todas es Joomla.org , la cual contiene todas las novedades, actualizaciones... Aunque como antes he mencionado, en el primer paso, primero buscaremos en la web del desarollador de la plantilla (template). Para acceder a las extensiones de Joomla.org, en el menu horizontal, pincharemos en EXTENSIONS y accederemos a las extensiones por categorias y un buscador eficaz.

Otro aspecto a tener siempre en cuenta es el idioma de las extensiones. Hoy dia las traducciones al castellano son bastantes pero aun son muchas las que no la contemplan. Para solventar  este problema podemos descomprimir la extension que nos interesa, extraer el archivo de idiona english.php para la versiones de joomla 1.0.15 y para Joomla 1.5 los archivos en-GB.xxx.ini dentro de la carpeta llamada comunmente languages . Para la traducion os podra ayudar la herramienta de idiomas Google. Una vez realizada la traduccion, a la hora de guardar, cambiaremos el nombre del archivo traducido a spanish.php en el caso de joomla 1.0.15 y es-ES.xxx.ini en el caso de joomla 1.5. Antes de volver a comprimirlo todo para su instalacion desde el administrador, accederemos al archivo XML y añadiremos los archivos traducidos para que la instalacion se pueda realizar con los nuevos archivos de idioma traducidos.
Sepan que en solojoomla.com suelo incluir estos cambios en las extensiones que subo en el apartado del D.E.J.E (Directorio de Extensiones Joomla en Español) . Muchos de los cuales he traducido yo mismo para facilitaros la vida.


Paso 4: Posicionamiento Modulos

En este paso empezaremos la colocación de los modulos previamente descargados e instalados. Para posicinar los modulos dentro de un template debemos saber cuales son las posiciones de los módulos de las cuales disponemos en el template elegido. Para ello abriremos el archivo XML templateDetails.xml con un editor de texto y buscaremos las cadenas de texto con las siguientes ordenes:

Si necesitamos mas posiciones las iremos añadiendo antes de, para el caso de Joomla 1.5/2.5/3.x. Por ejemplo si queremos añadir un modulo dentro de un contenido con la etiqueta

 { loadposition nombre_de_la_posicion }

Luego, las posiciones añadidas apareceran en su administrador para poder ser seleccionadas a la hora de elegir las posiciones de cada modulo. En este caso concreto trabajamos sobre un template para Joomla 1.5, pero no difiere de joomla 2.5 o joomla 3.


Lo siguiente es averiguar la posicion de cada modulo dentro de la estructura del index de nuestro template para dos cosas, la primera es para hacernos una idea de como puede quedar el resultado final de nuestro proyecto web y la segunda, saber donde esta ubicado cada posicion de modulo. Cuando digo "posicion de modulo" me refiero a que debemos guardar una estetica y un orden a la hora de seleccionar que modulo vamos a situar en que posicion.

Para ello y solo en este caso, lo mejor es una imagen que nos muestre la situacion real de las posiciones para modulos o componentes.Si no disponemos de una imagen que nos guie, es mas complicado, aunque en muchos casos podemos abrir el index.php con un editor web que nos pueda mostrar la estructura con la posicion de los modulos. Vean un ejemplo de los dos casos:

La parte señalada como "Main Body" es la parte pinicipal donde se muestran los contenidos y componentes.

Mapa indice template

En esta segunda imagen no es tan preciso pero puede ayudar y disponiendo de una demo podemos hacernos una idea de la posicion de los modulos.

Un pequeño truco para poder visualizar todas las posiciones asignadas a la plantilla y que es muy sencillo, es añadir "index.php?tp=1" al final de nuestro dominio. Les aparecera cada posicion de forma difuminada, pero lo suficiente claro para poder saber que posiciones y donde estan colocadas dentro de nuestra plantilla, tambien llamado comunmente Template.

Por ejemplo --> http://www.tudominio.com/index.php?tp=1

Otra opcion para darnos cuenta de la diferencia que existe a la hora de utilizar una plantilla u otra respecto a las posiciones de los modulos incluidos en cada template que se nos ofrece, es simplemente probar a visualizar directamente las plantillas que tenemos incluidas en la carpeta /templates de nuestro joomla.

Desde su dominio solo deberan incluir el siguiente texto a continuacion de su dominio, mas el nombre de la carpeta de otra plantilla que tenga alojada dentro de la carpeta /templates. Codigo a añadir al dominio, mas nombre de la carpeta de la plantilla a mostrar: www.dominio.com/?template=nombre_carpeta_template .

Un ejemplo claro con una plantilla que todos tenemos en nuestra carpeta /templates cuando subimos nuestro joomla por primera vez es con el template beez3 . Ejemplo: http://www.solojoomla.com/?template=beez3 Ejemplo de esta misma pagina.



Paso 5: Seleccion del Menu de Navegacion

En este paso vamos seleccionar que tipo de Menu vamos a elegir para acceder a las distintas secciones y categorias creadas para la navegacion web. Los menus estandares son vertical y horizontal. En el caso de vertical encontraremos templates que situan los menus a la izquierda y otros a la derecha. Para situarlo a la izquierda la posicion que se utiliza es "Left" y para la derecha es "Right". Los menus pueden ser desplegables formando un abanico cuando nos situemos con nuestro raton encima de la categoria que queremos visualizar solo en el caso de disponer de subcategorias. No todos los templates disponen de esa opción, pero existen plugins y modulos que permiten realizar esa tarea.

Decir que los menus desplegable son utiles cuando utilizemos la ocpcion de un menu hortizontal por cuestion de espacio, tanto si utilizamos un template con un ancho fijo o ajustable a la pantalla. Para los menus en plantillas Responsive Web Design, se cambia de tipo de menu, según el tamaño de la ventana de nuestro navegador y o pantalla, sea móvil, pc, o smat tv.

Paso 6: Estilo de la web

Cuando hablamos del estilo de nuestra web, se hace referencia al tipo de letras y colores que se van a utilizar en los textos, menu, enlaces y en ocasiones puntuales tambien de las imagenes. y su posicionamiento. Hoy dia la tendencia a la hora de diseñar es utilizando los estilos para formar nuestro template, quiero decir con eso que las tablas ya no se utilizan.

En Joomla la inmensa mayoria de los diseñadores de templates suelen utilizar mas de dos archivos con extension css para definir el estilo, lo cual no es muy conveniente para el posicionamiento web, aunque eso es otra historia. los archivos de estilo se encuentran en la mayoria de los casos en la carpeta CSS dentro de los templates. Hoy dia la mayoria de los templates disponen de varias opciones de estilo, en el caso de Joomla!, tenemos la posibilidad de seleccionar el estilo desde el administrador accediendo a la configuracion de nuestro template.

Como novedades para Joomla 2.5 y Joomla 3.x se ha generalizado el uso de Templates Frameworks que te permiten una personalziación desde la administración de la plantilla. Ademas de la tecnica Responsive web design que te permite ver tu web en dispositivos Móviles, Pc´s, Smart tv entre otros. Tecnica que se ha usado para crear Solojoomla.ORG.


Paso 7: Buscador web

Un buscador para cualquier pagina de contenidos varios, hoy dia resulta indispensable., sea una web de una empresa, blog, portal... En un template la posicion del buscador por norma general se encuentra en una parte visible, la cual suele ser la parte superior derecha o izquierda. La posicion comun que utilizan la mayoria de los desarolladores es el "user4" .

Para que puedan apreciar con claridad los cambios que se van produciendo segun se esta trabajando, voy a pasar a utilizar como ejemplo un trabajo que estoy realizando.El dominio de este trabajo es www.pinturama.net (version antigua realizada con mambo) y el template elegido por los responsables del dominio es uno de BonusThemes , mas concretamente el template TerraHost que en un principio esta pensado para webs sobre Hostings y el cual transformaremos para su uso en la web de pinturama.net, la cual es una empresa dedicada al sector de Pintura y Decoracion. Galeria Imagenes (Estoy en ello) .

Web Demo de Bonusthemes:

Web antigua de Pinturama y primeros pasos:

Web Terminada con los cambios en posicionamiento de los modulos:

 

Algunos Modulos y Componentes

JU Ultra
Modulos Slider
Modulo HTML
Modulo Etiquetas
Articulos relacionados
Mini Frontpage
Menus

VirtueMart 3  - Tienda Online
Kunena - Foros
Community Builder - Comunidades
Artio - URL´s amigables

JoomGallery
- Galeria imagenes
Galeria Videos
JComment - Comentarios

Phoca Downloads - Descargas
Phoca Maps - Mostrar dirección en un mapa

Conclusiones

Podemos concluir que un template o plantilla, no es lo que nos va a dar la imagen que buscamos, tan solo es una parte, la cúal debe ir en concordancia con los módulos y el estilo, los cuales posicionamos dentro del template que hemos seleccionado.

Ahora bien si te atreves, hemos publicado un tutorial completo a todo detalle de como realizar tu propia plantilla desde cero --> Crear Plantillas para Joomla

 

Consultor y Desarrollador Proyectos Web
lorenzo
Author: lorenzo
Sobre mi...
Ofrezco servicios de consultoría y desarrollo para sitios web Joomla, Wordpress, Moodle, Prestashop, Opencart, Magento... entre otros.
Redacto tutoriales joomla, traduzco extensiones y publico las extensiones y plantillas joomla que me parecen interesantes, asi como desarrollos a medida de extensiones.
Otros contenidos de este Redactor

Debe registrarse para poder Comentar

Contenidos Relacionados
Templates Joomla

Frameworks Template Joomla!

La palabra Framework es un anglicanismo que se utiliza para definir un entorno de trabajo, en este caso, comentare sobre los framework templates joomla!, un entorno de trabajo para crear...

  • 12/03/2014
  • Por Lorenzo
Componentes Joomla

Componente Joomla k2

Nueva versión del componente para contenidos joomla avanzado. Despues de muchos meses de desarrollo, ya se presenta joomla k2 en su versión 2.8.0. Su facilidad de uso en la gestion de contenidos...

  • 08/23/2017
  • Por Lorenzo