Cuando terminábamos de escribir nuestro código, en el articulo anterior, y observábamos por primera vez nuestra pagina en el navegador….si, nos llevábamos una decepción. Para que sirve tanta semántica, si luego el aspecto final es lamentable.

La semántica, entre otras cosas, nos va a permitir que nos encuentren, o mas exactamente, que los buscadores conozcan mejor, lo que estamos diciendo, con lo que nos indexaran de una forma mas correcta, y las visitas que nos enviarás, posiblemente seran de gente que nos busca, eso puede que no mejore el numero de visitas, pero seguro que mejora el tiempo que nuestro visitante permanecerá en la web.

El siguiente paso para conseguir ese exito, es que a nuestro visitante le guste lo que vea, y la presentación gráfica es una responsabilidad de las hojas de estilo,  el CSS, que en este momento esta en versión 3 (CSS3) y que también a crecido, permitiéndonos animaciones y transiciones sin apoyo de javascript, bordes redondeados, colores degradados, y aportar fuentes externas, para no tener que depender de las fuentes instaladas…

Pero como el curso se plantea para gente recién llegada, en este articulo veremos como controlar los colores solidos y el posicionamiento; para lo demas, ya tendremos tiempo

Primero un poco de teoría. Cuando en HTML hablamos de etiquetas, a nivel de presentación las podríamos ver como cajas, cada etiqueta es una caja que tiene en su interior mas etiquetas (cajas), texto, imágenes…

Añadamos a eso, que si no hay ninguna definición en contra, en cada linea solo puede haber una caja, y cada caja mide el 100% de ancho.

Cuando aplico un estilo, puedo escoger a que caja lo aplico de tres maneras:

  • Añadiendo a la etiqueta de la caja un «id»; lo vimos en la etiqueta div: «< div id=’contenedor’ >», para hacerlo así, en la hoja de estilos definiré una regla para «#contenedor». Osea el nombre dado a la caja, anteponiendo la #
  • Puedo crear una clase, y luego aplicarla allí donde quiera añadiendo en cualquier etiqueta el nombre de la clase como «class=’cabecera’ «, la regla la tendré que crear anteponiendo un punto (.) al nombre de la clase, creare una regla para «.cabecera»
  • Puedo crear un estilo para la etiqueta, y el estilo se aplicara a todas las etiquetas; la regla la creare indicando el nombre de la etiqueta sin (.) ni (#)

Cuando aplico un estilo a una caja, ese estilo permanece para todos los objetos (cajas) contenidos dentro del mismo, por ejemplo, si le aplico un estilo a «body», ese estilo se aplicará a todos los elementos de la pagina, a menos que tengan alguna otra regla de estilos que cambie las condiciones.

Cuando antes he comentado las posibilidades de aplicar estilos por «ID» o por clases, puede que no hayáis visto la diferencia; os la indico. Un «ID» no se puede repetir dentro de una hoja, mientras que una clase, si. Osea un estilo que defina a un ID, solo me vale para ese «ID», un estilo que defina para una clase, lo podre ir aplicando allá donde me interese.

No os preocupéis que tengo un ejemplo preparado para que lo entendáis.

Abrid «brackets» y situaros en el fichero «index.html» del ejercicio 2. Vamos a crear una regla para «body», para ello, situaros con el cursor de ratón encima de la etiqueta «body», pulsar botón derecho y seleccionar «Edición rápida»

Activando la edicion rapida con BracketsSe os abre un espacio:

Añadir nueva reglaLo que hemos hecho, es indicarle a «Bracket» que queríamos ir a la hoja de estilos, para actuar sobre el estilo de la etiqueta «body», como todavía no habíamos creado ninguna regla sobre esta etiqueta, nos ofrece el botón «Nueva regla», que deberemos pulsar.

Entrando una nueva regla en bracketsLo que estamos viendo, debajo de la linea 7, es un trozo del fichero «estilos.css», en mi caso, las lineas 26,27 y 28 de dicho fichero; porque yo ya he creado otros estilos, en vuestra maquina, aparecerán las primeras lineas, posiblemente, la 2,3 y 4.

Para indicar una regla de estilos, deberemos indicar el selector; en este caso una etiqueta, por lo que no tiene que llevar ni puntos ni #, nuestro editor ya nos la escrito, junto con las llaves que han de contener los componentes de la regla.

Colocamos el cursor en la linea central, en mi caso la 28, y alli vamos a indicarle que deseamos que nos aplique un color de fondo a toda la caja; por ejemplo, el rojo. Para ello, escribimos:

background-color:red;

A continuación, os colocáis sobre «header», y repetís la maniobra, pero esta vez indicáis:

background-color:rgb(200,200,200);
height:auto;

Para que la caja ocupe la altura que necesite su contenido.

El siguiente paso es colocaros sobre el ID del «div», osea sobre «contenedor», el resto igual, con los valores

background-color:rgb(150,150,150);
height:auto;

y asi sucesivamente; os dejo la hoja de estilos generada, y supongo que ya sabreis como hacer para añadir reglas a los demas ccomponentes (nav, section, footer…)

HTML5-La primera version de la hoja de estyilosSobre todo, no os olvideis de terminar cada sentencia con los «;».

Lo que hacemos con esto, es asignar a cada caja que hemos creado un color; ahora ya podeis visualizarla:

2014-08-12_13h07_05y veréis exactamente todo aquello que explicaba acerca de las cajas y sus contenidos:

Vision de la distribucion de cajasQuiero señalaros como se mantiene el fondo rojo que le hemos indicado a body en todas aquellas zonas en donde no hay una caja con su propio color, lo mismo ocurre con la zona del «div» llamado «contenedor», que cede su color a todo lo que esta dentro de el, y no tiene color propio, como le pasa a «aside«

Otra cosa importante son esos margenes que nos aparecen a la izquierda y arriba de la pantalla, y entre algunos elementos; los detectamos por su fondo rojo, señal de que pertenecen a «body», pero no pertenecen a nadie mas. y no se trata de que sean bonitos o no, sencillamente no los estamos controlando, y hay veces que querremos tenerlos y otras no, por lo que lo ideal seria controlarlos.

El problema reside en que todas las etiquetas de HTML tienen estilos por defecto, la mayoría relacionados con «margin» o distancia a la caja exterior, y «padding» espacio interior de la caja, a dejar vacion, y la mejor forma es ponerlos a cero. Encontrareis en Internet instrucciones acerca de como hacerlo, de momento, y para este curso, nos bastara con añadir al principio de nuestra hoja de estilos:

* {
margin:0;
padding:0;
}

y veréis como desaparece todo rastro de margen, y queda todo pegado….por algo se empieza.

El siguiente paso, es conseguir que «nav», «section» y «aside», queden todos al mismo nivel, y  no uno debajo de otro; para ello, deberemos hacer dos cosas; por un lado definir la anchura de cada uno para que los tres quepan en una linea, y luego hacer que dejen que otra caja se situe a su altura.

Modificamos la regla de «nav» para añadirle:

width:20%
float:left;

Con lo que le indicamos que ocupe solo el 20% de la anchura disponible, y «flote» a la izquierda, lo que significa, que dejara espacio a su derecha para otras cajas.

Modificamos la regla «section» para añadirle:

width:50%;
float:left;

Que ocupe el 50% del ancho de la linea, y que se ajuste a la izquierda

Por ultimo creamos una regla para «aside», en la que indicamos:

width:20%;
float:right;

Si visualizamos nuestro resultado será algo como:

Pagina en donde hemos aplicado floatsHe puesto el origen de cada zona, y todo empieza a estar en su sitio, excepto el pie, que como las tres cajas del «contenedor» no ocupan el 100% del ancho, (20%+50%+20%=90%), la caja de «footer» se sube. La solucion es muy sencilla; solo tenemos que modificar la regla del contenedor, para indicarle:

overflow:auto

y, entonces, si quedará todo en su sitio, aunque todavía falten detalles.

Aprovecho ahora, que todo empieza a estar un poco claro, para señalaros como el «header» y «footer» que pusimos dentro del primer «article», nos aparecen con las características dadas de forma genérica a esos componentes

En el siguiente capitulo, empezaremos a utilizar CSS3 para que nuestra página consiga un look mas «profesional»

3 comentarios sobre “HTML5 – Del contenido a la visualizacion”

  1. mi única queja es que no me pude concentrar en la lectura, ya que según veo tienes un efecto de burbujas que me distrae.

    1. Discúlpame. El único ingreso son la publicidad y las donaciones, y a veces me paso de «ingenioso».Tengo en proyecto añadirle un efecto tapón, para que el visitante pueda cerrarlo, ya que a veces resulta molesto. Mirare de implementarlo lo antes posible.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.