Diseño Web Adaptativo

La aparición de formatos móviles para visualizar páginas web trajo consigo una serie de tareas al programador con las inquietudes propias aparejadas al SEO. Esto es, cómo hago que mi web se visualice bien en un smartphone y a google le parezca bien. En principio, los dominios .mobi o los subdominions tipo mobi.miweb.es parece que eran la solución y de esta forma muchos diseñadores se pusieron a la tarea de hacer una nueva web con los estándar de las tecnologías de smartphone. Sin embargo, como bien recomienda google, la idea de tener dos o tres proyectos para una misma web puede acarrear mas trabajo del necesario. Es por ello por lo que nos vamos a centrar en ofrecer una misma url con el mismo contenido pero adaptado a la resolución del dispositivo que la muestra. Esto es el Diseño Web Adaptativo

Tres etapas importantes. Media query y otros ajustes

1º Ajustamos la página a la pantalla

Si visualizamos el código fuente de este blog tenemos que en la cabecera hay esto:

Esta etiqueta la tenemos en el head y nos dice que la anchura del contenido de la página se debe ajustar a la anchura del dispositivo. Este es el primer paso para hacer una página adaptada a todo dispositivo.

Tarea: Hacer una página sencilla que incluya un texto y una foto o dos. Visualizarla con el ordenador y con el móvil. Después, añadir la etiqueta anterior y hacer la prueba de nuevo.

2º Media query El standard W3C tiene una serie de reglas ( tipo media queries o consultas del medio ) . Con las sentencias de media queries de la especificación CSS3, vamos a obtener información muy valiosa para determinar las características físicas del dispositivo que está visitando nuestra web y de esta forma, cargar la hoja de estilos más apropiada al dispositivo. Veamos un ejemplo:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 680px)" href="estilos-movil.css" />

En este caso, se carga una hoja de estilos ( estilso-movil.css ) si el dispositivo que visita la web tiene una anchura de pixel máxima de 680 px. Podemos añadir otra media query para que se muestre otra hoja de estilos en caso de que la resolución del dispositivo sea superior a 680 px. Las media query tienen mas aplicaciones de las descritas aquí pero nos vamos a centrar en aplicarlas para mostrar una css u otra, según la resolución del dispositivo. ¿ Qué conseguimos con ello ?. Como los atributos del contenido web está sujeto al estilo del cual dependen, un H1 lo podemos mostrar con un tamaño en la pantalla de ordenador y con otro en la pantalla del móvil. Por otro lado, si quiero que no aparezca cierto texto cuando es visualizado en el móvil, puedo aplicar un atributo hidden en la hoja de estilo. Lo veremos poco a poco.

3º CSS porcentuales

La tercera parte fundamental es aplicar los tamaños a los estilos de forma porcentual, por ejemplo, si tenemos un div que queremos en una página visualizada en ordenador ocupa 700 px, al ser visualizada en un móvil, el div saldrá de pantalla y tendremos que desplazar con el dedo la imagen para leer el texto desplazado. Si ahora cambiamos el estilo de ese div desde un valor fijo a uno porcentual, todo su contenido lo veremos en pantalla. Veremos algún ejemplo con una imagen

En este caso vamos a crear el estilo de articulo con las propiedades de la imagen al 50% con un máximo de 350 px y mínimo de 150 px.

article img {
float: right;
width: 50%;
min-width: 150px;
max-width: 350px;
}

Actividad 1 : Copiar el código fuente siguiente y guardarlo en un archivo abierto con Kimpozer. Guardarlo en una carpeta cualquiera y dentro de ella crear una carpeta que se llame imagenes. En esa carpeta hay que alojar la imagen que quieras con el nombre la-imagen.jpg. Prueba a abrirlo con un navegador, ampliando y reduciendo la página.

<html>
<head>
<meta charset=»utf-8″>
<title> width y porcentaje</title>
<meta name=»viewport» content=»width=device-width»>
<style>
article img {
float: right;
width: 50%;
min-width: 150px;
max-width: 350px;
}
</style>
</head>
<body>
<div>
<h1>width y porcentaje</h1>
<p> El porcentaje es muy útil para dar medidas relativas a los 
bloques (div) , imágenes, etc. En este caso ajustamos la imagen al 50%
con un mínimo de 150 px y un máximo de 350px. Ahora reduce la página y
verás el cambio.</p>
<p> <article><img src=»imagenes/la-imagen.jpg» alt=»Una image»></article></p>
</div>
</body>
</html>

2º Tarea. Crear un bloque dentro de otro.

Cuando necesitamos un div dentro de otro, existe una forma muy sencilla para que uno dependa del otro, considerando que lo hacen hasta que no se cierra el primero, quiero decir que si un div no se ha cerrado, el 2º va a depender del anterior. Veremos un ejemplo. para ello vamos a usar una imagen que tenéis que descargar. Vale cualquiera. Copiar el texto y pegarlo en código fuente.

<html>
<head>
<meta charset=»utf-8″>
<title>Capa sobre Capa</title>
<meta name=»viewport» content=»width=device-width»>
<style>
#contenedor {
background-color: #209900;
width: 60%;
max-width: 400px;
}
#contenido {
background-color: #FF9810;
height: 50px;
margin: auto; /* esto es para centrar pero hay que indicar un ancho obligatoriamente */
width: 90%;
}
.foto { width: 98%;border:4px groove #008877;
}
</style>
</head>
<body>
<div id=»contenedor»>Esta es la Capa contenedor<img class=»foto» alt=»g»
src=»imagenes/una-foto.jpg»><br>
<div id=»contenido»>Esta 2º  capa depende de la capa contenedor</div>
</div>
</body>
</html>

3º Tarea. Vamos ha hacer una pequeña página aplicando conceptos que vamos a ir desarrollando. Lo primero es crear una página con dos o tres bloques de texto junto a un bloque de menú con varios enlaces. Copia el siguiente código. Abre el Kompozer o el editor web que uses y pega en código fuente lo siguiente

<html>

<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1252″>
<title>Pagina nueva 1</title>

<style TYPE=»text/css»>
.container {
position: relative;
border: 2px solid green;
}
nav.elem {
color: red;
border: 4px solid red;
}
section {
/* position is static by default */
margin-left: 220px;
background-color: #00ff00;
border: 3px solid blue;
}
body {
margin-bottom: 100px;
}
@media screen and (min-width:600px) {
nav.elem {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav.elem li {
display: inline;
margin-top: 0%;
width: 90%;
}
section {
margin-left: 0%;

}
</style>
</head>

<body>

<div class=»container»>
<nav class=»elem elem-red»>
<ul>
<li>
<a href=»una.html»>Inicio</a>
</li>
<li>
<a href=»dos.html»>Primer link</a></li>
<li>
<a href=»tres.html»>Segundo link</a>
</li>
<li>
<a href=»cuatro.html»>3º Link</a>
</li>
<li>
<a href=»contacto.html»>Contacto</a>
</li>
<li>
<a href=»informacion.html»>Información</a></li>
</ul>
</nav>
<section class=»elem elem-green»>
<p>
Este es el primer bloque de la página. Si ya la estas viendo en el
navegador, entra en codigo fuente y cambia los atributos para ver como
repercute.
</p>
</section>
<section class=»elem elem-green»>
<p>
Mira Este es un 2º bloque con la etiqueta section.
</p>
<p>
Puedes incorporar alguna foto. Ahora, reduce la ventana y mira como cambia
el aspecto</p>
</section>

</div>

</body>

</html>

Una vez terminado, realiza los cambios que consideres oportunos en los estilos para cambiar el aspecto de la página

4º Tarea. Mover texto según nos interese

En esta ocasión vamos a mover texto dentro de la página cuando queremos priorizar otro. Si en una versión PC tenemos un texto en la cabecera porque tenemos espacio para ello, puede ser que en la versión móvil, que «vamos más al grano» queramos desplazarla a otra parte de la página, por ejemplo el pie de página.

Para ello vamos a usar de nuevo el media query con las siguientes regla

@media screen and (max-width:599px) {

.entrada {

position:absolute;

bottom:1px; width:100%;

text-align:right;

background-color: blue;

}

En este caso, si tenemos que la resolución baja de 599, el texto con clase entrada, pasara a pie de página ( position: absolute; bottom: 1px; )

5º Tarea. Menú de navegación usando media queries

No es lo mismo tener un menú para pantalla de ordenador que para el móvil. En esta página veremos cómo se puede modificar para que el menú se adapte a la resolución de pantalla: