LM T5: Estructura de página.

Layout
TEMA 5: Estructura de página. LAYOUT

Contenidos:

1. Evolución en la estructura de páginas.

2. Estructura de cajas.
3. Posicionamiento.
4. Propiedades display y visibility
5. Layout.
6. Layout HTML5
7. Flexbox
8. Diseño adaptativo (Responsive Design). Media Queries
9. Resumen.

Actividad

Normalmente todas las páginas web tienen un diseño común, una cabecera, una botonera, una parte principal, un pie donde
pueden ir también enlaces…

Elije una página web e intenta identificar todas las partes de estructura de la página.
1. Evolución de la estructura de páginas

Es muy importante conocer el lenguaje html y css para realizar una página web, pero no es menos importante
realizar una buena organización de la página.

• Los primeros navegores estructuraban con tablas.

Diseñaban una tabla grande que ocupara el ancho y el alto del navegador y dentro de las celdas se
organizaba el contenido.

Ejemplo de organización con tablas:

• Los marcos reemplazaron en esta función a las tablas.

Pronto se descubrió que no eran buena idea, dan problemas con el motor de búsqueda de los buscadores,
sólo se puede actualizar un marco en cada momento…etc.
• Las capas junto con los estilos sustituyeron la forma de organizar el contenido de la página.

• En HTML 5, se han creado etiquetas propias para la estructura de la página (lo veremos a lo largo de este
tema)
2. Modelo de cajas.
CSS trata cualquier documento web como si cada elemento estuviese dentro de una caja invisible.

Cada una de estas cajas tiene siempre

• Área de contenido (Contenido o content). Videos, imágenes, texto…

• Espacio alrededor del contenido (Relleno o padding).

• Línea que cierra la caja (Borde o border)

• Espacio que separa esta caja de otras (Margen o margin)

Margen
Relleno

Contenido Borde

Ejemplo: El siguiente código se muestra una estructura de combinación de cajas.

Los estilos que hemos aplicado a las distintas cajas son los siguientes:

El resultado en el navegador será :

Vamos a ver un ejemplo de la propiedad margin, para ello vamos a modificar el margen de la caja imagen y
veremos cómo se modifica la posición de la misma:
Si deseamos modificar también el margen de la capa texto lo haremos de la misma forma:
Como dijimos anteriormente, el relleno es el espacio que hay entre el borde y el contenido. Si nos fijamos en la
caja del texto, éste está pegado a los márgenes izquierdo y derecho. Para añadir un espacio y mejorar la claridad
de la caja, vamos a añadir un relleno de 10px.
 Actividad:
Realiza un diseño como la imagen siguiente con los datos incluidos en la imagen y colores similares. Todos los
bordes son de 3px, excepto el más externo, que son 5px

Solución :
3. Posicionamiento.
Todos los elementos al insertarlos en una página, se adaptan a una posición, que se denomina posición natural.

Mover al elemento de dicha posición, se denomina posicionamiento, y existen 5 formas de realizarlo con CSS

• Normal o estático.
• Relativo
• Absoluto
• Fijo
• Flotante

Propiedad position
Valores static | relative | absolute | fixed

Descripción Indica la tipografía del texto.

Una vez seleccionado el tipo de posicionamiento, (estático, relativo,…), se puede indicar si va a haber
desplazamiento, cuánto se desplazará y respecto a qué.

Propiedad top, bottom, right, left

Valores <valor px> | <porcentaje %> |auto

Descripción Indica el desplazamiento.

Otra propiedad relacionada con el posicionamiento es la propiedad float

Propiedad float
Valores left |right

Descripción Indica dónde queremos que flote el elemento.

Posicionamiento estático

Es el que utilizan los navegadores por defecto. Por ejemplo, si pongo un párrafo de texto y un imagen, la imagen
aparecerá siempre detrás del texto y no al contrario.

Si el elemento que se introduce es de bloque, se situará al principio de la línea y ocupará toda la línea. (Ejemplos:
<div>, <span>, <p> ..)

Si el elemento que se introduce es en línea, no ocupará toda la línea, sólo lo que ocupe el contenido. (Ejemplos:
<a>, <img>,<strong>…). Si el siguiente elemento cabe a continuación, ocupará parte de la línea si cabe.

Aunque es el posicionamiento que viene por defecto, se puede especificar indicando en los estilos la propiedad:

{position:static;}
Posicionamiento relativo

Si deseamos mover un elemento con respecto a su ubicación natural, es decir, respecto al elemento en el que se
encuentra incluído, a este tipo de posicionamiento se le denomina posicionamiento relativo.

Ejemplo:

En el código anterior, vamos a realizar un desplazamiento relativo del enlace. Para ello, hemos añadido a los estilos
la siguiente línea:

Y el resultado será:

Posicionamiento absoluto

Con el posicionamiento absoluto,

no se mueve al elemento respecto a su posición natural, sino con el primer contenedor que esté posicionado de
forma diferente a static.

Para localizarlo, se recorren todos los elementos contenedores empezando por el más cercano al elemento que
deseamos mover. Si no hay ninguno, la posición se realizará respecto a la ventana del navegador (no con el
elemento <body>)

Ejemplo:
En el ejemplo anterior, vamos a mover el enlace 40 píxeles desde la parte superior de la ventana y 40 desde la parte
de la izquierda.
Para ello, tendremos que modificar los estilos del enlace por la línea siguiente:
Y el resultado será:

Posicionamiento fijo.

Es similar al posicionamiento absoluto, pero al desplazarse la barra de desplazamiento, de la página, el elemento

no se desplaza y siempre ocupa la misma posición en la pantalla.

Es ideal para realizar pies de página o cabeceras en la página.

En el ejemplo anterior, si posiciono el enlace de forma fija, aunque me desplace hacia abajo con el scroll, siempre
se mantendrá en la misma posición del navegador.
La propiedad float.

La propiedad float sirve para que los elementos puedan “flotar”.

La caja se colocará todo lo posible a la izquierda o hacia la derecha en la línea en que se encuentran.

Ejemplo:

Vamos a modificar la siguiente página, cuyo código se trabajó al principio del tema, para que las dos cajas más
internas, se presenten en dos columnas:

Para ello, en los estilos de las cajas texto e imagen añadiremos:

Se ha añadido a cada capa la propiedad float y al texto con el valor left, para que se ajuste a la izquierda. Además
se ha adaptado el ancho para que ambas cajas junto con los márgenes, no superen el 100%, del ancho, ya que de
ser así, la segunda capa, bajaría a otra línea.

El resultado de añadir la propiedad float por lo tanto es el siguiente:

Al haber aplicado la propiedad float, las capas “flotan”, por encima de los divs, que las contenían. Este problema lo
solucionaremos con la propiedad clear.

Actividad:

Completa seleccionando el tipo de posicionamiento correspondiente eligiendo para cada hueco el nombre de un
posicionamiento concreto, todos o ninguno:

Se desplaza desde su ubicación natural ____________

Siempre se desplaza desde la esquina superior izquierda de body ________

Siempre ocupa la misma posición en la ventana del navegador _________

Toma como referencia el primer elemento no estático que lo contiene _________

Puedo utilizar coordenadas negativas _________

Suele ser util para encabezados o pies de página ___________

Gracias a él podemos presentar caja en la misma línea __________

1-Relativo,2-Ninguno, 3-Fijo, 4-Absoluto, 5-Todos, 6-Fijo , 7-Flotante

Soluciones:
La propiedad clear.

La propiedad clear nos permite “romper”, la propiedad float.

Para entenderlo mejor, lo ilustraremos con un ejemplo.

A estas capas se les ha aplicado la propiedad float, por eso se muestran en la misma línea.

El código sería el siguiente.

El problema viene si nosotros queremos modificar el código para que las cajas se presenten de la siguiente forma:

Esto se puede solucionar con la propiedad clear indicando que en la capa 3 queremos “romper”, el efecto del float
por la parte de la izquierda. Para ello en los estilos añadiremos la propiedad clear:left a la capa3 de la siguiente
forma:

Y en el div correspondiente a la capa 3 aplicamos la clase de todas las capas y la nueva clase.

Más sobre clear:

Otra situación que podemos resolver con la propiedad clear es la que se presentó cuando vimos la propiedad float,
Los elementos que “flotaban”, salían de los divs que los contenían.

Si se desea que visualmente aparezcan dentro, se resuelve de la siguiente forma:

Creando un div vacío a continuación de las dos cajas flotantes dentro del div que las contenía y aplicando a dicho
div la propiedad clear. Si hubiese otra capa real que sustituyera a la vacía, no haría falta incluir la vacía, simplemente
aplicaríamos la propiedad clear a dicha capa.
Y en los estilos a dicha capa se le aplica la propiedad clear directamente al identificador #ultimo, o creamos una
clase en la página de estilo, que podamos utilizar siempre que lo necesitemos:

Y la aplicamos a la nueva caja:

El resultado será:
Superposición de elementos.

Al trabajar con los distintos posicionamientos, puede ocurrir que algún elemento aparezca solapado. En estos casos,
debemos poder elegir elemento que queda encima, y esto se realiza con la propiedad z-index.
Propiedad z-index
Valores Número de orden

Descripción Indica qué capa estará sobre otra

Cuanto mayor sea el número z-index, más elevado estará en la pila de objetos.
Ejemplo:

Los estilos aplicados a las imágenes son los siguientes:

Como vemos, el triángulo está sobre el círculo y este sobre el cuadrado. Si quisiese que fuese el círculo el que
estuviese sobre los otros dos tendría que modificar el z-index de la siguiente forma:
 Actividad:
Realiza con el posicionamiento absoluto y la propiedad float una presentación como la de la imagen en que la capa
1 es la inferior y la 4 la superior. Además al pasar el ratón por encima de alguna capa, ésta será la más alta. Por
ejemplo si nos situamos sobre la caja 2, el resultado será el de la derecha.
4. Propiedades display y visibility

Gracias a ciertas propiedades de CSS podemos realizar efectos dinámicos en nuestra web.
Una de ellos ya la conocemos, es la propiedad a:hover. Otras propiedades son display y visibility

La propiedad display:

Mostrar y ocultar elementos

La propiedad display muestra u oculta elementos del navegador. Puede cambiar el tipo de visualización de un
elemento, de bloque a en línea o al contrario, etc.

Propiedad display
In line | block | none | list-item |run-in| inline-block
Valores | table | inline-table|table-row-group | table-
header-group| table-column|table-cell|table-caption
Muestra o modifica la forma de presentación de
Descripción
los elementos en la página.

Ejemplo:
Ocultar un elemento. En la imagen de las tres figuras geométricas, se han insertado, sin utilizar ningún tipo de
posicionamiento. Al ser un elemento en línea, se muestran una a continuación de la otra de la forma.

Ocultaremos la figura del círculo con la propiedad display:none.

En los estilos añadiremos la clase:

que luego aplicamos al elemento que queramos ocultar, en este caso, al círculo

El resultado es que el círculo dejará de mostrarse, y el triángulo ocupará su lugar como se muestra en la siguiente
imagen:
Cambiar la forma de presentarse de un elemento.

Ejemplo:
Sabemos que las imágenes son elementos en línea, tal y como hemos mostrado en el ejemplo de arriba. Pero con
la propiedad display:block, podemos hacer que se presenten en forma de bloque, ocupando una línea completa
cada imagen.
Añadiendo en los estilos la siguiente propiedad se mostrarán en bloque.

Ejemplo:

También podemos encontrarnos con el caso contrario, que la forma natural del elemento sea en bloque y deseemos
mostrarlo en línea. Como por ejemplo, una lista en la que los elementos <li> se representan en bloque de forma
natural, pero al aplicar el estilo display:inline; se mostrarán en línea.
La propiedad visibility:

La propiedad visibility hace que se muestren o no los elementos en el navegador, pero a diferencia de display, el
elemento que no se muestra, sigue conservando su espacion en el navegador y el resto no se desplazan.

Propiedad visibility
Valores visible | hidden |collapse

Descripción Indica qué capa estará sobre otra

Ejemplo: No mostrar un elemento

Si tenemos las siguientes imágenes, y queremos no mostrar el círculo:

Habrá que añadir la clase siguiente en el los estilos:

y aplicarlo al código html:

El resultado será el siguiente:

La propiedad overflow:

La propiedad overflow soluciona el problema de que el contenido ya sea texto o imágenes de una capa div,
sobresalga del tamaño de ésta. La solución pasa por mostrarlo aunque sobrepase, ocultar lo que sobrepase, o que
utilicen barras de desplazamiento.

Propiedad overflow
Valores visible | hidden |scroll| auto

Descripción Indica qué capa estará sobre otra

Ejemplo:
5. Layout.
Denominamos layout al diseño o estructura general de la página creada con capas <div>.

Se dice que el layout es líquido cuando las medidas de las capas se utilizan en porcentajes. (%), ya que se adaptarán
al contenedor en que se encuentran.

Un ejemplo sería la siguiente página:

Las capas principales (rojas), suelen tener las siguientes propiedades:
- margin 0, padding 0, overflow:auto.

(Suelen tener margen y relleno 0, para que el total del ancho no pase del 100% y se descuadre la imagen)

El ancho de la capa principal puede ser del 100%, o puede ser inferior (ej. 80%) y estar centrado con la propiedad
margin:0 auto;

Las capas internas (azules), suelen tener la propiedad float:left, para que compartan línea y margen pequeño
para que no estén demasiado juntas (ej. 1%)

Es importante que se aplique la propiedad min-width:600; para que si la ventana se reduce más no se deforme la
pantalla.
6. Layout HTML5

HTML5, ha añadido varias etiquetas relacionadas con la estructura de la página.

Esto, simplifica el uso abusivo de las etiquetas div a la hora de organizar la estructura del documento.
Un ejemplo de estructura podría ser:

En versiones anteriores de HTML, todas etiquetas serían <div>

Etiqueta <header>

Se trata de la cabecera del texto, donde suele ir un título, subtítulo, un logo, etc

Etiqueta <nav>

Sirve para introducir un menú de navegación o una sección con enlaces a otras páginas u otros apartados dentro
del mismo documento

Etiqueta <section>

Es un área dentro del documento que queremos distinguir por algún motivo, generalmente de estilos. Al definir una
sección indicamos también su clase, para saber qué estilo de visualización se va a aplicar sobre ella.
Normalmente suele tener etiquetas de cabeceras, de <h1> a <h6>. Se pueden anidar si se cree conveniente para
crear subsecciones.
Etiqueta <article>

Define zonas únicas de contenido independiente, el contenido principal frente al resto de elementos.

Etiqueta <hgroup>

Sirve para agrupar un conjunto de encabezados. Pueden aparecer como las cabeceras de las secciones o de los
artículos.

Etiqueta <aside>

Se considera un elemento principal al margen del flujo principal. Puede incluirse en esta zona, una nota, publicidad,
enlaces, etc.

Etiqueta <footer>

Es el pie de página, donde se suele colocar cierta información como el copyright, autor, etc.

Ejemplo de una estructura de página con HTML5:

7. Flexbox

Flexbox es un conjunto de propiedades que nos permite ajustar los tamaños y la disposición de los elementos que
se encuentran dentro de un contenedor o caja, para que se adapten siempre al espacio disponible, de forma más
cómoda que con la propiedad float o position.

Para realizar los ejemplos nos ayudaremos de la web https://the-echoplex.net/flexyboxes/

display:flex

Es la propiedad principal para aplicar flexbox, y se aplica al contendor cuyos elementos queremos organizar.

flex-direction

Esta propiedad indica que todos los elementos del contenedor al que se aplica se presentarán en fila (aunque
sean de bloque como los elementos de caja)

En este ejemplo hemos puesto en el contendor la propiedad flex-direction a row

Si queremos que los elementos contenidos en el contenedor aparezcan en columnas en lugar de en fila,
tendremos que cambiar a flex-direction:column
justify-content

Para alinear los elementos del contenedor horizontalmente, utilizaremos la propiedad justify-content.

Si utilizamos justify-content:flex-start, las cajas del interior del contenedor, se quedan a la izquierda. Es el valor de
la propiedad por defecto.
Si queremos centrar las cajas en el centro usaremos justify-content:center

Si queremos justificar las cajas a la derecha usaremos justify-content:flex-end,.

Si queremos distribuir los elementos, ajustando el primero al inicio, el segundo al final y el resto distribuídos
repartiendo el espacio, haremos justify-content:space-between.
Existe otra forma de distribuir los elementos horizontalmente, pero sin que el primero y el último estén pegados a
los bordes, sino que ellos también tengan espacio. Para organizar los elementos de esta forma se utiliza justify-
content:space-around.

align-items

Nos permite alinear los elementos que están dentro del contenedor respecto a la vertical.

Si utilizamos align-items:flex-start, las cajas del interior del contenedor, se quedan en la parte superior. Es el valor
de la propiedad por defecto.
Si utilizamos align-items:center, los elementos se centrarán respecto a la altura de la caja.

Si utilizamos align-items:flex-end, los elementos se situarán en la parte inferior de la caja.

Si utilizamos align-items:stretch, las cajas internas se adaptan a la altura del contenedor.

flex-wrap

La propiedad flex-wrap indica que si hay más cajas internas de las que caben en una línea del contenedor, si se
ponen en otra línea o por el contrario salen de éste.

Para añadir más cajas dentro del contenedor tenemos en esta página, tendremos que pulsar en
Si utilizamos flex-wrap:nowrap, las cajas se saldrán del contendor

Si utilizamos flex-wrap:wrap, las cajas se dispondrán en distintas líneas.

order

La propiedad order no se aplica al contenedor, sino a los elementos internos de la caja. La propiedad order sirve
para distribuir el espacio de anchura total del contenedor entre las cajas internas.

Si utilizamos order:0 las cajas mantienen su ancho original. Sin embargo, cualquier otro número indica el reparto del
espacio que no está ocupado por las cajas.

Por ejemplo, si en todas las cajas ponemos en los estilos order:1, las cajas distribuyen el ancho del contenedor entre
ellas y todas consiguen el mismo ancho.
Si queremos, sin embargo, que una tenga mayor tamaño que otro, en lugar de 1, habrá que darle un valor mayor.

Actividad:

Visita la web https://flexboxfroggy.com/#es, es una web en la que puedes repasar los conceptos de flexbox
vistos hasta ahora y alaguno más, a través de un juego.

Actividad

Visita Crea un menú de redes sociales parecido al siguiente. La caja contenedora tiene un ancho de 150px. Los
logos 50px de ancho y alto. Están distribuidos horizontalmente y centrados verticalmente.
Solución
8. Diseño adaptativo (Responsive Design). Media Queries

Responsive Web Design es la técnica que nos permite crear sitios adaptables a las condiciones del ordenador o
dispositivo desde donde se van a acceder, sobre todo en lo que tiene relación con la pantalla donde se están
visualizando.

Existen dos filosofías para realizar este diseño:

• Mobile First: se diseña pensando en los móviles primero. Es decir, dispositivos con pantallas con
menos resolución.

• Desktop First: se diseña primero para pantallas grandes y se va adaptando a pantallas pequeñas.

Otra cosa que tenemos que tener en cuenta es la diferencia entre diseño fluído y diseño fijo. Un diseño "fluido"
es uno que se ensancha y se estrecha para llenar el ancho de la pantalla, al igual que las cajas flexibles que
vimos antes.
Un diseño de "ancho fijo" es el opuesto: tiene el mismo ancho independientemente de las dimensiones de la
pantalla (como los primeros que hicimos).

Diseño fluido Diseño fijo

Los diseños fluidos nos permiten utilizar a un rango de anchos de pantalla en lugar de tamaños fijos.
Se suele recomendar comenzar con el diseño móvil e irlo modificando hasta el diseño de escritorio.

Media Queries

El diseño web adaptable se realiza a través de media queries, que son propiedades de CSS3. Las media
queries son una serie de órdenes introducidas en la hoja de estilos que indican al documento HTML cómo
debe comportarse ante diferentes resoluciones de pantalla.

Para añadir una media querie en los estilos de una web lo podemos hacer de dos formas:

1. En el enlace de la hoja de estilos externa:

El atributo media ya se utilizaba con CSS2, pero de forma más limitada. Los valores que podía tomar era screen o
print, dependiendo de si la información se iba a mostrar por pantalla o impresa. A partir de CSS3 permite además
especificar qué tamaño de pantalla va a representar la información.

En nuestro ejemplo, se utilizará la hoja de estilos “estilosmovil.css” para las pantallas que como máximo tengan una
resolución de 480 px.

Se pueden añadir un enlaces para cada rango de resolución deseado.

2. Dentro de la propia hoja de estilos

Actividad
Utiliza media queries para que para un diseño de escritorio, el fondo de pantalla de la página sea verde, para un
diseño para tablet amarillo, y para móvil rosa.
Solución
3. Resumen.

En este tema, hemos visto la importancia de realizar un correcto diseño de la estructura de la página.

Hemos trabajado con la estructura de cajas y hemos visto propiedades importantes a la hora de utilizarlas, como margin, padding,
etc.
Otra propiedad fundamental es position, que nos permite aplicar el tipo de posicionamiento:

• Estático
• Relativo
• Absoluto
• Fijo
• Flotante.

También hemos realizado efectos dinámicos en la web gracias a las propiedades visibility y display. Y cómo superponer unas
capas a otras gracias a la propiedad z-index.

Pero todo esto ha ido dando paso a nuevas formas de realizar el layout más flexibles para todos los dispositivos desde móviles
hasta grandes pantallas de escritorio. Gracias al diseño responsivo y las media queries conseguimos que un solo contenido html
nos sirva para todos los tipos de dispositivos.