Haciendo Plantillas para Joomla – Capitulo 2
No me voy a detener mucho explicando el formato de una web pero para el neófito en la materia les hago una breve introducción para Armando los divs o CSS Div y luego amplían leyendo el manual HTML que seguramente ya descargaron o buscan mayor información en la web.
A grandes rasgos, una web no es más 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 estáticos si los hicimos nosotros mismos escribiendo el código…
Armando los divs ¿Cómo funciona?
Una estructura típica de un archivo html es la siguiente:
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo</p>
</body>
</html>
Estructura CSS Divs
Salteando mayores detalles para no hacer tan largo este “how-to”, pasemos a lo que sería nuestra primer intento de diagramación para Joomla!. El código, para empezar html, sería 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 extensión “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 explicación es sencilla, hemos definido que nuestra web va a tener 5 divisiones o áreas pero no especificamos ni el formato ni la ubicación ni nada y el navegador simplemente interpreta lo que es, imaginariamente es como que hubiesemos armado una “tabla” de 5 celdas contínuas, una debajo de la otra, ocupando el ancho de nuestra pantalla.
Para comprobarlo abran el archivo con Dreamweaver o Frontpage y verán que los textos se muestran dentro de un cuadro con líneas punteadas.
Observen además 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 muchísimos atributos para cada una de las etiquetas html pero para eso recurre a algún manual ya que no es el propósito 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
Capitulo 3 – Empezando el Template
final
Me gusta el estilo de paso a paso y que cada quien investigue por aparte.
Te falto el al final !