Figura 1: Selección de estilos alternativos en Mozilla Firefox
¿Cómo puedo seleccionar un estilo alternativo?
¿Cómo puedo hacer un estilo para que se use cuando se imprime una página web? ¿Qué cambios tengo que realizar respecto a un estilo en pantalla?
¿Qué es la accesibilidad web?
¿Cómo se puede mejorar la accesibilidad con CSS?
¿Qué es el diseño adaptativo?
¿Cómo se realiza un diseño adaptativo?
En esta práctica tienes que crear tres estilos nuevos para tu sitio web:
Tienes que lograr que el sitio web se imprima correctamente. Para ello no tienes que crear una versión imprimible (una versión especial para que sea impresa que genera el servidor web), sino que tienes que crear una hoja de estilo para impresión para que sea usada cuando se quiera imprimir el sitio web.
También tienes que crear una hoja de estilo que mejore la accesibilidad del sitio web para ciertos grupos de usuarios. La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web.
Si una página web no tiene en cuenta la accesibilidad web, ciertos grupos de usuarios con discapacidad pueden tener dificultades en el uso de algunos elementos de las páginas web:
Por último, ¿hoy en día se accede a la Web exclusivamente desde un ordenador? No, es muy normal acceder a la Web desde un dispositivo móvil como un teléfono inteligente (smartphone) y es muy probable que en el futuro se acceda también desde otros tipos de dispositivos que en la actualidad no contemplamos. Tienes que crear una hoja de estilo que incluya un diseño adaptativo, que tu sitio web se visualice de forma adecuada en un dispositivo con una pantalla de baja resolución (480px de ancho) o de alta resolución (1920px de ancho).
Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta <link />. En una misma página web se pueden indicar varios ficheros CSS que se combinan todos ellos o también se puede indicar de forma que definan estilos alternativos. Los estilos alternativos se pueden definir para un mismo dispositivo o se pueden definir para distintos dispositivos (ordenador, impresora, teléfono móvil y otros). Para definir un dispositivo concreto se emplea el atributo media; si no se indica un dispositivo, el estilo CSS se aplica a todos los dispositivos (equivale a media="all").
Por ejemplo, en el siguiente código se define un estilo CSS que se debe emplear cuando se imprima una página web (media="print") y un estilo que se debe emplear cuando se visualiza en pantalla:
El navegador selecciona automáticamente el estilo definido para la impresora cuando mandamos a imprimir una página web.
Cuando se definen estilos alternativos (rel="alternate stylesheet") para un mismo dispositivo, es necesario indicar un nombre para cada estilo con el atributo title. Pueden existir varias hojas de estilo con el mismo nombre, en cuyo caso se aplicarán todas ellas en conjunto al elegir el nombre que las identifica. Por ejemplo:
En la Figura 1 se muestra como seleccionar un estilo alternativo en Mozilla Firefox a través del menú Ver, Estilo de página.
En la Figura 2 se muestra como seleccionar un estilo alternativo en Mozilla Internet Explorer a través del menú Ver, Estilo.
No todos los navegadores ofrecen esta opción. Por ejemplo, Google Chrome no dispone de esta opción, pero se puede instalar una extensión como Alt CSS18 que añade la opción de seleccionar un estilo alternativo.
En CSS existen tres tipos de hojas de estilo:
Al crear un estilo para impresión se tienen que tener en cuenta las diferencias que existen entre una pantalla y una hoja de papel:
Algunos consejos para crear una versión impresa correcta de un sitio web son:
CSS ayuda a mejorar la accesibilidad web porque permite separar la estructura y contenido de un documento de su presentación. Esto permite que los documentos estén mejor etiquetados y evita el empleo de ciertas técnicas de diseño que afectan de forma negativa en la accesibilidad de una página web.
Además, la separación de la presentación permite que se puedan ofrecer múltiples presentaciones para un mismo contenido. Un sitio web puede ofrecer varios estilos alternativos diseñados para mejorar la accesibilidad.
Algunos consejos para crear una presentación accesible de un sitio web:
Por ejemplo, el sitio web OER Commons19 ofrece un panel de opciones que permite cambiar la presentación del sitio web. En la Figura 3 se puede ver la presentación por defecto y en la Figura 4 la presentación accesible en la que se ha mejorado el contraste al utilizar el color blanco sobre negro y se ha aumentado el tamaño del texto un 20 %.
Un buen diseño y una buena maquetación es aquella que está preparada para adaptarse a diferentes dispositivos. ¿Cómo se puede lograr? Una solución que se aplica en la actualidad es el diseño adaptativo, adaptable o flexible (responsive design).
Importante: el diseño adaptativo lo puedes comenzar a partir del estilo CSS que realizaste en la práctica anterior.
El diseño adaptativo se basa principalmente en el uso de Media Queries20, un estándar del W3C. Una media query es una expresión que implica la evaluación de una o varias media features, que da como resultado un valor booleano de verdadero o falso.
La media query se puede utilizar desde HTML en la etiqueta <link />:
En el ejemplo anterior, si el dispositivo de visualización es una pantalla, se usa el estilo sans-serif.css. Por contra, si el dispositivo de visualización es la impresora, se usa el estilo serif.css.
También se puede utilizar directamente desde CSS con la declaración @media:
En el ejemplo anterior, si el dispositivo de visualización es una pantalla, se define un tipo de letra sans-serif para todos los elementos de la página web.
Una media query suele evaluar alguna de estos atributos:
Por ejemplo, en el siguiente fragmento de código se definen tres hojas de estilo CSS que se aplicarán según la anchura que tenga el dispositivo en el que se visualice la página web:
Para que un diseño adaptativo funcione correctamente se debe añadir la siguiente instrucción en la sección <head> de la página web:
Los siguientes vídeos te pueden ayudar a realizar tu diseño adaptativo:
La selección del estilo alternativo se tiene que realizar a través de la opción correspondiente en el navegador. En aquellos navegadores que no dispongan de dicha opción no se podrá realizar dicha selección. Una alternativa es utilizar JavaScript para que funcione en cualquier navegador, pero no lo vamos a hacer.
La selección de un estilo alternativo no se conserva al pasar de página. En una próxima práctica veremos cómo mantener el estilo seleccionado con el uso de las cookies.
¿Cómo se puede comprobar el estilo desarrollado para impresión sin tener que imprimir la página web? Hay tres posibilidades:
1https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets
2http://alistapart.com/stories/alternate/
3http://webdesign.about.com/od/printerfriendly/a/aa041403a.htm
4http://webdesign.about.com/cs/css/a/aa042103a.htm
5http://alistapart.com/stories/goingtoprint/
6http://accesibilidadweb.dlsi.ua.es/
7http://www.w3c.es/Traducciones/es/WAI/intro/accessibility
8http://olgacarreras.blogspot.com.es/2009/07/25-reglas-para-hacer-css-accesibles.html
9http://www.w3.org/TR/WCAG10-CSS-TECHS/
10http://blogs.ua.es/pi/2012/04/17/diseno-web-responsivo-sensible-adaptable/
11http://alistapart.com/article/responsive-web-design
12http://www.lukew.com/ff/entry.asp?1436
13http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
14https://css-tricks.com/css-media-queries/
15https://www.smashingmagazine.com/2011/07/responsive-web-design-techniques-tools-and-design-strategies/
16https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
17http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
18https://chrome.google.com/webstore/detail/alt-css/deaodobjfcolfhkecnnghdclnlmfjdje
20https://www.w3.org/TR/css3-mediaqueries/
21https://youtu.be/ktGF7Dda0wI
22https://youtu.be/96U4zPbyq9c
