Lunes, 27 Febrero 2017

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 neófito en la materia les hago una breve introducción 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.

A la vez, podríamos decir que un formato base de un archivo html está compuesto de etiquetas y una extensión. Las etiquetas son las que están adentro del archivo y la extensión es lo que hace que el archivo sea interpretado por el navegador por ejemplo: si el archivo tiene una extensión html o htm el navegador intentará "leer" las etiquetas que hay dentro del archivo y según sean estas nos irá mostrando los contenidos. Si el archivo tiene la extensión PHP, el navegador "ejecutará" en el servidor el script o programa y nos "devolverá" un archivo "leíble" por el navegador, generalmente un html. Hay muchas extensiones y se interpretan de manera diferente utilizando MIME, XML, SGML. Los conceptos básicos los pueden leer (estudiar) más detalladamente en Wikipedia (http://es.wikipedia.org/wiki/Html).
Una estructura típica 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 jerárquico. 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 más que es necesario conocer a fondo porque dentro de ellas es donde vamos a trabajar.
A esta altura ya deberías tener un conocimiento más acabado de lo que es un archivo html, de lo contrario lee un poco más el manual que hayas descargado e interiorízate bien del tema. No es difícil, inclusive puedes hacerte "machetes" para tener a mano para consultas rápidas.
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 III - Empezando el Template

Consultor y Desarrollador Proyectos Web
Author: tuxmerlin
Sobre mi...
Orientar personas es despertar vida
Otros contenidos de este Redactor

Debe registrarse para poder Comentar

Solojoomla, un lugar donde encontrar ayuda para realizar tus proyectos en la red. Con Foro de ayuda gratuita y formularios para contratación de servicios ....

Videos Turtoriales de ayuda Joomla, WordPress, Less, Css...

Portafolio webs Joomla, Wordpress, HTML5..