Cuando se utiliza una tabla, todas las columnas de este cuadro tiene la misma altura. Antiguamente esto no era un problema en absoluto ya que se maquetaba con tablas, pero ahora, con el aumento de las hojas de estilos (CSS) ahora es algo más complicado.

Añadimos en el head la librería jQuery y el plugin EqualHeights:

<script type="text/javascript" language="javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/javascript" language="javascript" src="javascript/transBG.jquery.plugin.js">

Ponemos los estilos:

<style type="text/css">
	body{color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
	#container {margin:0 auto; width:980px; padding-top:10px;}
	h1 {color:#000; font-size:18px;}
	h2 {color:#000; font-size:14px; padding-bottom:5px;}
	.container { float:left; clear:left; width:100%; padding:0 0 2em; }
	.box { float:left; width:24%; margin-right:1%; background-color:#FF0000; }
	.box p { margin:.5em; padding:0; }
</style>

Y añadimos el selector:

<script language="javascript" type="text/javascript">
	$(function(){ $('#mismaAltura').equalHeights(); });
</script>

La capa con la id=mismaAltura hará el efecto.

Y por último el código html:

        <h2>Columnas sin igual alturas</h2>
        <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
        <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><p>C</p></div>
        <div class="box"><p>D - Ut enim ad minim</p></div>
        <br clear="all" /><br />
        <h2>Columnas con la misma altura</h2>
        <div class="container" id="mismaAltura">
            <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
            <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <div class="box"><p>C</p></div>
    
            <div class="box"><p>D - Ut enim ad minim</p></div>
        </div>

Ejemplo: aquí.
Descarga: aquí.

Colección de 20 fabulosos efectos en Ajax. Realmente son bastantes interesantes, además, muchos de esos efectos utiliza la librería jQuery.

¿Qué es un Conversion Thursday?

El Conversion Thursday es un evento mensual para compartir experiencias en analítica web y marketing de conversión.
Tienen lugar el segundo jueves de cada mes a partir de las 19h de la tarde y estan dirigidos a profesionales y empresas de la analítica web o marketing online con experiencias que compartir, discutir sobre testing (AB y multivariado) etc.

Herramientas que apoyan a la analítica web y que no son herramientas de analítica convencionales (Google Analytics, XiTi, Omniture SiteCatalyst, etc.).

Dividimos las herramientas en 3 tipos:

1.- Herramientas que nos ayudan a entender que hacen los usuarios.
2.- Herramientas que nos dicen que piensan los usuarios.
3.- Herramientas que nos dicen que pasa en el mercado.

1.- Que hacen los usuarios

Crazyegg: Te hace un mapa de calor de donde clican tus usuarios, te muestra los clics en función del referral. Es el famoso Site Map Overlay de Google Analytics pero este sí que funciona.

Userfly: Muy simple, graba sesiones de los usuarios. Esto no serviría para webs con mucho tráfico ya que tendríamos tantos videos (1 por cada visita) y sería imposible de analizar, pero perfecto en webs con poco tráfico.

Clickdensity: Parecido a crazyegg pero más económico y con una trial para 1 sitio web y hasta 5000 clicks.

2.- Herramientas que nos dicen que piensan los usuarios

Kampyle: Un formulario de opinión que se monta en 5 minutos y se sitúa en la parte inferior izquierda de la página y además no es intrusivo.

User voice: Sirve para que los usuarios puedan proponer cosas, temas, ideas en tu web y el resto de usuarios las valoren. Algo parecido a un menéame sobre las ideas de tus usuarios en tu propia web.

4Q: Es un formulario de opinión como el de Kampyle, lo único que este es un poco más intrusivo porque te fuerza una PopUp.

3.- Herramientas que nos dicen que pasa en el mercado

Hay teorías que dicen que es necesario saber que hace tu competencia para saber si lo estás haciendo bien o no. Es decir, si sabes que tu competencia crece un 15% y tu no algo haces mal. Estoy parcialmente de acuerdo con esto, pero lo que me parece interesante es saber lo que hace para saber dónde está el techo de mercado y ver hasta dónde se puede llegar.

- Netsuus: Procesan datos de forma manual.
- Compete
- Alexa
- Ad Planner de google.

Anfibic.com :: Desarrollo Web y analítica Web.

Este plugin nos ayudará a modificar el botón del input file ya que los navegadores no lo permiten, de momento.

Primero añadimos la librería jQuery y la del dicho plugin.

<script language="javascript" type="text/javascript" src="../../common/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jquery.filestyle.pack.js"></script>

Llamamos al input con la clase ‘inputFile’ y lo iniciamos:

	$(function() {
		 $(".inputFile").filestyle({ 
			 image: "imagenes/examinar.gif", //Ruta de la imagen (botón).
			 imageheight:24, //Height de la imagen.
			 imagewidth: 96, //Widht de la imagen.
			 width: 250 //Tamaño del input.
		 });
	});

Le damos un pequeño estilo:

.inputFile {
	border:#bbb solid 1px;
	height:20px;
}

Ejemplo: aquí.
Más ejemplos: aquí.
Descarga del plugin: aquí.

Gracias a los múltiples navegadores podemos testear todas nuestra webs, especialmente para las versiones del navegador Internet Explorer. Aquí os comento los que mejor funcionan.

IEtester, incorpora todas las versiones de IE posibles (IE5.5, IE6, IE7 y IE8) funciona en Windows XP y Windows Vista.
Lo puedes descargar: aquí.

Sin embargo también hay otro producto que me llamó la atención ya que puedes ejecutar el navegador que gustes sin instalar nada, simplemente ejecutándolo.

Puedes elegir entre estos navegadores: Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox 3, Firefox 2, Google Chrome, Opera, Safari.

Un tooltip es una herramienta de ayuda visual patentada por Microsoft, que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Crear un tooltip usando jQuery es muy sencillo, lo primero es añadir los estilos que queremos que tenga nuestro tooltip:

	#capaHelp {
		display:none;
		background:url(imagenes/tooltip.png) no-repeat top left;
		width:622px;
		padding:20px 10px 0 20px;
		height:82px;
		color:#000;
		font-weight:bold;
		margin:-100px 0 0 185px;
		position:absolute;
		z-index:101;
	}
	#capaContenido {
		padding:2px 25px 0 0;
		float:left;
		font-size:12px;
		color:#FFF;
		font-weight:bold;
		position:absolute;
	}

La capa ‘capaHelp’ es la capa contenedora del tooltip por eso la posicionamos donde queremos que aparezca y finalmente sobreposicionamos la capa con un z-index.

Añadimos el efecto con jQuery:

$(function() {
	$("#icoHelp").mouseover(function(event) {
		$("#capaHelp").slideToggle();
	});
	$("#icoHelp").mouseout(function(event) {
		$("#capaHelp").slideToggle();
	});
});

La id ‘icoHelp’ tendrá el evento mouseover y mouseout con un efecto ‘slideToggle’ de jQuery.
Como ya he dicho antes, este script es bastante simple pero si más no muy bonito, aquí tenéis más scripts sobre tooltips en jQuery.

Ejemplo: aquí.
Descarga: aquí.

Aquí tenéis una gran variedad de galerías de imágenes todas ellas gratuitas.
Si buscáis una galería creada en flash os recomiendo SimpleViewer, si en verdad queréis una galería creada en javascript y php os puede interesar dfGallery pero si queréis tener un control total de vuestra galería (usuarios, categorías, sub-categorías, uploads, etc.) os recomiendo Gallery2 o Coppermine.