Tutorial para el diseño de Webs Adaptativas
Tutorial para el diseño de Webs Adaptativas
Introducción
Estamos inmersos en lo que se ha venido en llamar "la Sociedad de la Información, el Conocimiento y la Comunicación", en este sentido, toma relevancia el acceso a la información desde cualquier medio. El empleo de medios móviles como las Tabletas Digitales y Teléfono Inteligentes ha proliferado en los últimos años, siendo la mayor parte del acceso a la información a través de internet a través de el empleo de navegadores incorporados en estos dispositivos móviles.
La función principal de un navegador es visualizar las páginas de un sitio. Esto hace necesario que los portales o sitios webs estén diseñados de tal modo que tanto la presentación de la información como la navegación a través de exactamente la misma sea lo más cómoda posible, rápida y con visualización aceptable.
Como los diferentes dispositivos para el acceso a la información disponen de pantallas de distinto tamaño, se presenta un hándicap en el momento de visualizar las páginas webs y conseguir una visualización admisible.
Para resolver este inconveniente existen múltiples soluciones: web amoldable, web móvil, aplicación móvil y web app. Aquí nos vamos a centrar en el diseño de una web adaptable.
El objetivo de esta guía didáctica es facilitar el diseño de webs adaptativas a los alumnos de informática y diseñadores o bien autores de páginas web.
Una web acomodable es aquella donde las páginas webs se adaptan al tamaño de la ventana del navegador o al medio en el que se muestran (móviles inteligentes, tablets, smart tv, ordenador de sobremesa, portátil, etc. para una correcta visualización.
Nuestra web deberá amoldarse a las
distintas resoluciones de los dispositivos donde se van a enseñar.
Fijándonos sólo en el ancho de la pantalla, podemos resumir las resoluciones en tres grandes grupos:
- Inferiores a 480px
- Entre 481px y 768px
- Desde 769px hasta un máximo de 1232px
Utilizando apropiadamente los recursos que nos ofrecen
HTML5 y CSS3 podemos diseñar webs más o bien menos amoldables.
Para conseguir webs 100 por ciento adaptables tendríamos que apoyarnos además, en lenguajes para ambientes webs como JavaScript, php, jsp, etc. Estos lenguajes disponen de instrucciones para detectar de forma más precisa la resolución de los dispositivos y proceder en consecuencia.
Recursos HTML5
El recurso más importante que nos ofrece HTML5 para nuestro diseño adaptable es:
La etiqueta meta viewport
Esta etiqueta controla el viewport de los dispositivos móviles y no afecta a los ordenadores de sobremesa.
El viewport o ventana gráfica es una región de la pantalla usada para enseñar una parte de la imagen total que se muestra.
< diseño web en montgat >
Fuente: MSDN Magazine Junio 2012
Cuando accedemos a una página web
no adaptable desde un móvil o bien tableta, el navegador intenta visualizar toda la página web. Si nuestra página web la hemos fijado a un ancho por servirnos de un ejemplo de 1000px, el navegador tratará de visualizar los 1000px en el ancho del móvil (por poner un ejemplo un móvil con ancho de 480px). En consecuencia, todas y cada una de las partes de la página se verán muy pequeñas.
Ejemplo de visualización de una web no adaptativa en un móvil de resolución 480px x 800px
Para ver bien la página nos vemos obligados a realizar un zoom manual, pero ya la página se saldría de las dimensiones de la pantalla del dispositivo y tendríamos que hacer desplazamientos de la página para ver sus partes.
Ejemplo de Visualización de una web no adaptativa en un móvil de resolución 480px x 800px en el que se ha efectuado un zoom manual para poder visualizar la página con más nitidez
Para evitar tener que hacer un zoom manual en nuestro dispositivo móvil, usamos la etiqueta viewport.
La etiqueta viewport permite apuntarle al navegador de los dispositivos las dimensiones de la página web, utilizando su propiedad content, mediante una series de atributos y valores.
En la siguiente tabla se muestran los atributos y posibles valores de dicha propiedad content:
Atributo
Valores
Descripción
width
Pixeles o constante
device-width
Define el ancho del viewport
height
Pixeles o bien incesante device-height
Define el alto del viewport
initial-scale
0< scale < 1
Scale=1 representa no escala
Define la escala inicial del viewport
minimum-scale
0< scale < 1
Scale=1 representa no escala
Define la escala mínima del viewport
maximum-scale
0< scale < 1
Scale=1 representa no escala
Define la escala máxima del viewport
user-scale
“yes” / “no”
Define los permisos a fin de que el usuario pueda escalar el viewport
La forma frecuente de configurar la etiqueta meta viewport es :
Ejemplo de página donde hemos empleado dicha configuración
Si dispones de un móvil con conexión de datos, puedes revisarlo en:
El resultado es exactamente el mismo que el precedente mas el zoom efectuado es automático, lo ha efectuado el propio navegador.
Al añadir esta configuración a nuestras páginas webs, no será preciso efectuar ningún zoom al visualizarlas en dispositivos móviles, mas no podemos decir que nuestra página web es acomodable pues como aparece en los ejemplos, algunos contenidos se salen de la pantalla o no se posicionan apropiadamente.
Para una buena adaptación deberemos recurrir a los recursos que nos ofrece CSS3 y utilizarlos en combinación con la etiqueta viewport.
Para saber más
Recursos CSS3
CSS3 nos ofrece las
media queries o bien consulta de medios
como recurso primordial para desarrollar diseños adaptables.
Utilizando CSS3 Query @media
La media queries consiste en consultas que hará el navegador cada vez que visualicemos o presentemos nuestra web en un determinado dispositivo y buscará coincidencia en las condiciones que hayamos establecidos en nuestra hoja de estilos mediante la regla @media. Tiene respaldo en la mayoría de navegadores para móviles.
Por ejemplo, las definiciones detro del bloque de la regla @media screen ... sólo serían interpretadas por dispositivos conectados a monitores de ordenador y los de la regla @media projection ... sólo se aplicaría a proyectores.
En la siguiente tabla aparecen los diferentes medios que podemos especificar:
Medios
all
aural
braille
embossed
handheld
print
projection
screen
tty
tv
En nuestro caso, como tratamos de hacer nuestra web acomodable, utilizamos la regla @media screen
Ejemplo de codificación
Propiedades y atributos
Otros recursos que nos ofrece CSS3 para hacer nuestra web adaptable consisten en la utilización de las propiedades de CSS3 con atributos y valores como se explica a continuación:
Utilizar medidas relativas para los contenedores
Ejemplo
width: 80 por ciento ;
margin: 0.5 por ciento ;
padding: 1 por ciento ;
Usar Contenedores globales sin float
Hacer las imágenes y vídeos adaptables
Ejemplo
contenedor_img_adaptable img
width: cien por cien !important;
height: auto
Hacer las Fuentes adaptables
Las unidades relativas utilizada para fuentes suelen ser el
em(16px)
, el
remy el
por ciento ,pero la más usada es el
rem.
El
remsignifica
root em, que quiere decir que el cáculo hace refencia a la raíz de la página (elemento
<hrml>). Al proceder de esta forma, evitamos los inconvenientes de la cascada en el momento de calcular los tamaños relativos de los caracteres.
Para ello, indicamos un valor de referencia para el factor
<html>y aplicamos los tamaños relativos en
rema todos y cada uno de los elementos incluidos.
Ejemplo
html
font-size: 1em;
article
font-size: 0.8 rem;
¡Cuidado con IE!
Si nos encontramos con problemas en el navegador IE a la hora de cargar las reglas media queries debemos usar el próximo script en el head de nuestra página:
Esta adaptación se puede hacer de forma que aparezca un único botón que al pulsar despliegue el menú o colocar las opciones una bajo otra tal y como si se tratase de un menú vertical cuando se visualice en un dispositivo móvil.
Ejemplo de menús adaptables
Caso práctico: diseño y codificación
Para poner en práctica lo visto previamente vamos a diseñar una web adaptativa básica.
Si dispones de un móvil o tablet puedes visualizar la página definitiava en
El proceso más fácil, en el diseño de una web responsive, consiste en meditar en una estructura inicial para la resolución de pantalla más pequeña, basada en un contenedor general que aloja :
- la cabecera en la parte superior,
- un navegador horizontal o vertical según el dispositivo de visualización,
- una zona central para la presentación de contenidos y
- un pie en la parte inferior.
La zona central, para la presentación de contenidos, se organiza en columnas, esto va a permitir:
- Colocar las columnas una debajo de otra sin flotación para visualizar en un móvil.
- Colocar sólo dos columnas flotando a la izquierda y debajo la tercera columna, si se trata de visualizar la página en una tablet.
- Y por último, colocar todas y cada una de las columnas flotando a la izquierda, si se visualiza en un ordenador de sobremesa.
Esta es la base, desde aquí en dependencia de la estructura de la web, podemos crear más o bien menos columnas, ajustar sus tamaños y efectuar todas la consultas de @media para que nuestra web se adapte a la enorme pluralidad de dispositivos existentes.
El código html utilizado en los ejemplos para esta estructura es:
La hoja de estilos
responsive.css,
se ha desarrollado empezando con los estilos para móvil (me he guiado por las recomendaciones de los profesionales que se dedican a esto). Aprovechando las propiedades de estilos en cascada, se han ido adaptando las columnas, el menú, etc, para las distintas resoluciones.
La apariencia en el móvil es como se muestra en la imagen
El código CSS3 es el siguiente:
Ahora diseñamos la estructura para una Tablet con vista vertical
y los estilos para la tablet son:
A continuación, diseñamos la estructura para un computador de sobremesa
y por último, los estilos:
/* Final de la hoja de estilos */
Podemos emular el resultado para distintas resoluciones en la siguiente dirección
, poniendo en la url de prueba:
Aunque lo mejor es probarlo de forma directa en el dispositivo móvil.
Actividades: Web adaptable
(responsive design)
- Desde un ordenador de sobremesa accede a la web adaptable del ejemplo y redimensiona la ventana a distintos tamaños para observar los cambios que se generan en la página web.
- Teniendo en cuenta el código del apartado
Diseño y codificación de los ejemplos :
- Localiza en el código html de la página index.html la etiqueta meta viwport y fijate en los valores de los atributos.
- Localiza en el código de la hoja de estilos las medias query para los diferentes dispositivos y anótalos.
- A partir de los contenidos desarrollados aquí y visitiando otras webs que trantan sobre el diseño de web adaptativa, crea una infografía con el proceo para crear una web adaptativa.
- Crea una nueva web o bien marketing para clinicas de estetica has creado desde el comienzo de curso a fin de que sea adaptable (Hay que amoldar todas las páginas de la página web):
- Visualiza tu web en diferentes navegadores y dispositivos comprobando que se presenta correctamente. Si no se ve apropiadamente efectúa los cambios precisos.
- Realiza cambios en los valores que aparecen en la etiqueta viwport y en las medias query y comprueba el resultado.
- Localiza en el código html de la página index.html la etiqueta meta viwport y fijate en los valores de merchandising online .
- Localiza en el código de la hoja de estilos las medias query para los distintos dispositivos y anótalos.
- Visualiza tu web en distintos navegadores y dispositivos comprobando que se presenta correctamente. Si no se ve adecuadamente realiza los cambios necesarios.
- Realiza cambios en los valores que aparecen en la diseño de paginas web quilmes y en las medias query y verifica el resultado.
