sábado, marzo 29, 2008

Más Frameworks de CSS

CSS Framework - Free Open Source

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.

viernes, marzo 28, 2008

Nueva Edición de eMinds

eMinds: International Journal on Human-Computer Interaction

Gracias a la lista Cadus me entero que acaba de salir la cuarta edición (tercera digital) de eMinds: International Journal on Human-Computer Interaction.

Los artículos de esta edición son:
  • Usability Engineering de Anil Kumar y Shampa Chakraverty
  • Interface Design Patterns, Languages and Models de Patrícia C. T. Gonçalves y João Manuel R. S. Tavares
  • Interfaces for Special User Needs de jue wang y nan Yan
  • Augmented and Virtual Reality de Kenji Terabayashi, Natsuki Miyata y Jun Ota
  • Semantic Web and Knowledge Management de Christos Fidas, Manolis Maragoudakis y Nikolaos Avouris
  • Usability Reports: Internationalization I18n y Shortcuts de Mónica Vázquez-Goyarzu, Martin Gonzalez-Rodriguez, Carlos Tejo-Alonso y José R. Bobes
Todos ellos descargables en PDF.

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

AKS: Accessibility Kit for 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! ;)

jueves, marzo 27, 2008

Pogo: Nuevo Navegador en 3D

Pogo: Welcome to the Pogo Limited Beta

La hegomonía de Internet Explorer definitivamente se va a acabar. La variedad de navegadores es cada día más amplia y para la muestra un botón: el nuevo navegador Pogo.

Desafortunadamente está en una Beta cerrada pero puedes dejar tu correo para que en un futuro próximo puedas acceder a él.

¿Características?
La novedad es que ofrece una interfaz en 3D, al igual que el SpaceTime y que útiliza el motor de Firefox (por lo que esperamos que intente trabajar bajo los estándares Web).

¿Contras?
Sólo funciona en Windows, incluye publicidad y sólo se puede utilizar el buscador de Google y el de AT&T.

¿Quieres más información?
Nos toca esperar a que liberen el Beta.

Actualización: Aunque no está disponible para descarga, en el siguiente video podemos ver un Demo del Pogo:


Gracias a Genbeta.

miércoles, marzo 26, 2008

Opera y WebKit ya pasan el Acid3 Test

Opera Desktop Team

En la carrera de los navegadores por pasar el Acid Test 3 ya hay un ganador: Opera.

Gracias a un comentario anónimo que me hicieron y a CSS3.info, nos damos cuenta que Opera sobrepasó a Safari, quien estuvo mostrando muchos avances en este test en los últimos días y en su última versión había alcanzado un 96% del exigente test.

Felicitaciones a este excelente navegador, que siempre ha sido uno de los mejores, y sólo nos resta esperar que la competencia siga sus pasos.

Actualización: Esta es una carrera de no acabar. Nos acaba de informar Anieto2k que también WebKit (el motor de Safari) acaba de pasar también esta prueba. Sin embargo también nos informa que esto no es del todo cierto. Opera tiene un bug que lo deja en 99/100 y el descargable de Webkit está en 98/100.

Actualización 2: Esto es un tira y afloje: Aunque Anieto2K dice que aún ninguno de los navegadores pasan realmente el Acid3 Test, ellos dicen que si. Aquí pongo el enlace a la última noticia: Webkit ya puntúa el 100% en el test ACID3, enlace que me enviaron Edgar Rivera y José A. Betancur. ¡Gracias!

A favor tiene el WebKit que el test lo pasaron con una versión que ya se puede descargar, mientras que el Opera es una versión de desarrollo que aún no está disponible al público.

Actualización 3: Nuevamente aNieto2k nos informa que los chicos de Opera han publicado una versión de desarrollo, unicamente para Windows y para Linux del motor de render de Opera. Con esta versión vemos como el Acid3 Test ya no da tanto miedo.

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:
Captura con IE6

IE 7:
Captura con IE7

IE 8:
Captura con IE8

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.

martes, marzo 25, 2008

Todo sobre los Microformatos

microformats

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

Fireworks CS3

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.



lunes, marzo 24, 2008

960: Un Nuevo Framework de CSS

960 Grid System: Sketch Design Code

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

sábado, marzo 22, 2008

Cocktail Cadius Colombia



Los Cocktails Cadius consisten en una reunión informal, el primer jueves de cada mes a las 8:30, entre profesionales e interesados en arquitectura de información, usabilidad y diseño de interacción, para tomar algo y conocerse mejor.

Actualmente se realizan en varias ciudades de España, en Buenos Aires (Argentina) y Santiago de Chile. ¡Y ha llegado la hora de hacerlo en Colombia!

Gracias a Usarte.org (la Comunidad Colombiana de Usabilidad), se está gestando el grupo de Cocktails Cadius Colombia.

La ciudad que encabeza la invitación es Bogotá. Así que si estás en la capital te invitamos a unirte a la comunidad y hacer realidad nuestro Primer Cocktail Cadius Colombia (Puedes contactar a Mario Carvajal para más detalles en esta ciudad).

Igualmente esta es una invitación para quienes estén en Medellín (mi ciudad) para realizarlo en un futuro próximo.

He aquí algunas fotos de los Cocktails realizados en todas las ciudades participantes.

Evaluación de Accesibilidad con WAVE

Advanced Web Accesibility Evaluation with WAVE

Esta es la presentación Advanced Web Accesibility Evaluation with WAVE que utilizó WebAIM para presentar la versión más reciente de su herramienta WAVE.

La presentación se llevó a cabo en el CSUN 2008 (Technology & Persons with Disabilities Conference) y en ella presentan rápidamente todas las características de esta excelente herramienta de evaluación de Accesibilidad Web.

Si aún no has trabajado con el WAVE seguro te resultarán interesantes estos slides.

Gracias a WAVE Blog.

lunes, marzo 17, 2008

Cruzando la Brecha Diseñador - Usuario

Bridging The Designer-User Gap

Soy muy recurrente al mencionar que los diseñadores no son los más adecuados en diseñar una Web al 100%. Situación que vemos muy a menudo en Colombia.

Precisamente hoy Jakob Nielsen en su artículo Cruzando la Brecha Diseñador - Usuario [en] comienza con:

Una de las principales reglas de la usabilidad es que "los diseñadores no son usuarios". Esta idea es tan importante como "los vice presidentes no son usuarios" y "los usuarios no son diseñadores" (así que no los escuches, obsérvalos).

Te recuerdo que hace un tiempo igual lo dijo Steve Krug: Los diseñadores tienden a pensar que a la mayoría de la gente le gustan los sitios que sean visualmente interesantes porque precisamente a ellos les gustan los sitios que son visualmente interesantes.

¿Para quién diseñas tus sitios? ¿Para diseñadores?

Usabilidad y Simplicidad

Típico Producto de Apple... Uno de Google... La APP de tu empresa...

Típico Producto de Apple... Uno de Google... La APP de tu empresa...

Visto en: Recursos Flash.

Wireframes, Blueprints, Prototipos, Storyboards, Mock Ups, Diagramas de contenido…



¿Qué es un Wireframe? Es una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.

¿Cuándo usarlos? ¿Qué ventajas tienen? ¿Qué información deben contener? ¿Cómo se hacen?

Todas éstas y muchas más preguntas en la Nueva Guía sobre Wireframes. ¡De lectura obligatoria! Gracias a Olga Carreras.

jueves, marzo 13, 2008

The Form Garden

The Form Assembly 2.0

The Form Garden es una excelente recopilación de estilos (CSS) para formularios, al mejor estilo de CSS Zen Garden.

Un gran recurso para inspiración, estudio y reutilización, ya que, al igual que en CSS Zen Garden, todas las hojas de estilo están disponibles para su descarga.

Si te animas, también puedes crear tu propio diseño y compartirlo en la creciente colección.

Este es un producto gratuito de Form Assembly, servicio online de creación y administración de formularios, encuestas, registros...

Gracias a Leandono´s Blog.

lunes, marzo 10, 2008

Un Largo Camino para los Estándares Web



Muy interesante y a la vez decepcionante los resultados de la revisión que hicieron en kabytes: tomaron los 100 sitios más populares de Alexa y los revisaron contra el validador de la W3C.

¿El resultado? Sólo el 11% de ellos validaba. ¡Muy triste!

Más información en la página de kabytes.

domingo, marzo 09, 2008

WAVE Toolbar

WAVE Toolbar

En el mes y medio que lleva la nueva versión WAVE 4.0 beta, ya se han realizado más de 100.000 reportes de accesibilidad Web.

Y ahora, para complementar esta magnífica herramienta, han lanzado una nueva: la WAVE toolbar para Firefox. Esta toolbar te permitirá realizar evaluaciones de accesibilidad Web directamente en tu navegador, lo cual te dará una mayor seguridad, la habilidad de evaluar páginas protegidas o de Intranet, y evaluar contenido creado dinámicamente.

Así que he aquí una herramienta más para potenciar nuestro Firefox.

Gracias a WebAIM Blog.

Nueva Campaña del WaSP

Advertencia: La Web Cambia Rápido

El Street Team del WaSP lanza su primer proyecto en comunidad: separadores que puedes colocar en librerías, escuelas y tiendas de libros para ayudarle a los lectores a saber que ese material está desactualizado.

¿Cuántos libros desactualizados de diseño y desarrollo Web están escondidos en tu librería, escuela o colegio, esperando a corromper una mente inocente? ¿Quieres ayudarnos a advertir a aquellos ingenúos contra ese peligroso material mientras que las librerías actualizan sus estantes? Únete al Street Team del WaSP descargando e imprimiendo estos separadores (PDF en Inglés [151K] - PDF en Español [153K]). Luego los colocas en los libros desactualizados que veas que son especialmente dañinos.

¡Además han creado un grupo en Flickr para que coloques las fotos de los libros que has encontrado y señalado!

¿Cómo identificas un libro desactualizado? Porque:
  • Recomienda el uso de tablas para diagramar (en lugar de CSS).
  • Enseña un mal y feo (X)HTML (en lugar de uno semántico).
  • No le importa crear sitios inaccesibles (en lugar de asegurarse que todo su contenido esté disponible para personas con discapacidades).
  • Crea páginas que sólo que se pueden navegar con Internet Explorer (en lugar de trabajar con los estándares Web y que se pueda ver en cualquier navegador)
¡Y ten cuidado!
Aunque muchos de estos libros necesitan sacarse de circulación y ser reemplazados por buenos libros, ese no es tu trabajo. Así que no intentes dañarlos ni destruirlos. Trátalos como reliquias de un museo. Recuerda que las librerías, además de proveer acceso libre al conocimiento, también están encargadas de mantener la historia. Lo que queremos hacer es mover estas reliquias para la sección de archivo, tu sabes, cerca de la sección de "la tierra es plana" y "pluto es un planeta".

¡Ah! Y no olvides pasar por la sección de Buenos Libros para que tu también actualices tu biblioteca.

miércoles, marzo 05, 2008

Descarga ya Internet Explorer 8

Windows Internet Explorer 8

Ayer les hablaba sobre el nuevo Internet Explorer 8.0 cuando hoy me encuentro que ya está disponible su versión Beta.

Ya en Genbeta hicieron la respectiva reseña, así que allí puedes enterarte de sus novedades.

¿Interesado en probarlo? Puedes hacerlo desde aquí.

Actualización: Intenté bajar de la página de Microsoft las Betas para Windows XP SP2 y Windows Server 2003 SP2 y miren el mensajito: We’re sorry, but we were unable to service your request. You may wish to choose from the links below for information about Microsoft products and services. ¡Ups!

Actualización 2: Ya Andrés Nieto nos da sus primeras impresiones del mismo. Además nos cuenta que la nueva versión del Developer Toolbar para Internet Explorer 8 está impresionante... impresionantemente parecida al Firebug de Firebox.

martes, marzo 04, 2008

IE8 Soportando los Estándares Web

Welcome to Windows Internet Explorer 8

La noticia que está dando que hablar a todos los blogs de desarrollo web: Microsoft ha decidido que la próxima versión de su terrible navegador, aka Interet Explorer, soportará los Estándares Web por defecto.

Quienes no lo sepan, había un gran debate porque esta nueva versión seguiría comportándose como un IE7 por defecto. Así que quienes trabajan con todos los Estándares Web deberían ingresar un código especial para que IE8 se comportara como debería: a esto se le llamó el modo super estandar.

Como apunta Andrés Nieto: Al parece Microsoft quiere dar un paso al frente y apostar por los estandares web, haciendo que la versión super estandar sea la opción por defecto del navegador. Algo que los desarrolladores comenzamos a soñar desde que aparecieron las noticias de un modo más estricto.

Les cuento que sería el fin de todas nuestras penas con este Navegador... Así que esperemos... ¿Será cierta tanta dicha?

lunes, marzo 03, 2008

Relanzamiento de usarte.org

usarte.org: Comunidad Colombiana de Usabilidad

usarte.org, la excelente iniciativa de Natalia Vivas cada día toma mejor forma.

El año pasado conocimos esta comunidad como el blog de nuestra Comunidad Colombiana de Usabilidad, pero ahora, gracias a una nueva plataforma, que cuidadosamente ha configurado Natalia, ¡TENEMOS UNA COMUNIDAD DE VERDAD!

Así que si eres Colombiano ya es hora de que te unas a nuestra pequeña, pero creciente, Comunidad Colombiana de Usabilidad. Al momento somos 52 los miembros, ubicados en todo el país, pero con seguridad faltas tú.

Esta es nuestra oportunidad de agruparnos y trabajar más unidos por proyectos tan interesantes como las Décimas Jornadas de SIDAR, que se realizarán en nuestro país.

Así que anímate, únete, participa de nuestro blog, suscríbete al RSS del mismo...

¿Y sabes? Ya tengo mi primera propuesta: Organicemos nuestros Cocktails Cadius Colombia. ¿Quién se anima para que nos reunamos cada mes y hablemos sobre Usabilidad, Arquitectura de la Información, Experiencia de Usuario...? Este es el grupo para los interesados...

domingo, marzo 02, 2008

Adiós WebXACT - Bobby, Hola Otros Validadores

Watchfire

Acabo de enterarme de una noticia triste: Nos quedamos sin el validador de accesibilidad WebXACT de Watchfire, anteriormente conocido como Bobby. Todo debido a que IBM compró a la compañía. En el sitio del validador explican la situación... que dicen es temporal.

Y hablando de validadores te invito a revisar esta buena lista que han recopilado en el blog de Virtual Hosting con 25 herramientas para evaluar la accesibilidad de tu sitio Web: Test Me: 25 Freebie Website Accessibility Checkers, que casualmente comienza con el desaparecido Watchfire WebXACT.

Gracias a WebAIM Newsletter.

¿La Mejor Librería de JavaScript?

DOMAssistant - jQuery

Recuerda que además del HTML y las CSS tenemos el JavaScript, quien es el encargado del comportamiento en una página Web, de acuerdo a los Estándares Web.

Yo no soy experto en Java Script (sé lo necesario como para hacer una sencilla validación en un formulario) y nunca me había sentido atraído por las tan mencionadas librerías de JavaScript. Y eso que desde hace mucho había oido hablar de Prototype y desde hace un tiempo para acá de jQuery.

Hace tan sólo 2 meses decidí probar con esta última librería y desde aquel momento me estoy preguntando: ¿Por qué no la probé antes? ¡jQuery me encanta! Como ellos mismos se promocionan: ¡Programa menos, haz más! (Mi tradución a "The Write Less, Do More, JavaScript Library").

Me gusta simplemente porque:
  • Permite programar rápida y fácilmente.
  • Está llena de grandiosos efectos (que bien utilizados con seguridad mejoran la experiencia de usuario).
  • Encuentras gran cantidad de programas ya listos llamados Plugins.
  • Puedes programar AJAX con ella (aunque esto no lo he probado).
  • TODO LO LOGRAS MEDIANTE UN JAVASCRIPT NO INVASIVO.
Ahora. Mi recomendación por esta librería es totalmente parcializada: No soy experto en JavaScript, no he utilizado ninguna otra librería y, según pruebas de velocidad de varias de ellas: jQuery es una de las más lentas.

De acuerdo a este test DOMAssistant es lo más rápido que hay, y detrás (y bien detrás) le siguen Prototype y Mootools.

Pero este test de velocidad, para mi, no es un impedimento para continuar trabajando con jQuery, toda vez que:
  • Si miras la prueba contiene una gran cantidad de tests que es improbable usarlos todos en una misma página.
  • La diferencia en velocidades está dada en ms, que creo son milisegundos. Ningún visitante se te va a quejar porque tu script se demora 100 milisegundos más.
Así que mi recomendación aún sigue siendo jQuery. ¡Mira que fácil es!

Claro que si te interesa y trabajas mucho con el DOM, deberías estar pendiente de la librería DOMAssistant, de la cual se ha estado hablando en varios blogs especializados.

¡Ups! Me acabo de dar cuenta que este es mi primer post sobre JavaScript en el blog. Que tal que aquí se hablara de los Estándares Web :P

Correcciones a la WCAG

WCAG Samurai

En manos del grupo WCAG Samurai, acaban de publicar unas correcciones y extensiones a las Directrices de Accesibilidad del Contenido Web [en] (Antes de leerlo deberías pasar por la introducción [en] que escribieron a este documento).

Sí! Correcciones a las tan conocidas y mencionadas WCAG (En inglés - En español).

Desde mayo del 2006, cuando publicaron el artículo To Hell with WCAG 2 este grupo de desarrolladores, encabezados por Joe Clark, el mismo del libro Building Accessible Websites, han trabajado en estas correcciones, debido a que no estaban muy contentos con el camino que tomó la W3C para crear las WCAG 2.

¡Lectura recomendable si trabajas con la WCAG y la Accesibilidad Web!

Gracias a la lista Web Design Update.

sábado, marzo 01, 2008

Capire: Edición Marzo 2008

Capire: Revista de Estrategia e Interacción

Comenzamos el día con la lectura de Capire: Revista de Estrategia e Interacción, quienes mes a mes nos traen información muy interesante.

Para esa edición me han invitado a escribir un artículo, el cual espero que disfruten y me comenten.

El listado de todos los artículos: