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.

Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario

Comparto mi presentación Sitios Exitosos: De los Estándares Web a la Experiencia de Usuario. Si tu Universidad está interesada en presentar esta charla, se pueden comunicar conmigo que lo haré con mucho gusto (y obviamente sin costo alguno).

¡Comentarios más que bienvenidos!

| View | Upload your own

Día W3C en España: Standards for Business

El Día W3C en España es un evento que desde el año pasado se viene celebrando en Madrid, con el objetivo de facilitar un entorno en el que poder establecer un debate sobre el uso de los estándares web y poder conocer las experiencias de empresas y organismos a la hora de poner en funcionamiento los estándares.

La jornada de este año que lleva por título Standards for Business está estructurada en tres sesiones, orientadas a la aplicación de estándares en el mundo de la empresa. Bajo los epígrafes Web para todos, Web desde cualquier lugar y Web como base de conocimiento se cubrirar temáticas como accesibilidad, independencia de dispositivo, web móvil y web semántica, entre otros.

La participación como ponente está abierta a todo aquel que esté interesado en presentar sus ideas, proyectos, etc., relacionados con una o varias de estas temáticas.

La asistencia es gratuita pero el número de asistentes está limitado por el aforo de la sala, por lo que es imprescindible registrarse previamente.

Recuerda que más eventos en España y Latinoamérica los puedes encontrar siempre en nuestra Agenda de Eventos.

Tutoriales de Accesibilidad, HTML, CSS, JavaScript...

Gracias a la Newsletter Web Design Update me encuentro con estos tutoriales gratuitos:

• Learn Web Accessibility Tutorial
• Learn HTML Tutorial
• Learn CSS Tutorial
• Learn JavaScript Tutorial

Aunque, para aprender Estándares Web (XHTML, CSS y JavaScript) siempre recomiendo los Libros sobre Estándares Web, nunca sobran este tipo de recursos.

Adicionalmente puedes encontrar estos otros tutoriales:

• Learn Ajax Tutorial
• Learn ColdFusion Tutorial
• Learn PHP Tutorial
• Learn Schema Tutorial
• Learn SQL Tutorial
• Learn XML Tutorial
• Learn XSL-FO Tutorial
• Learn XSLT Tutorial
• Learn Silverlight Tutorial

Ahí tienes para que te entretengas un ratico...

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.

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.

Nueva Campaña del WaSP

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.

¿La Mejor Librería de JavaScript?

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

Project Gmail Grimace: Hagamos que Google nos Escuche

¿Recuerdan el Email Standards Project del cual les hable hace algunos meses?

Les cuento que acaban de lanzar una iniciativa llamada Project Gmail Grimace para llamar la atención de la gente de Google (específicamente los encargados de Gmail), para lograr que revisen las graves falencias que este cliente de correo electrónico tiene al desplegar correos con estilos y demás.

Participar es relativamente sencillo, se requiere tomarse una foto haciendo una mueca, inscribirse a Flickr para enviar su foto y finalmente agregarla al grupo creado para este fin. Revisa los detalles para participar.

También los Estándares Web los necesitamos en el correo: ¡Así que a hacer tu mejor mueca ya!

Gracias a Michael Müller.Net.

Actualización: Con algunas de las fotos que han recopilado se ha montado este buen video.

Actualización 2: ¡Ya Google ya escuchado! Por lo menos un ingeniero de gmail parece estar interesado en hacer mejoras. ¡En hora buena!

WebKit: Mejor Cada Día

Este es mi post número 200 (en algo más de 3 años) y coincide con dos temas del WebKit, uno de los mejores navegadores en cuando a Estándares Web se refiere.

¿Sabes qué es WebKit? Es el navegador sobre el cual está hecho Safari, navegador estrella en Mac que ahora está haciendo sus pinitos en Windows.

Ahora, la primera novedad es que este navegador ya pasa el Test de Selectores de CSS, prueba que hasta ahora sólo pasaban los navegadores Konqueror y Opera.

El pasar esta prueba garantiza una estable y completa implementación de este importante tema en las hojas de estilo: Selectores en CSS.

Como segunda novedad les cuento que ya hay otra versión del WebKit para Windows: Se trata del Spinneret, que se diferencia del Safari porque no necesita de las librerías de Apple.

Apenas está en desarrollo, así que por el momento nos toca contentarnos con algunas capturas de pantalla.

Gracias a CSS3.info y aNieto2k respectivamente.

El AcidTest 3 ya Está Aquí

Hace tan solo 16 días les mencionaba que faltaba poco para el Acid Test 3, el test que pone a prueba el cumplimiento de los estándares Web por parte de los navegadores, cuando me acabo de dar cuenta que ya está listo, aunque en modo review (que es como si estuviera listo).

El test fue desarrollado por Ian Hickson, empleado de Google, y ha sido publicado en un nuevo sitio: Acid Tests, creado especialmente para este proyecto de The Web Standards Project.

Allí encontraremos:

• El Acid 1, enfocado al famoso Modelo de Caja (Box Model) y que ya todo navegador debería pasar.
• El Acid 2, el cual cubre una gran variedad de características básicas de HTML y CSS. Prueba que ya pasan Opera y Safari y que pasarán Firefox e Internet Explorer en sus próximas versiones.
• Y el nuevo Acid 3, el cual cubre 100 pruebas con lo más recóndito del HTTP, HTML, CSS, ECMAScript, SVG y XML, todo a través de programación con el DOM, requerimiento crítico para cualquier aplicación Web. Prueba, que como veremos a continuación: ¡No pasa ningún navegador!

A continuación les presento las capturas de esta prueba en los navegadores que tengo en mi Windows XP:



Y si quieren ver cómo Firefox 3.0 es el ganador (aunque no absoluto), de esta prueba los invito a visitar Masio IT, donde publicaron más capturas.

Actualización: ¡Hay empate entre Firefox 3.0 y Opera 9.5 Beta en esta prueba! Ambos pasan 60 de las 100 pruebas. ¡Gracias a quienes comentaron!

Actualización 2: Andrés Nieto nos traé el estado actual del Acid3. Allí veremos que las versiones Beta de Safari (con 90%), Camino (con 70%) y Firefox (con 70%) están cada día mejor y mejor.

Gracias a CSS3.info.

Noticias desde la W3C... Ya viene el HTML5

Por estos días hay mucha actividad en la W3C. La noticia del día es que han publicado el primer borrador de HTML 5 y aunque faltan varios años para que la nueva versión del HTML sea un hecho, es bueno que conozcamos hacia dónde vamos. Pero claro, como a nosotros nos gustan son los resúmenes ejecutivos, los invito a que lean las principales diferencias entre HTML5 (el futuro) y HTML4 (el presente) y lo que ha sucedido desde el HTML 4 al día de hoy, de Andrés Nieto y Olga Carreras respectivamente.

Por otro lado, acaban de publicarse 3 borradores en la W3C que facilitan la comprensión de la relación entre las buenas prácticas en el diseño para dispositivos móviles (teléfonos celulares) y las Directrices de Accesibilidad para el Contenido Web. A saber:

• Web Content Accessibility and Mobile Web: Making a Web Site Accessible Both for People with Disabilities and for Mobile Devices
• Experiences Shared by People with Disabilities and by People Using Mobile Devices
• Relationship Between Mobile Web Best Practices 1.0 and Web Content Accessibility Guidelines

De los cuales me di cuenta gracias a Emmanuelle en la lista AccesoWeb y que igualmente comenta Alan Chuter en su blog Accesibilidad Web y Alan.

Por último les recuerdo que hoy es el día del Seminario Virtual de la W3C, de 15:00 a 18:00 (CET), en donde expertos de la W3C expondrán las últimas novedades desarrolladas dentro del Consorcio en ámbitos como la administración electrónica, el vídeo en la web, y la web móvil en países en desarrollo. La asistencia y participación es gratuita, cualquiera puede acceder a través de la plataforma ISABEL siguiendo las instrucciones de participación. El seminario será retransmitido en línea a través de Isabel Plaza. Consulta el programa del evento para más información.

Galería de Sitios de la W3C

Si trabajas con los estándares deberías estar acá: W3C Sites, una colección de sitios Web creados por diseñadores que trabajan con los Estándares de la W3C (más su respectivo directorio de sus diseñadores por países).

¡Si! Otro galería más de sitios hechos con los Estándares Web. Pero esta galería es la oficial de la W3C. Además, me gustó mucho que los diseñadores están categorizados por países, así que puedes conocer a tus compatriotas que trabajan con los estándares.

Por Colombia estamos 18 inscritos. Muy pocos comparados contra Estados Unidos con 831, Inglaterra que tiene 623, Alemania con 405, España con 180... Pero si vamos a ver somos muchos, comparados contra países que tienen sólo 1 o 2 diseñadores inscritos. Por latinoamérica destacan Brasil con 257 y Argentina 71.

Gracias a seraccesible.

XINU revisa tu Sitio

Si quieres tener un rápido pero muy completo informe sobre el posicionamiento y uso de estándares web de tu sitio no dudes en visitar esta excelente herramienta: Xinu Returns.com.

Te presenta información general sobre tu sitio como una evaluación del title, de las palabras claves, de la descripción, del tamaño del HTML, de los tags utilizados, de la validez de tu HTML, de los CSS y hasta del RSS.

Igualmente presenta tu ranking en Google, Technorati, Alexa y Dmoz, el número de páginas indexadas y de backlinks en Google y varios buscadores más, al igual que te informa del número de favoritos que eres en del.icio.us, digg, entre otros.

Gracias a ARTEgami.

Ya Viene el ACID3

Como muchos sabrán desde hace mucho tiempo existe el ACID2 Browser Test, el cual nos sirve de verificar si un navegador cumple con los Estándares Web.

Esta prueba tuvo bastante eco hace algunos días después de que Microsoft anunciara que IE8 ya pasa esta prueba, la cual no pasa Firefox 2 (aunque Firefox 3 si lo hará), pero que si pasan las últimas versiones de Opera y Safari.

La noticia de hoy es que ya están trabajando en el ACID3, el cual estará principalmente enfocado en ECMAScript y DOM. El test constará de 100 scripts, de los cuales 84 ya están definidos. Para los 16 restantes han hecho una invitación, en la cual puedes participar si eres un experto en JavaScript.

Validador de HTML5

El HTML 5.0 aún está como borrador y ya tenemos un validador para él: Validador de (X)HTML5 .

Gracias a UITest.com.

Purificador de HTML: HTML Purifier

He aquí la que parece una excelente herramienta para quienes trabajen en PHP: HTML Purifier.

Sus autores la promueven como:

• Segura: Remueve el código malicioso (XSS) de tus programas.
• Limpia: Te asegura un código que sigue los estándares Web ¿Te lo repito? ¿Te lo repito? ¿Te lo repito?
• Abierta: Está hecha bajo la filosofía Open Source.

Puedes descargarla para tus proyectos en PHP 5.0, como una aplicación aparte o simplemente guarda en tus favoritos este DEMO, el cual estará siempre en línea.

Gracias a Intenta.

Internet Explorer ya Sigue los Estándares Web

¿Cuál es la mayor queja contra Internet Explorer? Simplemente que no sigue los Estándares Web. Pero, aunque parece increible, ya lo hace y desde la versión 5 inclusive.

Esta maravilla, se puede lograr gracias a IE7-js, una librería de Javascript que logra que IE se comporte como un navegador acorde con los estándares. Corrige muchos de sus comportamientos y además hace funcionar correctamente los PNG transparentes bajo IE5 e IE6.

Es tan novedoso este JS que puede tanto actualizar IE5 y IE6 para ser compatibles con IE7 como actualizar los IE5, IE6 e IE7 con características avanzadas que se verán en IE8.

Personalmente he trabajado con la librería IEPNGFix v1.0, la cual permite tener PNGs con transparencias en IE 5.5/6.0. Pero si esta nueva librería, además de lograrlo en IE 5.0, hace que IE siga los Estándares Web, debería convertirse en el JS obligado para todos nuestros desarrollos Web.

Desafortunadamente, yo tengo instalado IE 7 y en el IE 6.0 de Multiple IEs no funcionan estas librerías.

Actualización: Volví a instalar los IE 5.5 e IE 6 de Multiple IEs y ya me funcionan los PNGs transparentes con IEPNGFix (antes no lo hacían en mi máquina). Sin embargo con la librería IE7-js NO me funcionan. No se si es por estos Multiple IEs.

¿Quién tiene un IE 6 "original" para que nos cuente si tanta maravilla es verdad?

Gracias a Intenta.

Diagramación con Hojas de Estilo (CSS)

Algo sobre lo que siempre se habla en los Estándares Web es la diagramación mediante Hojas de Estilo - CSS. Y este recurso que acabo de encontrar me cae como anillo al dedo, porque precisamente hace 2 días estuve revisando un sitio que están rediseñando y !oh sorpresa la mía cuando veo un sitio con un gran toque gráfico pero diagramado totalmente con tablas!

Y es que para diagramar con CSS no se necesita ser un experto. Tan sólo tienes que:

1. En lugar de acomodar tus secciones/columnas en TDs de tablas hazlas con DIVs.
2. Busca la diagramación que corresponda a tu diseño (Encabezado con 2 columnas, encabezado con 3 columnas...).
3. Descarga el layout y acomoda los anchos de tu diseño.
4. Y comienza a montar.

¡Ah! Ya te estarás preguntando: ¿Y dónde busco la diagramación que cuadre con mi diseño (Paso 2)? Fácil: En 22 Recursos para Diagramar Fácilmente con CSS.

Precisamente el primero es el que generalmente consulto: Layout Gala. Pero como verás hay muchos más recursos de donde bajar tu digramación en CSS.

Gracias a 22 sitios útiles para crear layouts en CSS.

Spry: El Framework para AJAX de Adobe

Los interesados en AJAX de seguro conocerán SPRY: la propuesta de Adobe para implementar AJAX en tu sitio Web.

¿Por qué se los quiero mencionar? Básicamente por dos cosas:

1. Me he dado cuenta que Adobe está trabajando con los estándares Web
2. Siempre han tenido muy en cuenta a los diseñadores, de tal manera, que la implementación resulte fácil para alguien no experto en programación.

Es claro que mientras los ingenieros usamos software del estilo de Microsoft Visual Studio, los diseñadores prefieren sin duda: Adobe Dreamweaver.

Ahora, ¿que Adobe está trabajando con los estándares Web? Pues así es como están promocionando este Framework: ¡AJAX para Todos!... Spry es un framework que facilita el rápido desarrollo de páginas con AJAX... Sin necesidad de ser un experto en JavaScript... Sin sacrificar tu interés en los estándares Web y tus buenas prácticas de desarrollo...

Los invito entonces a pegarle una ojeada al framework y a estos artículos que prometen mucho (además de los artículos hay una buena cantidad de ejemplos):

• Spry y los Estándares Web
• Mejora progresiva con Spry
• Separando la estructura del comportamiento - Spry no Invasivo
• Validando Spry

¿Quién ha trabajo este framework para que nos de sus impresiones?