Source: http://cursos.veteporlasombra.com/diseno-web-adaptativo
Timestamp: 2019-05-22 11:16:27+00:00

Document:
Diseño web adaptativo | Cursos veteporlasombra
Resoluciones de los dispositivos
Trucos para maquetar con media queries
Con la utilización masiva de distintos dispositivos (ordenadores, tabletas, teléfonos móviles) surge la necesidad de que las páginas web se vean adecuadamente en cada uno de ellos.
Existen varias opciones (fuente http://www.lukew.com/ff/entry.asp?1509):
Consiste en generar un sólo sitio web (un solo contenido) pero con un diseño adaptado a la visualización y manejo en cada dispositivo (varias hojas de estilo). Es el Responsive Design o diseño adaptativo.
Cada dispositivo tiene una resolución de pantalla, y por consiguiente del navegador. Mediante una mezcla de regiones e imágenes adaptables y el uso de los media queries (permiten detectar en las CSS la resolución del navegador en cada momento), se consigue que el diseño vaya cambiando según sea la resolución y orientación del dispositivo.
La detección del dispositivo se hace normalmente desde el cliente mediante lo media queries.
Ejemplos: http://mediaqueri.es/
Se trata de generar un sitio web completo y distinto para cada uno de los dispositivos en que se van a visionar las páginas web. Esto supone más trabajo, ya que habrá que crear varios sitios completamente distintos.
La ventaja es que cada sitio estará mejor adaptado al manejo que se hace desde cada dispositivo.
La detección del dispositivo puede hacerse normalmente desde el servidor. En función del dispositivo desde el que accedamos se nos brindará un sitio u otro.
RESS (Responsive Design + Server Side Components) sería una mezcla entre las dos soluciones anteriores.
No se trata de construir dos sitios completos totalmente distintos, sino sólo aquellas partes cuyo funcionamiento es distinto para cada dispositivo.
Por ejemplo, imaginemos que en los ordenadores de escritorio queremos que el menú se vea en la parte superior, mientras en los móviles es mejor que aparezca abajo:
El servidor detectará el dispositivo desde el que se accede (escrotorio o móvil), y cargará los componentes que considere necesarios. El resto de componentes serán comunes y su diseño se adaptará como en el Responsive Design.
Las hojas de estilo CSS2 pueden especificar una presentación distinta en función del dispositivo: bien sea pantalla, papel, reconocimiento de voz , dispositivo braile, etc.
Algunas propiedades sólo tienen sentido para ciertos dispositivos (por ejemplo page-break-before, que hará saltos de página cuando imprimamos), pero otras pueden ser comunes pero con distinto aspecto. Por ejemplo, quizá queramos tamaños distintos de letra (font-size) en papel que en pantalla.
Lugares en los que especificar los media types
Hay dos lugares donde especificar los media types, para cargar las hojas estilos en función del tipo de medio:
Utilizaremos las reglas @media o @import.
Con @import podemos cargar otra hoja externa. Por ejemplo:
@import url("hojaEstilos.css") screen;
Con @media, podemos especificar, en la misma hoja de estilos, varias reglas para un tipo de medio específico. Por ejemplo:
@media print {/* estilos para imprimir */}
@media screen,print{/* estilos para pantalla y para imprimir */}
En la misma hoja podemos agregar tantas reglas @media como sean necesarias.
En el HMTL, con el atributo media de la etiqueta <link>
Dentro del <head>, podríamos cargar varias hojas de estilo, una para cada medio. Por ejemplo:
<link rel="stylesheet" type="text/css" media="print,handheld" href="hoja1.css">
<link rel="stylesheet" type="text/css" media="screen" href="hoja2.css">
Media types más habituales
todos los dispositivos;
pantallas de ordenadores, tabletas o móviles;
Más información: http://www.w3.org/TR/CSS21/media.html
Los media queries amplían la funcionalidad a los media types. Consisten en especificar un media type, y además añadirle ciertas condiciones como el ancho (width), la altura (height) y el color (color). Así se pueden especificar distintos estilos según la resolución del dispositivo o navegador.
El ejemplo anterior permite definir una serie de estilos siempre y cuando la web se vea en una pantalla, y con una resolución de entre 400 y 700 píxeles.
Los media queries son expresiones lógicas que si se cumplen cargan una hoja o algunos estilos.
Dentro del media query podemos especificar:
media: el tipo de media que vayamos a usar (all, screen, print, etc.)
and, uno o varios, seguidos de la característica que restringe el media querie entre parétesis;
si añadimos una coma (,) podemos añadir varios media queries en la misma línea (equivale al OR lógico).
<link rel="stylesheet" type="text/css" href="hoja1.css"
media="all and (min-width: 480px) and (min-device-width: 480px),
(max-device-width: 800px) and (min-width: 480px) and (orientation:landscape)">
Lugares en los que especificar los media queries
Hay dos lugares donde especificar los media types, para cargar las hojas estilos en función del tipo de medio y ciertas características:
@import url("hojaEstilos.css") screen and (min-width:960px);
Con @media, podemos especificar, en la misma hoja de estilos, varias reglas para un tipo de medio específico y sus características. Por ejemplo:
@media all and (min-width:960px){/* estilos para todos los dispositivos con al menos 960px de ancho */}
Dentro del <head>, podríamos cargar varias hojas de estilo, una para cada condición. Por ejemplo:
<link rel="stylesheet" type="text/css" media="screen and (max-width:480px)" href="hoja1.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1024px)" href="hoja2.css">
Características para los media queries
Estas son algunas de las características que admiten los media queries:
La anchura. Admite los prefijos min/max. Coincide con la anchura exterior del dispositivo (píxeles reales), o del navegador incluyendo la barra de scroll. Por ejemplo:
<link rel="stylesheet" media="print and (min-width: 25cm)" href="hojaEstilos.css" />
La altura. Admite los prefijos min/max. Coincide con la altura exterior del dispositivo (píxeles reales), o del navegador incluyendo la barra de scroll.
La anchura del dispostivo. Admite los prefijos min/max. Coincide con la anchura exterior del dispositivo (píxeles renderizados), o del navegador incluyendo la barra de scroll. Por ejemplo:
La altura del dispostivo. Admite los prefijos min/max. Coincide con la altura exterior del dispositivo (píxeles renderizados), o del navegador incluyendo la barra de scroll.
La orientación del dispositivo. Admite los valores portrait | landscape.
Es la relación entre el ancho y el alto del dispositivo. Por ejemplo:
Especifica que el dispositivo es en color. Por ejemplo:
La resolución del dipostivo (en papel) o la densidad de píxeles (píxeles por pulgada de pantalla). Admite los prefijos min/max. Por ejemplo:
Más información: http://www.w3.org/TR/css3-mediaqueries/
En algunos móviles, los píxeles del dispositivo no coinciden con los que vienen definidos en el CSS. Por ejemplo, visualizamos una página web de 480 px de ancho en CSS, en un móvil con 960 px de resolución real, con lo que se visualizará a la mitad del tamaño esperado.
La densidad de píxeles del móvil, en este caso, es del doble, para que el contenido se vea con más calidad. Según escalemos el contenido, los píxeles CSS se adaptarán a la escala de los del dispositivo (y con menor calidad).
Para que las condiciones de los media queries se cumplan respecto a la escala CSS, se utiliza una etiqueta <meta> con ciertos atributos. Se trata de que los píxeles CSS y los del dispositivo se visualicen a la misma escala. Así aseguramos que el móvil considera el media query para el ancho CSS deseado.
Los valores de la etiqueta más comunes serían:
http://visual.ly/apple-devices-resolutions
width versus device-width:
Tamaños respecto al "CSS Media"
device-width / device-height (px)
iPhone 320 x 480 320 x 480, tanto en modo portrait como en landscape
iPhone 4 640 x 960 320 x 480, tanto en modo portrait como en landscape
CSS densidad de pixel 2
iPad 1 and 2 768 x 1024 768 x 1024, tanto en modo portrait como en landscape
iPad 3 1536 x 2048 768 x 1024, tanto en modo portrait como en landscape
Samsung Galaxy S I and II 480 x 800 320 x 533, en modo portrait
CSS densidad de pixel 1.5
Samsung Galaxy S III 720 x 1280 360? x 640?, en modo portrait
HTC Evo 3D 540 x 960 360 x 640, en modo portrait
Amazon Kindle Fire 1024 x 600 1024 x 600, en modo landscape
http://xn--diseowebresponsivo-q0b.com.ar/
Mejor empezar a maquetar las hojas de estilo para los dispositivos móviles, quizá luego las de las tablet, y por últimos las de los ordenadores de escritorio.
Estas son algunas razones de por qué hacerlo así:
1. Los móviles están en auge
Cada vez se navega y se compra más a través de los móviles, así que conviene tener en cuenta un mercado que está cada vez más en expansión.
2. Los móviles te obligan a centrarte
En una pantlla chiquituja, por ejemplo de 320 x 480, más vale que te centres en lo más imprescindible para el usuario y que le facilites la navegación.
3. Los móviles aumentan tu capacidad
Los desarrolladores de páginas web con cierto interés, han ido cada vez más ampliando sus conocientos para hacer web innovadoras que aumenten la interacción con el usuario: plugins, aplicaciones y efectos en JavaScript...
Los móviles aumentan las posibilidades de interacción, por ejemplo, con la geolocalización, o la orientación del dispositivo.
http://www.lukew.com/ff/entry.asp?933#page
Utiliza diseños fluidos
Basa tus diseños en cuadrículas (grids) fluidas.
En las tipografías, utiliza unidades em; será más fácil reescalar su tamaño general en cada hoja.
A las imágenes conviene aplicarles el estilo max-width:100%, y heigth:auto. Así conseguimos que tengan su tamaño por defecto, pero no mayor que el contenedor en el que se encuentra (que se supone que será fluido).
En vídeo HTML5 Podemos utilizar el atributo media dentro de la etiqueta <source>. Por ejemplo:
<source src="high-res.webm" media="min-width:800px">
<source src="low-res.webm">
Artículos sobre diseño adaptativo
http://arborwebsolutions.com/articles/responsive-design-is-an-official-w3c-recommendation
http://xn--diseowebresponsivo-q0b.com.ar/ (en español, traducción del artículo anterior).
Artículos sobre el uso de imágenes
http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need
Artículos sobre "primero el móvil"
‹ Estructura de una web arriba Trucos de maquetación con CSS ›

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución