Estandares y Usabilidad de Aplicaciones

Ceguera a los banners, cómo se produce este fenómeno psicológico

2009-02-23T06:35:00.000-08:00

Resumen: La ceguera a los banners es un fenómeno causado por mecanismos psicológicos. Esta ceguera es independiente del contenido de los banners o de la segmentación del usuario objetivo, porque es producida unicamente por el formato del banner. Aunque la ceguera a los banners es citada frecuentemente, no es por todos conocido su funcionamiento real y que este fenómeno explica también una parte importante del comportamiento de los usuarios en Internet.

Cuando un estimulo aparece de forma repetida y frecuente nos insensibilizamos a él. Ello es causado un mecanismo neuronal muy primitivo que existe incluso en animales poco evolucionados. Por ejemplo, si nos pegan 50 pellizcos en el brazo a partir del quinto la sensación de pellizco disminuirá sensiblemente, a partir del décimo casi no sentiremos nada y a partir del vigésimo, nada de nada.

El reflejo de orientación es un mecanismo de defensa que nos hace girar la vista en dirección a cualquier ruido, cosa que se mueva o sea de vivos colores. Este reflejo de orientación es un mecanismo producido por la evolución humana para defenderse de agresiones externas. Hoy en día este mecanismo sirve para poco, pero se muestra, por ejemplo, cuando se abre una puerta y se gira la cabeza en esa dirección. Sin embargo en una habitación donde constantemente entra gente por una puerta al poco tiempo se dejará de girar la cabeza en dirección a la puerta.La desensibilización ocurre de forma más acelerada si la información es irrelevante, es decir, no importa quién entra.

La identificación de los banners se produce por la creación en los usuarios de un esquema perceptivo que a través de determinadas claves visuales de los banners (forma, características, imágenes, fondo llamativo, posición en la página, etc.) permite descartarlos como información a analizar. Esta ceguera visual sirve a los usuarios para discriminar entre contenido de posible utilidad (contenidos reales del sitio) y contenido de nula utilidad (generalmente publicidad). La ceguera es posible debido a este formato llamativo de la publicidad (que proporciona esas claves visuales identificativas).

Lo mismo ocurre con los banners, al principio no es posible quitarles el ojo de encima, pero finalmente los usuarios se vuelven "ciegos" a ellos. Pero no se produce una ceguera a los banners como tales, simplemente se aprenden unas claves visuales para descartar la información irrelevante. La principal de estas claves visuales apunta a la parte superior de la pagina, puesto que esa es la característica más repetida de un banner. Así se aprende a no prestar atención a esa parte de la pagina. Por supuesto si el banner se cambia a la parte inferior de la pagina, recibirá más atención, hasta que finalmente se aprenda a no prestar atención a la parte inferior. Con el reflejo de orientación sucede exactamente igual, si en vez de abrirse la puerta a la derecha (a la que se es insensible), se abre la puerta de la izquierda, se giraría la cabeza de nuevo. Si la nueva puerta se abriese constantemente aparecería la insensibilidad de nuevo.

Los contenidos de los banners

La falta de contenidos útiles y de interés en la publicidad contribuye al origen de la ceguera e induce a los usuarios a descartarla, pero no es una gran diferencia con los otros medios de comunicación. En la radio, la televisión o la prensa, la publicidad raramente nos es útil, pero no existe forma de evitarla.

La diferencia es que en Internet existe una manera de identificar la publicidad, ignorarla y seguir prestando atención al resto de contenidos de interés: su formato chillón, llamativo y muy diferente del formato de los contenidos reales del sitio permite crear el esquema perceptivo antes comentado. Ahí están las claves visuales, en el formato de la publicidad.

Algunos diseñadores suponen que la ceguera a los banners ocurre solo si el banner es irrelevante para el usuario, pero no si el banner es relevante y solo aparece cuando esta muy relacionado con el objetivo o el perfil del usuario. Esto es parcialmente cierto. Si los sitios web hubieran actuado así desde el principio la ceguera a los banners nunca se hubiera producido o no hubiese sido tan acentuada. Pero ha ocurrido exactamente lo contrario, cuanto más ceguera producían los banners, más llamativos y animados se diseñaban para contrarrestarla. Todo ello generó un efecto rebote, a banner más llamativo más rápidamente insensible se volvía la atención a ellos y desarrolló nuevas claves visuales para identificar la información irrelevante. Por esta razón aunque algunos sitios web usen los banners correctamente, los usuarios ya han aprendido a evitar los banners y seguirán aprendiendo, puesto unos pocos diseñadores no pueden cambiar el banner estándar, ni hacer desaparecer la ceguera a corto o medio plazo. La ceguera a los banners es actualmente independiente de los contenidos de los banners.

La influencia de los usuarios noveles

Algunos sitios afirman conseguir tasas de "click-through" demasiado altas para creer que el fenómeno de ceguera a los banners sea universal. Esta afirmación es también parcialmente cierta, la tasa debería ser ridículamente baja si todos los usuarios fueran ciegos a los banners (y en muchos sitios lo es), pero la ceguera a los banners tiene un periodo de aprendizaje que requiere tiempo. Los usuarios noveles de internet no son ciegos a los banners porque aun no han navegado lo suficiente como para desarrollar la insensibilización (aún están en los primeros pellizcos). Al cabo de un tiempo los usuarios se volverán ciegos, aunque actualmente la cantidad de usuarios noveles navegando por Internet es tan que mantienen las tasas de "click-through" en niveles demasiado altos. A pesar de ello, llamar la atención de esos usuarios noveles no es interesante económicamente porque estos raramente se registran o compran en Internet ya que aún no han desarrollado la suficiente confianza en el medio.

Nuevos formatos de banners

Muchos autores optan por crear banners más grandes, con diferentes posiciones en la pagina, de formas diferentes, etc. Todo ello sube fugazmente la efectividad de la publicidad, porque se produce un cambio en el formato y por lo tanto en las claves visuales que ayudan a identificar los banners. Como resultado el esquema perceptivo que identifica banners y los descarta ya no funciona igual de bien. Sin embargo, la mayor efectividad de esta publicidad es fugaz porque estos nuevos formatos son lo suficientemente llamativos (contienen muchas claves visuales) y en poco tiempo el esquema perceptivo aprende distinguirlos y a descartarlos.

Posible solución

La única solución actualmente consiste quitar claves visuales a la publicidad, no hacerla llamativa, para que sea lo más difícil posible para los usuarios identificarla con el esquema perceptivo "descartador" de publicidad. Quitar estos elementos llamativos a la publicidad significa en la práctica que se parezca a los contenidos reales del sitio, así se provocaría que cuando el usuario buscase información leyese la publicidad.

Sin embargo, con el uso de esta solución se deben de tener muy claros dos puntos:

a) Por un lado la publicidad debe estar identificada como tal por un subtítulo identificativo, para no tratar de hacer pasar publicidad como contenido real del sitio (en otros medios está regulado legalmente. Si se intenta confundir la publicidad con contenidos, los usuarios quedarían frustrados por la estrategia del sitio y su actitud sería muy negativa hacia el sitio.

b) Por otro lado se ha de comprender que Internet no es un medio donde la publicidad pueda ser introducida de manera indiscriminada, es decir, sin relación con los objetivos del usuario en esa página. Al introducir publicidad de manera indiscriminada los usuarios terminarán desarrollando ceguera también al nuevo formato de publicidad, que aún conteniendo un número mínimo de claves visuales, tendrá las suficientes para que a medio plazo los usuarios terminen ignorándola. Es responsabilidad de todos los sitios que esta estrategia se utilice con estas recomendaciones, puesto que si un sector suficientemente grande de sitios comienza a utilizarla indiscriminadamente, ello generará aprendizaje en los usuarios y terminará afectando a los sitios que solo ofrecen publicidad de forma honesta. El abuso en esta nueva estrategia de publicidad sería como matar la gallina de los huevos de oro y sería dar un paso hacia adelante y dos hacía atrás. Google ha comprendido esta estrategia parcialmente en la parte del formato y relación con los objetivos del usuario, pero no en la del abuso, para muestra un botón (vía Cesar Martín).

Otros argumentos

Es posible afirmar que todo lo anterior es pura teoría, pero que muchos de los estudios realizados hablan de la efectividad de los banners. Contra esto se pueden argumentar dos razones:

1- Los estudios sobre la efectividad de los banners deberían tener en cuenta como variable independiente el tiempo de experiencia de los usuarios en Internet. Hasta ahora poco estudios han tenido en cuenta esta variable. La mayoría de estudios intentan analizar la efectividad de los banners sin hacer referencia al tiempo de experiencia usando Internet de los usuarios. Sin embargo ésta es la variable principal en el desarrollo de la ceguera a los banners. Si no se considera esta variable el estudio carece de validez puesto que no sabremos si los usuarios prestan atención a los banners porque son noveles o no.

2- Los banners son la fuente de ingresos principal de muchos sitios web y lo que da trabajo a mucha gente, casualmente los mismos que se reconvierten a especialistas en usabilidad y realizan estos estudios. Sería la primera vez que alguien tirase piedras sobre su propio tejado.

Referencias:

- Panero, J. y Lane, D.M. Banner Blindness: Web Searchers Often Miss "Obvious Links" . Internetworking.

- Norman, D. Commentary: Banner Blidness, Human Cognition and Web Design. Comentarios de Norman al estudio anterior de Panero y Lane sobre la ceguera a los banners.

- Martín, C. El banner perfecto. Cesar Martín da consejos para reducir la ceguera y producir banners efectivos, aunque en mi opinión sus consejo serán solo efectivos a corto plazo.

- Martín, C. Encuesta sobre efectividad de los banners. Los resultados indican que los usuarios son ciegos a los banners en un 74,8% y si bien desconfío mucho de las encuestas como métodos de investigación fiables en usabilidad colaboré en la elaboración del cuestionario.

- Pagendarm, M. y Schaumburg, H. Why Are Users Banner-Blind? The Impact of Navigation Style on the Perception of Wb Banners. El estilo de navegación, con o sin objetivo, produce mas o menos ceguera a los banners, pero ¿existe la navegación sin objetivo en Internet?

25 Maneras de ser más productivo como diseñador

2009-02-18T11:54:00.000-08:00

La verdad es que no hay nadie perfecto y nadie lo será, pero la vida se trata de mejorar uno mismo y ser lo más productivo que sea posible con el tiempo que se le ha asignado. Frecuentemente el trabajo consume nuestras vidas, pero si podemos ser más productivos en el trabajo y adoptar buenas hábitos, nuestra vida personal, en teoría, debería mejorar también.

Esta lista fue creada para ayudar a inspirarle para dar un rendimiento máximo en sus días de trabajo, involucrarse más en su carrera y ser, por tanto, un diseñador saludable y productivo como persona. Siéntase libre de agregar sus propias sugerencias a la lista que sigue debajo.

1.- Realice todo lo posible en su viaje al trabajo.

Si le toma un tiempo llegar a su trabajo la mayoría de las veces. Lea un libro, tenga su laptop a mano para empezar a trabajar, incluso planee su día

2.- Tenga una lista de tareas.

Mantener una lista de tareas le asegura recordar todo lo que necesita hacer. Organice su lista de tareas por importancia y tache las cosas realizadas, pero acepte el hecho de que la lista probablemente nunca terminará

3.- Familiarícese con los atajos de teclados de la suite de Adobe.

Aprenderse los principales hotkeys (atajos de teclado) para programas como Photoshop e Illustrator puede ayudarle a ahorrar muchas horas a la larga.

4.- Mantenga el software de su computadora actualizado, libre de virus y spyware.

Como los diseñadores usan computadoras diariamente, es importante estar seguros que den su máximo desempeño, cerciórese de actualizar su computadora por lo menos una vez a la semana

5.- Busque distintas fuentes de inspiración

La inspiración forma gran parte de cualquier carrera artística y existe una buena cantidad de lugares para encontrar inspiración como exhibiciones de diseño, museos, portafolios online y galerías de diseño gráfico

6.- Involúcrese en la comunidad del diseño

Unirse a foros de diseño, comentar en blogs, escribir artículo y hablar en seminarios son solo unas formas de involucrarse en la comunidad del diseño.

7.- Vaya a eventos de diseño, exhibiciones y centros de aprendizaje.

Cada año hay muchas conferencias sobre diseño, eventos y cursos de entrenamiento. Si trabaja para una compañía, incluso le pagarán los gastos para que asista, así que mantenga sus habilidades al día.

8.- Lea libros sobre historia y teoría del diseño

La cantidad de libros de diseño es sorprendente, así que escoja un tema de interés como teoría del diseño y consiga algunos libros para leer en su tiempo libre. Un gran libro es “How to be a graphic designer without losing your soul” (como ser un diseñador gráfico sin perder su alma).

9.- Lea entrevistas de otros diseñadores gráficos

Las entrevistas frecuentemente nos dan ideas y revelan muchos secretos y grandes tips acerca de diseñadores exitosos. Es asombroso lo mucho que se puede aprender incluso de las entrevistas más breves.

10.- Únase a organizaciones de diseño gráfico

Unirse a organizaciones de diseño gráfico le puede traer grandes beneficios y es una manera de conseguir acceso a recursos y contactos. La Graphic Artist Guild (gremio de Artistas Gráficos) y la AIGA son tan solo algunas de las organizaciones a las que debería considerar unirse.

11.- Aprenda a aceptar las críticas constructivas.

Es un problema con muchos estudiantes de diseño e incluso en el ámbito profesional. Cuanto más pronto deje de tomar las críticas constructivas de forma personal, será el tiempo que le tomará mejorar como diseñador.

12.- No tenga miedo de pedir ayuda.

Si no sabe como hacer algo, no gaste su tiempo tratando de hacerlo. Amablemente pregunte por ayuda, así podrá seguir con sus actividades.

13.- Aprenda a comisionar trabajo y tareas a otros.

Si usted tiene más trabajo de lo que puede realizar, es una buena idea enviar algo del trabajo a alguien de confianza .El proyecto final tendrá un mejor resultado si usted trabaja en equipo y encarga tarea a otros.

14.- Use “Google Reader” y haga seguimiento a blogs de diseño

“Google Reader” es un gran lector RSS online que le permitirá dar seguimiento fácilmente a sus blogs de diseño favoritos.

15 .- Use Google Calendar para mantenerse al tanto de eventos importantes.

Google Calendar es un asombroso calendario/agenda online y además gratuito, le ayudara a organizar todas sus actividades importantes.

16.- Configure su cliente de email.

Ver los mails cada 5 minutos puede llegar a ser una gran distracción. Así que cheque su email a ciertas horas por lo que realizará más de su trabajo día a día.

17- Haga contratos estándar para los clientes

Es una buena idea tener un abogado que le ayude a crear una seria de contratos estándar con anticipación, así estará preparado y no tendrá que preocuparse o perder tiempo en hacer contratos posteriormente.

18.- Haga una factura estándar y plantillas de presupuesto.

Tener una factura bien diseñada y una plantilla de presupuestos es ser profesional y pueden ser personalizadas para cualquier cliente nuevo, asegúrese de imprimir copias para sí mismo como referencias.

19.- Haga etiquetas de correo

Escribir tantos años en la computadora ha estropeado mi escritura a mano y tener etiquetas de correo no solo me soluciona lo de mi fea escritura, incluso ahorra tiempo.

20.- Organice todos sus documentos una vez a la semana

En estos días el papeleo se puede apilar muy rápido si es que se deja, organizar todo de nuevo puede ser una pesadilla. Use un archivador que esté clasificado para poder organizar los documentos importantes.

21.- Organice los archivos de su computadora una vez a la semana

Organizar los archivos de computadora es incluso más importante que organizar el papeleo. Debe tener carpetas y sub-carpetas para cada cliente y crear diariamente copias de respaldo en diferentes dispositivos externos.

22.- Desarrolle un sistema de organización

Organizar sus archivos en una forma especifica, le hará más fácil navegar y buscar por documentos cuando los necesite rápidamente.

23.- Trate de mantenerse los fines de semana relajado y libre de trabajo

Es fácil ser consumido por su trabajo y mantener los fines de semana libres es una buena forma de asegurarse en no decaer. Así que no se olvide de disfrutar la vida en los fines de semana!

24.- Ejercítese diariamente y salga por un poco de aire fresco a la hora del almuerzo.

Este punto siempre forma parte en las listas de productividad, aunque mucha gente no lo realiza. Puede ser difícil ajustarse pero tan solo 20 minutos de ejercicio 3 veces a la semana pueden tener un gran impacto en su salud.

Fuente: http://noticiasda.wordpress.com/2009/01/22/25-maneras-de-ser-mas-productivo-como-disenador/

La usabilidad es lo que nos permite hacer un diseño centrado en el usuario

2008-12-18T07:00:00.000-08:00

Se llevaron a cabo las 4º Jornadas de Entornos Digitales, sobre usabilidad, una disciplina que evalúa si un servicio, sistema o producto tiene facilidad de ser utilizado con eficiencia, sin errores y con satisfacción por el usuario. En este encuentro se trató el tema de la usabilidad vinculada al diseño web, arquitectura de la información, diseño centrado en el usuario y diseño de interacción.

La apertura estuvo a cargo de Eduardo Mercovich, consultor y fundador de GaiaSur inSpiro: “El concepto de usabilidad es que tan fácil, rápido y agradable se puede ofrecer un servicio. Esto ya no es un tema de culto de algunos, revistas y empresas ya hablan sobre esto”. Comentó acerca del objetivo de ofrecer un buen servicio: “Significa dejarse a uno de lado y comenzar a trabajar con el otro. Hacerle la vida un poco mejor en algunos aspectos”. Explicó que al diseñar un proyecto se debe construir, medir y hacer un test de usabilidad con posibles usuarios: “Se debe entender al usuario, ir a ver dónde está, qué hace, no sólo verlo en un laboratorio”.

Gonzalo Auza, Director de Inter-Cultura, comenzó preguntando si la usabilidad es un gasto o una inversión. Y enumeró cinco variables que debe tener una página web para funcionar correctamente: “Facilidad de uso, eficiencia, recordabilidad, baja tasa de errores e inversión. La usabilidad es lo que nos permite hacer un diseño centrado en el usuario. Hay un método riguroso detrás de la usabilidad y una disciplina establecida, esto se debe conseguir en el desarrollo y no en el diseño”. Con respecto a los costos comentó: “Se necesita una plena planificación en todas las decisiones empresarias. Hoy en día estudios de casos en grandes empresas promovieron mejoras del 104 por ciento. La mejora es perceptible año a año”. Y por último expresó: “La usabilidad permite beneficiar a las empresas y a los usuarios, lo cual no es muy común. Además tiene un alto retorno de la inversión”.

Edgardo Sokolowicz, Director de tecnología de Despegar.com, habló acerca de los errores típicos de un sitio Web: “Suelen tener muchos banners, el botón de compra está escondido y en los formularios se pide que completen datos que luego la empresa no usa ni necesita. Es muy normal ensuciar las páginas y hacerlas poco claras”. Específicamente sobre usabilidad dijo: “La gente que trabaja en esa área es la representante de los usuarios, deben descubrir y defender sus intereses y necesidades. Detectar cuales son las situaciones que generan malas experiencias, como ser errores de búsqueda, formularios confusos y alto tiempo de respuesta. Hay que testear y saber todo lo que pasa en la aplicación, saber qué están haciendo los clientes”. Con respecto a la forma de trabajar de la empresa de viajes comentó: “En Despegar vemos las sugerencias de los usuarios, observamos que hay una evolución y se hacen muchas más transacciones de las que suponemos”. Sobre la privacidad al comprar por Internet dijo: “Para mí es más seguro comprar online que llevar la tarjeta en la billetera”.

A continuación representantes de las empresas Psicofxp.com, Tenaris y MercadoLibre contaron acerca de sus experiencias: “Con el tiempo integramos el concepto de usabilidad y nos dimos cuenta que necesitábamos una consultora. Hacer algo muy lindo y revolucionario, pero que la gente no sepa usarlo no es bueno”, expresó Maximiliano Kraszewski, CTO de Psicofxp.com.

Juan Manuel Carraro, Director de C Comunicación, la empresa contratada por Psicofxp, explicó cómo fue el proceso de trabajo y reestructuración de la web: “Lo primero que se hizo fue identificar los perfiles de usuario, encontramos cinco muy distintos. Uno de ellos eran los que llegaban a la página a través de una búsqueda en Google, y en la otra punta teníamos un perfil de usuario totalmente fidelizado con la empresa”. Luego construyeron las tareas que realiza cada tipo de usuario, armaron una matriz de usuarios y tareas y para cada una el tiempo y las páginas que visitaban. “Después vimos el tema del contenido y la cantidad de botones que tenía que haber en la botonera principal. Después sugerí testearlo, pero no se hizo”. Al respecto Maximiliano dijo: “Si, por cuestiones de tiempo no pudimos hacerlo y me arrepiento muchísimo de eso”. Y por último agregó: “Una vez que se incorpora la usabilidad a la empresa es muy difícil deshacerse de ella”:

Luego, Gabriel Celemin, Socio de Giro54, explicó el caso de la empresa Tenaris: “El objetivo era aumentar la cantidad de curriculums recibidos mediante su sitio corporativo. La primera etapa fue de investigación y análisis. Lo más importante era conocer a los usuarios. Como no teníamos acceso a los postulantes hicimos entrevistas a estudiantes y graduados de carreras afines a las búsquedas que hacía la empresa. Así logramos tener un perfil del usuario”. Los resultados del trabajo fueron el aumento del tiempo de visita a la página y la disminución de la tasa de abandono durante la carga del curriculum.

Eduardo Mercovich, de GaiaSur inSpiro y Matías Gaviño, de MercadoLibre, hablaron acerca del trabajo que hicieron en la página: “El público de MercadoLibre es enorme. Lo primero que hicimos fue traer usuarios y ver por qué era tan difícil para ellos vender un producto mediante la página. Ver cómo operan los usuarios te abre mucho la cabeza, al trabajar con datos y problemas reales pudimos modificar varias cosas, creamos una versión nueva. A veces nosotros estamos tan metidos que perdemos objetividad. Los resultados fueron asombrosos, todavía estamos en el proceso de desarrollo, en poco lo vamos a lanzar a la comunidad”, contó Matías Gaviño. Mercovich comentó acerca de la experiencia de trabajo: “La primera semana trabajamos en papel los diseños de los prototipos. La segunda etapa fue hacer el diseño, pero sin colores y sólo en dos tipografías. Después lo testeamos con usuarios. Lleven siempre usuarios y véanlos trabajar con lo que ustedes hicieron”.

Enrique Stanziola, responsable de usabilidad en Despegar.com, comentó: “La usabilidad, desde la práctica, permite incluir al usuario, que interactúe con la información y que su objetivo sea el vector de una búsqueda”. Explicó cuáles son los pasos a seguir al desarrollar una página: “Lo primero es hacer una tormenta de ideas, que tengan las premisas de ver qué hay y qué se puede mejorar acorde a las necesidades. Luego está la etapa de investigación, ver si la idea le sirve al usuario en cuanto al interés y capacidad. Se hacen entrevistas para analizar cómo se mueve el usuario considerando tres ejes: usuario, contexto y tarea. El tercer paso es el análisis, de las entrevistas se sacan conclusiones que se expresan en lenguaje teatral, se arma un guión del usuario, logrando así definir las tareas más importantes que realiza. Al momento de diseñar la interfase deben plantearse los objetivos de usabilidad, con parámetros medibles y estrictos. Luego se consideran patrones, jerarquías, consistencia, control de parte del usuario y feedback, el tiempo de respuesta ante una solicitud o búsqueda. Luego se desarrolla el prototipo y por último se hace una evaluación”.

La siguiente exposición estuvo a cargo de Juan Manuel Carraro, Director de C Comunicación, habló sobre la arquitectura de la información: “Es organizar, jerarquizar y nombrar los contenidos de una interface. Fomentando la usabilidad, mejorando la administración, la gestión de contenidos y la findability (búsqueda y navegación de la misma)”. Comentó sobre los problemas más frecuentes que suele tener el usuario: “Están relacionados con los procesos de búsqueda, la debilidad que encuentran en la información, imágenes de mala calidad, los links y la navegación. El 75 por ciento de los problemas está relacionado con la arquitectura de la información”. Al trabajar sobre un sitio web, explicó que previamente se deben realizar tres técnicas de relevamiento: “Ver cuál es el contexto, es fundamental que el cliente pueda aportar información. Definir el contenido, cuáles son las fuentes y quiénes son los responsables de producir la información y aprobarla. Y por último saber quiénes son los usuarios, qué tareas realizan, qué problemas encuentran en el sitio web y cuáles son sus sugerencias”.

A continuación Guillermo Ermel, responsable de usabilidad de MercadoLibre, habló acerca de la creación de prototipos y realizó un workshop con el público presente: “Las ventajas de hacer un prototipo en papel son que es rápido y económico y facilita la modificación y evaluación. A su vez fomenta la creatividad del equipo”. Con respecto al testeo comentó que los problemas que se encuentran suelen ser muy parecidos, se modifica en base a los aprendido y después se vuelve a testear con otros usuarios”.

Por último, como cierre de la jornada, participaron en la mesa redonda Fernando Das Neves, Gerente de I+D de Snopp Consulting, Jorge Plano, especialista en accesibilidad y Natan Santolo, Director de la carrera de Diseño Web en la Escuela Da Vinci. “Cuando hablamos de interacción, hablamos de un proceso de varios pasos. En general no se suele incorporar al usuario, no saben quién es y por eso las páginas no se entienden y suelen tener tantos problemas”, expresó Fernando Das Neves.

Luego, Jorge Plano definió usabilidad y accesibilidad: “Usabilidad implica mejorar la actividad del usuario, facilitar su uso. En cambio accesibilidad es eliminar las barreras de acceso y admitir un uso igual para todos. La usabilidad es una buena práctica y la accesibilidad es un derecho para un conjunto de la población”. Natan Santolo se preguntó qué hacer a partir de ahora: “Debe haber una capacitación técnica y de conciencia. La usabilidad no tiene que ser un valor agregado, sino ser parte de un producto, del desarrollo y del proyecto. La usabilidad es hacer la vida mejor y no sólo en un sitio web”.

Fuente: http://fido.palermo.edu/servicios_dyc/noticiasdc/detalle.php?id_noticia=798

Modelos de Formularios de Contacto para cuando no hay inspiración...

2008-12-09T09:39:00.000-08:00

Uno de los elementos imprescindibles en una web es el formulario de contacto, especialmente si hablamos de una web comercial, ya que la sección de “contacto” es una de las primeras cartas de presentación que una empresa ofrece a sus clientes potenciales.

Por otra parte las webs personales también pueden beneficiarse mucho con un formulario de contacto bien formado, nunca se sabe quien va a querer ofrecerte trabajo, enviarte una nota, o sencillamente felicitarte por tu buena labor.

Por tanto, me parece bastante interesante la lista con 36 formularios de contacto que han hecho en el Dzine Blog, ideal para quienes buscan un poco de inspiración o un punto de partida para diseñar su propio formulario.

Fuente original: http://isopixel.net/archivo/2008/12/inspiracion-para-formularios-de-contacto/

Alentando a los usuarios

2008-10-28T09:32:00.000-07:00

¿Quién no ha empezado a trastear con Photoshop sin leerse el manual? ¿Quién no se ha encontrado montando una puerta colocada al revés en un mueble de Ikea?

Al empezar a utilizar un software, los usuarios están muy motivados y tienden a ir al grano sin acabar de aprenderlo. Esta tendencia se conoce como la paradoja del usuario activo: los usuarios nunca leen los manuales, pero empiezan a utilizar el software inmediatamente, aunque a largo plazo se ahorrarían tiempo si hubieran dedicado tiempo a conocerlo.

Siendo conscientes de esta realidad, los diseñadores de interacción deben utilizar estrategias para alentar a los usuarios a emplear de forma más eficiente el sistema.

Algunos ejemplos interesantes:

Google Reader ofrece un módulo lateral en la página de inicio, con sugerencias o trucos para enriquecer la experiencia de usuario con la aplicación.
LinkedIn anima a sus usuarios a completar su perfil mediante una barra de progreso que da una idea del porcentaje de exhaustividad del perfil, además sugiere una "próxima acción" debajo de la barra de progreso para completar más el perfil.
En Unvlog, un sitio para compartir y descubrir videos con tus amigos, utiliza una sencilla lista de tareas para empezar a familiarizarte con el sistema.
The Hype Machine, un agregador de música que utiliza como fuentes los MP3 de los blogs musicales, recientemente ha alentado a sus usuarios a completar su perfil de una forma muy curiosa, utilizando por defecto la foto de John McCain como avatar.

Fuente: http://www.usolab.com/wl/2008/10/alentando-a-los-usuarios.php

Día Mundial de la Usabilidad 2008 en Buenos Aires

2008-10-22T13:30:00.000-07:00

El objetivo es difundir y fomentar el desarrollo de productos y servicios fáciles de usar.

Cuándo

El martes 18 de Noviembre de 2008, de 8:30 a 17:30 hs. Por favor sea puntual para poder acreditarse antes de que comience el evento.

Dónde

En el Aula Magna de la Universidad de Palermo: Mario Bravo 1050, Ciudad Autónoma de Buenos Aires, Argentina.

Público interesado

Empresas productoras de bienes y servicios, gobierno, académicos, profesionales de las áreas de marketing, comunicación, diseño, tecnología y atención al cliente, estudiantes y profesionales interesados en la usabilidad y las disciplinas vinculadas, como diseño web, arquitectura de información, diseño centrado en el usuario y diseño de interacción.

Programa

Se cubrirán aspectos conceptuales, prácticos, metodológicos y económicos de la usabilidad, entre los que habrá:

Charlas: introducción a la usabilidad, valor agregado y retorno de inversión, equipos de IT y usabilidad, el futuro de la usabilidad.
Casos de éxito: empresas líderes contarán sus experiencias, relatadas por los protagonistas.
Talleres: técnicas de diseño centrado en el usuario, arquitectura de la información, prototipado y diseño.

Todas las actividades serán lideradas por expertos locales que abordarán la cuestión de la usabilidad vinculándola no sólo al ámbito de Internet, sino también a otros campos en los que su aplicación significa una mejora en la vida diaria de las personas.

¿Interesado? Vea el programa completo.

Asistencia

Nos encantaría que todos los interesados pudieran venir. Pero dadas las limitaciones de tiempo y espacio del evento, se requiere una registración (gratuita) para asistir.

Acerca del Día Mundial de la Usabilidad

El Día Mundial de la Usabilidad se realiza en más de 40 países y es impulsado por la Usability Professionals' Association (UPA).

En Argentina, desde el 2008, es organizado por el Grupo de Profesionales de Usabilidad de Argentina y el capítulo Argentino de Internet Society (ISOC-Ar) junto a la Universidad de Palermo.

Los 7 mejores libros sobre usabilidad

2008-10-22T08:22:00.000-07:00

Hablar con usuarios es la mejor manera de aprender sobre usabilidad, los usuarios son los grandes maestros. De todos modos, hay libros que pueden aportar conocimiento a nuestro trabajo. Los autores que cito son grandes porque llevan muchos años escuchando a los usuarios.

Para leer muchos libros sobre temas específicos se requiere de tiempo y dinero. Por ello, lo mejor es seleccionar muy bien las lecturas. Cuando surgió el boom de la usabilidad, varias obras han puesto en su título esa palabra para vender más ejemplares.

Sin embargo, muchos de esos libros son una perdida de tiempo, alguno volúmenes son realmente malos y oportunistas.

Hay varios autores, que en mi opinión, van al grano y ofrecen consejos muy prácticos. Sabiduría que se puede aplicar a las webs que uno hace. Leer uno de esos libros ayudará a que todas las webs que uno haga en el futuro sean mejores. Por eso, son una buena inversión de tiempo y dinero.

No me hagas pensar de Steve Krug

Steve Krung es una persona que tiene experiencia trabajando en Internet y mucho sentido común. La mayoría de los consejos que aporta en su obra son aplicables a cualquier web. Además, el libro es básico, un primer paso para los que quieran construir sitios web.

El libro aporta soluciones, es 100% práctico y aprovechable. En algunos casos, hay que entender que los proyectos web en los que ha trabajado el autor son grandes y por eso trata sobre los problemas que surgen en el trabajo en equipo.

Usabilidad de Páginas de Inicio de Jakob Nielsen

Jakob Nielsen es el autor con más éxito en este mundo, ha vendido más de 250.000 ejemplares de sus libros y sigue publicando nuevas obras.

El éxito editorial se debe a que es un autor que expone muy bien sus ideas sobre todo en los últimos libros, son fáciles de leer y es tremendamente práctico. En su libro destripa 50 sitios web, las críticas son ácidas, pero necesarias para darnos cuenta de los errores que se pueden evitar.

Defensive Design for the Web de 37 signals

Es una obra muy práctica que aborda un tema muy importante: cómo tratar con los errores de los usuarios. El libro aconseja la mejor manera de prevenirlos y ayudar a los clientes de un sitio.

Lo bueno que tienen los libros de los maestros de la usabilidad es que son usables. Este libro cuenta con un adecuado diseño, es estupendo para leer en el metro o en los transportes públicos: como los anteriores, cuenta con buena ilustración y es fácil encontrar lo que nos interesa.

Cuenta con titulares y destaca los temas más importantes. Es un libro escrito por maestros de la usabilidad del web. Yo creo que la usabilidad de los web tiene mucho que aprender de otras disciplinas: primero, de la usabilidad de software y segundo, de el diseño de cualquier otra cosa.

About Face 2.0 de Alan Cooper y Robert Reimann

Maestros de la usabilidad del software son maestros de la usabilidad del web. Un libro extremadamente ilustrativo, trata sobre interfaces de informática, y por eso, los consejos, difieren poco sobre los que se pueden dar sobre una página web.

En el libro se puede encontrar el proceso para hacer un sitio web, aunque el libro dedica muy poco espacio a eso. También contiene conceptos que en su momento fueron novedosos y que ahora son universales, como el concepto de persona en usabilidad.

Psicología del Color de Eva Heller

En mi opinión, el diseño en general es aplicable al diseño y planificación de webs. Siempre, tenemos que elegir colores y valernos de los mismos para que nuestra web sea adecuada.

Por eso, a mi me parece muy útil leer sobre colores. Es una obra en español, que nos permite entender el significado profundo de los colores. Los que crean que la elección de colores debe ser dejada a unos superdotados del gusto, encontrarán razones en este libro para no trabajar así. Y conocer sobre el uso adecuado del color.

Universal Principles of Design de William Lidwell, Kritina Holden y Jill Butler

Si se quiere aprender sobre diseño y cómo colocar formas, contenidos, fotos, etc. Es un volumen elevadamente práctico.

También está dividido de manera agradable la lectura. En lugar de parecer un libro, parecen reportajes de una revista muy bien diseñada. Otra de las virtudes del libro es que da pistas para seguir estudiando. Hay citas muy bien anotadas y fuentes en las que continuar profundizando.

Web Bloopers de Jeff Johnson

Jeff Jonson escribe un libro que trata sobre errores frecuentes en Internet. Es un volumen para aprender de los fallos de los demás. De hecho, Johnson es uno de los autores que recomienda Jakob Nielsen.

Los errores están escogidos muy bien. Son los más frecuentes. Aunque, poco a poco, los grandes webs han aprendido de lo que dice el autor y cada vez son menos comunes esos fallos. Los 60 deslices que se escogen como más significativos están ilustrados con ejemplos de webs reales, las ilustraciones del libro como la edición son magníficos.

Fuente: http://www.maestrosdelweb.com/editorial/los-7-mejores-libros-sobre-usabilidad/
En el post original hay mas datos sobre estos libros que les recomiendo que visiten.

Usabilidad y Accesibilidad Web

2008-08-22T06:59:00.000-07:00

¿Las webs accesibles son siempre feas?

Muchas veces, nos encontramos con sitios que generalmente respetando los estándares Web no son tan agradables visualmente, pero esto no tiene por que ser así.
Si nos basamos en los conceptos actuales de la Usabilidad y Accesibilidad mezclada con un poco de creatividad y el conocimiento de la tecnología, se pueden lograr resultados interesantes y agradables, que por ende son más vendibles.

Para continuar leyendo este interesante artículo, les recomiendo quevisiten la web de su autor.

Fuente: http://lausabilidad.blogspot.com/2008/08/usabilidad-y-accesibilidad-web.html

La crueldad de los internautas

2008-05-27T07:37:00.000-07:00

En BBC Ciencia, he leído que los usuarios de internet se están volviendo cada vez más impacientes, despiadados y egoístas cuando están navegando en la red, revela un estudio.

El informe anual sobre los hábitos en el uso de internet realizado por el gurú tecnológico Jakob Nielsen muestra que la gente es cada vez menos paciente cuando están en línea. En lugar de pasar el tiempo en los sitios de internet, muchos internautas lo que quieren es simplemente llegar rápido a un sitio, completar una tarea e irse. La mayoría ignora los esfuerzos que se hacen para que se demore más en los sitios y desconfía de las promociones diseñadas para mantener su atención.

Reglas de búsqueda

En cambio, muchos actúan "en caliente" y sólo desean terminar una tarea específica. Para Nielsen, el que quiera superar a Google tiene que crear un mejor sistema de búsquedas. El 75% de la gente logra cumplir lo que quiere al ir a internet, dijo Nielsen. En 1999 esa cifra estaba en 60%.

Hay dos razones que lo explican, indicó el gurú. "Los diseños han mejorado, pero también los usuarios se han acostumbrado a ese ambiente interactivo", señaló Nielsen a la BBC. "Ahora, cuando la gente va a internet sabe lo que quiere y cómo hacerlo", afirmó.

Esto vuelve a los internautas muy resistentes a promociones destacadas u otras opciones editoriales que intentan distraerlos. "Los usuarios de internet siempre han sido despiadados y ahora lo son más que nunca", dijo Nielsen. "La gente quiere sitios que los lleve, sin rodeos, al punto. Tienen muy poca paciencia", señaló. "Creo que los sitios todavía no han apreciado eso", agregó. "Aún sienten que su sitio es interesante y especial y que la gente estará feliz con todo lo que se le arroje".

Dominio de los buscadores

Los internautas también se están frustrando mucho con todas las adiciones, como los "widgets" (artilugios) y las aplicaciones, que se vienen agregando a los sitios para hacerlos más amigables. Tales adiciones sólo están sirviendo para que las páginas se tarden más en cargar, afirma Nielsen. Ha habido también un gran cambio en la manera en que la gente va a los lugares donde puede completar tareas urgentes, señaló el experto:

En 2004, un 40% de los internautas visitaba una página principal y luego navegaban hacia donde querían ir, y un 60% usaba un vínculo que los llevaba directamente al destino buscado dentro de un sitio.
En 2008, dijo Nielsen, sólo un 25% de las personas navega a través del "homepage" o página principal. El resto usa el buscador o "search engine" y se va directo a donde quiere.

"Básicamente, los buscadores de internet gobiernan la red", dijo. Pero, añadió, esto no significa que los buscadores estén haciendo un trabajo perfecto. "Cuando observas a la gente buscando algo, con frecuencia ves que no obtiene los resultados que quería", dijo. "En el largo plazo, quien quiera superar a Google sólo tiene que crear un mejor sistema de búsquedas".

Fuente: CosasSencillas

Taller de usabilidad web y diseño de interfaz de usuario

2008-05-22T09:34:00.000-07:00

mas información: http://www.cursodeusabilidad.com.ar

Temario: Introducción a la usabilidad y el diseño de interacción

Veremos qué es la usabilidad y para qué sirve. También definiremos qué es la experiencia de usuario (User experience) y su relación con la usabilidad.

Cómo hacer sitios fáciles de usar
Explicaremos la metodología de ciclo de diseño centrado en el usuario, y cómo implementarla en un equipo de desarrollo web.

Principios de diseño web centrado en el usuario
¿Por qué algunos sitios son más fáciles de usar que otros? Veremos principios básicos de diseño centrado en el usuario, principios básicos de usabilidad y lineamientos específicos de usabilidad web (también conocidos como guidelines).

Tríada fundamental de la usabilidad: usuarios + contextos + tareas
La usabilidad de un sitio web es algo relativo y depende de muchas circunstancias. Un diseño que es óptimo en algunos casos, no lo es en otros. No es lo mismo diseñar un sitio para hacer trámites impositivos que un sitio de juegos para chicos. Por eso, para lograr la usabilidad necesaria en cada caso, es necesario que sepamos quiénes serán los usuarios, las tareas que necesitan hacer, dónde, cuándo y con qué tecnología usarán el sitio.

Veremos técnicas para contestar estas preguntas y poder establecer las pautas de usabilidad que debe cumplir nuestro sitio.

Tests de usabilidad con usuarios - Metodologías de testeo: validez vs. costos
Existen varias formas de testear un sitio web para comprobar si es usable. Entre estos métodos, algunos son muy efectivos pero a la vez muy costosos y difíciles de poner en práctica, mientras que hay otros que tienen un nivel de efectividad casi tan alto pero a un costo mucho menor y con menor esfuerzo. Veremos las ventajas y desventajas de cada método.

Selección de usuarios representativos. Incentivos.
Conseguir y seleccionar usuarios representativos para el test es fundamental, ya que sin usuarios no podemos asegurar la usabilidad. Aprenderemos cómo encontrar y seleccionar usuarios de forma simple y efectiva, cómo crear y usar guiones de filtrado, y cómo sacar el mejor provecho de cada usuario. Daremos ejemplos prácticos de uso real de los guiones telefónicos utilizados por expertos para hacer la selección de usuarios.

Tareas a evaluar con el usuario
Al evaluar un sitio web, es fundamental conocer cuáles serán las principales tareas que van a realizar los usuarios y convertirlas en consignas para que los usuarios puedan intentar realizarlas durante el test. Por ejemplo, en un sitio de comercio electrónico, querrán buscar un producto, compararlo con otros similares y comprarlo usando su tarjeta de crédito. Veremos cómo elegir las tareas y redactarlas para probarlas con usuarios durante el test.

Ejercicio práctico: creación de un prototipo para testear
Para probarlo con usuarios, no podemos esperar a tener el sitio web o aplicación terminado ni de invertir el tiempo y dinero necesario para programarlo. Pondremos en práctica una técnica para crear prototipos sin esfuerzo y en muy pocas horas de trabajo, que te permitirá evaluar la usabilidad con usuarios y mejorar el diseño del sitio web hasta volverlo usable.

Ejercicio práctico: test de usabilidad con usuarios
Pondremos en práctica todo lo aprendido realizando un test con usuarios. Aprenderemos cómo llevar adelante un test, qué equipamiento es necesario y cómo sacar el mejor provecho de cada test. Veremos consejos prácticos acerca de los "SI" y los "NO" durante un test con usuarios.

Análisis de resultados del test y conclusiones
Una vez que realizamos tests con varios usuarios, habremos encontrado partes del diseño que funcionan de la forma esperada para los usuarios y partes que no. Tendremos que analizar los resultados para proponer recomendaciones al diseño del sitio web. Veremos distintos métodos para analizar los datos obtenidos.

Presentacion de resultados al cliente o jefe
Tan importante como testear con usuarios y hacer un buen diseño es saber presentarlo a quien tiene la palabra final. Veremos cómo presentar los resultados y el diseño de forma convincente a tu superior o cliente.

Veremos formas de “vender” usabilidad a clientes y jefes.

¿A quién está dirigido este taller?
El taller está dirigido a diseñadores graficos interesados en la web, diseñadores web, diseñadores de interacción, encargados del desarrollo de productos que incluyan a la web como eje, estudiantes de carreras relacionadas con la web y sistemas, profesionales o estudiantes con interés en la usabilidad, el diseño de interacción y la experiencia del usuario web.

No es necesario tener conocimientos de programación ni de diseño gráfico.

Fechas, costo e inscripción
* Fecha: sábado 7 de junio de 2008
* Horario: de 09:00 a 18:30 - 8 Horas en total, con corte para almorzar.
* Lugar: Carlos Pellegrini 739
* Costo: $300 ($280 para estudiantes)

mas información: http://www.cursodeusabilidad.com.ar

Formularios usables: 60 Directrices de Usabilidad

2008-02-28T07:28:00.000-08:00

Artículo propiedad de Olga Carreras, publicado originalmente en:
http://olgacarreras.blogspot.com/2007/02/formularios-usables-60-directrices-de.html

Por desgracia, es a menudo el programador quien hace el diseño de los formularios.

Mientras que para el diseño de páginas web se considera necesaria la participación de especialistas en el diseño de interfaces, no ocurre lo mismo cuando debe diseñarse algún formulario.

Es muy habitual considerar que un formulario no es más que el resultado del análisis de datos que debe realizar todo analista o programador.

Lo que se obtiene al final es un formulario que no tiene en cuenta la terminología del usuario y que por lo general guía poco y controla mucho.

[En "Por qué los formularios no se diseñan correctamente" de Josep Casanovas]

Introducción

Ninguna de las 60 directrices es invención mía. Mi labor ha sido únicamente de recopilación y síntexis.

Quizás debería haber justificado la razón de ser de cada directriz, puesto que abundan los que creen saber lo que necesita el usuario, independientemente de lo que digan los estudios de usabilidad, los test de usuario o los expertos en usabilidad.

La usabilidad no consiste en que tú y yo elucubremos tomando un café sobre lo que le va a resultar más usable al usuario. La usabilidad es una disciplina seria.

Sea como sea, como otros antes que yo han explicado muy bien el porqué de estas directrices, aunque sea en diferentes artículos o estudios, me remito directamente a ellos: fuentes del artículo.

60 Directrices para realizar formularios usables

Generales

1. Pida sólo la información absolutamente necesaria.

2. Infiera información a partir de otra disponible.
Por ejemplo, la provincia se puede inferir del C.P.

3. Reutilice los campos cuando sea posible.
Por ejemplo, el email puede servirnos en ocasiones como nombre de usuario.

4. No pida la información dos veces.
Por ejemplo, si el usuario ha rellenado la dirección de facturación, no le obligue a volver a rellenar la dirección de envío si no es necesario, pregúntele si quiere que sea la misma.

Textos

5. Proporcione un título al formulario que exprese claramente su función.

6. Si necesita instrucciones, que sean breves y comprensibles.

7. Utilice una nomenclatura clara y familiar, sin tecnicismos ni extranjerismos.

8. Sea consistente en el uso de los términos.
Es decir, use siempre las mismas palabras para los mismos conceptos.

9. No utilice preguntas complejas ni haga pensar al usuario.

10. Redacte siempre las opciones de forma afirmativa.

Por ejemplo, junto a un check escriba “Deseo recibir el boletín" en vez de "No deseo recibir el boletín".

Organización

11. Organice los campos en una sola columna de datos.

Sin entrar en las razones de accesibilidad que lo justifican (ver "75 Directrices de accesibilidad de Jakob Nielsen") me cuesta muchas discusiones hacer comprender que, apelotonando los datos en la misma línea o colocándolos en varias columnas, se pierde tanto a nivel de usabilidad que no merece la pena el espacio vertical que se gana.

Como siempre, hay muchos contextos de uso y excepciones justificables, como los formularios que se rellenan de forma repetitiva y constante, pero la excepción nunca puede convertirse en norma.

Una sola columna funciona mejor. Los formularios con dos columnas tienen más probabilidades de que los usuarios pasen por alto algunos campos, dado que crean un orden ambiguo de lectura. Sus ojos se moverán hacia donde espera encontrar el próximo campo, que será habitualmente hacia abajo, en vertical. No esperan a que se les indique mediante el parpadeo del cursor dónde mirar.

[En "Formularios largos: ¿una pantalla con scroll o varias páginas?" de Usolab (resumen en español del artículo "Caroline's Corner - Long Forms: Scroll or Tab?" de Caroline Jarrett)]

12. Organice los campos en grupos lógicos, utilizando para ello la mínima cantidad de elementos visuales (evitando así ruido visual).

13. Agrupe, si es posible, los campos obligatorios al comienzo del formulario.

14. Evite fragmentar la petición de información.
Por ejemplo, no pida por separado el tipo de vía, la calle, el número, etc. si no es estrictamente necesario.

15. Proporcione un diseño ordenado, alineando verticalmente todas las etiquetas y todos los campos entre si.

Todos los campos deben estar verticalmente alineados entre sí a la izquierda.

¿Cómo alinear las etiquetas entre sí: a la derecha, a la izquierda o las colocamos encima del campo?
Si tenemos que rellenar datos que son familiares (y no son muchos): Etiquetas en vertical encima del campo.

Cuando necesitemos ajustar el espacio vertical: Etiquetas a la izquierda del campo, alineadas a la derecha.

Hay que ajustar el espacio vertical, y los datos no nos son familiares o son complejos: Etiquetas al lado del campo, alineadas a la izquierda.
"Consejos para el diseño de formularios": resumen en español de las conclusiones de Luke Wroblewski

16. Sitúe las respuestas de los campos radio buttons y check box después de los mismos.
De esta manera se favorece la alineación vertical de todos los controles.

17. Utilice etiquetas estándar para agrupar campos y hacer más manejable la información(OPTGROUP, FIELDSET)

18. Si se utilizan radio buttons o checks box agrupe visualmente de forma clara y unívoca los distintos grupos de opciones.

19. Distinga visualmente los campos deshabilitados siguiendo las normas de facto (poniéndolos en gris claro)

Tipos de campos

20. El tamaño visible de los campos de texto debe corresponderse con la longitud del contenido que ha de introducir el usuario.

21. Homogeneice los anchos de los campos de texto cuando estos sean similares (evitando así ruido visual).

22. Dote a los campos de texto de flexibilidad para que admitan los datos en cualquier formato.

Por ejemplo, un campo para introducir el número teléfono debería admitir paréntesis, guiones, espacios; un campo para introducir importes debería admitir decimales con punto o con coma, etc.

23. Evite el uso de combos.

No las use por ejemplo para seleccionar el país, fecha o profesión a no ser que sea estrictamente necesario, en cuyo caso incluya una opción del tipo “Otros” que pueda englobar casos no recogidos en las opciones proporcionadas.

24. Evite que las combos recarguen la página para rellenar otros campos, pero cuando así sea, asegúrese de que el formulario conserva el mismo estado que tenía antes de recargar la página: con los mismos campos visibles o activos, y con todos los campos rellenos con los mismos datos que antes de la recarga.

25. Si se utilizan combos o radio buttons seleccione siempre una opción por defecto, asegurándose de que sea la más probable.

De lo contrario, el usuario no puede volver al estado inicial del formulario; si es necesario incluya una opción "Ninguna".

26. Si se utiliza un check box para presentar una única opción que no es obligatoria (recibir publicidad, aceptar unas cláusulas) no la marque por defecto.

27. Si se utilizan radio buttons asegúrese de que todas las opciones son claramente excluyentes.

No los utilice cuando las respuestas sean más de tres y complejas, o más de cinco y simples.
Siempre que se cumpla la regla anterior, utilice radio buttons en vez de combos

28. Si un radio button tiene más de dos respuestas, colóquelas en vertical, unas debajo de otras alineadas a la izquierda.

Funcionamiento

29. Valore la posibilidad de evitar, mediante JavaScript, que en determinados campos se pueda introducir determinados caracteres.
Por ejemplo, que en el campo DNI sólo se puedan introducir números y letras, haciendo que el resto de caracteres no se puedan teclear en el campo.
[A mí, personalmente, no me gusta esta práctica]

30. No implemente saltos automáticos del foco del formulario.
Por ejemplo, en los campos de cuenta, no haga que el foco se mueva sólo al siguiente campo cuando se ha rellenado el anterior.

Un error típico es introducir el salto automático entre campos de texto consecutivos y hacer innecesario el uso del tabulador.

Aunque este comportamiento puede parecer que facilita la tarea de introducción de datos, no es adecuado porque quita control a los usuarios, no es un funcionamiento estándar y es necesario mirar la pantalla para saber en que campo se está.

Todo ello puede provocar fácilmente errores, como por ejemplo, introducir datos pertenecientes a un campo en el siguiente cuando no se introduce el formato esperado por el salto automático.

[En "Controles de formularios en diseño web, radio buttons, check-boxes..." de Eduardo Manchón]

31. Asegúrese de que la tecla "Intro" realiza la acción principal.

32. Evite, mediante JavaScript, que el usuario pueda impacientarse y enviar dos veces el formulario.

33. Al implementar la validación de los formularios (o al limitar el tamaño de los campos) piense si su formulario puede ser utilizado por usuarios de otros países.

Por ejemplo, el C.P. o el teléfono no tienen la misma longitud en unos países que en otros; por ejemplo, en España hay usuarios que no tienen DNI sino tarjeta de residencia.

Ayudas

34. Identifique claramente los campos obligatorios y los opcionales mediante el literal (Obligatorio) u (Opcional), según si se van a marcar los obligatorios o los opcionales, colocando dicho literal detrás de la etiqueta del campo y por tanto antes del campo.

Para saber si marcar los obligatorios o los opcionales seguir las directrices de Luke Wroblewski:
Indique los campos obligatorios cuando sean menos que los opcionales.

Indique los campos opcionales cuando sean menos que los obligatorios.
Para saber por qué poner el texto (Obligatorio) u (Opcional) después del literal y no después del campo, o por qué se debe indicar mediante un texto y no mediante un asterisco, leer "75 Directrices de accesibilidad de Jakob Nielsen"

35. Incluir ayudas breves o ejemplos junto a los campos, pero sólo cuando sea realmente necesario para saber cómo ingresar un dato.

Asegúrese de que al leer en línea estas ayudas o ejemplos se lean antes que el campo, por ello, un buen lugar para colocarlas es encima del campo. Para comprender por qué colocarlas en esta posición leer: "75 Directrices de accesibilidad de Jakob Nielsen"

Botones

36. No incluya un botón "Reset" (es decir, de Limpiar o Borrar el formulario)

37. En los formularios de un sólo paso evite tener un botón "Cancelar" cuya función sea en realidad volver a la página anterior.

38. Distinga entre las acciones primarias y secundarias (volver, imprimir etc.) de su formulario.

Evite las secundarias, pero si ha de incluirlas distíngalas visualmente de forma inequívoca, destacando visualmente las primarias.

Por ejemplo, poniendo las acciones primarias como botones y las secundarias como enlaces.

39. Coloque los botones o enlaces que realizan las acciones primarias (por ejemplo el botón "Enviar") lo más cerca posible del último campo del formulario. No los separé del formulario mediante, por ejemplo, una línea.

40. Dé un nombre adecuado a los botones del formulario, relacionado con su acción y no de carácter general.

Por ejemplo, use "Buscar" en vez de un genérico "Aceptar".

Errores

41. Cuando se produzca un error al rellenar el formulario proporcione en la parte superior del mismo, y con suficiente contraste, un listado de los errores. Por cada error indique qué campo lo ha provocado, por qué motivo, cómo solucionarlo y un enlace al campo.

42. Destaqué los campos que han dado error pero no se base para ello únicamente en el color.
Acompáñelos de un icono de error que aparezca también en el resumen del comienzo de la página.
Repita el mensaje de error al lado del campo para no tener que volver a la lista inicial para saber qué error lo provocó. Ver un ejemplo de cómo mostrar los errores de un formulario.

43. Cuando se produzca un error, el formulario no debe resetearse, es decir, los campos no erróneos deben seguir manteniendo la información en ellos introducida.

44. Redactar claramente los textos de error mediante términos claros, sencillos y no técnicos.
No utilizar mensajes genéricos del tipo “No se ha podido enviar el formulario”.

45. Evite validar los campos uno a uno, cuando pierden el foco, mostrando inmediatamente un mensaje de error al usuario. A los usuarios les incomoda esta práctica.

Feedback

46. Cuando el usuario envíe el formulario, infórmele del resultado de su acción: indíquele si se ha realizado correctamente, qué datos se han enviado, cómo puede ponerse en contacto con los responsables del sitio si ha habido problemas o para hacer un seguimiento del mismo, o cómo puede modificar los datos enviados.

47. Si el proceso de envío es lento, incluya en la página un mensaje de "enviando datos".

Respuesta

48. Informe a los usuarios de por qué deben rellenar el formulario y cuándo y a través de que medio recibirán una respuesta.

49. Si es un formulario de contacto envíe un email automático confirmado que se ha recibido.

50. Si es un formulario de contacto, asegúrese de que la empresa tenga los mecanismos necesarios para responder de forma rápida y adecuada al mismo.

Legalidad

51. Incluya las cláusulas de protección de datos cuando sea pertinente.

Accesibilidad

52. Asocie explícitamente las etiquetas con sus controles mediante LABEL y su atributo "for".

53. Compruebe que el tabulador permite acceder a todos los campos en el mismo orden que el visual.

54. Mejore la experiencia del usuario mediante JavaScript y AJAX pero asegúrese que el formulario funcione correctamente sin ellos.

55. No establezca un límite de tiempo ajustado para complementar el formulario.

Formularios extensos

56. Si los formularios son muy extensos la solución no son las columnas, sino la división en páginas bien rotuladas que indiquen al usuario en que paso está del proceso (por ejemplo Paso 3 de 4).

57. Si el formulario se presenta en varias páginas hay que seguir el lema 1 tema = 1 página.

58. El usuario debe poder volver a los pasos anteriores.

59. No solicite información externa en medio del proceso mediante la abertura de una ventana nueva del navegador.

60. Evite la utilización de pestañas para crear formularios de varias páginas.

Fuentes

"Best Practices for Form Design" de Luke Wroblewski
"Formularios usables" de Javier Cabrera
"Usabilidad al diseñar formularios de contacto" de Reynier Matos Padilla
"Formularios" en desarrolloweb.com
"Directrices de usabilidad para el diseño de formularios" de Josep Casanovas
"Controles de formularios en diseño web, radio buttons, check-boxes..." de Eduardo Manchón
"El principio de Visibilidad y el de Guiar en lugar de controlar: ¿son incompatibles? " de Josep M. Junoy
"Formularios en la web, recomendaciones generales de diseño" de Eduardo Manchón
"Usability and HTML Forms" de Andrew Starling
"Reset and Cancel Buttons" de Jakob Nielsen
"Checkboxes vs. Radio Buttons" de Jakob Nielsen
"Should I use a drop-down? Four steps for choosing form elements on the Web" de Sarah Miller and Caroline Jarrett
"Caroline's Corner - Long Forms: Scroll or Tab?" de Caroline Jarrett
"Simplified Form Errors" de Adam Kalsey
"Developing an Online Form" de usability.org
"Usabilidad y Accesibilidad de sitios web. Lista de comprobaciones" del Laboratorio Aragonés de Usabilidad

Esos típicos errores

2008-02-20T06:24:00.000-08:00

Desgraciadamente no siempre se hace el trabajo sin cometer errores, en mi trabajo he estado al lado de profesionales muy capaces, sin embargo, con el tiempo me he dado cuenta que los mismos errores se repiten una y otra vez, si pudieramos tener un postit al lado de nuestro monitor con un listado como este, creo que cometeríamos varios errores menos, se los dejo:

No leer lo que publicas
Eres diseñador, estamos claros, hay un periodista para hacer los contenidos, OK. Pero aún así, lee todo lo que colocas, no importa si no lo escribiste tú. Si hay errores evidentes, no dudarán en culparte (y en parte, tendrán razón).
No leer los mails enteros
Cuando te llegue un mail con requerimientos, leelo ENTERO (incluyendo los forwards), entiéndelo, si hay cosas que no entiendes pregúntalas inmediatamente, tu cliente estará gustoso de notar que su requerimiento es tomado en cuenta lo antes posible.
No tomar los requerimientos
Hazte cargo de lo que te piden, no dejes nunca cosas en el aire, si hay algo que no te corresponde hacer o te faltan materiales para hacerlo, hazlo saber a tu superior. No lo dejes volando.
No revisarlo entero
Revísalo TODO, no porque una botonera vincule bien, significa que todas vinculen bien, no porque tu sitio se vea bien en tu equipo significa que está listo, dedica tiempo a revisar tu trabajo.
No usar lo que haces
Me ha tocado ver a varios (me incluyo) diseñando cosas que nunca han probado, si diseñas una interfaz… ponte del lado del usuario, no pienses como diseñador, actúa como usuario, luego vuelve a pensar como diseñador.
Ser creativo sólo por serlo
La creatividad es una herramienta de la comunicación, establece tus objetivos y trabaja en función de conseguirlos, no porque seas un “creativo” debes hacerlo todo basado en metáforas. A veces con ser directo y simple, cumplirás tus objetivos.
Ser desordenado
Diseñar y producir implica tener una pasión por el orden, establecer metodologías y mecanismos de orden en tu trabajo te ayudará a simplificar tareas mecánicas y dedicarle tiempo a tareas creativas.
Decir que algo está listo cuando aún no lo está
He visto a varios responder a la pregunta ¿está listo el encargo? con un rotundo si. Aunque la verdad sea que aún faltan minutos para terminar ese trabajo. Sincera tus plazos, si algo no está listo, no lo está. Si hay algo que lo está demorando… manifiéstalo. Lo peor es decir que algo está listo cuando falta algo por hacer.
No avisar cuando algo está listo
Terminaste? lo revisaste? lo leiste? lo probaste?, OK entonces ahora avisa a quien corresponda que tu trabajo está listo, hazlo por un medio escrito para que quede registro de la entrega (fecha y hora) sólo en ese momento puedes empezar a olvidarte de ese encargo.

Fuente: http://www.digilicious.cl/2008/02/18/esos-tipicos-errores/

La Web 2.0, reñida con el diseño

2008-01-23T12:34:00.000-08:00

Jakob Nielsen, gurú de la usabilidad, opina que la Web 2.0 hace que las empresas descuiden los principios del diseño.

La usabilidad y el diseño pensado en el usuario son conceptos que hay que tener siempre presentes, pero los sitios basados en el concepto de la Web 2.0 no tienen en cuenta estos principios. Al menos, esa es la opinión de Jakob Nielsen, experto en usabilidad y diseño.

Nielsen alerta sobre la moda del 2.0, que lleva a las empresas a descuidar los principos del diseño web desarrollados en la última década, del que él propio Nielsen ha sido fervoroso divulgador desde su página web. Llenar los sitios de herramientas personalizadas conlleva el riesgo de imitar los sitios "llamativos pero inútiles" que proliferaron en los momentos álgidos de la burbuja puntocom: sitios como el paradigmático Boo.com, de apariencia atractiva pero nula usabilidad.

Toda página web debe tener en cuenta cuando menos una serie de principios básicos: facilidad de uso, buenas herramientas de búsqueda, texto sin jergas, tests de usabilidad y tener en cuenta el diseño antes incluso de empezar a progamar. Desgraciadamente, Nielsen opina que la fiebre por sumarse al vagón 2.0 lleva a muchos a dejar de lado estos principios.

Para Nielsen, el problema no es el concepto en sí de la Web 2.0, es decir, la idea de comunidad, el contenido generado por los usaurios y las páginas más dinámicas y activas. El error está en colocar estos elementos por encima del diseño, otogarles el protagonismo cuando deberían ser elementos secundarios.

Por último, Nielsen se plantea incluso la utilidad de adoptar tecnologías 2.0, teniendo en cuenta que recientes estudios demuestran que el porcentaje de usuarios activos que contribuye con sus propios contenidos es mínimo: apenas el 10% (de los que sólo el 1% lo hace regularmente), frente al 90% que no aporta nada. Para la mayoría, Internet es una herramienta, no una meta. Por este motivo, Nielsen cree que es un error que las empresas diseñen para ese grupo minoritario, a costa de convertir la web en mucho menos usable para la gran mayoría.

Fuente: http://www.baquia.com/noticias.php?id=12366

El éxito de You Tube y los blogs prueba el valor de la simplicidad

2008-01-23T12:32:00.000-08:00

Jakob Nielsen es uno de los hombres que más ha influido en la construcción de Internet tal y como la conocemos, pues ha marcado las tendencias de diseño seguidas por los principales sitios web.

Todas sus teorías giran en torno a la sencillez para lograr que el usuario pueda encontrar lo que busca de un vistazo, y sepa manejarse en el sitio desde el primer momento que accede a él. El éxito de los blogs y de sitios como YouTube, que han democratizado la publicación de contenidos en Internet, vienen a confirmar las teorías de Nielsen, quien impartirá el próximo 4 de noviembre una conferencia en Barcelona, organizada por su consultora especializada en usabilidad.

P:¿Qué tres errores debería evitar a toda costa cualquier página web?

R: Lo opuesto a las tres características que mencioné como ejemplo de buena usabilidad:

(a) Navegación difícil y una organización de la información confusa que se estructure de acuerdo con los criterios de la compañía en vez de pensar en el usuario. Esto dificulta encontrar cualquier cosa en un sitio web y hace que la gente desista rápidamente.

(b) Un contenido maketiniano (escrito en lenguaje de marketing, disfrazando las palabras y ensalzando al máximo las bondades de los productos) pero pobre en información específica que los clientes quieren. Por ejemplo, un sitio que no muestra el precio entre las primeras cosas.

(c) Transacciones complicadas que exigen al usuario seguir muchos pasos para conseguir sus objetivos. Por ejemplo, un sitio de comercio electrónico que requiere del usuario que se registre, elija un nombre y una contraseña antes de poder echar un vistazo. Imagina que la tienda de la esquina te pediera una contraseña antes de venderte un tomate.

P ¿Qué páginas web resaltaría usted como ejemplos de usabilidad a imitar?

R: Casi todos los grandes websites son buenos ejemplos de usabilidad: Google, Yahoo, eBay. Amazon.com, Craigslist. Se han visto forzados a ser buenos porque era la única forma en que podían hacer crecer su base de usuarios.

Desgraciadamente, hoy, no creo que Amazon.com sea un gran ejemplo de usabilidad. Insertan demasiadas características en sus páginas. Este diseño funciona bien para Amazon porque es una compañía conocida donde la gente ha comprado muchas veces en el pasado. Para Amazon es probablemente más importante ofrecer muchas opciones a usuarios experimentados que atraer a nuevos usuarios. Pero la mayoría de los websites sólo tiene una pequeña fracción de los clientes a los que potencialmente podrían dar servicio, por lo que deberían todavía dar aún mayor prioridad a la simplicidad para los nuevos usuarios.

P¿Sigue manteniendo que los usuarios leen un 25% más lentos en las pantallas de ordenador ahora que la mayoría ya usan los 1024 píxeles?

R: La lectura en las pantallas de los ordenadores ha mejorada alrededor un 8%, pero no es mucho teniendo en cuenta que los monitores son más grandes. El uso de monitores de pantalla plana y de la tecnología de fuente como ClearType en Windows XP y Vista que resaltan los caracteres han sido los principales motores de esta mejora.

Las pantallas más grandes tienen la ventaja de que los usuarios pueden explorar a través de más opciones sin hacer scrolling y esto acelera la interacción. Sin embargo, necesitamos monitores que sean mucho más grandes que 1024x768 píxeles para que en un pantallazo tengamos más información que una página de periódico.

En fin que todavía es más lento utilizar los ordenadores que el papel y de hecho, los usuarios prefieren no leer textos muy largos online.

P: Cada vez se usan más videos e imágenes en los sitios web. ¿Cree que esta tendencia contradice su teoría de la simplicidad?

R.: Es posible usar tanto fotos como vídeos y tener un sitio sencillo. Las pautas originales de la usabilidad en el entorno Web de 1994 son muy negativas en lo que se refiere al uso de gráficos y vídeos, en la medida que las imágenes grandes tienen un tiempo de descarga mayor y que los vídeos se visualizaban mal en ventanas del tamaño de un sello, que eran lo último hace un tiempo. Ahora un mayor ancho de banda y una mejor tecnología de vídeo permiten utilizar más este tipo de medios. Esto no cambia el hecho de que deberíamos utilizarlos de una forma razonable. Las páginas repletas de vídeos sólo funcionan para sitios específicos de vídeos y no para sitios web de instituciones públicas o de empresas.

P.: ¿Cree que las redes sociales, donde los usuarios son los propios creadores de contenido, deberían seguir las reglas de simplicidad?

R.: Es verdad que hay mucho contenido generado por los usuarios, y que el crecimiento de este contenido prueba definitivamente el valor de la simplicidad, porque la explosión de escribir en Internet tiene su origen cuando los servicios de los weblog se hicieron sencillos así como la explosión del vídeo se produjo cuando YouTube facilitó colgar vídeos en Internet. Todo esto fue posible en el pasado pero, con una menor usabilidad, de forma que muy poca gente contribuyó a su contenido.

Lo que es más cuestionable es cuánta gente utiliza el volumen de contenido generado por el usuario. La mayor parte de este contenido no genera en realidad mucho tráfico porque es demasiado caótico y no es lo suficientemente interesante para otros usuarios. Si alguien quiere generar tráfico a sus contenidos, entonces ellos tienen que seguir las pautas de la usabilidad, al igual que lo hace cualquier otro sitio web. Pero si te conformas con llegar a tus cinco mejores amigos, entonces, la usabilidad no es importante: ellos ya te conocen y entienden la información, incluso si no es comprensible para los nuevos usuarios.

P.: ¿Qué tendencias van a marcar el futuro de Internet?

R.El usuario móvil será importante. Admito que llevo diciendo esto desde hace varios años y el usuario móvil de servicios web es todavía una pequeña parte. La tecnología ya casi está, con las redes 3G suficientemente rápidas y algunos smartphones. Lo que faltan son los buenos servicios que hayan sido diseñados específicamente para los usuarios móviles. No podemos coger un sitio web ya establecido y acceder a él a través del teléfono; necesitamos versiones más reducidas de los sitios que sólo se centren en aquellos servicios que son más útiles para el usuario móvil.

Fuente: ElPais.com

No todos son iguales, pero hay que saber elegir

2008-01-18T08:43:00.000-08:00

En el camino de los negocios conocemos cantidad y diversidad de clientes, personas, proveedores, que como seres humanos y empresas, tienen diferente ideología. Nos encontramos con clientes buenos, y otros no tanto.

De una experiencia desagradable que tuvimos con una empresa, aprendimos varios puntos importantes que debemos tomar en cuenta antes de enredarnos en un contrato para prestar nuestros servicios.

1. Historial de la empresa: Es el punto más importante, hay que investigar el historial de la empresa para ver si es confiable, si ha tenido problemas con clientes pasados y que tal anda su “reputación” dentro de su giro. Si nos enteramos que tienen un historial no muy agradable o malo, pensemos realmente si nos traerá beneficios. En ocasiones es mejor alejarnos porque podremos perder mucho más.

2. El contrato: Es de vital importancia que nuestro contrato sea, concreto, claro y que tenga fechas en las cuales vamos a terminar de prestar los servicios, fechas de pago y por supuesto tener una taza de interés por pago atrasado, esto para “presionar” a la empresa a que pague a tiempo.

3. Las llamadas telefónicas: Es importante estar al tanto de las actividades de la empresa con regularidad, llamar una vez por semana para preguntarles que les ha parecido el servicio y cuando podemos pasar por el pago siguiente. Nunca confiar demasiado y dejar pasar hasta la fecha acordada. Puede ser que la empresa desaparezca de un momento a otro sin avisar.

4. Hacer citas: Para ir a recoger un cheque o el efectivo, es de gran importancia hacer citas, de no ser así podemos perder mucho tiempo y dinero en dar vueltas que no servirán de nada

5. Ser paciente: No desesperarnos si a la segunda llamada no nos han pagado, probablemente tuvieron problemas, pero si se atrasan 2 semanas entonces las cosas cambian, sin embargo es muy importante no perder la cordialidad, suele suceder que ya estamos artos de llamar y no recibir una respuesta válida, pero recordemos que la reputación y la imagen de nuestra empresa está en juego si perdemos la paciencia y les gritamos en la cara lo malos que han sido. Ahora que si pasan 3 meses y no hay respuestas, mejor llamamos a un abogado o un policía para que vayan con nosotros por el pago.(Es broma…pero podría ser)

6. Y la más importante. Retroalimentación: Al término del contrato, debemos evaluar si realmente queremos continuar prestando servicios a la empresa, si nos costó trabajo cobrar los cheques, si fueron amables, etc. Suele pasar que una empresa es muy mala con los pagos, y al término del contrato nos solicitan otros servicios nuevamente, y esta vez de una suma interesante, hay que pensar si realmente nos conviene continuar o mejor despedirnos cordialmente. Por lo general nunca cambian.

Conocimos a una de las empresas más irresponsables del estado, tuvimos la oportunidad de ver como empresas nacionales, les gritaban en la cara lo malos que eran. Con decirles que tardamos casi un mes en cobrar un saldo de $450.00 PESOS. Eso nos pasó por no investigar, pero aprendimos que los puntos ya mencionados son importantes al momento de hacer negocios con cualquier empresa.

No todo lo que brilla es oro.

Fuente: http://www.closip.com/blog/noticias/2008/01/17/no-todos-son-iguales-pero-hay-que-saber-elegir/

Contrato de diseño web

2008-01-18T07:03:00.000-08:00

Si eres desarrollador web ¿cuantas veces has tenido la necesidad de hacer un contrato de desarrollo de sitio web? esto es algo muy necesario para evitar malos entendidos y formalizar la relación con el cliente. Yo antes cada contrato lo hacía diferente y sinceramente sin respaldo legal.

Existe un proyecto dentro del sitio de ley en línea llamado El Contrato de Desarrollo de Sitio Web este es un proyecto abierto que acepta opiniones para mejorarlo ya que cuenta con un wiki y está publicado con licencia Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 Mexico License el autor de este contrato es Jorge Ringenbach sin duda este proyecto va ser de muchísima utilidad para muchos desarrolladores web.

Lo que no sé es si este contrato tenga validez completa en otro país que no sea México porque en la sección de resolución de controversias dice que se somete a la legislación vigente de la ciudad de México.

Descarga el contrato de Desarrollo de Sitio Web, visto en Maestros del Web

Descarga alternativa.

Fuente: http://www.carlosleopoldo.com/post/contrato-de-diseno-web/

Color, arquitectura y estados de ánimo

2008-01-14T09:01:00.000-08:00

Descargar documento en formato pdf
1. Introducción

El color en las artes es el medio mas valioso para que una obra transmita las mismas sensaciones que el artista experimento frente a la escena o motivo original; usando el color con buen conocimiento de su naturaleza y efectos y adecuadamente será posible expresar lo alegre o triste, lo luminoso o sombrío, lo tranquilo o lo exaltado, etc.

Nada puede decir tanto ni tan bien de la personalidad de un artista, del carácter y cualidades de su mente creadora como el uso y distribución de sus colores, las tendencias de estos y sus contrastes y la música que en ellos se contiene.

El color en la arquitectura y decoración se desenvuelve de la misma manera que en el arte de la pintura, aunque en su actuación va mucho mas allá porque su fin es especialmente especifico, puede servir para favorecer, destacar, disimular y aun ocultar , para crear una sensación excitante o tranquila, para significar temperatura, tamaño, profundidad o peso y como la música, puede ser utilizada deliberadamente para despertar un sentimiento. El color es un mago que transforma, altera y lo embellece todo o que, cuando es mal utilizado, puede trastornar, desacordar y hasta anular la bella cualidad de los materiales mas ricos.

El color, como cualquier otra técnica, tiene también la suya, y esta sometido a ciertas leyes, que conociéndolas será posible dominar el arte de la armonización, conocer los medios útiles que sirven para evitar la monotonía en un combinación cromática, estimular la facultad del gusto selectivo y afirmar la sensibilidad.

El hogar de nuestros días no solo requiere color para embellecer y animar, sino color que resuelva las necesidades psicológicas de quienes vivan con el. La elección del color esta basada en factores estáticos y también en los psíquicos, culturales, sociales y económicos.

El nivel intelectual, el gusto de la comunidad, la localización y el clima también influyen en la elección del esquema y asimismo la finalidad o propósito de cada pieza. Pero entre todos estos factores del color, quizás sea el mas importante el psicológico, ¿por qué nos alegra, inquieta, tranquiliza o deprime un determinado conjunto o combinación cromática?

Un ejemplo: El color de un edificio es como el envase o presentación de un producto que actúa en estimulo de la atención y para crear una primera impresión, favorable o negativa.

Los colores del interior deben ser específicamente psicológicos, reposados o estimulantes porque el color influye sobre el espíritu y el cuerpo, sobre el carácter y el animo e incluso sobre los actos de nuestra vida; el cambio de un esquema de color afecta simultáneamente a nuestro temperamento y en consecuencia a nuestro comportamiento.

El color es luz, belleza, armonía y delicia de la vista, pero es sobre todo, equilibrio psíquico, confort y educacion

Resumen:

1. Introducción
2. El Color
3. Clasificacion de los colores
4. Armonización de los colores y su búsqueda
5. Contrastes-la interacción del color
6. El campo de los colores es tridimensional
7. Cualidades Tonales
8. Los elementos de la escala
9. Experimentación en niños en relación a la forma y el color
10. La significación del color: semiótica y teoría del color
11. Psicología del color
12. Cromoterapia
13. Esplendor de la naturaleza
14. La vista y los colores
15. Los colores como tratamiento
16. Cromoterapia Ambiental
17. Cromoterapia y elementos
18. Colores y personalidad
19. Test de los colores
20. Arcana simbología de los colores
21. Policromía arquitectónica: posturas teoricas de los siglos XIX y XX
22. Color y arquitectura
23. Selección del color
24. Ideas para esquemas
25. El Color En La Industria
26. El ambiente visual
27. El color en la clínica mira
28. El color: un componente de cualificación y significación del ambiente urbano
29. El color en el medio ambiente como código social popular
30. Propuesta
31. Bibliografía

Descargar documento en formato pdf

Fuente: http://www.monografias.com/trabajos5/colarq/colarq.shtml

El significado de los colores

2008-01-14T08:48:00.000-08:00

Introducción:
Como ya hemos descrito en Los Colores, el color es una parte del espectro lumínico, y, al fín, es energía vibratoria.

Y esta energía afecta de diferente forma al ser humano, dependiendo de su longitud de onda (del color en concreto) produceindo diferentes sensaciones de las que normalmente no somos conscientes.

Pero la gente que trabaja en agencias de marketing y publicidad, los asesores de imágen de empresa, los diseñadores industriales y de moda, etc., son bien conscientes de ello, y utilizan los colores para asociarlos coherentemente al tipo de producto que quieren hacer llegar.

Y la cosa, como no podría ser de otra forma, funciona. Desde hace años se han hecho todo tipo de pruebas para analizar las sensaciones que sugieren los colores y hay bastante bibliografía al respecto.

¿Y qué es un sitio web sino un escaparate personal, de empresa, de comunidad, etc.? Además de muchas otras funciones que cada sitio pueda tener, ante todo intenta comunicar. Y lo hace con palabras, con imágenes y, en primera instancia, con colores.

Y cuando un sitio web está diseñado por profesionales con sólidos conocimientos de diseño gráfico, normalmente las pautas seguidas con los colores no son aleatorias.

Vamos a mostrar a continuación las propiedades de los colores básicos generalmente aceptadas. Puede haber discrepancias según autores, pero en lo fundamental, prácticamente todos están de acuerdo.
El significado de los colores:
Blanco:
- El blanco se asocia a la luz, la bondad, la inocencia, la pureza y la virginidad. Se le considera el color de la perfección.
- El blanco significa seguridad, pureza y limpieza. A diferencia del negro, el blanco por lo general tiene una connotación positiva. Puede representar un inicio afortunado.
- En heráldica, el blanco representa fe y pureza.
- En publicidad, al blanco se le asocia con la frescura y la limpieza porque es el color de nieve. En la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simplicidad.
- Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a los ángeles se les suele representar como imagenes vestidas con ropas blancas.
- El blanco se le asocia con hospitales, médicos y esterilidad. Puede usarse por tanto para sugerir para anunciar productos médicos o que estén directamente relacionados con la salud.
- Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a los ángeles se les suele representar como imagenes vestidas con ropas blancas.
- A menudo se asocia a con la pérdida de peso, productos bajos en calorías y los productos lácteos.
Amarillo:
- El amarillo simboliza la luz del sol. Representa la alegría, la felicidad, la inteligencia y la energía.
- El amarillo sugiere el efecto de entrar en calor, provoca alegría, estimula la actividad mental y genera energía muscular. Con frecuencia se le asocia a la comida.
- El amarillo puro y brillante es un reclamo de atención, por lo que es frecuente que los taxis sean de este color en algunas ciudades. En exceso, puede tener un efecto perturbador, inquietante. Es conocido que los bebés lloran más en habitaciones amarillas.
- En exceso, puede tener un efecto perturbador, inquietante. Es conocido que los bebés lloran más en habitaciones amarillas.
- Cuando se sitúan varios colores en contraposición al negro, el amarillo es en el que primero se fija la atención. Por eso, la combinación amarillo y negro es usada para resaltar avisos o reclamos de atención.
- En heráldica el amarillo representa honor y lealtad.
- En los últimos tiempos al amarillo también se le asocia con la cobardía.
- Es recomendable utilizar amarillo para provocar sensaciones agradables, alegres. Es muy adeecuado para promocionar productos para los niños y para el ocio.
- Por su eficacia para atraer la atención, es muy útili para destacar los aspectos más importantes de una página web.
- Los hombres normalmente encuentran el amarillo como muy desenfadado, por lo que no es muy recomendable para promocionar productos caros, prestigiosos o específicos para hombres. Ningún hombre de negocios compraría un reloj caro con correa amarilla.
- El amarillo es un color espontáneo, variable, por lo que no es adecuado para sugerir seguridad o estabilidad.
- El amarillo claro tiende a diluirse en el blanco, por lo que suele ser conveniente utilizar algún borde o motivo oscuro para resaltarlo. Sin embargo, no es recomendable utilizar una sombra porque lo hacen poco atrayente, pierden la alegría y lo convierten en sórdido.
  - El amarillo pálido es lúgubre y representa precaución, deterioro, enfermedad y envidia o celos.
  - amarillo claro representa inteligencia, originalidad y alegría.
Naranja:
- El naranja combina la energía del rojo con la felicidad del amarillo. Se le asocia a la alrgría, el sol brillante y el trópico.
- Representa el entusiasmo, la felicidad, la atracción, la creatividad, la determinación, el éxito, el ánimo y el estímulo.
- Es un color muy caliente, por lo que produce sensación de calor. Sin embargo, el naranja no es un color agresivo como el rojo.
- La visión del color naranja produce la sensación de mayor aporte de oxígeno al cerebro, produciendo un efecto vigorizante y de estimulación de la actividad mental.
- Es un color que encaja muy bien con la gente joven, por lo que es muy recomendable para comunicar con ellos.
- Color cítrico, se asocia a la alimentación sana y al estímulo del apetito. Es muy ádecuado para promocionar productos alimenticios y juguetes
- Es el color de la caída de la hoja y de la cosecha.
- En heráldica el naranja representa la fortaleza y la resistencia.
- El color naranja tiene una visibilidad muy alta, por lo que es muy útil para captar atención y subrayar los aspectos más destacables de una página web.
- El naranja combina la energía del rojo con la felicidad del amarillo. Se le asocia a la alrgría, el sol brillante y el trópico.
  - El naranja oscuro puede sugerir engaño y desconfianza.
  - El naranja rojizo evoca deseo, pasión sexual , placer, dominio, deseo de acción y agresividad
  - El dorado produce sensación de prestigio. El dorado significa sabiduría, claridad de ideas, y riqueza. Con frecuencia el dorado representa alta calidad.
Rojo:
- El color rojo es el del fuego y el de la sangre, por lo que se le asocia al peligro, la guerra, la energía, la fortaleza, la determinación, así como a la pasión, al deseo y al amor.
- Es un color muy intenso a nivel emocional. Mejora el metabolismo humano, aumenta el ritmo respiratorio y eleva la presión sanguínea.
- Tiene una visibilidad muy alta, por lo que se suele utilizar en avisos importantes, prohibiciones y llamadas de precaución.
- Trae el texto o las imagenes con este color a primer plano resaltándolas sobre el resto de colores. Es muy recomendable para connminar a las personas a tomar decisiones rápidas durante su estancia en un sitio web.
- En publicidad se utiliza el rojo para provocar sentimientos eróticos. Símbolos como labios o uñas rojos, zapatos, vestidos, etc., son arquetipos en la comunicación visual sugerente.
- El rojo es el color para indicar peligro por antonomasia.
- Como está muy relacionado con la energía, es muy adecuado para anunciar coches motos, bebidas energéticas, juegos, deportes y actividades de riesgo.
- En heráldica el rojo simboliza valor y coraje. Es un color muy utilizado en las banderas de muchos países
- El color naranja tiene una visibilidad muy alta, por lo que es muy útil para captar atención y subrayar los aspectos más destacables de una página web.
- El naranja combina la energía del rojo con la felicidad del amarillo. Se le asocia a la alrgría, el sol brillante y el trópico.
  - El rojo claro simboliza alegría, sensualidad, pasión, amor y sensibilidad.
  - El rosa evoca romance, amor y amistad. Representa cualidades femeninas y pasividad.
  - El rojo oscuro evoca energía, vigor, furia, fuerza de voluntad, cólera, ira, malicia, valor, capacidad de liderazgo. En otro sentido, también representa añoranza.
  - El marrón evoca estabilidad y representa cualidades masculinas.
  - El marrón rojizo se asocia a la caída de la hoja y a la cosecha.
Púrpura:
- El púrpura aporta la estabilidad del azul y la energía del rojo.
- Se asocia a la realeza y simboliza poder, nobleza, lujo y ambición. Sugiere riqueza y extravagancia.
- El color púrpura también está asociado con la sabiduría, la creatividad, la independencia, la dignidad.
- Hay encuestas que indican que es el color preferido del 75% de los niños antes de la adolescencia. El púrpura representa la magia y el misterio.
- Debido a que es un color muy poco frecuente en la naturaleza, hay quien opina que es un color artificial.
- El púrpura brillante es un color ideal para diseños drigidos a la mujer. También es muy adecuado para promocionar artículos dirigidos a los niños.
  - El púrpura claro produce sentimientos nostálgicos y románticos.
  - El púrpura oscuro evoca melancolía y tristeza. Puede producir sensación de frustración.
Azul:
- El azul es el color del cielo y del mar, por lo que se suele asociar con la estabilidad y la profundidad.
- Representa la lealtad, la confianza, la sabiduría, la inteligencia, la fe, la verdad y el cielo eterno.
- Se le considera un color beneficioso tanto para el cuerpo como para la mente. Retarda el metabolismo y produce un efecto relajante. Es un color fuertemente ligado a la tranquilidad y la calma.
- En heráldica el azul simboliza la sinceridad y la piedad.
- Es muy adecuado para presentar productos relacionados con la limpieza (personal, hogar o industrial), y todo aquello relacionado directamente con:
  - El cielo (líneas aéreas, aeropuertos)
  - El aire (acondicionadores paracaidismo)
  - El mar (cruceros, vacaciones y deportes marítimos)
  - El agua (agua mineral, parques acuáticos, balnearios)
- Es adecuado para promocionar productos de alta tecnología o de alta precisión.
- Al contrario de los colores emocionalmente calientes como rojo, naranja y amarillo, el azul es un color frío ligado a la inteligencia y la consciencia.
- El azul es un color típicamente masculino, muy bien aceptado por los hombres, por lo que en general será un buen color para asociar a productos para estos.
- Sin embargo se debe evitar para productos alimenticios y relacionados con la cocina en general, porque es un supresor del apetito.
- Cuando se usa junto a colores cálidos (amarillo, naranja), la mezcla suele ser llamativa. Puede ser recomendable para producir impacto, alteración.
  - El azul claro se asocia a la salud, la curación, el entendimiento, la suavidad y la tranquilidad.
  - El azul oscuro representa el conocimeinto, l integridad, la seriedad y el poder.
Verde:
- El verde es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura.
- Tiene una fuerte relación a nivel emocional con la seguridad. Por eso en contraposición al rojo (connotación de peligro), se utiliza en el sentido de "vía libre" en señalización.
- El verde oscuro tiene también una correspondencia social con el dinero.
- El color verde tiene un gran poder de curación. Es el color más relajante para el ojo humano y puede ayudar a mejorar la vista.
- El verde sugiere estabilidad y resistencia.
- En ocasiones se asiocia también a la falta de experiencia: "está muy verde" para describir a un novato, se utiliza en varios idiomas, no sólo en español.
- En heráldica el verde representa el crecimiento y la esperanza.
- Es recomendable utilizar el verde asociado a productos médicos o medicinas.
- Por su asociación a la naturaleza es ideal para promocionar productos de jardinería, turismo rural, actividades al aire libre o productos ecológicos.
- El verde apagado y oscuro, por su asociación al dinero, es ideal para promocionar productos financieros, banca y economía.:
  - El verde "Agua" se asocia con la protección y la curación emocional.
  - El verde amarillento se asocia con la enfermedad, la discordia, la cobardía y la envidia.
  - El verde oscuro se relaciona con la ambición, la codicia, la avaricia y la envidia.
  - El verde oliva es el color de la paz.
Negro:
- El negro representa el poder, la elegancia, la formalidad, la muerte y el misterio.
- Es el color más enigmático y se asocia al miedo y a lo desconocido ("el futuro se presenta muy negro", "agujeros negros"...).
- El negro representa también autoridad, fortaleza, intransigencia. También se asocia al prestigio y la seriedad.
- En heráldica el negro representa el dolor y la pena.
- En una página web puede dar imágen de elegancia, y aumenta la sensación de profundidad y perspectiva. Sin embargo, no es recomendable utilizarlo como fondo ya que disminuye la legibilidad.
- Es conocido el efecto de hacer más delgado a las personas cuando visten ropa negra. Por la misma razón puede ayudar a disminuir el efecto de abigarramiento de areas de contenido, utilizado debidamente como fondo.
- Es típico su uso en museos, galerías o colecciones de fotos on-line, debido a que hace resaltar mucho el resto de colores. Contrasta muy bien con colores brillantes.
- Combinado con colores vivos y poderosos como el naranja o el rojo, produce un efecto agresivo y vigoroso.
Tabla de propiedades de los colores

En la siguiente tabla vamos a resumir, para los principales colores, qué simbolizan, así como su efecto psicológico o acción terapéutica, tanto en positivo, como en negativo:
Tabla de sensaciones:
Ahora vamos a plantear el ejercicio inverso: supongamos que estamos diseñando un nuevo sitio web. Y supongamos que en determinadas situaciones queremos sugerir, promover determinados sentimientos entre nuestros visitantes. En la siguiente tabla esquematizamos como:

Fuente: http://www.webusable.com/coloursMean.htm

¿Que quieres transmitir con tu web? Los colores te ayudarán

2008-01-14T08:43:00.000-08:00

La programación web no es más que otra forma de vender un producto que has de hacer llegar a los ojos de los clientes y enamorarlos en la primera impresión. Por ello además de tener en cuenta una estructura idónea y adaptada al rango de usuarios a los que va dirigida es importante a la vez que interesante tener en cuenta los colores que vamos a usar en nuestros proyectos.

Los colores es lo segundo que nuestro cerebro capta despues de la estructura, por ese motivo hemos de pensar muy a conciencia que colores usar para vender nuestro producto. Al igual que colocamos en la parte superior el título de nuestra página para que sea lo primero que vea nuestro usuario, hemos de pensar en el conjunto y crear un estructura homogenea que transmita unos sentimientos al usuario.

Los colores nos afectan psicológicamente y producen ciertas sensaciones, y esas hemos de aprovecharnos de dichas sensaciones para conseguir nuestro objetivo, hemos de tener en cuenta que la asociación de colores es algo cultural, por lo tanto tenemos que tener cuidado con que elegímos, ya que podemos causar el efecto inverso al que queremos provocar. Por ese motivo hemos de conocer nuestro ratio de mercado y a quien vamos a dirigir nuestro sitio web.

Para empezar deberemos saber que cada color ejerce sobre una persona 3 efectos:

Impresión: llamamos la atención del usuario.
Expresión: conseguimos transmitir una emoción por lo comentado anteriormente.
Construye: dotamos de significado, convertimos en un simboló.

Colores y sensaciones

Rojo: Culturalmente asociamos rojo con pasión ardiente, sexualidad, erotismo… aunque también con peligro, error. Hemos de tener cuidado con que tipo de rojo usar ya que producen efectos agresivos. Jugando con las tonalidades más claras de este color podemos aportar un toque sensual a nuestro sitio web.
Anaranajado: Representa la alegría, la juventud, el calor, el verano,… causa optimismo, seguridad y confianza. Ayuda a disminuir la fatiga, es ideal para lugares donde se ha de transmitir mucha información.
Amarillo: El color más luminoso, es el color de la luz del sol. Provoca buen humor y alegría, estimula la vista y el sistema nervioso. Está vinculado a la actividad mental y la inspiración creativa ya que despierta el intelecto, de ahi que se use para indicar alerta. (offtopic: ¿Nunca habeis probado a estudiar con una hoja amarilla debajo de los apuntes? Se queda todo más fácil :D).
Verde: Simboliza esperanza, es un color hipnótico, relajante, ayuda a controlar el insomnio, la fatiga,… Ideal para contrarestar los colores más cálidos.
Azul: Es el más sobrio de los colores fríos, transmite seriedad, confianza y tranquilidad. Se el atribuye el poder para desintegrar las energías negativas. Favorece la paciencia la amabilidad y serenidad, aunque la sobreexposición al mismo produce fatiga o depresión. También se aconseja para equilibrar el uso de los colores cálidos. Ideal para ambientes que inviten al reposo.
Púrpura: Asociado con el misterio, la intuición y la espiritualidad este color ayuda a disminuir la angustia, las fobias y el miedo.
Blanco: La pureza por excelencia, paz, alegría y pulcritud, aunque en los paises islámicos simboliza la muerte.
Negro: El color más oscuro solo puede transmitir dolor, tristeza, melancolía y irritabilidad. Denota poder, misterio y estilo.
Gris: Puede expresar elegancia, respeto, desconsuelo, vejez y aburrimiento, es un color neutro que no influye en los otros colores.

Conociendo ya el significado de los colores, solo nos queda unirlos de una forma equilibrada y homogenea para transmitir una sensación que el usuario perciba de forma inconsciente, de esta forma tendremos un punto más para conseguir que vuelva.

Fuente: http://www.anieto2k.com/2006/09/23/%c2%bfque-quieres-tranmitir-con-tu-web-los-colores-te-ayudaran/

¿Así que usas Flash?, entonces te odio

2007-12-12T07:58:00.000-08:00

A lo largo del tiempo he notado como en ambientes profesionales relacionados a Internet (Dicese de donde no hay lusers alrededor) los desarrolladores de Flash somos lapidados sin piedad cada vez que entramos en tema de discusión.

Vamos a especificar un caso puntual; la comunidad del software libre.
Si alguno de ustedes es asiduo a sitios como barrapunto o slashdot (Donde los comentarios obtienen puntaje de -1 a 5 siendo los de 5 los que mas aporten a la noticia) verán que cuando se publica una noticia donde el titulo incluya Flash o Macromedia aparecen de 1 a 10 mensajes con puntaje 5 mencionando las razones de porque Flash debe desaparecer de la faz de la tierra; si bien, muchos comentarios mencionan cosas falsas, algunos se basan en lo que se ve en la web comúnmente.
Con esto no digo que todos sean malos, casi siempre hay un (1) comentario bueno resaltando las capacidades que tiene Flash; pero muy pocas personas, sobre todo de un mundo donde Flash no existe aun como entorno de desarrollo (Linux, BSDs excepto OSX, etc) conocen lo que realmente puede hacer si es bien empleado y lo juzgan por lo que se ve. (para la muestra, un comentario altamente punteado con algunas mentiras obvias)

Flash como tal empezó como simplemente un software de animación vectorial con algunas acciones básicas y se ha convertido en lo que es ahora, un entorno multimedia de desarrollo de todo tipo de trabajos que requieran integración de medios interactivos de fácil distribución multiplataforma; desde animaciones para televisión hasta Rich Internet Applications para Intranets o aplicaciones web (uff, si me acordara de esto cada vez que voy a iniciar un curso de Flash) y es precisamente eso; sus inicios, lo que lo tienen marcado de nacimiento.

Dame click, dame click, a mi a mi a mi

La mayoría de power users de cualquier sistema operativo tiene bastante experiencia con la web; alguna vez navegó con Internet Explorer y odia los popups emergentes y la publicidad intrusiva en un banner de 640x480 que te meten en la mitad del contenido de una pagina para que hagas click de manera mas efectiva
En que estará hecho este banner... ¿Como puedes hacer una súper animación que incluya todo tipo de efectos raros, sonido, bitmaps y la foto de tu perro, en menos de 30Kb? Si dijiste Flash, has acertado.

El odio a Flash inicia desde los banners, la gente no los quiere (Y no los querrá y se acabo) así que si hacemos el silogismo

No digo que sea malo hacer banners; digo que si es malo meter publicidad intrusiva y encima abusar de flash para ello

Neo: Ya se animar; Morpheus: Muéstrame

Si eres novato en Flash seguramente lo primero que aprenderás es animación, seguro que luego aprendes a publicar para la web y seguro que haces una megaINTRO para tu web con muchos bonitos colores y animaciones shape morph(Interpolación de forma) por montón; ahora claro, avanzas un poco mas, aprendes a hacer botones y mejoras la experiencia de tu usuario metiendo un botón Skip Intro

No lo hagas y de hecho, repite después de mi esta lista

Un intro es malo
Un intro es malo
Un intro es malo

Si tienes una animación de intro en tu web, repetirás estas tres sabias frases todas las noches antes de dormir.

Hace poco hablamos de eso en el foro y a partir del estudio encontramos que son los defensores del arte los que sostienen la utilidad, belleza y funcionalidad de estas animaciones.
El diseño no es un arte como tal (Si quieres arte, DeviantART) y tomando frases de un compañero del foro, un diseño debe ser funcional, usable y practico, ahora, si encima es bonito, pues tanto mejor, un buen diseño.
Las intro no aportan nada, son aburridas después de la primera vez, casi siempre (casi) son pesadas y te dejan como tonto pensando que esperaste todo eso para ver los bonitos colores animados y al fin entrar a la web; no te engañes, una intro solo sirve para aumentar ego de diseñador (Ahm todos la van a ver, MWAHAHAHA), pero no para que tus usuarios se queden un poco mas

¿Y el espacio que sobra?, pero si no sobra nada!

Popups y fullscreen son palabras que el colectivo de power users relaciona con Flash Developer; si no, solamente miren cualquier pagina web de la película de turno y verán que, después de una intro de 1Mb, te abre un popup con la información de la película

¿Es tan difícil hacer un fondo presentable para una web en Flash?; ¿Es necesario arruinar la experiencia del usuario con un intrusivo popup que te quita las barras de navegación?, ¿Tan poco éxito quieres tener con tu web?

El usuario no pidió que le abrieran una nueva ventana (una mas de tantas), esto es incomodo, ¿Y si el quería seguir navegando en la ventana donde estaba? O peor aun ¿Si usa un navegador de verdad y esta usando pestañas? Acabas de arruinar por completo su experiencia (Y la imagen de tu web de paso)

No solo eso, sino que le quitas al usuario dos elementos claves, la barra de dirección y las herramientas de navegación. ¿Qué de malo tiene que se vea la URL?, ¿Qué de malo tiene poder usar el botón Atrás?

Pero también tenemos la práctica mas maligna de todas... fullscreen

Imagina que estas trabajando en tu PC y de repente tu pantalla queda en blanco absoluto, pasan 35 segundos de desesperación donde, si eres un usuario común, ya oprimiste reset y si no, esperaste mientras intentabas con desesperación dar click en las esquinas tratando de cerrar, minimizar o lo que fuera
Al fin carga algo, parece una web (Una cuya imagen tu mente no olvidara, ya sabes, resentimiento) y sin importar lo que tenga adentro buscas algo similar a Cerrar; al fin, has podido recuperar el control de tu PC, pero esta experiencia te ha marcado toda la vida y solo recuerdas en una esquina un logo que decía Hecho en Flash

Espero que los amantes del arte de la web nos comprendan, NO A LOS POPUPS, no a los Fullscreen

¿Y si animo el logo? ¿Y si animo las noticias? ¿Y si animo la botonera?

Que el logo tiene una animacioncilla divertida, esta bien, siempre y cuando no sea fastidiosa a la vista y en lo posible no sea animada todo el tiempo
Que las noticias van animadas en un scroll ... ¿Quieres que se lean o que el usuario haga ejercicios oculares?
¿Qué has animado hasta la foto de tu jefe pasando de un lado a otro de la web?; es cierto que Flash es poderoso en la animación; pero no tienes que abusar; una web es una web, hecho en Flash no implica que todo deba ser animado; piensa en lo que te fastidiaría si no conocieras el contenido y quisieras leerlo, piensa en tu usuario, no en ti.

En las manos de los Flashers del mundo esta quitarnos la mala fama que tenemos; en tus manos esta difundir la palabra, en nuestras manos esta educar al newbie en el camino de la fuerza y no dejarlo tomar el sendero del lado oscuro

La web debe ser agradable para todos.

Fuente: http://www.cristalab.com/blog/1531/asi-que-usas-flash-entonces-te-odio

Posicionamiento y XHTML

2007-12-10T13:04:00.000-08:00

Algo casi imprescindible hoy en día para mejorar nuestro posicionamiento en
buscadores consiste en transformar nuestros viejos documentos HTML a XHTML.

Puede que parezca una tarea larga y tediosa y que nos de pereza por ello, pero vamos a ver a continuación que es bastante fácil. ¡A lo mejor tus páginas ya son casi XHTML y no te habías dado cuenta!

¡Ah! otra cosa más. Si todavía no dispones de ningún sitio web, entonces no tienes ninguna excusa. Para los nuevos sitios es casi una obligación empezar utilizando XHTML, ya que aseguraremos una mayor compatibilidad con todos los navegadores y mejoraremos las posibilidades de aparecer en las posiciones más altas de los buscadores.

¿Qué es el XHTML?
XHTML, al igual que HTML, es un estándar prupuesto por el W3C y basado en XML. Desde que nació el HTML ha habido una invención constante de nuevos elementos (etiquetas o atributos) para ser usados dentro de HTML, lo que ha provocado grandes problemas de compatibilidad entre las distintas plataformas. El XHTML es una "reformulación del estándar HTML" que pretende conseguir que todos los documentos web sean compatibles en cualquier navegador de cualquier dispositivo.

Pero... ¿por qué XHTML ayuda al posicionamiento web?
Pues la respuesta es sencilla. Utilizando XHTML conseguimos que el código de nuestras páginas web sea mucho más sencillo, limpio y claro para los robots de los buscadores.

Si además utilizamos hojas de estilo CSS para todo lo referente a la presentación, el código de nuestras páginas será todavía mucho más limpio, tendrá bastantes menos etiquetas y atributos con lo que habremos aumentado el porcentaje de palabras clave y habremos reducido, por tanto, el peso la páginas y el tiempo de carga.

Características del XHTML

Todos los nombres de etiquetas y sus atributos deben estar escritos en minúsculas.
Los valores de los atributos deben ir siempre entre comillas.
Todas las etiquetas de apertura y cierre tienen que estar anidadas correctamente.
Todas las etiquetas deben tener su correspondiente etiqueta de cierre. Los elementos que estén vacíos deben tener también etiqueta de cierre o terminar con />
Atributos como selected o checked tienen que escribirse de forma completa: selected="selected" y checked="checked" (Ya no se permiten este tipo de abrebiaturas).
Los documentos XHTML deben incluir obligatoriamente una declaración de tipo de documento justo antes del nodo raíz.
El elemento raíz será obligatoriamente y tendremos que declarar también obligatoriamente el namespace usando el atributo xmlns:

Y ahora que ya lo he modificado todo, ¿cómo compruebo que está bien?
Una vez que hayáis hecho los cambios pertinentes en el código de vuestras páginas, podéis validar el código en la siguiente URL que nos brinda el W3C: http://validator.w3.org/

Y cuando lo tengáis todo listo podéis añadir un icono en vuestra web como el que tenemos en esta (a la derecha, justo debajo de la barra lateral), para indicar a los visitantes que vuestro sitio cumple con el estándar XHTML 1.0 del W3C.

Fuente: http://www.locualo.net/programacion/posicionamiento-xhtml/00000017.aspx

La importancia creciente de la accesibilidad de sitios web

2007-12-04T08:46:00.000-08:00

Resumen: El numero de personas que acceden a servicios a través de internet crece cada día. Un porcentaje creciente de estas sufre limitaciones bien por su edad avanzada o por sufrir algún tipo de discapacidad para la realización de sus actividades cotidianas (oir, ver, hablar, valerse por sí mismo). Si al diseñar sitios web nos olvidamos de estas personas, las estamos discriminando. Por otra parte, el acceso a servicios de internet desde contextos y dispositivos variados (TVi, Wireless, PDAs), nos obliga a diseñar pensando en facilitar el acceso a la información de este público.

Limitaciones que podemos encontrar y su traslación al diseño web

Físicas:
Discapacidades visuales: (Ceguera total a parcial; daltonismo; visión borrosa...). Internet es un medio fundamentalmente visual y basado en texto e imagen. Ello no impide que personas con discapacidades visuales accedan a los contenidos de un sitio web mediante otro tipo de dispositivos, Voz, Braille.

Discapacidades motrices: (Parkinson, artritis, esclerosis múltiple, parálisis...) impiden el manejo de dispositivos estándar como teclados, ratones. No tienen porqué tener o ser capaces de usar un teclado o un ratón ya que existen otros tipos de dispositivos de acceso a la información como pueden ser los navegadores basados en voz.

Discapacidades auditivas: (sordera total, parcial) En algunos sitios web, es importante el sonido. Algunos tipos de sorderas impiden la audición de señales y pitidos del sistema.
Discapacidades cognitivas y de lenguaje: (Dislexia, dificultades para recordar, resolver problemas, limitaciones sensoriales, de comprensión del lenguaje)

Para estas personas, una maquetación compleja o un exceso de información en los sitios web puede causar un bloqueo mental, por ello es importante una presentación limpia y clara de la información a incluir en cada documento.

Discapacidades relacionadas con la edad: Desde pérdida de visión a deterioro de las capacidades auditivas, pasando por la pérdida de capacidades motoras y de coordinación debido a enfermedades como artritis, parkinson, etc.

De entorno: Al diseñar sitios web, no se está en el mismo entorno en el que será utilizada la aplicación en la que estamos trabajando, por ello, es importante ponerse en el lugar de nuestro usuario y su entorno de acceso ya que puede encontrarse en un entorno ruidoso, como un lugar público, o realizando otras tareas simultáneamente como atender un teléfono o conducir (en este último caso, que implica la seguridad de las personas, ponerse en este lugar del usuario es un punto crítico).

Técnicas:
Están relacionadas con el equipo con el que accede un usuario a internet. Dispositivos de acceso a la información:
- Navegadores antiguos
- Sistemas operativos diferentes Dispositivos de visualización
- pequeños (PDA, teléfono móvil)
- Pantalla en modo "sólo-texto" - Profunidad de color (VGA) - Resoluciones Conexión: - Mala conexión a Internet

Consecuencias de la NO ACCESIBILIDAD de un sitio web

Cuando afectan a las capacidades físicas, podrían resumirse en una sóla palabra: discriminación.

No acceso a información relacionada con el empleo: empleados minusválidos que no pueden realizar su trabajo en la empresa por tener una intranet inaccesible; aplicaciones de empresa.
No acceso a información sobre actividades cívicas y relacionadas con el ejercicio de los derechos ciudadanos.
No acceso a programas educativos.
No acceso al comercio en la red.
No acceso a información general de la Web.
Y en general, cierto estado de desconexión e incomunicación.

Para evitar esta situación, la Comisión Europea puso en marcha la iniciativa "eEurope - Una Sociedad de la Información para todos" (8 de diciembre de 1999). "Con la iniciativa eEurope se pretende que Europa pueda explotar sus puntos fuertes y superar los obstáculos que aún se oponen a la asimilación de las tecnologías digitales, a través de la consecución de tres objetivos clave:
Conseguir que todos los ciudadanos, hogares, escuelas, empresas y administraciones estén conectados a la red
Crear en Europa una cultura y un espíritu empresarial abierto a la cultura digital
Garantizar que la sociedad de la información no se traduzca en exclusión social."

En EE.UU. existe legislación federal que siguiendo las recomendaciones de la Web Accesibility Initiative (WAI), comisión de expertos del W3C, persigue la adopción de medidas de usabilidad y accesibilidad en el desarrollo de sitios web para facilitar el acceso a la información a todas las personas independientemente de sus capacidades físicas o dispositivos de acceso.

A través de la Sección 508 requiere a las Agencias Federales que desarrollen sus aplicaciones de forma que resulten accesibles para personas con discapacidades. Para ello, el Center for Information Technology Accommodation (CITA), de la Administración de EE.UU. ha sido encargado de la formación de los empleados federales para permitir el desarrollo de estas aplicaciones accesibles. Para lograr estos puntos, el WAI, como organismo dependiente del W3C, responsable de la instauración de estándares en la red, publica sus recomendaciones de estándares a adoptar por los profesionales del desarrollo web basándose en 5 puntos clave:

Tecnología
Guías y pautas
Herramientas
Educación
Investigación y desarrollo

Estos estándares se agrupan en:

Guías de Accesibilidad a Contenido Web 1.0: Dirigidas a la realización de sitios web accesibles para personas con discapacidades.

Guías de Accesibilidad para Herramientas de Publicación 1.0: sirven para guiar a los desarrolladores web en la utilización de herramientas de producción de contenidos para que estos sean accesibles.

Guías de Accesibilidad para Dispositivos de Acceso 1.0: Su utilidad es mostrar como hacer accesible la información a diferentes navegadores y reproductores multimedia y otros dispositivos de tipo asistivo.

El 5 de mayo de 1999, el W3C eleva formalmente Guías de Accesibilidad a Contenido Web 1.0 a recomendación, consistiendo en 14 pautas a seguir al desarrollar un sitio web:

I.- Ofrecer alternativas al contenido visual y auditivo
II.- No apoyarse únicamente en el color y comprobar que tanto textos como gráficos son comprensibles cuando se visualizan sin color.
III.- Utilización adecuada de hojas de estilo y marcadores Marcando los documentos con los elementos estructurales apropiados y controlando la presentación con hojas de estilo en vez de con elementos y atributos de presentación.
IV.- Identificar el lenguaje natural utilizado en cada documento, para facilitar la pronunciación o interpretación de texto abreviado o extranjero.
V.- Creación de tablas de contenido cuya transformación sea adecuada mediante marcadores que permitan su transformación a través denavegadores accesibles y otras aplicaciones de usuario.
VI.- Ofrecer medios alternativos a las últimas tecnologías Asegurar que los documentos son accesibles incluso cuando el dispositivo de acceso no soporta o tiene desactivadas las últimas tecnologías.
VII.- Permitir que el usuario controle las variaciones sobre contenidos basados en tiempo como animaciones, secuencias de diapositivas, etc. Este control se traduce en la posibilidad de detener, actualizar, dichos contenidos.
VIII.- Asegurar la accesibilidad del interfaz de usuario independientemente del dispositivo de acceso.
IX.- Diseñar con independencia del dispositivo utilizando características y estándares que permitan activar o desactivar elementos de la página a través de diversos dispositivos de entrada.
X.- Utilizar soluciones transitorias que permitan el acceso de dispositivos antiguos como navegadores de versiones antiguas y otras plataformas.
XI.- Apoyarse en tecnologías y pautas W3C o proporcionar versiones alternativas allí donde las pautas W3C no sean aplicables.
XII.- Proporcionar contexto y orientación a la información a través de elementos complementarios que permitan la comprensión de documentos complejos. (Títulos, navegación...)
XIII.- Ofrecer mecanismos claros y consistentes de navegación que apoyen al usuario en su tarea de encontrar información.
XIV.- Asegurar que los documentos sean claros y simples para una comprensión más fácil.

Conjuntamente a estas 14 pautas, el WAI ofrece unas reglas conjuntas que permiten la aplicación concreta de cada una de estas pautas y las agrupa en 3 niveles de prioridad.

Prioridad 1: Los desarrolladores de contenido web DEBEN satisfacer estos puntos o el contenido será inaccesible para algunos usuarios.

Prioridad 2: Los desarrolladores de contenido web DEBERIAN satisfacer estos puntos o el contenido podría resultar inaccesible para algunos usuarios.

Prioridad 3: Los desarrolladores de contenido web PUEDEN satisfacer estos puntos o el contenido puede presentar problemas de accesos para algunos usuarios.
Según el nivel de adhesión a estas prioridades, el WAI recognoce 3 niveles de conformidad para lo que permite la inclusión de un logotipo (no verificado por W3C en cuanto a su veracidad) indicando el nivel de conformidad alacanzado.

Nivel "A" (A): incluye los puntos de verificación de prioridad 1.
Nivel "Doble A" (AA): incluye las prioridades 1 y 2.
Nivel "Triple A" (AAA): incluye las prioridades 1, 2 y 3.

Cómo comprobar la accesibilidad de un sitio web

Servicios de validación automática de páginas web Se trata de servicios de acceso on line, que permiten el acceso a nuestro sitio web presentando el código validado según los estándares especificados. Bobby: desarrollado por CAST (Center for Applied Special Technology).

Aplicación que realiza un análisis en tiempo real de la página solicitada generando una nueva página donde se marcan de manera gráfica los fallos de accesibilidad y los elementos incorrectos o no estándar de HTML. Validador del WAI: Sirve para la detección automática de etiquetas no estándar de una página web para la versión seleccionada de HTML.

NetMechanic: Validador on line de código HTML. Verifica el código de un sitio web generando un reporte a través de email.

Listas de comprobación y autoevaluación (Checklists) Web Page Accessibility Self-Evaluation Test de la Diversity Management Directorate (Public Service Commission de Canadá), mediante este test de autoevaluación, se puntúa la accesibilidad de un sitio web basándose en las respuestas a un cuestionario acerca de los diferentes puntos de accesibilidad de la página.

HTML Author Checklist de la WAI.

Comprobación con varios navegadores y dispositivos Este punto es básico. Adicionalmente, la WAI y muchos otras organizaciones recomiendan la verificación de la accesibilidad de los sitios web mediante:

Navegador "sólo-texto" (Lynx o NetTamer) Ver a través de un emulador Lynx

Navegador basado en voz (PwWebSpeak)

Navegador estándar con:
Gráficos y multimedia desactivados
Sonido desactivado
Sin ratón
Resolución de pantalla en VGA
Distintos modelos y versiones de navegadores estándar como Explorer y Microsoft, Opera..., o incluso Mosaic

Fuente. http://www.alzado.org/comentarios.php?id_art=2
Autor: Luis Villa
Esta obra fue publicada por su autor bajo Licencia Creative Commons

23 puntos a tener en cuenta en el diseño web

2007-12-04T05:45:00.000-08:00

Y en muchas, pero que muchas ocasiones las decisiones adoptadas son contrarias a la orientación al usuario del sitio web.

Aquí tenéis 23 sugerencias que se pueden extraer del estudio que se han realizado con la técnica “eye-tracking” y que puedes utilizar para mejorar el diseño de tu página web. El artículo original, en inglés, esta publicado en Virtual Hosting.

El texto atrae la atención antes que los gráficos. Contrariamente a lo que podría imaginarse, lo primero que un usuario visita en un sitio web no son las imágenes. La mayoría de los usuarios que llegan a tu sitio lo hacen buscando información, y no imágenes, así que asegúrese de que tu sitio web está diseñado para que las partes más importantes de tu texto son lo más destacado.
El movimiento inicial de la mirada se centra en la esquina superior izquierda de la página. No debe sorprender que un usuario visite las páginas web de esta manera, ya que la mayoría de las aplicaciones están diseñadas con la parte superior izquierda como el foco principal. Puedes hacer un favor a tu sitio web al mantener este formato a la hora de crear el diseño. Recuerda, tienes que tener en cuenta lo hábitos de los lectores si quieres tener un sitio orientado al usuario.
Al inicio, los usuarios buscar en la parte superior izquierda y en la parte superior de la página antes de desplazarse hacia abajo y hacia la derecha. Los usuarios generalmente escanean las páginas web en forma de ‘F’. Asegúrate de que los elementos importantes de tu contenido se encuentran en estas áreas clave. Utiliza titulares, subtítulos, viñetas, y texto resaltado a lo largo de la página de manera que incites a los lectores a leer más.
Los lectores ignoran los banners. Los estudios han demostrado que los lectores en gran medida hacen caso omiso de los anuncios (banners). Si estás tratando de hacer dinero a través de anuncios, lo que necesitas es ser creativo en su ubicación o en los tipos de anuncios que coloques en tu sitio.
El diseño en el formato de las fuentes no se tiene en cuenta. ¿Por qué? Pues porque los usuarios suponen que son anuncios y que no tienen la información que necesitan. De hecho, los estudios demuestran que los usuarios tienen dificultades para encontrar la información en letras grandes de color con formato.
Mostrar los números como números. Lectores les resultará mucho más fácil de encontrar información en su sitio si utiliza números en lugar de escribirlos. Recuerda que estás escribiendo para los lectores que van a ser principalmente de exploración de su sitio, a fin de hacer que les resulte más fácil encontrar lo que necesitan y mantenerlos interesados.
El Tipo de tamaño de la letra influye en el comportamiento de la visualización. Las fuentes pequeñas aumentan la concentración de la lectura en el texto mientras que las fuentes más grandes animan al usuario a explorar por la página. Dependiendo de tus necesidades, elige un tipo de letra u otro.
Haz que tus usuarios puedan buscar en una parte específica del texto. No uses subtítulos como un formato particular, para ello asegúrate que sean pertinentes y de interés. También pueden ayudarte si incluyes palabras clave que ayuden a la idexación de la web.
Los usuarios, en general, exploran la parte inferior de la página. Puedes utilizar esto a tu favor dándoles información clave cuando los lectores están explorando la página. Resaltar algunas secciones o crear listas con viñetas ayuda a encontrar información y a leer la página.
Frases cortas mejor que párrafos largos. La información en tu página debe de estar diseñada para el corto tiempo de atención de la mayoría de los usuarios de Internet. Mantén los párrafos y las frases cortas a menos que el contexto lo requiera, por ejemplo las descripciones de los productos de un sitio de comercio electrónico.
Una columna es mejor que varias para conseguir atraer la atención de los usuarios. No abrumes a los visitantes de tu sitio con demasiada información. La simplificación es mejor en algunos casos. La utilización de múltiples columnas es probable que sean ignoradas por los usuarios.
Los anuncios en la parte superior y en la parte izquierda de una página recibirán la mayor atención. Si vas a publicar anuncios en tu sitio, intenta integrarlos en la parte superior izquierda de la página, dónde tendrás la mayor atención visual. Pero sólo porque los lectores los vean no significa que hagan clic sobre ellos, por lo tanto no sacrifiques el diseño sólo para ganar un poco de visibilidad.
Los anuncios colocados junto a los mejores contenidos son los más vistos. Si usted quiere que sus anuncios se vean y que hagan clic en él, incorpóralos en tu diseño de manera que se coloquen cerca de los elementos más interesantes de tu contenido. Los usuarios podrán encontrar lo que necesitan y además tendrás una óptima visualización de tu publicidad.
Los anuncios de texto son los más leídos. Como dijimos anteriormente, la media de usuarios de Internet, en general, no pierde mucho tiempo buscando en cosas que parecen ser de inmediato anuncios. Esa es la razón que sean mejores los anuncios de texto. No se trata de distraer y de mezclar con el resto del contenido de la página, pero son visualmente menos irritantes para el lector y, en definitiva, tienen más éxito.
Las imágenes grandes reciben más atención. Si vas a usar imágenes en tu página, cuanto más grandes mejor. La gente está más interesada en una imagen donde se pueden ver claramente los detalles y la información. Sólo asegúrate de que toda imagen que utilizas es particularmente pertinente a tu texto, de lo contrario es muy probable que sea ignorada.
Imágenes sencillas y limpias atraen más la atención. Si bien pueden funcionar bien con tu diseño, las imágenes artísticas no van a obtener mucha atención del lector. Si está usando fotos con gente, asegurarse de que son claras. Cabe señalar también que las fotos con el “verdadero” gente, y no con modelos, dan mejor resultado.
Utiliza titulares. Lo primero que leen los usuarios en una página son los titulares. Asegúrate que no bloquean otros temas de la página y que estos destacan lo suficiente para incitar al lector a seguir buscando.
Los usuarios pasan mucho tiempo mirando los botones y menús. Debido a esto, tendremos que dedicar algo de tiempo extra para asegurarnos que están bien diseñados. Después de todo, estos no sólo llaman mucho la atención de los ojos sino que son uno de los elementos más importantes de la página.
Las listas hacen que el lector mantenga la atención durante más tiempo. Una manera útil de para facilitar la lectura es la utilización de listas en lugar de párrafos largos. Utilice números o viñetas para resaltar la información importante dentro de su contenido. Esto hará tu sitio más escaneable y más fácil para los usuarios el poder encontrar la información que está buscando.
Evitar grandes bloques de texto. Los estudios han demostrado que los visitantes no se van a tomar el tiempo de estudiar grandes bloques de texto y no importa lo bien escrito que estén o la información que proporcionen. Debido a esto, es necesario romperlos en pequeños párrafos. Destaca áreas específicas, puede ayudar a mantener la atención del usuario.
Dar formato al texto puede llamar la atención. Para guiar al lector a los puntos más importantes del texto utilizar negrita, mayúsculas, cursiva, color, y texto subrayado. Pero con prudencia, si te excedes dificultará la lectura.
El espacio en blanco es bueno. Si bien se podría caer en la tentación de poner algo de texto en cada rincón de la página, es realmente mejor dejar algunos huecos. Los sitios con demasiado contenido tienden a abrumar a los usuarios y esto hace que hagan caso omiso de parte del mismo. Por lo tanto, deja espacios visuales limpios para no saturar al usuario.
Las herramientas de navegación funcionan mejor cuando se colocan en la parte superior de la página. No deseas que los lectores que llegan a tu web sólo busquen en la página inicial, querrán que naveguen por otras páginas y que localicen contenidos que puedan interesarles. Puedes ayudarles haciendo su navegación fácil, para ello coloca la barra de navegación en la parte superior de la página.

Fuente: Desarrollo Web

Informe de Carlos Guadián Orta*
URL: http://www.k-government.com/2007/11/17/23_puntos_a_tener_en_cuenta_en_el_diseo_web/

* Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

Crea un slide accesible

2007-11-29T05:24:00.000-08:00

Si necesitas un slide para tu aplicación, no dudes en echarle un vistazo a este desarrollado de forma no obstructiva. Algo más que necesario para conseguir un aplicación accesible.[Demo][Descargar]

Fuente: frequency-decoder.com via anieto2k.com

Herramientas

2007-11-28T07:39:00.000-08:00

CSS Formatter and Optimiser
http://www.cleancss.com/

CSS
53 CSS-Techniques You Couldn’t Live Without
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

Para Diseñadores y Desarrolladores
http://www.estandaresyaccesibilidad.com/2005/12/herramientas-para-diseadores-y_27.html

Mas herramientas
http://metaware-inc.wiki.mailxmail.com/EnlacesWEB

Páginas útiles

2007-11-23T09:53:00.000-08:00

Guía de Referencia CSS 2.1
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/

Galeria de imagenes con CSS
http://www.grafikas.es/web_apuntes/galerias.htm#noir

Propiedades, atributos y equivalencias CSS
http://usuarios.lycos.es/dhtml_club/objetos/propiedades.htm

Librería javascript que permite agregar un tooltip a nuestra páginas web, esto con la posibilidad de personalizar el tooltip mediante CSS
http://www.dxpro.es/index.php?topic=458.msg887

Apuntes CSS - Posicionamiento
http://www.ignside.net/man/css/posicionamiento.php

Tidy para Windows
http://www.paehl.com/open_source/?HTML_Tidy_for_Windows

Bugs de Firefox
http://www.mclibre.org/consultar/amaya/otros/ot_bugs_mozilla.html

Web Page Speed Report
http://www.websiteoptimization.com/services/analyze/wso.php

Verificadores, Editores y Herramientas para JavaScript
http://www.programas-gratis.net/b/java-script

Recopilación de herramientas javascript
http://www.anieto2k.com/2007/03/29/recopilacion-de-herramientas-javascript/

JavaScript Code Improver 1.00
http://jcay.com/jscisetup.exe

Tiempos de respuesta

2007-11-16T10:15:00.000-08:00

Tiempos de respuesta en la Web
El objetivo mínimo a alcanzar en la actualidad es un tiempo de respuesta de no más de 10 segundos, dado que este es el tiempo límite que las personas pueden prestar atención mientras esperan.

Según los expertos, los tiempos recomendados son los siguientes:

Una décima de segundo (0.1 sec) es el tiempo normal de respuesta para que el usuario sienta que el sistema esta reaccionando instantáneamente. En este punto no es necesario informar al usuario que algo esta siendo procesado o actualizado.

Un segundo (1 sec) es el tiempo limite para que el usuario se de cuenta de que hay una demora y que la misma no es una interrupción.
En demoras de más de una décima y menos de un segundo no es necesario mostrar ningún mensaje especial, pero el usuario siente que ya no esta trabajando directamente sobre los datos.
Mostrar una página en menos de un segundo le da al usuario la sensación de que esta accediendo a la información sin demoras.
Diez segundos (10 sec) es el tiempo máximo que un usuario puede permanecer atento a una tarea. Si el tiempo de respuesta es mayor, los usuarios tienden a ocupar su tiempo en otras cosas por lo que ya no están atentos a lo que la computadora esta haciendo.

Descargar y mostrar una página en menos de diez segundos permite que el usuario pueda concentrarse en reconocer la manera de desplazarse por el sitio.

Tiempo de respuesta del Servidor
Debido al dinamismo con el que son desarrolladas las páginas hoy en día, el tiempo de descarga de las mismas debe ser calculado sobre la marcha. Por lo que la demora de visualización no depende solamente del tiempo de descarga sino también del rendimiento del servidor o servidores involucrados.
En la actualidad, es muy común que los sitios Web interactúen con bases de datos, lo que hace que el proceso de descarga sea aún más lento.
Todas estas cuestiones técnicas no le interesan al usuario ya que a él no le interesa por que los tiempos de respuesta son lentos.
Lo único que ven y perciben los usuarios es que el sitio que están visitando no les esta dando un buen servicio.
Los tiempos de respuesta lentos se traducen directamente en un nivel de confianza menor.

Los factores que influyen en la velocidad de carga de una página son:

Rendimiento del Servidor
Conexión del Servidor con Internet
Internet
Conexión del Usuario con Internet
Velocidad del Navegador y de la Computadora del Usuario

Esto significa que cada uno de estos eslabones aporta su propia cuota de demora, y como las demoras son acumulativas, no se podrán conseguir buenos tiempos de respuesta mejorando solamente algunas de las partes.

Fuente: Jakob Nielsen - Usabilidad, Diseño de Sitios Web

Usabilidad web

2007-11-16T05:00:00.000-08:00

1. Introducción
Con las facilidades existentes para la creación de sitios web, aumenta considerablemente la cantidad de llamados "webmasters" y una cantidad de "sitios" que proliferan de manera amateur, ayudados de hosting gratuitos y asistentes de creación de paginas, como los de geocities.

Lo malo es que estos softwares, no muestran como hacerlos correctamente. Existen muchas cosas más a tomar en cuenta que el solo hecho de mostrar nuestra información.

Un buen sitio Web debe ser como unos buenos padres, debes hacer sentir querido a tu usuario, si no quieres que se aleje del hogar, por otros que le ofrezcan amor y comprensión.
Hacerlo sentir querido no es decirle...

"Hola usuario, sabes, eres lo mejor que me ha pasado"

...sino, simplemente ponerle el campo para buscar donde él espera que esté.

Un usuario satisfecho es tu mejor publicidad y además gratis, más que cualquier banner publicitario.

Tu web ocasiona una interacción entre una persona y una computadora, de las cuales solo la persona razona, así que has tu sitio lo mas lógico que puedas, si sabemos que el usuario no le puede hacer preguntas a la PC, pues no las ocasionemos.

2. Encontrabilidad
Este es un término utilizado en la Usabilidad, el cual se refiere a la capacidad de "Encontrar"
¿Pero encontrar que?, encontrar lo que buscabas en el sitio al que entraste.
Supongamos que entras al home de Cristalab buscando los personajes del cómic ¿Cuanto tardas en hacerlo? Más de lo que esperabas supongo, pero que tal si entras buscando el ultimo cómic o las últimas entradas al blog ¿Fácil, no?
Has fácil de encontrar para lo que esta hecho tu sitio, no quiero decir que lo demás lo hagas difícil, también debe ser fácil, pero hay cosas que llevan prioridad.

"Que no se pasen la vida buscando lo que necesitan"

Un buen sabor de boca
Una buena sensación hace que ames un sitio Web, por ejemplo, me han tocado sitios donde lleno todo un gran formulario, doy Enviar y me marca error "Faltan datos requeridos" y me regresa a la página del formulario donde el campo requerido aparece con un asterisco en rojo, a lo que en otras ocasiones esto no lo hacen y tienes que llenar un campo y te marca el mismo error de nuevo, llenas otro y otro y otro y al final resulta que todos eran requeridos, lo peor, hay unos que te borran los datos y tienes que escribir todo de nuevo cada vez que te regresa.
Imagina lo que al usuario le gustaría e inclúyelo para el momento en que lo necesite. Por ejemplo, en una web grande, el campo "Buscar".

"Código Postal incorrecto, por favor, llene nuevamente los 25 datos del formulario"

3. Amarra al usuario
La mayoría de las veces el usuario recorre visualmente toda la pagina buscando inconcientemente que esta marque puntos claves e interesantes antes decidir leerla. Si no cuenta con esto, lo más probable es que se vaya o si tenemos suerte, la agregue a favoritos para un día que no tenga nada más importante que hacer (nadie sabe si ese día llegará).

"A ver, a ver, a ver... ¿que es eso de CristaLab los mejores tutoriales?"

Un sitio Feo
A nadie e gusta un sitio "feo"; la estética juega gran parte de nuestro triunfo, dale placer a los ojos del usuario, no lastimes su vista, refleja la imagen que el esperaba encontrar en tu web. Es posible hacer un sitio estético y usable, no tienes que elegir entre una de las dos.

4. Qué es la Usabilidad
ISO/IEC 9126:
"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"

ISO/IEC 9241:
"Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"

En otras palabras; que tan fácil se navega en tu web, que tan rápido se aprende a manejar, que amigable es, que capacidad tienen de gustar, que sea intuitiva y sobre todo, que sirva para lo que fue hecha.

[Press any Key] A esto llamo Usabilidad. ¿Porque no ser específicos?, presione la tecla "Enter". Por ejemplo

La usabilidad no se enfoca solamente a que una cosa se pueda utilizar correctamente, sino que deje una buena impresión o sensación al usuario, que le sea agradable usarla.

Según la ISO la Usabilidad se enfoca en la:
Facilidad de Aprendizaje: Que tan rápido aprenden a controlar el sitio. Que tan familiar, que tan predecible es. Flexibilidad: Sí se puede hacer algo de distintas formas, sí hay distintos caminos para llegar a nuestro objetivo. Diferentes opciones para realizar las tareas. Robustez: Que tanto ayudamos al usuario, que tan fácil le hacemos el trabajo, que tan rápido cumple sus objetivos, que tan completo esta el sitio.
Esto no se trata de diseñarle el sitio al usuario como un estúpido, sino de no hacerlo sentir como uno al no entender tu sitio Web.

5. Lo que no debes hacer (1)
Aquí listo algunas cosas que yo considero no deberías incluir en tus webs, claro que al final la decisión es de cada quien.
No cosas parpadeantes, constantes, muy llamativas, que no dejen concentrarte en lo que realmente necesitas. No uses colores muy brillantes que molesten o lastimen la vista del usuario.

"OK, ya entiendo como funciona esto, leo, descanso, leo, descanso..."
Cuidar el peso de las imágenes, solo las necesarias y la calidad necesaria. No fondos de página con diseño, es muy molesto que debajo de lo que estas leyendo o tratando de leer se encuentre una imagen (foto, fondo o peor aun, gif animado). Procura siempre debajo del texto un fondo sólido. No utilizar subrayados en palabras que parezcan links, esto confunde al usuario y es molesto darle clic y que no pase nada. No poner links que parpadean. No abusar de las precargas, es molesto estar esperando a que se carguen gran cantidad de cosas, y sobre todo cuando después de que se cargo la principal, tienes que ver otra precarga cada que quieres ver una sección. No dejar mucho a la imaginación del usuario, no ponerlo en una situación donde el no sepa que es lo que tiene que hacer a continuación, donde pierda 10 segundos en encontrar el botón para continuar o lo que necesita, hay que hacerle todo muy predecible.

¿Presiono Siguiente, continuar, o finalizar?

6. Lo que no debes hacer (2)
No cambies eltamaño de las imágenes en el HTML o con el DreamWeaver o en casos extremos con el FrontPage; crea las imágenes del tamaño que las vas a utilizar con tu editor de imágenes. No usar tecnicismos que nuestros usuarios no van a comprender, no te trates de lucir con palabras que solo los van a confundir, a todos nos gusta que nos hablen en nuestro idioma.

"Si diseñó un sitio para si mismo, ¿para que lo publica en Internet?"
Ya no hagas "intros" en flash para tu web, YA NO se usa, puedes hacer una presentación de tu sitio e incluirla dentro de él, y el que quiera verla, dará clic en el vínculo. Deja que el usuario entre directamente a la página principal, no pongas donde salga el botón "Entrar al sitio" y si le pones música, que inicie apagada, si el usuario quiere escucharla el dará play.

"¿Cree que tengo tiempo para ver una Intro?, y aun peor, esperar a que se cargue, haaa y cada vez que entro tener que presionar Saltar Intro, ¿no entienden que a mi lo que me interesa es la información?, no importa, creo que por aquí hay otro sitio no tan bueno, pero no tan molesto"
Muchos dicen que ¿Para que flash?, que para que imágenes, que para que colores, si lo que importa es la información, el chiste es saber combinar estas cosas sin excederse, se puede diseñar estético sin aumentar el peso a la Web, ¿De que sirve tener tanta información si a nadie le va a atraer leerla?

7. Lo que no debes hacer (3)
No repetir el "Title" (el texto que aparece cuando dejas el puntero sobre un link) lo mismo que dice tu hipervínculo, ya que esto es redundante, y lo que uno espera es una muy breve descripción de lo que hay detrás de este link. Repetirlo solo es bueno en un menú. No le cambies el botón cerrar por un circulo en lugar de la cruz. Las metáforas familiares proporcionanuna interfaz intuitiva. Y si lo pones arriba a la derecha que mejor. Siempre trata de hacer los sitios de modo que se adecuen a la gente, no que la gente se adecue al sitio. Si ya están acostumbrados a algo ¿para que cambiarlo?

"¡Claro que le se!, el otro día vi como la usaba mi nieto, ¿Qué puede cambiar?"
No abrir links en nuevas ventanas, eso lo debe decidir el usuario. No poner información basura, nada que al usuario no le sirva, nada que este de más, eso mejor agregarlo en otra sección en la cual el entre si es que desea conocer ese dato. Esta información puede estorbar en la estética o usabilidad al saturar al usuario de información. Los Combobox que actúan al momento de seleccionarlo. Se podrían aceptar los que lo hacen al momento que seleccionas un país, pero aun estos deben avistarte que actuaran al momento de cambiar la selección. Luego pasa que usas el scroll del Mouse, y la web se vuelve loca, esto debido a que tenías seleccionado el combo y al momento de hacer el scroll cambiaste por todas las opciones de este.

8. Algunos Consejos (1)
Determinar para quetipo de usuario vamos a diseñar, se debe saber que capacidad, experiencia, conocimientos o hasta las condiciones físicas va a tener el usuario que lo va a utilizar, su edad, y además, que el sitio sea ergonómico y que cargue rápido.

"Que bien, un sitio donde puedo navegar, y de seguro hasta tomó en cuenta que padezco sordera"
Siempre un vínculo a la pagina principal (home), no olvidar incluirlo también en el logotipo. Que pueda hacerlas tareas rápido, que no tarde en ninguna actividad, si ven que algo los va a hacer perder mucho tiempo, mejor lo dejan. Si tienes un link muy descriptivo y no sabes que poner en el ALT; puedes colocar la URL a donde serás dirigido. Siempre resume la información (no como este artículo ), has que a simple vista tu artículo no se vea pesado o aburrido antes de leerlo. La Web nos ofrece la gran ventaja del hipertexto: Texto dentro de texto, links. Dentro de tu información no tienes que explicar cada palabra técnica, puedes utilizar Vínculos a donde la expliques o el apoyo de CSS para meter dentro etiquetas especiales, una pequeña explicación, y lo mejor y más recomendable, solo deja a la vista lo mas esencial, solo deja tu resumen, un comúnmente llamado "en pocas palabras" y al final puedes dejar un link o vinculo "ver más a fondo". Importante recordar que no se debe de abusar de los links dentro de texto. Recomiendo un link por párrafo, máximo dos. Una forma para contactar al Webmaster y un buzón de sugerencias, dentro de la sección del quienes somos, la cual siempre debería de existir. Lostítulos en las ventanas, estar relacionados al contenido de la misma, recuerda que cuando está minimizada es lo único que ves, aparte de otras ventajas que esto ofrece, no pongas en todas solamente el titulo de tu web. Todos vemos siempre en el orden de izquierda a derecha y de arriba hacia abajo, así que esa puede ser la importancia del contenido de nuestra Web. Siempre es bueno un efecto rollover (mouseOver) en los menús o links, a los usuarios siempre les gusta saber que está o que no esta pasando.

9. Algunos Consejos (2)
Siempre debe ser el usuario el que inicie o active cualquier cosa que suceda en el sitio, todo lo demás son intrusiones. Además debe tener el poder de detener cualquier proceso o actividad. Recuerda que puedes usar imágenes en las opciones (menús, links, secciones), son más fáciles de recordar y reconocer a simple vista. Reducir la cantidad de Clicks que tiene que hacer el usuario al mínimo, cuentan también los clic que da cuando entra a una opción de menú buscando algo y no lo encuentra y tiene que regresar y dar mas clic, así que una forma de reducirlos puede ser estructurando bien la información para que siempre la encuentre a la primera. Un diseño estándar, igual en cada sección, que todo sea similar. Si el diseño de tu sitio es consistente, sera traducido en facilidad de aprendizaje y uso. Aprender a decir mucho con pocas palabras, para reducir la cantidad de texto. El usuario siempre debe ser informado de lo que sucede detrás de la página, es decir, siempre indicarle lo que esta sucediendo, como por ejemplo: cargando contenido, enviando correo, adjuntando archivo, realizando su búsqueda, etc. Brindarle Seguridad, de manera que el usuario esté seguro de lo que sucederá al momento de realizar determinada acción, como dar clic en un link, el debe estar seguro de lo que pasará y no tener que pensarla 2 veces antes de hacerlo. No poner links ni imágenes confusas como vínculo. Siempre dales todo lo que necesitan, hazles las cosas fáciles, no los hagas batallar.

"Por favor, maquíllese antes de entrar a la siguiente sección"
Por ultimo, especificar al momento de hacer el trato o contrato con el cliente, hasta donde él tomará parte, como decirle de buena manera y lo mas diplomático que se pueda, "Usted podrá decidir que contenido quiere que resalte, pero yo decidiré la forma de hacerlo resaltar", "usted dice que, pero yo decido como". "Usted es el experto en su área y yo en la mía". Claro que sobre logotipos y colores oficiales lo más que podemos hacer son propuestas para cambiarlos.

10. Beneficios
Hay que darle menos asistencia al usuario, sobre todo si manejamos un sistema Web. Reducción notable de errores, ya saben, cuando capturan mal, o donde no va, etc. El usuario realizará sus objetivos mucho más rápido, y eso es agradable para cualquiera.

"¡Amigo!... ni te imaginas el sitio que encontré, ya te mande la dirección por correo, nos ofrece lo mismo pero este es facilismo y sin complicaciones, olvídate de liaberinto.con.fun.de"
Mantenimiento al sitio mucho más rápido y sencillo, sobre todo si utilizamos CSS.
Gran cantidad de visitas y usuarios, ya solo resta meterle contenido interesante. Mucha mejor calidad del sitio.
Tenemos usuarios más tranquilos y felices de navegar por nuestra Web. Siempre dejaremos un muy buen sabor de boca en cualquiera de nuestros visitantes.

"Navegar en este sitio es tan rico como mi café"

11. Conclusión
Siempre debemos tener en cuenta qué es lo que esperamos de los usuarios y del sitio (Si vamos a hacer un sitio para una película de cine y solo quieres causar una buena impresión o uno para tu negocio al cual quieres que vuelvan y vuelvan).

Este artículo es solo para que sepan que todo tiene un porque, no se puede realizar una Web o un sistema como a uno se le antoje, siempre hay que ir mas allá, "voltear la tortilla" como decimos los mexicanos, ponte en lugar de el usuario final.

Imaginen un sitio con todas estas características, ¿No se sentirían amados por él?

Diseño Web centrado en el usuario: Esta es una corriente que enfoca más a la forma de estructurar la información dentro de nuestro sitio Web.

Autor: QUHO Quintero
Fuente: http://www.mailxmail.com/curso/informatica/usabilidadweb

Evitando el "click aquí": el arte de enlazar

2007-11-13T06:29:00.000-08:00

En Coding Horror han escrito “Don’t Click Here: The Art of Hyperlinking” un artículo interesante sobre las mejores formas de enlazar.

El artículo contiene una introducción al “hyperlink” (normalmente traducido como hiperenlace en castellano pero suena horrible) que aunque no está mal creo que es más interesante los once puntos que tratan (las imágenes que sirven de ejemplo en cada punto también son de ahí):

Asegurate que los enlaces son lo suficiente grandes para que sea fácil hacer click en ellos. Cuando se construyen enlaces hay que evitar la “Fitt’s Law. Si lo que estás enlazando es pequeño, hazlo grande. Si no puedes hacerlo más grande, al menos añade bordes para que sea más fácil a la gente hacer click.

En la imagen siguiente sólo los números están enlazados, una pena:
El primer enlace es el más importante. El primer enlace va a llevarse la mayor parte de la atención del lector y el mayor porcentaje de clicks. Elige tu primer enlace cuidadosamente. Empieza por lo importante y no lo malgastes en una trivialidad. La imagen siguiente es un buen ejemplo de enlazar primero lo más relevante:
No enlaces todo. Usar demasiados enlaces convertirá el texto en ruido. Esto funciona en dos dimensiones: enlazar excesivamente hace el texto difícil de leer y además devalúa el valor de los otros enlaces. Enlace con moderación. Enlaza sólo las cosas lo suficiente importantes para merecer un enlace. Un ejemplo de lo que nunca hay que hacer sería algo como esto:
No alternes radicalmente el comportamiento de los enlaces. Los enlaces son la piedra angular de la web. Los usuarios se han formado durante años unas expectativas basadas en el existente comportamiento de sus navegadores. Cuando cambias la forma en que los enlaces funcionan, estás redefiniendo una parte fundamental de la web. ¿Es eso lo que realmente quieres? ¿Es eso lo que realmente tus lectores quieren?.

Veamos un ejemplo de un “gadget” que altera radicalmente el comportamiento de los enlaces:
No titules tu enlace como “Click aquí”. No uses las palabras “Click” o “aquí” en ninguna parte del texto del enlace. Describe lo que el enlace hace cuando el usuario hace click en él. Un ejemplo de un “Click aquí” innecesario:
No enlaces cosas que el usuario puede querer seleccionar y copiar. Pobre usuario el que tenga que seleccionar y copiar texto enlazado. Esto requiere de un complejo conjunto de movimientos precisos del ratón para funcionar correctamente. Aquí estoy intentando seleccionar el nombre “Ralph Waldo Emerson” que forma parte del enlace:

Por suerte no es un escenario muy habitual. Pero cuando pasa no es nada agradable y requiere algo de consideración.
No incluyas iconos en cada enlace. Si debemos usar los enlaces con moderación, debemos usar los iconos con extrema moderación. Si todos los enlaces tienen un icono, es ruido. Sólo los enlaces muy poco habituales deben incluir iconos. Pienso que un texto bien escrito puede comunicar fácilmente qué tipo de enlace es, tanto o más que un icono, pero esto entra en el reino de las preferencias de cada uno.
No hagas el contenido dependiente de los enlaces para funcionar. No todo el mundo va a pulsar en tus enlaces. Pueden estar muy ocupados para hacer click en cada uno de los enlaces que pongas delante suya, o quizá están leyendo el artículo en otro formato en el cual no pueden hacerlo: imprimido, offline, en un móvil. De todas formas es importante ofrecer el contexto necesario para hacer el contenido entendible sin la necesidad de visitar todo lo que está detrás de los enlaces.
No ocultes tus enlaces. Los enlaces deben parecer enlaces. Dales un estilo distintivo que no pueda ser confundido con ningún otro elemento o texto de la página. Usa un color único no usado en ninguna otra parte de la página y considera usar la bien gastada convención de un enlace subrayado. En el siguiente ejemplo ¿qué es un enlace y qué no lo es?:
No mezcles anuncios y enlaces. Aparentan ser enlaces pero son anuncios. ¿Cual es el anuncio y cual es el enlace? De nuevo: ¿qué es un enlace y qué no lo es? Y… ¿qué va a pensar acerca de esto el usuario?…
No ofusques tus URLs. Los usuarios pueden querer ver previamente dónde van a ser enviados con tu enlace poniendo el enlace encima del mismo y viendo la URL en la barra de estado. Evita utilizar redirecciones y servicios acortadores de URLs que hacen la URL totalmente opaca. Los usuarios no deberían tener que lanzarse al vacío y tener fe de que irán donde creen cuando hacen click en tus enlaces.

Fuente: http://sigt.net/archivo/evitando-el-click-aqui-el-arte-de-enlazar.xhtml

Buenas prácticas en el diseño web

2007-11-13T05:21:00.000-08:00

1. Información básica
En la portada de cada sitio se deben incluir claramente los elementos que a continuación se presentan, ya que éstos otorgan información importante para el usuario acerca del sitio web.
* Mapa del sitio
Especialmente si la estructura de navegación es compleja, ya sea por un gran número de secciones, niveles y subniveles temáticos, siempre será de utilidad tener un panorama completo a través del Mapa del Sitio. Mayor utilidad tendrá si cuenta con enlaces directos a cada una de las páginas.

* Datos de contacto de la unidad
Es fundamental publicar en la portada de los sitios de las unidades el teléfono y dirección de mail a través de los cuales el usuario pueda contactarse en caso de dudas referentes al contenido del sitio (es diferente al webmaster).

* Fecha de actualización
Incluir también la fecha de la última actualización del sitio en la portada. Es un elemento que puede otorgar mayor información al usuario acerca de la existencia de nuevos contenidos.

* Requerimientos técnicos
Aunque un sitio se debe construir para ser correctamente visualizado, lo más independiente posible, de las características técnicas del computador del usuario, en determinadas ocasiones es necesario explicitar en la portada si se necesita contar con algún requerimiento técnico especial (ej: para instalar alguna aplicación ).

* Encargado del sitio
Incluir en la portada datos de contacto del encargado del sitio (webmaster), nombre, correo o alias de correo, con quien el usuario pueda comunicarse en caso de tener consultas o sugerencias referentes al aspecto técnico del sitio.

2. Uso de marcos o frames
Actualmente no se recomienda el uso de marcos o frames dado que presentan muchos inconvenientes, especialmente para la indexación de las páginas en buscadores. Por otra parte, se pueden utilizar otros recursos técnicos que nos permiten obtener un resultado similar sin recurrir a los marcos o frames.

3. Peso de las páginas
La velocidad de acceso a un sitio depende en gran medida del peso en kilobytes de cada página y de la conexión con que se cuente. Para el caso de conexiones por módem cada página no debiera pesar más de 50 Kb, en tanto que para conexiones más rápidas, 100 Kb es razonable.
Para conocer el peso total de una página se debe sumar el peso del archivo HTML y el peso de cada uno de los elementos que estén presentes en la página: imágenes, videos, sonidos, animaciones, etc.

4. Ancho de las páginas
Las páginas se pueden construir con un ancho fijo o con un ancho variable, según se estime conveniente.
* Páginas de ancho fijo: el contenido de la página se mantiene estático, es independiente del tamaño de la ventana del navegador con que se visualice. Es el caso de la actual versión del Web UC, cuyas páginas tienen un ancho fijo, para una resolución mínima de pantalla de 1024x768 pixeles.
* Páginas de ancho variable: el contenido de la página es adaptable a las modificaciones que el usuario realice en el tamaño de la ventana del navegador.

5. Elementos gráficos y multimediales
Recomendaciones tendientes a asegurar la correcta inclusión de elementos gráficos y multimediales de modo de evitar que su peso afecte el rendimiento de la página:

* Peso de las imágenes
Se recomienda reducir al máximo posible el peso de las imágenes para no aumentar el tiempo de descarga de la página. Para ello se puede intervenir sobre 3 aspectos de la imagen: tamaño, cantidad de colores y resolución (72 dpi es suficiente para imágenes en web).

* Formato adecuado
Los dos formatos más usados para manejar las imágenes en web son:
* Formato GIF: recomendado para imágenes con pocos colores (soporta sólo hasta 256 colores) o de colores planos (Ej: diagramas, íconos, viñetas, fotos pequeñas o en blanco y negro etc.).
* Formato JPG: recomendado para imágenes de mayor tamaño y con mucho color (Ej: ilustraciones, fotografías a todo color, etc). Se recomienda probar ambos formatos para determinar el óptimo.

* Animaciones Flash
Se recomienda no incorporar grandes animaciones Flash directamente en la portada. Su uso demora la carga del sitio y lo hace agotador para quien tiene que ingresar repetidamente a éste.
Una buena práctica es incluir un enlace que permita saltar la presentación para entrar directamente al sitio, de modo que la presentación sea opcional.

* Plug-ins
Cuando se utilizan recursos multimediales que requieren el uso de “plug-ins” (programas visualizadores especiales) para revisarlos, se recomienda incluir el programa para ser descargado u ofrecer un enlace a los sitios donde obtenerlo.

* Archivos descargables
Cuando se incluyen recursos para ser descargados al computador personal del usuario (archivos de Video, Audio, Flash, PDFs, docs, ppts u otros), se recomienda indicar el peso de los mismos, con el objetivo de preparar al usuario a una probable espera en el proceso.

* Imágenes de fondo
Esta práctica no es aconsejable ya que aumenta el peso de la página y por ende, el tiempo de descarga. Además, frecuentemente dificulta la legibilidad de los textos.

6. Programación html

* Estructura de archivos
Es conveniente mantener un orden de carpetas para almacenar los diferentes tipos de archivos que conforman el sitio. La página de inicio debiera llamarse: index.html, e ir acompañada de las distintas carpetas, por ejemplo:

o html, para las páginas
o img para las imágenes
o swf, para las animaciones flash

* Nombre de archivos
Es conveniente que los nombres de archivos tengan no más de 8 caracteres, en minúsculas, sin espacios ni signos. Aunque actualmente los sistemas operativos de los computadores de escritorio, permiten crear archivos con nombres más largos, con mayúsculas, etc. el sitio web finalmente será alojado en servidores con otros sistemas operativos más estrictos al respecto.

* Uso de meta tags adecuados
Los “meta tags” son un conjunto de elementos que van en la parte superior (head) del código fuente de cada página. Mediante ellos se describe información concreta sobre la página a los sistemas de indexación y búsqueda. Los más importantes son los siguientes:

* Utilización de CSS
Las hojas de estilo en cascada permiten manejar en forma separada el aspecto formal (el diseño de las páginas), de el contenido. De esta manera se facilita la mantención de un sitio, ya que modificando sólo un archivo de texto se puede controlar el diseño de todas las páginas de un sitio.
La forma más eficiente para usar CSS es vincular el archivo de texto (.css), en el encabezado del código fuente de cada página, de la siguiente manera:

En ese archivo se especifican las características de los elementos de todas las páginas, por ejemplo: la fuente, su color y tamaño, para el texto, para los títulos, subtítulos, párrafos; el espacio entre líneas, entre letras, las indentaciones; las características de las tablas: bordes, colores de fondo, imágenes, etc.
* Multiplataforma
Dado que los sitios web pueden ser accedidos desde computadores que utilizan diferentes sistemas operativos, se debe asegurar que en la mayor parte de ellos, las páginas puedan verse sin mayores contratiempos.
Para asegurar esto, las recomendaciones son las siguientes:
* Utilizar código HTML estándar, evitar que el código sea optimizado para un navegador en especial.
* Probar el sitio en diferentes sistemas operativos y navegadores (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer, Mozilla, Netscape Communicator, Opera y Safari.

Fuente: http://www.puc.cl/manualdeestilo/html/practicas.html

Haciendo un Brief de Diseño (Design Brief)

2007-11-12T10:33:00.000-08:00

Un Brief de Diseño es un documento que integra una explicación por escrito acerca de lo que un cliente quiere de un diseñador para un trabajo en específico. Es una de las partes medulares de la mayoría de los diseños exitosos ya que permite al diseñador saber que hacer y que no hacer antes de empezar a trabajar en lo más mínimo.

Este documento puede ser elaborado por el cliente o por el diseñador en conjunto con el cliente. Salvo las agencias de publicidad o similares que están acostumbradas a tratar con diseñadores, son raros los clientes que llegan con un brief listo a pedir un trabajo.

Yo no era mucho de hacer este documento de una manera metódica, generalmente siempre me ha bastado con una charla acerca de lo que se busca con el diseño, pero debido a una experiencia no tan agradable con un cliente hace un mes, me volví un poco más metódico. Al principio cuesta acostumbrarse pero vale la pena. Y creanme, les ahorrará mucho más tiempo del que creen.

Navegando por la web me encontré con este articulo de Clear Design UK que explica con más detalle los puntos básicos de un Brief, los que podemos resumir en:

Perfil de la Empresa. Haciendo preguntas como... ¿A que se dedica? ¿Cuánto tiempo lleva en el mercado? y otras acerca de como esta posicionada en el mercado. El cliente no debe dar por hecho que el diseñador sabe este tipo de detalles por más obvios que parezcan.
El Objetivo del Trabajo. Así de sencillo. ¿Que desea lograr con el anuncio/folleto/logotipo? Si el cliente no tiene claro esto, es mejor darse cuenta antes para rectificar y no a medio proceso.
El Target de la Empresa. Es decir, el público a quien va dirigido el material a diseñar. Sexo, ubicación geográfica, edad, idiosincracia, ingresos, ocupación, etc.
Presupuesto y Tiempo. Estos se explican solos.
Ejemplos de otros materiales. Muchas veces los clientes tienen una idea muy clara de lo que quieren. Generalmente en estos casos, es porque han visto que tal o cual empresa que se dedica a lo mismo que ellos tiene tal o cual material. Por supuesto, el diseñador no debe copiar el trabajo de otro, pero algunas veces es bueno saber lo que el cliente tiene en la cabeza.

Menciono de nuevo que estos puntos conforman la base de un buen brief, más no nos limitan para agregar más. Podemos ser más específicos en algunos apartados, incluir especificaciones técnicas por ejemplo los valores PANTONE de una marca o medidas de una futura publicación.

Una vez con el brief listo y revisado, entonces le será más fácil y rápido al diseñador lograr resultados efectivos.

Fuente: http://planetoideblanco.blogspot.com/2007/08/haciendo-un-brief-de-diseo-design-brief.html

Cómo planear (rápidamente) un sitio web

2007-11-11T10:17:00.000-08:00

Es muy importante planear un sitio web, ya sea para crearlo o rediseñarlo. En este artículo te damos algunas pautas que pueden serte útiles aún si has creado muchos sitios con anterioridad.

Con las herramientas que existen en la actualidad, como nuestro sistema Area Construye, o programas como Movable Type, Wordpress, Drupal, Joomla y otros administradores de contenido es cada vez más fácil crear un sitio web rápidamente.

Sin embargo es muy importante dedicarle tiempo a la planeación de un sitio web, para que se garantice un lanzamiento exitoso, se facilite el mantenimiento y se prolongue la vida útil del sitio.

La planeación no debe realizarse sólo al principio, sino que es fundamental en todas las etapas del desarrollo del sitio.

Será importante conocer los puntos principales de que consta un desarrollo. A continuación te presento una versión simplificada del sistema de implementación que utilizamos en Area para crear cualquier sitio y que te será útil a tí también.

1. Definir objetivos y alcances
2. Crear estructura
3. Crear contenido
4. Elaborar imagen gráfica e interfaz
5. Producir el sitio

Estos pasos son dependientes y siguen un flujo. Es decir, no podrás crear contenido si no sabes qué estructura tiene tu sitio y tampoco es buena idea crear una imagen gráfica si no sabes qué contenido habrá en el sitio.

1. Define los objetivos que tienes para crear el sitio y determina qué alcances tendrá.

Será necesario que respondas preguntas como las siguientes:

¿A quién me estoy dirigiendo? ¿Qué es lo que quiero lograr con este sitio web? ¿Qué es lo que deseo que los visitantes hagan al entrar a mi sitio web?

Responde con claridad y procura que las respuestas sean medibles y concretas.

2. Define la estructura del sitio

Basándote en el punto anterior, puedes bosquejar qué secciones tendrá tu sitio. No le des tanta importancia a tu misión, valores, y la información acerca de tí y de tu empresa. Procura crear secciones e información valiosa para tus visitantes.

Te será muy útil utilizar mapas mentales y diagramar libremente en papel.

3. Planea y asigna tiempo para la creación del contenido

El contenido, como hemos dicho desde hace mucho tiempo, es la parte más importante de un sitio web y es lo que estarán buscando tus visitantes.

La principal razón por la que se retrasa el lanzamiento de un sitioes la creación del contenido. Ten en cuenta que hay que recopilar texto, imágenes y otros elementos.

4. Diseño Visual

Una vez que tienes definidos los alcances que esperas de tu sitio, que conoces la estructura de sitio, y que tienes bosquejado el contenido, entonces es cuando puedes crear la apariencia visual, no antes.

Es común que se quiera empezar con la parte gráfica al principio y la planeación al final. Lo único que se logra con esto es llimitar el crecimiento de un sitio y hacerlo más difícil de actualizar. Un ejemplo de este error son la gran mayoría de los sitios que están hechos enteramente en Flash, pues casi con seguridad fueron planeados empezando por la parte gráfica.

5. Producción.

Evidentemente la parte más técnica. Si definiste los puntos anteriores en forma clara, la producción será mucho más adecuada, todo estará presupuestado y pronto estarás lanzando tu sitio.

Puedes utilizar los siguientes libros como referencia:

The elements of user experience
Don't make me think
Web ReDesign: Workflow that Works

Fuente: http://www.areaestrategica.com/desarrollo_web_programacion/como_planear_rapicamente_un_si.php

Prueba tu intuición de diseñador

2007-11-11T09:55:00.000-08:00

Escenario hipotético: te despierta el teléfono a las 7 AM, lo cual te irrita demás porque anduviste de peda toda la noche anterior, celebrando la multitud de trofeos que te llevaste en un concurso internacional de diseño.

—"¿Hola?" contestas con voz aguardientosa.
—"Señor diseñador, discúlpe por despertarlo, hemos visto su éxito y queremos contratarlo para un proyecto muy importante" te dice alguien con un fuerte acento árabe.
—"¿De qué se trata?" preguntas.
—"Estamos por implementar la señalización del aeropuerto de Dubai, ya tenemos un boleto para usted que sale en dos horas. La paga será muy buena".

Maldiciendo tu recién logrado éxito, te arrastras fuera de la cama, empacas lo que puedes y le pides al taxista que se apresure para no perder el vuelo. Duermes poco, intrigado por el proyecto. Al llegar a Dubai, una persona te espera con tu nombre en un cartelón. En cuanto le dices que eres tú, te apresura a las oficinas del aeropuerto: no hay tiempo que perder.

Al llegar observas a cinco árabes discutiendo acaloradamente en su propio idioma, miran unos papeles sobre el escritorio. Parece ser un proyecto importante.

—"Señor diseñador, lo estábamos esperando!"
—"¿De qué se trata esto?" los divo-diseñadores como tú no tienen tiempo para andarse con nimiedades sociales, como saludar.
—"Señor diseñador, como sabrá Dubai ahora es un centro internacional de comercio, necesitamos un sistema de señalización que puedan enternder personas de prácticamente todas las culturas y naciones. Vimos que ganó muchos premios en un concurso internacional, por eso lo llamamos. Necesitamos que nos diga cual es el pictograma que mejor se comprenda, sin texto, para gente de todo el mundo".

Procede a escoger los pictogramas

Escoge con cuidado porque sólo tienes una oportunidad de hacerlo.

1. Elige el pictograma más comprensible para "primeros auxilios"

2. Elige el pictograma más comprensible para "Elevador"

3. Elige el pictograma más comprensible para "Escaleras"

4. Elige el pictograma más comprensible para "Extintor"

5. Elige el pictograma más comprensible para "Teatro"

6. Elige el pictograma más comprensible para "Boletos"

Ver las Soluciones

Fuente: http://blog.duopixel.com/articulos/intuicion.html

Estructura de un Diseño <-> 1 de 2

2007-11-11T09:50:00.000-08:00

Estructura

La estructura en el diseño hace referencia a la manera en que se encuentra distribuidas las formas o módulos dentro del mismo, es decir, nos ayudará a elegir la posición óptima de los objetos que conforman nuestro diseño para evitar la saturación o la mala distribución de la gravedad en los mismos, entre otros, va de la mano con el boceto.
Existen 3 principales clasificaciones de la estructura… Formal, semiformal e informal. Estas tres clasificaciones sirven para dividir u organizar nuestro diseño según los requerimientos que tengamos, por ejemplo:

Estructura Formal: La estructura formal esta caracterizada por la división específica (matemática) o justificada de cada forma, y podría utilizarse para trabajos que requieran proyectar seriedad y organización como en un despacho consultoría empresarial.

Un closip formal

Estructura Semiformal: Esta clasificación contiene ciertos módulos de la estructura que se encuentran divididos de manera formal pero contiene algunos otros que se encuentran colocados de manera aleatoria o sin un orden específico, podría aplicarse para la publicidad impresa de una agencia publicitaria, colocando una mitad organizada y otra mitad con elementos creativos que expresen su constante innovación o adaptación, sin una línea a seguir.

Un Closip organizado e innovador

Estructura Informal: Aquí, más bien no existe una justificación específica para la posición de las formas, generalmente utilizado por diseñadores amateur que no conocen un poco la técnica del diseño, cuando no se tiene un mensaje definido o bien, cuando se necesita proyecta cierta libertad o desorden.

Un Closip sin límites ni reglas

Ok, ya sabía eso… Pero ¿de qué me sirve tener un orden?

Como un edificio, un diseño debe contar con una estructura sólida que permita soportar el peso visual de cada uno de sus elementos y justificar su posición, conociendo cada parte de un lienzo se puede determinar la cantidad de espacio que otorgaremos a los distintos elementos, permitiendo dar un mayor énfasis mensaje principal y/o evitando la saturación.

Los profesionales del diseño se guían por la observación de los detalles que puedan ser significativos y los ordenan de manera tal, que logran hacer llegar un mensaje, por su puesto, en base a la correcta distribución de espacios e imágenes.

En conclusión

Estructurar tus diseños antes de comenzar un boceto, te permite dividir correctamente los espacios con el fin de establecer la base que soporte el mensaje se nuestra creación, enfatizando los mensajes y haciéndolos llegar con mayor efectividad.

Fuente: http://www.closip.com/blog/noticias/2007/03/30/estructura-de-un-diseno-1-de-2/

¿Por qué Bocetar?

2007-11-11T09:36:00.000-08:00

El boceto (Definición de Bata) es una representación simple de aquello que estás por realizar y te permite anticiparte a complicaciones que puedan surgir al momento de finalizar tu trabajo o bien a darte cuenta de los errores de planteamiento que hayas podido tener. Además, te permite estudiar los puntos principales o los ejes de tus diseños y/o creaciones.

En este boceto realizado por Leonardo Da Vinci (izquierda) podemos observar 18 posibles posiciones distintas de un busto femenino, y fue realizado exclusivamente para una sola pintura, la cual es mundialmente conocida y no es la Gioconda (Mona Lisa).

Lo importante en este estudio del busto es la cantidad de proyecciones que tuvo Da Vinci de la posición que adoptaría la mujer de su pintura (Dama del Armiño - abajo)

La proyección previa permite elegir la posición, el color o la forma óptima y adaptar mensajes no verbales que pudiera expresar nuestro diseño o bien podríamos evitar una mala interpretación del mismo, además, nos da una imagen más clara de aquello que buscamos y nos aleja de caer en la improvisación por desesperación.

No existen reglas ni puntos necesarios que tengamos que adoptar o conocer al momento de realizar un boceto, lo importante es que tengamos en la mente aquello que queramos proyectar con lo que hacemos.

Es de vital importancia que lo que hagamos exprese algo y lo exprese de la manera correcta, un boceto te permite estudiar esta manera y nos da una guía definida de qué es lo que vamos hacer al momento de sentarnos frente al monitor.

Pues tenemos la mala costumbre de sentarnos e improvisar, muchas veces acabamos con algo que no queríamos, pero tenemos tan poco tiempo para realizar otro trabajo que nos vemos en la necesidad de entregar aquello que tenemos, aún cuando sabemos que no es lo mejor que podemos entregar.

Entre otras funciones, evita el esfuerzo innecesario de comenzar a plasmar una mala idea y si trabajas en equipo o para algún cliente o jefe, te permite comparar tus ideas con las de los demás, evitando el rechazo de tu trabajo terminado, que podría ser bueno para ti, pero malo para alguien más, al fin que para todo hay gustos y disgustos.

Para terminar, algunos tips:

Antes de tomar el lápiz y sentarte frente a una hoja en blanco, piensa un poco en lo que quieres y concéntrate.

Descubre tu propio estilo y trabájalo.

Cuando debas realizar elementos como árboles o montañas, busca fotos y observa los puntos que hacen que se vean como tal.

Sé perseverante, la práctica hace al maestro.

Nunca entregues un trabajo recién terminado, guárdalo y míralo el día siguiente, siempre encontrarás algo que lo haga mejorar.

Los humanos tenemos momentos de lucidez y momentos de idio.. digo deslucidez, no te frustres si no surgen las ideas, intenta de nuevo más tarde.

Observa hasta el más mínimo detalle de cada elemento que exista a tu alrededor y preguntate a ti mismo ¿Qué lo hace parecer lo que es?.
Analiza y busca referencias, aquél que no conoce la historia está condenado a repetirla una y otra vez.

Sé sencillo y claro al momento de bocetar.

Realiza 2 o 3 bocetos, no tomes la primera idea.

Fuente: http://www.closip.com/blog/?p=49

¡Dios mío, está lleno de “generators”!

2007-10-12T08:37:00.000-07:00

More than 100 Web 2.0 Online Generators es, como su propio nombre indica, una lista de cien aplicaciones web tipo “generadores de botones / paletas de colores / gráficos / logos /texturas / fondos / CSS / favicons / esquinas redondeadas / galerías / nombre de dominio / lista / lo-que-sea”. Unos son más o menos útiles o prácticos que otros, pero todos son bastante “webdoscerianos”.

Fuentes:
- http://www.microsiervos.com/archivo/internet/generadores-online.html
- http://www.ajaxflakes.com/web-20/top-100-online-generators-web-20/

Diseñando tablas

2007-10-07T12:01:00.000-07:00

La mayoría tenemos la costumbre de que si en algún momento necesitamos acudir a las tablas, las usamos como nos la dá en mi caso Dreamweaver, pero ¿es realmente la forma correcta? revisando el diseño de alguno de los themes de phpBB, me dí cuenta que usaba muchísimas clases row1, tableHeader etc.. etc.. y me olvidé por completo de los atributos como caption, thead, tfoot que en este tutorial aprenderemos a manejar.

Este tutorial fué inspirado por una página donde cualquiera puede enviar sus diseños les dejo la liga abajo, hay unos mucho muy buenos. Ojalá se animen a enviar la suya!! me gustaría ver que pudieron hacer y si este tutorial les funcionó.

CSS Table Gallery

Fuente: www.infectedfx.net

Principios generales de usabilidad en el diseño de sitios Web

2007-10-07T09:13:00.000-07:00

Escrito por Dulce Carolina Córdova Cruz
09-May-2006

Cualquier sistema, computacional o no, que ha sido creado para usuarios humanos, debe contemplar la manera como se interactuará con él, desde la facilidad con que será manejado, hasta su agilidad, aun sin haberse dado un contacto previo. Para esto debe existir una similitud entre el sistema y el mundo real, a través de palabras, conceptos, metáforas, etcétera, en un orden lógico y natural.

La norma ISO 9241 establece los requisitos ergonómicos para la realización de trabajos de oficina, con la utilización de pantallas de visualización de datos o guías de usabilidad. La usabilidad es el rango en el que un producto puede ser empleado por usuarios específicos para el logro de metas, con efectividad, eficiencia y satisfacción.

En el contexto de la Web, la usabilidad representa la unión de varios campos, tales como el diseño de interfaces de usuario, la interacción humano-ordenador (HCI, Human Computer Interaction) y el diseño gráfico de la interfaz de usuario (GUI), los cuales hacen posible la interacción con los objetos, el estudio de cómo los individuos reaccionan ante la interfaz de un ordenador, el proceso de cambios y los avances tecnológicos diseñados para que las personas tengan el control sobre sus computadoras personales.

Para diseñar correctamente un sitio, debe plantearse con claridad el objetivo de la publicación, además de responder preguntas, como: ¿por qué y para qué se elabora? y ¿a quién se hará llegar?, con la finalidad de conocer el tipo de público al que se dirige, así como determinar los pasos que éste tendría que seguir, además de resolver con anticipación los problemas a los que podría enfrentarse. ¿Cuáles son las mejores tecnologías para que la información permita el logro de las metas y la realización de un sitio de fácil aprendizaje, además de flexible, amistoso y funcional?

Otro aspecto importante es que la página sea visible, pues de nada sirve una publicación si no se puede acceder a ella. Esto depende de la calidad, el desempeño computacional de los enlaces, el peso, la velocidad del módem del que se pretende descargar y la compatibilidad con los navegadores de las diversas plataformas.

Como la gran mayoría de los visitantes a Internet accede a través de un buscador, es necesario manejar buenos contenidos, razón suficiente para que la redacción en la Web sea todo un arte. Asimismo, debido a que la lectura en pantalla es complicada, deben usarse palabras que para los usuarios sean comprensibles en la búsqueda de datos.

Los textos deben ser reducidos lo más posible mediante la simplificación de la información, con el propósito de que el orden de la lectura que regularmente se tiene en un libro o una publicación común, con inicio, desarrollo y conclusión, se invierta como si fuera una pirámide, en donde la conclusión o el resumen del documento se establezca como encabezado, para después agregar el desarrollo y, por último, el inicio. Por otra parte, deben colocarse elementos legibles y comprensibles, con coherencia para la navegación y la funcionalidad de todas las páginas.

Siendo la ideal, una aplicación funcionaría de manera óptima ante cualquier petición y evitaría que el usuario cometa errores, aunque es común que esto ocurra. Por ello es recomendable que las fallas sean destacadas y se haga una advertencia sobre la seriedad del asunto, además de proveer los mecanismos para resarcir un tropiezo. Así, los usuarios no deben ser subestimados y tampoco se les debe hacer sentir que están frente a procedimientos muy complejos. Mantenerlos informados sobre lo que sucede, les da una idea sobre dónde se encuentran, lo que les evita uno de los problemas más comunes en la Web: la desorientación.

Un aspecto también importante es la estética del sitio. Aunque es preferible que una página Web sea más rápida que bonita, puede lograrse un diseño elegante, simple y funcional. Para esto conviene eliminar las imágenes que no son indispensables y que sólo cumplen una función ornamental. Lejos de hacer eficaz a un sitio, éstas incrementan el tiempo de descarga y distraen al usuario, causándole pérdida de tiempo. A esto debe agregarse la eliminación de los fondos que dificultan la lectura.

La atención debe centrarse en el usuario, con la idea de que el trabajo que se realiza es para él. En este sentido, no debe perderse de vista la variedad del público al que se dirige la información de la Web. Es probable que haya personas con capacidades diferentes, es decir, con problemas visuales, auditivos, de cognición o motrices, por lo que es indispensable buscar la manera de apoyarlas en sus limitaciones o, en su caso, facilitar la realización de sus tareas. Un sitio también debe tener accesibilidad, tema que por su extensión se abordará en otro artículo.

Aunque el término “usabilidad” no tiene una definición expresa en el español, representa las técnicas que ayudan a realizar tareas en Internet en forma más sencilla, con calidad, rapidez y ubicuidad. Siempre que un usuario quiera localizar algo de su interés en un sitio determinado, debe contar con las facilidades para hacerlo y ver motivado su interés en la publicación consultada, para navegar en ella una y otra vez.

Los profesionales de la Web tienen la responsabilidad de prever y cubrir las necesidades de los usuarios. En ello radica la verdadera razón de su tarea: usar mucho sentido común para intentar sorprender cada día, tomando en cuenta la constante evolución y cediendo al usuario el control absoluto sobre un sitio, además de brindarle un entorno confiable para que vuelva periódicamente y haga de la página en cuestión un favorito. De lo que se trata es poner en práctica la seducción permanente.

Fuente: www.mati.unam.mx

Diseño Gráfico, fundamental...

2007-10-07T08:55:00.000-07:00

Escrito por Jaime L. Vera Campos
06-October-2006

Actualmente la historia de la informática es inherente a las interfaces gráficas, debido a que los sistemas operativos gráficos han influido en la evolución de la industria del hardware y el software. La Interfaz Gráfica de Usuario (IGU) es la traducción del vocablo inglés Graphic User interface (GUI).

La primera interfaz gráfica de usuario se desarrolló en los laboratorios de XEROX, en los años sesenta. En 1984, Apple, la compañía de computadoras Macintosh, la puso a disposición del público, siendo además la pionera en su introducción, además del ratón (mouse). Fue hasta 1993 cuando se generalizaron las interfaces gráficas de usuario, con la primera versión popular del sistema operativo Windows 3.0 de Microsoft.

Básicamente, una interfaz es un dispositivo que permite una comunicación entre dos sistemas. Cuando se habla de la interfaz de un programa o aplicación (software), se trata del conjunto de herramientas y mecanismos que permiten al usuario interactuar con la computadora, facilitando las operaciones de información o datos. Es el aspecto visible como tal que tiene un programa, como se presenta ante los usuarios.

En el caso de una interfaz gráfica de usuario, se incluye una serie de elementos, como: menús, ventanas, teclado, ratón, sonidos en algunos casos y la participación gráfica en sí, con el apoyo de representaciones visuales. También se requiere una pantalla o monitor de computadora, con el fin de que el usuario pueda interactuar con las opciones del menú y los íconos, dentro del sistema. De esta forma puede abrirse el canal de comunicación entre el usuario y la computadora

En una interfaz gráfica de usuario para la Web, debe tenerse una visión clara sobre el sitio o la página, no sólo al determinar la estructura, la navegación y los contenidos, sino también al realizar el diseño gráfico como tal. Con esto puede lograrse una buena usabilidad, legibilidad, accesibilidad y funcionalidad. Cabe señalar que para esto no es necesario emplear lo último en recursos tecnológicos y/o gráficos espectaculares.

El diseño de los gráficos en la interfaz es útil para que el usuario vea en pantalla la información que pueda serle de interés. Éste le proporciona las herramientas que verá durante el tiempo que se relacione con la interfaz, así como la posibilidad de tomar las acciones necesarias como respuesta al sistema. Hoy en día, los gráficos diseñados en la computadora proveen una comunicación de manera ilustrada, lo que facilita la interacción con el hombre.

En esto radica la participación del diseñador gráfico, que es de suma importancia, porque él es quién tiene la posibilidad de integrar eficientemente elementos visuales como imágenes, tipografías, espacios, colores, etcétera.

Por otra parte, en el diseño y la combinación de elementos, como objetos gráficos y representaciones visuales, debe prevalecer una coherencia y una unidad, porque favorece la identificación de objetos.

La tipografía y la aplicación de color son aspectos que deben ser tratados cuidadosamente en el momento de establecer una buena interfaz, esto en razón de un buen contraste y una inmejorable legibilidad, como elementos formales del diseño gráfico en relación con los contenidos.

Con una interfaz bien diseñada, el usuario debe sentirse arropado en el momento de realizar sus búsquedas y cubrir sus necesidades de información, gracias al equilibrio entre contenidos y gráficos. De otra forma sería un fracaso, porque la interfaz no cubriría bien las necesidades de los usuarios, a quienes se dirige y por quienes se planea.

Ejemplos de Interfaz Gráfica de Usuario en una página Web

En este primer ejemplo, puede apreciarse que el diseño gráfico contribuye a que sean distinguidos los objetos del contenido, por medio de la creación de íconos para reforzar las ideas, además del uso de color para destacar la información principal y la secundaria. En este caso los tópicos principales se encuentran a la izquierda y los secundarios, a la derecha. Es notoria la legibilidad en el área de texto-información.

En este segundo ejemplo, el concepto se acentúa con la incorporación de elementos visuales propiamente contextuales: íconos basados en la propia temática del contenido. Los elementos de fondo y los colores recrean un ambiente de sucesos pasados.

Este último es un ejemplo claro y simple de acceso rápido a la información, con un manejo de reticencia en elementos visuales y contenido, para el usuario que está acostumbrado a realizar búsquedas de información de manera ágil y concreta.

En resumen, una buena interfaz gráfica de usuario requiere simplicidad y funcionalidad. Por otro lado, aunque el diseño gráfico tiene una presencia implícita, debe ser considerado como parte fundamental en el éxito o el fracaso de la interfaz, porque a través de ésta se refuerzan notablemente las ideas y/o conceptos en los contenidos.

Fuente: www.mati.unam.mx

Tecnología CSS, separar contenido de presentación

2007-10-07T08:51:00.000-07:00

Escrito por Dulce Carolina Córdova Cruz
31-January-2006

En la actualidad Internet ha causado un gran impacto en la vida del hombre, colocándose con rapidez en diversas áreas. Además se ha establecido como el más flexible medio de comunicación masiva, porque al permitir el intercambio de datos, hace posible que el usuario sea receptor y, si lo desea, emisor de un mensaje.

Por ello se ha convertido, también, en un medio de expresión a través del cual cada individuo que cuente con los requisitos mínimos indispensables, tecnológicos y económicos, tiene la posibilidad de publicar información.

Es aquí donde radica uno de los principales problemas a los que se enfrenta la red. Es bien sabido que las páginas Web se construyen en base a un lenguaje de marcado de hipertexto (HTML), que estructura y presenta información en un formato estándar. No obstante y a pesar de ser un lenguaje de presentación visual, no fue creado para diseñar publicaciones porque limita gráficamente los sitios.

En 1996 apareció CSS (Cascading Style Sheets), un lenguaje de estilo en cascada que se puede utilizar conjuntamente con HTML para definir el formato visual de una página Web, sin forzar el código para adaptar los documentos al diseño de presentación y sin colocar elementos en la página que no favorecen el contenido.

Según las propias palabras de Tim Berners-Lee, inventor del primer navegador y el primer servidor Web del mundo, el espíritu de la red consiste en que cualquier persona pueda leer las páginas Web con cualquier software que funcione en cualquier hardware. [1]

Las publicaciones digitales de 1990 eran diferentes a las que se realizan hoy en día, ya que ahora podemos observar imágenes, animaciones y archivos multimedia. Por ello, el siguiente reto de la red radica en la adopción de tecnologías para controlar la presentación de las páginas, sin involucrar el contenido.

En 1994 Hakon Lie publicó el primer borrador sobre las hojas de estilo en cascada y HTML, con la idea de que el lenguaje de estilo de la Web debe combinar, de algún modo, las preferencias del autor y el usuario. Su propuesta la llevaba a cabo con una cascada que tenía en cuenta múltiples conjuntos de reglas de estilo y un sistema bien definido para determinar el peso de las reglas en competencia. [2]

De este modo, en 1994 se creó la World Wide Web Consortium para establecer los estándares técnicos del crecimiento y el desarrollo de la Web. Sin duda los beneficios más importantes gracias a la utilización de las hojas de estilo externas, son el aumento en la accesibilidad y la disminución del trabajo de producción, así como la fácil labor de mantenimiento de los sitios, evitando la búsqueda entre líneas de código.

Asimismo, al proporcionar un nivel de abstracción, las CSS incorporadas en la cabecera de un documento mejoran el código del mismo, el tiempo de respuesta y la velocidad de presentación de la página, siendo posible declarar una regla de estilo una sola vez y hacer que las condiciones de presentación se apliquen a todos los elementos de ese tipo.

Por último, cabe reiterar en la importancia de utilizar hojas de estilo en cascada para la presentación de documentos en Internet, que además de separar contenido de presentación, ofrecen diversas ventajas en la producción y la accesibilidad. Algunos ejemplos del uso y practicidad de las CSS los podemos encontrar en:

Ó http://www.csszengarden.com ó http://www.camaleoncss.com .

Fuente: www.mati.unam.mx

Los 8 grandes errores del diseño web

2007-10-07T08:35:00.000-07:00

Cansado de ver muchas prácticas poco aconsejables (y que, honestamente, hasta hace poco yo también cometía) y como la excusa perfecta para darles a conocer que sigo vivito y coleando (aunque aún sumamente ocupado), he decidido escribir sobre los 8 grandes errores del diseño web actual. Estas son prácticas que el mundo de la web 2.0, los estándares web y, por sobre todo, la idea de separar la presentación del contenido nos han metido en la cabeza y la mayoría de las veces las hemos seguido sin ponernos a pensar un poquito en las consecuencias.

Primero que nada, vamos a definir diseño web. Diseño web abarca ya no solo lo visual; es toda una ciencia que involucra accesibilidad, apariencia, presentación, contenido, contexto, mensaje e interactividad (si no es que más). Un diseñador web debe ser capaz de, a partir de una idea, generar una solución virtual. Ojo con la palabra: solución. Y para generar una solución, necesitamos tener un problema para empezar. En el caso generalizado de la web, el problema a resolver es el manejar información. Ya sea presentando o editando, visual o auditiva, útil o no tanto; la web es información y nada más. Cómo la manejamos depende de las necesidades que tengamos, y es aquí donde cometemos los 8 grandes errores del diseño web:

Fuente: metalize

Pautas de accesibilidad al contenido en la web (WCAG)

2007-10-02T18:23:00.000-07:00

Qúe es la WCAG y las pautas a seguir para conseguir un buen acceso al contenido de tu web.

WCAG consiste en 14 pautas que proporcionan soluciones de diseño y que utilizan como ejemplo situaciones comunes en las que el diseño de una página puede producir problemas de acceso a la información. Las Pautas contienen además una serie de puntos de verificación que ayudan a detectar posibles errores.

Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas.

Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la información del sitio Web.
Prioridad 2: son aquellos puntos que un desarrollador Web debería cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios.
Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir ya que, de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información.

En función a estos puntos de verificación se establecen los niveles de conformidad:

Nivel de Conformidad "A": todos los puntos de verificación de prioridad 1 se satisfacen.
Nivel de Conformidad "Doble A": todos los puntos de verificación de prioridad 1 y 2 se satisfacen.
Nivel de Conformidad "Triple A": todos los puntos de verificación de prioridad 1, 2 y 3 se satisfacen.

Especificaciones publicadas en W3C para HTML 4.01 (castellano)
http://www.4shared.com/file/25571118/db4532d/html401-es.html

Hojas de Estilo en Cascada, nivel 2 revisión 1 Especificación CSS2.1
Recomendación Del 25 De Febrero De 2004 Del Candidato de W3C
http://www.4shared.com/file/25571116/ea0c7e2a/css21_spa.html

La Comunidad Autónoma de la Región de Murcia (CARM) ha publicado una traducción de los documentos sobre las «Pautas de accesibilidad al contenido en la Web 1.0» de WAI-W3C.

La edición se llama: Diseño de páginas Web accesibles ISBN 84-87926-36-3

Lamentablemente la edición impresa está agotada pero se puede descargar la edición electrónica en formato PDF desde este link:
http://www.4shared.com/file/25570725/e4196784/2003_wai.html

Fuente:http://www.desarrolloweb.com/articulos/pautas-de-accesibilidad-contenido-web.html

Usabilidad y Analítica Web

2007-10-02T17:55:00.000-07:00

Testeo con usuarios, card-sorting, personajes, prototipado,… son las típicas técnicas de usabilidad. Sin embargo, raramente se habla del potencial de las técnicas de analítica web para mejorar la usabilidad de un sitio web.

¿Qué es la analítica web?

La analítica web consiste en grabar y analizar los datos de navegación de los usuarios en un sitio web. En un primer momento, se utilizaban los datos grabados en los logs de los servidores. Actualmente, la mayoría de las herramientas de analítica web funcionan mediante un código javascript que se inserta en el pie de página, y que recoge los datos que nos interesen para enviarlos a una base de datos que posteriormente podremos consultar.
Las herramientas profesionales más conocidas son:

Google Analytics
Omniture SiteCatalyst
XiTi
Nedstat
Visual Sciences
WebTrends
ClickTracks
Clickdensity

¿Qué mide la analítica web?

Las principales medidas (métricas) de cualquier herramienta de analítica web son:

Páginas vistas
Usuarios Únicos
Visitas
Tiempo de navegación

Otros datos que manejan algunas herramientas de analítica web son:

datos de clicks ("clickstream") que permiten reconstruir las rutas de navegación de los usuarios así como dibujar "mapas de calor" sobre una página, mostrando los elementos con más clicks
euros (por ejemplo, en un sitio de comercio electrónico, el importe de una compra; en un sitio de contenido, el valor de un click en un anuncio o de la impresión de un banner)
orígenes del tráfico: es decir, los sitios web que nos envían visitas, así como las palabras clave que los usuarios utilizan en los buscadores para llegar a nuestra web
páginas de entrada: es decir, la página por la que un usuario entra en nuestro sitio
páginas de salida: es decir, la página desde la cual un usuario abandona nuestro sitio
eventos del sitio web: por ejemplo, número de usuarios que se registran para recibir un newsletter, número de usuarios que hacen una búsqueda, número de formularios enviados, etc.
abandono de formularios: número de veces que un formulario se empieza a rellenar y se abandona, así como el campo en el que se abandona el formulario

Si os interesa profundizar en el tema de la analítica web en general, en esta página web de mi empresa he recopilado algunos recursos de analítica web, como por ejemplo un interesante glosario de términos de analítica web (en inglés) elaborado por la Web Analytics Association, cuya página web es por supuesto de consulta indispensable.

Analítica web y Usabilidad

Existen muchas técnicas y procedimientos que nos permiten aprovechar los datos recolectados por una herramienta de analítica web a fin de mejorar la usabilidad de un sitio web. Nos centraremos en los siguientes puntos:

ClickMap
A/B Testing
Análisis de formularios
Rutas de navegación

ClickMap

El "clickmap" (mapa de clics) es aparentemente parecido a los mapas de calor del 2eye tracking", pero en lugar de mostrarnos dónde miran los usuarios, nos muestra dónde hacen clic los usuarios.
Algunas versiones del "clickmap" sólo muestran datos de clics en las zonas clicables (links, botones), como es al caso de la funcionalidad llamada "site overlay" de Google Analytics.
Otras herramientas como Clickdensity, sin embargo, son capaces de mostrar datos de clic en cualquier zona de la pantalla, independientemente de si tiene un link o no (os recomiendo que probéis la demo de Clickdensity, vale la pena)

Finalmente, herramientas como Omniture SiteCatalyst pueden mostrar los ingresos que genera cada clic en cada elemento de la página. Además, es capaz de mostrar datos en tiempo real.
La utilidad del mapa de clics es evidente: de un vistazo, podemos ver dónde clican los usuarios en una pantalla determinada, y rápidamente actuar para mejorarla en tres aspectos principales:

Visibilidad y posicionamiento de links y botones de la página
Elementos de la página que confunden al usuario: aquellas zonas de la página en donde hay muchos clics, a pesar de que no son clicables
Elementos de la página más "rentables": no está directamente relacionado con la usabilidad, pero normalmente querremos dar más visibilidad a aquellos elementos más rentables, así como investigar por qué ciertos elementos de la página no son tan rentables como esperaríamos

A/B Testing

El A/B Testing es de utilidad cuando dudamos entre dos diseños para una misma página. Lo que haremos es colocar ambas versiones de la página en el servidor, y utilizar una herramienta de analítica como Omniture SiteCatalyst o Google Optimizer para comparar los resultados de ambas páginas. Por ejemplo, podremos comparar:

Ratios de conversión del objetivo de la página: por ejemplo, si el objetivo de la página es que el usuario rellene un formulario, compararemos el número de usuarios que rellenan el formulario en cada versión de la página
Ratio de abandono: si el objetivo de la página es invitar al usuario a moverse por el sitio web, podremos comparar los ratios de abandono de las dos versiones de la página

Así mismo, el A/B Testing lo podemos utilizar para comparar el resultado de una misma página en periodos de tiempo distintos, por ejemplo:

antes de aplicar un rediseño a la página
el día después de subir la página rediseñada
una semana después
un mes después

Podremos así sacar conclusiones acerca de:

El éxito o fracaso del rediseño, según si se cumplen mejor o peor los objetivos de la página
El tiempo de aprendizaje de los usuarios: ¿cuánto tiempo tardan los usuarios en adaptarse a un nuevo diseño de página?

Análisis de formularios

El análisis de formularios consiste en analizar el número de veces que los usuarios dejan de rellenar un formulario en un campo concreto.
Por ejemplo, una web para la que trabajé descubrió que, en el formulario de introducción de los datos de la tarjeta de crédito, un 0,2% de los usuarios dejaban de rellenar el formulario en el momento en que se les pedía marcar la casilla para suscribirse al newsletter de la empresa. No era obligatorio, pero lo parecía, y lo más grave es que los usuarios ya habían introducido los datos de su tarjeta de crédito (es decir, habíamos logrado convencerlos para comprar), y sin embargo abandonaban.
Es muy difícil detectar este tipo de cosas en un test de usuarios, puesto que afectan a un porcentaje de usuarios muy pequeño (a pesar de que en el ejemplo anterior, un 0.2% significaba una media de 3 compras menos por día, es decir unos 6000 euros al mes, cantidad nada despreciable!)
Así mismo, el análisis de formularios permite detectar fallos en:

el vocabulario que utilizamos para definir ciertos campos
las validaciones automáticas de los campos (que a veces no son válidas para todos los países, por ejemplo el formato del NIF o la longitud de un número de teléfono)
los campos innecesarios o que incomodan al usuario, etc.

Rutas de navegación

Los reportes de "clickstream" son quizás el elemento más potente de herramientas de analítica web avanzada como Omniture SiteCatalyst o Visual Sciences. Permite responder a preguntas como por ejemplo:

¿Por qué páginas navegan los usuarios, y en qué orden?
¿Qué páginas visitan los usuarios dadas una página inicial y una página final determinadas?
¿En cada paso de un proceso de compra o de registro, cuántos usuarios pasan al siguiente paso, cuántos vuelven al paso anterior o cuántos abandonan? ¿Los que abandonan, a dónde van?
¿Qué rutas llevan a una página determinada?
¿Cuáles son las 5 rutas que realizan el 90% de los usuarios de mi sitio web?

Ejemplo de reporte de rutas de navegación de Omniture SiteCatalyst
Estos reportes son muy útiles para analizar qué realizan los usuarios en nuestro sitio web y, quizás más importante todavía, qué no son capaces de realizar (seguramente debido a que la página no es usable).
Así mismo, nos ayudan a definir la arquitectura de la información y el esquema de navegación del sitio web basándonos en la experiencia y preferencias de navegación de los usuarios.

Otras técnicas de analítica web

Existen muchas otras técnicas de analítica web que nos permiten mejorar la usabilidad de un sitio web. A continuación menciono algunas, que en otros artículos comentaré en detalle:

Análisis de "bounce rate"
Análisis de resultados de búsqueda
Segmentación de tascas y usuarios
Satisfacción de los usuarios

Especialmente importante es la segmentación de tascas y usuarios, que permite agrupar a los usuarios según las tascas que realizan en el sitio web, para después ofrecer contenidos e interfaces adaptados a cada perfil.

Conclusiones

Espero haber contribuido a convenceros de que la analítica web puede y debe jugar un papel muy importante en la mejora de la usabilidad de los sitios web. Destacaría tres ventajas principales:

trabajar directamente con gran cantidad de datos de todos los usuarios del sitio web nos permite detectar problemas de usabilidad muy específicos
es muy fácil testear una mejora de usabilidad, así como demostrar el éxito o fracaso de un cambio de diseño (factor muy a tener en cuenta a la hora de convencer a quien toma las decisiones de que es necesario invertir en diseño o estudios de usabilidad)
en un mercado en donde las aplicaciones web cada vez disponen de menos tiempo en pre-producción, la analítica web es indispensable para optimizar y mejorar todo sitio web

Fuente: http://www.desarrolloweb.com/articulos/usabilidad-y-analitica-web.html

Cuestiones sobre accesibilidad web

2007-10-02T17:52:00.000-07:00

Hoy en día existe mucha controversia respecto a las prácticas para un desarrollo apropiado y accesible para sitios web.

La accesibilidad web se refiere a la práctica de crear sitios web que puedan utilizar gente con cualquier nivel de capacidad o minusvalía. Por supuesto, es solo una parte del desarrollo web, pero importante estos días.

Aunque parezca increíble, hay muchas empresas que se dedican profesionalmente al desarrollo web que pasan por alto la importancia de implementar sitios accesibles para todo tipo de usuarios; por ejemplo, no estableciendo atributos "alt" para las imágenes.

Unas de las dificultades que tienen muchas personas es la de controlar el ratón; esto puede ocasionarles frustración intentando pinchar sobre un pequeño enlace. Los desarrolladores web tienen que tener tamaños de texto que sean razonables, y crear áreas más grandes clicables siempre que sea posible. Los enlaces siempre deberían estar coloreados de forma diferente al texto y subrayados. Otra técnica es distribuir los elementos de navegación (links, immágenes, etc.) de la mejor forma posible para poder navegar por el sitio sin necesidad del ratón, sino utilizando el teclado.

Ningún sitio web debería confiar únicamente en un componente de video o audio para transmitir información. De esta forma, siempre que sea posible, es preferible el texto a otra clase de transmisión de información, de esta forma lograremos que personas invidentes puedan acceder a nuestros contenidos a través de navegadores adaptados a sus posibilidades.

Hoy en día ya no se duda que la accesibilidad web es un asunto importante para ganar competitividad en internet, con lo que habrá más posibilidades de éxito con el proyecto que estemos desarrollando. Solo basta buscar en Google "accesibilidad web" para darse cuenta que se trata de un tema candente, y que está siendo cada vez más un tema a tener en cuenta.

Con más y más sitios web siendo populares; y que cuentan con los propios usuarios para generar el contenido, unas cuantas directrices sobre accesibilidad nos será de gran ayuda para acoger a todo tipo de usuarios.

Fuente: http://www.desarrolloweb.com/articulos/cuestiones-sobre-accesibilidad-web.html

Colecciones de Pinceles e Imagenes para Photoshop

2007-09-28T05:56:00.000-07:00

http://getbrushes.com/brushes/photoshop/

http://inobscuro.com/brushes
http://inobscuro.com/designs/
http://inobscuro.com/textures/

http://www.brushes.obsidiandawn.com

Desarrollan un videojuego que pueden compartir personas ciegas con otras sin problemas de visión

2007-08-07T07:19:00.000-07:00

El entretenimiento, creado por la Organización Nacional de Ciegos Españoles, se llama "Onae, la aventura de Zoe". Se basa en el reconocimiento de los sonidos y está disponible en cinco idiomas: español, catalán, gallego, vasco e inglés.

La Organización Nacional de Ciegos Españoles (ONCE) desarrolló un videojuego de aventuras en el que las personas no videntes quedan prácticamente en las mismas condiciones que las que no tienen problemas de visión. Se llama "Onae, la aventura de Zoe" y su protagonista es una joven que tiene que moverse prácticamente a oscuras.

El juego, que está disponible en cinco idiomas –español, catalán, gallego, vasco e inglés–, usa una tecnología en tres dimensiones y no es el primero para ciegos, pero sí el primero que permite que lo compartan quienes tienen problemas de visión y quienes no. Así lo explicó el responsable del departamento de I+D de Cidat-ONCE, Eugenio Pérez.

En el juego, Zoe es una joven estudiante de geología que trabaja recogiendo muestras en una mina. Hay un terremoto, que la hace caer al vacío, y termina en un mundo poblado por una civilización desconocida. Para tratar de abandonarlo, debe superar múltiples pruebas. Es ahí donde tiene que moverse casi a oscuras, atravesando puertas y sorteando paredes, además de resolver diversas situaciones para seguir avanzando. Los sonidos son la pista fundamental.

Paco Vázquez, uno de los diseñadores del proyecto, dijo que los videojuegos para personas con discapacidad visual existentes hasta ahora inducían a los jugadores a encerrarse "en sus fantasías", y que con "Onae, la aventura de Zoe" eso se modifica.

"Se trata de implantar rutinas de sonido", dijo Vázquez. "Los jugadores invidentes oyen un pitidito y por la frecuencia y la velocidad saben dónde está el objeto y la distancia que tienen con las barandillas sonoras por las que se pueden ir agarrando", agregó.

El co-creador del juego dijo también que poder ver el escenario muchas veces "no supone una ventaja para nadie", sino que, por el contrario, "hay situaciones en las que ser un jugador no ciego te complica la vida". Por ahora, el juego se difundió de manera experimental. La ONCE prevé comercializarlo desde antes de fin de año.

Fuente: Clarin

80 efectos de texto con Photoshop

2007-07-24T09:38:00.000-07:00

Recopilación de tutoriales para crear efectos de texto utilizando Photoshop. En algunos casos se incluyen archivos de las acciones o los originales utilizados en el tutorial.

Fuente: photoshoproadmap.com

Segmentación de una campaña de banners

2007-07-24T08:54:00.000-07:00

Qué es la segmentación, que tipos de segmentación hay y como configurarla.

Un cliente me pregunta si podemos segmentar una campaña de banners. Quería preguntarles qué es exactamente la segmentación, que tipos de segmentación hay y cómo puedo realizarla cómodamente.

La segmentación es un proceso para seleccionar el conjunto de usuarios o clientes al que vamos a mostrar cierta campaña de publicidad o banner. Es decir, significa acotar los usuarios a los que presentar una publicidad, de modo que seleccionemos sólo aquellos que a priori pueden ser más interesantes para el anunciante. La segmentación es, en definitiva, una herramienta poderosa para mejorar los resultados de una campaña, porque las impresiones, impactos, clic o lo que vayamos a invertir se hará sobre los usuarios que ofrezcan más posibilidades de interesarse por los productos o servicios que se publicitan.

Podemos segmentar por diversos criterios. Cada cliente o cada campaña puede ser interesante segmentarla de una u otra manera. Por ejemplo, se me ocurren segmentaciones típicas:

Por país (para presentar la campaña sólo a los usuarios de un país o conjunto de países)

Por horario (para que la campaña sólo se muestre a un horario determinado)

Por día de la semana (Simplemente se utilizarán días determinados)

Sexo (Para captar sólo clientes masculinos o femeninos)

Idioma (Para enviar sólo a los usuarios de un idioma determinado)

Y muchas más, como dominio, IP, sistema operativo, página de la que viene, intereses, navegador…

La segmentación funciona de manera distinta en el mundo online que en offline, porque en un sitio web es más fácil segmentar por ciertos criterios que en campañas tradicionales en otros medios. Por ejemplo, en campañas tradicionales segmentaríamos simplemente decidiendo en las revistas o programas que queremos aparecer, seleccionando aquellos que tienen como audiencia a las personas a las que deseamos dirigirnos. Por ejemplo, si queremos anunciar un producto financiero lo haríamos en una revista de inversiones o un periódico de economía. Si queremos anunciar un producto de belleza lo haríamos en una revista de cotilleos, moda o decoración, que leen principalmente mujeres.

Esas segmentaciones por temática también las podemos hacer en un sitio web, colocando los anuncios en páginas o portales verticales donde pensemos que está la audiencia que nos interesa. Pero además podemos segmentar por muchos otros factores que no se podría hacer en un medio offline, como el horario al que queremos que nuestros anuncios aparezcan, los días de la semana, el idioma de su navegador, etc.

En campañas online la segmentación se puede hacer directamente con un servidor de banners, que podemos configurar para que sólo envíe los banners bajo ciertas condiciones o perfil del usuario. Las configuraciones incluyen muchas posibilidades, aunque lo más probable es que no sea posible segmentar por asuntos como sexo o intereses, que son indetectables por el servidor de banners, pero sí por otros como IP, hora, idioma, dominio, etc.

El servidor de banners tendrá seguramente unas opciones para segmentación que podemos explotar. De verdad que, según nuestra experiencia, con una pequeña segmentación, podemos incrementar sensiblemente los resultados de una campaña, de modo que el cliente quede mucho más contento con los resultados.

Además de la segmentación por tipo de usuario también los servidores de banners nos van a permitir configurar las opciones de entrega, que sirven para limitar las veces que un usuario ve una campaña de publicidad. Por ejemplo, podemos limitar que un usuario vea la campaña por más de x veces o que no la vuelva a ver hasta pasados unos minutos o unas horas. Esta limitación también es muy efectiva para llegar a un mayor número de usuarios y dosificar las apariciones de las campañas o banners de modo que no cansemos a los usuarios y puedan llegar a interesarse bastante más por los productos anunciados. Según nuestra experiencia las limitaciones de entrega también mejoran sensiblemente los resultados de la campaña.

Formulario para definir la segmentación en openads (antes PhpAdsNew)

Ahora bien, a medida que vamos segmentando o limitando la entrega de los banners, también disminuye la cantidad de impresiones de banners que vamos a poder realizar de las campañas. Por esa razón y porque son más efectivas, las campañas con segmentación suelen cobrarse por algo más que las campañas que no la tienen.

Fuente: DesarrolloWeb.com

Frecuencia en la distribución de banners

2007-07-24T08:52:00.000-07:00

La frecuencia le llaman a la cantidad de veces que un usuario visualiza un banner determinado. Sirve para que una campaña o un banner sólo la vea el usuario unas cuantas veces, porque en teoría, cuando el usuario ya ha visto un banner como 3 ó 4 veces, se supone que ya no va a prestar atención a ese banner.

Con la frecuencia podremos entonces repartir de una manera más lógica las impresiones que nos contraten para una campaña, para que un usuario no la vea demasiadas veces y se desperdicien impresiones contratadas.

En tu caso, la frecuencia 3 quiere decir que un usuario no puede ver más de 3 veces un banner en tu página.

Para configurar la frecuencia en tu página lo más cómodo es usar un servidor de banners, para poder indicarle al servidor cosas como la frecuencia y otro tipo de segmentaciones y que te puedas despreocupar de esas cosas.

Un servidor de banners que funciona muy bien y es gratuito es OpenAds, que antes se llamaba PhpAdsNew. Es una aplicación creada en PHP con base de datos MySQL, que puedes instalar rápidamente en tu servidor y empezar a distribuir banners con todo tipo de configuraciones a nivel profesional.

Fuente: Desarrolloweb.com

60 sitios usable y elegantes

2007-07-05T07:30:00.000-07:00

Todos amamos diseñosde sitios web's hermosos, usables e impresionantes . Para alcanzarlos, los diseñadores web necesitan centrarse en muchos aspectos, pero toda gira básicamente sobre la pregunta, como se si elcontenido esta bien presentado y cómo puede la información ser percibida fácilmente.
Los esquemas de color armónicos son tan importantes como una tipografía sólida y constante. La estructura visual exacta y la navegación intuitiva son esenciales para la utilidad y la accesibilidad. De hecho, una especial atención en los detalles pequeños es lo que da a un Web site un diseño profundo y natural.

Ver nota completa en http://www.smashingmagazine.com/2007/07/04/inspiration-package-usable-elegant-inspiring-design-showcase/
Fuente: http://www.smashingmagazine.com

El contenido de la forma

2007-07-05T07:26:00.000-07:00

Últimamente me he venido replanteando la complejidad de la abstracción de ideas, con el fin de simplificar la etapa de conceptualización. Curiosamente me he dedicado a estudiar con un poco más de detenimiento las formas básicas, con el fin de producir detalles que sean capaz de dar a entender cualidades con las que vivimos a diario y que de alguna manera nos definen.

La personalidad
Creo que empecé a diseñar un poco mejor el día que empecé a comprender los conceptos básicos de la forma, y empecé a separar la información de lo que informa, tratando de darle un valor separado y tangible a lo que en verdad no lo tiene.
Es difícil de entender, pero lo explicaré con un ejemplo muy básico. Imaginen que en sus manos tienen una pelota. Cierren los ojos y siéntanla. Sean capaces de sentir su gran particularidad y luego tírenla lejos.
Tomen un lápiz y dibujen la forma que fueron capaces de sentir. Muy bien, ahora si esa forma tuviese un sonido ¿cuál sería?.
Excelente, lo que acabamos de hacer es llevar una forma visual muy simple a dos dimensiones completamente diferentes.
Es un simple círculo que tomó forma táctil y auditiva.
Ahora, a ese círculo le puedes dar velocidad, temperatura, dureza, rugosidad, tamaño, etc, así como también puedes sentir su sabor o imaginar como huele.

Es súper complicado entender entonces que la forma visual depende de factores que van adquiriendo valores agregados a medida que se los vamos otorgando.
En este sentido, darle una cualidad más al círculo, es un proceso de abstracción muy complejo.

Un paso más allá.
Cuando éramos muy pequeñitos, la profesora nos enseñó que al sonido “a”, le correspondía la forma “a”. Y que la forma “a”, no se relacionaba en nada al sonido “a”.
No era como hasta entonces estábamos acostumbrados, que cuando veíamos una forma de caballo lo relacionábamos al caballo real.
Ahora la compleja forma es una pequeña pieza que intenta graficar de manera neutra el concepto que nosotros tenemos de caballo, y que funcionará si y sólo si es acompañada de las otras letras en un orden correcto.

Ver nota completa en http://letritas.blogspot.com/2007/06/el-contenido-de-la-forma.html
Fuente: http://letritas.blogspot.com

FUNDACIÓN ORANGE PRESENTA EL LIBRO "WEB 2.0"

2007-05-02T09:55:00.000-07:00

Madrid, 23 de abril de 2007

La Fundación Orange presenta en en el hotel Urban de Madrid el libro
"Web 2.0" la primera obra sobre sobre webs participativas que se realiza
en España.

En el acto participan Manuel Gimeno, Director General de la Fundación Orange, los autores del libro, Antonio Fumero y Genís Roca; y Jesús Encinar, Director General de Idealista.com e impulsor de varias iniciativas de Web 2.0 en España.

Esta obra, "Web 2.0", integrada en la Colección Fundación Orange, analiza la evolución que supone para Internet la llamada web participativa, a partir de la aparición de nuevas tecnologías que han propiciado un cambio radical en las rutinas y en la actitud de los usuarios a la hora de sumergir se en Internet.

Junto al libro se distribuye un "mapa" que refleja la realidad actual de la Web 2.0. en España y en el que, junto a los conceptos básicos que permiten entender este fenómeno, se identifican a las empresas pioneras en su desarrollo, agrupándolas según la naturaleza de su actividad. El mapa ha sido realizado por la empresa "Internality".

Para abordar el estudio de la Web 2.0, el libro propone dos aproximaciones complementarias: Por un lado, presenta un enfoque socio-técnico, que trata de aportar una base conceptual y metodológica; y por otro, recoge un acercamiento más tangible y orientado hacia el ámbito empresarial. La primera parte corre a cargo de Antonio Fumero, ingeniero, profesor y "bloguero", y cuenta con el apoyo de la visión de Fernando Sáez Vacas, doctor ingeniero de Telecomunicación, informático y autor de varios libros de divulgación tecnológica. Por otro lado, el segundo enfoque lleva la firma de Genís Roca, Director General de Infonomía.

* Indice

* Descargar Libro en forma digital

* Descargar mapa en formato digital

Fuente: http://www.fundacionorange.es/

Algunos mapas de la web 2.0

2007-05-02T09:48:00.000-07:00

El fenómeno de la web 2.0 está creciendo y aparecen ya cartógrafos dedicados a explorar estos nuevos territorios … de distintos modos:

1. El mapa visual de la web 2.0 de Internality:
… agrupa de forma visual los principales conceptos que habitualmente se relacionan con la Web 2.0, junto con una breve explicación. Además se han seleccionado algunos ejemplos de servicios de la Internet hispana que suelen enmarcarse en la Web 2.0. También se incluyen algunos representantes globales habitualmente utilizados por el público hispano.

Este mapa forma parte de La Web 2.0, el libro de Antonio Fumero y Genís Roca que acaba de publicar la Fundación Orange.

2. xkcd (vía Boing Boing) publica un “mapa-cómic” con otra visión de las comunidades organizadas alrededor de la web 2.0:
Map of online communities and related points of interest: geographic area represents estimated size of membership.

Fuente: http://nomada.blogs.com/jfreire/2007/05/algunos_mapas_d.html

Usabilidad: Web, el regalo divino

2007-04-25T10:07:00.000-07:00

Me encanta la web porque:

- Soy un desordenado con mis ventanas, y siempre existe un excelente Webmaster capaz de centrármela, menudo trabajo me ahorra.

- He aprendido que escuchar una canción, disfrutando de todo el poder de mi home theater, puede estropear la fantástica aventura de navegar en un sitio.

-Ahora se que tengo que aprender a intercambiar rápido de resoluciones. Que el OpenGL no es solo para juegos, sino que debo crear una aplicación que me permita cambiar rápidamente de 640*480, luego regresar a 1256*1024.

-Se también, que cuando tecleo una dirección URL, no estoy seguro de querer verla, tengo que reflexionar, y hasta no estar seguro, darle click en Entrar.

-Mi Mouse, suele ser monótono, necesita mas vida, ¿Por qué no transformarlo en un divertido balón?

-Tengo que instalar todos los navegadores posibles, por que cada web, es hecha en una universidad diferente. Algunas en la universidad FireFox, otras en la universidad InternetExploiter, etc.

-Necesito recrearme viendo mujeres, las computadoras no son hechas, solo para trabajar.

-Es importante tener abiertas muchas ventanas, ya que si no, las teclas Alt-F4, suelen descomponerse fácilmente.

-Cuando contrate mi ancho de banda, realmente no quería descargar las páginas de manera rápida, solo deseaba ese teléfono que regalan al contratar.

-Adoro jugar al Detective, me encantan las paginas que tiene los botones escondidos, para que solo los que tenemos un Alto estudio en Ciencias Ocultas, los encontremos.

- A veces olvido, que debo usar los emoticons, gracias al Cielo, siempre habrá una ventana saltarina que me lo recuerde.
----------------------------

Gracias, Web!

Fuente: Cristalab

Usabilidad: Cuide hacia donde llevan los enlaces de su web

2007-04-25T10:06:00.000-07:00

Dé información de cualquier link que lleve a los usuarios a una descarga

Cuantas veces han estado navegando en un sitio en busca de alguna información que necesitan y cuando la encuentran y se disponen a bajarla: ¡PUM! se enteran que su navegador se cuelga porque cuando dieron click en el enlace que los llevaría a la información deseada se encontraba en formato PDF y el Acrobat Reader se está iniciando en el navegador, además no podrán ver la información hasta que se descargue por completo (pensemos en un manual de 6 megas) Definitivamente esto se convierte en una experiencia web poco agradable.

Ahora tomemos el mismo ejemplo pero apliquémoslo a un "usuario normal" donde sus conocimientos sobre la web se limitan a revisar el Hotmail y a iniciar sesión en un programa de mensajeria instantanea. ¿Acaso no se convertiría esto en una experiencia traumática para él? Y no solamente será traumática sino que su buena experiencia en la web se verá reducida dramáticamente, casi al punto de que pierda el interés por completo en la información que estaba buscando, le quedaría la otra opción de esperar a que se descargue el archivo en su navegador, pero es seguro, no volverá a entrar a esa página otra vez.

Nosotros, como diseñadores, tenemos el deber de hacer que la experiencia de un usuario en nuestra página sea la mejor posible, aunque el cuento de la "buena experiencia web" suena al eslogan de nuestra desaparecida Macromedia, si nos ponemos a analizarla, tiene tanta validez que debería ser una regla:

Great experiences, build great businesses

"grandes experiencias, crean grandes negocios"

Así que la próxima vez que tenga que colocar un archivo para descargar como por ejemplo un video, un manual o un archivo de audio, no se le olvide dar la información necesaria para que el usuario pueda decidir si bajar el archivo o pasarlo por alto.

Trate de no comprometer el contenido de su página con el archivo a descargar, porque a veces ocurre que colocamos una lista de precios o un formulario en un archivo con formato PDF pero, ¿Y si el usuario, por algún motivo, no pueda descargarlo o abrirlo? Debemos tener el cuidado de que este tipo de archivos (hablo de cualquier archivo multimedia en general) siempre sean una alternativa extra para el usuario (como cuando ofrecemos una versión imprimible) pero nunca que la información vital dependa únicamente de un archivo de este tipo.

Recuerden colocar el peso total del archivo, el formato, una estimación del tiempo de la descarga; además proporcionar todas las herramientas o información para que este archivo pueda ser visualizado por el usuario sin ningún inconveniente.

Siempre valore la posible complejidad de los procesos de la descarga, la descompresión, activación y hasta lectura o impresión del archivo. Pónganse en los zapatos del usuario, sean justos y háganle saber donde se van a meter.

Fuente: Cristalab

Fallos miserables del diseño web liquido y elástico

2007-04-25T10:04:00.000-07:00

Es posible que hayas leído algún artículo sobre diseños web líquidos (De ancho variable) contra diseños sólidos (De ancho fijo). Los diseñadores nos enfrentamos a la decisión de elegir uno de esos dos caminos a la hora de trabajar nuestro layout:

Diseño sólido basándonos en la resolución de pantalla más común según estadísticas.
Aprovechar las virtudes que nos ofrece las medidas porcentuales en CSS e intentar una web que se adapte a TODAS las resoluciones.

En la primera opción, nos encontramos con la posibilidad de encajar todos los elementos gráficos a nuestro antojo junto con el contenido en texto, teniendo la seguridad de saber como será la visualización del usuario final en el 100% de los casos.

En cambio, si optamos por un diseño "líquido", por más que seamos maestros en aplicar estándares y medidas porcentuales para garantizar esa "liquidez", siempre será imposible redimensionar los gráficos. Aún si nuestro diseño es sencillo y textual, como mínimo, tenemos el logo.

La solución que más abunda en la red al día de hoy es hacer un diseño en plan mix: medio líquido / medio sólido. Consiste en dar un 100% de ancho al contenedor general de nuestra página y dentro de las columnas de contenido, hacer que sólo una de ellas disfrute de un ancho porcentual: la columna central.

Bajo este recurso existen grandes portales de alta calidad e incluso supuestas web 2.0 que presumen tener un "diseño líquido". Es decir, lo que tenemos es un contenido central que se aposenta a sus anchas a grandes resoluciones de pantalla y que deja unas ridículas columnitas laterales con menús y contenido importante. Por último, un loguito de risa en la parte superior izquierda que parece gritar: ¡¡¡¡Eeeehhh ooohhhh!!!! ¡¡¡¡¡Estoy aquííííí!!!! ¿Es una sensibilidad de diseñador o a todos nos produce escarlatina esa "solución" a la variedad, cada día mayor, de resoluciones de pantalla?

¿Por qué no admitir que hay hacer algo?

¿Por qué no todos los diseñadores que sienten una punzada en el estómago ante el momento “mini-columnas sobre contenedor poderoso” hacen algo?

Sufrimos un bloqueo y así será hasta el día que todos los recursos favorezcan una adaptación lógica e incluso matemática de los elementos que integran nuestra página. Gráficos sean redimensionables, diseñadores y desarrolladores usando correctamente los valores .em y los porcentajes, etc. Ese día habremos superado la crisis

Jamás volveremos a ver cosas semejantes a:

Por el contrario, encontraremos más casos como este brillante ejemplo de cómo redimensionar adecuadamente a cualquier resolución de pantalla.

Sabemos que la tecnología actualmente no nos proporciona las herramientas necesarias para corregir ciertos detalles, pero con un poco de ingenio y sobre todo mucha planificación, podemos evitar convertirnos en grandes maestros de las “mini-columnas”, (así como lo fuimos alguna vez de las tablas).

Lo primero y más importante, planificar, ¡¡PLANIFICAR!! Nunca es demasiada planificación para lograr un buen resultado.

Lo segundo, estudiar mucho, en la web siempre encuentras recursos nuevos, ideas nuevas. Ser curioso es un elemento indispensable en ser un buen diseñador/desarrollador.

En último lugar, estas son algunas pistas que pueden ayudarnos a encontrar the_Road® a los layouts verdaderamente líquidos:

Fuente: Cristalab

La creatividad en la web: Ideas, tecnología y dos huevos

2007-04-25T09:27:00.000-07:00

El dolor del constante aprendizaje es la premisa de todos aquellos que decidimos ir por el camino de la tecnología. Muchos lo ven ahora al reaprender Actionscript 3. ¿Por qué gastar nuestro tiempo en entender lo nuevo que Adobe nos quiere vender? ¡Tenemos proyectos que entregar, fechas que cumplir! Quizás es un complot para sacarnos del mercado web. O quizás estamos perdiendo el punto de por qué la tecnología avanza.

Mi crítica constante a la academia y la enseñanza universitaria es su lentitud en la adopción de las nuevas tendencias. La programación orientada objetos, por ejemplo, apareció en las aulas mucho después de que se empezara a usar en el desarrollo profesional de software. Hasta hace muy poco se empezaron a enseñar metodologías de diseño de software del lado del servidor y ni siquiera hablemos de estándares web.

Es por eso que los creadores de la web somos famosos por nuestro entusiasmo empírico. Cada día aprendemos nuevas cosas, formas de hacer un CSS compatible, trucos para una vida más fácil en Flash, nuevos caminos para optimizar nuestras interfaces. La proactividad a renovarnos nos diferencia de muchas otras profesiones, haciéndonos especiales. Sin embargo, esa diferencia también funciona como una desventaja para aquellos que quedamos atrapados en el loop de los nuevos tiempos.

¿Cuándo fue la última vez que nos sentimos felices en medio de un proyecto? No al final, sino en medio de su proceso. ¿Hemos dicho alguna vez que hemos "innovado"? ¿Valoramos alguna de nuestras creaciones como nueva y original? ¿O solo seguimos las pautas donde otros ya han triunfado?

Hay dos extremos en los webmasters profesionales. En uno predominan los diseñadores. Es donde vemos páginas web con interfaces extrañas, normalmente hechas en Flash. Cosas raras, difíciles de entender. En muchos casos espectáculos visuales que te hacen decir "Oh", pero que son imposibles de navegar y fallan en transmitir el mensaje de nuestros clientes. El otro extremo, dominado por los desarrolladores, es aquel completamente estándar. CSS y XHTML son omnipresentes aquí. Lleno de información, cumpliendo con cada regla de la web y siendo horrible.

Este ultimo grupo emplea las técnicas comunes de diseño web. Un logo, una botonera, colores de fondo. ¿Si sabes que funciona para qué cambiarlo? Igual no nos van a pagar más por ello. No hay tiempo para experimentar si queremos terminar de aprender lo nuevo de CSS3 y como implementarlo de modo que también funcione en el intento de navegador que es Internet Explorer. Ese es el proceso mental del segundo grupo.

El problema es que estamos usando la tecnología como una excusa. Buscamos la manera óptima de hacer un diseño a tres columnas en CSS y no pensamos en como explotar lo que conocemos para crear nuevas experiencias de usuario. Criticamos las nuevas ideas descartando su posibilidad de éxito. ¿Quién quiere video en la web con transparencias? ¿Qué sentido tiene hacer una web de noticias donde sea el usuario y no los editores los que elijan su contenido? Hay una inercia de anti-innovación en la cultura de la web (especialmente la hispanoamericana) que hace de las nuevas y buenas ideas, monstruos horribles o descartables.

Comparen las ofertas de trabajo en España contra aquellas en Estados Unidos o, digamos, Inglaterra. En España encontrarás: "se busca persona que sepa Actionscript 2, tenga experiencia en programación, diseño grafico y trabaje bien bajo presión". En la otra verás "Se busca persona con experiencia en creación de interfaces de usuario, aplicaciones multimedia y programación de elementos web de e-learning. De preferencia en Flash". No importa la tecnología, sino tu capacidad en ella.

Hay una falta seria de ganas de crear. Sin embargo, también hay casos donde las nuevas "creaciones" generan horribles ejemplos de cómo no hacer algo.

Cuando voy a congresos y conferencias de diseño grafico encuentro estos ejemplos por montones. Webs con intros impresionantes de efectos alucinantes y algunos megabytes de peso. Sitios promocionales que cargan en un popup flotante a pantalla completa para "tener una inmersión completa del usuario". Ya antes había hablado de esto en mi artículo del odio a Flash, pero nunca está de más repetirlo. Estas son las personas que no entienden la web. Esto no es multimedia en CD, aquí la gente sólo está a un click de distancia de mandarte al infierno.

Para tenerlo más claro: Mientras no tengas popups, intros horribles o sonido molesto e invasivo en tu web, experimenta cuanto se te de la gana.

Un ejemplo que estuvo sonando en los foros de Cristalab en estos días fue el de Semillero. Una web de GrupoW cargada de premios. De entrada vemos dos pecados mortales: un intro que te exige un click adicional y un popup. Afortunadamente, e ignorando la forma en que el popup arruinó mi navegación por pestañas, la web cargó rápidamente.

Van dos clicks que he tenido que dar, uno para hacer saltar el popup y otro para que el popup se reprodujera y AÚN no he llegado a la web. Dos clicks son serious business a nivel de usabilidad. Pero sigamos adelante.

Y me sale una jodida semilla... WTF!? La semilla viene con un aviso de "up". Como animándome a que me vaya para arriba. Di click y de la semilla un arbol empezó a crecer. En cada rama hay un botón que me lleva al contenido. Ya serían 4 clicks antes de llegar a la información.

Al final, después de más ramas, hojas, flores y frutos, llego a un lindo texto que dice "ORGULLO". Perdido como quién más... Le doy click a orgullo y me sale un texto lindo hablando de cómo ganaron. En general, la navegación requiere que bajes y subas entre las ramas. El proceso requiere que veas como el árbol crece y decrece. Y aun no tengo ni puta idea de que es Semillero. Francamente, antes de llegar a "somos", creí que era una web de venta de semillas o algo relacionado con el campo. Resultó ser una especie de incubadora de diseñadores pro.

"La publicidad no sólo debe ser creativa, también debe ser efectiva

Esa frase es algo a recordar. La experimentación en Semillero es total y en cierto modo genial y valiosa de los premios ganados. Pero después del "wow" de la primera vez es un autentico dolor navegarla para conseguir algo de información de ella. La creatividad de la idea rivaliza contra la efectividad del sitio. Por otro lado, por el target del sitio, quizás sea más importante el impacto inicial del usuario a la información que pueda entregar después. Pero muchachos, ¡Por lo menos quiten el popup! Los bloqueadores de ventanas emergentes en todos los navegadores no fueron creados precisamente porque sea un placer para el usuario usar uno.

Para que no digan que dudo del gran trabajo de GrupoW, miremos otra de sus webs, Ambienta Comex.

Esta web es una jodida obra de arte. Al principio te pide elegir entre tres posibles escenarios de acuerdo a lo que buscas, lo que no está mal. Luego, hasta el preloader es un ejemplo de una gran interfaz. Todo un sistema de venta para un usuario interesado en el tema. La integración del video digital a la experiencia del usuario es tan transparente y única que debería ser un ejemplo estudiado en las facultades de diseño grafico y clases de GUI para ingenieros. Es uno de los mejores ejemplos donde la innovación en interfaces es tan buena que impresiona. Un testimonio de que es posible hacer cosas "wow" sin arruinar por ello la experiencia de un usuario antiguo.

De hecho, propondré que esta web sea estudiada académicamente. Estas son las cosas que valen la pena.

Mi única queja en Ambienta es que el manejo de los títulos a nivel de HTML no es el mejor. Pero más que una queja es un berrinche, así que no me hagan caso.

Por ultimo, Big Spaceship. Esta gente fue la encargada de crear Nike Air. Una web que combina conexión a datos para crear de manera fácil un sitio promocional multilenguaje, al mismo tiempo que la integración con video en Flash más impresionante que hayas visto últimamente. La navegación corta radicalmente con todo lo tradicional y al mismo tiempo es 100% usable. Es rápida a pesar del intensivo uso de video e imágenes y entrega la información exacta de una manera clara y efectiva. 100/100.

Big Spaceship no se preguntó ¿Cuánto tenemos que esperar a Actionscript 3 para hacer eso? O ¿Aprendemos Flash 9 para empezar nuestro proyecto? Ellos quisieron hacer la idea y fue la idea, no la tecnología, lo que los guió.

Es lo que debemos hacer. Inicia un proyecto. Piensa en algo que quieras plasmar. Olvídate de lo que sabes y de lo que no sabes técnicamente. Simplemente di: "Quiero hacer esto". Cuando lo sepas y sólo en ese momento ya te puedes preguntar "¿Cómo hago esto?". La tecnología y sus avances no son un fin por el que debamos matarnos, son un medio para realizar nuestras ideas. Y es ahí donde debemos enfocarnos, en las ideas.

FUENTE: Cristalab

Estadísticas de Cristalab para diseñadores web

2007-04-25T09:24:00.000-07:00

A lo w3schools, analizaremos en esta ocasión los parámetros de navegación que presentan los visitantes de nuestra comunidad. Muchos de estos datos nos demuestran cosas como la penetración del Flash Player 9 en la comunidad de desarrolladores o el uso de distintas resoluciones de pantalla en un público tan enfocado como es el que visita a diario Cristalab.
Gráficos, cortesía de Google Analytics.

Penetración del Flash Player 9 y grafico de versiones

Empecemos por uno de nuestros temas principales, el uso de diferentes versiones del Flash Player.

Vemos un claro dominio del Player 8, pero con la liberación de muchos arreglos de seguridad, la grafica se hace difícil de descifrar para tener números reales de que versión tiene que cantidad. Así que saquemos los datos:

El Flash Player 8 ya ha obtenido un gran dominio. De igual manera, el recién lanzado Player 9 ha llegado en al 23% en menos de un mes. Ambos suman un 87% del total de usuarios con el Player instalado. El 7 y el 6 juntos suman 10%, ¿Tiempo de abandonar por fin Flash MX y MX 2004? Los usuarios de Linux dicen que aún no.

Resolución de pantalla

Mucha gente habla de que ya es tiempo de abandonar los diseños a 800x600 y empezar a crear o diseños líquidos o diseños a 1024x768. En estas cuestiones las estadísticas hablan más fuerte que los "entusiastas", así que veamos el panorama.

¡Aja! El ancho de 1024 empieza a ganar un gran terreno con el 57% del dominio, sumándose el 1280 con un 12%. Ambos llegan al 70% de los usuarios dejando al ancho de 800 atrás con 18.5%.

¿Es hora entonces de abandonar el 800 y empezar nuestros diseños a 1024?

¡NOO!

De nuevo, pensemos matemáticamente. Si tenemos una web a la que nos llegan 1000 visitas únicas diarias, podemos diseñar sólo para 1024, con esto hecho estaremos descartando al 18.5% de nuestros visitantes que son (Operación difícil) nada menos que 185 clientes potenciales por día. ¿5550 visitas pérdidas al mes por tener doscientos píxeles más de espacio? Ustedes deciden.

Navegadores

El tema más delicado y sentimental de nuestra amada comunidad es el vehiculo que nuestros usuarios usan para llegar al contenido que con tanto esmero queremos mostrarles. Sea El Maligno u otros más decentes, siempre esperamos que más y más usuarios vean la luz (Porque cierta empresa no lo hará) y poco a poco migren hacia soluciones que tengan un soporte real de los estándares de la web. ¿Hay esperanza?

¡Hay esperanza! Aunque El Maligno aún tenga poseídas las almas del 73% de los Clabers, es claro que muchos ven la luz más y más. 23% usando Firefox es mucho y realmente demuestra que hay luz al final del tunel. Tambien vemos que yo tenía razon en el comic de la entrevista a Internet Explorer... Opera: 2%

Mensaje para ti, amante de Opera:

bulldog con jersey a cuadros

Disclaimer: No tengo iPod, loft, bulldog, jersey a cuadros, pequeñas gafas oscuras y aunque sí hago RIAs, no tengo (desgraciadamente) un MacBook.

Sistemas Operativos

Éste no lo iba a incluir pero al final no me aguanté. No dice mucho, nuestra comunidad es principalmente de Flash y diseño web con herramientas del imperio (Macrodib... Adobe) que sólo corren en Windows y Mac (Próximamente Flex 2 y Flash Player 9 para Linux). Así que si no ves a tu sistema operativo de preferencia aquí... no nos hacemos responsables de tus lágrimas derramadas. (Puedes enviar tus quejas a la100rra@gmail.com , seguro serán contestadas)

...

¿Bueno, que esperaban? El mando es así.

Big General Disclaimer

Cristalab es una comunidad de diseñadores y desarrolladores web con personas del Mundo Real® infiltradas y otras especies raras. Nuestro target group es de lo más distópico y antimarketing, por lo que al ver estas cifras, debes tener en cuenta que muy probablemente no sirvan en tu proyecto de toda la vida con un objetivo a usuarios normales que usan el PC para descargar pr0n, abrir el mesanjer y leer el jotmeil. Para esas webs los parámetros de diseño son fáciles: 800x600, Windows, Internet Explorer y Flash Player en versión: el_mas_reciente - 1.

FUENTE: Cristalab

Reglas de codificación y lineamientos de diseño de CSS

2007-04-24T20:21:00.000-07:00

Estos lineamientos o guía de creación de código CSS permiten llevar un trabajo ordenado y mejor productividad tanto en proyectos personales como en equipos de trabajo. Sigue estas pequeñas reglas para tener una mayor organización y lógica en tu proceso de diseño de hojas de estilo.

Organización de los archivos

Para mejorar los cambios de diseño y forma sin afectar otras áreas, dividimos en 5 partes básicas todos nuestros estilos. Teniendo estos archivos:

layout.css: Todo lo relacionado con posicionamiento, esquema del diseño, etc. Exclusivamente.
color.css: Colores de fondo e imágenes. En el caso de los background también sus repeticiones. Bordes de elementos, estilos de borde.
fuentes.css: Tipo de fuente o tipografía, adornos de fuente (negrita, cursiva, subrayado). Ancho de líneas, espaciado, tamaño de fuente.
header.css: TODOS los estilos del header/botonera del diseño.
forms.css: TODOS los estilos de formularios y elementos de interacción.

Además de estos, habrá un archivo que una a todos y sea el único que llamaremos en el HTML. En el caso de Cristalab, el archivo se llama cristalab.css y su código es:

@import url("header.css");
@import url("color.css");
@import url("fuentes.css");
@import url("forms.css");
@import url("layout.css");

Dentro del CSS

Orden de escritura.

Dentro de los archivos CSS podemos colocar estilos para etiquetas, para identificadores, para clases, así como ciertos casos especiales. Colocaremos los estilos en este orden:

Etiquetas (Tags de HTML)
Identificadores
Clases
Casos especiales

A su vez, estos los organizaremos en orden alfabético. Ejemplo:

body {}
label{}
span{}

#bate{}

.armageddon {}
.flamas {}
.sangre {}

Comentarios

En caso de que haya estilos especiales o algún cambio importante dentro del equipo de desarrollo, se colocarán comentarios al principio de esa etiqueta de la siguiente manera. Si el cambio no se quita o modifica, se debe mantener el comentario:

/* Por Freddie. 17 de Agosto del 2006
   Hack de lo más c00l para lograr el diseño a dos columnas sin problemas
*/
.inferior
{
 clear: both;
}

Tabs o Espacios.

En el contenido dentro de corchetes, siempre se identará este contenido con tabs. Cualquier editor decente puede configurarse para poner tabs en vez de espacios en la identación (Dreamweaver, Aptana, Eclipse, etc)

Opción de cambiar espacios por tabs en Aptana.

.cosa {
 /* comentario identado con un tab */
}

Nombres de etiquetas, identificadores y clases.

Los nombres de etiqueta son, por supuesto, en minúscula, así como todos los demás nombres. Para los identificadores o clases con más de dos palabras, estas serán separadas con underscore “_”.

Los nombres deben ser descriptivos, es preferible que sean un poco más largos, pero que se entienda con sólo leer el nombre para que sirve:

body {}
#titulo_header {}
.enlace_footer {}

Corchetes o llaves. Donde colocarlas

Aunque esto sea motivo de peleas constantes en los equipos de trabajo, lo mejor es seguir el camino que permita mayor claridad en el desarrollo. Para ponerlo en pocas palabras, todos los corchetes van en una línea propia.

.fondo
{
 background: none;
}
.titulo
{
 color: #0000FF;
}

Espacios después de signos.

Es algo muy sencillo que puede ayudar de gran manera en la lectura del código. Pon un espacio después de las comas, los signos de dos puntos, etc. Es básicamente escribir código como si se escribiera (bien) en español.

.fondo, .titulo
{
 background: none;
 color: #05F1F2;
}

Documentación de hacks

CUALQUIER hack o cosa rara para hacer funcionar un elemento especifico en el diseño, sea porque no hay otra forma de hacerlo o porque es la mejor manera de que funcione en navegadores como El Maligno, debe documentarse. También, no deben usarse hacks hasta que no se han probado todas las opciones posibles de hacerlo de manera correcta.

.info_comic
{
 /* Esto logra que funcione en IE de manera mística y nos
    permite ir por cerveza */
 line-height:12px ¡important;
}

Optimizaciones de código.

Poner en una sola línea el código de un background o simplificar los colores de la paleta básica no sólo es permitido sino que impulsamos a hacerlo:

.contenedor
{
 /* aquí el color sería el #EEFF33 */
 background: #EF3 url(/images/general/fondo.png) repeat-x;
}

Con estos sencillos lineamientos de diseño de hojas de estilo CSS, se hace mucho más organizado y efectivo el trabajo en equipo. Pónganlo en practica en sus empresas y proyectos. La mayoría de los lineamientos están basados en reglas de codificación usadas en muchos proyectos libres conocidos, como phpBB.

Fuente: www.cristalab.com

La web, hipertexto y literatura

2007-04-24T20:18:00.000-07:00

Por lord Shiva, tecnonexus@hotmail.com

"Life is like a videogame with no chances to win..."
Atari Teenage Riot (into the dead - burn, berlin, burn)

Introducción

Si estás leyendo este artículo entonces te interesa en alguna forma cierto tipo de literatura, y estás usando internet y más precisamente un mecanismo hipertextual.
Sin darte cuenta (o sí) ya caíste en la perversa batalla entre el idealismo más utópico y el uso de un sistema masivo y global con implicancias bastante sombrías.
El profetizado boom de la sociedad de la información nos ha explotado en la cara de golpe. Echemos un ojo a ciertos hechos del uso del hipertexto como herramienta en el sistema literario, que de tan obvios pasan inadvertidos.
Bienvenidos a un mundo virtual demasiado parecido al real

¿Qué carajo es el hipertexto?

Cuando usás internet para ver una página web estás usando hipertexto.
El hipertexto se ideó como una evolución del texto, en la cual se agregan la multilienalidad de contenidos paralelos, y la no secuencialidad de los mismos.
Es un enfoque de la información, es una tecnología de la comunicación y es un sistema gracias al cual esta evolución textual puede hacerse posible.
Bajo este enfoque un usuario de hipertexto puede manejar y organizar información diversa, creándola, agregándola, enlazándola y compartiéndola, merced a una tecnología de bases de datos, organizada en bloques de contenido llamados lexias, interconectados por enlaces o links, que oportunamente activados recuperan texto, gráficos, imágenes, video, animaciones, audio o una combinación de todo esto (el hipermedio), permitiéndole así personalizar tanto la presentación como la generación de las lexias.
Este enfoque se asemeja mejor al paradigma natural de la construcción del conocimiento humano, que actúa por libre asociación, estableciendo categorías personales de acuerdo a determinados intereses o necesidades, que el texto tradicional, con una secuencia de monolectura predeterminada.
El fenómeno hipertextual consta de un hiperdocumento que es el contenido de información en sí misma (los fragmentos hipermediales + los enlaces), un sistema hipertextual que es la herramienta de software que usemos para leer y/o escribir hipertexto y un ambiente hipertextual que es el hardware que soporta el sistema y el hiperdocumento. El hipertexto idealmente debería poseer medios de organización y presentación de los datos bajo diversas estructuras, una interfaz gráfica intuitiva que por su virtualidad emule los modelos cognitivos humanos, un ambiente compartido de distribución y concurrencia, un ambiente colaborativo que permite crear nuevas referencias embebidas en el texto y fácilmente portables, que no alteren lo referenciado, y varios mecanismos de recuperación de datos.

Un poquito de historia. No hay nada nuevo bajo el sol (excepto este virtual juguetito).

A pesar de sus veinte años de madurez la idea del hipertexto no es novedosa. Hay antecedentes en el campo artístico de muy larga data (directamente relacionado con la pedagogía y la encriptación hermética), como el I-Ching, antiguo tratado oracular taoísta, la technopaegnia de la Grecia clásica, los kaligramas, los textos mágicos y alquímicos, y las interpretaciones cabalísticas. De forma más reciente buenos ejemplos de contenidos multineales son el Quijote de Cervantes, Así habló Zaratustra de Nietzche, Rayuela de Cortázar, el film Ocho y Medio de Fellini o la miniserie Picos Gemelos de Lynch.
De hecho el texto tradicional es una estructura dinámica, y el principio y fin de los mismos no son marcas de clausura sino conexiones con otros textos. Están contextualizados psíquica, cultural, social y políticamente. Los discursos tradicionales utilizan la habitualmente la polifonía y la intertextualidad como estrategias propias.
Finalmente la lectura es un fenómeno de colaboración semiótica, un nexo entre autor y lector, un medio para llegar a la comunicación.
La hipertextualidad no añade nada nuevo a las teorías discursivas en sí mismas, pero brinda un medio y un soporte ideal para materializarlas. De la misma manera en la que mediante un software de representación de sistemas matemáticos podemos visualizar objetos geométricos de dimensión fraccionaria difícilmente practicables sin la herramienta tecnológica, de igual manera el sistema hipertextual permite visualizar libremente los procesos cognitivos humanos a través de hiperdocumentos.

Igualito que con la imprenta y la máquina de escribir.

El sistema literario está integrado por sectores que hacen posible la realidad de la lectura de un texto, conectando al autor con el lector último. Históricamente cada innovación tecnológica en el campo literario ha modificado el sistema drásticamente, y así el concepto mismo de los textos. Desde las láminas de arcilla o cera y las estecas en babilonia, o el papel y la pluma que hicieron perdurable un evento efímero como la transmisión de la tradición oral. Desde la imprenta que multiplicó enormemente la disponibilidad de textos y quitó el carácter único, personal y elitista de cada copia manuscrita, o la máquina de escribir que llevó la posibilidades de la imprenta a la esfera individual de cada autor. Siempre se alzaron voces reaccionarias amparándose en romanticismos absurdos, negando el carácter artístico de los discursos ejecutados con tecnología innovadora. Y es que los centros de poder se benefician con la ignorancia y la alta especialización de la información, con la restricción de su distribución y el acceso que a ella se tenga, de una forma u otra.
El sector creativo literario comete un craso error al confundir el factor tecnológico de la escritura con el factor creativo, cuando son dos cosas bien diferenciadas. Como el hipertexto "deshumaniza" en cierta forma la comunicación genera miedo al reemplazo del autor por un proceso automático. Lo cierto es que el hipertexto aumenta la autonomía productiva, desde las herramientas de edición digital, el incremento de la producción de textos (aunque no necesariamente de la calidad de los mismos), y la sustitución de la condición de escritor rechazado por las editoriales, a escritor "poco leído". El hipermedio permite explotar ciertas posibilidades textuales que los escritos tradicionales dejan de lado, como la rítmica de la escritura, la expresividad acústica de una voz recitando, y la interconexión multihilos dinámica.
El sector de producción editorial puede tener reacciones diversas ante la aparición de las nuevas tecnologías hipermediales. Dado que la inmensa mayoría de las editoriales son empresas comerciales, cuyo único fin, lejos de la cultura, es ganar dinero este sector puede asimilar o rechazar el hipertexto en función de la consolidación y la conveniencia de nuevos mercados. Las ediciones electrónicas de los libros permiten emitir tiradas críticas lo que redunda en el ahorro de papel, por ende de espacio y dinero, también hace posible la modalidad de impresión bajo demanda (mediante una suscripción). Los libros electrónicos nunca se agotan. Por otro lado en un medio tan complejo e incontrolable como las redes de información se hace imposible ejercer un efectivo control de copia.
Los sectores dedicados a la distribución literaria tienden a desaparecer conllevando una disminución del precio final de los libros.
Al eliminarse el factor de distancia física entre el ejemplar del libro ya editado y el lector las librerías tenderán a especializarse tanto en las temáticas como en el público al que apunten para adaptarse a estos nuevos cambios.
Dentro del sector de los lectores los más beneficiados son los escolares y académicos que podrán echar mano a optimizados medios pedagógicos, y velocidad para generar y distribuir textos especializados que suelen tener vigencia por corto tiempo.
Los críticos, que no dejan de ser lectores profesionalizados modifican sus condiciones de labor pero no mucho más que eso.
Los sectores documentales mejoran sus consultas y métodos de archivo, crean redes mundiales de consulta de textos, que puede interpretarse idealmente como una contraposición a la centralización del conocimiento, por un modelo de biblioteca universal dispersa y rápidamente accesible.

A favor o en contra (elegí el color, las blancas mueven primero).

Sin caer en los extremos de la mesiánica y alucinada utopía maquinista de salvación de los transhumanistas, o el rechazo sistemático y reaccionario a lo tecnológico que solamente contribuye a establecer más fuertemente un status quo jerárquico del poder, hay que hacer un balance entre lo positivo y lo negativo de la realidad del fenómeno hipertextual.
Ciertamente el uso y manejo de este sistema permite una descentralización de los discursos, y una democratización de la información. Brinda el poder de producir y distribuir de forma autónoma y libre la literatura y el arte en general. Pone de manifiesto la necesidad de nuevas mentes capaces de construir textos cartográficos, y nuevas mentes capaces de navegar estos mapas conceptuales de forma creativa. Son una forma práctica de promocionar la libertad, y de generar un nuevo tipo de arte comunitario y lúdico, difuminando las fronteras entre lo cotidiano y lo artístico de forma participativa.
El talón de Aquiles de esta realidad es que el hipertexto se manifiesta gracias a un hiperespacio físico y tecnológico. Casi cualquier autor puede hoy acceder rápidamente a una computadora personal con el software necesario para producir, leer y acceder hipertexto, pero las redes de fibra óptica que circunvalan el globo varios cientos de veces, los enlaces satelitales que salvan miles de kilómetros en un segundo, los poderosos servidores que alojan los hiperdocumentos están ciertamente fuera del alcance del usuario medio. Igualmente con los conocimientos técnicos necesarios para poder gestionar íntegramente un hiperespacio autónomo.
El empleo de las tecnologías de comunicación implica el cumplimiento de ciertas premisas políticas. Hay que atender al cambio de los protocolos de comunicación conocidos, usados, acatados, discutidos o desobedecidos, y a la posición de los discursos de poder y a las instituciones que los detentan.
El desarrollo de ese ambiente de "hardware pesado" ha estado en manos de corporaciones que comercian con el bien más preciado en la actualidad, la información. Los núcleos de poder material ya están bastante consolidados, y en el futuro solo resta la concentración de ese poder en cúmulos cada vez más pequeños y totalitarios.
El hipertexto no deja de ser una manifestación de la búsqueda de un lenguaje común que acelere y optimice la comunicación, impulsada por el interés económico de la industria y por el afán de concentrar enormes cantidades de información relevante para tomar decisiones corporativas.
Los sistemas hipermediales buscan trasladar el mundo a la Red, un cyberespacio de tiempo congelado. Tras la polimorfia, la multisecuencialidad y la interactividad del mundo virtualizado se esconde una peligrosa uniformidad semiótica que aspira a colonizar discursos culturales regionales, borrando distancias geográficas e históricas en beneficio de un mercado masivo, ávido de espectáculo, rapidez, diversión y superficialidad. El hipertexto puede ocultar el contexto y la historia de las lexias, borrar su procedencia o acomodarla caprichosamente, lo que resulta muy peligroso en lexias de contenido discursivo teórico o crítico. Puede ser una herramienta para que las instituciones que detentan el poder de la información adapten ideas individuales a sus propios fines.
La descentralización del poder de la información y los discursos tiene que ver menos con el hipertexto que con el hecho de que los enlaces y el contenido de las lexias están trazados a priori, puesto que con la excepción de una pequeña minoría ilustrada en los procesos de gestión hipertextual y el ambiente que le es propio, el usuario medio solo consume la información que encuentra en la red, no genera nuevos bloques de contenido ni nuevos enlaces entre los mismos.
Para que el hecho del hipertexto ocurra debe intermediar antes un programador que desarrolle el entorno informático que lo soporte, y también con la excepción de una minoría aún más selecta integrada por los programadores que trabajan en el desarrollo de sistemas de software libre, de código abierto bajo licencias públicas generales, por lo general los programadores desarrollan estos entorno como medio para ganarse la vida: una empresa le paga por desarrollar software rentable, sin importarle si este es o no políticamente liberador o democrático.
Para que el hipermedio sea rentable se deben generar entornos masivos con pocas distinciones culturales. Salvo limitadas redes de usuarios, la inmensa mayoría del espacio hipertextual es de entretenimiento (desde video juegos hasta pornografía), donde los límites están fuertemente fijados, y el acceso a muchos contenidos sigue estando restringido o negociable previo pago u otro tipo de filtro.
Teniendo estas cuestiones claras es más fácil diferenciar lexias que tiendan a una liberación del conocimiento y la comunicación, o camufladas bajo una apariencia liberadora, apunten a tornar un medio creado para la libertad, en un medio usado para seguir comerciando con la información. Un legendario hombre judío dijo hace casi dos mil años "...dadle al César lo que es del César..."

¿Cuán abajo es el under?

Así que tenés un sitio web underground, y lo alojaste en geocities, pero antes lo redireccionaste en cjb. Entonces tus usuarios, antes de poder acceder a tus contenidos fueron infectados con mucha probabilidad con una peste de adware, con una cookie y algún spyware y al entrar a tu sitio cada tanto ven unas pop ups o unos banners muy bonitos con publicidades que poco tienen que ver con el mensaje que querés comunicar. Lo que importa es la esencia dirás, pero estás sostenido on line por corporaciones. No creas que sos como un insider socavando viralmente el sistema desde adentro. Ellos te usan, y te usan fulero. Tienen un control preciso de qué contenidos alojaste, recavan información de tus usuarios (o sus usuarios para ser más estrictos) sin su expreso consentimiento y usan esta información para generar estadísticas que les permitan tomar decisiones más acertadas acerca de cómo consolidar mejor su poder corporativo. Poco les importa que en realidad hables en su contra, lo que ellos quieren de vos ya lo tienen hace rato. Game Over. Usan tu sed de libertad para engrosar monstruosas cuentas en Suiza y para perfeccionar los mecanismos publicitarios, y de dominación cultural.
Qué hacer entonces. La respuesta no es fácil. Pagar por el alojamiento, y registrar dominios es la más corta, pero seguís chupándosela a las corporaciones, eso sí, tus usuarios agradecidos. Empezar por aprender acerca de detalles técnicos que poco tienen que ver con el arte. Invertir mucho tiempo en el estudio, restando horas de sueño o trabajo. Estar dispuesto a gestionar (plin! caja) conexiones de fibra óptica profesional (aunque consigas cagarte en los sitios de alojamiento gratuito y en los pagos siempre vas a tener que bajarte los lienzos ante los tipos pesados de la red, los chicos de los cables), montarte tu propio servidor y tenerlo funcionando las 24 horas. Bah, vas a estar mucho más expuesto al hacking de las personas a las que no les simpatices, y quizás 24 horas de up time se transformen en 20, o en 12 (¿te contentarías con 3 días a la semana?).
Así que webmasters, diseñadores y desarrolladores del under de internet: ¡Uníos!... o seguid viviendo en la irrealidad de vuestros idealistas sueños

Bonus 1: ¿Y por casa cómo andamos? (la guerra ha comenzado)

Si vivís en Argentina habrás notado que en los últimos meses internet anda muy mal. No le eches la culpa al encargado del cybercafé al que vas, tampoco a la rubia que promociona tu conexión gratuita, ni a los servidores de los sitios que visites. El problema es mucho más simple e intestino.
La Cámara Argentina de Bases de Datos (CABASE) es una asociación sin fines de lucro (ni te lo creas tanto), fundada en 1989, cuyo fin es brindar un marco de encuentro y acuerdo entre todos los proveedores de servicios de internet, y carriers (los chicos de los cables), y un punto único de interconexión física entre todos ellos en una instalación denominada National Access Point (NAP).
Ese punto de interconexión en el NAP surge de un acuerdo firmado en 1998 por los 30 miembros más importantes de de CABASE, para mejorar la eficiencia de la conectividad general y especialmente nacional. Su fin es facilitar la conexión de contenidos alojados en diferentes redes desde cualquiera de ellas, estimulando la facilidad en el uso de internet.
El 86% del tráfico en la web lo poseen solo 4 de los 30 socios (Telefónica, Telecom, Impsat y Prima), denominados por la prensa el G4. Hacia mediados del año pasado los culos gordos del G4 decidieron restringir la capacidad de tráfico con el NAP, violando acuerdos preexistentes, amparándose en el hecho de considerar que internet ya está madura y no necesita fomentarse más su uso. De ahora en más pretenden que se les paguen adicionales por acceder a sus redes desde proveedores externos, una sucia maniobra extorsiva. Así que si no te conectás usando alguno de los servicios del G4, pero lo que querés acceder está alojado en alguna de sus redes, o si usás conexión del G4, pero deseás acceder a un contenido foráneo, entonces vas muy mal, porque te podés quedar esperando horas antes de que esa página cargue.
¿Y por qué esto no ha salido en los diarios? Simplemente los medios de comunicación, o pertenecen a los mismos holdings que los miembros del G4, o tienen relaciones carnales con ellos. ¿Te imaginas qué puede pasar si un medio de comunicación se queda sin teléfono?
Ya ves qué poco tiene que ver la práctica del hipertexto con su idealista teoría. Hora de afilar los colmillos

Bonus 2: El estilo sobre la sustancia, o como dijo un cyberpunk, la actitud lo es todo.

Bueno, nada mejor que empezar a practicar el under antes que a paladearlo en teoría. La gente de letrasnegras.com ofrece libertad y aceptación editorial... ¿a cambio de nada?
Veamos, hasta donde sé alojan su página junto con otras de la misma "red" en un plan reseller de estados unidos, pagan más caro el hosting, pagan el registro del dominio, así que bajo su aspecto rebelde acatan sumisamente las normas del establishment vigente. Editan los libros electrónicos de los desinteresados (casi todos) autores con un software llamado Activ E Book Compiler (que espero que hayan crackeado antes que comprarlo). Te dejan bajar gratis una copia en formato de html encriptado, compilado y ejecutable.
Pero resulta que como cereza amarga en la torta te encontrás con que solo podés abrirlo una cantidad limitada de veces o de días, al cabo de las cuales, para desbloquear el e book, debés ingresar una contraseña que ellos te brindan. Hasta hace unos días pedían a cambio de la contraseña 5 dólares o una lista de 50 correos electrónicos para practicar su intento de spam.
Ahora aparentemente el proceso es un poco más transparente, al menos no te corren con la guita de las editoriales que critican, ni te piden correos para spam, será porque no le habían dicho nada a los autores de su pequeña maniobra. Eso sí, junto con algunos de los e books te instalan una pequeño archivo oculto en el que recavan información sobre tu máquina y agregan algunos comandos al shell. Eso no se hace. O si se hace me suena a mojada de oreja. Pero qué cabe esperar de aquel "contracultural" que usa PayPal para fajarte 60 dólares por un libro del "under". Fuck off.
Es poco coherente promover la libertad de comunicación y restringirla con contraseñas y spywares. Habla de un doble discurso muy común en la contracultura, y del uso de los mismos mecanismos que se intenta combatir (como dijo Tolkien, no existe ni bien ni mal, solamente deseo de crear o deseo de poder). Es hora de terminar con las revoluciones y empezar con las evoluciones, así que sólo por molestar, sólo para que realmente crees tu propia cultura, y de paso patees algunos culos gordos y pagados de sí mismos te voy a enseñar a crackear estos e books. El ejemplo lo hago usando como sistema operativo WinXP, si tenés otro diferente ponete en contacto conmigo y hablamos. Manos a la obra que es más fácil que comer pan.
Tenés que ir al explorador de Windows (o el programa que uses para ver y administrar tus archivos). Las opciones deben estar seteadas para poder ver archivos ocultos o de sistema (eso se hace yendo, en el explorador de Windows, al menú "Herramientas" > "Opciones de carpeta", y una vez allí te vas a la solapa "Ver", y en el apartado "Archivos y Carpetas Ocultos" marcás "mostrar todos las carpetas y archivos ocultos").
Abrís el e book y lo dejás abierto, pero minimizado en la barra de tareas.
Te vas al disco rígido en el que tengás instalado el sistema operativo (generalmente el C:), y allí a la carpeta "Documents and Settings", allí a la carpeta que se llame como el nombre de inicio de sesión en Windows, allí la carpeta "Configuración Local", luego la carpeta "Temp", allí a una carpeta rotulada simplemente "e", dentro de esa carpeta habrá otra con un nombre largo compuesto por muchos números y algunas letras (como por ejemplo 18695-040220-095627-56.a2k). La ruta a esa carpeta podría quedarte algo así como "C:Documents and SettingsUsuarioConfiguración localTempe18695-040220-095627-56.a2k".
Dentro de la misma vas a encontrar los archivos que componen el libro electrónico. Solo tenés que abrir un archivo de texto sin formato llamado "pass.txt", y allí tenés toda la lista de contraseñas para desbloquear el libro electrónico, separadas por retornos de carro.
Te vas al menú del e book y hacés click en el ícono de la llave, y allí te dice qué número de contraseña tenés que usar, cerrás el cuadro de entrada, volvés a la lista de contraseñas, copiás (selección + ctrl+c) el password que corresponda, volvés al e book, hacés click en el ícono de la llave nuevamente, pegás la contraseña (ctrl+v), y apretás Enter.
Listo, ya crackeaste un libro electrónico de letrasnegras.com. Esto es ilegal. Ahora si sos un poco obsecuente, quizás debás seguir los mecanismos previstos por esta editorial taaan "under", y taaan "contracultural".
"Hack the world", "Shock the mainframe" y "Jungle Boogie, nena".

Fuente: www.cristalab.com

Fundamentos del diseño grafico

2007-04-24T20:13:00.000-07:00

Muchos ven el diseño, como la rama que se dedica a hacer que las cosas se vean bonitas, si bien esto es parte del diseño no abarca en su totalidad la función del diseño como tal.

Si miramos a nuestro alrededor por un momento, veremos que el diseño de los inmuebles no solamente está para adornar, por ejemplo un escritorio. Un escritorio bien diseñado no solo ofrece una apariencia externa agradable, sino que debe de cumplir con ciertas funciones como: ser duradero, contar con el espacio superior necesario para colocar otros objetos, si es posible que tenga cajones para guardar otras cosas etc.

Definición de diseño según wikipedia: "El Diseño también es una actividad técnica y creativa encaminada a idear un proyecto útil, funcional y estético…"

Entonces realmente el diseño no solo cumple con la función de embellecer un lugar, sino que esta concebido a partir de un proceso de de creación con el objetivo de cumplir con una función en especial (o varias). Esto es lo que diferencia al diseño de las artes, ya que el segundo es la realización de las visiones personales y extra-sensoriales de un artista, en cambio el diseño cumple con una función práctica.

Elementos del diseño

Un diseñador (sin importar su rama) puede realizar diseños sin conocimiento alguno sobre la materia, ya sea por gusto personal o por su sensibilidad a la creación visual (talento) sin embargo conocer de estos principios le hará ser un mejor diseñador.

En general se distinguen 4 grupos de elementos

Elementos Conceptuales
Elementos Visuales
Elementos de Relación
Elementos Prácticos

A. Elementos Conceptuales

Los elementos conceptuales son aquellos que estan presentes en el diseño, pero que no son visibles a la vista. Se dividen en 4 elementos

Punto: Indica posición, no tiene largo ni ancho, es el principio y el fin de una línea.

Linea: Es una sucesión de puntos, tiene largo, pero no ancho, tiene una posición y una dirección.

Plano: Un plano tiene largo y ancho, tiene posición y direccion y además esta limitado por lineas.

Volumen: El recorrido de un plano en movimiento se convierte en volumen, tiene posición en el espacio, esta limitado por planos y obviamente en un diseño bi-demensional el volumen es ilusiorio.

B. Elementos Visuales

Por ejemplo cuando se dibuja una figura en el papel, esa figura esta formada por lineas visibles, las cuales no solo tienen un largo, sino que un ancho, un color y claro una textura (definida por los materiales utilizados).

Asi pues como ya han de suponer, los elementos visuales son:

Forma: Todo lo visible tiene una forma, la cual aporta para la percepción del ojo una identificación del objeto.

Medida: Todas las formas tienen un tamaño.

Color: El color se utiliza comprendiendo no solo los del espectro solar, sino asimismo los neutros (blanco, negros, grises) y las variaciones tonales y cromáticas.

Ampliación sobre el color según Wikipedia: El color es un fenómeno físico de la luz, relacionado con las diferentes longitudes de onda en la zona visible del espectro electromagnético, que perciben las personas y algunos animales a través de los órganos de la visión, como una sensación que nos permite diferenciar los objetos del espacio con mayor precisión.

Textura: Tiene que ver con el tipo de superficie resultante de la utilización del material. Puede atraer tanto al sentido del tacto como al visual.

C. Elementos de Relación

Se refiere a la ubicación y a la interrelación de las formas en un diseño

Dirección: La dirección de una forma depende de como esta relacionada con el observador, con el marco que la contiene o con otras formas cercanas.

Posición: La posición de una forma depende del elemento o estructura que la contenga.

Espacio: Todas las formas por mas pequeñas que sean ocupan un espacio, el espacio así mismo puede ser visible o ilusorio (para dar una sensación de profundidad)

Gravedad: El efecto de gravedad no solamente es visual, sino que también psicológica. Podemos atribuir estabilidad o inestabilidad a una forma o a un grupo de ellas.

D. Elementos Prácticos

Los elementos prácticos van mas allá del diseño en si y como es de esperar son conceptos abstractos.

Representación: Se refiere a la forma de realizar el diseño: puede ser una representación realista, estilizada o semi-abstracta.

Significado: Todo diseño conlleva conciente o subconscientemente un significado o mensaje.

Función: Para lo que esta creado dicho diseño.

Si bien la información recopilada y analizada en este articulo trata sobre el diseño en general, puede ser aplicada muy fácilmente al diseño web o al diseño grafico. Si bien es cierto cada rama tiene sus diferencias parten de una misma base para todos, al fin y al cabo la función de un diseño es crear un elemento tanto estéticamente adecuado como al mismo tiempo funcional y práctico.

Y recuerden: "El diseño no se trata de hacer cosas bonitas, sino inteligentes"

Fuente: www.cristalab.com