mancormedia.com

Cuando el armado de sitios web era absolutamente propiedad de las tablas, imagenes y estilos incrustados en el código HTML, sufrí mucho. Eran los días en que no comprendí porque existía esa cosa llamada Front-End. Desafortunadamente para mis momentos de ocio, este tema merecía ser estudiado y comprendido para no depender de otra persona en caso que me soliciten realizar tal honerosa tarea. Armar un diseño.

En este post vamos a mostrar un Layout simple que puede tener muchos usos, dependiendo sea el caso de la aplicación. Solo estamos usando un archivo HTML y una hoja de estilos CSS. La manera como vamos a combinar estas 2 tecnologías es simple. Tuve la oportunidad de trabajar para, segun yo, una de las mejores empresas interactivas del país y porque no decirlo, de la región. Cuando comencé me di cuenta que de lo poco que sabía había aun mas poco que servía es por eso que mi primera recomendación es:

• Prejuicios afuera

Esto esta destinado a quienes no tengan muchos conocimientos o conocimientos básicos del tema. Si eres un superincreibleprogramadordelinfierno, probablemente te aburras y maldigas este blog. Como tal situación no es la idea por la cual comenzamos a hacer esto, entonces les recomiendo que tengan en cuenta esto. Disclaimer avisado, recomendaciones señaladas ocupémonos de lo nuestro: “Armar un Layout simple”.

Lo primero que necesitamos es crear un archivo HTML.

Dreamweaver

La ventaja de usar Dreamweaver es que la creación, importación, edición, modificación y todo tipo de manipulación en diseño Web es sumamente mas facil y menos miserable con DreamWeaver. Muchos ya lo usaron y continuarán haciéndolo. Yo recomiendo que si pueden afrontar el precio de esta dichosa herramienta, lo adquieran sin dudarlo. Realmente tiene demasiadas buenas opciones y se pueden hacer cosas impresionantemente mas rápido que prescindiendo de él. Si les interesa probar dreamweaver y tener todas sus opciones por 30 gloriosos días, descargenlo de aquí.

Primero lo primero

Voy a recomendar hacer lo que, la persona que me enseño a hacerlo hace. Primero dibujar lo que queremos hacer para tener una idea visual de lo que necesitamos y, de esta manera , será mucho mas facil plasmarlo en algun otro lado. Esta super técnica de “primero dibuja, luego programa” es sumamente útil para absolutamente todo, crear una base de datos, un Layout, una estructura de algun sistema.. etc..


Nuestro diseño tendrá el siguiente boceto:

CSS

De hecho este es un tema que no domino mucho pero se algunas cosas que pueden ser de gran utilidad. Lo que siempre pensé es que se debía escribir el estilo de algo que se deseaba modificar. Tuve que hacer un diseño que funcione en todos los exploradores mas usados, es decir, Firefox 3, Opera, Safari, Internet Explorer y la BASURA de Internet Explorer 6. Lamentablemente para todos IE6 es el explorador de internet mas usado en el planeta tierra, ocupando mas del 70% del total de exploradores usados.
Es por esta razón que debemos asegurarnos que cualquier cosa que hagamos se vea bien en todos los exploradores.

Le pregunté a alguien que realmente sabe del tema y Giancarlo de Giancarlospot.com me enseño algo sumamente interesante: existe herencia en css y tambien se puede programar la hoja de estilos (css) de la siguiente manera :

div.data{
	width:950px;
	background-color:#ffffff;
	padding: 0px 20px 10px 10px;
	position:absolute;
	font-family:tahoma;
	font-size:12px;
}

Esto es una clase simple y sencilla para una cap (div) cuyo parámetro “class” es igual a “data”

<div class="data">Contenido de la capa</div>

Esto quiere decir que se puede hacer una hoja de estilos heredando propiedades de cada clase en dicha hoja de estilos. Por ejemplo, en el caso anterior esa clase solo y únicamente servirá para un DIV cuya clase sea “data”. Esto no podrá ser aplicado a alguna otro componente, solo a un div con dicho nombre.

Lo que queremos hacer es un diseño en donde las capas que lo conforman hereden sus propiedades a las capas que tienen dentro y asi podremos tener un diseño con poco HTML y siendo estructurado por una hoja de estilos. También evitamos el hecho de usar los estilos en los componentes dentro del código HTML, algo así:

<div style="width:950px;background-color:#ffffff;padding: 0px 20px 10px
 10px;position:absolute;font-family:tahoma;font-size:12px;"></div>

Esto no sólo complica el leer código html sino que también lo desordena y para que diablos vamos a hacer eso si es que podemos usar CSS?
Aqui va mas del css:

div.data div.leftPanel{ /* div leftPanel dentro del div Data*/
	padding:5px 10px 0px 5px;
	float:left;
	width:200px;
	background-color:#ffffff;
	margin: 5px 5px 5px 5px;
}
div.data div.leftPanel a{ /*etiqueta a dentro del Div leftPanel dentro de data*/
	color:#999999;
	font-weight:bold;
	text-decoration:none;
}
div.data div.leftPanel a:hover{ /* Evento hover de la etiqueta a*/
	border-top:dashed 1px #cccccc;
	border-bottom:dashed 1px #cccccc;
}

Este código tiene mas cosas interesantes! para comenzar tenemos la clase “div.data div.leftPanel”. Esto quiere decir que esta clase afecta solamente a la capa (div) que tenga class=”leftPanel” y que este dentro de la capa que tenga como class a data, entendiendolo mas facil :

<div class="data" >
<div class="leftPanel">
<a>Esto sería afectado</a>
</div>
</div>

De esta manera podemos hacer que las etiquetas hereden sucesivamente sus estilos a otras etiquetas que se encuentren dentro de ellas. Esta manera me pareció mucho mas ordenada y adecuada. De hecho tiene un inconveniente y es que si no se hace de manera ordenada puedes perder la hilación de la estructura al ver el código. La “Clasitis” puede llegar a ser un problema pero si somos ordenados y hacemos las cosas de la manera mas meticulosa , estoy seguro que los resultados hablarán por si solos.

Puedes experimentar la aplicación aquí y descargar los archivos aquí.

Saludos a todos.

javier