La Invasión de los Body Switchers

  • Ene
  • 05

escribe tu comentario! 326 palabras - 1 hits

Andy Clarke y James Edwards, nos muestran una tecnica con la que incluir intercambiadores de estilos accesibles.

Traducción y/o adaptación del artículo , publicado el 19 de Noviembre del 2004 en A List Apart Magazine , escrito por:

This article was originally published by A List Apart Magazine (alistapart.com). It appears by permission of the author and A List Apart.

Por Andy Clarke Y James Edwards

Desde su publicación en el año 2001, el intercambiador de estilos css realizado por Paul Sowden, ha sido descargado y utilizado por cientos de diseñadores y desarrolladores, y se han realizado todo tipo de adaptaciones cliente-servidor.

Habiendo usado el “script” de Paul en numerosos proyectos, he empezado a plantearme como podría mejorarse, para ofrecer a los usuarios más opciones y/o mejoras en cuanto a la accesibilidad, por lo que me dirijo a mi buen amigo “Brothercake” con la intención de trasladar mis ideas a la realidad, y así es como nació “La invasión de los Body Switchers”.

Un repaso del “script” original

Una de sus mejores características, es su facilidad de implementación.

Los anclajes que se encargan de las funciones de intercambio, generalmente se encuentran presentes en la estructura del documento, lo que supone un problema si la tecnología “JavaScript” no esta presente, y los anclajes # comunmente usados resultan una carga innecesaria.

<a href="#" onclick="setActiveStyleSheet('default'); return false;">Switcher</a>

La solución original tambien se basa en multiples hojas de estilo, usando elementos </link> y “stylesheet” / “alternate stylesheet” semánticos, esto incrementa notablemente el numero de peticiones realizadas al servidor, pero lo que es más importante, este metodo no nos permite seleccionar estilos de manera independiente segun el tipo de medio utilizado.

¿No sería fántastico si pudieramos hacer esto sin añadir nada a la estructura, usando únicamente “JavaScript” y un fichero CSS?.¿Y no sería incluso más fantástico si pudieramos modificar el estílo según el tipo de medio de manera independiente, ofreciendo al usuario una sencilla herramienta para seleccionar sus preferencias, que se quedaran guardadas en una “cookie” hasta que se vuelvan a cambiar.

Ahora ya podemos pasar al “Body Switcher”.

El concepto

La invasión de los “Body Switchers” se puede definir como infinitamente extensible, pudiendo asignar cualquier numero de opciones y tipos de medio, todo ello desde un único fichero “JavaScript” y CSS. El funcionamiento, es simple, se añaden una o mas clases unicas al <body> del documento; definiendo los estilos utilizando selectores descendentes.

Nuestro proyecto, requiere que abandonemos los “stylesheet” convencionales y los “alternate stylesheet” semánticos, lo que no me supone ningún problema, puesto que:

  • Muchos navegadores no tienen implementado un intercambiador de estilos de forma nativa.
  • Aquellos que lo llevan incorporado, no aplican ninguna persistencia a las hojas de estilo alternativas.

Construyendo el menu

Antes de empezar, echa un vistazo al resultado final.

Si descargas los ficheros necesarios ahora, podras usarlos como referencia en el momento que nos adentremos en cada uno de los componentes:

El codigo XHTML

Primero añade varios contenedores vacios para los intercambiadores, yo he usado aqui un <div> para incluir el intercambiador.

<div id="screen-switcher"></div>

Para cada intercambiador adicional que desees incluir , se necesitara un contenedor extra. Por ejemplo, un contenedor adicional para cambiar el estilo de impresión.

<div id="screen-switcher"></div>

<div id="print-switcher"></div>

O incluso el estilo de proyección.

<div id="screen-switcher"></div>

<div id="print-switcher"></div>

<div id="projector-switcher"></div>

Las herramintas de intercambio se crearan dentro de estos contenedores solo en el caso de que el navegador del usuario tenga soporte para “JavaScript”, dejando los contenedores vacios de cuando no exista el soporte, consiguiendo asi, que la semantica del documento se mantenga.

El “script”

La creación del script es sumamente sencilla. Priemro crearemos el formulario definiendo la id de su contenedor y la etiqueta de texto.

  1.  
  2.     var screenSwitcher =
  3.       new bodySwitcher(
  4.       'screen-switcher',
  5.       'Screen styles'
  6.     );
  7.  

Luego puedes añadir cualquier numero de clases y sus etiquetas, para aplicarlas al control del intercambiador:

screenSwitcher.defineClass('default','Normal contrast');

screenSwitcher.defineClass('hight','Hight contrast');

Añadiendo nuevos tipos de medio

Para dar al usuario la posibilidad de elegir entre diferentes estilos de impresión, sin afectar al modo de presentación en pantalla, añadiremos las opciones de impresión al “script”.

  1.  
  2.     var printSwitcher =
  3.      new bodySwitcher(
  4.       'print-switcher',
  5.       'Print styles'
  6.      );
  7.     printSwitcher.defineClass(
  8.        'default','Default'
  9.     );
  10.     printSwitcher.defineClass(
  11.       'small-sans','Small sans'
  12.     );
  13.     printSwitcher.defineClass(
  14.       'large-serif','Large serif'
  15.     );
  16.  

Se pueden añadir mas tipos de medios, como por ejemplo, ordenadores de mano, o dispositivos de proyección.

  1.  
  2.     var projectionSwitcher =
  3.       new bodySwitcher(
  4.         'projection-switcher',
  5.         'Projection styles'
  6.     );
  7.     etc.
  8.     var handheldSwitcher =
  9.       new bodySwitcher(
  10.         'handheld-switcher',
  11.         'Handheld styles'
  12.     );
  13.     etc.
  14.  

La única restricción que tenemos, es que cada nombre de class ha de ser único, incluso entre los diferentes tipos de medio.

La hoja de estilos

Una única hoja de estilo puede contener todas las opciones, y tipos de medio seleccionables por el usuario. Cualquier regla CSS puede ser aplicada a esta hoja de estilos, simplemente usando selectores descendentes desde las clases <body> adicionales que comentabamos anteriormente.

Ejemplo de estilos de pantalla.

  1.  
  2.     @media screen
  3.     {
  4.     body {
  5.     background : #fff;
  6.     color : #666;
  7.     }
  8.     body.high {
  9.     color: #000;
  10.     }
  11.     body.highvisibility {
  12.     background : #000;
  13.     color : #ff0;
  14.     }
  15.     }
  16.  

Ejemplo de estilos de impresión.

  1.  
  2.     @media print
  3.     {
  4.     body {
  5.     font: 100% "Lucida Sans Unicode",verdana,sans-serif;
  6.     }
  7.     body.small-sans {
  8.     font: 80% "Lucida Sans Unicode",verdana,sans-serif;
  9.     }
  10.     body.large-serif {
  11.     font: 120% "Times New Roman",times,serif;
  12.     }
  13.     }
  14.  

Si los necesitaramos, tambien podemos añadir estilos para medios adicionales.

  1.  
  2.     @media projection
  3.     {
  4.     etc.
  5.     }
  6.     @media handheld {
  7.     etc.
  8.     }
  9.  

Aplicando estilos a los controles

Los controles del intercambiador estan basados en una estructura accesible y semantica, y pueden ser estilizados de manera acorde al diseño del sitio. Aquí esta el codigo HTML usado para cada control; Os dejo el estilo a vosotros.

  1.  
  2.     <form action="">
  3.     <fieldset>
  4.     <label for="select-screen-switcher">
  5.     <span>Screen styles</span>
  6.     <select id="select-screen-switcher">
  7.     <option value="default">Normal contrast</option>
  8.     <option value="high">High contrast</option>
  9.     <option value="highvisibility">High visibility</option>
  10.     </select>
  11.     </label>
  12.     </fieldset>
  13.     </form>
  14.  

Y esto es todo lo que conlleva

Esto es todo. Echa otra ojeada al resultado final - un moderno intercambiador de estilos que nos permite cambiar entre diferentes tipos de medio, y les da a los usuarios mucho mayor control sobre el resultado de tus páginas.

El principio es infinitamente extensible, con lo que puedes dividirlo en preferencias individuales para la tipografía, los colores, la estructura o la orientación.

La excepción

La invasión de los “Body Switchers” no funciona (pero se degrada amigablemente) en Mac/IE5.

ningún comentario por el momento

Escribe tu comentario

Puedes utilizar este formulario para escribir tu opinion sobre esta entrada, no existe ningun tipo de limitacion a la hora de enviar opiniones, tan solo sigue unas reglas basicas de cortesia y todos estaremos mas contentos.

Puedes identificarte utilizando OpenID, solo tienes que introducir tu URL OpenID en el siguiente campo y pulsar el boton de validar.





Instrucciones para los comentarios

El simbolo * indica que se trata de un campo obligatorio.

Este sitio usa Markdown junto con Smartypants para educar los textos, tambien esta disponible para los comentarios.

A continuación os muestro algunas de las equivalencias:

  • [enlace de ejemplo](http://example.com/) resulta enlace de ejemplo.
  • **Texto en Negrita**
  • _Italica_
  • > blockquote
  • > > nested blockquote
  • * Esto es un elemento de una lista desordenada (ul)
  • 1. Esto es un elemento de una lista ordenada (ol)

MC Puedes seguir las respuestas a tus comentarios con MyComments.

↑