¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. HTML5 y CSS3
  3. El Responsive Web Design
Extrait - HTML5 y CSS3 Domine los estándares de creación de sitios web (2ª edición)
Extractos del libro
HTML5 y CSS3 Domine los estándares de creación de sitios web (2ª edición)
1 opinión
Volver a la página de compra del libro

El Responsive Web Design

El desarrollo responsivo

Actualmente, los diseñadores de sitios web deben generar sitios web que sean perfectamente visibles y legibles, sea cual sea el soporte de consulta: pantalla de ordenador, tableta o smartphone.

La creación de sitios web que se adapten automáticamente según el soporte recibe el nombre de Responsive Web Design o RWD. El RWD se basa principalmente en el módulo Media Queries, que está en Recommendation desde el 19 de junio de 2012: https://www.w3.org/TR/css3-mediaqueries/. Las Media Queries, o consultas de recursos multimedia en español, permiten crear un formato y una composición específicos según la pantalla de difusión.

Las consultas de recursos multimedia

1. Los criterios

Las consultas de recursos multimedia permiten apuntar de manera concreta a los diferentes tipos de pantallas de difusión, siguiendo criterios bien concretos.

A continuación se muestran los criterios que vamos a poder utilizar en las consultas de recursos multimedia:

  • La longitud de visualización: width. Podemos probar la longitud de la zona de visualización del navegador. Ejemplo: width: 780px.

  • La altura de visualización: height. Podemos probar la altura de la zona de visualización del navegador.

  • La longitud física: device-width. Podemos probar la longitud física de la pantalla de difusión.

  • La altura física: device-height. Podemos probar la altura física de la pantalla de difusión.

  • La orientación de la pantalla: orientation. Ejemplo: orientation: portraitu orientation: landscape. Muy práctico para comprobar si el usuario utiliza su aparato vertical (portrait) u horizontalmente (landscape).

Tenemos acceso a otros criterios menos habituales:

  • El ratio: aspect-ratio. Para probar el valor del ratio longitud/altura. Ejemplo: aspect-ratio: 16/9.

  • El ratio físico: device-aspect-ratio. Para probar el valor del ratio físico longitud/altura de la pantalla.

  • El color: color. Podemos probar si el soporte de difusión utiliza el color, que es el valor por defecto, en negro y blanco o en escala de grises. Ejemplo: min-color:...

El tamaño de las pantallas

Las pantallas de las tabletas y de los smartphones tienen resoluciones muy diferentes según los constructores.

Para determinar las resoluciones de las pantallas, en el elemento <head> podemos utilizar el elemento <meta> con el atributo viewport. Para el atributo content, podemos utilizar el valor device-width, que determina la longitud física de la pantalla.

Por lo tanto, tendremos esta sintaxis:

<meta name="viewport" content="width=device-width" /> 

De esta manera, la visualización se adapta a cada superficie de visualización de cada navegador.

Un ejemplo de composición responsiva

1. El sitio web inicial

A continuación se muestra el sitio web que vamos a realizar. En un primer momento, no estrará en RWD.

He aquí el código de la página HTML:

<!DOCTYPE HTML>  
<html lang="es">  
<head>  
<title>Mi página de inicio</title>  
<meta charset="UTF-8" />  
<link rel="stylesheet" href="estilos.css" />  
</head>  
<body>  
<div id="contenedor">  
   <header id="alto">  
       <h1>Mi sitio web</h1>  
       <h2>El eslogan de mi sitio web </h2>  
   </header>  
   <nav id="navegacion">  
       <p><a href="#">Enlace 1</a> | <a href="#">Enlace 2</a> |  
<a href="#">Enlace 3</a> | <a href="#">Enlace 4</a> |   
<a href="#">Enlace 5</a> | <a href="#">Enlace 6</a></p>  
   </nav>  
   <section id="contenido">  
       <articulo>  
           <h1>Mi primer artículo</h1>  
           <p>Donec ullamcorper...</p>   
           <p>Nullam quis risus...</p>  
       </articulo>  
       <articulo>  
           <h1>Mi segundo artículo</h1>  
           <p>Cras justo odio...</p>   
           <p>Donec id elit non...</p>  
       </articulo>  
       <articulo>  
   ...