Ubiquity, el mash-up final para Firefox

Ubiquity Project Logo

Hay programas como Launchy para Windows o funciones el “Ejecutar” de mi Gnome, que abren menús inteligentes para ejecutar programas de los menús de aplicaciones o abrir marcadores que son para mi necesarios y casi imprescindibles en el día a día. No me gusta tener que ir de menú en menú acordándome de dónde estaba tal programa. Simplemente lanzas el atajo rápido, se abre la ventana tecleas cómo empieza, y que el entorno de escritorio haga el resto.

Uno es siempre más rápido tecleando que usando el ratón y buscando botones. En Firefox, para buscar o moverme a la barra de direcciones siempre procuro ir vía atajo de teclado y ahora con el sistema de barra de direcciones inteligente de Firefox 3, basta con empezar a teclear el título de la página o alguna etiqueta asociada a un marcador para que el navegador haga el resto.

Buscando en Google con Ubiquity para Firefox

Ayer la gente de los laboratorio de Mozilla presentaron su siguiente propuesta, Ubiquity. La idea de ellos es hacer el navegador centrado en el usuario y no en el sitio web. Se basan en la premisa de que si estás por ejemplo escribiendo un correo y quieres consultar algo para añadirlo, no deberías tener que cambiar de pestaña o ventana, deberías poder lanzar la consulta e insertar el resultado en el correo.

Continue reading

Last.fm beta sneak peak

Last.fm beta

De un vistazo, las novedades que propone la gente de Last.fm para su siguiente versión de su excelente red social musical.

De las novedades que introducen, a parte del completo cambio de diseño y esquema de colores, me gustan bastante las opciones de poder crear listas de reproducción personalizables, a parte de la ya existente lista personal con las canciones que quieras. Además, poder eliminar canciones que has reproducido o añadido a la lista de favoritas a posteriori es un acierto. Esta opción ya se podía hacer desde el reproductor/agente descargable para el ordenador, pero no se podía hacer desde la propia web.

Esperemos que no tarden mucho en terminar el rediseño, aunque por lo que se ve aún les queda mucho por hacer, sobre todo cuando tienen secciones completas aún sin mostrar. En el grupo de probadores beta de last.fm se puede consultar el progreso.

Aprovechando la característica de galerías de WordPress, ahí van unos pantallazos. Haciendo clic en cada uno se puede ver en grande

Cobertura digital del recuento de un vistazo

google_9m2008.png

Yo personalmente creo que la mejor manera para seguir los recuentos es directamente la web del Ministerio del Interior habilitada al efecto, con versión para PDA/móvil incluida. Rápidamente tienes el resultado del escrutinio, comparación con las anteriores y separación por circunscripciones. Además de este “minuto y resultado rápido”, este año, Google ha montado un pequeño mash-up de los datos del Ministerio y con sus Google Maps ha montado un mapa de resultados bastante detallado y completo, aunque

Pero si quieres algo más, es decir, las declaraciones y seguimientos de los partidos y animales del hábitat político, toca ir a visitar webs o sintonizar emisoras de radio. De una pasada rápida, unos pantallazos de las webs durante el recuento de votos. Más de uno debería revisar el diseño de sus contenidos.

  • abc_9m2008.png
  • cadenaser_9m2008.png
  • elmundo_9m2008.png
  • elpais_9m2008.png
  • elplural_9m2008.png
  • larazon_9m2008.png
  • ld_9m2008.png
  • publico_9m2008.png

Me ha parecido interesante la manera de dar los datos de El Mundo, usando flash y actualizando los datos en segundo plano, sin recurrir a la recarga de toda la página, aunque como pega tiene que necesites flash instalado. ¿Un mal menor?

Por otro lado, la distribución usada en Público me ha gustado por la sencillez de la presentación, pero como pega diría que no se visualiza bien en mi Firefox en Ubuntu. ¿Otro Mal menor?

Otra distribución sencilla y sin abundar en gráficos ha sido la escogida por Prisa para El País o la cadena SER, listado de resultados en forma de tabla casi calcada de la web del Ministerio del Interior titular inferior y vídeo a la derecha. Eficaz y sencillo

Aunque no me guste el diario, la portada de ABC es la que más me ha gustado: muy clara y directa, bien ordenados los contenidos y también usando flash para los arcos y el ya habitual vídeo incrustado. Muy parecida a la de El Pais, pero un poco más estilizada.

En el apartado de el horror del diseño, Libertad Digital, El Plural o La Razón deberían replantearse un poco el diseño de contenidos. De entrada los colores de los dos primeros no invitan a la tranquilidad mientras buscas noticias y el del último, bueno… podría ser peor, podría ser El Imparcial.

RAE 2.0 no es Guay-A

Por todos lados hoy se comenta que la RAE ha lavado la imagen a su web y ha empezado a cumplir estándares como toda web de organismo público debe hacer. Lo divertido del caso es que pese a decir que cumple con el estándar de accesibilidad WAI-A, la realidad es bien distinta.

El servicio automatizado de verificación de HiSoftware Cynthia Says™ dice que la página no pasa las pruebas automatizadas, así que difícilmente va a pasar los manuales.

Mirando un poco la página uno ve directamente el primer fallo: usan tablas para distribuir el contenido. Espero que IBM no les haya cobrado mucho por la gracia.

No cumplimos los estándares pero perdemos el culo por poner los iconillos.. Por lo menos los de HTML y CSS pasan.

Internet Explorer, CSS y fondos PNG transparentes

Tras ver cómo se ve el diseño del blog en Internet Explorer y acordarme de las políticas de los chicos de Redmond en cuanto a compatibilidad con los estándares del W3C me he puesto a sacar el libro de recetas y a resolver el entuerto. Por fortuna sólo era problema de los fondos, la distribución de contenidos se ve bien en Explorer.

El problema con Internet Explorer es que no soporta directamente el formato gráfico PNG con canal alfa de transparencia, que hace que en navegadores de verdad se muestren bonitas transparencias. Sin embargo existen varios trucos para parchear el problema. Para ello hay que recurrir a los filtros de DirectX que se pueden llamar vía CSS. Si pongamos que tenemos por ejemplo un elemento con un fondo con una imagen PNG de la forma siguiente:

[css]

#header {
/** (..) **/
border: 1px solid #0c0c0c;
background-image: url(“/images/headerbck2.png”);
background-repeat: repeat;
/** (..) **/
}[/css]

En Internet Explorer lo que se verá es la imagen con un color grisáceo en vez de la transparencia. La chapuza al canto consiste en hacer lo siguiente en el CSS:

[css]

#header {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/images/headerbck2.png’, sizingMethod=’scale’);
}

[/css]

Es importante añadir el sizingMethod=’scale’ porque de lo contrario el elemento se redimensionará al tamaño de la imagen y si ésta es de 1×1 píxeles, como es el caso, desaparecerá el componente que queríamos apañar. Ahora lo que ocurre es que la chapuza sienta mal a otros navegadores. La solución pasa por tener una hoja de estilos CSS únicamente con los arreglos que queramos hacer para Explorer y cargarla después de cargar la hoja de estilos general. Para no andar con complicadas operaciones de lado de servidor, bastará con incluir en la cabecera del documento HTML lo siguiente:

[html]


[/html]

Además, seguramente tendremos diferencias entre Explorer 6.x y Explorer 7.x -aún beta-, podemos ser más selectivos. De esta manera, el fichero ie.css puede contener parches adicionales para el aspecto del sitio para que se vea con el explorador de Microsoft.

Finalmente, para hacer que los PNG se muestren con su canal alfa existe un truco más que es filtrar todas las imágenes PNG del documento. Para usar esta magia lo que hay que hacer es incluir un script en JavaScript y añadir al CSS para Internet Explorer la propiedad de aplicar un filtro basado en una función JavaScript. Con ello, en el fichero HTML hay que añadir la carga del script:

[html]


[/html]

Y para el CSS:

[css]

img {
filter:expression(addPngImage(this));
}

[/css]

La función addPngImage se define en el script ie.js.

Todo esto tiene un coste: todos los elementos transformados se van a poner por delante, lo que se traduce en que los enlaces que estén contenidos dentro de estos elementos se van a perder. Lo que toca entonces es ponerse a jugar con la propiedad de CSS z-index. Los enlaces y sus contenedores deben tener siempre un z-index mayor que los objetos transformados. Y no siempre es posible resolverlo. No obstante, con poco esfuerzo se logra tener un aspecto decente es Explorer sin sacrificar por ello todas las posibilidades del CSS. Un ejemplo completo lo tenéis en la portada de este mismo sitio web. El código de estilo correspondiente lo podéis ver aquí y los scripts en JavaScript aquí.

La solución propuesta la he logrado a partir de la información contenida en:

Esta chapuza hace que más o menos se vea todo medianamente bien en el Internet Explorer, aunque he tenido que sacrificar el fondo transparente tan chulo que sale con el resto de navegadores. La solución: cambia a otro navegador civilizado.