comment 0

Curso de programación web desde cero: Clase 3

1.- Maquetación web básica

(Lo Lees en 9:51)

En este curso de programación web hay una serie de clases que, por su importancia, son claves. Y las que vienen ahora son de esas.

En esta y en las siguientes clases voy a empezar a explicarte como maquetar una web. Es decir, como crear la estructura visual de tu proyecto. En definitiva: lo que tu usuario va a ver.

Y son muy importantes porque muchos desarrolladores web no entienden demasiado bien los conceptos que vamos a ver continuación. El no tener estos conceptos claros lleva a tener que hacer muchas pruebas para que los elementos de una página se vean y se relacionen entre ellos como queremos.

El no aprender bien estos conceptos nos conduce a interminables procesos de prueba y error que en ocasiones acaban teniendo que recurrir a ver como se han maquetado otras páginas para conseguir lo mismo.

Es decir, no tener claros estos conceptos lleva a muchos profesionales a ser menos productivos y a tener una enorme frustración.

Creo que es importante aclarar que cuando hablamos de maquetación, no nos estamos refiriendo a colores, tipos de fuentes y demás, sino a cómo se disponen todos los elementos de nuestra página.

La maquetación trata de dónde se ubican y de cómo se relacionan unos elementos con otros en nuestras páginas.
Saber maquetar implica saber qué ocurre si nuestra página cambia de tamaño e indicar a nuestros elementos cómo tienen que reordenarse.

Maquetación es decidir si nuestro sidebar se encuentra siempre en uno de los márgenes de nuestra página. Ubicar nuestra barra de navegación con respecto al cuerpo de nuestra web. Decidir dónde se sitúa el logo de nuestro sitio dentro de nuestra barra de navegación. Colocar la imagen redondeada de nuestro avatar en la web, etc.
En definitiva, desarrollo web sin maquetación no sirve de nada.

Y para poder colocar y ordenar los elementos de los cuales se compone nuestra web, como si de un cajón se tratara, y a nuestro gusto, debemos conocer la teoría del modelo de cajas.

2.- En la web, todo es una caja

Hasta ahora hemos hablado de etiquetas semánticas en HTML, de cómo aportar información a los navegadores y motores de búsqueda sobre el contenido de nuestras páginas, como en la anterior clase de iniciación a HTML 5.

También hemos visto nuestras primeras nociones sobre como dar estilo a nuestro contenido web usando CSS. Si no te acuerdas te recomiendo que antes de seguir le pegues un vistazo a esta clase.

En la web, en nuestros HTML, todo son cajas. Todo se comporta como cajas o rectángulos. Cada etiqueta es una caja, <body>, <nav>, <section>, <p>, <aside>, todos los elementos son cajas.

Vale, pero que significa esto de que todas las etiquetas son cajas? Pues que como cajas o rectángulos que son, la relación de los diferentes elementos y etiquetas que componen nuestra página dependerá de como sean esas cajas que las contienen y del orden jerárquico en el que se encuentren.

Como has visto anteriormente, en los documentos HTML hay una jerarquía, hay unos elementos que están dentro de otros por encontrarse en una jerarquía inferior. En una estructura de HTML, un <section> se encuentra dentro de un <body>, que a su vez se encuentra dentro de un <html>.
Pues bien, una caja es cualquier elemento html que contiene a otro. Dicho de otro modo: el que una caja contenga a otra le permite tener márgenes y le permite flotar o moverse dentro de él.

Te lo repito, porque esta es la clave: un elemento html que contiene a otro le permite tener márgenes, y le permite flotar dentro de el.
Si hay más elementos dentro, el movimiento o el cambio de tamaño de uno de estos elementos provocará el cambio de posición del resto.

Es decir, la dimensión y el tamaño de esa caja provoca que otros elementos que se encuentran dentro de esa caja sean empujados o modificados por él.
Párate a pensarlo un minuto, y verás que hasta cierto punto es lógico.

Pero esta definición es demasiado abstracta. Y para entenderlo nada mejor que varios ejemplos con imágenes.

3.- Un ejemplo visual de caja

Creo que la dificultad que tienen las personas que empiezan a maquetar es visualizar los elementos HTML como cajas que son, como si fueran elementos físicos, cuyos cambios de tamaño y posición afectan al resto de los elementos que tienen alrededor, y que por tanto pueden modificar al contenedor superior de estos elementos.

Hay otra dificultad añadida para entender estos comportamientos en la gente que empieza, pero la veremos un poco más adelante.

Para visualizar lo que acabamos de ver, vamos a pintar la caja. Vamos a traer a la realidad lo que no se ve a simple vista.

Imagina un párrafo, un elemento semántico <p>: como buena etiqueta HTML que es, <p> es una caja. Una caja que en este sencillo ejemplo se encuentra dentro de un <body>, es decir, de otra caja.

Te recomiendo que hagas este sencillo ejemplo conforme vas leyendo el artículo. Te resultará muy esclarecedor y lo entenderás mejor.
Sigue los siguientes pasos:

– Crea un archivo html con una estructura básica. Yo le he llamado índex.html
– Crea un párrafo dentro del <body> con algo de texto falso. Si utilizas Sublime Text y tienes Emmet instalado, puedes teclear lorem y pulsar tabulador. Automáticamente te creará un párrafo de texto falso:

Creando texto falso con Sublime y Emmet.

Creando texto falso con Sublime y Emmet.

Si no, siempre puedes crear un texto falso desde esta web donde seleccionas el número de párrafos que quieres crear y pulsas el botón de generar lorem ipsum. Ya solo tienes que copiar y pegar el texto generado en tu editor de código.

Creando texto falso "lorem ipsum"

Creando texto falso “lorem ipsum”

Los textos falsos son importantes en desarrollo web ya que permiten comprobar como se comportan ciertos elementos de nuestro diseño en determinadas circunstancias, como cuando un usuario introduce mucho texto, y para comprobar que todo el diseño se comporta correctamente, y no se deforma, por ejemplo.

– Ahora crea un style.css y enlázalo con el html que has creado con el. Recuerda que se enlazaba usando este código en el <head> de tu archivo html:

	<link rel="stylesheet" href="style.css">

Si no has podido completar los pasos anteriores te recomiendo que repases las clases pasadas, y luego sigas con este post.

Bien, hasta ahora, lo que tenemos es lo siguiente:

Aspecto de nuestro html al abrirlo con el navegador.

Aspecto de nuestro html al abrirlo con el navegador.

Ahora, gracias a un atributo de estilo de CSS, vamos a pintar los bordes de la caja que realmente es nuestro párrafo.
Para ello en nuestro style.css añadimos lo siguiente:

body {

	border: solid 1px black;

}

p {

	border: solid 1px red;
}
Nuestro body y párrafo con el atributo border.

Nuestro body y párrafo con el atributo border.

Lo que hemos hecho es mediante el atributo de css “border” pintar el borde de cada elemento con una línea continua “solid” de 1px de grosor y de color rojo y negro, ya que border tiene la siguiente estructura:

	
border: tipo de linea, grosor en px, color;

Como puedes, ver ambas son cajas, una caja roja dentro de una caja negra. Un párrafo dentro de un body.

Inspeccionando los elementos: la zona naranja es el margen.

Inspeccionando los elementos: la zona naranja es el margen.

Ahora bien: si dentro de nuestro body, solo hay un elemento, que es el párrafo, porqué no coinciden la línea roja y la línea negra. La respuesta es muy sencilla: permíteme que me cite a mí mismo: “una caja es cualquier elemento html que contiene a otro. El que una caja contenga a otra le permite tener márgenes y le permite flotar o moverse dentro de él.”
Como <body> contiene a <p>, le permite tener márgenes y flotar dentro de el, que es lo que está ocurriendo.

Es decir, las cajas tienen margen interior y exterior, y estos atributos se controlan con CSS mediante lo que se denomina margin y padding.

4.- Margin y padding

Esquema de margin y padding de un elemento HTML

Esquema de margin y padding de un elemento HTML

El margin es el margen exterior. Fijando un margen empujamos al resto de elementos que se encuentran alrededor del nuestro. Por ejemplo, aplicando un margin a <p>, estamos empujando a los elementos que rodean a nuestra caja .

El padding es el margen interior de nuestro objeto. Al aplicar padding, separamos nuestro objeto de lo que tenemos alrededor. Es decir, lo que hay alrededor no se mueve, no se ve afectado, sólo lo que hay en el interior de nuestra caja. En el caso de nuestro <p>, es el texto.

Para aplicar un margin o un padding necesitamos indicar la distancia de separación en pixeles y la dirección hacia donde se aplica esa distancia: top, bottom, right y left.

El margen y el padding se pueden construir de varias formas, y son las siguientes:

Con cuatro elementos: cada elemento indica una dirección y sigue el sentido de las agujas del reloj, por ejemplo:

	padding: 10px 20px 30px 40px;

Con esta línea estamos aplicando al contenido de nuestra caja <p>, es decir, al texto, un margen interno con respecto al interior de su contenedor, es decir <p>, de 10 px con respecto a la zona superior, de 20 px con respecto a la derecha, de 30 px con respecto a la parte inferior, y 40 respecto al margen izquierdo.
Es decir, el texto que hay dentro del párrafo se va a separar esos pixeles en esas distancias del borde de la caja que hemos pintado en rojo.

El padding aplicado representado en color verde. padding: 10px 20px 30px 40px;

El padding aplicado representado en color verde. padding: 10px 20px 30px 40px;

Con dos elementos:

 
	padding: 20px 10px;

Así separamos nuestro objeto con respecto a su margen. En el caso del p, separamos el texto del borde de la caja p, 20 px superior e inferior, y 10 px a derecha e izquierda

Con un elemento:

	margin: 0;

Con esta línea de código separamos nuestro elemento <p> la misma distancia en las cuatro direcciones.
Por ejemplo, si ponemos en <p> margin: 0; eliminamos todos los márgenes exteriores de <p>, y por tanto, ahora si, las cajas roja y negra, coinciden, ya que hemos eliminado el margen que las separaba.

Al eliminar los márgenes ambas cajas coinciden.

Al eliminar los márgenes ambas cajas coinciden.

Elementos uno a uno: si solo queremos aplicar padding en un sentido podemos hacer margin-top, margin-bottom, margin-left o margin-right.
Por ejemplo, si aplicamos a <p> y queremos aplicarle un margen superior de 100 px:

	margin-top: 100px;
Un margin superior de 100px.

Un margin superior de 100px.

De una forma esquemática esto es lo que ha ocurrido:

Esquema de margin y padding

Esquema de margin y padding

One More Thing: los <div>

Hemos estado viendo en las anteriores clases y en estas varias etiquetas HTML, semánticas, cuyo objetivo como ya sabes, es aportar información sobre el tipo de contenido de nuestras páginas.
Ahora bien, hay etiquetas que son más genéricas, que no aportan información semántica, pero que son muy necesarias por ejemplo para la maquetación de nuestra página.
Estos elementos son los archiconocidos <div>.
Si necesitas maquetar un elemento de tu web y no encuentras una etiqueta semántica que pueda dar información sobre ese contenido: usa un

De alguna forma, un div es la expresión más cercana a una caja. Y los vamos a empezar a utilizar mucho.

Conclusión

En esta clase hemos empezado a plantear los conceptos necesarios para aprender a maquetar, como el modelo de cajas, o los atributos de margin y padding.
Como ves, la cosa comienza poco a poco a ponerse seria. Por eso es muy importante que vayas afianzando estos conocimientos.
Cualquier duda que tengas no dudes en plantearla en los comentarios.
¿Qué te ha parecido esta clase? ¿Algo que se haya quedado en el tintero o que se pueda clarificar mejor?

Post Relacionados:
– Clase 0: Introducción al curso.
Clase 1, Tu primera web app.
Clase 2, HTML 5.
Clase 4, Id, clases y normalize.
Clase 5, Display block, inline e inline-block.
Clase 6, Position.
Clase 7, Instalando fuentes desde Google Web Fonts.
Clase 8, Fuentes seguras, añadiendo tus propias fuentes a tu proyecto web.

Clasificado como: Código

Sobre el autor

Escrito por

Me llamo Francisco Gallardo , y soy diseñador de productos de software, mobile y web. Soy diseñador de UX, de interfaces y desarrollador web y iOS.

Leave a Reply