tag:blogger.com,1999:blog-56438276506883522322008-05-03T14:20:18.313-06:00Diseño Web, Usabilidad y AccesibilidadInterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-5643827650688352232.post-28622565899073321072008-05-03T14:12:00.003-06:002008-05-03T14:20:10.362-06:00¿Cómo saber cómo se veía un sitio web hace algún tiempo?The <a href="http://www.archive.org/index.php">WayBackMachine</a> es un excelente proyecto que nos permite "regresar en el tiempo" y ver el registro histórico de cómo se veía un sitio web en años anteriores. Realizamos una búsqueda de "intergraphicdesigns.com" en el proyecto por medio del sitio archive.org y pudimos ver el primer sitio que se puso al aire de nuestra empresa el 21 de julio de 2002.<br /><br />Para cada sitio, el proyecto muestra una tabla de aquellas fechas a las que podemos "regresar" y así estudiar cómo se veía un sitio unos años atrás.<br /><br />La herramienta almacena el código de una página web a través de la historia, no así todas sus imágenes, por lo que la reprducción de un sitio anterior no es perfecta. Sin embargo, el proyecto es una excelente herramienta para estudio y recuperación de información entre muchos otros usos que se le ha ido dando.InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comtag:blogger.com,1999:blog-5643827650688352232.post-39300518522147106452008-05-03T14:01:00.003-06:002008-05-03T14:07:43.334-06:00¿Qué es WAI-ARIA? ¿Cómo hacer un sitio web en Ajax y que sea accesible?Existe una tendencia fuerte en el mundo web 2.0 a realizar cada vez más aplicaciones basadas en Ajax, Javascript, etc; esto representa una dificultad para las personas con discapacidad visual que utiliza lectores de pantalla, o en algunos casos para aquellas personas que no pueden utilizar un mouse por discapacidades motoras.<br /><br />Ante esta necesidad, nació el proyecto WAI- ARIA (<strong style="font-weight: normal;">Accessible Rich Internet Applications)</strong>, como un esfuerzo para encarar el problema, y lograr que los desarrolladores de sitios web podamos crear aplicaciones con contenido dinámico, basadas en Ajax incluso, sin dejar de lado el hacer un proyecto totalmente accesible para personas con este tipo de discapacidad.<br /><br />El proyecto está avanzado y ya existe una <a href="http://www.w3.org/TR/wai-aria/">especificación técnica</a> como parte de lo que se lleva de este trabajo, la cual tiene fecha de febrero 2008. Los fabricantes de navegadores prestan atención a esta iniciativa, e incluso Microsoft anunció que contará con soporte para esas especificaciones en su Internet Explorer 8.<br /><br />Más información:<br /><br /><a href="http://www.w3.org/WAI/intro/aria">http://www.w3.org/WAI/intro/aria</a><br /><a href="http://www.w3.org/WAI/guid-tech.html">http://www.w3.org/WAI/guid-tech.html</a>InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comtag:blogger.com,1999:blog-5643827650688352232.post-2656890300997589152008-04-08T17:11:00.005-06:002008-04-08T17:27:39.843-06:00Feng-GUI, un generador de mapas de calor.Una dinámica sumamente interesante de realizar con cualquier sitio web es aplicar un mapa de calor. Un mapa de calor es una imagen que tiene como objetivo remarcar aquellas áreas de una imagen que llaman más la atención. Para hacerlos formalmente se requieren estudios serios y costosos, usuarios de prueba, etc. Sin embargo, recientemente se ha popularizado la búsqueda de<a href="http://www.feng-gui.com/"> Feng-GUI</a>, un sistema que utiliza un algoritmo de inteligencia artificial que simula la visión de los humanos, creando de esta forma mapas de calor bastante aproximados a los que se generarían con humanos reales y casos de prueba formales.<br /><br />La siguiente imagen muestra un ejemplo de un mapa de calor para el sitio web de <a href="http://www.intergraphicdesigns.com/">InterGraphicDESIGNS</a>.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.intergraphicdesigns.com/blog/diseno-web/uploaded_images/91b1fb77-8068-41c4-bcd5-449a49426c4d%282%29-754110.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://www.intergraphicdesigns.com/blog/diseno-web/uploaded_images/91b1fb77-8068-41c4-bcd5-449a49426c4d%282%29-754104.png" alt="" border="0" /></a><br /><br />Los mapas de calor son una excelente técnica para tomar decisiones de diseño y posicionamiento de algunos elementos en un sitio web, en especial aquellos que desean vender publicidad en línea, dedicarse al comercio electrónico, etc.InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comtag:blogger.com,1999:blog-5643827650688352232.post-59729152562004368172008-04-08T13:21:00.002-06:002008-04-08T13:30:11.268-06:00TAW. Test de Accesibilidad WebTAW son las iniciales de Test de Accesibilidad Web, es una herramienta destinada a analizar la accesibilidad de sitios web. El objetivo que se ha propuesta esta iniciativa es: "Comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de paginas web con el fin de permitir el acceso a todas las personas independientemente de sus características diferenciadoras". La herramienta está destinada especialmente a profesionales de campo como webmasters, desarrolladores y diseñadores de páginas web.<br /><br />La herramienta evalúa la accesibilidad entendiéndola como el acceso a la información contenida en los sitios web sin limitación alguna por razón de deficiencia, discapacidad, o tecnología utilizada sin que interfieran por ejemplo: problemas de oído, visión, movilidad; dificultades de lectura o compresión cognitiva, imposibilidad de utilización del teclado o el ratón, entre otros varios factores.<br /><br />Los resultados del test se basan en las reglas desarrolladas por la <a href="http://www.w3.org/WAI">Iniciativa de la Accesibilidad Web</a> (WAI) que pertenece al <a href="http://www.w3c.es/">World Wide Web Consortium</a> (W3C). Estas recomendaciones, denominadas <a href="http://www.w3.org/TR/WAI-WEBCONTENT/">Pautas de Accesibilidad al Contenido Web 1.0</a> (WCAG 1.0) son normas "de facto" aceptadas universalmente.<br /><br />Le invitamos a conocer más del <a href="http://www.tawdis.net/taw3/cms/es/">Test de Accesibilidad Web (TAW)</a>InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comtag:blogger.com,1999:blog-5643827650688352232.post-2509109217716223302008-04-07T17:39:00.002-06:002008-04-07T17:51:47.771-06:00Validar el contraste de colores en un sitio webUna tarea que es sumamente importante en el diseño web, y que es desconocida por una gran cantidad de diseñadores, es el verificar que la combinación de colores que están utilizando tenga un contraste suficiente, de manera que aquellas personas que tienen problemas visuales relacionados con el reconocimiento de colores, no tengan problemas consultando el sitio web que desarrollan.<br /><br />Existen diferentes tipos de déficit visual, por lo tanto, estas herramientas (en especial <a href="http://www.vischeck.com/vischeck/vischeckURL.php">Vischeck</a>) presenta como se vería un sitio web para alguien con los diferentes tipos de dificultades.<br /><br /><a href="http://www.snook.ca/technical/colour_contrast/colour.html">Colour Contrast Check</a> y <a href="http://juicystudio.com/services/colourcontrast.php">Colour Contrast Analyser</a> son otras herramientas con el objetivo de advertir a un diseñador web si su combinación de colores no tiene un contraste lo suficientemente fuerte para lograr que su sitio web sea accesible para personas con deficiencias en el reconocimiento del color.InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comtag:blogger.com,1999:blog-5643827650688352232.post-29640711102863856102008-04-07T17:10:00.003-06:002008-04-07T17:12:04.785-06:00¿Cómo emular un lector de pantalla?Para este objetivo nuestra recomendación es utilizar Fangs, una extensión de Firefox que presenta en pantalla una simulación aproximada de cómo leería un lector de pantalla como JAWS un sitio web determinado. Esta es una excelente forma de verificar de una forma rápida, la accesibilidad de un sitio web para personas no videntes.<br /><br />Conocer más de <a href="http://sourceforge.net/projects/fangs">Fangs</a>InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comtag:blogger.com,1999:blog-5643827650688352232.post-63047717468695111912008-04-07T15:57:00.003-06:002008-04-07T17:12:39.015-06:00¿Cómo consultan las personas no videntes una página web?Muchos desarrolladores de sitios web han leído sobre la necesidad e iniciativas de legislación para hacer sus sitios web accesibles a personas no videntes, ante esto, les surge la pregunta sobre cómo consultan las personas no videntes los sitios web.<br /><br />La respuesta a esto está en los programas lectores de pantalla, son programas que toman la información (textos) de la página web y la leen en voz alta a un usuario, es decir, convierte la información escrita en información auditiva para los usuarios.<br /><br />Esto representa un reto importante, pues estos lectores de pantalla no pueden reconocer el texto inmerso en algunas imágenes o archivos de Flash, de ahí, que en temas de accesibilidad, lo recomendable es tener la totalidad de la información indispensable de un sitio web en texto, y no utilizando imágenes ni animaciones; esta es también la razón por la que se recomiendan atributos html como alt, title, y otros.<br /><br />Para realizar pruebas y conocer cómo funcionan en general los lectores de pantalla, recomendamos <a href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a>, uno de los lectores más populares.InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.comtag:blogger.com,1999:blog-5643827650688352232.post-37034799731478815762008-04-01T10:55:00.000-06:002008-04-01T11:01:52.895-06:00Los principios de un buen diseño webJason Beaird publicó un excelente artículo en SitePoint.com sobre los principios para un buen diseño web, describiendo un reto que todo diseñador enfrente al inicio de un proyecto, desde el descubrir el rol de la compañía para quien diseña, ir logrando una identidad gráfica (en algunos casos hay que diseñar para organizaciones que no tienen una identidad gráfica definida), ir afinando tanto el diseño como el contenido web, y mucho más. Le recomendamos leer el artículo completo en el siguiente enlace (En Inglés): <a href="http://www.sitepoint.com/article/principles-beautiful-web-design/2">http://www.sitepoint.com/article/principles-beautiful-web-design/2</a>InterGraphicDESIGNShttp://www.blogger.com/profile/04282302770207311617noreply@blogger.com