Diseño Web, Usabilidad y Accesibilidad

Tipografías más usadas en diseño web

2008-10-27T19:25:00.012-06:00

El presente artículo pretende presentar información general sobre las tipografías más populares en el diseño web. Como muchos ya saben, existe un grupo de fuentes llamadas fuentes seguras para web (web-safe fonts en inglés), las cuáles son las únicas que un buen diseñador web debe utilizar un un sitio web. El artículo muestra las razones por las cuales esto ocurre así, además de referencias a alternativas como sIFR para utilizar otras tipografías en web, e incluso listados estadísticos sobre las tipografías instaladas por defecto en los navegadores más populares. También se incorpora una traducción de algunos segmentos del artículo "16 best-loved font bits in web design" presentado en InspirationBit.com, donde se presenta una breve reseña histórica de las tipografías más populares.

¿Por qué no se puede usar cualquier tipo de letra en diseño web?

Los navegadores (programas como Internet Explorer, Opera, Safari, Firefox, Google Chrome, etc) son los programas encargados de interpretar cada diseño web, para esto, utilizan las tipografìas instaladas en el Sistema Operativo (Windows, Linux, MacOS, etc) donde se esten ejecutando. Dado que no todos los sistemas operativos tienen las mismas tipografías instaladas, es recomendable utilizar aquellos fonts que estén instalados en todos los sistemas operativos más populares.

¿Cuáles son las tipografías instaladas por defecto en los S.O. más populares?

El sitio FontTester.com se ha dado la tarea de presentar el listado de fuentes seguras para web, el cual presentamos a continuación en el formato típico en el que se utiliza en archivos CSS:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

¿Cómo puedo saber cuáles fonts están instaladas en cada sistema operativo?

La presente imagen se tomó de "Browser News" el 27 de octubre de 2008, esperamos que sea una referencia suficientemente clara sobre las fuentes más comunes en cada sistema operativo.

¿Qué alternativa se tiene para utilizar una tipografìa que no es web-safe?

Para este tema, le recomendamos leer nuestro artículo sobre sIFR, una técnica que combina JavaScript y Flash para lograr este objetivo sin tener que exportar como imagen un segmento de texto.

Breve reseña histórica de las tipografías más utilizadas

A continuación se presenta una breve reseña histórica sobre las tipografías más utilizadas para diseño web, los créditos del artículo original le corresponden al sitio "InspirationBit.com", de donde estamos traduciendo un segmento relacionado con las tipografías más conocidas:

Helvetica, Helvetica Neue, Arial:

Helvetica fue creada por diseñadores suizos hace 50 años y es una de las fuentes sans-serif más ampliamente conocidas. Muchas compañías populares como American Airlines, Lufthansa y Toyoya escogieron esta tipografía como parte de su mercadeo e identidad gráfica. Hay muchas variaciones de Helvetica, en 1983 Linotype lanzó Helvetica Neue redibujando toda la familia Helvetica. Muchos consideran que Arial, diseñada 30 años después que Helvetica fue la imitación barata de esta, sin embargo, tiene más similitudes con Univers que con Helvetica

Verdana

Verdana fue diseñada específicamente por Microsoft en 1996 con el propósito de crear una tipografía que fuera fácil de leer en un tamaño muy pequeño de una pantalla. El no tener serifs, su proporción ancha y la pérdida de espacio entre letras hacen que sea una fuente extremadamente legible para sitios web.

Georgia

Georgia es otra fuente ordenada por Microsoft en 1993 que tiene bastantes similitudes con Times New Roman, pero es sustancialmente más larga. Funciona realmente bien tanto en tamaños grandes como en tamaños pequeños, y es usualmente seleccionada por los diseñadores web como una sustituta de la ya muy utilizada Times New Roman.

Trebuchet

Una vez más, Microsfot solicitó el diseño de otra muy buena fuente para web también en 1996. Funciona especialmente bien para títulos grandes y es ahí donde se utiliza más popularmente.

Fuentes:

Browser News
InspirationBit.com
FontTester.com

DIV y CSS vs Tablas. Maquetación web. Razones para utilización de DIVs y CSS

2008-08-20T17:26:00.006-06:00

Hace algunos años era normal que la maquetación HTML de todos los sitios estuviera realizada utilizando la etiqueta table para dar forma al diseño, estructura de las diferentes secciones de un sitio web, etc... Desde hace unos años se viene utilizando en vez de esto la etiqueta div y apoyándose en estilos de archivos .css para dar cuerpo a la forma (layout) de un sitio web.

La discusión sobre cuál de las dos formas es mejor es un tema muy tratado ya en Internet, la práctica y la tendencia escogida por los principales proyectos web demuestra que lo mejor es la utilización de DIVs/CSS sobre las tablas.

Ahora bien, muchos webmasters deben dar una explicación a sus clientes sobre por qué escoger una forma u otra, incluso algunos webmasters siguen poniendo en duda las ventajas de una forma sobre otra. Adjuntamos dos enlaces sumamente útiles para hacer esta justificación:

http://css-discuss.incutio.com/?page=WhyCss

http://www.hotdesign.com/seybold/10filesize.html

El primer artículo describe en español básicamente los siguientes puntos, los cuales son contundentes en la justificación:

1. Editando un solo archivo CSS puede hacer cambios drásticos a un diseño completo en segundos.
2. CSS le permite tener un output en múltiples formatos de una forma muy sencilla
3. CSS le permite usar nombres para cada elemento de una página. Usted por ejemplo puede darle a un DIV el nombre de "Encabezado" que describe perfectamente el contenido de su HTML.
4. Los CSS externos se quedan almacenados en el cache de los navegadores por lo que se reduce el tiempo de descarga de un sitio web
5. CSS elimina código innecesario y obsoleto, por ejemplo la etiqueta font, gifs spacer, tablas encadenadas. Todo esto mejora el tiempo de carga y hace la vida del desarrollador más fácil
6. CSS permite hacer cosas más interesantes que el HTML por sí sólo no permite como un mejor control de los tipos de letra, posicionamiento absoluto, borders más elegantes, etc.
7. El buen uso de CSS mejora la accesibilidad y la lectura que tienen los motores de búsqueda sobre un sitio web.
8. El uso de :hover en CSS elimina el uso de Javascript para crear efectos de onmouseover.
9. Si quiere validación XHTML strict no le queda otro camino que usar este método.

¿Dónde encontrar recursos gráficos buenos para mi sitio web?

2008-07-10T11:10:00.003-06:00

Encontramos esta serie de enlaces que queremos recomendar como buenas fuentes de recursos gráficos, especialmente para proyectos web.

Texture King
Free Background Tiles
Creamed Ice Graphics
Kaliber10000
Buttonland
Sub Dimension Studios
Pattern4u
Free Logo Templates

Esperamos que los enlaces les sean de mucha utilidad

¿Cuáles son algunos de los stock de fotos gratuitos más populares?

2008-07-09T09:01:00.003-06:00

En muchos casos, los clientes de diseño web desean excelentes fotografías en su proyecto, sin embargo, no cuentan con este material fotográfico ni con los recursos para generar sus propias fotografías profesionales, algunos cuentan con los recursos para adquirir fotografías en stocks en los que se paga algún tipo de membresía o derechos sobre una fotografía específica.

El siguiente es un breve listado de algunos de los stock de fotografías gratuitos que han ido ganando popularidad.

OpenPhoto
morgueFile
Free Picture
Pixelio.de
Royalty free images
Bigfoto.com
FreeStockPhotos.com
FreeFoto.com
Freeimages.com

¿Dónde puedo descargar fonts de forma gratuita?

2008-07-09T08:56:00.002-06:00

Queremos publicar un breve listado de algunos enlaces que han ido ganando popularidad entre los diseñadores de todo tipo para descargar diferentes fonts, la mayoría de ellos permiten descargar fuentes de forma gratuita, esperamos que los enlaces les sean de utilidad:

9800 Free Fonts
Best Free Fonts
DaFont.com
All-4-Free Fonts
1001FreeFonts

¿Cómo saber cómo se veía un sitio web hace algún tiempo?

2008-05-03T14:12:00.003-06:00

The WayBackMachine 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.

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.

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.

¿Qué es WAI-ARIA? ¿Cómo hacer un sitio web en Ajax y que sea accesible?

2008-05-03T14:01:00.003-06:00

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.

Ante esta necesidad, nació el proyecto WAI- ARIA (Accessible Rich Internet Applications), 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.

El proyecto está avanzado y ya existe una especificación técnica 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.

Más información:

http://www.w3.org/WAI/intro/aria
http://www.w3.org/WAI/guid-tech.html

Feng-GUI, un generador de mapas de calor.

2008-04-08T17:11:00.005-06:00

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 Feng-GUI, 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.

La siguiente imagen muestra un ejemplo de un mapa de calor para el sitio web de InterGraphicDESIGNS.

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.

TAW. Test de Accesibilidad Web

2008-04-08T13:21:00.002-06:00

TAW 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.

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.

Los resultados del test se basan en las reglas desarrolladas por la Iniciativa de la Accesibilidad Web (WAI) que pertenece al World Wide Web Consortium (W3C). Estas recomendaciones, denominadas Pautas de Accesibilidad al Contenido Web 1.0 (WCAG 1.0) son normas "de facto" aceptadas universalmente.

Le invitamos a conocer más del Test de Accesibilidad Web (TAW)

Validar el contraste de colores en un sitio web

2008-04-07T17:39:00.002-06:00

Una 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.

Existen diferentes tipos de déficit visual, por lo tanto, estas herramientas (en especial Vischeck) presenta como se vería un sitio web para alguien con los diferentes tipos de dificultades.

Colour Contrast Check y Colour Contrast Analyser 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.

¿Cómo emular un lector de pantalla?

2008-04-07T17:10:00.003-06:00

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.

Conocer más de Fangs

¿Cómo consultan las personas no videntes una página web?

2008-04-07T15:57:00.003-06:00

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.

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.

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.

Para realizar pruebas y conocer cómo funcionan en general los lectores de pantalla, recomendamos JAWS, uno de los lectores más populares.

Los principios de un buen diseño web

2008-04-01T10:55:00.000-06:00

Jason 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): http://www.sitepoint.com/article/principles-beautiful-web-design/2