Accesibilidad y Usabilidad: discreta Javascript

Martes, 27 de marzo 2007

Permitir a los usuarios interactuar con una página Web producido en los últimos años un aumento significativo en el uso del cliente-scripts lado: el código Javascript puede responder en tiempo real y manejar una variedad de información. La Web 2.0 es la última expresión de esta capacidad de interacción, en la que el usuario final - el usuario participa activamente en la construcción y todas 'la evolución del sitio Web, la interacción con él y ayudarte a ti mismo. Se refiere a User-Generated Content (UGC - o generados por los usuarios de contenido) que ve el "navegador" ciertamente no pasivo!

Para lograr esta interacción, a continuación, para permitir al usuario final para añadir su contribución, han desarrollado una serie de técnicas que han cambiado el aspecto y el comportamiento de las páginas web (estática hasta el momento, y ahora similares a las aplicaciones tradicionales de de escritorio) en los últimos años. Modificar el contenido de una página, enviar archivos, para dar su voto a un vídeo o un documento, registro o modificar sus datos, son sólo algunas de las operaciones solicitadas en muchos servicios (2,0 beta) en la Web

La creciente demanda de herramientas de cliente (Prototype, Dojo Toolkit, jQuery, ASP.NET Ajax, ...) y el servidor (Ruby on Rails, las bibliotecas de PHP, JSP y ASP, ...) para el desarrollo de la Web 2.0 ha dado lugar a la aparición de muchos herramientas de desarrollo, las bibliotecas o de una simple filosofía de un nuevo desarrollo en la Web;

Estas técnicas y estos instrumentos se han utilizado en casi todas las combinaciones posibles, gracias a su característica modular y la capacidad para resolver determinadas tareas en momentos específicos. Algunos han optado, por lo tanto, las soluciones completamente en Adobe Flash, que utiliza soluciones híbridas (Adobe Flash + Javascript), que, a partir de colecciones genéricas como Prototype, ha logrado su marco específico. La mayoría de estos instrumentos también es de código abierto (o libre) y esto ha contribuido sin duda a una enorme difusión muy rápidamente.

El precio que paga, sin embargo, para obtener esta nueva interacción ha sido una pérdida neta de la accesibilidad (y con frecuencia la utilidad) de la Paradójicamente Web, las crecientes posibilidades de interacción se ha limitado el número de usuarios que, por diversas razones, no puede acceder a estas nuevas tecnologías! Hubo, por tanto, la un'incremento Digital Divide, a menudo debe exclusivamente a los abusos de algunos de desarrollo técnico o simplemente no tener en cuenta de algún objetivo final.

Al desarrollar un sitio Web, o simplemente una página Web, no olvide el concepto de usuario final, que puede visitar nuestro sitio con los dispositivos (navegador o agente de usuario) que no sean los que esperamos, sobre todo, con características y otros valores que los que hemos dado por sentado (resolución de pantalla, número de colores, JavaScript desactivado, la falta de Applet o ActiveX Plugin, etc ...). De ello se deduce que, además de la mera compatibilidad (funcional y visual) entre navegador debe prestar atención a las características que tienen. El argumento, por supuesto, es complejo y articulado.

Es justo obligar a un usuario tener JavaScript activado y disponible para navegar por nuestro sitio web?

Creo que hay dos posibles respuestas a esta pregunta, la primera puede ser que no, no está bien, sobre todo si lo que queremos conseguir puede ser estructurado de manera que permitan tanto el acceso avanzado es un acceso básico. Sin embargo, y esta es la segunda respuesta, obviamente, hay casos límite en que el requisito de disponer de una tecnología en particular es independiente de la capacidad - y voluntad - Analista Programador!

También - polémica - que nosotros (los desarrolladores) para determinar y obligar a los que deben tener qué?

Si el proyecto que queremos lograr es que pueden ser utilizadas por cualquier agente de usuario, con las precauciones adecuadas, el tiempo de desarrollo y la creciente complejidad del código (HTML, JavaScript y Server Scripting) aumenta. Es una opción productiva, personalmente, para dictar las normas de arranque. Sin embargo, la compatibilidad formal no es una operación que debe ser planificado desde el principio, sí que podemos abordar la cuestión en un momento posterior, cuando nuestro sitio web (o el servicio) ya está en línea.

Normalmente usamos dos técnicas, o dos enfoques, para construir una web realmente accesible:

  • Agraciado Degradación
  • Mejora progresiva

Agraciado Degradación

Esta técnica, utilizada también en otros campos de diseño web, se supone que concentrarse ahora en la aplicación de un sitio web muy evolucionado, utilizando las técnicas y tecnologías sin preocuparse por problemas de compatibilidad a todos, y la accesibilidad. Facilidad de uso, sin embargo, es - por supuesto - el ingrediente principal para la definición. El segundo paso es incorporar todas las características para apoyar a los navegadores y los usuarios que son - de hecho - a los márgenes.

A continuación, utilizará nuestras tablas para dar formato al diseño, no exacerbar el uso de CSS y flotante, a fin de respetar el diseño del sitio, incluso en los navegadores más antiguos. JavaScript parece que va a utilizar el NOSCRIPT etiqueta para proporcionar un acceso alternativo. Usar la ALT TITLE Tag ALT TITLE donde más rico, etc ...

Elegante degradación tiene, sin embargo, los límites. No tome seriamente en consideración los distintos tipos de agentes de usuario (o usuarios) desde el principio, puede tener malos (a veces desagradables) las consecuencias en las consecuencias. No siempre, de hecho, usted puede agregar los Artefiz y herramientas pueden proporcionar una alternativa real al contenido de los diferentes usuarios. La experiencia del desarrollador web analista / diseñador, en este caso, juega un papel clave. Sin embargo, un sitio de Internet evoluciona con el tiempo, mejora, añade características que no se pueden resolver de otras maneras, en caso de no forzar el uso de una tecnología en particular: la visión de un video (en Flash, QuickTime o cualquier otro) es difícil -- si no imposible - de conseguir en el estándar HTML?

Mejora progresiva

Este planteamiento es probablemente lo que personalmentre prefiere. Es el opuesto exacto de la degradación de graciosos. Para aquellos que disfrutan el uso de hojas de estilo es una técnica ya conocida: desde la estructura básica, el simple de marcas, y como agregar todas las características avanzadas. Con el trazado, a continuación, el CSS es el enfoque utilizado para el "reemplazo o sustitución de imágenes por hoja de estilo de texto con una imagen (hay algunas otras técnicas que explotan incluso Ajax o Flash).

De gran interés en este tipo de enfoque, es difundir la llamada discreto JavaScript: que no es intrusivo. Esta técnica puede mejorar la funcionalidad de un sitio Web mediante la explotación de la capacidad de manipular el código JavaScript DOM. Al colocar en un JavaScripts oportunamente en la página usted puede hacer para que sean transparentes para los navegadores que soporten JavaScript (o tiene Javascript desactivado), pero trabajando para otros.

Las características de un discreto JavaScript son:

  • Las mejoras o modificaciones - no implementado - características ya
  • La transparencia en los agentes de usuario que no soportan o desactivar el Javascript

El punto 1 es esencial para la accesibilidad, de la misma manera », utilizada en la sustitución de la imagen CSS. Un ejemplo es brusca, lo que mejora la visibilidad de un vínculo. Snap es un ejemplo clásico de un discreto JavaScript: JavaScript desactivado si el enlace está aún presente y su funcionamiento, sin embargo, si JavaScript está activada la funcionalidad de vista previa, se añade. También, si usted no puede acceder a JavaScript no aparece el mensaje: Punto 2 - no intrusiva.

Otro ejemplo de JavaScript no obstructivo bien hecho y Lightbox JS, que mejora la presentación de diapositivas de las imágenes. A partir de una serie de enlaces (etiqueta <A>) con el atributo rel es capaz de mostrar correctamente las imágenes vinculadas en una realidad catchy!

Esta técnica es muy versátil y permite un verdadero acercamiento Mejora progresiva - y, sin exagerar, un verdadero web2.0 enfoque.

En este escenario el uso del prototipo de la biblioteca es de acceso fácil a los DOM HTML permite reemplazar y añadir funcionalidad a los elementos de una página, haciéndolos más versátiles.

Ambas técnicas, por lo tanto, permiten realizar al final de los sitios Web verdaderamente accesible. Por el contrario, requieren atención y trabajo adicional al final es recompensado con una mayor cantidad de visitantes! Yo, personalmente adoptar la técnica de Mejora progresiva, por una puramente subjetiva y del hábito. Elija entre las dos técnicas pueden ser indiferentes a la experiencia, junto con el tipo de proyecto que debe desarrollarse, sin duda juega un papel clave.

Como un ejemplo vale más que mil palabras, propongo que antes de mosrtare algunos extractos de código simple verdaderamente iluminado.

Post relacionados

Fue útil esta información?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Cargando ...

4 comentarios a "Accesibilidad y Usabilidad: discreta Javascript"

  1. getAvatar 1,0
    06 de abril 2007 de accesibilidad y "usabilidad:: K4 [U]:::

    [...] Accesibilidad y Usabilidad: discreta Javascript ... [...]

  2. getAvatar 1,0
    09 dic, 2007 upnews.it:

    Undolog | Blog Archive | Accesibilidad y Usabilidad: discreta Javascript ...

    Permitir a los usuarios interactuar con una página Web producido en los últimos años un aumento significativo en el uso del cliente-scripts lado: el código Javascript puede responder en tiempo real y manejar una variedad de información. La Web 2.0 ...

  3. getAvatar 1,0
    23 de junio 2008 en técnicas de reemplazo de texto HTML / CSS | Undolog.com:

    [...] Página Web es sustituir la operación de las hojas de estilo (véase la mejora progresiva en Accesibilidad y Usabilidad: discreta Javascript). Esta técnica permite hacer accesibles los contenidos del sitio, independientemente de [...]

  4. getAvatar 1,0
    09 Ott, 2008 Mejora progresiva: la mejora de la experiencia del usuario para los navegadores modernos - Francesco Gavello Webdesign Portfolio:

    [...] Accesibilidad y Usabilidad: discreta Javascript. Undolog.com Excelente artículo que habla de Javascript discreta aborda ambas cuestiones con una visión general de [...]

Deja tu comentario

TAG XHTML RESTRICCIONES: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción:
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL