El extraño caso de IE7 y los enlaces con rollover de fondo blanco y borde 0
photo credit: jeffwilcox
Reporto lo que parece un bug de IE7, por que en el resto de versiones de Internet Explorer parace que no se da el mismo error.
Y es que en IE7, y solo en IE7, cuando un enlace tiene el estilo border: 0, y el estado :hover contiene background-color: #FFF, no funciona dicho background-color.
Pero no funciona solo en el caso de que el color de fondo sea blanco. Si sustituimos #FFF o #FFFFFF por otro color, incluso cercano, como #FEFEFE, se ve perfectamente.
Ojo, si declaramos el border: 0 en un estilo reset del tipo “*{border:0}” estamos condenados.
Dejo un enlace y el código de ejemplo para comprobarlo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>El extraño caso de IE7 y los enlaces con rollover de fondo blanco y borde 0</title>
<style type="text/css">
body {
background-color:#999; }
a{
border: 0;
}
a:hover{
background-color: #FFF;
}
</style>
</head>
<body>
<a href="#">Enlace con border: 0 y color de fondo #FFF en el estado :hover. En IE7 no se verá el color de fondo al hacer rollover.</a>
</body>
</html>
Definir clases CSS concatenadas
El título del post es horrible, pero no quería poner “Concatenar clases CSS” por que no es lo mismo una cosa que otra.
En un elemento html se pueden declarar varias clases separándolas por espacios:
<a class="top current" href="#">subir</a>
De esta manera se pueden mezclar dos estilos:
a.top {color: blue;}
a.current {font-size: 2em;}
Pero también se puede definir otras reglas de estilo concatenado las dos clases:
a.top.current {color: green; font-size: 3em}
Útil tip para aparentemente callejones sin salida. 
Bookmarklets con jQuery
No voy a explicar que es un bookmarklet porque entiendo que este blog no es generalista.
Hace un tiempo hice algunas pruebas para crear bookmarklets cargando la librería jQuery para luego ejecutar alguna función aprovechando su versatilidad. Llegué incluso a meter toda la librería en una sola línea javascript. Pero estaba claro que la solución más práctica consistía en cargar la librería y luego ejecutar la función con las acciones.
Aprovechando la aparición de la utilidad online Sunday Morning que traduce textos mediante un marcador que precarga jQuery, he editado su propio script para que sirva a mis propositos.
javascript:void((function(){
// función para cargar archivos javascript
function load(type, src){
var s=document.createElement('script');
s.setAttribute('src',src);
s.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
};
// función que establece un tiempo de espera y luego ejecuta el script que se defina
function whenLoaded(callback){
if(typeof(window['jQuery']) != 'undefined'){
callback();
}else{
setTimeout(function(){whenLoaded(callback)},100);
}};
// se carga la librería jQuery desde las Apis de Google
load('src','http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js');
// se ejecuta el script después de un tiempo prudencial de carga
whenLoaded(function(){
// evitar conflictos con otras librerias, incluida la propia jQuery
var $jqbm = jQuery.noConflict();
// Aquí se pone lo que uno quiera en sintaxis jQuery
$jqbm('img').toggle('slow');
});
})());
Y todo esto en un link, que al pulsarlo alterna entre ocultar y mostrar las imágenes de la web activa.
Ocultar/mostrar imágenes en foto de prueba:
Arrastrando el enlace hasta la barra de marcadores de tu navegador, tendrás siempre a mano esta utilidad en cualquier página que estés viendo.
Modificando el código las posibilidades son muuuuchas.
Reciclando tecnologías obsoletas
Un buén amigo encontró un uso alternativo a lo que en su momento fué toda una revolución gráfica y animada.
Los usos analógicos de Google Maps
Un gran ejemplo de tecnología digital inversa.
Nos dejó Philip José Farmer
Creo que a Microsiervos se les pasó la perdida de este gran escritor de ciencia ficción. Falleció el 25 de febrero. En la Wikipedia hay mucha más información de la que yo pueda aportar.
Me acuerdo mucho de este autor por que disfruté mucho leyendo su serie más famosa, Mundo de río.
En uno de mis cumpleaños adolescentes me regalaron un libro de Philip José Farmer titulado “El oscuro designio” que resultó ser el tercer libro de una serie, así que me tocó gastarme los cuartos en comprar el primero y empezar por el principio.
Coincidió que empezaba un cursillo, independiente del colegio, llamado Técnicas de estudio Pascal, (la inteligencia no está reñida con la distracción, pensarían mis padres, pero hay que luchar contra la distracción, lógicamente). Y el caso es que la tutora de dicho curso nos preguntó si leíamos habituálmente y con qué libro o revista estábamos.
Y claro cuando me tocó a mi responder, sabiendo que mis lecturas no eran “normales”, y más cuando la tutora se jactaba de cargarse un libro diario (parte del curso trataba de métodos de lectura y comprensión rápida) pero en el que yo estaba ahora mismo ni lo abría oído ni sabría nada del autor, me encantó decir:
“A vuestros cuerpos dispersos”, de Philip José Farmer.
Era el primer libro de la serie. A grandes rasgos recuerdo que se desarrollaba en un planeta en donde todos los humanos de todas las épocas despertaron de repente al mismo tiempo, en pelota picada y a la orilla de un largo río que serpenteaba a todo lo largo y ancho de dicho planeta.
¡Qué momentos, Philip!
Sacrifico Adsense y actualizo WordPress
Hace unos meses instalé un theme que incluía espacios Adsense por doquier, para ver si al menos podía sacar para pagar el hosting, pero no.
Google te pone la miel en los labios el primer mes, 30$, y luego va bajando estrepitosamente cada mes hasta el nivel actual, 1$ y medio.
Ya sé que debería postear más, pero es lo que hay.
Y así aprovecho y actualizo la versión del blog y cambio el theme.
¡Casi todo son ventajas!
La dificultad de un buén Diseño de Interacción
photo credit: Gabriel Agu
Si a mí me pasa, que ya tengo callos de meter el mouse por las webs, no quiero ni pensar la de frustraciones que tienen que soportar los usuarios “normales”.
Hay miles de webs, aplicaciones 2.0, con formularios estupendos, que les falta un empujoncito nada mas, para que el uso de su sitio sea una experiencia cuasi religiosa.
Y me refiero a páginas que muestran formularios de contacto o registro junto a enlaces a otras secciones o apartados de la misma web.
Si estás completando un formulario se debería evitar salir de la página sin un aviso de que vas a perder toda la información que ya has escrito. ¿No?
Pues me acaba de pasar en facebook, que añadiendo un texto en el muro de un amigo, y antes de darle a ‘enviar’ he clickado sobre un enlace que me ha sacado de la página, y el volver atrás no ha servido para recuperar los textos medio escritos. Arggg¡¡¡¡
Se me ocurre que un plugin de jQuery podría resolver estas situaciones muy fácilmente. Habrá que ponerse manos a la obra.
Actualización de hoy mismo:
XDDD. Cristalab acaba de publicar un árticulo con un aporte complementario a la lucha contra los desastres en los formularios: Anular ENTER en formularios con JQuery.
Descargar un archivo de video flv de youtube.com con ActionScript2 (AS2)
photo credit: PIAZZA del POPOLO
Actualización 18/11/2008:
Me pasa, y no soy el único, que solo funciona el script en local, y no cuando el swf está colgado online. No se cual es la razón, aunque tampoco he buscado muy a fondo. Podría ser alguna directiva de seguridad del flashplayer quizás.
—
A falta de recurrir al API de Youtube también hay otras maneras de obtener los enlaces directos a sus videos, en formato flv, alojados en cualquiera de sus diferentes servidores.
Lo mejor sería usar su propia API por que así se evita que cualquier cambio en su sistema invalide nuestros anteriores scripts, como ya me ha pasado.
El caso es que sigo tropezando con la misma piedra, así que aquí está el nuevo código para poder descargar un flv y visionarlo en tu propio mediaplayer.
var my_lv:LoadVars = new LoadVars();
my_lv.onData = function(vars_str:String) {
if (vars_str == undefined) {
trace("Error al cargar datos");
return;
}
var i:Number = 0;
while (vars_str.split("&")[i] != undefined) {
var token_str = vars_str.split("&")[i];
if(token_str.split("=")[0] == "token") {
var t = token_str.split("=")[1];
_root.videoplayer_mc.contentPath = "http://www.youtube.com/get_video.php?video_id="+idvideo+"&t="+t+"&fmt=5";
break;
}
i ++;
}
};
idvideo = "2OBZHB5I89A";
my_lv.load("http://www.youtube.com/get_video_info?video_id="+idvideo, my_lv, "GET");
Y un ejemplo en formato .fla que se puede descargar desde aquí.
Pulsa aquí para abrir otra ventana con el swf. Si no funciona es que Youtube ha cambiado de nuevo su sistema.
Explicación:
Los enlaces a los videos en las propias páginas de youtube son del tipo:
http://www.youtube.com/watch?v=2OBZHB5I89A
Donde el valor de la variable “v”, en este caso “2OBZHB5I89A”, indica el id único del archivo de video.
Para acceder al archivo de video, y no al player que lo carga, son necesarias otras variables que completarían el enlace directo.
Este enlace tiene el siguiente formato:
http://www.youtube.com/get_video.php?video_id=valorid&t=valortoken&fmt=5
valorid se tiene que sustituir con el valor de la variable “v” mencionada antes, y valortoken con otro valor que se obtiene mediante el script.
El código solicita a una URL específica la información relativa a un video determinado
http://www.youtube.com/get_video_info?video_id=valorid"
y esta URL le devuelve una cadena de variables, entre las cuales se encuentra una llamada “token”, cuyo valor es el que necesitamos.
Finalmente la línea
_root.videoplayer_mc.contentPath = 'http://www.youtube.com/get_video.php?video_id='+idvideo+'&t='+t+'&fmt=5';
monta el enlace al video, y lo asigna a la variable del player de video, definida para guardar la ruta hacia el flv.
Algunas dudas se solucionaron en los comentarios del post anterior sobre este tema.
II edición del Congreso de Webmasters en Madrid
Este año me acercaré de nuevo a las novedades de un sector como es el de internet y sus desarrollos web. Un mundillo impreciso, en continúa evolución, y por ende apasionante.
Demasiadas líneas en el frente: SEO, SEM, CS4, IE8, Android, Redes Sociales a tutiplen, modelos de negocio difusos, etc, etc.
El año pasado, quizás por ser la primera edición, hubo varias ponencias de tipo genérico, a saber: usabilidad, seguridad, legalidad, … Esperemos que esta vez se especialize todo un poco mas, y disfrutemos en el Congreso de Webmaster 2008.