Este es un pequeño tip que quiero compartir, me encontré con un plugin de JQuery que encontre notable por su simpleza y su utilidad, es JQuery Capty, pueden ver más información aca:http://www.wbotelhos.com/capty/.
Capty nos permite agregar una descripción sobre el borde inferior de nuestras imágenes por ejemplo, la imagen que a continuación se muestra (que además es un comics que dibuje hace tiempo):
 |  |
| Imagen Normal | Al pasar el mouse sobre… |
Obviamente esto puede salir de la base, si bien hay gente que critica un poco que con ASP.NET es muy difícil incluir frameworks JavaScript, vamos a ver como podemos incluir este plugin en nuestras páginas ASP.NET con acceso a BD.
La tabla de etiquetas es muy siempre:
Junto a su contexto de LinqToSQL , de manera de facilitar el ejemplo:
El código a utilizar en la página aspx será el siguiente, como siempre, primero agregar las librerías:
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js">
</script>
<link href="css/jquery.capty.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.capty.min.js" type="text/javascript"></script>
Que corresponden a JQuery con el CDN de Microsoft , luego el css y js de JQuery Capty. A continuación dentro del <div> principal, agregamos la imagen y dos controles literales, en donde vamos a “escribir” el JS necesario para que el Capty funcione:
<asp:Image ID="imagen" runat="server" AlternateText="" name="#leyenda" />
<div id="leyenda">
<asp:Literal ID="CapLiteral" runat="server"></asp:Literal>
</div>
<asp:Literal ID="JScript" runat="server"></asp:Literal>
Primero es la imagen, luego el literal para escribir el content que va ir en la descripción, para eso agregué un div con nombre leyenda, que como puedes ver , se hacer referencia desde el tag name, claro está que vas a tener un warning ya que este tag no pertenece al webcontrol image, pero de todas formas se va a generar.
El segundo literal (JScript) lo ocupo para escribir el script que va a hacer el binding de la imagen con el plugin.
El código programático es el siguiente:
Protected Sub Page_Load(sender As Object, e As System.EventArgs
Handles Me.Load
If Not Page.IsPostBack Then
Dim contexto As New contextoDataContext
Dim etiqueta = (From p In contexto.Etiquetas
Where p.imagen = "micomic1.jpg").Single
imagen.ImageUrl = etiqueta.imagen
CapLiteral.Text = "<span style='color: Red;'>" & etiqueta.titulo & _
"</span><br>" & etiqueta.descripcion
JScript.Text = " <script type='text/javascript'> $('#imagen').capty
({ height: 46});</script>"
End If
End Sub
Ahora bien, obviamente esto es solo para ejemplo, la imagen debería obtenerse mediante un Id u otro mecanismo que tenga que ver con tu programa, bueno, continuamos, obtengo desde contexto los datos de la imagen, luego imprimo en el CapLiteral, el contenido del div que va a mostrar los datos, luego en el siguiente literal imprimo la “union” de DOM con el Plugin, asociado a la imagen generada.
Y listo!, puedes lograr excelentes resultados con poco esfuerzo 
Saludos!
Gonzalo
Hola que tal?, hace tiempo que quería hacerme un tiempo para poder crear los mismos controles Gauge para Silverlight pero con jQuery. El control original lo puedes encontrar en el siguiente enlace
http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx
Los Skin que utilice (entre otros, hay unos muy buenos, cooperación de Héctor Pérez) son los siguientes:
Entonces, varias personas me comentaron que utilizaron el Control , todo bien, pero otros me indicaron que les gustaba, pero no eran fan de ningún plugin para la web como Flash o Silverlight, entonces pensé en crear un control fácil de modificar y construido 100% en Javascript.
Voy a explicar como lo construí por que si quieres modificarlo, ya sea extendiendo o quitando funcionalidad, cambiar las imágenes , tamaños, etc, se te sea fácil.
Las Librerías a Utilizar
Por su puesto que la librería que permite hacer todo esto es jQuery, luego me encontré con la excelente librería jQueryRotate, que nos va a permitir rotar una imagen con animación. Entonces, incluimos las librerías:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
Armar el Layout del Control (Importante Leerlo)
Esta vez, quiero explicarte como está construido, para que se entienda mucho mejor el funcionamiento. En mi caso el layout tiene relación con porcentajes, pero puedes cambiar esto modificando la imagen y entendiendo como funciona. La imagen que estoy utilizando tiene 130px x 130px.
| Primero que nada, el punto 50 es será nuestro Angulo de rotación 0 ya que el puntero que utilizamos por defecto una posición vertical. A diferencia del control anterior que había creado ( el construido con Silverlight) no podemos indicar que el punto de rotación a el extremo inferior, si no que rota en la mitad, por eso que la imagen del puntero solo es la mitad del tamaño del total, se hace rotar en la mitad y se produce el mismo efecto. |  |
Ahora el punto 0 es nuestro grado de rotación –120 y el punto 100 es el grado de rotación 120. Para calcular los puntos intermedios en una ecuación, primero tuve que ver de cuanto era la diferencia entre puntos, esta calculando esta medio 2.4 grados.
Para cada uno de los Skin que tengo, la distancia es la misma, parto con 3 layout básicos y luego voy a ir incorporando más.
Layout HTML del Control
El diseño es bastante simple, pero nos va a permitir ver el funcionamiento del control, entre las características de jGauge:
- Inicio y pausa del funcionamiento
- Personalizar el tiempo de refresco
- Personalizar el Skin del control (sin refresco de página)
El código HTML del Layout es el siguiente:
<input type="button" value="Iniciar" id="Iniciar" style="width: 57px"/>
<input type="button" value="Parar" id="Parar" style="width: 68px"/>
<div id="msg" style="height: 21px"></div>
<div id="control">
<div id="fondo">
<div id="puntero">
<img id="image" src="dial2.png"/>
</div>
</div>
</div>
<input type="text" id="texto" />
<input type="button" value="%" id="manual"/>
<p>
<input type="button" value="Fondo1" id="f1" style="width: 49px"/>
<input type="button" value="Fondo2" id="f2" style="width: 49px"/>
<input type="button" value="Fondo3" id="f3" style="width: 49px"/></p>
Lo que esta en negrita es el control propiamente tal, lo demás da el soporte para el funcionamiento del ejemplo. El los estilos que acompañan el html es:
<style type="text/css">
#fondo{
background-image:url('fondos/fondo3.png');
width:130px;
height:130px;
}
#puntero{
width:13px;
margin-left:58.5px;
}
#msg{
width:130px;
height:10px;
font-family:Arial, Helvetica, sans-serif;
font-style:italic
}
</style>
Como podemos observar , configuramos el fondo, el tamaño del mismo, el puntero y la distancia desde el margen izquierdo ,ya que de otra manera , el puntero estaría adosado al lado izquierdo del div fondo. Para calcular esto:
-
Ancho del Control = 130px ,Mitad=65
-
Ancho del Puntero=13px , Mitad 6,5
-
Margen = Mitad del Control - Mitad del Puntero => 65 - 6,5 = 58,5
Código Javascript
<script type="text/javascript">
var intval = "";
var frecuencia = 4000;
function inicio() {
var angulo = obtAngulo();
$("#image").rotateAnimation(angulo);
}
function obtAngulo() {
var porcentaje = Math.floor(Math.random() * 100);
$("#msg").text("Estado:" + porcentaje + "%");
return -120 + (2.4 * parseInt(porcentaje));
}
$(document).ready(function () {
$("#manual").click(function () {
var porcentaje = $("#texto").val();
var angulo = -120 + (2.4 * parseInt(porcentaje));
$("#image").rotateAnimation(parseInt(angulo));
$("#msg").text("Estado:" + porcentaje + "%");
});
$("#Iniciar").click(function () {
intval = setInterval("inicio()", frecuencia);
});
$("#Parar").click(function () {
clearInterval(intval)
});
$("#f1").click(function () {
$("#fondo").css("background-image", "url(fondos/fondo1.png)");
});
$("#f2").click(function () {
$("#fondo").css("background-image", "url(fondos/fondo2.png)");
});
$("#f3").click(function () {
$("#fondo").css("background-image", "url(fondos/fondo3.png)");
});
});
</script>
El código es bastante corto, paso a explicar las funciones fundamentales para el funcionamiento del Control.
- obtAngulo: Sirve para obtener el porcentaje y transformar en ángulo dicho valor, la fórmula, debido al ángulo en el valor 0 (-120) y el incremento por punto (2,4) , la formula es: -120 + (2.4 * parseInt(porcentaje)); . Esta función se puede reemplazar por una llamada Ajax.
- inicio: obtiene el ángulo desde la función obtAngulo, y rotamos el puntero mediante jQueryRotator con el método rotateAnimation, al ángulo indicado.
Ahora el código adicional, nos va a servir para distintas acciones:
1) Cuando hacemos click en el botón % , cuyo Id es manual, seteamos el ángulo a partir del valor ingresado, ojo que en el ejemplo va sin validación para simplificar el funcionamiento y explicación del ejemplo.
2)Cuando presionamos el botón iniciar , lo que hacemos es setear un intervalo con SetInterval y se lo asignamos a la variable global intval, este seteo indica cada cuando se repetirá la ejecución de la función inicio, en este caso lo indica la variable frecuencia, en milisegundos.
3)Al hacer click sobre Parar, limpiamos el intervalo , para detener la ejecución del control.
4) f1, f2, f3, nos van a servir para cambiar el skin del control, cambiando mediante jQuery la propiedad background-image a través de el método CSS
Y listo! a funcionar 
Como siempre el video!
Compatibilidad (dependiente del plugin jQueryRotate)
- Mozilla FireFox 2.0.0.2 y superior
- Internet Explorer 7.0 superior (en IE9 no funciona, hay que agregar los meta de compatibilidad)
- Opera 9.1 (note Opera 8 no está soportado)
Espero que te sirva, pronto migro los otros controles hechos en Silverlight para que se puedan utilizar con jQuery.
Saludos,
Gonzalo
Hace un tiempo atrás he estado hablando de la optimización de archivos JS, CSS , Image Sprites, reducir los request, etc. Sin embargo, muchas veces ganamos algunas optimizaciones, pero se nos van al pozo al utilizar imágenes de grandes tamaños.
Entonces para agregar un programa más a la excelente lista confeccionada por Stephen Walther , de programas que deberías usar en su Post:
http://stephenwalther.com/blog/archive/2010/11/22/10-essential-tools-for-building-asp-net-websites.aspx
Ahora bien, quiero compartir este excelente software que encontré, se llama RIOT y nos permite actualizar las imágenes. Cual es la gracia? es bastante extensible y gratis. 
Software como este, los utilizábamos bastante hace un par de años, cuando la banda ancha no era “ancha”, pero hora debemos igualmente de preocuparnos por el peso de las imágenes. LA imagen del ejemplo, pesa 50K, y luego de optimizarse 10k, 40K menos, nada de mal.
Descarga este excelente software en : http://luci.criosweb.ro/riot/download/
Pruébalo, no te vas a arrepentir, jejeje.
Saludos!
Gonzalo