Webmaster Libre

En nuestra ardua y ya larga lucha contra la maquetación con tablas, hemos sido muchos los que hemos descubierto las bondades del marcado semántico. Aún así todavía parece que no terminamos de comprender lo que realmente significa y cometemos errores de fondo.

Durante mucho tiempo se ha venido hablando de la versatilidad de las listas (ordenadas, desordenadas o de definición) para diversos menesteres como la creación de barras de menú e incluso hemos visto arriesgadas propuestas de estructuración de páginas mediante listas.

El problema es obvio, ¿una página web puede ser entendida en su totalidad como una lista? ¿Es realmente una lista, por ejemplo, el menú lateral (sidebar) de un blog?

En nuestro intento por renunciar a las tablas mientras mantenemos una estructura limpia sin elementos innecesarios hemos “pervertido” otro elemento para adaptarlo a nuestra conveniencia. Incluso hacemos experimentos y “evangelizamos” sobre las bondades de las listas sin pararnos a pensar lo que realmente significan.

El tema promete volverse controvertido, a fin de cuentas son muchos los “gurús” que nos sorprenden diariamente con aproximaciones realmente creativas basadas en listas, a pesar de que afrontan situaciones en las que otros elementos serían más adecuados.

Al final, la conclusión es la de siempre, debemos emplear el elemento más semántico a nuestra disposición o, en algunos casos, elementos neutros como los divs y spans que, a pesar de estar algo estigmatizados por su abuso, son elementos útiles para finalidades ajenas a la transmisión del contenido (véase, por ejemplo, para crear estructuras visuales).

Sin duda, el tema da para mucho, no sólo para leer si no para pensar y debatir; por eso os dejo unos cuantos artículos en inglés (lo siento, si hay interés podríamos traducir alguno) para profundizar un poco más en el tema y os invito a que aportéis vuestra opinión en los comentarios.

• List abuse or Best Practice
• Are lists becoming the new tables? (del que toma el título este humilde esbozo mio)
• On calendars, lists, tables and semantics
• Tables or Lists - The HTML Calendar Debacle

Si atendemos a los últimos movimientos de las grandes redes sociales y el mismo Google, el futuro de la red pasa por conceptos como Data Portability y Data Availability.

Uno de los pilares de esta ubicuidad de los datos y su total disponibilidad es la autentificación remota, ¿es normal que un usuario deba dar su contraseña a cualquier aplicación para poder acceder a los datos que almacena en otra? Realmente es muy práctico poder, por ejemplo, importar nuestra agenda de contactos en una red social para localizar a nuestros amigos pero ¿es necesario darle nuestros datos? O peor aun, ¿es seguro?

No hace falta ser demasiado paranoico para pararse a pensar en lo fiable de algunos sitios. Dar una contraseña es dar pleno acceso a nuestras cuentas, no sólo a los datos que queremos utilizar y debemos confiar en la buena fe de los desarrolladores y suponer que no almacenarán ni utilizarán nuestras claves.

OAuth nace para solventar este problema, proveyéndonos de un sistema universal con el que autorizar el acceso a determinados datos protegidos. El concepto es sencillo, imagina la red social de la que hablábamos antes. Te acabas de registrar y quieres encontrar a todos tus contactos. Para ello vas a importarlos desde tu cliente de correo web. En lugar de introducir tus datos de acceso en la página de la red social, esta te enviará a tu proveedor de correo donde serás tu mismo quien autorice a esa red social a acceder a los datos de contacto. Listo.

Para el usuario, como ves, el proceso es transparente y muy sencillo. Por detrás, estaremos generando un token que permitirá el acceso a determinados datos (sólo los contactos y no los correos, en este caso) y durante un tiempo determinado.

OAuth es un estándar abierto que añade una capa más de seguridad a los datos de nuestros usuarios, no obstante no viene a sustituir a otros sistemas de autenticación como OpenID, si no que se integra con ellos, y no puede sustituir a elementos de seguridad como los certificados SSL. Por supuesto, al ser abierto ya existen librerías para los principales lenguajes.

Puede que, hasta ahora, haya pasado bastante desapercibido a pesar de estar en uso en sitios tan populares como Ma.gnolia o Flickr. Ahora Myspace y Google parecen decididos a adoptarlo y con esto es de esperar que cada vez se extienda más su uso.

Hay algunas sutiles diferencias en los sitios web que los hacen más o menos usables. Una de ellas es, sin lugar a dudas, el resaltado de los enlaces cuando hacemos foco sobre ellos. Con esta pequeña pista visual ofrecemos a nuestros usuarios una forma simple de diferenciar un hipervínculo de cualquier otro tipo de texto formateado.

Por lo que se vé, Opera Mini hace un esfuerzo extra y resalta no uno si no todos los enlaces que apuntan al mismo lugar cuando hacemos foco sobre uno de ellos. Una pequeña pista que puede añadir un poco más de usabilidad a nuestros sitios. Todo esto lo digo gracias al artículo de Kilian Valkhov, que al comprobar lo práctico de esa interesante característica de Opera Mini, decidió emularla con jQuery y CSS.

La técnica consiste en crear un class .hover que emule completamente el aspecto de nuestra pseudo-clase :hover

a:hover,
a.hover { … }

Y luego, con la ayuda de jQuery detectamos los enlaces que comparten URL de destino y al hacer foco sobre uno de ellos aplicamos la clase .hover a los demás. Eso si, nos apoyamos en eventos de ratón y por tanto sólo es funcional con usuarios que usan uno y los que navegamos principalmente con el teclado nos quedamos sin usabilidad extra.

$("a").hover(
function() {$("[href="+$(this).attr("href")+"]").addClass("hover");},
function() {$("[href="+$(this).attr("href")+"]").removeClass("hover");}
);

Kilian además de explicarnos la técnica, muy sencillita, nos ha dejado una demo para que le echemos un vistazo.

Es una idea que me gusta pero me gustaría más si usase eventos como focus y blur para no depender de la disponibilidad del ratón. He hecho una prueba rapidita y me ha quedado un javascript algo más largo pero que funciona para navegación con teclado y con ratón. Estoy segura de que se puede mejorar pero aquí os lo dejo para que sirva de “inspiración”:

$(document).ready(function(){
$("a").focus(
function() {$("a[href="+$(this).attr("href")+"]").addClass("hover");});
$("a").blur(
function() {$("a[href="+$(this).attr("href")+"]").removeClass("hover");});
$("a").hover(
function() {$("a[href="+$(this).attr("href")+"]").addClass("hover");},
function() {$("a[href="+$(this).attr("href")+"]").removeClass("hover");});
});

Se aceptan sugerencias en los comentarios.

Mostrar gráficos accesibles es una tarea ardua, o cuanto menos pesada, por eso me ha encantado este plugin para jQuery.

Mediante fgCharting podremos convertir una tabla de datos convenientemente maquetada en un bonito gráfico.

Como ya sabéis, Internet Explorer y canvas no hacen buenas migas por lo que tendréis que utilizar algo como ExplorerCanvas para poderlo emplear en sitios en producción.

fgCharting: http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/

Via Web Resources Depot

Veo en Kriptópolis un enlace a una guía sobre las funciones criptográficas incluidas en PHP 5 y algunas otras accesibles mediante la instalación de paquetes y librerías externas: A Guide to Cryptography in PHP.

En ella aprenderemos, mediante simples ejemplos, el uso de funciones como md5(), crypt() y sha1(), incluídas en PHP 5 así como de otros paquetes como MCrypt, MHash, Crypt_Blowfish, Crypt_RSA, Crypt_ HMAC y Crypt_DiffieHellman.

Sin duda, una lectura instructiva sobre un tema tan importante como la seguridad.

Si hay algo que ha conseguido que PHP sea uno de los lenguajes predilectos de la red es, sin duda, la cantidad de material libre que podemos encontrar: CMS, librerías, scripts…

Seguramente por eso, para ayudarnos a conocer otras alternativas, ha nacido Open Source Rails.

Open Source Rails es un directorio dedicado a recopilar las mejores aplicaciones web libres creadas en Ruby on Rails.

Sigo pensando que la inicial dificultad para echar a andar cualquiera de estas aplicaciones va a seguir siendo un lastre para Ruby on Rails durante algún tiempo pero iniciativas como estas pueden darnos a conocer sus  auténticas posibilidades.

Open Source Rails: http://www.opensourcerails.com/

Via FeedMyApp

La mayoría de nosotros permitimos html en nuestros comentarios, no demasiadas etiquetas pero si las necesarias para dar estilo a un mensaje correctamente. Para los usuarios acostumbrados a trabajar con HTML es lo más normal del mundo pero, para el resto del mundo, no significa nada y se tienen que conformar con enviar los post así, tal cual.

Como muchos incorporamos en nuestros sitios la librería jQuery he pensado que os vendría bien MarkItUp, un script con el que convertir cualquier textarea en un completo editor.
MarkItUp es muy ligero y personalizable, no es otro de esos editores llenos de características inútiles.

Y, por supuesto, lo de los comentarios sólo es una sugerencia de uso, obviamente sirve para cualquier otro formulario.

MarkItUp: http://markitup.jaysalvat.com

Si queréis añadir un toque extra de estilo a vuestros sitios y mostrar una transición de color cuando el usuario pinche o pase sobre algún elemento de la página ahora podréis fácilmente con este script: Javascript color fading script

Se trata de un script muy ligero con el que podréis añadir transiciones de color que afecten al fondo, borde o color de texto de los elementos de vuestro sitio.

Podéis ver una demo en el sitio del autor

No sé vosotros pero yo odio a muerte los selectores de fecha de algunos sitios, especialmente los de las reservas de hoteles o aviones. Un desplegable para la ida, otro para la vuelta…

Como parece que no soy yo sola la que los odia, nace Timeframe, en palabras de su creador, Stephen Celis porque:

I’m just sick of multiple date pickers on the same page

El script, que trabaja sobre Prototype, nos permite seleccionar rangos de fechas de múltiples meses con un simple movimiento de arrastrar y soltar.

Como no podía ser menos, en ie6 se ve que da asco, en los navegadores decentes va de lujo, pero parece que pronto habrá mejoras en los estilos y la experiencia será agradable para todos.

Timeframe: http://stephencelis.com/projects/timeframe

Via Ajaxian

Los que estamos acostumbrados a operar con banca online hemos visto miles de veces estos teclados virtuales, presentados en pantalla, mediante los que introducir nuestros datos sólo con la ayuda del ratón. Este tipo de medidas pretenden asegurar aún más esas entradas de datos sensibles, evitando que queden registrados mediante un keylogger o facilitando al usuario un teclado en el idioma adecuado (ya que puede encontrarse en otro país con un teclado que no admite caracteres especiales o que el usuario desconoce como usar).

Si vuestras aplicaciones precisan este extra de seguridad no olvidéis probar Virtual Keyboard Interface, un script javascript con el que añadir facilmente un teclado virtual a nuestros campos de texto y textareas. Su uso es sencillísimo, llamamos al script y la hoja de estilos en el head y le damos class="keyboardInput" al input o textarea a la que queramos acoplar el teclado.

Virtual Keyboard Interface está disponible para múltiples idiomas, entre los que se incluye la distribución de teclado del Español de España (que desconozco si es muy diferente de las empleadas en Latinoamérica).

Virtual Keyboard Interface: http://www.greywyvern.com/code/js/keyboard.html

Via Web Resources Depot