Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

December 2010 - Artículos

Web Dev - Resumen de Tips de Fin de año

Ya se acaba el año, y quería hacer un resumen, no están todos los artículos, si no los que más rescato. Espero que el año que ya se viene encima, me permita escribir más Sonrisa, y que sea muuucho mejor al anterior, que sinceramente, no recuerdo un año tan como la mierd….

Espero que lo pasen muy bien!!! , sin más preámbulos  la lista del 2010!:

Enero

Febrero

Marzo

Abril

Mayo

Junio

Julio

Agosto

Septiembre

Octubre

Noviembre

Diciembre

[Tips] JQuery Capty + ASP.NET para desplegar descripciones de tus imágenes.

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):

image image

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:

image

Junto a su contexto de LinqToSQL , de manera de facilitar el ejemplo:

image

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 Sonrisa

Saludos!

Gonzalo

Posted: 24/12/2010 4:20 por Gonzalo Perez | con 1 comment(s)
Archivado en: ,
Agenda de Capacitación MSDN y Technet–Diciembre- Chile

Antes que se acabe el año puedes participar asistiendo a estos dos eventos interés:

Arriba de la nube! , como nuestro amigo Gokú Sonrisa

Conferencia Técnica MSDN: Capa de Datos en la Nube. Azure Storage + SQL Azure
Oradores: Juan Pablo García y Alejandro Pacheco
Fecha: Jueves 16 de Diciembre
Hora: de 18:30 a 21:30 hrs.
Lugar: Mariano Sánchez Fontecilla 310, piso 6. Las Condes.
Regístrate Aquí: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032472572&Culture=es-CL

image

Conferencia Técnica TechNet: Migrando a Exchange 2010, Bien y a la primera! (Trucos desde las trincheras)
Oradores: Gonzalo Balladares y Oscar Soto.
Fecha: Martes 21 de Diciembre
Hora: de 18:30 a 21:30 hrs.
Lugar: Mariano Sánchez Fontecilla 310, piso 6. Las Condes.

Regístrate Aquí: http://www.mslatam.com/latam/mediacenter/evdetail.aspx?EventID=1032472625&p&a&k&i

Quedan pocos días y nada mejor que capacitación y gratis no?
Nos vemos!

Tutorial - jGauge, Mi Control Gauge Circular con JQuery, como siempre, gratis :)

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:

image

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.

image

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.

image

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.

image

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:

  1. Inicio  y pausa del funcionamiento
  2. Personalizar  el tiempo de refresco
  3. Personalizar el Skin del control (sin refresco de página)

image

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"/>&nbsp;

<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 Sonrisa

Como siempre el video!

image

image

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

Tip – RIOT , Optimizador Gratis de Imágenes para la Web

image

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. Sonrisa

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.

image

Descarga este excelente software en : http://luci.criosweb.ro/riot/download/

Pruébalo, no te vas a arrepentir, jejeje.
Saludos!
Gonzalo

Posted: 3/12/2010 3:39 por Gonzalo Perez | con 2 comment(s)
Archivado en: ,
Personalización de Sitios, el Ejemplo y Slides del Taller.

Ayer 1 de Diciembre fui invitado por Microsoft Chile a dictar un Workshop para mostrar las nuevas características de IE9 y su integración con Windows 7. Me gustó mucho que empresas cuyos WebSite son muy visitados , de inmediato encontraran valor para su marca  y Website  a la mayoría de las características que ofrece IE9. Les dejo la PPT utilizada:

Ppt workshop ie9
Además, hicimos un ejercicio en donde personalizamos varios puntos de una página Web.
image

image

El ejemplo lo puedes descargar desde acá

image

Saludos!
Gonzalo

Posted: 2/12/2010 20:36 por Gonzalo Perez | con 2 comment(s)
Archivado en: