Clase 9 | DISEÑO ADAPTABLE | FUENTES PARA WEB

En la Teórica vimos:

 

 


Introducción Diseño Adaptable – Responsive web Design


El uso de dispositivos móviles para navegar en la web está creciendo constantemente. A menudo, la mayoría de los dispositivos están restringidos por el tamaño de visualización y requieren de un enfoque diferente del modo en que se muestra la disposición del contenido en la pantalla.

Existe una cantidad de diferentes tamaños de pantalla en los teléfonos, tablets, escritorios, consolas de juegos, TV , etc. Los tamaños de pantalla están siempre cambiando, de modo que es importante que el sitio web  se pueda adaptar a cualquier tamaño de pantalla.

 

El diseño web adaptable, originalmente definido por Ethan Marcotte en A List Apart, responde a las necesidades de los usuarios y los dispositivos que estén usando. Los cambios de diseño según el tamaño y las capacidades del dispositivo.  Por ejemplo, en un teléfono los usuarios deberían ver el contenido que se muestra en una única columna y en una tablet puede mostrar el mismo contenido en dos columnas.

Toda web tiene que estar maquetada siguiendo los principios del responsive design. Un diseño adaptable se basa en cambiar la apariencia de la web (tanto el contenido como su distribución) en función del dispositivo desde el cual se accede.
No se debe confundir con tener una versión de la página para cada dispositivo, sino que con la misma maquetación HTML y con el mismo código CSS asociado, el diseño varía en función del dispositivo. Y es aquí donde entran las media queries.

El concepto no es 100% nuevo de CSS3, sino que tiene su punto de partida en los Media Types.

 

¿Qué es un media type?

Los media types permiten indicar una serie de estilos que se aplicarán según el tipo del medio.

Los media types más típicos son:

  • all: para todo (valor por defecto).
  • print: en la vista previa de impresión y a la hora de imprimir.
  • screen: para las pantallas de ordenador.
  • tv: para televisores.

Su uso más habitual se limitaba a “all” y “print”.

 

¿Qué es un media Query?

Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type con una serie de expresiones relacionadas con las características del dispositivo desde el cual se accede a la web. Las media queries dan como resultado verdadero o falso. Si el resultado es verdadero, se leen las reglas CSS de su interior, si es falso no.

Ejemplo:

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

}

Este sencillo ejemplo tiene una media query que significa lo siguiente:
Cuando el ancho de la pantalla tenga un ancho menor a 768px se lee el código encerrado dentro de las llaves que abren y cierran la media querie.

Ej de css:

body { background: green; }
@media screen and (max-width: 768px) {

body { background: red; }

}

Hará que el fondo de la web sea verde, pero cuando la pantalla sea menor a 768px el fondo será rojo.


UI y Responsive Design >>

ui

 

  • Adjuntamos un ejemplo con alguno de los contenidos vistos.

  • Ejemplo

 

LINKS ÚTILES