Maquetación Web con CSS

1. Introducción a la maquetación web

La maquetación web se refiere a la disposición y colocación ordenada de todos los elementos que van a formar parte del contenido de una página web dentro del espacio de la pantalla. Es un proceso que se realiza a partir de un proyecto de diseño bien definido en el que está plasmado gráficamente el resultado visual de todo lo que se espera conseguir.

Existen diferencias muy importantes entre diseño web y el diseño editorial o impreso ya que en el diseño web no habrá certeza del tamaño y tipo de pantalla donde se visualizará el proyecto mientras que en el diseño editorial o impreso el tamaño final es algo fijo sobre el que se trabaja y esto condiciona la manera en la deberemos plantear nuestros diseños.

En cualquiera de los casos, antes de ponerse manos a la obra con la maquetación y el desarrollo de un sitio web es muy importante tener un proyecto de diseño previo donde se hayan analizado las necesidades y se hayan tenido en cuenta todas las particularidades del encargo. Ahora sí, con todo el proyecto previo bien definido toca planificar la fase de maquetación en la que deberíamos partir de un boceto previo en papel en el que se plantee cómo se van a estructurar los diferentes contenidos. Una buena planificación y organización inicial es clave para no cometer errores y ahorrar tiempo.

2. El diseño de la interfaz web

La interfaz web es la disposición de los elementos gráficos en la página que permiten al usuario el acceso a los contenidos, la navegación y la interactuación.

El objetivo de una buena interfaz web es conseguir eficacia, rendimiento y seguridad al usuario durante la navegación por el sitio web, utilizando cualquier dispositivo. El usuario deberá poder acceder fácilmente a los contenidos, interactuar con todos los componentes existentes y no deberán surgir dudas del funcionamiento.

Para el diseño de la interfaz web no es necesario la utilización de código HTML ni CSS. Una buena interfaz estará basada en la utilización de elementos comunes y que sean fácilmente interpretables lo que mejorará la experiencia del usuario y pondrá en valor los contenidos de un sitio web.

A partir de la propuesta gráfica de la interfaz de una web, comenzará el proceso de desarrollo preparando el documento-plantilla que servirá de base para la maquetación de todas las páginas del sitio.

2.1 Elementos básicos de una interfaz para web

En prácticamente todas las páginas web nos encontramos con elementos comunes como son la cabecera, el menú de navegación, el cuerpo y el pie de página. En la siguiente imagen se muestra la estructura general de un sitio web incluyendo los elementos básicos.

La cabecera

La cabecera es la zona de la interfaz web situada en la parte superior que sirve para identificar la empresa o marca en la que normalmente se coloca el logotipo o nombre de la empresa. En este espacio se pueden integrar paneles de acceso para usuarios registrados, banners publicitarios, el menú de navegación de la página u otras cosas.

El cuerpo principal de la página

En el cuerpo principal es donde se incluyen los contenidos propios de la página. En este espacio la información puede organizarse mediante la disposición de diferentes bloques: menús laterales de navegación, espacios publicitarios u otros. En esta parte se debe incluir un título descriptivo de la página.

Pie de página

El pie de página es el bloque que se sitúa en la parte inferior de la página y generalmente se utiliza para incluir enlaces a las redes sociales, enlaces a algunos servicios, formularios de contacto, las políticas de privacidad y cookies, información del diseño de la web u otra información.

3. El tamaño y la resolución en el diseño web

Ya se ha comentado antes que en el diseño web lo más normal es que no haya certeza de donde se van a visualizar nuestras páginas y la norma general será conseguir una correcta adaptación de las páginas a los diferentes dispositivos y a sus características.

En este sentido, uno de los aspectos más importantes a tener en cuenta a la hora de plantear la maquetación de una web será el ancho de la pantalla del dispositivo donde se vaya a visualizar, así como la configuración o resolución de la misma.

Podemos encontrarnos con dispositivos de diferente tamaño, con diferentes valores de resolución o configuración de pantalla e incluso con diferentes formatos o proporciones de la misma y otro factor importante a considerar, será la orientación de las páginas (horizontal o vertical) ya que según el dispositivo utilizado ésta podría variar.
En este escenario, lo más recomendable será planificar nuestros diseños basándonos en medidas relativas que es uno de los fundamentos del Responsive Web Design.

3.1 Diseño web basado en medidas absolutas

Solo en algunos proyectos de trabajo destinados a verse en pantallas o equipos concretos estaría justificado la planificación del diseño basado en medidas absolutas. Con este tipo de diseños, los elementos de la web tendrían un tamaño inicialmente definido y no se adaptarían a las condiciones de la pantalla.

Si el proyecto así lo requiere, siempre habría que tener muy en cuenta la “supuesta” configuración de la pantalla donde se vaya a visualizar la página ya que un desajuste de medidas puede provocar un “scroll” horizontal que resulta muy poco profesional y molesto.

Por tanto, al ancho de referencia, habría que restarle el tamaño de la barra de scroll vertical más los bordes y márgenes de la ventana del navegador. Por ejemplo, para una resolución de 1024x768 esto medida sería entre 40 y 60 píxeles, así es que para evitar un scroll horizontal habría que diseñar a un ancho de 975 píxeles aproximadamente.

Por ejemplo, una página web diseñada con un ancho fijo de 900px, mantendrá siempre ese tamaño independientemente de la resolución o configuración de la pantalla o del tamaño de la ventana del navegador. Si la resolución de pantalla es de 1024x768 la página ocupará casi la totalidad de la pantalla, pero si la resolución fuera de 800x600 la página ocuparía más del total de la pantalla y provocaría un scroll horizontal.

3.2 Diseño web basado en medidas relativas

Cuando se trabaja con medidas relativas, los elementos contenedores y sus propios contenidos se adaptan al tamaño de la pantalla del dispositivo, independientemente de su tamaño.

Por ejemplo, si definimos en una página web un contenedor con un “width” del 100%, siempre se adaptará el total de la ventana del navegador, independientemente de su tamaño o resolución.

En este caso, si la página web se carga en una pantalla con una resolución de 1366x768, de 1920x1080 o cualquier otra,  se adaptará en consecuencia al dispositivo. Es muy importante considerar esto, para preparar y optimizar correctamente las imágenes y otros contenidos para la web y entender cómo puede afectar a la calidad cuando el contenido se vaya a adaptar a unas medidas indeterminadas.

Responsive Web Design

Desde la aparición del iPhone en 2007 y con la posterior generalización del uso de smartphones y tabletas (Android y Apple), se creó una nueva era en el uso de Internet. Con todos estos nuevos dispositivos era posible navegar por la red y se hizo necesario que las  páginas web se adaptaran a cada uno de los dispositivos existentes.

Inicialmente la solución que se adoptó fue crear distintos diseños de una web para los diferentes dispositivos. En la actualidad la solución pasa por crear un diseño que se adapte a los diferentes dispositivos y es lo que se conoce como Responsive Web Design o Diseño Web Responsive. En la siguiente imagen vemos un ejemplo gráfico de cómo funciona un diseño web responsive adaptado a distintos dispositivos.

3.3 ¿A qué resolución se debe realizar un diseño web?

Se trata de una pregunta de difícil respuesta y que requiere de un análisis concreto de la situación al no tener la certeza de donde se va a visualizar nuestro diseño. Aunque para un diseño web responsive pueda parecer una pregunta irrelevante, contar con una resolución de referencia es muy importante para la distribución de los contenidos de la página y sobre todo para optimizar las imágenes y demás elementos gráficos que intervengan.

En cuanto a la organización, distribución y adaptación de los elementos gráficos vectoriales (contenedores, textos, iconos, botones, imágenes vectoriales,…) el valor de la resolución es menos trascendente ya que la posible adaptación del tamaño de los elementos no afectará a su calidad.

Es en relación con la optimización de las imágenes y elementos gráficos basados en píxeles donde este valor tiene mayor relevancia. Siempre hay que optimizar su tamaño evitando que archivos demasiado grandes o demasiado pequeños. En todos los casos, en diseños responsive, se va a producir una adaptación de estos elementos a su tamaño final.

Preparar imágenes o elementos gráficos basados en píxeles más grandes de lo necesario llevará asociado un mayor consumo de datos y un mayor tiempo de carga de la página. Por el contrario, imágenes o elementos gráficos basados en píxeles demasiado pequeños van a tener su consiguiente pérdida de calidad en su adaptación.

Con este panorama, no queda otra solución que analizar la situación y valorar como editar las imágenes y el resto de elementos. Esta valoración será más importante cuantas más imágenes haya en la página.

• Opción 1: considerar la resolución máxima estimada a la que se verá la página y preparar las imágenes en base a ese dato. En este caso, las imágenes tendrían una máxima calidad a la resolución estimada y cuando se visualizaran a una resolución menor se redimensionarían a la baja. En la carga de la página, se ha tenido que soportar ese exceso de información.
• Opción 2: considerar una resolución intermedia de forma que si la página se visualiza a una resolución mayor o menor de la estimada se produciría un ligero redimensionamiento. Si el redimensionamiento es al alza, no se produciría una pérdida importante de calidad y si es a la baja tampoco se habría soportado mucho exceso en los datos de carga de la página.

En proyectos web basado en medidas absolutas (poco habituales) será fácil optimizar las imágenes y elementos gráficos a las medidas definidas en dicho proyecto. En el resto de casos, habrá que basarse en datos estadísticos o hacer una previsión considerando las diferentes posibilidades de visualización del diseño.

En el siguiente enlace podrás comprobar datos estadísticos relacionados con la resolución de pantalla. Enlace a estadística

4. Propiedades CSS para la maquetación web

La maquetación web se basa en la distribución de elementos contenedores en la página que será donde se alberguen los contenidos propiamente dichos. Vamos a ver ahora las propiedades CSS más relevantes para estos elementos contenedores y que también serán de aplicación para el resto de bloques en HTML.

4.1 Tipo de posicionamiento

Se define con la propiedad position y determina la forma en la que se va a posicionar el elemento contenedor en la página. Los valores de esta propiedad pueden ser relativo (relative), fijo (fixed) y absoluto (absolute). (ver HTML de muestra)

• Al aplicar un valor relative, el elemento se coloca de acuerdo con el flujo natural del documento y a partir de ese punto se determina su posición. Por eso se dice que es relativa, ya que dependerá del contenido que haya antes de él.
• El valor fixed se usa para colocar con exactitud un elemento en una posición fija. Si el elemento se coloca mediante coordenadas (que veremos a continuación), la posición se determina respecto a la esquina superior izquierda de la ventana de navegación (punto 0). Si no se indican coordenadas, la colocación se mantiene fija a continuación del contenido que hubiera antes.
• El valor absolute se utiliza para colocar con exactitud un elemento y mantenerlo fijo, pero en este caso tomando como referencia la esquina superior izquierda del contenedor donde se encuentre el elemento. Fuera de un contenedor, el posicionamiento absolute y fixed tendrían el mismo resultado.
• El valor static  es el valor por defecto de un elemento y lo posiciona de acuerdo al flujo normal del documento. Con este valor no tienen efecto las propiedades top, right, bottom, left, y z-index que veremos a continuación.

4.2 Posicionamiento con coordenadas

A partir de definir el tipo de posicionamiento para un elemento, se podrá corregir su posición mediante la utilización de unas coordenadas.

Para poder colocar un elemento mediante coordenadas deberá tener aplicada la propiedad “position” con el valor correspondiente.

Las propiedades para corregir la posición de un elemento son top, left, right y bottom y podrán aplicarse valores numéricos absolutos y relativos (px, em, ex, %).

4.3 Tamaño

Para establecer el tamaño de un elemento se utilizan las propiedades width (ancho) y height (alto).

Pueden definirse con valores numéricos absolutos y relativos. Si no se indica lo contrario, el elemento se adaptará al ancho del contenedor donde se encuentre y el alto se ajustará según el propio contenido.

4.4 Márgenes interiores

Para definir los márgenes interiores de un elemento se utiliza la propiedad padding. Puede aplicarse de forma independiente para cada lado (padding-top; padding-right; padding-bottom; padding-left;) o usar la misma línea para definir los 4 lados (padding: 5px 10px 5px 10px;) sabiendo que los valores van en dirección horaria (arriba, derecha, abajo, izquierda).

4.5 Márgenes exteriores

Para definir los márgenes exteriores de un elemento se utiliza la propiedad margin. Puede aplicarse de forma independiente para cada lado (margin-top; margin-right; margin-bottom; margin-left;) o usar la misma línea para definir los 4 lados (margin: 5px 10px 5px 10px;) sabiendo que los valores van en dirección horaria (arriba, derecha, abajo, izquierda).

4.5 Desbordamiento

Con la propiedad overflow se especifica lo que ocurre con el contenido que hay dentro de un contenedor si rebasa sus dimensiones. Los posibles valores son visible (muestra el contenido, aunque sobresalga visualmente de los límites del contenedor),  hidden (oculta el contenido que sobresalga de los límites del contenedor), scroll (genera una barra de scroll dentro del contenedor) y auto (añade scroll sólo si es necesario).

4.6 Nivel o Índice Z

En ocasiones será necesario colocar elementos superpuestos en distintas capas. Con el atributo z-index se determina el orden de posicionamiento en altura cuando varios elementos se superponen. Se define mediante un valor numérico y cuanto mayor sea el valor su posicionamiento será superior, ocultando los elementos que haya por debajo.

4.7 Imagen o color de fondo

Con las propiedades background-color y background-image se establece un color o una imagen de fondo de un elemento. Cuando se coloca una imagen de fondo para un elemento, es posible determinar algunas condiciones de la colocación de dicha imagen con distintas propiedades.

Con background-position se puede ajustar la posición de la imagen. Es posible aplicar valores en % o usar left, center, right – top, center, bottom. Por defecto se coloca desde la esquina superior izquierda del elemento.

Con background-repeat se define como se repite la imagen de fondo de un elemento. Puede repetirse sobre el eje horizontal (repeat-x), el eje vertical (repeat-y), ambos ejes (repeat) o no repetirse (no-repeat).

Con background-attachment se puede determinar si una imagen de fondo se desplaza con el resto de la página (scroll) o se mantiene fija (fixed).

Con background-size puede modificarse el tamaño de la imagen de fondo. Puede indicarse un valor en px de ancho y de alto, en %, cover (se ajusta proporcionalmente al ancho del elemento) y contain (se ajusta proporcionalmente al alto del elemento).

5. Etiquetas estructurales en HTML

La maquetación web con estilos CSS está basada en la organización de la página mediante elementos contenedores que dan estructura a dicha página.

Estos elementos contenedores deberán ser las “etiquetas estructurales” que surgieron a partir de HTML5 (header, nav, main, aside, section, article, footer) aunque también pueden usarse etiquetas div tal y como veremos a continuación.

5.1 Etiquetas estructurales de HTML5

A partir de HTML5 surgieron nuevas etiquetas “semánticas” cuyo objetivo principal era dar estructura a los documentos. Estas etiquetas HTML se usan como elementos contenedores que conjuntamente con las hojas de estilo CSS definen sus propiedades.

La etiqueta <header>

Dentro de esta etiqueta (<header>…</header>) debe quedar incluido todo el contenido del encabezado de la página (nombre del sitio, logotipo, imagen de cabecera, …).

Veamos algunos ejemplos de esto:

<header>

…
<img src=”logo.png”>
<h1>Nombre de la página</h1>
…

</header>

La etiqueta <nav>

Un elemento común que se encuentra en todas las páginas web es un espacio de navegación, que estará formado por enlaces a las distintas secciones y páginas del sitio.

A partir de HTML5 aparece  la etiqueta <nav></nav> para este propósito y no es recomendable que exista más de una en la misma página.

Aunque se trata de elementos independientes, es habitual que el <nav> quede anidado o integrado dentro del <header> de la página, pero también puede encontrarse en otra zona de la página.

<nav>

<ul>
<li><a href="seccion1.html">Parte A del sitio</a></li>
<li><a href="seccion2.html">Parte B del sitio</a></li>
<li><a href="seccion3.html">Parte C del sitio</a></li>
<ul>

</nav>

La etiqueta <main>

Dentro de la etiqueta <main> se colocará el contenido principal de la página y se pueden anidar otras etiquetas estructurales para organizar los contenidos.

Esto dependerá del tipo de página y de la información que contenga. Algunas de estas otras etiquetas serían: <section>, <article> o <aside>.

<main>

<section>

<article>
Contenido del artículo 1
</article>

<article>
Contenido del artículo 2
</article>

…

</section>

<aside>
Contenido barra lateral
</aside>

</main>

La etiqueta <footer>

Todas las páginas web deben finalizar su estructura con la etiqueta <footer></footer>, donde se colocará todo el contenido que quiera incluirse en el pie de página.

<footer>

Contenido del pie de página

</footer>

5.2 La estructura básica de una página web en HTML5

A partir de las etiquetas estructurales que acabamos de ver, se debe montar la estructura de la página web.

A continuación se muestra de forma gráfica y esquemática la estructura “tipo” que tendría una página con el estándar anterior y con el estándar HTML5.

En el siguiente enlace puedes ver un video explicativo sobre los cambios en el  etiquetado y la estructura de las páginas del HTML tradicional al estándar actual de HTML5. Enlace directo al video

Para crear contenedores dentro de las etiquetas estructurales será posible la utilización de <div>. Con el uso de los estilos CSS, podemos convertir cualquier <div> en un contenedor con todas las propiedades posibles.

5.3 El modelo de caja

Cualquier elemento incluido en un documento HTML dispone de una estructura tipo caja que se puede modificar usando las propiedades CSS.

Las propiedades más importantes de las cajas o contenedores para la maquetación son su posición y sus dimensiones.

El espacio real que va a ocupar una caja o un contenedor serán la suma de sus dimensiones, sus márgenes y sus bordes, esto es la suma de sus propiedades width + padding + margin + border.

6. La propiedad float en la maquetación web

Las etiquetas estructurales, los elementos <div> y la mayoría de etiquetas HTML son etiquetas de bloque.

En el flujo normal de HTML los elementos de bloque ocupan todo el ancho del contenedor donde se coloquen. Es decir, aunque dos elementos de bloque por tamaño se pudieran colocar una al lado del otro, de forma predeterminada se colocarán una encima de otro. Esto es el flujo normal en el código HTML.

Creación de columnas

Para poder colocar un elemento contenedor junto a otro, a modo de columnas, tendremos que declarar una nueva propiedad CSS: la propiedad float. Desde Dreamweaver, accedemos a ella dentro de la categoría “Cuadro”.

La propiedad float rompe el flujo normal de disposición del contenido en el documento y el elemento que tiene esta propiedad podrá alinearse a izquierda (left) o derecha (right) permitiendo la colocación de los elementos adyacentes teniendo la posibilidad de colocar cajas o elementos contenedores uno al lado de otro, es decir, crear columnas.

En la siguiente imagen de ejemplo, vemos los mismos bloques con distintas opciones de flotación.

6.1 Ejemplo de uso y aplicación de la propiedad float

Paso 1. Uso de float

En este primer ejemplo se muestra una página formada por un elemento contenedor (<div id=”contenedor”>) de 800px de ancho, que tiene anidados 5 contenedores: <header>, <div id=”izquierda”>, <div id=”centro”>, <div id=”derecha”> y <footer>.

Por el momento ninguno de los estilos CSS asociados a los <div> tienen definida la propiedad width ni la propiedad float y puede comprobarse que de forma predeterminada ocupan el 100% del ancho y por tanto no permitirán la colocación de elementos adyacentes.

Paso 2. Uso de float

Para aplicar la propiedad float a un elemento, es necesario que este elemento tenga definida la propiedad width. En este paso, al <div id=”izquierda”> se le ha definido un ancho de 200px y se ha aplicado un “float: left”.

  #izquierda {
      width: 200px;
      float:left; }

Observa cómo se alinea a la izquierda y permite que a su derecha se coloquen el resto de contenedores.

Paso 3. Uso de float

En este tercer paso, se define un ancho de 400 px al <div id=”centro”> y se le aplica la flotación a la izquierda.

  #centro {
      width: 400px;
      float:left; }

Puede verse como a la derecha de ambos elementos fluyen libremente el resto de contenedores.

Paso 4. Uso de float

En este cuarto paso, se define un ancho de 200px al <div id=”derecha”> y también se le aplica la flotación a la izquierda.

  #derecha {
      width: 200px;
      float:left; }

Puede verse como el <footer> fluye entre los huecos que van quedando.

Para que todo vuelva a su flujo normal, será necesario eliminar las opciones de flotación.

Paso 5. Uso de clear

Cuando queramos que todo vuelva otra vez el flujo del contenido normal, necesitamos eliminar la “flotación” con la propiedad clear que también se encuentra en DW dentro de la Categoría cuadro.

Los valores de esta propiedad puedes ser left (elimina la flotación left), right (elimina la flotación right) o both (elimina cualquier flotación).

En este último paso, se eliminan las opciones de flotación al <footer> y como puede verse, todo vuelve a su flujo normal.

  footer {
      clear: both; }

7. Maquetación web con CSS en Dreamweaver

Ya hemos comentado en varias ocasiones que antes de ponernos a realizar la maquetación web de cualquier proyecto debemos tener claramente definida su estructura y la organización de todas las páginas mediante bocetos, mock ups o pruebas visuales más o menos elaboradas que servirán de referencia y de ayuda a la maquetación.

Pasaríamos entonces a dar forma al proyecto de diseño, primero creando la plantilla que servirá de base a las páginas del mismo y a continuación (a partir de la plantilla creada) iremos construyendo y maquetando de forma individual cada una de las páginas del proyecto.

7.1 La plantilla de maquetación de un proyecto web

Cuando se va a iniciar la maquetación de un sitio web, se parte de un proyecto en el que ya están determinadas todas las especificaciones técnicas y de diseño necesarias (colores, tipografías, tamaños, jerarquías,…), junto con los mockups que muestren la apariencia esperada de todas las páginas.

A partir de esa información y de todos los materiales necesarios: textos, imágenes, botones, iconos, gráficos, videos, audios u otros, podemos comenzar el proceso de montaje y maquetación del sitio.

Lo primero que hay que hacer es preparar una plantilla para cada uno de los tipos de páginas que haya en el sitio, teniendo en cuenta que todas tendrán algunos elementos y contenidos comunes. Habrá sitios que solo requieran de una plantilla y en cambio otros, por la variedad y diversidad de los contenidos, pueden requerir de varias plantillas.

La plantilla será la base para la maquetación de las páginas del sitio. Salvando las diferencias, el concepto de plantilla para el diseño web es similar al concepto de página maqueta en el diseño editorial.

Es muy importante hacer todos los ajustes y pruebas pertinentes antes de dar por cerrada la plantilla base que contiene todos los elementos comunes. Una preparación óptima de la plantilla, antes de comenzar a maquetar las diferentes páginas del sitio es determinante para evitar pérdidas de tiempo. Tanto la plantilla base como el resto de páginas del sitio estarán vinculadas con hojas de estilo externas y será posible hacer cambios posteriormente que afecten todas las páginas.

Sobre el documento-plantilla se irán volcando y maquetando los contenidos de cada página, se actualizará el título, se actualizarán los vínculos y enlaces y en definitiva se personalizará todo lo necesario de cada página antes de guardar con el nombre adecuado y así se repite el proceso con todas las páginas del sitio.

7.2 El proceso de maquetación en Dreamweaver

El proceso de maquetación web con estilos CSS está basado en el conjunto “etiqueta estructural HTML” o “etiqueta div” + “regla CSS” dirigida a esa etiqueta y vamos a ver a continuación el proceso de realización utilizando Dreamweaver.

La etiqueta estructural o el <div> y su regla CSS asociada

Recordamos que al usar etiquetas <div>, deberán identificarse con un id o con un class. En ambos casos, el valor será el selector de la regla de estilo que deberá dirigirse a esa etiqueta.

En el caso de usar etiquetas estructurales, no será necesaria ninguna identificación y será la propia etiqueta, el selector de la regla CSS asociada.

Tanto si trabajamos con código directamente o si lo hacemos en Dreamweaver, podemos crear primero las etiquetas estructurales y/o las etiquetas <div> correspondientes y después crear las reglas de estilo CSS o viceversa.

Paso 1. Creación de la parte HTML: las etiquetas estructurales y los <div>

Desde la vista de código se puede escribir directamente la etiqueta donde quiera colocarse.

Desde Dreamweaver es posible insertar directamente etiquetas <div> de forma gráfica. Solo hay que colocar el cursor donde se quiera insertar el elemento y se puede crear de diferentes formas: Menú Insertar, botón del panel Insertar u otras.

Los paneles cambian ligeramente según la versión:

Panel insertar CS6

Panel insertar CC

Con algunas variaciones según la versión que se esté utilizando de Dreamweaver aparecerá un cuadro de en el que debemos indicar el "id" y/o la "clase" que queremos aplicar al elemento aunque desde este mismo cuadro también es posible iniciar la creación de su regla de estilo CSS asociada.

De momento solo se habrá creado un contenedor vacío, que de forma predeterminada en Dreamweaver incluye el siguiente texto: "Colocar aquí el contenido para "class "..." o id "...", para que se identifique el contenido de esa etiqueta.

Paso 2. Creación de la regla de estilo CSS

Con algunas diferencias según la versión utilizada de Dreamweaver, al acceder al panel Estilos CSS con un elemento seleccionado para crear un Nuevo Estilo, automáticamente se genera un estilo con el selector adecuado. Siempre habrá que verificar o definir el nombre y el tipo de selector correcto.

A continuación habrá que aplicar las propiedades a dicha regla y como ya se ha visto, según la versión de Dreamweaver, los paneles pueden cambiar ligeramente.

Hay que tener claro que, cada uno de los campos que se completan desde este panel CSS se traduce en el código CSS de una “declaración” de la regla de estilo que estamos creando. Si cuando insertamos un <div> en DW, tenemos su regla de estilo ya creada, podemos vincularlo con su regla CSS desde la ventana de “Insertar etiqueta Div”.

Hay que tener presente que desde el panel de “Nueva regla CSS” podemos definir que la regla se cree en el mismo documento, dentro de la etiqueta <style> en el <head>,  o crear una nueva hoja de estilos externa.

8. La especificación Flex Box

La especificación Flex box de CSS3 es un modo de diseño que facilita la colocación de elementos en una página cuando necesitamos que el diseño se adapte a diferentes dispositivos y tamaños de pantalla. En la mayoría de los casos, "flex-box" facilita el trabajo de organización de elementos ya que no será necesario utilizar la propiedad float y es más sencillo el ajuste de los márgenes del contenedor flexible y de sus elementos.

En el modelo "flex-box", los items "hijos" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adaptarse al espacio visible. Posicionar los items "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los items es independiente del orden que estos tengan en el código fuente.

Declaraciones CSS básicas para el contenedor flexible:

• Para definir un contendor flexible:
  display: flex / inline-flex;
• Para determinar la dirección de los items:
  flex-direction: row | row-reverse | column | column-reverse;
•  Para determinar cómo se comportan los items en cada fila:
  flex-wrap: nowrap | wrap | wrap-reverse;
• Para determinar cómo se justifican horizontalmente los items en cada fila:
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
• Para determinar cómo se adaptan verticalmente los items en el contenedor:
  align-items: stretch | flex-start | flex-end | center | baseline;
• Para determinar cómo se justifican verticalmente los items en el contenedor:
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Declaraciones CSS básicas para los items:

• Para definir el orden de colocación del item:
  order: <nº de orden>;
• Para definir la capacidad de un item a hacerse flexible y que crezca si es necesario. Si un item1 tiene un valor 1 y un item2 tiene un valor 2, el item2 se ajustará al doble del tamaño del item1:
  flex-grow: <nº entero>;
• Para definir una alineación vertical específica para un item:
  align-self: auto | flex-start | flex-end | center | baseline | stretch;

9. La especificación Grid CSS

La especificación CSS Grid facilita la organización y maquetación de una página web basándose en el concepto rejilla que permite una fácil división de la página en bloques que pueden definirse su tamaño, posición y demás características. Mediante Grid Layout es posible establecer una gran variedad de diseños mediante la alineación de elementos en columnas y filas.

10. Fundamentos del Responsive Web Design

Responsive Web Design se trata de una metodología o patrón de diseño que hace que los elementos de una página web se reestructuren según el tamaño y las condiciones del dispositivo. Para que esto funcione correctamente existen unos fundamentos básicos que deben conocerse para poder aplicar esta metodología de trabajo a nuestros proyectos.

10.1 Viewport. El espacio visible del navegador

El “viewport” es un valor que determina la zona visible de la página web en el navegador del dispositivo. El viewport tiene básicamente su aplicación para dispositivos móviles. El comportamiento predeterminado de los navegadores móviles es escalar el tamaño de la página para que se vea completa en la pantalla del terminal.

HTML5 introdujo este método para que los diseñadores tuvieran control sobre el área de visualización en dispositivos móviles, a través de la etiqueta <meta>, que debe incluir los siguientes elementos y debe incluirse en todas las páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Este “meta” aporta instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página según el dispositivo.

• La propiedad width controla el tamaño del ancho del viewport. Puede ser en pixeles, width=600, o con un valor especial width=device-width, que le indica al navegador que ajuste el width de la página al ancho de la pantalla del dispositivo, que varía según el dispositivo.
• Existen los mismos valores correspondientes al height y device-height, los cuales pueden ser útiles para páginas con elementos que cambian de tamaño o posición basadas en la altura del viewport.
• initial-scale=1.0 fija el nivel de zoom inicial cuando se carga la página por primera vez.

Existes otras propiedades como maximum-scale, minimum-scale, y user-scalable que controlan la forma en cómo se permite a los usuarios aumentar o disminuir el zoom en la página.

Podemos ver algunos ejemplos donde se pone de manifiesto la importancia del viewport. Los 2 primeros deberían accederse desde un dispositivo móvil.

• Con viewport: Enlace
• Sin viewport: Enlace
• En este otro link, podemos ver el ejemplo de una página sin RWD:  https://960.gs/

10.2 Las media queries

Son un método para la aplicación de estilos CSS, pero sólo cuando se cumple una condición que esté definida. Es el equivalente a un “if” (condicional) en un lenguaje de programación.

Se colocan al final de la hoja de estilos y se pueden usar diferentes media queries para establecer unas opciones concretas a distintas condiciones.

La sintaxis básica es la siguiente:

  @media (min-width: 360px)
    body {
      background: green; }

Si no se cumple la condición, el  background sería el que estuviera declarado anteriormente.

@media (condición) {
Reglas de estilo CSS que se van a ejecutar cuando se cumple la
condición }

Es posible sumar condiciones dentro de un media query con “and”. Si queremos que nuestro diseño cambie por debajo de 360px y por encima de 780px, este sería el código.

@media (min-width: 360px) and (min-width: 768px)

A cada uno de los puntos donde se ha definido que el diseño cambie se le denomina breakpoints.

Cada diseñador puede definir sus propios breakpoints. Incluso los frameworks más extendidos (bootstrap, foundation u otros) no tienen los mismos breakpoints.

El tamaño base más común para un smartphones es 360px.

Diferencias entre las medidas relativas

• Valor en %: Se considera 100% el valor de referencia definido .
• El valor rem: 1rem es igual a la medida del tamaño base del texto que se ha declarado en el html. Si no se ha definido de forma expresa, será el predeterminado (16px). En el caso de definir cualquier valor con rem, se modificará automáticamente al variar el tamaño de referencia.
• El valor em: La diferencia entre rem y em es que em es una medida de referencia relativa al padre. Es un valor jerárquico. Podemos ver claramente la diferencia entre ambas medidas si lo aplicamos sobre los elementos de varias listas anidadas (ul li)

Imágenes realmente adaptables y responsive

• srcset: define un conjunto de imágenes y permite al navegador elegir la que debe usar en cada caso. Para cada situación, debemos escribir lo siguiente:

nombre_imagen  “espacio” ancho de la imagen en pixeles, usando la unidad w y separado con una “,” la siguiente imagen.

srcset="imagen-150.png 150w, imagen -300.png 300w, imagen.png 500w"

• sizes: define unas condiciones de pantalla e indica la imagen a elegir cuando se cumple esa condición. Una condición sería “max-width:480px” que indica: "cuando el ancho del viewport es de 480 píxeles o menos". Para cada situación, debemos escribir lo siguiente:

sizes="(max-width: 320px) 150px, (max-width: 720px) 300px, 500px"

• El ancho de la última ranura no tiene condición. Es la opción por defecto cuando ninguna de las condiciones anteriores se cumplen.

Para profundizar más, puedes visitar el siguiente enlace. Enlace