Cuando desarrollamos un producto digital podemos utilizar ciertos trucos para mejorar la percepción de uso de los usuarios cuando utilizan un interfaz. Engaños benévolos para hacerles ahorrar tiempo o hacerles pensar que lo están ahorrando. Algunos ejemplos:

En el iPhone OS (iPhone, iPod Touch y ahora iPad) Apple te invita a crear una imagen estática en PNG que sea igual que parte de la primera pantalla que vaya a ver el usuario (logicamente en la imagen no podrás incluir contenido dinámico). La primera pantalla puede tardar en cargar unos instantes, pero la imagen se muestra inmediatamente: de esta manera el usuario percibirá que la aplicación ya está cargando.

En Pivotal Tracker cuando escribes un comentario a una historia y la envías, el sistema actualiza inmediatamente el cliente, con lo que el usuario ve que su comentario ha sido guardado, y por debajo lo envía (un proceso rápido de menos de un segundo, pero no tanto como actualizar de forma inmediata el cliente). Lo mismo ocurre con muchas acciones en Gmail.

En muchas aplicaciones se puede ver el efecto contrario: precargar contenido HTML (ya sea estático o dinámico) y mantenerlo oculto hasta que el usuario utilice el control para verlo, de modo que se muestre de forma inmediata, en vez de tener que recargar a una página nueva o solicitar por Ajax el contenido nuevo.

Facebook (y Google Reader) cargan nuevo contenido de forma automática cuando el usuario hace scroll y se dirige al final del contenido: si el usuario está haciendo scroll es porque quiere más contenido, así que en vez de obligarle a utilizar un paginador o un botón de “ver más”, el sistema actualiza automáticamente lo que ya sabe que el usuario que quiere ver.

Twitter podría hacer algo parecido en su cliente web: podría precargar los siguientes 20 tweets que se muestrar al pulsar “más”; ahora mismo se hace una petición al servidor y tarda en cargarse un par de segundos; si en la primera carga de la página hubiese cargado 40 tweets en vez de solo los 20 primeros, y dejase ocultos los segundos 20, podría mostrar el nuevo contenido de forma inmediata (y cuando el usuario pulsase “más” ponerse a cargar los siguientes 20).

El diseñador web 2.0

¿Qué es un diseñador web? ¿Un diseñador gráfico, con formación, por ejemplo, en Bellas Artes, o un maquetador HTML sin un criterio estético demasiado desarrollado? A estas alturas de la partida va siendo hora de establecer unos rasgos generales para un diseñador web, y que todos entendamos lo mismo (lo de diseñador web 2.0 es un chascarrillo, que luego desarrollamos).

En mi humildísima opinión, un diseñador web tiene que tocar moderadamente cada uno de estos palos, y estar especializado en un uno de ellos (o más de uno):

Arquitectura de la información

  • Organización de contenidos, metadatos, taxonomías, navegación (más)
  • Usabilidad
  • Investigación y análisis, métricas e indicadores
  • Wireframes, prototipos, árboles de contenidos

Diseño Gráfico

  • Uso del color, composición, simbolismo
  • Fireworks, Photoshop, ilustración…

Programación cliente / Estándares web

  • Marcado semántico
  • Separación de presentación y contenido
  • Accesibilidad
  • XHTML / HTML
  • CSS
  • DOM, un poquito de Javascript

¿Programación servidor?

  • Con este punto tal vez estamos ampliando demasiado el espectro, pero en muchas ocasiones saber un poquito de programación servidor puede darte mucha cancha. Hay algunas herramientas muy sencillas de instalar y de personalizar que te permitirán montar webs de arriba a abajo, ya sea para algún encargo pequeño o para tu uso personal. En mi lista estarían: Drupal, Movable Type, WordPress, MediaWiki, phpMyAdmin

PS. En otro orden de cosas, desde hace tiempo me ronda la idea de crear un plan de estudios para curritos web. Lo había pensado montar en un wiki con licencia GPL para que aquellos centros de estudios que lo deseen, lo implanten. Quedaría chulo. ¡O montar la Universidad Furilo!

Recopilación de recursos sobre estándares web

Estándares web – general

Layout

HTML/XHTML

CSS

Accesibilidad

Listas de Correo (en castellano)

Weblogs

Otros recursos

Organizaciones – Grupos

Ejemplos Sites diseñados con CSS

Más…

Yahoo con CSS

WOW!

http://www.yahoo.com/beta.

(dato inservible: la home actual, sin CSS, pesa menos que la nueva)

Visto en Whitespace: Yahoo CSS Redesign (vía nixlog, que yo llevo bastante tiempo sin ser capaz de leer Whitespace – ¿este hombre hace algo más que escribir su weblog?).

Estándares web y marcado semántico: el código y nuestra sociedad

Poco a poco va calando en el imaginario colectivo rama desarrollo web el tema de los estándares (web). Mucha gente empieza a saber de que se está hablando cuando se oyen siglas como XHTML y CSS o conceptos como el marcado semántico. A partir de ahí se engancha con un poquito de accesibilidad y tenemos a un profesional competente dispuesto a consultar una especificación cuando tenga una duda.

Visualizando una gran tarta me atrevería a decir que un tercio de los que se dedican a esto en España (sobre otros lugares no me atrevo a apostar) saben de qué va el tema y, en menor medida, lo practican. Faltan muchos por reconvertirse, y no son pocos, pero si tenemos en cuenta las hordas de htmleros que dejó como herencia el mundo punto com podemos ser optimistas.

¿Es un buen momento para que se reconozca el trabajo de las personas que pican código, al menos en las empresas en las que esto es su base?

Bueno, vale, no se para qué hago esta pregunta: nunca se reconocerá algo así. Aquellos que pican código, sea del tipo que sea, ocupan el escalafón más bajo que existe en cada empresa. Picar código no es algo a lo que se deba aspirar. De hecho se debe aspirar a dejar atras cuanto antes esta etapa. Se supone que es algo que sabe hacer cualquiera, no es algo distintivo, ¿y quien quiere ser igual que el de al lado?

Se le da poca importancia a este matiz, cuando lo cierto es que el código es la base de muchas empresas: después de todo, lo único que hacen es código. Podrán tener mucha estrategia, grandes ideas, mover grandes cantidades de pasta… pero qué triste que su código sea mediocre. Y qué mediocre que su código sea tan triste. Peor aún que cualquier responsable todavía cerca del suelo no sepa por qué ese código está mal ni como se puede mejorar. Normal, pasaron por esa etapa deprisa y corriendo hacia donde están ahora sin prestar mucha atención. Y si no saben ellos si ese código está bien o mal, ¿como lo va a saber el currito al que subcontratan por obra de tercera o cuarta generación?

En fin, esta entrada pretendía sonar positiva, aunque por el camino me he liado. A lo que iba: por el bien de todos el código debería ser mejor visto. Y los que lo hacen más mimados. Y aquí dejo la continuación para mañana: la imagen que proyectan aquellos que pican código y su consiguiente valoración profesional (o ¿ellos mismos se cavan su tumba?).

Jornadas W3C sobre accesibilidad web

Hoy ha sido el primer día de las jornadas sobre accesibilidad web organizadas por el W3C en Madrid. En el momento en el que te registrabas te preguntaban sobre tus conocimientos sobre accesibilidad: en base a las respuestas de los asistentes adaptaban el programa: ha resultado una sesión con los conceptos básicos. Para empezar Shawn nos ha hecho una introducción general a la accesibilidad web, ha seguido Jon con un Case for Web Accessibility. Luego un pánel con personas con distintas discapacidades: cada uno contaba lo que hace con Internet y los problemas reales que tienen. Es muy interesante escucharlos y ver que con poquitos esfuerzos les abres un mundo de posibilidades a las personas con problemas de accesibilidad.

Comida con Pedro y Adolfo de xsto.info, una cooperativa con bastantes similitudes con Interactors; con Ana y Jose, los administradores de Ovillo; dos chicos que venían del País Vasco y un italiano muy simpático y hablador (que me ha descubierto esta barra de herramientas para IE. Gracias!).

Después de la comida una presentación sobre accesibilidad en multimedia de Enrique Varela de la Fundación ONCE que se ha quedado muy corta por la falta de tiempo; de nuevo Shawn hablando sobre el problema de la necesidad de harmonización entre los distintos estándares; un pánel sobre las políticas aplicadas en Europa, España y Latinoamérica; y para terminar una charla sobre las maneras de trabajar juntos para avanzar en accesibilidad web.

Mañana el programa es algo más técnico. Lo disfrutaré tanto como el de hoy. Un 10 para la organización, por cierto.

Ah! Esto. Claro. Me encanta.

Actualización: Segundo día de las jornadas

El segundo día empezó con Shawn comentado lo básico sobre imágenes, tablas, y formularios. Habló de un concepto que yo no había escuchado nunca: la lectura de tablas lineal, algo bastante sencillo y lógico por otra parte: para hacer más fácil (y sobre todo más realista) la transición entre los layous con tablas y los basados en CSS, las recomendaciones permiten utilizar tablas, pero te piden que el contenido de las mismas se lea linealmente, de modo que un lector de pantalla haga una lectura lógica del contenido de la página. Sobre todo en cuanto a la distribución de formularios dentro de tablas.

Shawn habló de CSS Zen Garden como ejemplo de lo que se puede conseguir con CSS y documentos HTML bien estructurados. En relación con esto, Jon hizo una de las presentaciones a mi juicio más interesantes de las jornadas. Usando como ejemplo una web (que ahora no recuerdo, si lo hago lo dejo por aquí) con layout basado en CSS explicó qué ventajas ofrece el tener un documento *semánticamente estructurado* y *separar presentación de contenido*.

Creo que estos dos puntos son fundamentales en la consecución de webs accesibles, además de que te aportan muchas otras ventajas. Una vez que realizas documentos HTML bien estructurados y con la presentación basada en CSS, has dado un salto muy grande para tener una web accesible y mucho más fácil de mantener y actualizar, *con muy poco esfuerzo*. No es que por hacer esas dos cosas tengas automaticamente una web accesible, pero si que has sentado unas bases que te permitirán con poco esfuerzo adicional tener una accesibilidad considerable. Es decir, que no hay excusas para no hacer productos accesibles.

Jon también proyectó una serie de videos muy ilustrativos de tests con usuarios con discapacidad. Creo que tendrían que haber ampliado esta parte práctica con ejemplos reales frente a tanta “teoría”. También opinan así algunos de los asistentes a las jornadas, que han dejado sus impresiones en la “lista de correo de Acceso Web (lista de correo de Acceso Web)”:http://es.groups.yahoo.com/group/accesoweb/, como “Rafa”:http://es.groups.yahoo.com/group/accesoweb/message/2902 o “Carmen”:http://es.groups.yahoo.com/group/accesoweb/message/2891. Por la tarde se trató la evaluación de la accesibilidad web. Especialmente de interés la presentación de Sylvie, una ciega total que trabaja evaluando sitios webs en “BrailleNet (BrailleNet – Une porte sur le Web pour les personnes handicapées visuelles)”:http://www.braillenet.org/, y que nos contó el proceso que siguen, como presentan los informes, las herramientas que utilizan. Comentaron que pondrían la presentación on-line.

La valoración global del tema ha sido muy positiva. Eventos en vivo como este te ayudan a afianzar determinados conceptos, siempre te dan claves que no conocías, ejemplos sobre como explicar problemas y soluciones, conoces a gente, haces contactos, se te ocurren ideas…

Respecto a esto de las ideas… este segundo día conocí a “Mariano Klein”:http://www.domestika.org/foros/profile.php?mode=viewprofile&u=123 de “Doméstika”:http://www.domestika.org, quienes van a organizar una “conferencia en Madrid: Hacia una Correcta Metodología en la Programación de Páginas Web (Conferencia de Doméstika en el Conde Duque)”:http://www.domestika.org/foros/viewtopic.php?t=18537. Igual propongo organizar una conferencia cuyo contenido sea eso que decía antes: el título podría ser

*Cómo, cúando y por qué*: Estructurar semanticamente un documento HTML; Separar presentación y contenido: CSS

Revolución pacífica, editor HTML, respuestas básicas

Ando de instalaciones en mi nuevo equipo. De momento en Windows… Javier me pasó este enlace que espero me ayude a instalar Debian, creo que lo conseguiré (ahora no funciona, pero para qué está la caché de Google). Mandadme ánimos de todos maneras. Ay! Lo que cuesta ser un rebelde.

Instalando el HTML Kit, mi editor de texto por excelencia, estoy descubriendo unos cuantos plugins que me van a terminar de hacer feliz. Como este TagTreeLite que te permite ver el arbol de la estructura de tu documento (X)HTML/XML, o este keIndentPhpCode que te deja el PHP bien ordenadito e indentado. No los he probado, pero prometen.

Vagabundeando por del.icio.us me cruzo con este documento escrito por Tim Berners-Lee, el creador de la WWW: Answers for young people. No es otra cosa que respuestas a las preguntas más frecuentes que un niño podría preguntar respecto a la invención de la web, contestadas de un modo simple y sencillo. Pero todo el mundo debería leerlo; sobre todos los que gustan de vaticinar tendencias: para que vean como se gestó uno de los inventos más importantes -por todo lo que ha cambiado- de este final de siglo.

También a través de del.icio.us, este enlace con recursos sobre CSS, accesibilidad y estándares.

¿Ventaja hoy que ya no lo será mañana?

En el webzine Space Rock Heaters han publicado una entrevista con Pablo Carrero de Rock Indiana, un sello español de power-pop que hace algunos meses lanzó la iniciativa cinco euros. Dicha iniciativa consiste en que el precio de todos los discos del sello pasan a costar nada más y nada menos que solo 5 euros, incluso en las tiendas. En esta entrevista Pablo habla sobre qué tal les está yendo, el tema del pirateo, la industria… además de sus grupos, claro.

El argumento es que a nadie le merece la pena piratear un disco cuando puede tenerlo original con portada, libreto, etc. por solo 5 euros. Logicamente tendrán que vender muchos más discos para poder sobrevivir, pero teniendo en cuenta que son un sello independiente, no tienen mucho que perder. Para los grupos sin duda es mejor que sus discos sean más baratos: por fuerza venderán más discos, les conocerá más gente, y tendrán más candidatos que llenen sus conciertos, que es donde un grupo verdaderamente consigue lo que necesita para seguir adelante.

Pero haciendo de abogado del diablo, me pregunto que pasaría si a todos los sellos les diese por bajar sus precios. Si vas a una tienda y ves un disco por 5 euros por el que sientes curiosidad, probablemente te los gastes, porque al fin y al cabo 5 euros no es mucho comparados con los 12 o 18 que cuestan la mayoría. Pero si vas a una tienda y todos los discos están a 5 euros, no habrá ningún elemento que desequilibre la balanza hacía una u otra opción: cualquier melómano compulsivo volverá a encontrarse con el dilema actual. Dilemas personales a parte, la realidad es que la gente compraría más discos, lo cual es bueno, creo yo.

With a little help from my friends

Recursos utilizados para construir a base de CSS y MT esta página:

  • http://www.stopdesign.com/ (si miras el CSS de cada uno se parece bastante, si, que pasa)
  • http://a.wholelottanothing.org/features.blah/entry/007162
  • http://dinamicstyle.net/