Webmaster Libre

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

No hace mucho, mientras hablaba de un parón de feedburner, os dejé saber de mis recelos hacia el modelo de negocio del “mash-up”, esa total dependencia de proveedores, ese tener que aprender un API nuevo para cada uno…

Uno de mis principales argumentos siempre ha sido el coste de migrar un servicio de un proveedor a otro, pongamos por ejemplo una aplicación que emplee Google Maps para hacerla compatible con Yahoo Maps. Pero, al menos en lo que respecta a los mapas, parece que mi problema toca a su fin.

Mapstraction nos provee de un API común con el que acceder a diversos servicios de mapas, así si mañana añaden una característica que nos interesa en otro proveedor - por ejemplo - podremos hacer el cambio sin problemas.

Actualmente, con Mapstraction accederemos a los datos proveidos por:

• Google
• Yahoo
• Microsoft Live Earth
• OpenLayers
• MapQuest
• MultiMap
• …

En el futuro tienen planes de integrar otros sistemas como Open Street Maps.

Una de las cosas más interesantes, para mi al menos, de Mapstraction es su uso de los microformatos adr y geo (empleados para indicar direcciones y coordenadas geográficas respectivamente).

Además, entre los trabajos basados en Mapstraction, encontramos GeoPress un plugin para WordPress y Movable Type que nos facilitará la tarea de insertar localizaciones (direcciones, coordenadas) y mapas en nuestros posts.

Mapstraction: http://www.mapstraction.com/

Via Web Resources Depot

Hace ya tiempo os comentaba la existencia de unos interesantes iconos a los que podíamos cambiar el aspecto sólo con CSS, el truco era simple: una imagen transparente y un fondo de color.

Hoy me encuentro con esta idea aplicada a un icono de RSS, mejor explicada y con ejemplos: How to make RSS icons in every color with just an image

El truco es el mismo, una imagen semi-transparente y un fondo de color. En este caso, la imagen que se superpone también tiene dibujados los bordes redondeados, para que el efecto sea total.

Sé que probablemente andar jugando con los colorines de un icono estandarizado como el del RSS no sea una gran idea (o si, quien sabe) pero obviamente la técnica es válida para otras situaciones menos controvertidas.

Es cierto, hay demasiadas alternativas a Lightbox como para que siga mereciendo la pena pararse a comentarlas. No obstante, Fancybox es especialmente atractivo.

Fancybox funciona con la librería jQuery y es un pequeño script con el que mostrar nuestras imágenes o grupos de imágenes con estilo. Fancybox viene con algunos efectos interesantes, como las animaciones al cerrar las imágenes o el indicador de carga que se sitúa sobre la minuatura de la imagen en lugar de ocupar toda la pantalla.

Sin duda, su aspecto es cuidado y su implementación sencilla. Además, el CSS está completamente separado del javascript, lo que facilita su personalización

Fancybox: http://fancy.klade.lv/

Via WebAppers

Cada día es más difícil sorprender a nuestros usuarios pero ¿qué tal si nuestro sitio reflejase el tiempo metereológico del momento?

En CSS Tricks publican un artículo de David Walsh que nos explica de forma sencilla como conseguir este efecto con PHP y CSS.

Para ello David nos ayuda con un script que obtendrá la información metereológica mediante el API de Yahoo! Weather y lo traducirá a una clase CSS con la que lograremos el efecto interesante ¿no?

Using Weather Data to Change Your Websites Apperance through PHP and CSS

Bueno, ya os lo comentaba ayer, de un día para otro las imágenes volaron del Google Reader.
Hace un ratillo tuve un hueco para ponerme a ver qué pasaba, abrí el .htaccess (el mismo que yo borré, que regresó por generación espontánea) y me encontre con que los chicos (bots) de Dreamhost habían estado tocando algo, bajo las 3 líneas que introduce el WordPress había esto:

### Generated by Dreamhost. DO NOT modify!!! ###

RewriteEngine  on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?webmasterlibre.com/?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?aplicacionesyweb.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?buscador.webmasterlibre.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?senda91.com/.*$ [NC]

RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]

################################################

Parece que Dreamhost restauró una copia antigua de mi .htaccess, con el hotlinking totalmente restringido y sólo acceso a algunos de mis dominios (si fuese automáticamente generado, con políticas para permitir acceso a los dominios de mi cuenta tendría que haber un par mas). No entiendo cómo o por qué ha aparecido una copia tan antigua de mi .htaccess, si al menos hubiesen restaurado uno de este año…

La solución (a parte de restaurar desde mi copia de seguridad local) es permitir el acceso de Google Reader y Google Reader Mobile como hice en su momento con el resto de dominios autorizados, tan sencillo y obvio que me da hasta pena no haberme parado a mirarlo ayer.

### Generated by Dreamhost. DO NOT modify!!! ###

RewriteEngine  on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?webmasterlibre.com/?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?aplicacionesyweb.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?buscador.webmasterlibre.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?senda91.com/.*$ [NC]

# Permitir el acceso a Google Reader
RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/view/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/m/view/.*$ [NC]

RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]

################################################

De esta forma permito explícitamente al Google Reader acceder a los ficheros, no obstante me asalta una duda ¿alguien que use bloglines o un lector de escritorio que me cuente si ve imágenes o no?

Scott Klarr nos deleita con una recopilación de chuletas para PHP.

Además, como postre, nos deja chuletas para Smarty, WordPress, CakePHP y Drupal.

Via dZone

Hace ya mucho tiempo traduje un artículo que hablaba de las ventajas de utilizar “texto oculto” específico para usuarios de lectores de pantalla. Sin duda, cuando traducía aquello podía verle uso para ocultar los labels de los formularios, sustituir texto por imágenes y poco más. Pero hoy, gracias a la pequeña selección de enlaces de CSS Tricks he descubierto una forma inteligente de añadir una capa más de atención para los usuarios discapacitados.

David Walsh comparte con nosotros una gran idea. Incluye un párrafo de texto oculto con css al principio de la página, que contiene un mensaje para usuarios de lectores de pantalla, algo así (obviamente, traducción libre libre):

<p class="oculto">Bienvenido a mi sitio.
Este sitio ha sido creado para todo tipo de usuarios.
Por favor contacta conmigo en xx@xx.xx si encuentras alguna
dificultad al navegar por él.</p>

Por supuesto no sirve de nada si nuestra página es un infierno de tablas y código inaccesible pero es un pequeño detalle agradable y práctico al llamar la atención de todos aquellos usuarios que hayan encontrado dificultades para navegar el sitio, con lo que podremos mejorarlo.

Eso si, no abuséis del texto oculto. Puede llegar a ser molesto, en los comentarios del artículo de David alguien apunta a colocarlo tras un enlace de “saltar al contenido” para no forzar a nuestros usuarios a escuchar una y otra vez el “utilísimo aviso accesible” y me parece la solución ideal.
Ademas, aún albergo dudas sobre si Google podría penalizarte al ofrecer una versión “distinta” de la página para usuarios y arañas. Mi opinión es que no debería si no lo usamos para meter con calzador oncemil palabras clave pero visto lo puntilloso que se nos está volviendo…

Lo que lamento es que no cuento con el testimonio de ningún usuario de lectores de pantalla para saber de primera mano lo útil o molesto de un aviso de este tipo. Si conocéis alguien que pueda probar, por favor, compartid la experiencia.

Hace un mes aproximadamente conocíamos el nuevo API de Google para insertar gráficos en nuestros sitios web de forma sencilla. Con la euforia de la novedad creo que pocos reparamos en lo completamente “inaccesible” que era.

Chris Heilman miembro del grupo de Accesibilidad de Yahoo!, dio a conocer una técnica con la que generar gráficos de tarta a partir de una tabla y de esta forma permitir que los usuarios de navegadores convencionales vean la imagen y el resto accedan a una tabla de datos. Para ello simplemente tendremos que añadir un javascript al final del cuerpo de la página con lo que, de un tiro, mejoramos la accesibilidad de nuestros datos y conseguimos gráficos rápidos sin todo el lío del API.

Sin duda es un gran ejemplo de como todo puede ser más accesible con sólo proponérnoslo y sin implicar páginas especiales o molestias para los usuarios convencionales.

Supongo que jugando con los parámetros del API, las celdas de la tabla y el javascript podríamos basarnos en este ejemplo para crear otro tipo de gráficos. Si os animáis a hacer pruebas ¡no os olvidéis de contárnoslo!

Via Ajaxian

Hace algún tiempo os comentaba una pequeña librería Javascript con la que hacer que IE6 se comportase como su hermano mayor y mejor educado IE7.

Como Internet Explorer 7 ya está en la calle, listo y disponible para cualquier usuario de Windows, Dean ha decidido actualizar la librería e incluir algunos cambios interesantes:

• Ya no es una librería modular, ahora estará disponible en dos archivos: IE7.js e IE8.js
• En IE7.js encontraremos los arreglos que se han llevado a cabo en el auténtico Internet Explorer 7 mientras que el resto de mejoras están incluídas en IE8.js
• Ahora es más ligera y rápida
• No tiene dependencias con otros archivos salvo el archivo “blank.gif”
• Es posible enlazar directamente a los scripts en Google Code (hotlinking)

Sin duda es algo que todos los que nos pasamos el día peleando con Internet Explorer vamos a agradecer, sobre todo con la mejora en la velocidad ya que antes con algunos fixes se relentizaba toda la página un montón.

IE7.js en Google Code