Three Headed Monkeys

¿Planeas ir al próximo Congreso de Webmaster de Madrid que se celebra este año el 2,3, y 4 de Octubre?

Pues tanto si vas a participar en el networking como si no, tal vez deberías ir con ésta camiseta para que aquellas personas tímidas que no se atreven a preguntarte por tu blog sepan cual es.

Por 21.99€ es tuya. Pincha en la imagen para entrar en la tienda.

Buenas!
Hoy toca actualización inesperada, no tengo mucho tiempo últimamente pero con esto de la crisis uno se busca alternativas para sacarse un sobresueldo, dado que parece imposible que éste aumente lo más mínimo. Así que por eso he creado una tienda de camisetas en Spreadshirt.

Desde aquí puedes comprar tu ropa friki o geek, incluso accesorios, con motivos de internet, rol o videojuegos. Nosotros nos encargamos de los diseños y spreadshirt se encarga de la impresión y envío.

Adjunto algunos de los diseños que tenemos en venta actualmente y si te gusta no dudes en entrar en la tienda.

Camiseta comecocos azul marino chica

Gorra Error 404 Brain not found

Chapa RSS Feed Me

Últimamente he andado un poco alejado del blog, salvo la entrada anterior que se escribe automáticamente al reseñar algo en Qype.

Estoy preparando una entrada sobre el viaje que hice a Japón a finales de Marzo y quiero que sea un buen artículo y que sirva para gente que vaya a ir ya que parece ser un destino de moda últimamente…
Si quieres un adelanto de las fotos, puedes ver algunas en mi perfil de Facebook

También quería preparar algún post sobre gadgets, en especial del Sony Reader PRS-505 que tengo desde hace mucho tiempo y que aún no he reseñado, y es que los lectores de tinta electrónica están empezando a verse cada vez más y son unos aparatos realmente útiles como ya os enseñaré, así que permaneced atentos a los próximos días.

Madrid

Este sitio está por la zona de las tablas, a unos 3 minutos de la boca del metro y es ideal para la gente del barrio que quiera salir a tomar algo en alguna terraza de la zona.

Las cañas son grandes y baratas pero no solo es un bar, además tienen helados (desde 1.80€ el pequeño), batidos de frutas sin alcohol (3.50€), también sirven cenas y comidas, brunch, y dispone de Wifi gratis.

También tienen un proyector donde retransmiten el fútbol o videos musicales y la terracita en verano está muy bien.
Echa un vistazo a mi reseña de LuUcH – Yo soy ferdy182 – en Qype

Antes de que sigas leyendo, no, no es posible hacer un tooltip en cada opción del desplegable en IE6 ya que ni el atributo title ni los eventos de ratón están disponibles para la etiqueta option. Para otros navegadores consulta mi post anterior.

Para hacer un tooltip funcional en IE6, se debe incluir el código siguiente:

1
2
3
4
5
6
7
8
9
10
11

<style>
#tooltip {
  position: absolute;
  display:none;
  padding:1px 2px 1px 2px;
  border: 1px solid black;
  background-color:#FFFF99;
  width:400px;
  z-index:1000;
}			
</style>

Esto crea la clase tooltip en CSS para asignar al div que almacenerá el texto del tooltip.

Ahora incluimos las funciones en javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script language="javascript" type="text/javascript">
// This function checks the mouse event
function checkEvent(e) {
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	showHideToolTip(targ, e, e.type)
}
// This function shows/hides the tooltip
function showHideToolTip (theDropDown, e, eType)
{
 var toolTipObj = new Object();
 toolTipObj = document.getElementById("tooltip");
 toolTipObj.innerHTML = theDropDown.options[theDropDown.selectedIndex].text;
 if(eType == "mouseout"){
  toolTipObj.style.display = "none";
   } else
 {
  toolTipObj.style.display = "inline";
  toolTipObj.style.top = e.y + 15;
  toolTipObj.style.left = e.x + 10;
 }
}

Esto sirve para comprobar el evento sobre el control y para mostrar u ocultar el tooltip.

Luego solo hay que añadir en el html el siguiente div

<div id="tooltip"></div>

Y añadir al select o dropdown que tengamos lo siguiente antes de cerrar el tag (>):

onMouseOver="checkEvent(this.event);" 
onMouseOut="checkEvent(this.event);" 
onMouseMove="checkEvent(this.event);"

Ver demo (solo IE7+)

Buenas, siguiendo estos días unos posts dedicados al infernal Internet Explorer y cómo algunas empresas, no sólo se empeñan en jorobar empleandolo, sino además manteniendo la versión 6 como “corporativa”, hoy vamos a aprender como implementar un tooltip para menús desplegables tipo select (html) o dropdown(asp.net)

Para IE7 y navegadores que funcionan bien como Firefox, podemos hacer uso del atributo title de los elementos html ya que se dispara el tooltip en el evento mouseover automáticamente (cosa que en IE6 no ocurre por eso hay que hacerlo de otra manera).

Si tenemos un desplegable que se llena dinámicamente, no podemos poner el title a cada option, ya que aun no existen a la hora de diseñar el formulario, por esto se puede echar mano de javascript con la siguiente funcion:

1
2
3
4
5
6
7
8
9
10

function tooltips(){			
        items = document.getElementsByTagName("option");
	for(i=0; i<items.length; i++)
	{
	       items[i].title=items[i].text;				
	}
	drop = document.getElementById("select");
	drop.onchange = tooltipselect;
	tooltipselect();
};

llamando a esta funcion en el body así:

1

<body onload="javascript:tooltips()";>

Con esto añadiremos el title a todos los dropdowns de la página así al desplegar el select, nos aparecerá un tooltip para cada option.

Para añadir también un tooltip a la opción seleccionada se incluye la siguiente función, que como se ve, es llamada al final de la anterior (asumiendo que el select tiene como id=”select”):

1
2
3
4
5

function tooltipselect()
{
	drop = document.getElementById("select");
	drop.title = drop.options[drop.selectedIndex].text;
};

Esto hace que al cambiar la opción, se actualice el tooltip del desplegable cerrado.

Ver una demo

A raíz del post anterior donde podemos detectar la version del internet explorer, hoy podemos instalar más de una versión simultánea del mismo con el fin de probar distintas maquetaciones, dada la gran afición del Internet Explorer 6 a joder modificar la maquetación debido a mútiples bugs features, siempre viene bien tener distintas versiones a mano para optimizar el diseño y aplicación a mútiples navegadores con sus tocahuevos usuarios detrás.

No voy a explicar como funciona, para eso lo veis aquí pero se puede instalar descargandolo de Multiple IE Setup(10,3 MB sólo Win XP )

Como sólo te instala hasta el IE6, recomiendo instalar el 7 de forma normal y luego instalar esto para disponer de las demás versiones.

Forgotten Projects recomienda encarecidamente usar Mozilla Firefox que es más seguro, más estable, más útil, más bonito, más ampliable, más opensource y más más

Como hace mucho que no escribo, voy a hacerlo comentando algo que he necesitado hoy en el curro, que es identificar la versión de internet explorer para poder realizar una función u otra, que sabemos que no va a ser compatible en una versión y en otra si, vamos, lo típico.

Una manera es a partir de la versión de javascript, la cual no es muy fiable.

El código que nos sirve para almacenar la versión en una variable es el siguiente:

1
2

var ieVer=/*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 1; case 3.0:return 3; case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5; case 5.6:return 6; case 5.7:return 7; case 5.8:return 5.8; }}()||@*/0;
if(/MSIE 6.0/i.test(navigator.userAgent)) {ieVer=6;}

Las instrucciones entre /*@cc_on y */ son comentarios condiciones (y que ni yo sabía que existía tal cosa) y por lo visto es tan poco estándar que sólo internet explorer lo lee, así que de entrada ignoramos que otros navegadores se metan por ahí y la lien. De este modo valdrá 0 para el resto de navegadores (y podemos entonces comparar la versión de éstos de otras maneras).

La parte dentro del comentario chungo este, asocia un valor a cada versión del IE, de este modo, la versión 1 devuelve 1, la versión 3 devuelve 3, etc…

Se comprueba hasta el 5.8, luego el 6 se comprueba fuera del comentario. La versión 7 y 8 del Internet Explorer devuelve 7 u 8 según proceda pese a no estar contenplado en el código (intuyo que va implícito en la versión de javascript que implementen).

Así, para comprobar si el navegador es inferior a una versión, solo hay que hacer:

1

if (ieVer<=6) {funcionEjecutada();}

Otro método más fiable es parsear con una expresión regular la versión del navegador. El código es el siguiente:

1

function vIE(){return (navigator.appName=='Microsoft Internet Explorer')?parseFloat((new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})")).exec(navigator.userAgent)[1]):-1;}

Devuelve la versión de internet explorer devuelta por la variable UserAgent en caso de ser Internet Explorer o -1 para el resto de navegadores (curioso que el appName del firefox sea el difunto Netscape aunque luego en el userAgent se indique Firefox).

Fuente:outbook

Así he decidido definir lo acontecido ayer con GMail, ya que todo el mundo hace referencia a ello como el fin del mundo ¿pues yo no voy a ser menos no?

Parafraseando a Jack Sparrow:

“Todos recordarán este, como el día en que cayó GMail”

Vemos aquí como se tomaron los usuarios los trágicos sucesos

-¡Que no funciona GMail!
-¿A ti te va GMail?
-Nooooooooooo…..GMaaaaaaaail….!

Las multitudes se apilaban en grupo frente a una cuenta de correo de GMail.

Responsables de Google intentan calmar a las masas. No os preocupéis, el final está cerca, todo volverá a funcionar.

El responsable de Google que se tropezó con el cable de red.

Y tal como se fue, volvió.

Imágenes de http://econsultancy.com/blog/3354-the-2009-gmail-outage-in-pictures

¿Os acordáis de lo que decía el otro día sobre almacenar la orientación de la foto además de su posición geográfica? Seguramente no porque esto no lo lee ni Dios pero quería comentar que tal vez me deberían contratar en un puesto algo más tipo I+D ya que Nokia ha presentado en el World Mobile Congress de Barcelona justo lo que comentaba en mi blog aquí.

Lo podéis ver aquí

Y un par de videos

(Si alguien está interesado en contratarme para idear cosas de estas que me pida el CV )