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 maquetacin, esto es independientemente de cierto conocimiento de PHP con el que deberemos contar y mucho de XHTML y los estndares 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!... Segn Wikipedia La diagramacin, tambin llamada maquetacin, es un oficio del Diseo Editorial que se encarga de organizar en un espacio, contenidos escritos, visuales y en algunos casos audiovisuales, en medios impresos y electrnicos, como libros, diarios y revistas. A esto habra que agregarle pginas web. Esta diagramacin, tanto para Joomla como para cualquier tipo de web, se puede hacer siguiendo dos mtodos: tablas o divs. Como a nosotros nos interesa Joomla, para el caso les digo que con el primer mtodo todo es bastante sencillo puesto que es relativamente fcil darle formato a las tablas utilizando Dreamweaver o Frontpage, inclusive con un editor de texto comn y silvestre (mi mtodo preferido con Scite). Para esto solo hay que construir lo que sera la portada con cualquiera de estos programas o similares y luego incorporarles las llamadas a los programas PHP de Joomla, los JDOCs. El mtodo de tablas es totalmente desanconsejable, as lo dicen sus creadores, puede traer problemas para visualizar nuestra web en los muchos navegadores que existen y adems es poco flexible, aunque he visto que todava por ah andan templates Joomla con tablas. Con el segundo mtodo, el de los div (divisiones), lo que se trata de hacer es de dividir nuestra pgina 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, tipografa, tamao, etc.) utilizando CSS (Cascade Style Sheet) un lenguaje de diagramacin 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 cdigo pero vale la pena, la potencia y flexibilidad de CSS ni se compara con la parquedad de las tablas, adems las mismas tablas que creamos con HTML las podemos crear con CSS, como hace Joomla y que veremos ms adelante. Dicho esto, a manera de introduccin y sin pretender que sea el ABC de la construccin 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 divs Haciendo Plantillas para Joomla - Capitulo II No me voy a detener mucho explicando el formato de una web pero para el nefito en la materia les hago una breve introduccin y luego amplan leyendo el manual HTML que seguramente ya descargaron o buscan mayor informacin en la web. A grandes rasgos, una web no es ms que un conjunto de archivos html alojados en un servidor. Estos archivos pueden ser "generados al vuelo" como en el caso de Joomla, mediante PHP, o bien estticos si los hicimos nosotros mismos escribiendo el cdigo. A la vez, podramos decir que un formato base de un archivo html est compuesto de etiquetas y una extensin. Las etiquetas son las que estn adentro del archivo y la extensin es lo que hace que el archivo sea interpretado por el navegador por ejemplo: si el archivo tiene una extensin html o htm el navegador intentar "leer" las etiquetas que hay dentro del archivo y segn sean estas nos ir mostrando los contenidos. Si el archivo tiene la extensin PHP, el navegador "ejecutar" en el servidor el script o programa y nos "devolver" un archivo "leble" por el navegador, generalmente un html. Hay muchas extensiones y se interpretan de manera diferente utilizando MIME, XML, SGML. Los conceptos bsicos los pueden leer (estudiar) ms detalladamente en Wikipedia (http://es.wikipedia.org/wiki/Html). Una estructura tpica de un archivo html es la siguiente: <html> <head> <title>Ejemplo</title> </head> <body> <p>ejemplo</p> </body> </html> Todo el contenido del archivo est centrado dentro de las etiquetas html que a su vez involucra otras etiquetas cuyas funciones son bien definidas, todo en un orden jerrquico. Por ejemplo: la etiqueta "head" se refiere al "encabezado" de la web, la etiqueta "body" al cuerpo de la web. Dentro de estas etiquetas pueden ir muchas ms que es necesario conocer a fondo porque dentro de ellas es donde vamos a trabajar. A esta altura ya deberas tener un conocimiento ms acabado de lo que es un archivo html, de lo contrario lee un poco ms el manual que hayas descargado e interiorzate bien del tema. No es difcil, inclusive puedes hacerte "machetes" para tener a mano para consultas rpidas. Salteando mayores detalles para no hacer tan largo este "how-to", pasemos a lo que sera nuestra primer intento de diagramacin para Joomla!. El cdigo, para empezar html, sera el siguiente: <html> <head> <title>Web de Prueba</title> </head>

<body> <div id="header"> Cabecera </div> <div id="cuerpo"> Cuerpo </div> <div id="derecha"> Derecha </div> <div id="izquierda"> Izquierda </div> <div id="pie"> Pie </div> </body> Si guardamos esto en un archivo con la extensin "html" y la abrimos con un navegador veremos los textos que colocamos dentro de las etiquetas "div", es decir: "Cabecera", "Cuerpo", "Derecha", "Izquierda" y "Pie", uno debajo del otro. Por qu? La explicacin es sencilla, hemos definido que nuestra web va a tener 5 divisiones o reas pero no especificamos ni el formato ni la ubicacin ni nada y el navegador simplemente interpreta lo que es, imaginariamente es como que hubiesemos armado una "tabla" de 5 celdas contnuas, una debajo de la otra, ocupando el ancho de nuestra pantalla. Para comprobarlo abran el archivo con Dreamweaver o Frontpage y vern que los textos se muestran dentro de un cuadro con lneas punteadas. Observen adems que cada etiqueta tiene un nombre con el texto "id=" delante, por ejemplo "header". El texto "id=" se conoce como atributo de la etiqueta y los nombres (ejm. "header") se conocen como identificadores de dichos atributos. Esto lo vamos a usar para diferenciarlos y especificar el comportamiento de cada uno utilizando CSS. Por supuesto que aqu no termina el tema, existen muchsimos atributos para cada una de las etiquetas html pero para eso recurre a algn manual ya que no es el propsito de este tutorial explicar cada uno de ellos, solo nombrar o explicar los que necesitemos para nuestra plantilla Joomla! Lo que sigue es nuestro primer template.css Captulo III - Empezando el template Como dijimos en el captulo anterior dentro de las etiquetas divs podemos indicar sus atributos mediante CSS. Dentro de los muchos atributos que veremos hay uno que se destaca y que es fundamental antes de comenzar a armar la plantilla propiamente dicha: el width, traducido el ancho. En efecto, recordemos que los divs son reas o sectores y para darles sentido de ubicacin primero debemos definir su tamao. As podremos tener una web que podr ser de ancho fijo definida en pxeles (px) o una web de ancho variable definida en porcentajes(%). Tanto el primero como el segundo se refieren a la ocupacin que cada sector va a hacer de la pantalla.

Vale aclarar que existen ms unidades de medidas en CSS, por ejemplo: in: pulgadas, cm: centimetros, mm: milmetros, pt: puntos, pc: picas, em o ex: usadas para definir sangras en textos o tamaos de fuente. Para el objeto de este tutorial solamente usaremos px: pxeles y % porcentajes. Importante aclaracin Esta dualidad de formato, fijo o variable, es el dolor de cabeza de todos los diseadores, puesto que en el caso que hagamos uso de un formato fijo, supongamos de 1000px seguramente en monitores chicos con una definicin mxima de 800x600px se ver mal porque la web se saldr de la pantalla para un lado u otro y el usuario deber utilizar la barra de desplazamiento para verla completamente. En el segundo caso, este no sera el problema porque la web se adapta al tamao de la pantalla (como por ejemplo la web de solojoomla.com pero indefectiblemente se reducen nuestras posibilidades en cuanto al diseo. Hay toda una debacle casi filosfica en torno a esto pero para resumir podemos decir que monitores con una definicin de pantalla de menos de 800x600px casi no existen, lo comn es a partir de sta medida en adelante. Por ello, si vamos a hacer una web de ancho fijo arranquemos con un ancho de supongamos 700px si queremos que sea vista por el comn de los usuarios. En fin, todo depender de a qu gama de mercado apuntemos nuestra web y lo del diseo en s queda librado a la imaginacin del creador. Me pareci coherente comentar esto ltimo porque he visto que hay diseadores que suponen que todos los usuarios tienen monitores wide screen (pantalla ancha) y hacen pginas de 1200 pixeles de ancho y lo que sucede generalmente es que el navegante abandone inmediatamente el sitio por ms bonito que ste sea ya que le resulta muy incmodo visualizarlo. Los argumentos que explican estos diseadores es que ellos hacen pginas anchas porque apuntan al mercado de usuarios de poder adquisitivo alto, suponen que aquella persona que utiliza monitores wide screen tiene dinero, lo cual es falso. Volviendo al tema que nos ocupa, primero veremos cmo maquetar con tamaos fijos y luego veremos los variables. Pero antes vamos a ir dndole formato de plantilla Joomla a nuestro trabajo, crearemos la estructura rbol de un template. Hagamos una carpeta llamada mitemplate y adentro de ella crearemos 2 carpetas ms: una llamada css y la otra llamada images. Observen estos dos ltimos nombres y traten de respertarlos porque si bien no es un estandard de Joomla, es el comn en el 90% de los templates y es bueno ir familiarizndose con el entorno. En la carpeta raz, mitemplate guardaremos nuestro archivo inicial, donde definimos los divs, el que hicimos en el captulo anterior, con el nombre de index.html. La carpeta images ser nuestro repositorio de imagenes y la carpeta css nuestro repositorio de hojas de estilo.

Dentro de la carpeta css crearemos un archivo (por el momento vaco) llamado template.css y lo vamos a vincular con nuestro index.html. Para vincularlo, abrimos el archivo index.html y agregamos lo siguiente dentro de las etiquetas head: <link rel="stylesheet" type="text/css" href="/css/template.css">

Para los impacientes, les comento que lo que vamos a tratar de armar ahora es una web similar a la que se muestra en la siguiente imagen:

Captulo IV - Maquetando con tamaos fijos En la imagen anterior de nuestro proyecto podemos observar que estn definidos distintos sectores o divs, a saber:

un header o cabecera donde est la imagen con el logo de Joomla. una barra de navegacin con el men una barra lateral a la derecha dividida a su vez en tres sectores un cuerpo de contenido donde est el texto titulado Template Joomla, que a su vez tiene otro sector con una barra de navegacin inferior (Volver-InicioMapa del sitio) y un pie donde dice Mi primer template Joomla.... Dados estos sectores, modifiquemos primeramente nuestro index.html para que quede de la siguiente forma: (ver el codigo desde aqu) Vamos a ir viendo cada uno de los divs, pero expliquemos primero sus usos. Recordemos que un div empieza con el tag o etiqueta y termina con . Si observamos el cdigo vemos que primero hay un div llamado borde, este nos servir para darle un borde a toda nuestra pgina, es decir, todo lo que est dentro de las etiquetas y tendr un borde que especificaremos en nuestro archivo de estilo template.css. Siguiendo la estructura hay otro div llamado contenedor el cual contendr toda nuestra pgina. Luego, dentro de este contenedor estarn todos los dems sectores. Por qu usamos un contenedor? La respuesta es muy simple: de esta forma todo lo que est dentro del contenedor quedar como un bloque slido que podremos manejar a nuestro antojo. Principalmente para darle una alineacin, como veremos ms adelante.

Pero vayamos por partes... Tomemos como que nuestro proyecto web va a tener un ancho mximo de 700 pixeles para que pueda ser visualizado en cualquier resolucin de monitor y que adems se aprecie el fondo de la misma. Vamos a agregar imgenes a nuestra carpeta images, pondremos las siguientes: 1.- Nuestro Banner

2- Para el fondo utilizaremos este, es una imagen grande lo cual no es conveniente porque hace pesada su carga, pero vale puesto que el efecto de fondo corteza de rbol queda muy bonito, es algo ms a tener en cuenta: sacrificar el diseo por la velocidad de carga o viceversa:

3- Nuestras vietas 4- El botn buscador

5- El fondo de la barra de navegacin: Una vez que las tengamos todas guardadas en nuestra carpeta images haciendo click con el botn derecho del mouse sobre ellas y eligiendo Guardar como...- abriremos el archivo template.css que estaba vaci y le vamos a incorporar las primeras definiciones pero antes hagamos algunas aclaraciones. Las mismas etiquetas que se usan en el archivo de html se pueden utilizar, es ms se deberan utilizar, en el archivo de hojas de estilo. Tcnicamente hablando, cuando las invocamos desde el archivo CSS cambian de nombre y se las denomina selectores (haciendo una aproximacin terica sera algo como selectores del html) pero adems el lenguaje CSS agrega muchsimos selectores ms que sera largo enumerar aunque algunos iremos viendo. En todo esto radica una de las cualidades ms importantes de las CCS porque por defecto, al cargarse la web, sta tomar los atributos de las etiquetas definidas en los selectores del archivo de estilo. Genial !!! Nos da una flexibilidad mxima!!!. Captulo V - Al fin... maquetando!!!

1- El cuerpo o "body" de nuestra web Agregaremos al archivo template.css lo siguiente: 01.body { 02. 03.background : url('/master/../images/fondo.jpg') repeat; 04. 05.font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 06. 07.color : #666666; 08. 09.margin : 20px 0px 20px 0px; 10. 11.text-align: center; 12. 13.}

Explicacin: Lnea 1: identificamos en este caso el selector, o sea body Lnea 2: le indicamos cul va a ser la imagen de fondo de nuestra web y que la repita. Lnea 3: le decimos el tamao y tipo de fuente que usaremos en todo el contenido Lnea 4: le damos el color de la fuente Lnea 5: indicamos el margen de los textos en pixeles. Vern que son cuatro

nmeros con el sufijo px (unidad de medida pxeles). Estos nmeros se refieren a las medidas de margen en este orden: margen superior, margen derecho, margen inferior, margen derecho. (Tip: imaginemos siguiendo las agujas de un reloj empezando de las 12 hs.) Linea 6: esta propiedad se utiliza para centrar texto pero como en nuestro caso el texto va a estar dentro de un contenedor, lo que el navegador hace es centrar este contenedor. En la jerga a esto se lo denomina truco CSS o tip CSS. 2- El primer contenedor: borde de nuestra web Para que tengan una idea, tanto este div como el llamado contenedor seran algo as como cajas o rectngulos. Agregamos el siguiente cdigo dentro del archivo CSS: 01.#borde{ 02. 03.border: 2px solid #CCCCCC; 04. 05.text-align: left; 06. 07.width: 700px; 08. 09.margin: auto; 10. 11.} Explicacin: Linea 1: identificamos el div con su nombre Lnea 2: le decimos que va a tener un borde de 2 pixeles, que va a ser de tipo slido (en vez de solid podramos usar hidden, doted, dashed, double, ridge, inset, outset, experimenten cada uno y elijan el que ms le guste, inclusive cambindole los pixeles de ancho). Linea 3: le decimos que el texto va a estar alineado a la izquierda. Lnea 4: le decimos el ancho del contenedor o caja, que debe ser igual al ancho del banner. Lnea 5: que tome el margen automticamente segn sea lo que contenga. Es decir que estar rodeando el contenido ajustadamente. Si aqu por ejemplo le ponemos un margen de 2px vern que el borde se separa en todo el contorno en esa cantidad de pixeles. Observen que el nombre del identificador empieza con el signo de cardinal, #, esto es un smbolo inequvoco dentro de la hoja de estilo y hay que respetarlo. Adems todos los atributos de este identificador se deben escribir dentro de corchetes, ambas son cuestiones de la semntica de CSS que corresponden al estandard definido por la W3C. A su vez, el selector simplemente se menciona como es, sin ningn carcter adelante. 3- El segundo contenedor Agregaremos este cdigo a nuestro archivo CSS:

01.#contenedor{ 02. 03.text-align: left; 04. 05.width: 700px; 06. 07.background-color : #ffffff; 08. 09.margin: auto; 10. 11.border: 2px groove green; 12. 13.} Explicacin: Lnea 1: identificamos el div con su nombre Lnea 2: alineamos el texto que contenga a la izquierda Lnea 3: especificamos el ancho en pixeles, que debe ser igual o menor que el border o que el banner Lnea 4: Le damos un color de fondo, en este caso blanco Lnea 5: dejamos el margen en automtico para que el contenido tome todo el ancho del div. Lnea 6: le damos un borde especial Observen que tambin cabe la posibilidad de eliminar el div border y solamente utilizar el div contenedor lo cual es perfectamente vlido. Solo que al diferenciarlos le damos un mejor aspecto a nuestra web porque podemos cambiarles sus bordes, sus margenes y dems atributos a cada contenedor. 4- La cabecera o header El header, como su traduccin al castellano lo indica (si lo prefieren usen el trmino cabecera), se refiere a la parte superior de nuestra web. Lo ms comn es que aqu se inserte una imagen o logo que nos identifique y tambin es comn que esa imagen reciba el nombre en ingls de banner. Tambin es comn que para darle animacin a la web se agregue un archivo flash. En otros casos se incorpora un javascript para que ese banner sea rotado, vaya cambiando de imagen cada cierto intervalo de tiempo lo que le da un aspecto muy bueno. A esto ltimo se lo denomina con el trmino ingles banner rotator (rotador de imagenes). Cualesquiera de los mtodos que usemos, cada uno tiene su particularidad y su forma de incorporarlo, cada uno tiene sus bemoles, pero eso es motivo de un tutorial aparte. Para empezar usaremos el ms sencillo: una imagen esttica. Agregar el siguiente cdigo al archivo CSS: 01.#header{ 02. 03.background: url('/master/../images/banner.jpg') no-repeat; 04.

05.height : 100px; 06. 07.width: 700px; 08. 09.} Explicacin: Lnea 1: identificamos el div con su nombre Lnea 2: indicamos que header va a tener un background (fondo) y le damos la ubicacin de la imagen (carpeta y nombre del archivo) que tiene que utilizar para tal fin. Los 2 puntos seguidos son indicativos de que tiene que retroceder una carpeta y desde ah abrir la carpeta images y el archivo banner.jpg. Explico esto porque muchas veces la falta de estos 2 puntos es causa de error, de que la imagen no se vea. Con el modificador no-repeat estamos diciendo que no se debe repetir la imagen. Si obviamos esto ltimo la imagen se repetira a lo ancho de la pgina. Igualmente este no es el caso puesto que ya definimos su ancho en 700 pixeles pero si queremos ver cmo se repetira la imagen saquen el no-repeat y aumenten el width (ancho) a 1000 px, por ejemplo, y venlo en el navegador. Vern que no solo se repite el banner sino que adems nos modifica el tamao del contenedor. Lnea 3: le decimos que va a tener un alto de 100 pixeles, es decir, igual al alto de nuestro banner. Lnea 4: Le indicamos el ancho del div. 5- La barra de navegacin Agregamos el siguiente cdigo: 01.#navegador{ 02. 03.background : url('/master/../images/fondonav.gif'); 04. 05.padding : 3px 10px 5px 10px; 06. 07.border-top : 1px solid #cccccc; 08. 09.border-bottom : 1px solid #cccccc; 10. 11.} Explicacin: Lnea 1: identificamos el div con su nombre Lnea 2: le decimos cual va a ser la imagen de fondo y como no le ponemos ningn modificador ya que por defecto automticamente se repetir dentro del div. Noten que la imagen fondonav.gif es pequea, esto facilita la carga de la pgina y aprovechamos su repeticin automtica. Esta tcnica es muy utilizada. Linea 3: le damos el padding. Padding traducido al castellano significa acolchado, figurativamente le damos cual va ser el espacio, su contexto. Le decimos que estar ubicado a 3px desde el div anterior, a una distancia de 10px desde el margen derecho, a 5px del div posterior y a 10 px del margen izquierdo. Es similar al margin (arriba, derecha, abajo, izquierda). Lnea 4: le decimos que va a tener un borde superior (border-top) de 1px,

slido y aqu, al igual que en la explicacin de border podemos poner el que ms nos guste. Lnea 5: idem anterior para el borde inferior. 6- Los enlaces o links Agregaremos el siguiente cdigo: A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{ 01.color: #494E6B; 02. 03.} 04. 05.A.enlacenav:HOVER{ 06. 07.color: #3F7DE3; 08. 09.} En la primer definicin le decimos que tanto para enlaces sin visitar como visitados, activos o enfocados vamos a usar ese color. En la segunda definicin le decimos que al posicionar el mouse arriba tome el color indicado. Hover significa sobre. La gestin de links da mucho para hablar y comentar, pero lo mejor es experimentar. Prueben por ejemplo agregndole una lnea con backgroundcolor: #F0FFF0 a la segunda parte y vern efectos muy agradables, jueguen y aprendan, es la mejor forma de asimilar y dejar volar la imaginacin. Algunos utilizan aqu imgenes. TIP: por defecto los navegadores subrayan los enlaces, si queremos que esto no suceda deberemos agregar al primer cuerpo text-decoration: none. 7- El cuerpo del template Agregamos el siguiente cdigo: 01.#cuerpo{ 02. 03.width:480px; 04. 05.margin-left: 8px; 06. 07.padding: 12px 0px 10px 0px; 08. 09.background-color : #ffffff; 10. 11.float:left; 12. 13.} Explicacin: Lnea 1: identificamos el DIV con su nombre

Lnea 2: le decimos el ancho que va a tener Lnea 3: le indicamos que va a estar a 8 pixeles del borde izquierdo, esto es para que no quede pegado al borde. Lnea 4: ubicamos el contenido del cuerpo a 12 pixeles del div anterior, sin dejar espacio a la derecha ni a la izquierda, y a 10 pixeles del div siguiente. Esta distancia ltima es para separar el cuerpo del pie. Lnea 5: le damos un color de fondo, en este caso blanco. Lnea 6: le decimos que flote dentro del contenedor a la izquierda. Captulo VI - Terminando la maqueta 8- Formato a los ttulos Agregamos lo siguiente:

h1{ font-size: 12pt; } Aqu le indicamos al navegador que todos los ttulos -h1 es el selector de ttulos- van a tener un tamao de 12 puntos. 9- Barra de navegacin inferior Corresponde a la barra de navegacin dentro del cuerpo del template, agreguen lo siguiente: #navabajo{ font-weight : bold; }

En el cdigo, simplemente le decimos que va a tener el texto en negrita. 10- Barra lateral derecha El cdigo CSS de la barra lateral es el siguiente:

#lateral{ width: 200px; background-color: #EBF2FE; border-bottom : 1px solid #cccccc; border-left : 1px solid #cccccc; float:right; }

Explicacin: Lnea 1: indicamos el nombre del identificador

Lnea 2: le decimos el ancho que va a tener Lnea 3: le damos un color de fondo Lnea 4 y 5 le damos un borde inferior e izquierdo, ya que el superior ya est dado cuando definimos la barra de navegacin. Lnea 6: le decimos que flote a la derecha, es decir, se posicione siempre a la derecha. Observen que el div cuerpo tiene 480px y la barra lateral tiene 200px. Si hacemos la suma nos va a dar un total de 680px. A su vez hicimos que el div cuerpo flote a la izquierda y la barra lateral que flote a la derecha dentro del contenedor. Esto significa que entre ambos sectores va a quedar un espacio de 20px vaco. Con esto hacemos una separacin para que no se superpongan los divs y queden perfectamente separados. 11- Las clases de la barra lateral Hasta ahora hemos utilizado para codificar nuestro CSS solamente identificadores de etiquetas ID y selectores del html, ahora usaremos clases. Cual es la diferencia? Los identificadores deben ser nicos, no se pueden repetir dentro del cdigo html, no podemos tener dos divs con el mismo nombre de identificador, por ejemplo no puede haber dos divs con el nombre cuerpo. En cambio las clases se pueden repetir tantas veces como queramos, son reutilizables dentro del cdigo html, otra caracterstica ms que nos da idea de la potencia de CSS. Resumiendo:

Los selectores se los codifica usando su nombre, ejm.: body, a, h1, button, etc. Los identificadores se los codifica usando cualquier nombre pero anteponiendo el signo cardinal # y NO SE PUEDEN REPETIR DENTRO DEL HTML Las clases se codifican usando cualquier nombre pero anteponiendo un punto . y SE PUEDEN USAR MS DE UNA VEZ dentro del cdigo html. La clase (ttulo lateral) titlat viene a ser la clase que identifica los ttulos de la barra lateral y la codificamos de la siguiente forma: .titlat{ background-color:#000080; color:#ffffff; font-size:8pt; text-transform : uppercase; padding: 7px 3px 7px 8px; font-weight : normal; letter-spacing : 2px; margin: 0px 0px 8px 0px; } Explicacin: Lnea 1: Identificamos la clase con su nombre Lnea 2: le damos un color de fondo Lnea 3: le damos un color a los textos Lnea 4: le damos un tamao de letra

Lnea 5: usamos una transformacin, esto es, que por ms que en el html est en minscula CSS lo convierta a maysculas. Lnea 6: le damos un espacio, una ubicacin, como vimos en ejemplos anteriores. Estos nos permite centrar el ttulo dentro del div. Lnea 7: weight traducido significa peso, en CSS se refiere al grosor de la fuente. En este caso es normal pero podra ser bold (negrita), bolder, lighter, o dndole un porcentaje de grosor. Lnea 8: aqu le indicamos que cada letra va a estar separada de la otra en 2 pixeles. Lnea 9: le damos un margen con respecto al div como vimos en otros cdigos anteriores. Agregaremos tambin este cdigo: .cuerpolateral{ padding: 5px 4px 13px 10px; } Este cdigo nos sirve para darle ubicacin a cada uno de los divs que estn dentro de la barra lateral. Si observan el cdigo html vern que cada div a su vez est identificado de forma inequvoca pero a su vez modificado con esta clase. Imagnense toda la personalizacin que podemos hacer de cada div, por eso les repito, jueguen, modifiquen el CSS, por ejemplo prueben codificar el id registro, ms abajo vern el fbuscar. 12- Codificando el buscador Vamos a ir agregando los siguientes cdigos para darle formato al buscador, empezamos por el selector input: INPUT { font-size : 8pt; } Con esto le decimos que el texto que se ingrese en el campo tenga una fuente de 8 puntos de tamao. Continuamos agregando ste cdigo (Noten aqu que en el cdigo html el div fbuscar a su vez est modificado por la clase cuerpolateral). #fbuscar form{ margin-bottom : 0px; margin-top : 0px; } Le damos al formulario del div fbuscar un margen de 0px. Por qu? Esto lo hacemos porque de lo contrario los navegadores, por defecto, nos dejarn un espacio antes y otro despus del formulario. #campotexto{ float: left; }

Le decimos que flote los textos a la izquierda.

#campotexto input{ width:100px; }

Limitamos el ancho del campo input a 100px.

#botonbuscar { padding-top : 3px; padding-left: 106px; }

Le damos al botn buscar un entorno de ubicacin.

#botonbuscar input{ border : 0px none; }

Le decimos que el botn buscar no va a tener borde, de lo contrario, tambin por defecto aparecer un borde (segn el navegador).

.radio{ clear:both; } Esta simple clase har que las opciones de buscar estn una debajo de la otra. Esta propiedad se utiliza cuando se flotan elementos dentro de un div y lo que hace es permitir o no elementos a su lado. Puede tomar 4 valores distintos: un valor left mover el elemento debajo de cualquier elemento flotante a su izquierda; right acta en forma similar para elementos flotantes a la derecha. Otros valores son none, que es el valor inicial, y both, nuestro caso, que mueve el elemento debajo de los elementos flotantes a ambos lados. La propiedad clear es muy utilizada cuando combinamos pginas webs de ancho fijo con secciones dinmicas como veremos ms adelante. 13- Codificando Otras Secciones Agregamos los cdigos que siguen pero no les doy explicaciones as deducen por su propia cuenta el por qu de cada una de las propiedades asignadas.

#otras ul{ margin : 5px 10px 0px 0px; padding: 0px 0px 0px 4px; list-style: none; } #otras li{ padding-left: 35px; background: transparent url(../images/bullet.gif) 0 2px no-repeat; margin-bottom: 10px; }

14- El cdigo del pi de pgina Agregamos lo siguiente:

#pie{ clear : both; color : #cccccc; text-align : right; margin : 10px 10px 0px 10px; padding-bottom:10px; } Deduzcan uds. la funcin de cada lnea de cdigo. Con esto, ya podemos probar nuestra plantilla y se debera ver cmo la imagen que puse en el captulo III. Cabe decir que esta plantilla es solamente una plantilla web comn y corriente pero en los captulos siguientes la modificaremos y le daremos el formato para Joomla! que es a lo que apuntamos. Lo que podemos hacer para finalizar esta parte del tutorial es validar nuestro archivo css en la W3C, para ello vayan a su web y sbanlo. Resumiendo: con lo que vimos hasta ahora ya estas capacitado para maquetar una web en html utilizando hojas de estilo. Si quieres profundizar bajate algn manual CSS y estdialo y asmbrate de lo que puedes llegar a hacer. Si te han quedado dudas, quieres sugerir algo, o si encontraste algn error en la transcripcin, por favor, dej tus comentarios. Muchas gracias! Captulo VII Pasando nuestra plantilla a Joomla Introduccin Y a esta altura, uds. dirn... pero esto no es una plantilla Joomla!. No no lo es, por eso antes de proseguir me gustara explicarles por qu decid primero ensearles cmo se hace una plantilla web comn.En primer lugar es para que entiendan el proceso de creacin sin valerse de programas semi automatizados como Dreamweaver sino que utilizando cualquier editor de texto simple como el mismsimo Notepad.

Por qu? Porque utilizando programas visuales como Dreamweaver o Frontpage no aprenderemos jams en profundidad html o CSS que es lo que realmente sirve. He visto diseadores devanarse los sesos queriendo corregir un sector (div) con Dreamweaver en forma visual, usando el mouse, siendo que con una simple correccin a nivel cdigo se solucionaba el problema eso es lo lamentable. Conozco adems muchos supuestos diseadores que manejan muy bien el Frontpage o Dreamweaver y hacen ms o menos pginas webs decentes, pero en realidad en el fondo son diseadores mediocres porque si uno le pregunta para qu sirve tal o cual tag o etiqueta o cmo se hace para darle a un sector tal atributo, no saben ni de qu estamos hablando. En la jerga informtica a estos se le llama lammers, gente que habla de un tema sin estar capacitada lo suficiente. Por eso les digo: lo mejor siempre es trabajar a nivel cdigo y "estudiar" los manuales, usen software de desarrollo visual pero sabiendo perfectamente cmo trabaja nuestra web en profundidad. Sin duda que es ms lento tipear cdigo pero tenemos dos ventajas: primero aprenderemos a niveles insospechados el manejo de html y CSS y por otro lado tendremos la certeza de que lo que vamos escribiendo funcionar. Armar la casa desde los cimientos y no desde lo que se ve de afuera, ese es el objetivo. Por otro lado, desde que descubr Joomla! -hace un par de aos- intent, desde los comienzos, hacer una plantilla propia. Busqu en Internet algn tutorial y encontr un par que me ayudaron bastante pero al leerlos y practicar descubr que a mi me resultaba relativamente fcil puesto que tena un conocimiento previo al haber estado trabajando durante aos en el diseo de pginas web, cuestin que no era el comn de la gente. Finalmente, tambin hay gente que le gustara hacer diseo web pero no sabe ni por dnde empezar. Todos estos argumentos fueron los que me empujaron a escribir el tutorial que estoy redactando que servir tanto para el que no sabe nada, como para el que sabe algo. La idea es que le sea til a cualquiera y ms que nada al que piensa desarrollar web para Joomla, luego vern que tambin es vlido para cualquier CMS como Drupal, Spip, etc., aprendiendo sus propios mtodos. Pasemos ahora a transformar nuestra plantilla y armar un template Joomla!. Para eso vamos a necesitar algunas herramientas que detallar a continuacin. Opcin 1, la ms fcil: Joomla2Go Este software es un servidor web al vuelo, es decir se carga todo cuando lo arrancamos: un Apache liviano, MySQL, PHP y el paquete Joomla!. Es ideal

para los que se inician en este CMS. Es muy fcil de manejar y no necesita instalacin. Prubenlo y no se van a arrepentir. Lo pueden descargar desde aqu. Opcion 2, la difcil (a medias): XAMPP Este paquete hace de nuestra PC un servidor web, instalando Apache Full, MySQL y PHP. La instalacin de Joomla la debemos hace aparte, descompactando el paquete Joomla dentro de la carpeta C:xampphtdocs (sino sabe cmo, dejen un comentario y hago un tutorial aparte, pero es sencillo). Xammp tiene la ventaja que al instalar el servidor Apache completo nos permite tener servidores virtuales tocando algunos archivos de configuracin, es decir podemos tener muchos Joomla! corriendo. En mi web hay un tutorial sobre cmo armar servidores virtuales y lo pueden leer desde aquy al paquete XAMPP lo pueden descargar desde aqu. No son las nicas opciones, tambin esta EasyPHP y otros ms. De cualquier forma, para probar nuestra plantilla primero debemos tener un servidor web corriendo, sea localmente en nuestra PC, en un servidor propio o rentado, y con Joomla! Instalado. Captulo VIII La cabecera del archivo index Suponiendo que ya tienes instalado el servidor web y Joomla. Crearemos dentro de la carpeta templates una nueva llamada mitemplate y dentro de ella copiaremos el archivo index.html y las carpeta css e images... Renombramos index.html como index.php y lo abrimos con un editor de texto. Desde el comienzo con "<html>" hasta "</head>" reemplazamos con el siguiente cdigo: 01./* 02.* @copyright SoloJoomla (C) 2009 All rights reserved. 03.* @license GNU 04.*/ 05.// Acceso directo prohibido 06.defined( '_JEXEC' ) or die( 'Restricted access' ); 07.?> 08." lang="language; ?>" > 09./templates/template ;?>/css/template.css" type="text/css" /> Algunas observaciones, a saber: 1- Las etiquetas ph p estas son propias del lenguaje PHP e invocan al intrprete que esta corriendo en el servidor. 2- El cdigo defined( '_JEXEC' ) or die( 'Restricted access' ); lo que hace este cdigo es prohibir el acceso directo a nuestro archivo que ahora se llama index.php. 3- La etiqueta "< !DOCTYPE...." indica al navegador qu tipo de lenguaje html estamos usando, en este caso es XHTML 1.44- La etiqueta " 5- Dentro de la etiqueta h ead hacemos uso de la primera etiqueta Joomla!, el

primer JDOC. Estas etiquetas, "J DOC" se llaman statements, traducido: declaraciones. Las declaraciones nos sirven para decirle al framework (entorno de trabajo) de Joomla dnde debera visualizarse el mdulo o extensin y de qu tipo es. En este caso, head, le decimos que tome la cabecera de la plantilla y lo que est dentro de esta etiqueta. Por eso mismo es que se utiliza una sola vez en el archivo index.php y en esta posicin. Lo que har Joomla es tomar las indicaciones que aqu escribamos. En el caso que estamos viendo solamente le decimos que use el archivo template.css, es decir, la hoja de estilos. El cdigo PHP baseurl ;?> es para indicar la ruta dnde se encuentra el archivo. El comando baseurl cargara, por ejemplo http://www.miweb.com. El cdigo PHP template ;?> cargar el nombre del template. Si observamos y anidamos las salidas PHP, todo el cdigo: 1.<link rel="stylesheet" href="/templates//css/template.css" type="text/css" /> Quedara como: 1.http://www.miweb.com/templates/mitemplate/css/template.css" type="text/css" / Verifquenlo viendo el cdigo fuente de cualquier web hecha en Joomla. Dentro de la etiqueta 1."head" podemos adems indicar algn javascript, por ejemplo un rotador de banners o algn tipo de men animado por javascript. Igualmente, Joomla recomienda el uso de Mootools, un paquete de javascript, un conjunto de libreras que forman un autntico framework para dicho lenguaje, que por defecto se incluye en su instalacin. Con las Mootools podemos incorporar no solo javascript sino mdulos o extensiones realizadas con Ajax. Muchas extensiones que encontraremos en la web estn basadas en las Mootools. Captulo IX Modificando el cuerpo del index Modificaremos el index.php, dentro de las etiqueta de comienzo y fin del body, para que nos quede como siguiente: <!-- Comienzo del borde --> <div id="borde"> <!-- Comienzo del Contenedor --> <div id="contenedor"> <!-- Comienzo de la cabecera --> <div id="header"> <!-- Aqu no ponemos texto puesto que usamos una imagen --> </div> <!-- Fin de la cabecera --> <!-- Comiendo de la barra de navegacin o men --> <div id="navegador"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div> <!-- Fin de la barra de navegacin -->

<!-- Comienzo del cuerpo --> <div id="cuerpo"> <jdoc:include type="component" /> </div> <!-- Fin del cuerpo --> <!-- Comienzo de la barra lateral --> <div id="lateral"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> <!-- Fin de la barra lateral --> <!-- Comiendo del pie de pgina --> <div id="pie"> <a href="http://www.solojoomla.com">Tutorial para SoloJoomla</a> by <a href="http://www.moatsoft.com.ar">MoatSoft </a> </div> <!-- Fin del pie de pgina --> </div> <!-- Fin del contenedor --> </div> <!-- Fin del borde --> Las declaraciones ms importantes de Jooma son las siguientes: < jdoc:include type="head"> Como dijimos se coloca una sola vez y dentro de las etiquetas head < jdoc:include type="component"> Esta declaracin es la llamada a los contenidos propiamente dichos que estn en la base de datos. Se utiliza una sola vez dentro del cuerpo o body de nuestro index. < jdoc:include type="message"> Esta declaracin se utiliza para mostrar errores de peticin a la base de datos. Solo se puede ubicar en un solo lugar del template que querramos y una sola vez. En el caso de nuestro template, no est contemplada su ubicacin por lo que aparecera en un archivo index.html generado al vuelo. < jdoc:include type="module" name="breadcrumbs"> Esta declaracin del mdulo breadcrumbs es la que nos brinda la posicin dentro de la web donde estamos actualmente. En el caso de nuestra web no lo contemplamos pero se la vamos a incorporar puesto que es muy sencillo.

Agreguemos un div ms ubicado entre el div borde y el div contenedor, es decir, que la primera parte del cdigo quede as: <div id="borde"> <!-- Comienzo del Contenedor --> <div id="bread"> <jdoc:include type="module" name="breadcrumbs" />

</div> <div id="contenedor"> <!-- Comienzo de la cabecera --> .......................................... Abramos el archivo template.css y busquemos y modifiquemos el id borde para que quede de la siguiente forma: #borde{ border: 2px solid #CCCCCC; text-align: left; width: 708px; margin: auto; background: #E0FFFF } Lo que hicimos aqu fue agrandarlo en 8px y darle un fondo. Volviendo a las declaraciones de Joomla, vamos a nombrar otras ms, que tambin son muy comunes y que podemos ver en casi todas las plantillas:

< jdoc:include type="modules" name="left" style=""> < jdoc:include type="modules" name="right" style=""> < jdoc:include type="modules" name="top" style=""> < jdoc:include type="modules" name="user1" style=""> < jdoc:include type="modules" name="user2" style=""> < jdoc:include type="modules" name="user3"> < jdoc:include type="modules" name="user4">

Si observan detenidamente todas se refieren a una posicin dentro de la plantilla, pero a su vez cada una contendr luego el contenido de un mdulo especfico que elegiremos desde el back-end, administracin, de Joomla. Tambin observen que se declara indicando el tipo (type), el nombre (name) y al final el estilo (style). Esto ltimo se refiere al estilo definido en el mdulo Chrome. El mdulo Chrome, incorporado en el framework de Joomla, nos brinda algunas salidas de formato html como por ejemplo el redondeado. Si quieren saber ms lean aqu http://docs.joomla.org/What_is_module_chrome%3F Si quieren aprender ms sobre los JDOC de Joomla(MUY RECOMENDABLE!!!), lean aqu http://docs.joomla.org/Jdoc_statements Para finalizar este captulo, podramos decir que casi estamos en condiciones de probar nuestro primer template pero antes debemos crear un archivo ms. Captulo X El archivo templateDetails.xml Este archivo es el instalador de la plantilla. Joomla lo utiliza adems para saber las posiciones de la misma. Sin este archivo no podremos instalarla.

Adems el CMS lo utiliza para mostrar el template en el Gestor de Plantillas del back-end o administracin, motivo por el cual es obligacin hacerlo. Copien el siguiente cdigo dentro de un archivo de texto y gurdenlo con el nombre templateDetails.xml (ojo!!! la D de details debe ser en maysculas). 01.<!--?xml version="1.0" encoding="utf-8"?--> 02.Mi template 03.2009/04/11 04.Miguel Tuyar 05.info@moatsoft.com.ar Esta direccin electrnica esta protegida contra spam bots. Necesita activar JavaScript para visualizarla 06.http://www.moatsoft.com.ar 07. copyright 2009 08.GNU1.0.0 09.Mi primer template para Joomla! 10.index.php 11.css/template.css 12.images/banner.jpg 13.images/fondo.jpg 14.images/bullet.gif 15.images/fondonav.gif 16.right 17.top 18.user3

No se necesitan mayores explicaciones puesto que intuitivamente pueden darse cuenta que indica el autor de la plantilla y sus datos, tambin los archivos que componen y las posiciones. Tambin se utiliza para determinar parmetros en el caso de plantillas ms complejas como por ejemplo sucede con el template ja_purity que se instala por defecto con Joomla. Adems del archivo templateDetails.xml tambin se estila incorporar una imagen de 206x150px de tamao que es una muestra o miniatura del aspecto de la plantilla instalada. Esta miniatura se ve cuando pasamos con el mouse por encima del nombre en el Gestor de plantillas del back-end o administrador de Joomla. Como ya terminamos esta primer plantilla, vamos a probarla pero primero verifiquemos lo siguiente: 1- Que dentro de la carpeta templates de la instalacin de Joomla est la carpeta mitemplate 2- Que dentro de esta carpeta est el archivo index.php, el archivo templateDetails.xml y las carpetas css e images. 3- Que dentro de la carpeta css est el archivo template.css 4- Que dentro de la carpeta images estn los archivos: banner.jpg, fondo.jpg, y fondonav.gif. Las dems no las necesitamos. Si todo est correcto, vayamos al administrador de Joomla a Extensiones ? Gestor de plantillas. Ahi veremos la nuestra titulada mitemplate.

Seleccionenla y luego presionen el botn Predeterminado de la esquina superior derecha. Si quieren pueden hacer una Previsualizacin pero les aclaro que primero debemos acondicionar los mdulos segn los sectores que definimos. Para que todo se vea bien, vayan a Extensiones > Gestor de Mdulos. Debajo de la pgina van a ver un men descolgable que se titula Mostrar nm. y seleccionen todo. Luego vayan ms arriba, al lado del ttulo Nm y marquen la casilla de verificacin para que se seleccionen todos los mdulos y presionen el botn Deshabilitar. Finalmente habiliten como sigue haciendo click sobre el nombre del mdulo: Mdulos Men principal: fjense que hay dos, si es el que indica como nombre topmenu denle la posicin user3 y adems busquen debajo dentro de Otros parmetros -> Espaciador y pnganl el signo de mayor >. Si en cambio, el nombre es mainmenu denle la posicin right. Mdulo Buscar: denle la posicin right. Mdulo Acceder: idem anterior Ahora si, presionen Previsualizar y ya pueden ver cmo qued nuestra plantilla que deber parecerse a esta:

Captulo XI - Usando los estilos propios de Joomla! Lo que vamos a hacer ahora es darle un poco ms de estilo a nuestra plantilla utilizando las clases e identificadores propios de Joomla! Eso significa que trabajaremos de ahora en ms, solamente sobre nuestro archivo template.css... Para nuestro primer proyecto hemos utilizado CSS con identificadores propios pero Joomla! tiene los suyos predeterminados de forma inequvoca y que sirven para darle estilo a cada una de sus partes. La lista de estilos es muy

extensa as que solamente veremos los ms importantes y al final pondr una lista de todos los que incorpora la versin 1.5 de este genial CMS. (nota del autor: la lista ya publicada en otro post) Primeramente pongamos un comentario dentro del archivo CSS para separar lo que son nuestros estilos de los que son de Joomla!.

Vayamos al final del archivo y pongamos algo como esto: /* Estilos de Joomla! */ (es un simple comentario en CSS) Debajo vamos a ir agregando las propiedades de las clases propias de Joomla explicaciones de la clase y ejemplos. Dejo para que Uds. ejerciten e investiguen cada una de las propiedades del cdigo CSS y se diviertan jugando con las clases, dndole colores, bordes, formatos, etc. Nombre de la Clase Corresponde a: Formateo del ttulo de la pgina principal. En una instalacin recin hecha corresponde al primer ttulo Welcome to Frontpage. .componentheading Ejemplo de maquetacin CSS .componentheading { background: #000080; text-transform: uppercase; color: #FFFFFF; padding: 2px 2px 2px 2px; border-bottom: 1px dotted #000080; font-weight: bold; } Nombre de la Clase Corresponde a: Formateo del ttulo del artculo. .contentheading Ejemplo de maquetacin CSS .contentheading { font-weight: bold; background: url('/../images/fondonav.gif'); } Nota: Observen que en este cdigo utilizamos el mismo fondo que el men superior pero pueden usar otro.

Nombre de la Clase Corresponde a: La clase .small corresponde al autor del artculo y la clase .createdate a la fecha y hora de creacin del mismo.

.small y .createdate Ejemplo de maquetacin CSS .small, .createdate { font-size: smaller; color: #000000; }

Nota: Aqu le damos propiedades a las dos clases juntas (se separa con una coma) Nombre de la Clase Corresponde a: Es la clase para formatear los botones PDFImprimir-Email que se agregan en cada artculo de Joomla. Nombre de la Clase Corresponde a: Leer ms, es el formateo del texto del pie del artculo cuando usamos este corte. Les aconsejo lo utilicen con frecuencia para darle ms profesionalidad al sitio. .readon { text-decoration: none; color: #000099; font-weight: bold; } .buttonheading Ejemplo de maquetacin CSS .buttonheading a{ color: white; }

.readon Ejemplo de maquetacin CSS

a.readon:hover{ background: #99CCFF; font-style: italic; text-decoration: underline; } Nota: Noten que aqu tambin le asignamos propiedades alenlace (a) de Leer ms y a la subclase hover, para darle un efecto especial. .article_separator

Nombre de la Clase

Corresponde a: Esta clase corresponde al separador de artculos. Segn configuremos sus propiedades podemos utilizarla para dividir nuestros artculos. No es la nica forma, pero es una de las ms usadas.

Ejemplo de maquetacin CSS .article_separator{ display:block; background:#474747; height:1px; margin:10px 60px 10px 10px; }

Nombre de la Clase Corresponde a:

.contentpaneopen Ejemplo de maquetacin CSS .contentpaneopen { font-family: Georgia, Verdana; }

Es el cuerpo mismo de los artculos.

Codificacin de mdulos y mens: Esta es una de las partes ms complicadas y largas de codificar, dependiendo del tipo de men que queramos hacer. A continuacin vern ejemplos de cdigo CSS tanto para el Men Principal como para el Men Superior con comentarios includos dentro del mismo. Nombre de la Clase Corresponde a: Corresponde a los mdulos que aparecern en nuestra plantilla. .moduletable Ejemplo de maquetacin CSS /* Alineamos el texto a la izquierda y le damos un margen superior para separarlo del div anterior */ #lateral .moduletable_menu{ text-align:left; Observen que en el ejemplo que vemos utilizamos el sufijo _menu porque es lo que vamos a configurar . Esto supone que Uds. debern primeramente acceder al back-end de Joomla, ir al men correspondiente (en este caso el Main Menu posicionado a la derecha right), abrirlo haciendo margin-bottom:15px; }

/* Definimos que tanto el men como cualquier texto que se encuentre en el mdulo se alnee a la izquierda y tambin le damos un margen */ #lateral .moduletable_menu, #lateral .moduletable{ text-align:left; margin-bottom:15px;

un click sobre el nombre y } agregando en Parmetros Avanzados -> Sufijo de la clase del mdulo el /* Aqu ya estamos dndole propiedades a la lista texto _menu (sin del men */ comillas). #lateral .moduletable_menu li{ Como otra observacin, vean que adems le agregamos adelante de la clase el nombre del identificador del div correspondiente a su ubicacin dentro del index.php. margin:3px 0 0; padding:0; list-style-image:none; list-style-type:none; }

/* Enlaces del men */ #lateral .moduletable_menu a{ text-decoration: none; }

/* Configuramos la subclase de la lista */ #lateral .moduletable_menu li:hover{ text-decoration: underline; }

/* Le decimos que nos muestre el carcter al comienzo de tem de la lista a 1 espacio de distancia (leer explicacin al pie) */ #lateral .moduletable_menu li:before{ content: "\00BB \0020"; }

/* Formateamos tanto el ttulos del men como de los mdules que all pongamos */ .moduletable_menu h3, .moduletable h3, .moduletable_text h3{ margin:5px 0 0; text-align:center;

background: url('/../images/fondonav.gif'); padding:0; text-transform:uppercase; } content: "\00BB \0020: Esta lnea es una codificacin especial de CSS y corresponde a una pseudo clase llamada :before. La propiedad content de esta seudo clase se puede utilizar convirtiendo caracteres a HTML o bien imgenes con el sistema PHP base64. En este caso estamos usando lo primero y lo que hacemos es asignar (before) antes a cada uno de los tems de la lista (li) del men, el carcter . Y por qu no ponemos directamente el carcter? Porque en Joomla trabajamos con UTF-8 y de poner el carcter como es veramos un signo de pregunta, por eso tenemos que convertirlo a lenguaje HTML, para que cualquier navegador lo interprete en HTML. La codificacin se lee as: - \ es la entrada de carcter codificado - 00BB : Esto se lee: decimal 00 (o sea nada), hexadecimal BB que es el carcter en la codificacin HTML. - 0020 : Esto se lee: decimal 00 (o sea nada) hexadecimal 20 que equivale a un espacio en la codificacin HTML. Esta tcnica es muy til cuando queremos personalizar al mximo nuestras listas asignando caracteres especiales. Hay una lista completa de los mismos y su equivalente en HTML en esta direccin: http://ascii.cl/es/codigos-html.htm Nombre de la Clase Corresponde a: Observen que en el ejemplo que vemos le agregamos el sufijo -nav. Como en el men anterior, supone que Uds. debern primeramente acceder al back-end de Joomla, ir al men correspondiente (en este caso el Main Menu posicionado en USER3), abrirlo haciendo un click sobre el nombre y agregando en Parmetros Avanzados -> Sufijo de la clase del mdulo el texto -nav (sin comillas). .moduletable (para el men superior ubicado en la posicin USER3) Ejemplo de maquetacin CSS #navegador .moduletable-nav{ text-align:center; }

#navegador .moduletable-nav li{ padding:0; list-style-image:none; list-style-type:none; }

#navegador .moduletable-nav a{ text-decoration: none;

#navegador .moduletable-nav a:hover{ text-decoration: underline; text-transform: uppercase; color: #3300CC; }

Existen muchsimas clases ms de Joomla al final de este captulo vern un listado completo sacado de Joomlacode, sitio de los creadores de Joomla. Como complemento a esta unidad podra ver algunas cuestiones ms respecto al tratamiento CSS de Joomla en esta direccin: http://docs.joomla.org/Tutorial:Using_Class_Suffixes_in_Joomla!_1.5 Si quieren profundizar ms y entienden el ingls, visiten el sitio de Joomla code developer en http://developer.joomla.org Captulo XII - Maquetando con tamaos variables Ya vimos como hacer una plantilla para Joomla desde cero hasta darle una personalizacin casi completa, por lo menos podemos llegar a eso si nos adentramos en profundidad en todos los estilos de Joomla (pufff son demasiados no? :-) Ahora vamos a ver cmo hacer que esa plantilla se adapte al monitor que la muestra, es decir que se autoajuste a la resolucin del monitor del navegante. En primer lugar tenemos que decidir si queremos que toda nuestra plantilla sea autoajuste o solamente alguna/s parte/s. En el caso que vamos a ver como ejemplo, usaremos como seccin fija solamente la lateral derecha, es decir, donde est el Men Principal, el buscador y el formulario de login. La cabecera o header, la barra de navegacin superior y el pie o footer tendrn fijadas sus alturas pero no sus anchos. Y el cuerpo ser flexible o ajustable 100%. El ejemplo que veremos fue testeado y funciona correctamente sin necesidad de hacks en los siguiente navegadores: - Internet Explorer v7 - Opera v9.5 - Safari v4 - Firefox v3.08 Hagamos primero una copia de la plantilla ya hecha y renombremos la carpeta que est dentro de templates como autoplantilla. Dentro del archivo templateDetails.xml cambiemos la etiqueta name y pongamos la siguiente: Auto Plantilla porque de lo contrario no podremos

asignarla desde el back-en de Joomla, no se permiten nombre repetidos de plantillas, cuestin ms que obvia. Ahora bien, el cambio que vamos a realizar no solamente involucra el archivo CSS sino que tambin debemos modificar el index.php, empecemos por el segundo: Abrimos el archivo y nos deber quedar de esta forma: 01.<?php 02./* 03.* @copyright SoloJoomla (C) 2009 All rights reserved. 04.* @license GNU 05.*/ 06.// Acceso directo prohibido 07.defined( '_JEXEC' ) or die( 'Restricted access' ); 08.?> 09.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 10.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this>language; ?>" lang="<?php echo $this->language; ?>" > 11.<head> 12.<jdoc:include type="head" /> 13.<link rel="stylesheet" href="/<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" /> 14.</head> 15.<!-- Comienzo del borde --> 16.<div id="borde"> 17.<!-- Comienzo del breadcrumb --> 18.<div id="bread"> 19.<jdoc:include type="module" name="breadcrumbs" /> 20.</div> 21.<!-- Comienzo de la cabecera --> 22.<div id="header"> 23.<!-- Aqu no ponemos texto puesto que usamos una imagen --> </div> 24.<!-- Fin de la cabecera --> 25.<!-- Comiendo de la barra de navegacin o men --> 26.<div id="navegador"> 27.<jdoc:include type="modules" name="user3" style="xhtml" /> 28.</div> 29.<!-- Fin de la barra de navegacin --> 30.<!- Comienzo contenedor del cuerpo --> 31.<div id="contenedor"> 32.<!-- Comienzo del cuerpo --> 33.<div id="cuerpo"> 34.<div class="espacio"> 35.<jdoc:include type="component" /> 36.</div> 37.</div> 38.<!-- Fin del cuerpo --> 39.</div> 40.<!-- Fin del contenedor --> 41.<!-- Comienzo de la barra lateral -->

42.<div id="lateral"> 43.<div class="espacio"> 44.<jdoc:include type="modules" name="right" style="xhtml" /> </div> 45.</div> 46.<!-- Fin de la barra lateral --> 47.<!-- Comiendo del pie de pgina --> 48.<div id="pie"><br /> 49.<a href="http://www.solojoomla.com">Tutorial para SoloJoomla</a> by <a href="http://www.moatsoft.com.ar">MoatSoft </a><br /> 50.</div> 51.<!-- Fin del pie de pgina --> 52.</div> 53.<!-- Fin del borde --> 54.</body> 55.</html> Si observan con cuidado vern que hemos cambiado de lugar el div contenedor y ahora solamente est involucrando al div cuerpo. Cul es la razn? La respuesta es muy sencilla pero vayamos paso a paso. En el primer bosquejo que hicimos, en uno de los primeros captulos cuando no le dabamos atributos a los divs, recordarn que estos se alineaban uno debajo del otro ocupando el ancho de la pantalla porque es como lo interpretan los navegadores. Pues bien, aqu justamente aprovechamos eso. En el cdigo pueden ver que solo hay un gran contenedor que pas a ser el borde, que antes usabamos para darle un borde a toda la pgina. Luego hay otro ms abajo que ahora solo abarca el div cuerpo y antes abarcaba a los otros. La explicacin es esta: con el primer contenedor borde ponemos todos los otros divs dentro para que formen un bloque pero, como veremos, en el cdigo CSS NO LE ASIGNAMOS PROPIEDADES, es decir solo lo usamos para que los abarque. El segundo div, el contenedor que tiene en su interior el otro div cuerpo nos servir para decirle que ocupe el todo el ancho de la pantalla por con un truco CSS le quitaremos una parte. Vayamos al archivo template.css y aqu solo retocaremos los cdigos que personales, los propios de Joomla! los dejamos como estn. Para que puedan apreciar los cambios pondr como era el antes y el despus de cada identificador o selector y una breve explicacin. EL SELECTOR body Cdigo Ajustable 1.body { 2.font : 8pt Verdana, Geneva, 3.padding: 0px; 4.margin: 0px; 5.text-align: left;

Arial, Helvetica, sans-serif;

6.} Cdigo Anterior 1.body{ 2.background : url(../images/fondo.jpg) repeat; 3.font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 4.color : #666666; 5.margin : 20px 0px 20px 0px; 6.text-align: center; 7.} Como primera medida hemos eliminado el fondo. Por qu? Porque ahora nuestro template abarca toda la pantalla y ya no se apreciar. Podramos usar un color si quisisemos pero para esto deberamos quitarle al div contenedor el fondo, para que quede transparente. Tambin le hemos quitado los margenes y el padding para que llene la pantalla y le hemos puesto que el texto se alinee a la izquierda. La alineacin de texto nos va a permitir poner hacia la izquierda el ttulo del web site que est en el back-end de Joomla!. IDENTIFICADOR #header Cdigo Ajustable 1.#header{ 2.background: #778AFF url(../images/banner.jpg) right no-repeat; 3.height : 100px; 4.} Cdigo Anterior 1.#header{ 2.background: url(../images/banner.jpg); 3.height : 100px; 4.width: 700px; 5.} Aqu lo que hacemos es asignarle una posicin al banner y como la pantalla ser ms ancha que el mismo, le decimos que no se repita: right no-repeat. Lo que eliminamos con respecto al cdigo anterior es el ancho. IDENTIFICADOR #contenedor Cdigo Ajustable 1.#contenedor { 2.float: left; 3.width: 100%; 4.background-color : #ffffff; 5.} Cdigo Anterior 1.#contenedor{ 2.text-align: left; 3.width: 700px;

4.background-color : #ffffff; 5.margin: auto; 6.border: 2px groove green; 7.} Lo que hacemos aqu es asignarle el 100% de la pantalla y que flote a la izquierda. Dentro del div contenedor tendremos solamente el cuerpo pero ya veremos cmo trucamos todo. IDENTIFICADOR #pie Cdigo Ajustable 1.#pie{ 2.clear: left; 3.width: 100%; 4.border: 1px dotted #CCCCCC; 5.text-align: center; 6.padding : 3px 10px 5px 10px; 7.background: url(../images/fondonav.gif); 8.} Cdigo Anterior 1.#pie{ 2.clear : both; 3.color : #cccccc; 4.text-align : right; 5.margin : 10px 10px 0px 10px; 6.padding-bottom:10px; 7.} En el caso de pie, lo primero que hacemos es limpiar o liberar hacia la izquierda, esto es pora que no se ponga debajo de #lateral. Luego le indicamos el ancho que ser del 100%, le damos un borde, una alineacin al texto que contenga y un fondo usando la misma imagen de fondo de la barra de navegacin superior para respetar el estilo. El cdigo CSS de template.css que corresponde a nuestra plantilla (la parte de Joomla queda como est) deber ser similar a esta: 01.body { 02.font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 03.padding: 0px; 04.margin: 0px; 05.text-align: left; 06.} 07. 08.#contenedor { 09.float: left; 10.width: 100%; 11.background-color : #ffffff; 12.} 13. 14.#header{

15.background: #778AFF url(../images/banner.jpg) right no-repeat; 16.height : 100px; 17.} 18. 19.#navegador{ 20.background : url(../images/fondonav.gif); 21.padding : 3px 10px 5px 10px; 22.border-top : 2px groove #cccccc; 23.border-bottom : 2px solid #cccccc; 24.} 25. 26.A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS, A.enlacenav:LINK{ 27.color: #494E6B; 28.text-decoration: none; 29.} 30. 31.A.enlacenav:HOVER{ 32.color: #3F7DE3; 33.background-color: #F0FFF0; 34.} 35. 36.#cuerpo{ 37.margin-right: 200px; 38.} 39. 40.H1{ 41.font-size: 12pt; 42.} 43. 44.#lateral{ 45.float: left; 46.width: 200px; 47.margin-left: -200px; 48.background-color: #EBF2FE; 49.} 50. 51.#pie{ 52.clear: left; 53.width: 100%; 54.border: 1px dotted #CCCCCC; 55.text-align: center; 56.padding : 3px 10px 5px 10px; 57.background: url(../images/fondonav.gif); 58.} 59. 60..espacio { 61.margin: 10px; 62.margin-top: 0; 63.}

Para finalizar con el template autoajustable le comento que hay definida una clase ms dentro del archivo CSS: .espacio, este lo utilizamos para darle un margen dentro de cada div y separar el contenido de los bordes. Con esto, finalizo el manual. Les pido, por favor, que me enven comentarios sean buenos o malos, sugerencias y correcciones si ven errores. En la portada le puse v1, primera versin y con lo que Uds. me informen o pidan por email lo ir ampliando o mejorando.