Creación de aplicaciones HTML5
El uso de consultas de medios de CSS3 para crear sitios web con mejor respuesta
Descargar el ejemplo de código
En este artículo se analiza la Vista previa de la plataforma Internet Explorer 10. Toda la información está sujeta a cambio.
Hace algunos años, se me acercó un cliente que deseaba crear un sitio web solo para dispositivos móviles para su base de usuarios de expertos en tecnología. En realidad, el proyecto se nos presentó como un "sitio para iPhone" y traía un diseño completamente concebido. Emocionados con la idea de crear una aplicación móvil así de vanguardista, comenzamos a trabajar en serio y a hacer importantes progresos, hasta que llegó el momento de considerar los otros dispositivos móviles disponibles en el mercado. El cliente en cuestión deseaba compatibilidad con todos ellos. De ese modo comenzó nuestro valiente esfuerzo por responder a dos de las preguntas más importantes a las que se enfrentan los desarrolladores web cuando intentan crear experiencias diseñadas para dispositivos móviles: ¿Cómo se sabe cuándo se debe cambiar la experiencia para responder a un explorador móvil específico? ¿Cómo se realiza este cambio cuando es necesario?
Diseño web con respuesta
Estas preguntas son fundamentales para un diseño web con respuesta, un término acuñado por Ethan Marcotte (bit.ly/aO2cFa). El diseño web proactivo tiene que ver con el uso de pistas de contexto provenientes del explorador para adaptar la manera en que un sitio se presenta a un usuario e incluso su comportamiento. Se refiere a responder a la información que presenta el explorador con una experiencia personalizada y atractiva que se ajusta a las expectativas de interacción de un usuario sobre ese dispositivo. Si las pistas correctas revelan la información suficiente acerca del explorador y del dispositivo en cuestión, resulta factible proporcionar la opción de personalizaciones, como imágenes alternativas y diseños fluidos.
Tradicionalmente, estas pistas de contexto se obtienen al analizar la cadena de agente de usuario que presenta el explorador (una práctica llamada "examen de explorador" o "examen de agente de usuario") y luego usar esa información para determinar cómo proceder. Hablé acerca del examen de agente de usuario en mi artículo de septiembre de 2011, “Ningún explorador quedará afuera: una estrategia para la adopción de HTML5” (msdn.microsoft.com/magazine/hh394148). Tal como se indicó en esa ocasión, el examen de explorador es poco confiable y, en esencia, se ha reemplazado por la detección de características, la que le ayuda a tomar decisiones sobre el marcado, CSS y JavaScript, basándose en las características disponibles y no en un determinado explorador y su versión.
En el contexto del diseño web con respuesta, todos los exploradores modernos de escritorio y los principales exploradores móviles admiten una característica llamada "consulta de medios", un módulo de CSS3 que extiende la idea de los tipos de medios presentada en CSS 2.1 (es decir, la capacidad de especificar hojas de estilo alternativas para impresión, pantalla y similares) con la capacidad de determinar algunas de las características físicas de un dispositivo que visita un sitio. De manera similar a la base para usar la detección de características, las consultas de medios le permiten centrarse en obtener las pistas de contexto adecuadas para un visitante actual, lo que luego puede usar para ajustar la experiencia brindada para responder adecuadamente. El valor de las consultas de medios es que brindan dichas pistas a sus hojas de estilo.
Este artículo brindará una introducción al módulo de consultas de medios de CSS3. Analizaré brevemente su sintaxis y su uso y luego mostraré un ejemplo simple que aproveche las consultas de medios para crear vistas de una galería fotográfica en línea compatibles con smartphones y tabletas. Finalmente, compartiré una sugerencia esencial para todas las formas de desarrollo móvil antes de terminar con un breve análisis sobre los agentes de escucha de consultas de medios, una especificación independiente de World Wide Web Consortium (W3C) (bit.ly/wyYBDG) que brinda una API para reaccionar a los cambios en el entorno de medios. Al final de este artículo tendrá una base sólida para crear aplicaciones y sitios web con capacidad de respuesta mediante solo el uso de CSS y algunos estilos adaptados.
Consultas de medios de CSS
Tal como ya mencionamos, CSS 2.1 admite actualmente hojas de estilo dependientes de los medios basándose en las declaraciones de "tipos de medios" (bit.ly/xhD3HD). El siguiente marcado ilustra la manera en que puede usar tipos de medios para especificar hojas de estilo condicionales:
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Si cuenta con estos elementos, un sitio cargará una hoja de estilo diferente de la hoja de estilo predeterminada (o "pantalla") cuando se carga una página en modo de vista previa de impresión. A pesar de lo útil que resulta esta característica (aunque históricamente subutilizada), no brinda ninguna pista de contexto útil para usar en la creación de sitios web con verdadera capacidad de respuesta. Y a pesar de que la especificación de tipos de medios detalla el uso de 10 tipos de medios, los proveedores de exploradores nunca adoptaron completamente todos los tipos especificados.
Sin embargo, el atributo "medios" sienta una base sólida y W3C decidió crear consultas de medios (bit.ly/zbIeDg) justo encima. Cuando especifica un tipo de medios (como impresión, pantalla o todos), las consultas de medios le permiten agregar expresiones al atributo "medios" que revisa la presencia de ciertas características de medios, como ancho, alto, orientación e incluso la resolución de pantalla del dispositivo actual. El siguiente es un ejemplo que carga la hoja de estilo main.css si el tipo de medios es "pantalla" y el ancho del dispositivo es de al menos 800 píxeles:
<link rel="stylesheet" media="screen and (min-width: 800px)" href="main.css" />
La consulta de medios se encuentra dentro de los paréntesis. La parte de la izquierda especifica la propiedad que se prueba (ancho) con un modificador opcional min- o max- y la parte de la derecha especifica el valor de esa propiedad. Si el dispositivo o el explorador en cuestión presenta un ancho de pantalla de, al menos, 800 píxeles, se aplicarán los estilos que aparecen en main.css. De lo contrario, no se aplicarán. Con esto se ilustra la manera en que las consultas de medios brindan a los desarrolladores pistas de contexto útiles para crear aplicaciones y sitios web con respuesta.
Para comenzar
Tal como se ha indicado, las consultas de medios de CSS3 son compatibles con las versiones más recientes de todos los exploradores importantes (bit.ly/wpamib), por lo que debería sentirse cómodo con usarlas hoy mismo. Hay tres maneras de aprovechar las consultas de medios en sus sitios. La primera es cargar de manera condicional hojas de estilo completas, tal como se mostró en el ejemplo anterior. El segundo método es usar directivas @import en sus hojas de estilo. Esta es la misma prueba, pero esta vez con una directiva de importación:
@import url("main.css") screen and (min-width: 800px);
Tal como en el primer ejemplo, esta instrucción evaluará el ancho del dispositivo actual y, si es de al menos 800 píxeles, cargará main.css y aplicará sus estilos.
Finalmente, puede usar consultas de medios en línea en CSS con directivas @media de la siguiente manera:
@media screen and (min-width: 800px) { ... }
En este caso, en lugar de definir estilos en un archivo independiente, los coloca en línea en una hoja de estilo existente y los encapsula con una consulta de medios que garantiza que estos estilos se aplican solo cuando corresponde.
Ahora veamos las consultas de medios en acción, comenzando con un ejemplo simple. Si desea intentar esto en casa, puede revisar el código fuente de muestra para este artículo o abrir el editor de texto o IDE de su preferencia y agregar el marcado que aparece en la figura 1.
Figura 1 Un documento HTML de muestra
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="media.css">
</head>
<body>
<article id="small">This is a small screen</article>
<article id="medium">This is a medium screen</article>
<article id="large">This is a large screen</article>
<article id="landscape">... and you're in landscape mode...</article>
</body>
</html>
A continuación, cree una hoja de estilo llamada media.css en la misma carpeta y agregue los estilos definidos en la figura 2. Observe que definí todas mis directivas de medios @media en la parte inferior del archivo; es posible que desee hacer lo mismo en sus hojas de estilo. Si elige definir varias hojas de estilo en su marcado, también deseará colocar elementos <link> para hojas de estilo específicas después de sus hojas de estilo principales. Debido al comportamiento en cascada de CSS, es posible que deba sustituir sus reglas principales con las reglas específicas de medios y que estas se deban definir adecuadamente. Verá que he definido estilos para los elementos de mi artículo y del cuerpo y luego agregué consultas de medios (y sus reglas asociadas) para cada experiencia que deseo admitir. Las pantallas con menos de 480 píxeles recibirán un conjunto de estilos adicionales; las pantallas entre 480 píxeles y 1024 píxeles recibirán otro y las pantallas con más de 1024 píxeles reciben un tercer conjunto de estilos. También agregué una consulta de orientación y aplicaré otro conjunto de estilos más si el dispositivo está en modo horizontal.
**Figura 2 Consultas de medios de CSS definidas en línea con la directiva @media**
article {
display: none;
}
body {
font-size: 24px;
font-weight: 800;
color: white;
}
@media screen and (max-width: 480px) {
body {
background-color: #ff2a18;
}
#small {
display: inline;
}
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
body {
background-color: #00ff00;
}
#medium {
display: inline;
}
}
@media screen and (min-width: 1024px) {
body {
background-color: #0000ff;
}
#large {
display: inline;
}
}
@media screen and (orientation: landscape) {
body {
background-color: #ff7f00;
}
#landscape {
display: inline;
}
}
Una vez que se ha creado la página en la figura 1 y la hoja de estilo en la figura 2, abra la página en cualquier explorador. Probar las consultas de medios es simple: incluso puede hacerlo sin un dispositivo móvil. Solo cambie el tamaño de la ventana del explorador y vea cómo cambia el color del texto y el color del fondo cuando cambia el contexto de la ventana visible.
Ahora que sentamos una base para las consultas de medios, demos un paso más allá y analicemos un ejemplo más realista. Para este ejemplo agregaré consultas de medios a una galería fotográfica en línea para poder admitir smartphones y tabletas. Encontrará el código de este ejemplo, que usa la plantilla Photo Gallery que viene con WebMatrix (webmatrix.com), en archive.msdn.microsoft.com/mag201204HTML5.
Si abre esta página en un explorador de dispositivo móvil o tableta, verá que la página aparece "alejada" y es difícil de ver o leer, como se ver en la figura 3. Con unas pocas consultas de medios y algunos otros trucos, podemos crear una experiencia a la medida sin un examen de marcado o explorador nuevo de ningún tipo.
.png)
Figura 3 Vista móvil sin consultas de medios
En la parte inferior del archivo desktop.css creado para este ejemplo, comience por agregar su condición y directiva de consulta de medios. Como mi preocupación actual es la más pequeña de las pantallas, crearé la siguiente definición:
@media screen and (max-width: 480px) {}
Ahora, dentro de esa definición, creemos algunas reglas para cambiar el tamaño y la posición de las imágenes para adaptarlos a pantallas más pequeñas. Esas reglas aparecen en la figura 4.
Figura 4 Modificación de estilos para dispositivos móviles
body {
min-width: 120px;
max-width: 320px;
}
h1 {
font-size: 1.5em;
}
img {
width: 250px;
height: 187.5px;
}
ul.thumbnails li {
width: 265px;
height: 200px;
line-height: 200px;
}
ul.thumbnails li span.image-overlay {
width: 265px;
}
Si actualiza la página después de agregar estos estilos, deberá ver algo similar a lo que aparece en la figura 5. Las imágenes se ven mejor, pero la navegación principal aparece mal alineada. Más aún, la galería usa un seudoselector :hover de CSS para mostrar información adicional acerca de cada imagen, tal como aparece en la figura 6. Como esta es una experiencia de usuario que no tiene sentido en un entorno donde los eventos de mantener el mouse son menos comunes (en smartphones y tabletas), necesitamos desarrollar una presentación alternativa para ese aspecto de la página también. Lo haremos agregando los estilos que aparecen en la figura 7 dentro de la directiva @media actual.
.png)
Figure 5 Vista móvil con mejores imágenes
.png)
Figura 6 Una imagen con el efecto de mantener el mouse aplicado
Figura 7 Estilos para una navegación apta para móvil e información de imagen
#banner {
height: 110px;
background: #eaeaea;
}
#menu li {
display: block;
margin-top: 3px;
margin-bottom: 3px;
}
#menu li.tags a,
#menu li.galleries a,
#menu li.account a {
background: none;
}
#menu li.login {
display: none;
}
ul.thumbnails li span.image-overlay {
display:block;
position: absolute;
top: 0;
left: 0;
line-height: normal;
width: 515px;
padding: 5px;
}
ul.thumbnails li {
background: #f3f6f7;
border-color: #dbe2e5;
border-radius: 7px;
box-shadow: 0px 0px 20px 5px #A9A9A9;
}
Ahora, si actualiza la página en el explorador, debe ver una navegación limpia, junto con la información que apareció anteriormente en un evento de mantener el mouse similar a la figura 8.
.png)
Figura 8 La galería con mejores cuadros de navegación e imágenes
Hasta ahora tenemos una vista de escritorio de nuestra galería, así como también una versión móvil bastante aceptable y todo lo que necesitamos fueron unas pocas reglas adicionales de CSS. Demos un paso más allá y agreguemos compatibilidad con pantallas con más de 480 píxeles y menos de 1024 píxeles: las tabletas.
Si ve la galería fotográfica en un explorador de escritorio y cambia el tamaño a menos de 1024 píxeles (la pantalla que se muestra en la figura 8), verá que muchas de las imágenes están cortadas. Como los dispositivos de tableta generalmente tienen una pantalla más grande, tiene sentido ofrecer imágenes de mayor tamaño en la página de la galería. Agreguemos entonces otra consulta de medios para los dispositivos tamaño tableta:
@media screen and (min-width:480px) and (max-width:1024px)
En el origen en línea, refactoricé algunas de las reglas de smartphone en un conjunto de estilos que se aplican a todos los dispositivos que no son de escritorio, así es que todo lo que necesito para mi vista de tableta son los estilos relacionados con el tamaño de documentos, imágenes y miniaturas, tal como aparece en la figura 9.
Figura 9 Estilos para la vista apta para tableta
body {
min-width: 480px;
max-width: 800px;
}
img {
width: 500px;
height: 375px;
align: center;
}
ul.thumbnails li {
width: 515px;
height: 390px;
line-height: 200px;
}
Actualice la pantalla en un explorador con vista de tableta y verá algo similar a lo que aparece en la figura 10. Ahora nos estamos dirigiendo a varios tamaños de pantalla, y por lo tanto a varios dispositivos, y no nos costó más que el tiempo que demoramos en crear algunos estilos alternativos.
.png)
Figura 10 Galería fotográfica, vista apta para tableta
El dispositivo móvil primero
Antes de concluir esta discusión sobre las consultas de medios, deseo compartir una sugerencia que no es específica para el uso de consultas de medios, pero que es importante cuando se realiza un desarrollo web de cualquier tipo. En especial, debe definir primero la ventanilla y el diseño para el dispositivo móvil.
Si ha ido codificando a medida que hemos analizado las consultas de medios en este artículo, es posible que haya detectado un pequeño problema en el momento de ver la página en un smartphone o en un emulador de este tipo de dispositivos: en algunos dispositivos, el efecto de "alejado" no cambió, incluso después de aplicar las reglas condicionales. Lo que ocurre es que el explorador móvil intenta "optimizar" la experiencia en una pantalla más pequeña, lo que resulta útil en sitios que no prestan atención a los usuarios móviles. Sin embargo, para este sitio la preferencia es que esta optimización no se produce y este comportamiento se puede reemplazar si se agrega una etiqueta <meta> en el <head> de la página, de la siguiente manera:
<meta name="viewport" content="width=device-width">
Si actualiza la página y las consultas de medios están definidas correctamente, debería ver las reglas aplicadas.
Es posible que también haya observado que, en el ejemplo de la galería fotográfica, agregué una experiencia móvil en un sitio existente. Como desarrollador familiarizándose con las consultas de medios, es probable que también haga esto inicialmente. Sin embargo, hay un movimiento creciente que enfatiza un enfoque que pone al dispositivo móvil en primer lugar en el momento de diseñar y desarrollar aplicaciones y sitios web. Tal como suena, este enfoque tiene que ver con transformar su experiencia móvil en una prioridad principal, en lugar de una idea posterior (como ocurría a menudo en el pasado). Esto cobra sentido cuando se considera que, en los últimos dos años, las ventas de smartphones y tabletas han sobrepasado las ventas de equipos y que la exploración móvil ahora corresponde a más de la mitad de toda la exploración web. Más allá de eso, al tener en mente primero el dispositivo móvil se impulsa una "mejora progresiva", según la cual los sitios se generan desde una experiencia de línea base (y a menudo, de solo texto) y mejoran progresivamente para permitir dispositivos y exploradores más capaces. Para obtener más información acerca del enfoque de dispositivo móvil primero, recomiendo encarecidamente el libro de Luke Wroblewski con el mismo nombre (disponible en bit.ly/zd9UWT).
Agentes de escucha de consultas de medios
Como una extensión a la compatibilidad de consultas de medios en CSS3, el grupo de trabajo de CSS busca agregar API de JavaScript que permitan que los desarrolladores evalúen las consultas de medios en tiempo de ejecución y escuchen los cambios de tiempo de ejecución en condiciones de consultas de medios. Estas API están documentadas en la especificación Módulo de visualización CSSOM (bit.ly/w8Ncq4). La figura 11 muestra un ejemplo de cómo realizar consultas de medios y crear agentes de escuchar desde JavaScript.
Figura 11 Trabajo con agentes de escucha de consultas de medios
listener = window.msMatchMedia("(min-width: 480px)");
evaluate(listener); // Perform an initial evaluation
listener.addListener(evaluate); // Evaluate each time the width changes
function evaluate(listener) {
if (mql.matches) {
expandCommentList(); // Screen is at least 480px
} else {
shrinkCommentList(); // Screen is smaller
}
}
Los agentes de escucha tienen el potencial de ser muy valiosos en casos en los que la ventanilla de un dispositivo pueda cambiar en tiempo de ejecución; por ejemplo, cuando la orientación cambia en smartphones y tabletas. Con los agentes de escucha de consultas de medios, puede responder a estos cambios y no solo hacerlo desde CSS, sino que también desde sus scripts. La especificación Visualización CSSOM actualmente está en estado de borrador de trabajo, pero la Vista previa de la plataforma Internet Explorer 10 ofrece compatibilidad para agentes de escucha de consultas de medios, por lo que puede probarla en la Versión de prueba de Internet Explorer (bit.ly/gQk7wZ).
La capacidad de admitir varias plataformas, pantallas y experiencias en aplicaciones web ha recorrido un largo camino durante los últimos años. Mientras en el pasado era normal crear versiones de un sitio específicas para los dispositivos, la proliferación de dispositivos aptos para móviles ha hecho rápidamente inviable la identificación de dispositivos. Afortunadamente, la introducción de consultas de medios de CSS3 en todos los principales exploradores móviles y de escritorio significa que ahora se pueden usar las pistas de contexto que realmente importan para brindar experiencias adaptadas para una amplia variedad de dispositivos, todos con CSS condicional. Para obtener más información sobre las consultas de medios de CSS3, recomiendo leer el capítulo del excelente libro de Peter Gasston "The Book of CSS3" (No Starch Press, 2011) que habla sobre consultas de medios. Para ver una galería de grandes experiencias brindadas gracias a las consultas de medios, revise el sitio de consultas de medios. Espero que este artículo le haya brindado información suficiente para comenzar a crear hoy mismo experiencias adaptadas. ¡Espero ver las increíbles experiencias que vaya a crear!
Brandon Satrom es director de productos en Kendo UI (kendoui.com), un conjunto de herramientas móviles y de HTML5 de Telerik. Mantiene un blog en userinexperience.com y puede seguirlo en Twitter en twitter.com/BrandonSatrom.
Gracias a los siguientes expertos técnicos por su ayuda en la revisión de este artículo: John Box, Sharon Newman y Jacob Rossi