Capitulo I V.1: Maquetando en CSS para Joomla!

Una de las cuestiones que tenemos que arribar si quereremos hacer 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!...

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.

Esta diagramación, tanto 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 “JDOCs”. El método de tablas es totalmente desanconsejable, así lo dicen sus creadores, 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.

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. 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.

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

Redactado por :

tuxmerlin