28 de abril de 2007

Tipografía en la web

El diseño digital tiene sus problemas propios, a los que se suma el hecho que existen diferentes plataformas y distintos monitores, y nunca es posible saber exactamente cómo un mismo website será visto por los diferentes usuarios.

La tipografía en la web es un tema nuevo, y si bien pueden aplicarse muchas reglas del medio impreso, existe un número importante de características propias del medio digital que deberán considerarse para redefinir pautas. En este momento, estas últimas están siendo creadas con el sistema de prueba-error. Las diferencias más importantes pueden enumerarse de la siguiente manera:

  • La orientación de las páginas es normalmente horizontal, en lugar de vertical;
  • Generalmente no se ve al mismo tiempo la totalidad del material;
  • El diseñador tiene mucho menor control de la tipografía y de la puesta en página que en el material impreso;
  • En general, la resolución es menor, por lo que los detalles finos no están bien definidos;
  • Por todo lo expuesto anteriormente, la velocidad de lectura es aproximadamente un 30% menor;
  • Los lectores escanean en lugar de leer, por lo que la comprensión y retención se reduce a un 50%;
  • Se suman las barras de scroll como problema/obstáculo;
  • El hipertexto es más fácil.

En un principio, era sumamente complicado tener un control de la tipografía y el creador de un website tenía muy poco control sobre cómo el usuario lo vería verdaderamente.

Desde la creación de las Cascading Style Sheets (CSS) –algo así como Páginas de Estilo–, una característica disponible en la mayoría de los browsers de la actualidad, es posible controlar varios aspectos de la tipografía y del formato de la página en general.

El buen uso de la tipografía depende del contraste visual entre fuentes y entre los bloques de texto y el blanco. El ojo es naturalmente atraído por los contrastes.

El mecanismo de la lectura consiste en el reconocimiento de la forma general de las palabras; no en reconocer cada letra para luego juntarlas y formar la palabra. El ojo escudriña la parte posterior de las letras en el momento de leer y es por ello que las palabras compuestas todas en mayúsculas tienen menor legibilidad.

El ojo ve primero el conjunto de la puesta en página y el contraste que la misma presenta, para pasar en segundo plano al reconocimiento de las partes y por último, llegar al detalle de las palabras.

El uso de textos en pantalla viola las convenciones sobre las reglas básicas creadas para las piezas impresas. Las líneas de los bloques de texto son, en general, mucho más largas que lo necesario para una lectura relajada. En libros o revistas, por ejemplo, a una distancia del papel normal, el alcance ocular a lo ancho es de unos 8 cm, y es por eso que los párrafos (standard) conservan estas proporciones. El uso de líneas más anchas requieren que el lector gire su cabeza ligeramente o fuerce los músculos del ojo para poder seguir las líneas. Desgraciadamente, gran parte de las páginas en la web tienen el doble de ancho del alcance normal del ojo, por lo que se requiere de un esfuerzo extra para leer estos textos. Además, si la línea es demasiado ancha, como al ojo le cuesta ir de un extremo al otro, provoca que esa línea sea salteada o leída dos veces.

Como dijéramos anteriormente, con el uso de CSS es posible controlar varios aspectos de la puesta en página y, por lo tanto, hacer párrafos de líneas más cortas e incrementar la interlínea, que al ser utilizada generosamente (un 150% más que en impresión) mejora notablemente la legibilidad. Esto especialmente en tipografías sans serif, que no cuentan con la guía horizontal que forman las serifas, y que ayudan al ojo a seguir el flujo de texto.

La elección de la tipografía a utilizar es de suma importancia en el diseño digital, como lo es, por supuesto, en las piezas de diseño impreso.

Hay tipografías diseñadas especialmente para la pantalla y otras producidas por un cálculo basado en una descripción por software de la fuente. Las fuentes para pantalla están pensadas para calzar en la grilla de pixeles y cada caracter está pensado y optimizado en función a ésta. Las tipografías están diseñadas para ser usadas en tamaños específicos, como cuerpo 8, 9, 10, 12, 14, etc. Si se las utiliza en un cuerpo para el que no han sido pensadas, como por ejemplo cuerpo 11 ó 13, van a ser generadas mediante un cálculo que aproxima visualmente al tamaño solicitado, pero que pierde todas las sutilezas de diseño original.
Copyright © (bi)gital» 2001 | http://bigital.com/

19 de abril de 2007

Flash, Photoshop Portadas y Versiones



Guidebookgallery.org nos deja recordar las antiguas versiones de los programas de diseño ( OS y otros) que usabamos los diseñadores años atras.
La evolución de Flash y capturas de sus versiones ateriores: La evolución de Adobe Photoshop y sus capturas de pantalla.
Me acuerdo haber empezado a usar Macromedia Flash en su version 4 y Adobe Photosop en su version (creo) que 4. No se si es util, pero vale la pena acordarse.

16 de abril de 2007

Browsershots - Test para tu sitio en Navegadores




Browsershots
permite testear/probar como se veria un sitio en distintos navegadores, permitiendo definir tambien distintas resoluciones de pantalla (800x600, 1024x768).





Los Navegadores en los cuales chequea un sitio son:


  • Epiphany 1.4.8
  • Firefox 1.0.4
  • Galeon 1.3.20
  • Konqueror 3.3
  • Mozilla 1.7.8
  • MSIE 6.0
  • Opera 8.50
  • Safari 2.0

Link: http://browsershots.org/

Fuente: http://wwwhatsnew.com

14 de abril de 2007

Cdlibre.org - Software GNU

CDLIBRE.ORG es un sitio que existe desde el año 2003, creado por un profesor de Informatica de Valencia (España), alojado en el Instituto de Robótica de la Universidad de Valencia,

El sitio en el que dar a conocer programas libres / gratuitos ordenados por categorias e inculso permite descargar imagenes de CD o DVD con bibliotecas de software para utilizar.

Entre ellos DVD-Fuentes, que incluye el código fuente de todos los programas cuyo código fuente está disponible.
Acceder a CDLIBRE.ORG

Aplicaciones Web 2.0

Dos sitios que recopilan el listado de aplicaciones nuevas de la web 2.0.
Listible : http://www.listible.com
Web2list : http://www.web2list.com

12 de abril de 2007

Fotografias Gratis - Stock.XCHNG

Stock.XCHNG : Completa colección con más de 250.000 imágenes de altisima calidad para descargar en forma grtuita para utilizar simplemente registrandose en el sitio.
Imagenes separadas por categorias y descargas.


Herramientas de accesibilidad web

El sitio Accessify ofrece una serie de herramientas que nos ayudaran a crear webs más accesibles. Son wizards o herramientas sencillas pero que nos pueden facilitar mucho el trabajo.

Entre las herramientas tenemos un generador de tablas, de formularios (con o sin tablas), de pop-ups y otros más. A parte, nos ofrece una lista de aplicaciones generales, no centradas en la accesibilidad, pero que también serán de gran ayuda: generador de capas o de listados, un script para escapar código HTML para incluirlo en nuestras páginas, ...
Acceso a Accessify: http://www.accessify.com/tools-and-wizards/
fuente: http://sentidoweb.com/

10 de abril de 2007

Paleta de Colores - "Kuler"




Excelente aplicacion de Adobe Labs llamada Kuler, permite preparar automaticamente paleta de colores
Dispone de varias paletas creadas por diseñadores y usuarios, las paletas mas populares y permite crear y guardar para compartir paletas personalizadas de hasta 5 colores colores para proyectos web, graficos o multimedia.
Herramienta interesante y muy util para seleccionar colores de fondo, tipografias, bordes, iconos y logos.
Link: http://kuler.adobe.com

9 de abril de 2007

El Título de la página

El Título de la página

Introducción

El título de la página es un metadato acerca del contenido de la página, que se define a través de la etiqueta HTML

Definir el título en todas las páginas que conforman el sitio web es una norma básica que aumenta considerablemente la 'findability' de la información contenida en cada página. Además, no definirlo supone mostrar una imagen poco profesional del sitio web y su diseño.

Al contrario de lo que pudiera parecer, el título de la página no es un elemento de orientación del usuario en su navegación, ya que la mayoría de los usuarios ni tan siquiera advertirán su existencia.

La utilidad real de definir el título de la página y hacerlo correctamente, se presenta cuando:

  • El usuario ojea su lista de favoritos (a la que previamente ha añadido la página en cuestión).
  • El usuario ojea la lista de resultados de un motor de búsqueda o un buscador interno, dónde se suele mostrar por cada página el título, un breve resumen o extracto y la URL. De estos tres elementos, el título es el que aparecerá siempre más enfatizado.
  • El usuario tiene abiertas varias ventanas en su escritorio.
  • El usuario navega a través del historial de su navegador.
  • El usuario explora alguna carpeta de su disco local, dónde previamente había guardado la página.
  • Un robot de búsqueda indiza el sitio web.

Sugerencias generales

No defina el mismo título para todas las páginas que formen el sitio web. Esto suele pasar en sitios web que utilizan marcos, otra razón más para no utilizarlos. En un sitio web, cada página contiene información diferente, y el título siempre debe describir la información contenida en la página.

El título debe ser breve, ya que la parte final de la cadena de caracteres de un título largo no será visible para el usuario en ninguna de las situaciones descritas en la introducción de este artículo.

Por esta misma razón, también debe mantener una jerarquía de información entre los elementos que formen el título, colocando al principio los más importantes. El siguiente título 'Post 13 Diciembre 2002 : Qué es la Usabilidad' sería más correcto de la siguiente forma 'Qué es la Usabilidad (Post 13 Diciembre 2002)'.

Suprima, cuando sea posible, las palabras vacías de significado al principio del título, como artículos o frases del tipo 'Bienvenido a...'.

Si utiliza signos de puntuación en el título, recuerde que los siguientes caracteres:

\ / : * ? " < > |

'desaparecerán' del título una vez los añada el usuario a su lista de favoritos o guarde la página en su disco local, por lo que si el título los contiene asegurese de que éste siga comunicando el mismo significado sin ellos.

Deformar el texto de un título, como en el siguiente ejemplo:

'D I S E Ñ A D O R E S W E B'

puede llamar la atención del usuario cuando ojea su lista de favoritos o los resultados de un buscador, aunque conlleva varios inconvenientes: connota poca profesionalidad, disminuye la legibilidad, y más importante, dificulta la indización de la página por parte de los robots de búsqueda, por lo que podemos vernos perjudicados con respecto a nuestra competencia en cuanto a nuestro posicionamiento en los resultados de búsqueda.

La Home Page

Las páginas de inicio o home pages, por sus características intrínsecas y diferentes respecto del resto de páginas del sitio web, si bien le son aplicables todos los consejos y sugerencias descritas anteriormente, merecen un tratamiento especial de su título.

Como en todas las páginas del sitio web, el título de la página de inicio debe describir su contenido. La mejor forma de hacerlo es indicando en el título el nombre y una breve explicación del sitio web, por este orden.

Nombre del sitio web

El nombre del sitio web no lo incluya en forma de semi-URL. Es decir, es preferible usar 'El Corte Inglés' a 'ElCorteIngles.es', 'www.elcorteingles.es' o 'http://www.elcorteingles.es'. Sólo en sitios web dónde el nombre de dominio de nivel superior (.com, .net, etc..) forme parte de la identidad de la empresa u organización, se debe incluir en el título de la home.

Si el nombre de dominio del sitio es un acrónimo, no encabece el título de la home con ese acrónimo, a no ser que sea más conocido así que de la forma expandida.

En nombres de sitios web que estén formados por más de una palabra, si cada una de esas palabras tiene significado por sí sola, debería escribirlas separadas en el título, para que los robots de búsqueda puedan indizar el sitio web de forma óptima.

Descripción del sitio web

En el título de la home, además del nombre, debe exponer una breve explicación o descripción de cuál es el contenido o finalidad del sitio web.

Si el sitio web posee ya un eslogan, y éste es verdaderamente descriptivo y significativo, utilícelo en el título de la home. No incluya frases vacías de autopromoción como 'Empresacualquiera.com - El mejor sitio web' o 'Empresacualquiera.com - Profesionalidad, rapidez y eficacia'.

La descripción que se debe exponer es la del sitio web, no la de la página. Por ello absténgase así mismo de utilizar frases explicativas del tipo 'Página de Inicio'.

Conclusiones

Consejos y sugerencias tan sencillos como los indicados en este artículo pueden aumentar considerablemente la findability de las páginas del sitio web, no únicamente desde el navegador y escritorio del usuario, o desde los resultados en motores de búsqueda, sino también en el propio sitio web desde los resultados mostrados por el buscador interno.

Para concluir habría que recordar que la elección del título de la página no debe realizarse de forma aislada por cada una de las páginas del sitio web. Es imprescindible su planificación en las primeras fases de desarrollo del sitio web, y de acuerdo a un control terminológico sistematizado. Es por ello que el responsable lógico de definir el título de las páginas (así como del resto de sistemas de rotulado) es el Arquitecto de la Información.

Notas

* Microsoft Explorer almacena las páginas guardadas desde el navegador con el nombre del título de la página, aunque otros navegadores como Mozilla no lo hacen de esta forma. Otra diferencia es que Explorer almacena en la lista de favoritos las páginas como si fueran archivos, por lo que no permite ciertos caracteres especiales

fuente: http://www.nosolousabilidad.com
Yusef Hassan Montero
Grupo SCImago, Universidad de Granada

Mitos sobre Accesibilidad y Estándares Web

Mitos sobre Accesibilidad y Estándares Web

1. “Si mi sitio Web está hecho con estándares, será aburrido y perderé clientes.”
Con los estándares W3C, podrás tener sitios Web muy atractivos. Crear un sitio Web que respete los estándares no tiene nada que ver con generar páginas Web únicamente textuales.
El W3C propone en la actualidad un conjunto de tecnologías integradas muy divertidas. Puedes experimentar un sitio Web completamente multimedia con las existentes tecnologías interoperables del W3C utilizando XHTML (Marcado XML estructurado), CSS (Hojas de estilo), SVG (Gráficos vectoriales animados en 2D), y SMIL (Multimedia Sincronizada). Estas tecnologías han contado con el consenso de los diferentes actores del mercado Web.

2. “ No tengo los medios financieros para preocuparme por los estándares en mi sitio Web. ¡Costará demasiado!”
Diseñar con estándares simplificará el mantenimiento del código del sitio Web porque no tendrás múltiples versiones para diferentes navegadores. Tus páginas tendrán una vida más larga y no dependerán de tecnologías vaporosas. Por tanto, diseñar con estándares Web te costará menos en realidad.

3. “Si respeto los estándares, invadirán mi creatividad.”
Las limitaciones técnicas existen en cualquier medio artístico, bien estés dibujando, esculpiendo, o diseñando páginas Web. Las acuarelas o las pinturas al óleo tienen sus propias limitaciones, pero esas técnicas no bloquean la creatividad, sino que proporcionan una estructura para la expresión creativa.
Crear con los estándares Web abrirá un mundo nuevo con técnicas particulares al medio, la tecnología, la audiencia. Aún hay mucho que explorar en este dominio. Estamos sólo comenzando a explorar los beneficios de las experiencias multimedia basadas en estándares.

4. “No me importa la accesibilidad. Las personas con discapacidades no se encuentran en mi audiencia objetiva.”
Tú te beneficiarás de diseñar con respeto a la accesibilidad. Las personas con discapacidades representan del 8% al 10% de la población total. Es más fácil mantener un sitio Web que sigue las pautas de accesibilidad (y por tanto los estándares Web). El tráfico de tu sitio Web se incrementará, y una más amplia variedad de navegadores tendrán acceso al contenido del sitio.

5. “¿Porqué debería respetar los estándares? La Web es un lugar libre.”
La Web es un lugar libre compartido por muchos usuarios cuyas necesidades no necesariamente conoces. Los estándares han sido diseñados para tener en mente a todas las audiencias potenciales. Es un reto a la comunidad Web el crear con estándares Web. No estarás ligado a ninguna compañía o tecnología propietaria. Puedes usar tecnologías que son independientes de los requerimientos de las plataformas.

6. “Me he limitado a seguir las instrucciones de los libros.”
Desafortunadamente, muchos libros no enseñan buena programación Web. Cuando creas un sitio Web, deberías comprobar la corrección de tu marcado. Si eres un desarrollador Web, se cuidadoso al utilizar los libros para desarrollar tu aplicación y lee las especificaciones particulares que estás tratando de implementar.
Algunos sitios Web están recogiendo buenos materiales para ayudar a la gente a diseñar de acuerdo a los estándares W3C. En el sitio Web del W3C, encontrarás una lista creciente de tutoriales promoviendo buenas prácticas.

7. “Mi editor Web genera marcado no válido.”
Muchas herramientas de autor no generan marcado válido. Algunos tienen incrustados correctores de sintaxis, otros hacen lo correcto, y muchos no generan marcado válido. Como una solución intermedia, tienes que comprobar tu página Web con un validador HTML.

8. “No es culpa mía. Es la forma en que ha sido diseñado el motor de plantillas.”
Estás en lo cierto. A menudo no es culpa tuya. Si es un simple formulario donde tú núnca escribes HTML a mano, escribe al desarrollador de tu interfaz o al mantenedor de su sitio hasta que el problema sea solucionado. Si no estás seguro de si el contenido producido respeta los estándares del W3C, valida el contenido con el validador HTML, y envía el informe a tu Wemmaster, o la persona a cargo del sistema de gestión de contenido.

9. “No existe información para ayudarme. Todos los materiales que he encontrado están en Inglés.”
Algunas personas han traducido documentos y especificaciones a otras lenguas. El W3C mantiene una lista de traducciones.

fuente: http://accesibilidadweb.blogspot.com/