[Tips] Los Twitter de Jquery que debes seguir!

image

Primero que nada, debes seguir si o sí el canal #jquery, hay mucha información de nuevos plugins & efectos para tu web. Ahora tomados de la web del Genial Matthew David, tenemos:

  • @jquery – El oficial
  • @smashingmag – Muchos artículos sobre JQuery
  • @jqtouch – uno de los mejores Framework para dispositivos móviles.
  • @usejquery – Excelentes Tips
  • @jquerypodcast – conoce los ultimos podcast de jquery
  • @jquerybot – Mucha información útil sobre jQuery
  • @matthewadavid –El creador de la lista y un dev de jquery genial!
  • @aNieto2k -  una de las páginas en español con más información de desarrollo Web
  • @elijahmanor – Mestro de Jquery
  • @jeresig -  Creador de Jquery

La lista se puede complementar  mucho más, se aceptan sugerencias!!
Saludos,
gonzalo

WebCast Descubre lo nuevo de la integración Microsoft Ajax + jQuery + Visual Studio 2010

Jesús Boch me ha invitado a participar en un WebCast Sobre Ajax. Acá tienes los datos de los contenidos Sonrisa

Aprenderemos cómo Microsoft AJAX le permite crear fácilmente y utilizar los controles del Kit de Herramientas de Control AJAX en ambas Formas ASP.NET Web y aplicaciones ASP.NET MVC. Conoceremos todas las nuevas características y mejoras en los controles del Kit de Herramienta de Control AJAX tal como el nuevo Script Loader de cliente y el control de DataView de cliente.
También veremos cómo ASP.NET AJAX fue diseñado para trabajar uniformemente con  jQuery, cómo crear controles ASP.NET Ajax directamente de jQuery y cómo utilizar la biblioteca jQuery en el código ASP.NET Ajax. Así mismo descubriremos las nuevas características de Visual Studio 2010 y como crear con su ayuda aplicaciones AJAX de forma más productiva.
Todo ello de la mano del MVP en ASP.NET Gonzalo Pérez Correa (Chalalo).

Fecha:
jueves, 23 de septiembre de 2010 19:00 Madrid, París
jueves, 23 de septiembre de 2010 13:00 Santiago, Chile

Apúntate con antelación al evento en este enlace:
https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032459011&EventCategory=4&culture=es-ES&CountryCode=ES

image

Nos vemos allá!

[Tutorial] ASP.NET , El nuevo Sprite & Image Optimization Framework

Que tal? Vamos a revisar este nuevo release del Team de ASP.NET. Release que corresponde a un Framework de optimización de imágenes, que nos permite utilizar CSS Sprites  y base64 image inlining para hacer que nuestro sitio web cargue las imágenes más rápido.

Lo primero , es que lo puedes descargar, junto a su documentación en:

http://aspnet.codeplex.com/releases/view/50140

La siguiente guía está basada en la documentación oficial del producto, al final vas a poder ver un video de como esto funciona. La documentación estaba en ingles, pero la traduje y aproveché de estudiar esta nueva herramienta, y quiero compartir lo que aprendí.

Técnicas de optimización de Imágenes

CSS Sprites

Si quieres saber más sobre CSS Sprites visita este artículo:

http://geeks.ms/blogs/gperez/archive/2010/01/04/optimizando-tu-website-con-css-sprites-caso-pr-225-ctico.aspx

Image Inlining Using Base-64 Encoding

Otra técnica de optimización para imágenes es la denominada (la dejo en inglés mejor)  image inlining. En esta técnica, se embebe la data de la imagen (usando la codificación base-64) directamente en el HTML o en el CSS en lugar de hacer la referencia a la imagen como recurso externo. Cabe recordar que cuando es recurso externo, se realiza un request. Al integrar las imágenes en el HTML o CSS, podemos reducir el número de request a las imágenes en una página a cero (o a uno, dependiendo de si los datos de la imagen se encuentran en la misma página o en una hoja de estilos referenciada).El total del contenido se puede descargar en un resquest.

Ejemplo:image

Desventajas el Inlining Images

Si bien esta técnica nos permite optimizar bastante el tema de la carga de imágenes en nuestro sitio, tiene algunas desventajas:

  • Soporte del Browser, ya que no todos los browser lo soportan , de hecho podríamos decir que la mayoría, hasta ahora, no lo soporta, para darnos una idea, IE8 lo soporta y las nuevas versiones, también FireFox desde la versión 3.5
  • Tamaño más grande de las imágenes, estas al estar codificadas en base-64, su tamaño se incrementa, hasta un 40% más del tamaño original.
  • Cache, ya que los browser no cachean imágenes encodeadas en base-64, si estas están encodeadas directamente en el HTML, sin embargo, si están n un archivo externo CSS, si funciona l cache.

Comparación entre Sprites e Inlining Images

Tag img normal

Sprites

Base-64 Inlining

Alto numero de request, uno por cada imagen de la página

Numero de Request HTTP Moderados (uno para el archivo RSS y otro para el Sprite)

Bajo número de request (solo uno, para el archivo CSS)

Tamaño de archivo moderado

Tamaño pequeño de archivo, se ahorra espacio al tener una sola imagen que contiene a todas.

Tamaño de archivo mayor al estar codificado en base-64

Compatible con todos los Browsers

Compatible con todos los Browsers actuales.

Solo compatible con las ultimas versiones de browser basados en  WebKit y Mozilla

Optimización de Imágenes en ASP.NET

Para usar images Sprites en Web Forms, podemos utilizar el nuevo control SpriteImage, este control funciona de manera similar al control Image que ya conocíamos, pero automatiza totalmente la tarea de desplegar las imágenes optimizadas con la técnica CSSS Sprite. Además , podemos utilizar los sprites creados por este control en páginas HTML Standars (como elementos img), o ya sea utilizando helpers  ImageSprite.Image para MVC o para Razor.

Instalando y Configurando el ASP.NET Image Optimización Framework

Para agregar la funcionalidad a nuestro sitio, debemos agregar las DLL al proyecto y referenciar al ensamblado ImageOptimizationFramework. Los sitios Web Form (ASP.NET Tradicional), además deben referenciar el ensamblado WebFormsControl. Para los sitios que utilizan MVC y Razor deben referenciar al ensamblado MVCHelper para tener acceso al helper ImageSprite.Image.

La siguiente imagen resume lo anterior:

image

El ensamblado ImageOptimizationFramework incluye un módulo que se debe ejecutar cuando la aplicación se inicia, para habilitar este módulo, agregamos en el Web.config:

Para II6

<httpModules>
  <add type =Microsoft.Samples.Web.ImageOptimizationModule
     name =Microsoft.Samples.Web.ImageOptimizationModule/>
</httpModules><?xml:namespace prefix = o />


Para II7

<system.webServer>

    <modules runAllManagedModulesForAllRequests=true>     

      <add type=Microsoft.Samples.Web.ImageOptimizationModule

name =Microsoft.Samples.Web.ImageOptimizationModule/>

    </modules>

</system.webServer>

 

Preparar las Imágenes para la Optimización

Para usar CSS Sprites, se debe agregar las imágenes al sitio en una carpeta específica. Opcionalmente podemos configurar opciones para el Sprite mediante un archivo XML.

Agregar imágenes a la Carpeta App_Sprites

Todos los imágenes deben ser agregadas a la carpeta App_Sprites, que debe estar por debajo de la raíz del sitio. Esta carpeta puede incluir Sub Carpetas. Para este post estoy utilizando las imágenes del ejemplo que viene por defecto (y en la documentación oficial)
Ej:

image

En tiempo de ejecución, las imágenes en casa subcarpeta se fusionan automáticamente en Sprites o embebido directamente en archivos CSS (que son creados por el paquete de optimización), dependiendo como se ha configurado.

Configuración las opciones de Optimización

Podemos sobrescribir la configuración por defecto creando el archivo settings.xml. Este archivo lo podemos crear en la carpeta App_Sprites o en cada subcarpeta que contiene los image sprites. Si una subcarpeta no contiene el archivo settings.xml, entonces esta hereda la configuración desde el archivo settings.xml de la carpeta padre (si es que existe, o si no se utiliza la configuración por defecto).

En el archivo settings,xml, podemos setear los siguientes elementos:

  • FileFormat: Esto controla el formato de la imagen del sprite generado. Las Opciones son JPG, GIF, PNG y BMP.
  • Calidad: Controla el nivel de compresión  del resultando del sprite. El valor se especifica como un entero que representa el porcentaje de compresión
  • MazSize: Esto determina el tamaño máximo (en KB) para el image sprite. Si el tamaño del combinado de imágenes en una carpeta  excede este valor, entonces se crearán multiples sprites automáticamente y será transparente la referencia  a través de un solo archivo CSS.
  • BackgroundColor: Define el color de fondo de image sprite, incluyendo transparencia. Se especifica en el formato estándar ARGB. Esta configuración se suele utilizar cuando se agregan  imágenes PNG transparentes a un sprite que se va a generar en un formato que no admite la transparencia.
  • Base64Encoding: Esto habilita o deshabilita el Base64Encoding. Incluso si esta opción está activada, los sprites se producirán por compatibilidad con navegadores que no soportan imágenes en línea)

    El siguiente ejemplo muestra el contendido de un archivo setting,xml, que refleja la configuración por defecto.

    <?xml version=”1.0″ encoding=”utf-8″?><ImageOptimizationSettings>
      <FileFormat>png</FileFormat>
      <Base64Encoding>true</Base64Encoding>
      <Quality>80</Quality>
      <BackgroundColor>00000000</BackgroundColor>
      <MaxSize>500</MaxSize>
    </ImageOptimizationSettings>

    Notar lo  siguiente:

    • El elemento Quality es redundante para el ejemplo, debido a que es ignorado cuando el output de formato  de salida seleccionado es png.
    • Si se especifica un formato de salida que no es reconocido , el defecto es PNG
    • El valor BackgroundColor es ignorado para las imágenes Base-64

    ¿Como funciona ASP.NET Image Optimization?

  • Monitoreo de la carpeta APP_Sprites para detección de Cambios

    El módulo ImageOptimizationModule  se ejecuta durante la  fase de carga inicial  de la aplicación ASP.NET e implementa el framework de optimización propiamente tal. Agrega un cache de dependencia a la carpeta App_Sprites y a todas las subcarpetas(si es que existen). Si el contenido de alguna de estas subcarpetas cambia, el framework de optimización hace lo siguiente:

    • Si una imagen o archivo de configuración es agregado, eliminado o modificado, o la carpeta se vuelve a generar, se creara una nueva imagen  y archivo css. Si las subcarpetas no tienen un archivo settings.xml, será reconstruido, debido a que sus valores heredados pudieron haber cambiado.
    • Si una carpeta se agrega, se agrega también un elemento a la cache
    • Si una carpeta es eliminada, se elimina también de la cache

    Adicionalmente, un archivo llamado timestamp.dat es utilizado para comprobar si la carpeta tiene que ser reconstruida (img y css) cuando se inicia la aplicación. Si este archivo no ha cambiado cuando se reinicia la aplicación, entonces no hay que reconstruir todo la carpeta App_Sprites, proceso que puede hacer uso intensivo de CPU y Disco.

    ¿Como son desplegadas las imágenes por el control Built-In?

    Los Sprites y las inlined images son redenderizadas usando CSS IDs o clases, las cuales se asocian a los elementos de la pagina como los div, span,a ,p e img. Puesto que el fin es optimizar la carga de imágenes, y que la mejora se siga tratando como imágenes vs el CSS, el control para WebForm y las funciones Helpers hace que estas imágenes utilice una imagen GIF cuyas características son transparente y de 1×1 píxeles. (Codificada en el atributo scr), y luego se usan las clases CSS para mostrar la imagen correcta.

    El siguiente ejemplo muestra el código generado al redenderizar:

    <img class=”aspNetLogos_2-png”
     src=”data:image/gif;base64,R0lGODlhAQABAIABAP///
    wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==” />
    
    
    
    
    
    
    
    
    

    Para asegurar la compatibilidad Cross Browser, el framework de optimización genera dos archivos CSS: highCompact.css, el cual permite el uso de images inline(si es que lo estamos utilizando), y lowCompat.css, que permite solo image Sprites. Para que la referencia correctamente, se debe vincular la hoja de estilo se debe vincular en el head de la página. El siguiente ejemplo muestra un link a la hoja de estilos que es compatible con todos los navegadores (esto es, que utiliza CSS Sprites)

    <link href=“App_Sprites/aspNetLogos/lowCompat.css” rel=“stylesheet”
    type=“text/css” media=“all” />
    
    

    Agregar las imágenes optimizadas a la Página.

    El enfoque o la forma que se utiliza para aprovechar la ventaja de las imágenes optimizadas en una página web depende de si se está utilizando un WebForm, una vista de MVC o Razor, o incluso, si se quiere crear manualmente y agregar los tags de forma manual.

    Control para ASP.NET Web Forms

    Para usar la optimización de imágenes in ASP.NET Web Forms, agregamos el control SpriteImage, la sintaxis sería algo como:

    <SpriteImage:SpriteImage ID=”SpriteImage3″ runat=”server”
    ImageUrl=”~/App_Sprites/aspNetLogos/2.png” Optimize=”true” />
    
    
    
    
    
    
    
    
    

    Podemos setear la propiedad ImageUrl a la imagen sin optimizar en la carpeta App_Sprites, y adicionalmente setear la propiedad Optimize a true. Cuando la pagina se renderiza el  framework de optimización agrega  el link de referencia al CSS apropiado en la cabecera de la página y procesa la imagen adecuada para la opción elegida.

    Helper ASP.NET MVC y Razor

    Para usar la optimización en vistas MVC o páginas Razor, debemos agregar dos helpers, uno para procesar el link al archivo CSS en la vista, y el otro para renderizar la imagen en la página. Para lo primero, agregamos el siguiente helper en el tag head.

    <%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet(“~/App_Sprites/”) %>

    El método ImageSprite.ImportStylesheet genera el HTML requerido para crear el link apropiado al CSS, según la compatibilidad del browser.Para las aplicaciones MVC, debemos pasar esto al header, típicamente utilizando un elemento ContentPlaceHolder, al estar utilizando MasterPages.Para insertar la imagen en la vista mvc o razor, usamos el helper ImageSprite.Image como el siguiente ejemplo:

    <%: Microsoft.Samples.Web.ImageSprite.Image(“~/App_Sprites/myImage.jpg”)  

    Ahora el video

    Como siempre, espero que te sirva!
    Saludos,
    Gonzalo

  • [Evento] Chile – Construye un Datacenter Dinámico de la Mano de Hyper-V y System Center Virtual Machine Manager 2008 r2

    Pablo Campos, MVP en Virtualización va a realizar una excelente Charla sobre como Construir un DataCenter Dinámico, este es el post de su blog.  Visítalo  en http://geeks.ms/blogs/pcampos/

    “Hola a todos, con Duoc-UC, donde me desempeño como docente y ArtcLynx, donde me desempeño como Ingeniero de Plataformas, Organizamos 3 charlas,
    donde mostraremos todas las gracias de Hyper-v R2 + SCVMM R2

    Donde es y cuando ? windows-server-2008-hyper-v-logo-v_2

    lunes, 16 de agosto de 2010 19:00

    DUOC-PUC – Sede Concepción

    Auditorio S-18
    Paicaví 3280, Concepción
    Concepción Bío-Bío Chile

    Donde me inscribo

    Lunes 16 de agosto de 19:00 a 20:30 hrs:
    Construye un Datacenter Dinámico de la Mano de Hyper-V y System Center Virtual Machine Manager  2008 r2 “Parte 1”
    https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032456645&Culture=es-CL
    Lunes 23 de agosto de 19:00 a 20:30 hrs:
    Construye un Datacenter Dinámico de la Mano de Hyper-V y System Center Virtual Machine Manager  2008 r2 “Parte 2”
    https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032456646&Culture=es-CL
    Lunes 30 de agosto de 19:00 a 20:30 hrs:
    Construye un Datacenter Dinámico de la Mano de Hyper-V y System Center Virtual Machine Manager  2008 r2 “Parte 3” FINAL
    https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032456648&Culture=es-CL

     

    Acá ven una foto de Pablo preparando la charla, va a estar buenísima!

    image

     

    Saludos,
    Gonzalo

    ASP.NET & JQuery, Poshytip ToolTip encapsulado :)

    Hola!, no sabía como nombrar este post, pero vamos por parte, primero que nada quiero que veas el siguiente articulo sobre un plugin para JQuery:
    http://vadikom.com/demos/poshytip/
    Como pudiste ver, este plugin nos permite generar atractivos Tooltips configurables , puedes ver en la misma página la lista de propiedades
    image

    Ahora bien, consiente de que no todos los desarrolladores están familiarizados con JQuery es que me propuse  hacer un pequeño aporte para que se les haga más fácil el trabajo.
    Mi idea fue crear las clases necesarias para que desde el lado del servidor puedas agregar la funcionalidad  de  Poshytip a tus páginas mediante código programático.
    Vamos a empezar de Atrás para Adelante, es decir, mostrando el resultado Final y luego el como se programó, por si te animas a hacer lo mismo con otro control
    Tengo un webform con unos varios hyperlink (aunque podrías usar otro control) y un textbox:

    image

    Luego al ejecutar el siguiente código:

    Dim tm As New ToolTipManager(Me.Page, True)
    Dim tlista As New List(Of ToolTip)
    tlista.Add(New ToolTip(hp1.ClientID, “probando”))
    tlista.Add(New ToolTip(hp2.ClientID, “probando2”,
                          
    ToolTip.CssClassOption.tipGreen))
    tlista.Add(New ToolTip(hp3.ClientID, “probando3”,
                           ToolTip.CssClassOption.tipTwitter))
    tlista.Add(New ToolTip(hp4.ClientID, “probando4”,  
                           ToolTip
    .CssClassOption.tipViolet))

    tlista.Add(New ToolTip(hp5.ClientID, “probando5”,   
                           ToolTip
    .CssClassOption.tipYellowsimple))

    tlista.Add(New ToolTip With {.target = txNombre.ClientID, _
                                .content = “Ingrese Nombre”, _
                                .showOn = ToolTip.ShowOnOption.focus, _
                                .alignTo = ToolTip.AlignToOption.target, _
                                .alignX = ToolTip.AlingXOption.right, _
                                .alignY = ToolTip.AlingXOption.center, _
                                .className = ToolTip.CssClassOption.tipGreen, _
                                .offsetX = 5
               })
    tm.writeToolTipList(Me.Page, tlista)

    Como puedes ver, se crear un TooltipManager, que nos va generar todo el código necesario para visualizar  los ToolTip. Luego por cada control  HyperLink (hp1,hp2…) vamos agregando mediante su clientID, el texto del tooltip. He creado dos constructores para facilitar las cosas, uno que recibe el ClientID y el texto, y otro que además recibe el estilo.

     

    Ahora para que veas el resultado (luego explico como lo hice)

    Se ve bien verdad?, como vez, la idea es que sin tener que escribir código JS puedas utilizar este excelente PlugIn.
    La configuración es bastante sencilla y lo hice para que minimizaras el código a escribir.  Revisemos la estructura del proyecto.

    image

    Incluimos en el AppSetting las siguientes entradas:

    <appSettings>
            <add key=ToolTipJSPath value=js//>
            <add key =ToolTipCSSPath value=TooltipCss//>
    </appSettings>

     

    Que no hace nada más que indicar cual es la ruta para los JS que vamos a incluir, lo mismo para los CSS, puedes crear nuevos e incluirlos (recuerda agregarlos a la enumeración correspondiente)
    Las Clases involucradas en esto son:

    image

    En donde Tooltip es la clase que representa el ToolTip y tiene las propiedades del plugin, además  un método que se llama writeTooltip que devuelve un string listo para imprimir. Utilizo enumeraciones para que sea más fácil a la hora setear los posibles valores, los cuales corresponden obviamente a los originales del plugin.

    image

    La clase ToolTipManager tiene un constructor que escribe los links necesarios para que se ejecute el plugin.

    image

    Este constructor recibe dos parámetros uno que es la página y el otro si se utiliza CDN (para estar un poco a la moda).  Vamos agregando links  programáticamente al header, de esta manera al momento de ejecutar la página, sin tener que escribir nosotros el código , va a estar incrustado, a continuación un ejemplo de como incluir un archivo js.

    Dim include2 As New HtmlGenericControl(“script”)
    include2.Attributes.Add(“type”, “text/javascript”)
    include2.Attributes.Add(“src”, path & “jquery.poshytip.js”)
    page.Header.Controls.Add(include2)

    Luego el método WriteToolTipList recibe una lista de ToolTips y llama al método writeToolTip de cada ToolTip, de esta manera se va escribiendo en la página el código JQuery que va a permitir atachar el plugin a los controles que especifiquemos:

    Public Sub writeToolTipList(ByVal Page As Page, ByVal ToolTipList As List(Of ToolTip))

      Dim include As New HtmlGenericControl(“script”)
      include.Attributes.Add(“type”, “text/javascript”)
      include.InnerHtml = “$(function(){”
      For Each tt As ToolTip In ToolTipList
                include.InnerHtml &= tt.WriteTooTip
      Next 
      include.InnerHtml &= “});”
      Page.Header.Controls.Add(include)
    End Sub

     

    Entonces, ahora si quieres bájalo y pruébalo, esta escrito con VS2010, es llegar y ocupar Sonrisa,incluye el plugin, jquery, los estilos, las clases y el ejemplo

    DESCARGALO AQUI

    PD: El Dueño de control es http://vadikom.com/, a él el honor y la gloria, yo solo hice una especie de “Encapsulación” del control.  Si vas a la página del autor, tiene ejemplos con llamadas asíncronas muy buenas!

    Espero que te sirva,
    Nos vemos!
    Gonzalo

    [Tips] Generador de CSS Sprites OnLine

    image
    Una de los puntos de optimización en los que he puesto atención es en los CSS Sprites, si no tienes claro aún cual es el propósito de utilizarlos te recomiendo que visites mi artículo de CSS Sprites. Por otro lado, te adelanto que en los próximos días se va  lanzar un nuevo control de ASP.NET para WebForms y MVC que nos provee esta característica como webcontrol. Si no quieres espera o estas utilizando otro lenguaje, te recomiendo visitar la siguiente página:

    http://css-sprit.es/

    Que tiene un generador de CSS Sprites Online Sonrisa. Los Pasos a seguir son:

    image

    El autor de la página hizo un video muy bueno explicando esto lo comparto para que lo veas

    Espero que te sirva este tip Sonrisa

    Saludos,
    Gonzalo