Realizar Plantillas para Joomla

Hoy día, la mayoría de desarrolladores que se dedican a realizar plantillas para joomla o crear una plantilla joomla utilizan los llamados Frameworks Templates, que facilitan enormemente el trabajo, pudiendo crear una plantilla determinada y definida para cualquier tipo de página web joomla, wordpress y demas CMS, en un tiempo mucho menor si lo comparamos con la programación y maquetación pura y dura, siendo este último el caso que nos ocupa en este tutorial y obviamente, esto no es un tutorial para todos, ya que se necesita de un minimo de conocimientos en programación web.

Por último señalar que hoy día, tu plantilla debe ser creada con las técnicas Responsive Web Design, que ajusta el diseño según desde que dispositivo la estamos visualziando. También se puede utilizar AMP (Accelerated Mobile Pages) creada y mantenida por GOOGLE para crear un diseño diferente para que se muestre correctamente en dispositivos móviles y aumentar la velocidad de nuestra web a la hora de abrirse en el navegador.

Captura Ejemplo

Una de las cuestiones que tenemos que tener en cuenta si queremos realizar plantillas para Joomla es la “maquetación”, esto es independientemente de cierto conocimiento de PHP con el que deberemos contar y mucho de XHTML y los estándares fijados por la W3C. No hay que ser un sabio en la materias mencionadas pero al menos contar con un buen manual a mano para consultas. Hay mucho material al respecto de HTML y PHP en la web así que a descargar…

Definición

Según Wikipedia “La diagramación, también llamada maquetación, es un oficio del Diseño Editorial que se encarga de organizar en un espacio, contenidos escritos, visuales y en algunos casos audiovisuales, en medios impresos y electrónicos, como libros, diarios y revistas.” A esto habría que agregarle páginas web.

Método de estilos a usar para crear una plantilla joomla

Esta diagramación, tanto para realizar plantillas para Joomla como para cualquier tipo de web, se puede hacer siguiendo dos métodos: Tablas o Divs. Como a nosotros nos interesa Joomla, para el caso les digo que con el primer método todo es bastante sencillo puesto que es relativamente fácil darle formato a las tablas utilizando Dreamweaver o Frontpage, inclusive con un editor de texto común y silvestre (mi método preferido con Scite). Para esto solo hay que construir lo que sería la portada con cualquiera de estos programas o similares y luego incorporarles las “llamadas” a los programas PHP de Joomla, los llamados “JDOCs”.

Tablas

El método de tablas es totalmente desanconsejable, así lo dicen sus creadores, ya que puede traer problemas para visualizar nuestra web en los muchos navegadores que existen y además es poco flexible, aunque he visto que todavía por ahí andan templates Joomla con tablas, ademas de ser defenestradas por los buscadores como Google.

Divs

Con el segundo método, el de los “div” (“divisiones”), lo que se trata de hacer es de dividir nuestra página en sectores independientes.
Estos sectores pueden estar uno al lado del otro sin superponerse o bien uno encima de otro utilizando divisiones en capas. Esto nos da muchas ventajas como por ejemplo el poder darle el formato que queramos a cada uno (fondo, tipografía, tamaño, etc.) utilizando CSS (Cascade Style Sheet) un lenguaje de diagramación web de extrema potencia y para el caso de la vista desde móviles LESS, un lenguaje de programación dinámico de estilos avanzado.

Con este lenguaje independizamos totalmente el “aspecto” o “formato” de nuestra web de los contenidos que la misma va a contener. Como contrapartida tendremos problemas en algunos navegadores pero todos solucionables mediante el denominado Hacking CSS.  Hay que “tipear” mucho código pero vale la pena, la potencia y flexibilidad de CSS ni se compara con la parquedad de las tablas, además las mismas tablas que creamos con HTML las podemos crear con CSS, como hace Joomla y que veremos más adelante.

Una manera sencilla de transformar tablas a divisones, lo conseguimos de forma rápida desde la web DivTable, desde el convertidor online.

Dicho esto, a manera de introducción y sin pretender que sea el ABC de la construcción web, voy a explicarles paso a paso como “maquetar” una web para Joomla utilizando “divs” y CSS, tanto de estructura fija (en pixeles) o variable (en porcentajes).

Capitulo II – Armando los DIV´s

Capitulo III – Empezando el Template

Capítulo IV – Maquetando con tamaños fijos

Capítulo V – Al fin… maquetando!!!

Capitulo VI – Terminando la maqueta

Capitulo VII – Pasando nuestra plantilla a Joomla – Introduccion