Recursos de mi Presentación "Sitios Exitosos"

Me han estado solicitando los recursos que menciono en mi presentación Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario, así que aqui están:

• Ejemplo de separación de presentación y contenido (CSS): CSS Zen Garden.


• jQuery: Librería de JavaScript que, además de fácil y rápida para codificar (y con menos líneas de código), facilita la separación del comportamiento y el contenido (JavaScript No Invasivo). Claro que no es la única: conoce otras librerías.


• Versiones Móviles de Gmail y Facebook.


• Validador de HTML de la W3C: W3C HTML Validation Service


• Validador de Accesibilidad: eXaminator


• Navegador sólo texto: Lynx Viewer


• Otros: Validadores en Herramientas para Diseñadores y Desarrolladores


• Heurísticas para evaluar la usabilidad: EVALUACIÓN HEURÍSTICA en Herramientas para Diseñadores y Desarrolladores


• Videos sobre Accesibilidad: ¿Cómo navegan las personas ciegas o con visibilidad reducida?


• Video del marcianito: ¿De qué se trata la Usabilidad?


• Mi propuesta de rediseño del SenaVirtual.edu.co.


• Aprende los Estándares Web


• Únete a la Comunidad Colombiana de Usabilidad: Usarte.org

Igualmente les recuerdo el listado de recursos que había recopilado para mi otra charla: Estándares Web y Accesibilidad en Colombia.

Webelo: Herramienta de Evaluación de Accesibilidad Web para Eclipse

Eclipse es un Entorno (IDE) de Desarrollo Open Source, creado originariamente por IBM, que es muy popular con los desarrolladores de Java, C/C++ y Web, por sólo mencionar unos cuantos proyectos que puedes trabajar en él.

La noticia de hoy, gracias al blog de Alan Chuter, es el lanzamiento de la primera versión de prueba de AcTF Webelo (Accessibility Tools Framework).

Webelo es una colección de componentes para Eclipse que permite a los creadores de contenidos Web y desarrolladores de aplicaciones Web llevar a cabo evaluaciones de la accesibilidad de su trabajo. Webelo aprovecha el componente navegador Mozilla para evaluar el árbol de estructura creado por el navegador en vez del código fuente recibido del servidor. Se entrega con un paquete de reglas basado en la Lista de Comprobación de Accesibilidad de IBM. Es una versión muy preliminar de un producto en desarrollo y la documentación en inglés no es completa.

Así que si eres usuario de Elipse, ya puedes comenzar a evaluar la Accesibilidad de tus proyectos.

El Retorno de WebMonkey

Ha vuelto un clásico del desarrollo web: WebMonkey: The Web Developer's Resource: un recurso público y gratuito para desarrolladores web, en donde desarrolladores, diseñadores y programadores como tu, escriben los artículos, tutoriales, trozos de código (code snippets) y otras contribuciones.

Como versión 2.0 beta que se respete, incluye blog y nos invita a que escribamos artículos (en inglés) para que hagamos parte de esta "nueva" comunidad de desarrollo Web.

Mi recuerdos con WebMonkey se remontan hace muchos años, cuando leí uno de los primeros artículos sobre Experiencia de Usuario que encontré en la Red: Information Architecture Tutorial. Es más: en esa época ni siquiera era usado el térmico de Experiencia de Usuario. En todo caso un clásico entre los clásicos.

La Usabilidad también tiene en cuenta las URLs

Las URL semánticas o amigables son las direcciones web que pueden ser entendidas por los usuarios a simple vista ya que están formadas con palabras que muchas veces están relacionadas con el contenido de la página y son fáciles de recordar.

Evalúa cuál URL te gusta y resulta más amigable (y usable):
- http:// www.MiSitio.com / productos.aspx ? id=50
o
- http:// www.MiSitio.com / productos / camiseta_R20 /

Obviamente la segunda es mejor para los internautas y hasta para los buscadores.

Te invito entonces a que leas este interesante post: URL semántica / Clean URL / Friendly URL en el blog Interacciones.

Y si quieres hacer tus URLs amigables, te recomiendo buscar en Google de acuerdo al lenguaje/CMS que trabajes. Por mi lado, que trabajo .Net, recomiendo: UrlRewritingNet.

Opera Mini 4.1 ya se Encuentra Disponible

Opera ha anunciado la nueva versión de su navegador para dispositivos móviles Opera Mini 4.1, considerado por muchos como el mejor navegador para dispositivos móviles.

Dentro de las características que encontramos en esta nueva versión tenemos:

• Es un 50% más rápido que Opera Mini 4.0.
• Sugiere, de forma automática, la completación de las URL, haciendo fácil e intuitiva el introducir las direcciones.
• Las páginas Web pueden ser guardadas para acceder a ellas más tarde de forma off-line.
• Te da un rápido acceso alas palabras o frases que quieras en las páginas Web.
• Imágenes y otros contenidos pueden ser descargados sin abandonar Opera Mini

Y recuerda que no tienes que tener un móvil para probar esta maravilla. Tan solo visita su Demo y listo.

Gracias a Más Que Accesibilidad.

8 Herramientas Gratuitas para la Usabilidad

En el blog de CSS Addict han recopilado 8 herramientas gratuitas que te servirán para evaluar la usabilidad de tu Web:

• Taskee: Te ayuda en el proceso de comunicación y asignación de tareas. Le facilita la vida a tu grupo de trabajo a la hora de las revisiones y pruebas de tu sitio.


• StomperScrutinizer: Una especie de navegador que emula un Eye Tracking.


• CrazyEgg: Te da un "mapa de calor" con las áreas donde tus visitantes hacen Clic.


• ClickHeat: Te muestra las áreas "calientes y frías" de tus páginas basadas, igualmente, en los Clics.


• User Rec: Un plugin para Firefox 1.5 que graba la actividad del ratón. Puede ser útil para revisar lo que hace un usuario en tu sitio.


• OptimalSort: Te ayuda a realizar un CardSorting (Técnica de categorización de contenidos).


• DejaClick: Otra extensión para Firefox que igualmente te permite grabar lo que hacen tus visitantes.


• Web Metrics: Un analizador de estadísticas con varias herramientas que te ayudarán con algunos problemas de usabilidad (chequeador de código, analizador de sesiones, entre otros.).

Gracias a ceslava.

Comparativa de Accesibilidad de las WCAG 1.0 y la Norma UNE 139803/2004

En España la norma que rige en los aspectos de Accesibilidad Web es la UNE 139803/2004, en lugar de la WCAG 1.0 de la W3C. Sin embargo esta Norma se basa en las WCAG y se diferencian en poco.

Si estás en España y dentro de tu trabajo debes revisar la Accesibilidad Web, Olga Revilla en su blog Itákora ha publicado un archivo de Excel que te facilitará la comparación de ambas. En ella pone todas las normas de la WCAG y a lado su correspondencia con la UNE... De esta forma, cuando tengas que evaluar los puntos de prioridad 1 y 2 de la UNE, los puedes identificar rápidamente ordenando por la columna correspondiente de prioridad UNE. Si por el contrario tienes que evaluar según la prioridad 1 y 2 de la WCAG, pues lo mismo pero con la columna de prioridades WCAG.

Herramienta de Depuración para el Navegador Opera

Opera, uno de los mejores navegadores Web, ya cuenta con el pequeño detalle que le faltaba: Una herramienta de Depuración: Opera DragonFly. ¿Y eso para qué sirve? Simplemente, nos sirve a los desarrolladores Web a depurar nuestras aplicaciones Web.

Otros navegadores ya cuentan con una:

• Firefox cuenta con Firebug
• WebKit con Web Inspector
• Internet Explorer con DebugBar y Companion.js

Esta noticia ha sido realmente una novedad, ya que lo he visto mencionado en gran cantidad de Blogs. Así que para no repetir los invito a leer el post de lanzamiento e introducción: Introduction to Opera Dragonfly o la explicación en español por Andrés Nieto: Probando Opera DragonFly Beta.

100 Recursos Imprescindibles de Accesibilidad Web

Una muy buena recopilación de recursos sobre Accesibilidad Web (en inglés) la que publicaron en WHDb: 100 Killer Web Accessibility Resources: Blogs, Forums and Tutorials.

En ella encontramos Sitios Web, Tutoriales, Foros, Simuladores, Herramientas, Validadores y mucho más. ¡Muy recomendable!

Gracias a kabytes.

Kit de Herramientas para Prototipado con PowerPoint

Si podemos hacer prototipos de nuestras Webs con Fireworks y con Visio, cómo no vamos a poder hacerlos con PowerPoint 2007.

De acuerto a Long Zheng, PowerPoint se está volviendo una herramienta de prototipado muy popular dentro de Microsoft. Partes de Windows, Windows Live, Internet Explorer, Home Server y Expression Blend fueron prototipados con este programa.

Te invito entonces a que mires una charla de Manuel Clement, del equipo de Diseño de Microsoft, acerca del prototipado con PowerPoint 2007. Además descarga el Kit de Herramientas para Prototipado con PowerPoint y pruébalo tu mismo.

Gracias a guuui.com.

Validador para Móviles

El Iniciativa Móvil de la W3C ha lanzado un nuevo validador especial para móviles: el Web Compatibility Test for Mobile Browsers (Test de Compatibilidad Web para Navegadores Móviles), el cual combina, en una sola página, un número de tecnologías que creen son las necesarias para una mejor experiencia Web, especialmente en los dispositivos móviles.

Cada una de estas tecnologías, 12 en total y entre las cuales evalúan: las transparencias PNG, soporte paga GZip, AJAX, SVG, Selectores de CSS3..., están representadas en un cuadro que se pondrá verde si el navegador pasa la prueba.

El test, aunque hecho para móviles, también permite evaluar los navegadores tradicionales:

• Firefox 2.0: Pasa 9 de los test
• Opera 9.24: Pasa 9
• Safari 3.1: Pasa 9
• Internet Explorer 7.0: Pasa 4 (¡Tan raro!)

Gracias a aNieto2k.

Valida tu JavaScript

Así como el código HTML de nuestras páginas se puede validar con el Validador de la W3C y las Hojas de Estilo con el Validador de CSS, también es posible validar nuestro código JavaScript con el validador JSLint.

Este validador NO es de la W3C, sino del Maestro Jedi: Douglas Crockford, fundador de JSON, JSMin y otra gran cantidad de trabajos en JavaScript.

Básicamente esta herramienta es muy buena para verificar la sintaxis, al igual, que las mejores prácticas en tu código JavaScript.

Hice mi prueba con un código de jQuery y me sacó gran cantidad de errores y advertencias, pero como no soy experto en Script no sé si es que no sirve para validar código de jQuery o si el código que generé no es tan bueno como parece... ¡Ups! Si alguien nos cuenta sería de gran valor.

Sabía de la existencia de esta herramienta desde hace años, pero hoy la recordé gracias al blog Robert's Talk.

Prototipos Interactivos con Visio

La utilización de prototipos está cobrando más importancia en el desarrollo de nuestras Web y eso lo demuestran los recursos que nos encontramos día a día en la Web.

Hace tan sólo algunos días te presentaba como hacer Prototipos Interactivos con Adobe Fireworks y hoy, gracias a elclerigo!, los invito a leer Cómo crear prototipos interactivos en PDFs desde Visio.

Si no conoces este software te cuento que el Microsoft Office Visio es un programa de dibujo vectorial especialmente creado para hacer diagramas (de bases de datos, de flujo, de UML...).

Ah! ¿Y para qué me sirve un Prototipo Interactivo? De acuerdo al Espectro de Prototipos nos sirven para comunicar, discutir, evaluar y probar nuestros diseños y están en la fase de Proponer (después de "Jugar" y antes de "Especificar").

Si... Los prototipos me sirven inicialmente para (1) jugar con propuestas de diseño. Posteriormente para (2) comunicar y discutir los diseños que se han mejorado. Para finalmente (3) especificar el diseño final que hemos depurado. Y durante estos tres pasos, la calidad de los prototipos van mejorando y mejorando, comenzado con un simple boceto para terminar con uno de gran calidad y que me servirá como Guía de Desarrollo y de Especificación.

Cursos Gratuitos en Learning Space

Gracias a Yusef les comparto otro recurso bien interesante: LearningSpace un espacio web de Open University en el que ofrecen acceso completo a formación virtual.

Dentro de los cursos que nos ofrecen gratuitamente y de nuestro interés están:

• People-centred designing
• Accessibility in interaction design
• Designing the user interface
• Design
• Managing Complexity: A Systems Approach

Actualización: De manos de Usándolo me acabo de dar cuenta de otro curso gratuito, nada más y nada menos que en el MIT: User Interface Design and Implementation.

Más Frameworks de CSS

Hace tan sólo 5 días les hablaba de los CSS Frameworks 960 Grid System y el BluePrint cuando hoy me encuentro con este super listado: Los 12 mejores CSS Frameworks.

Obviamente no se menciona el 960 Grid System porque es el New Kind on The Block, pero por supuesto que está el BluePrint.

El listado original proviene de SpaceBoy.

¿Usar o no usar un Framework? Muchos dicen que sí, muchos dicen que no [en]. Mi experiencia, después de usar el Framework de JavaScript: jQuery, es que lo voy a usar siempre (¡Espero!). ¡Es de lo mejor!

¿Pero un framework de CSS? Aún no he hecho el intento, pero cuando lo haga lo comentaré. Si piensan darle una oportunidad es bueno que antes lean las ventajas y desventajas de usarlos [en].

Actualización: En Freak Group acaban de hacer su propio listado de Frameworks de CSS.

Actualización 2: He aquí otro listado con los Frameworks más atendidos: CSS Frameworks.

Nueva Versión del AKS (Kit de Accesibilidad para SharePoint)

¿Recuerdas el Kit de Accesibilidad para SharePoint que mencioné hace 4 meses?

Gracias a SoftWAI me entero que acaban de lanzar la versión 1.1 de este Kit, la cual proporciona niveles crecientes de accesibilidad a través de un ambiente de colaboración e incluye 21 nuevos adaptadores de control para los blogs y Wikis que se han desarrollado para mejorar la accesibilidad de las piezas Web y de los controles individuales dentro del servidor 2007 de Microsoft Office SharePoint.

¡Noticia para los SharePointers! ;)

IE Tester: Las últimas versiones de Internet Explorer

Gracias a Anieto2k me entero de este nuevo programa IE Tester, el cual te permite probar nuestro querido amigo Internet Explorer en sus versiones: 5.5, 6, 7 y hasta la 8 Beta.

Actualmente utilizo MultipleIEs, el cual trae desde la versión 3.0 hasta la 6.0. Sin embargo mi mayor interés es el Internet Explorer 6.0 y este nuevo IE Tester me parece de lujo.

Lo acabo de probar con una página que tiene problemas con IE6 y efectivamente este IE Tester se comportó como esperabamos:

IE 6:


IE 7:


IE 8:


Actualización: También te cuento que el IE6 es tan querido por todos que ha salido una campaña para erradicarlo de los computadores de nuestros visitantes.

Todo sobre los Microformatos

Los Microformatos son un grupo simple y abierto de formatos para datos, diseñados inicialmente para humanos y en segunda medida para las máquinas, construidos sobre estándares existentes y adoptados masivamente.

Más claro con un ejemplo. Si tienes en una página Web tu contacto:

<div class="contacto">
    <p>
      <strong>Gabriel Porras</strong><br />
      cargo: Analista de Desarrollo<br />
      Intergrupo<br />
      email: ghporras@gmail.com<br />
      Medellin
      -
      Colombia
    </p>
  </div>

El microformato hCard, te invita a que lo reescribas así:

<div class="contacto vcard">
    <p>
      <span class="fn"><strong>Gabriel Porras</strong></span><br />
      <span class="title">Analista de Desarrollo</span><br />
      <span class="org">Intergrupo</span><br />
      email: <span class="email">ghporras@gmail.com</span><br />
      <span class="locality">Medellin</span>
      -
      <span class="country-name">Colombia</span>
    </p>
  </div>

¿Qué son entonces los microformatos? ¿Cuáles son sus beneficios? ¿Quiénes los han implementado? ¿Tienen futuro? ¿Qué herramientas existen para crearlos (fácilmente)? ¿Dónde encuentro tutoriales para aprender?... Tranquilo... Todas estas y muchas más preguntas ya las puedes responder en la excelente recopilación Microformats University: 100+ Articles and Resources.

¿No tienes tiempo? Mira entonces este resumen ejecutivo: Microformatos en Acción.

Actualización: En CSS Lab acaban de publicar la segunda parte de unos post sobre Microformatos. Con más ejemplos. Te invito a que los leas:
1. Un poco sobre Microformatos.
2. Microformatos 2 contra-ataca.

Haciendo Prototipos con Adobe Fireworks

Artículo Original: Prototyping with Adobe Fireworks
Author: Henrik Olsen (guuui.com)
Fecha: 25 de marzo de 2008
Traducido por: Gabriel Porras

Tal parece que Adobe Fireworks se está convirtiendo en una de las herramientas favoritas de prototipado para muchos Diseñadores de Interacción. Con la versión CS3, Adobe ha adicionado nuevas características que resultan muy interesantes para hacer prototipos:

• Ya puedes crear páginas en lugar de tener que trabajar con un montón de capas (layers)
• Puedes tener una página maestra con todos los elementos comunes de las páginas
• Viene con una librería de elementos (widgets) de interfaces que puedes utilizar con un simple arrastrar y soltar
• Puedes crear tus propios elementos (widgets)
• Puedes programar Clics a cualquier elemento y así enlazar otras páginas
• Puedes exportarlo todo como páginas Web y así crear un prototipo "navegable"
• Puedes trabajar desde bosquejos hasta diseños completos

A continuación puedes ver un video y 3 tutoriales en inglés de cómo usar Fireworks como una herramienta de prototipado.

• Video of a web page made with Fireworks
• Tutorial: Rapid prototyping in Fireworks CS3
• Tutorial: Wireframing with Fireworks CS3
• Tutorial: Using Fireworks CS3 to design effective, interactive website presentations

960: Un Nuevo Framework de CSS

¿Un Framework de CSS? Sí. Así se le denomina a un conjunto de archivos que facilitarán tu trabajo con las hojas de estilo. Hay frameworks para JavaScript, como no va a haber para CSS.

Básicamente se han hecho para ayudarte en la diagramación de tus Webs mediante CSS y generalmente ya incluyen un CSS Inicial (Reset).

Creo que el más conocido es el BluePrint, el cual ya nos presentó Leandro hace algún tiempo y que realmente es muy completo porque, además de facilitarnos la diagramación (maquetación), nos ayuda a definir fácilmente la tipografía y la impresión de las páginas.

Ahora, el framework que te presentaré hoy es el nuevo: 960 Grid System, cuyo objetivo, al igual que del BluePrint, es facilitarnos la vida a la hora de crear el grid (grilla) de nuestro diseño.

¿Qué tiene de especial? Que además de los CSS viene equipado con las plantillas para los programas: Fireworks, Omnigraffle, Photoshop y Visio. Así que desde el prototipado puedes tener un diseño realmente consistente. Muy interesante para que lo evalúes.

Gracias a Digital Web Mag.