Chalalo Land

[Tips] Los Twitter de Jquery que debes seguir!

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

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

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:

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

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:

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:

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:

[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 ?

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!

Saludos,
Gonzalo

[Off-Topic] Bicho Raro, o como nos ven los usuarios.

Esta es una imagen que la encontré en el Facebook de Alexander Jiménez, la encuentro muy representativa de lo que nos pasa a diario. Sin más explicación, el chisteeee:

Díganme que no es verdad?
Saludos,
Bicho Raro

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

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:

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.

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:

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.

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

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

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 . Los Pasos a seguir son:

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

Saludos,
Gonzalo

Posters de los Shortcuts de Visual Studio 2010 (después de jugar StarCraft 2 y perder)

Después de jugar Starcraft 2 y ser derrotado, siendo una de las causales que con el mouse me demoraba mucho en elegir, crear, enviar al ataque algunas unidades, es que es mi deber compartir  poster con los ShortCuts de Visual Studio 2010. Hace muy poco se agregaron mejoras para optimizar la impresión de los mismos, existen poster para cada uno de los lenguajes y distintas versiones para el tamaño del papel para imprimir. Recuerda que el usar ShortCuts puede aumentar tu productividad y además, que es lo más importante, se ve muy cool!, jajaj

Descárgalo en
http://www.microsoft.com/downloads/details.aspx?FamilyID=92CED922-D505-457A-8C9C-84036160639F&displaylang=en

Saludos!!!
Gonzalo

PD: Sigo jugando

Material Charla Mejores Prácticas en el Desarrollo de Sitios Web & ASP.NET Ajax

Ayer jueves 22/07 tuve la oportunidad de participar como Orador en la charla Mejores Prácticas en el Desarrollo del Sitios Web & ASP.NET Ajax & Nuevas Funcionalidades en ASP.NET 4 junto a Juan Carlos Olamendy, un título Bastante Largo para una agenda también extensa. Estoy muy contento ya que recibimos buenos comentarios sobre la charla, las preguntas estuvieron muy buenas, y hubo espacio para discusión.

AGENDA:

Ya están subiendo al sitio de Comunidades Técnicas la grabación de ayer http://www.facebook.com/ComunidadesMS  (si no está ahora, durante el día debería), te recomiendo que te hagas fan de esa manera siempre vas a estar actualizado con los eventos.

Creo que Juan Carlos va a subir también los ejemplos, por mi parte te dejo la PPT  y links de mi sitio que están relacionados con lo que vimos ayer:

PPTX:
http://cid-053a660afa3473b3.office.live.com/view.aspx/P%c3%bablico/Charla22.pptx

LINKS:

Espero que te sirvan los links, nos vemos!
Saludos,
Gonzalo

[Tutorial]–Facebook List, un AutoCompletar Cool para JQuery y su integración con ASP.NET

Hola que tal? Hoy voy ha escribir una especie de tutorial para mostrar como integrar (no es la única forma) el excelente Plugin para jQuery  Facebook List, puedes ver el demo de como funciona acá:
http://devthought.com/wp-content/articles/autocompletelist/test.html

También puedes ver un comportamiento similar en Hotmail, cuando elijes a los destinatarios de tu correo

FaceBook List

Este PlugIn, obtiene los datos desde una fuente que le retorne un objeto en notación JSON con los campos:caption y value.
Además puedes agregar a la lista ítems ya previamente seleccionados y agregar nuevos elementos  la lista de búsqueda mediantes LI.
Revisa para mayor información:
http://devthought.com/blog/projects-news/2008/01/textboxlist-meets-autocompletion/

Nuestro Ejemplo

Nuestra base es simple, tenemos la siguiente Modelo y  su contexto con Linq2Sql asociado.

MER	Contexto

Como ves, es un listado géneros y sus películas asociadas, de manera de poder consultar por los géneros y obtener un listado de películas.

Ahora hay que crear el código para devolver en notación JSON el listado de géneros para que funcione el autocomplete. Para esto podríamos utilizar Servicios WCF que nos pueden retornar el conjunto de resultados con dicha notación. Pero en este caso , podrías no querer desarrollar un webservice, por lo que vamos a generar la respuesta con JSON desde un WebForm, para esto , creamos el webform getDatos.aspx:

Public Class getDatos
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       Dim datos As String = GetGeneros()
        Response.ContentType = "application/json"
        Response.Write(datos)
        Response.End()
    End Sub

    Public Function GetGeneros() As String
        Dim Items As New List(Of GeneroItem)
        Dim modelo As New ModeloDataContext
        Dim lista = From p In modelo.Generos Order By p.Genero
        For Each g As Genero In lista
            Items.Add(New GeneroItem With {.caption = g.Genero, .value = p.Id})
        Next
        Dim jsonSerializer As New _  
              System.Web.Script.Serialization.JavaScriptSerializer()

        Return jsonSerializer.Serialize(Items)
    End Function

    Public Class GeneroItem
        Public caption As String
        Public value As Integer
    End Class
End Class

Contamos con una funcion getGeneros que se encarga de obtener mediante linqtoSql una lista de GeneroItem serializada a JSON. Como ves. se obtiene una lista de géneros y luego se pasa a una lista de generoItem y se retorna el resultado “JSONEADO”. La clase GeneroItem tiene los campos necesarios que requiere Facebook-list para crear los ítems al momento de seleccionar el autocompletado.
Luego en la Page_Load obtenemos la respuesta de GetGeneros y escribimos en la página mediante Response.Write esta respuesta, cambiando el ContentType de la página para que se escriba con la notación que necesitamos.

Ahora al momento de ejecutar la página GetDatos.aspx tenemos la respuesta:

[{"caption":"Accion","value":3},
{"caption":"Comedia","value":5},
{"caption":"Drama","value":2},
{"caption":"Suspenso","value":4},
{"caption":"Terror","value":1}]

Que es justamente lo que buscamos .

Formulario Principal

Para crear esto, me baso en el ejemplo que viene con el plugin, pero vamos a crear más código javascript para que se adapte para trabajar con WebForms. En el tema de diseño, vamos tener lo siguiente:

Veamos el código declarativo

Primero que nada, debemos hacer las referencias necesarias:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>    <script src="fcbkcomplete.min.js" type="text/javascript" charset="utf-8"></script>

Luego seguimos con el código propio del del Plugin:

  <ol>
      <li id="facebook-list" class="input-text">
        <label>
           Demo FacebookList - Busca los nombres de los Generos
        </label>
                <asp:TextBox ID="TxBusca" runat="server"></asp:TextBox>
                <ul id="preadded" style="display: none">
                    <asp:Literal ID="Agregados" runat="server">
                    </asp:Literal>
                </ul>
                <div id="facebook-auto">
                    <div class="default">
                        Escribe los géneros de las películas a buscar</div>
                    <ul id="feed">
                    </ul>
                </div>
            </li>
        </ol>

Según el esquema del plugin, la estructura debe ser la que antes se muestra, el UL con Id preadded sirve para agregar selecciones al cargar el plugin, esto nos va a servir para mantener el estado del plugin, es decir que no se pierda la selección entre PostBack, para esto agregamos un control Literal “Agregados” para que mediante código programático mantengamos las selecciones anteriores, esto se ve apoyado mediante código JavaScript.

<script language="JavaScript">

        $(document).ready(function () {
            $.facebooklist('#TxBusca', '#preadded', '#facebook-auto',
                          { url: 'getDatos.aspx', cache: 1 }, 10, 
                           { userfilter: 1, casesensetive: 0 });
       });

   function getList() {
          var lista = document.getElementById("facebook-list").children[1];
          var i = 0;
          var generos = "";
            for (i = 0; i < lista.children.length - 1; i++) {
               generos = generos + ";" + lista.children[i].outerText;
            }
            document.getElementById("hf_generos").value = generos;
            return true;
        }
</script>

El primer código que vemos es propio del plugin, que  indica, cual es el input-text, cual es la sección del preadded , el cual tiene que ver con la sección en donde se agregan las selecciones, la URL que retorna la lista en JSON, la cantidad de sugerencias entre otros( para una info detallada, ve a la página del plugin).

Lo que no indica la documentación del plugin es como capturar los valores seleccionados, por lo que vamos a crear una función getList que obtiene cada uno de los valores seleccionados y luego genera una lista separa por ; y se los asignamos a al HiddenField hf_generos. Esta función la llamamos desde la propiedad onClientClick del botón.

<asp:Button ID="Button2"
            runat="server"
            Text="Buscar"
             OnClientClick="getList()" />

De esta manera, al presionar el botón llamamos a la función JavasScript y al método en el código programático:

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click

    Dim listaGeneros() As String = hf_generos.Value.ToString.Split(";")
    Dim modelo As New ModeloDataContext
    Dim listaPeliculas = From p In modelo.Peliculas _
                         Where listaGeneros.Contains(p.Genero.Genero) _
                         Select p.Nombre, p.Genero.Genero
   
    GrillaPeliculas.DataSource = listaPeliculas
    GrillaPeliculas.DataBind()

    'volvemos a Poner en la lista lo que había antes
    Dim listaAgregados As String = String.Empty
    Dim i As Integer
    For i = 0 To listaGeneros.Length – 1
            If Not String.IsNullOrEmpty(listaGeneros(i)) Then
                listaAgregados = listaAgregados + _
                    String.Format("<li value=""{0}"">{1}</li>", i,   
                        listaGeneros(i))
            End If
     Next
     Agregados.Text = listaAgregados 
   End Sub

Lo primero tenemos que hacer es obtener desde el HiddenField la lista de seleccione y las pasamos a un arreglo, luego hacemos la consulta con LinQ, para mostrar todos las películas que pertenecen a los géneros seleccionados. Luego ponemos en la lista la selección anterior , para mantener el estado, apoyándonos en el Literal e imprimiendo li con las selecciones previas.

Veamos el Video del funcionamiento:

Baja el ejemplo desde acá:

http://cid-053a660afa3473b3.office.live.com/self.aspx/P%c3%bablico/Autocomplete2.rar

PD:Recuerda que el onClientClick no funciona de manera adecuada en FireFox.

Este es un control que esta es sus primeros pasos,  por lo que pueden existir algunos bugs por el momento, pero como vez, es totalmente funcional.

Espero que te sirva!
Gonzalo

[Tips]ASP.NET , determinar si nos navegan desde un cliente móbil & JQuery – JQTouch,

Hola!, de hace un tiempo que estoy con la inquietud de crear aplicaciones para dispositivos móviles. Generalmente podemos encontrar de dos tipos, las que son App instaladas en el teléfono, o otras que abren el navegador del dispositivo y que corresponden a páginas web que deben estar seteadas para el dispositivo.

Request.Browser.IsMobileDevice de ASP.NET nos permite determinar si el browser que está navegando nuestra página corresponde al de un dispositivo móvil. De hecho podemos ver más información del browser como:

Response.Write("<B>User Agent:</B> " & Request.UserAgent & "<BR />")        Response.Write("<B>Movil:</B> " & Request.Browser.IsMobileDevice & "<BR />")
Response.Write("<B>Browser:</B> " & Request.Browser.Browser & "<BR />")
Response.Write("<B>Version:</B> " & Request.Browser.Version & "<BR />")
Response.Write("<B>Mayor:</B> " & Request.Browser.MajorVersion & "<BR />")
Response.Write("<B>Menor:</B> " & Request.Browser.MinorVersion & "<BR />")

El resultado es:

Con esto obviamente puedes redireccionar tu sitio a una página hecha para dispositivos móviles,ahora bien, también gustaría saber que dispositivo móvil está navegando nuestra página,  ya que no todos tienen la misma resolución.Para esto podemos utilizar Request
.UserAgent que contiene como string el tipo de dispositivo, por ejemplo podemos determinar el tipo de teléfono (fijando el en tipo de navegador, aunque muchas veces no es lo más certero)

• userAgent.Contains("iphone")
• userAgent.Contains("blackberry")
• userAgent.Contains("palm")
• Etc….

Es en este sentido, con toda esta latera introducción, que te quería recomendar , si es que querías hacer algo similar, le hecharas uno ojo a JQTouch, que está basado en jQuery, que nos permite realizar páginas con “look and Feel” similar a una UI de Iphone:

http://jqtouch.com/

Que no solo consiste en los gráficos, si no que también son similares en comportamiento, es decir, el scroll, botones, navegación y demases,

Yo no tengo IPhone, pero puedo utilizar safari para probar las páginas que estoy haciendo,tambien en Blackberry vas a encontrar emuladores, la idea es que aunque no tengas el dispositivo físico, puedas crear tus aplicaciones y navegarlas con los dispositivos.

Por mi parte, estoy entusiasmado para crear web y app para móviles , espero que esto que escribií recien, te sirva!

Saludos,
Gonzalo!

Introduciendo WebMatrix, lo nuevo del Team ASP.NET

Estos días se vienen varias novedades en lo que es desarrollo web, tenemos los siguientes anuncios de Scott Guthrie:

• IIS Developer Express: Un Servidor Web liviano, gratis, simple de configurar, compatible con todas las versiones de Windows y compatible totalmente IIS 7.5

• SQL Server Compact Edition:  Una base de datos basada en un archivo (tipo SqlLite), muy liviana, gratis y que puede ser integrada en las aplicaciones ASP.NET, permite la migración a SQL Server.

• ASP.NET “Razor”: Un nuevo motor opcional de vistas para ASP.NET, que permite enfocase en la generación de plantillas optimizando la generación del HTML. Sintaxis fácil de usar, de aprender.

Y se anunció WebMatrix

WebMatrix

WebMatrix tiene todo lo que necesitamos para crear sitios Web que utiliza Windows. Incluye el servidor web IIS Developer Express, ASP.NET ( Web framework), y SQL Server Compact (Nueva base de datos embebida). WebMatrix pesa aproximadamente 15MB si tienes el Fx 4 instalado, si no, aproximadamente 40Mb. Es un entorno Muy integrado , que nos permite crear páginas de una forma sencilla, con un lenguaje con sintaxis simples y poderosas, con helpers que nos facilitan bastante las cosas.

Lo puedes descargar desde acá http://www.microsoft.com/web/webmatrix/ mediante el WPI.Puedes ver tutoriales acá: http://www.asp.net/webmatrix para aprender más, realmente hay muchas posibilidades con todo lo que trae esta herramienta, por ejemplo, mira el post de Scott Hanselman:
http://www.hanselman.com/blog/MicrosoftWebMatrixInContextAndDeployingYourFirstSite.aspx

Crear nuestro Primer Sitio

Una vez instalado el Sw, y al seleccionar la opción de crear nuevo sitio, vamos a ver la siguiente pantalla, en donde nos da la opción de elegir una plantilla para la confección del sitio, en nuestro caso, una plantilla vacía:

Luego verás el siguiente pantalla relacionada con tu sitio, en donde puedes setear y crear bases de datos, archivos de la aplicaciones y reportes de CEO.

Voy a agregar un nuevo archivo, para eso vamos a Files y  pinchamos Agregar nuevo archivo al sitio:
 
Luego podemos elegir el tipo de archivo que vamos a manejar para nuestro sitio, como ven hay una amplia gama, lo que vamos a seleccionar (y es que aquí está la gracia) es CSHTML, el cual lo podemos leer como (HTML C#).

 

Como ves, el documento es un HTML normal, pero luego podemos comenzar a programar con las sintaxis de Razor (Solo la sintaxis, ya que el motor no esta disponible en esta versión)

Veamos uno ejemplo de la Sintaxis, como verás en bastante minimalista, genera además un código limpio del lado del Cliente

Luego, si queremos ejecutar nuestra página, tenemos la opción de Run (Ejecutar) lo que hemos hecho, mostrándonos en una pestaña todos los navegadores disponibles en nuestro SO, o también nos da la opción de probar en todos los navegadores.,

Agregar Bases de Datos

Como te había comentado, WebMatrix es un entorno integrado, que incluye bases de datos, SQL Server Compact, la cual es una nueva base de datos integrada con ASP.NET, compatible con las API existentes del mundo NET, además no requiere instalación (cuando lo subas a un hosting)

 

Gráficamente podemos crear la tabla con los campos, para este ejemplo algo sencillo, solo Id, Nombre y Edad :

Ahora vamos a crear el código para mostrar los datos de la tabla. Para el manejo de datos existe gran cantidad de Helpers, mira lo sencillo que es conectarse a la base que hemos creado y crear la consulta para luego ejecutarla:

<!DOCTYPE html>
@{   var mibase =Database.Open("DemoWM");
     var personas =mibase.Query("Select * from Personas");
}
<html>
    <head>
        <title>Demo 2 WebMatrix </title>
    </head>
    <body>
   <h2>Mostrar Datos </h2>
    <ul>
       @foreach (var persona in personas){
        <li>Nombre @persona.nombre Edad: @persona.edad</li>
    }
    </ul>
    </body>
</html>

Y al ejecutar:

Ejecución del la Página	Código Generado

Insertando Datos

Necesitamos insertar los datos, y para ello vamos a utilizar los helpers que nos van a permitir ahorrarnos bastante código:

@{   var mibase =Database.Open("DemoWM");
if (IsPost) {
  string Nombre = Request["Nombre"]; 
  if (Nombre.IsEmpty()){ 
           Validation.AddFieldError("Nombre", "El nombre es Obligatorio.");
  }

  int Edad = Request["Edad"].AsInt();
  if (Edad==0){
     Validation.AddFieldError("Edad", "Escriba Edad >0");
  }
  if(Validation.Success) {
   var SqlInsertar = "INSERT INTO Personas (Nombre, Edad) VALUES (@0, @1)";
   mibase.Execute(SqlInsertar, Nombre, Edad);
  }
} 
var personas =mibase.Query("Select * from Personas");
}

isPost nos sirve para determinar si se efectuó un postback, luego utilizamos el helper Validation y su método AddFieldErrror, que nos permite agregar los mensajes de error en el helper @html.ValidationSummary. AsInt nos permite convertir el parámetro que viene por Post. Finalmente si Validation.Success es verdadero, es decir, no se agregaron Errores (addFieldError), vamos a agregar el el registro.

Y el código HTML Asociado

Ahora al ejecutar:

Ya ingresamos un nuevo registro, con pocas líneas de código podemos crear páginas dinámicas.

Además puedes probar el comportamiento de tu sitio en el menú sitio y luego request:

Encontrar un WebHosting para tu aplicación y agregarlo a tu lista:

Y Luego publicar directamente tu aplicación:

Te recomiendo  que veas para ver revisar la documentación.
http://www.asp.net/webmatrix

Personalmente, creo que esta herramienta promete, si bien no vas a encontrar un editor de texto totalmente completo, vas a poder probar y disfrutar aprendiendo esta herramienta.

Saludos!!
Gonzalo

Conferencia Técnica MSDN:La máxima potencia en el desarrollo de sitios web.

Hola!, te quiero invitar a un evento presencial en Santiago, el próximo jueves 22 de Julio a las 18:30 horas, en las oficinas de Microsoft Chile, en donde podremos conversar sobre tips de optimización web, secretos ninjas para hacer volar tu web y además novedades en el ASP.NET Ajax Library y ASP.NET 4 que potenciaran tus desarrollos

Registrare aquí:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032454982&Culture=es-CL

Si eres de regiones (más al sur, y no puedes viajar) creo que esta conferencia va a ser transmitida por Internet, si eres de Concepción, me esperas un poco y como soy también de Concepción y quieres que en tu Universidad se dicte la Charla, me contactas y ya está.

Detalle del Evento:

Microsoft Chile - Sala Farellones y Colorado

Mariano Sánchez Fontecilla 310 Piso 6
Las Condes Santiago Región Metropolitana Chile

Idiomas:
Español.

Información general del Evento

Si eres desarrollador de sitios web no te pierdas este evento!!
En la primera parte de esta charla revisaremos técnicas que puedes poner hoy en práctica fácilmente para hacer volar y potenciar tu Sitio Web actual: Compresión HTTP, CSS Sprites , Script Combinados, el uso de CDN, Minificación de Script y mucho más...
Y en la segunda parte te mostraremos las nuevas características y potencialidades de ASP.NET 4.0  que puedes utilizar para la creación de tus nuevos sitios web.
Oradores:

Gonzalo Pérez - MVP ASP/ASP.NET
John Charles Olamendy - MVP C#

INFORMACIÓN IMPORTANTE:
Este evento no considera el pago de estacionamientos para los asistentes.
Microsoft se reserva el derecho a utilizar los espacios disponibles, una vez comenzado el evento.

Opciones de registro

Id. de evento:
1032454982

Eso, los espero!

ASP.NET Ajax Library, Introducción a Datalinker Parte 2: Converters

En el post Anterior (si no lo viste, pincha aquí), hablamos de la nueva característica llamada Datalinker, y teníamos una UI de esta manera:

… y todo funciona como es debido, sin embargo no nombre una nueva característica , que tiene que ver con otra propuesta más al team de jQuery , que tiene que ver con los converters .

Los Converters nos permiten convertir, como su nombre lo dice, el valor de una propiedad al momento de hacer el data linker.

Si recordamos la función del post anterior, la modificaremos para agregar el LinkFrom, que nos permite remplazar mediante expresiones regulares, todas los números que se ingresen en el campo de nombre (En esta versión deben ir linkBoth y LinkFrom , quizás más adelante, esto cambie).

Entonces al momento de escribir en el campo de texto y por ejemplo Gonzalo 123 y apretar el botón mostrar:

Los números fueron eliminados exitosamente

Espero que te sirva!
Saludos,
Gonzalo

ASP.NET Ajax Library, Introducción a Datalinker

Otra de las propuestas que se han enviado a el team de jQuery por parte del team de ASP.NET tiene que ver con los Datalinker. Esta nueva característica permite hacer el “link” desde una propiedad de un objeto a otra propiedad de otro objeto, además que el cambio en el objeto origen, provoque un cambio automático en el objeto con el link. Utilizando en DataLinking podemos sincronizar (y mantener sincronizados)  fácilmente la UI con los objetos en el lado del cliente.

Vamos a tener algo parecido al ejemplo del post anterior (http://geeks.ms/blogs/gperez/archive/2010/06/13/asp-net-ajax-library-introducci-243-n-a-las-nuevas-plantillas-client-side.aspx .

La UI será la siguiente:

El primer paso es incluir la librería:

Luego vamos a tener un objeto que tiene los siguientes campos:

Los cuales son coincidentes con nuestra UI, luego debemos hacer el link del objeto “ObjetoDocentes” con nuestros objetos Dom de la UI. (Esto es lo bueno!)

Como puedes ver con el método linkBoth lo que hacemos es linkear la el campo nombre, con la propiedad val del objeto txNombre, de esta manera se realiza la sincronización. al momento de ejecutar la pagina:

Ahora bien, si modificamos en la UI los valores, se sincronizan automáticamente en el objeto “ObjetosDocente”. Para eso tenemos una función que nos muestra los datos del objeto, la que está atachada al boton mostrar.

Modificamos el Nombre y Apellido (en la onda mundialera) y al momento de hacer click en mostrar, sin ninguna modificación ni código adicional, podemos ver que se sincronizó los datos del objeto con los datos de la UI.

Ahora bien, si queremos modificar los datos por código, lo podemos hacer mediante el método attr:

Vamos entonces a presionar el botón guardar y de inmediato se sincroniza la UI:

Estas funcionalidades todavía están en un estado de propuesta, y es posible que cambien en el futuro. Pero al menos nos da una visión general de como va a funcionar esta característica en el futuro.

Espero que te sirva!
Saludos
Gonzalo!

ASP.NET Ajax Library , Introducción a las nuevas plantillas Client-Side

Ya no es noticia que el team de ASP.NET esté trabajando a toda máquina junto al equipo de jQuery, y que buenos productos se vienen a partir de esta sociedad. Uno de estos son los templates propuestos por el team de ASP.NET  al team jQuery, que estan todavía en etapa de revisión, hay mucho feedback que se está recibiendo por parte de la comunidad.

Que son los Client Templates (o plantillas del lado del cliente)

Permiten a los desarrolladores web generar y renderizar HTML UI en el cliente (generalmente esto lo hacemos en el lado del servidor), mediante sintaxis simples permiten programáticamente invocar plantillas en el clienbte y pasar objetos Javascript , como arreglos por ejemplo, a divs específicos enmarcados en los tag propios de la plantilla. Debido a que esto todavía es una propuesta, es posible que la versión final sea diferente de lo que hoy vamos a ver.
Puedes descargar el prototipo en:  
http://github.com/nje/jquery-tmpl

Vamos a ver un ejemplo para mostrar los datos de Docentes y sus asignaturas, agregando algunas características de las plantillas.

La idea es obtener el siguiente resultado:

Y como siempre en este Blog…. :)

PASO 1 – Importar las liberías

Debemos importar las librerías jQuery y la librería del template (descarga el prototipo aquí)

<script src="http://code.jquery.com/jquery.js" type="text/javascript"/>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"/>

PASO 2 – Crear la Colección

Esta colección puede venir de un servicio Rest por ejemplo que nos devuelva en notación JSON un o una colección de objetos. En este caso usaremos una colección creada en la misma página:

Como puedes ver, es una colección simple que contiene  otra colección de Asignaturas, la cual en el ejemplo de Bernardo, está vacía. (Espero que no se enojen los personajes aludidos :P)

PASO 3 – Crear el Contenedor y la Plantilla

Para esto vamos a crear un contenedor de la Plantilla, pudiendo existir en ella una o más plantillas para renderizar. Ahora viene lo bueno, como ves se utiliza un tag script de tipo texto/html para contener a la plantilla, como se ve n la figura:

Luego vemos unas marcas de tipo {{ = atributo_objeto }}, que hacen referencia a los atributos de la colección que se va renderizando mediante iteración, en este caso, hago un href al atributo URL de cada objeto de la colección, luego concateno nombre y apellido para mostrar el nombre completo en la UI.
A continuación vemos unas sentencias que están en el prototipo de la plantilla, existe el IF, y el each (foreach), acá la idea es que si la persona tiene asignaturas, se muestren en una lista, si no, que muestre el mensaje Sin Asignaturas.

Otr0 punto es que quiero imprimir la cantidad de Asignaturas, para eso no se imprime {{= asignaturas.length}} directamente, si no que hay que utilizar funciones javascript, en el ejemplo se muestra una llamada a la función getCantidad() , la cual tiene el siguiente código:

Obteniendo en cada iteración , mediante el contexto de la llamada (this), el largo de la colección de Asignaturas.

PASO 4 – Agregar el CSS

PASO 5 (y último) – Agregar la Colección a la Plantilla

Paso indispensable (y esta para el último, ejjeje) que nos permite hacer el binding de la colección y la plantilla:

Con esto estamos indicando que se renderize la colección contra plantillaDocente.

PASO 6 (Opcional) – Descarga el ejemplo

Como te diste cuenta puse imágenes en vez de texto,es bastante más rápido postear de esta manera, pero no se puede copiar el código!, por eso la aplicación la puedes descargar acá

Descarga el ejemplo

Espero que te sirva!, recuerda que esto está sujeto a cambios, pero nos da una buena idea de como van a trabajar las plantillas del lado del Cliente.
Muy buena la alianza Microsoft & jQuery!!

Saludos!
Gonzalo

[Tips] Query – Confirmar cerrado de página.(muy sencillo!)

Hola!, se que es sencillo, pero por experiencia en el blog, me he dado cuenta que estos tips son de gran utilidad para algunos visitantes.

La idea principal es pedir la confirmación por parte del usuario cuando va cerrar la página ( incluso por que se va a cambiar de página por un menú por ejemplo).

Vamos por parte, primero vamos a tener la página:

La idea es que cuando escriban algo, o cambien el dato seleccionado en profesión, o pinchen en sexo o notificaciones, se considere una modificación en la página , por lo cual se debe mostrar el mensaje de confirmación, sin embargo, cuando presionen guardar, no muestre el mensaje. De la misma manera, en los links, hay uno que genera confirmación el otro no.

Para esto,  vamos a crear un archivo js, que en mi caso se llama jverificador, con la programación necesaria para lograr lo que queremos, la estructura del sitio de prueba queda de la siguiente manera:

El contenido es el siguiente:

var __modificado = 0;
$(document).ready(function () {
    $(".editable").keypress(function () {
       __modificado = 1;
   });

    $(".clickeable").click(function () {
       __modificado = 1;
    });
   
    $(".cambiable").change(function () {
        __modificado = 1;
    });

    $(".anulable").click(function () {
        __modificado = 0;
    });
});

window.onbeforeunload = function (e) {
    if (__modificado == 1) {
        return "Ha modificado datos de página, si continua perderá sus             cambios!";
    }
};

La idea es simple, distintos selectores css, para distintos controles, por ejemplo, el selector para editable, lo puedo setear para los texbox:

<asp:TextBox ID="TextBox2" class="editable" runat="server"/>

o clickeable, podemos asignarlo a los checkboxs y radiobuttons, cambiable para el dropdown.

Otro ejemplo:
<asp:DropDownList ID="DropDownList1" class="cambiable" runat="server">

Existe una variable __modificado que asume el valor de 1 cuando los eventos antes mencionados suceden , pero también la clase anulable para sacar la marca y no mostrar el mensaje.

Luego en el método onbeforeunload, pregunto por el valor la variable __modificado, si existió una acción o modificación el dato toma el valor 1, en otro caso, simplemente no hace nada.

El resultado es el siguiente:

Puedes ver además que hay una sección que indica:

Al igual que el botón guardar del formulario en uno de estos link no debe pedir confirmación, recordemos que el botón guardar realiza un postback, que si no controlamos mediante la variable __modificado=0, nos pediría confirmación.

Nota, obviamente esto puede generar conflictos como en escenarios en donde se utilice controles con autopostack. Sin embargo en escenarios con Microsoft Ajax funciona ya que no se recarga la página.

Eso!, espero que este archivo JS te sea de utilidad.
Saludos,
Gonzalo

[Tutorial]Introducción al nuevo ScriptLoader de ASP.NET AJAX Library

Hola!, yo de nuevo :), hoy quería hablar de un control de la libería de ajax de ASP.NET que se llama ScriptLoader, el cual en breves palabras nos va a servir para reducir la complejidad a la hora de cargar script y resolver sus dependencias. De hecho la librería Microsoft Ajax Client-Side está dividida en múltiples archivos Javascript, permintiéndonos el ScriptLoader descargar solo los que necesitemos.

Dentro de sus características principales podemos encontrar:

1. Resolución Automática de dependencias
2. Carga Perezosa (Lazy loading)
3. Carga de Script convinados
4. Carga de Script Personalizados

Veamos con un ejemplo cada Caso:

1) Resolución Automática de dependencias

Vamos a realizar con el siguiente código nuestro análisis:

<html>
<title>ScriptLoader Demo 1</title>
<head>
    <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js"  
            type="text/javascript"></script>
    <script type="text/javascript">
        //Habilitar debugging
        Sys.Debug = true;
       //Resolver Dependencias
        Sys.require([Sys.scripts.DataContext]);
    </script>
</head>
<body>
</body>
</html>

Como  podemos ver la referencia hacia la librería que contiene al ScriptLoader src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js , luego utilizamos Sys.require para y especificamos el nombre del componente cliente (o un arreglo de componentes cliente) que queremos cargar. Este control descarga todos los script necesarios en paralelo , permitiendo que la carga sea más rápida que lo normal (normalmente no hay descarga de script en paralelo), evitando bloquear la pagina mientras se renderiza. Cuando están cargados todos los script, se llama al método Sys.onready.

Al ejecutar el ejemplo 1 vamos a ver lo siguiente cuando analicemos el tráfico con Firebug:

Como ves, se estan cargando los script y sus correspondientes dependencias y en paralelo :)

2) Carga Perezosa de Script

Como no todo hay que cargarlo siempre al inicio, ya que por algún motivo, es posible que debido a la lógica de nuestro front-end. Veamos el Script:

<html>
<title>ScriptLoader Demo 2</title>
<head>
    <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
            type="text/javascript"></script>
    <script type="text/javascript">

        Sys.Debug = true;
       //Carga Demorada
        function doSomething() {
            alert('Carga Demorada');
            Sys.require([Sys.scripts.DataContext]);
        };
    </script>
</head>
<body>
    <input type="button" onclick="doSomething()" value="ClickMe!" />
</body>
</html>

En este caso, al momento de presionar el botón, se van a cargar los archivos :), mostrando el mismo resultado que la foto tomada con FireBug anteriormente.

3) Carga de Script Combinados

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
            type="text/javascript"></script>
    <script type="text/javascript">
        Sys.Debug = true;
        //Carga normal 
        function cargaNormal() {
            Sys.require([Sys.scripts.Core]);
            Sys.require([Sys.scripts.ComponentModel]);
            Sys.require([Sys.scripts.Network]);
            Sys.require([Sys.scripts.Serialization]);
            Sys.require([Sys.scripts.History]);
            Sys.require([Sys.scripts.Globalization]);
            Sys.require([Sys.scripts.WebServices]);
        };        //Script Combinados
        function cargaCombinado() {
            Sys.require([
              Sys.scripts.Core,
              Sys.scripts.ComponentModel,
              Sys.scripts.Network,
              Sys.scripts.Serialization,
              Sys.scripts.History,
              Sys.scripts.Globalization,
              Sys.scripts.WebServices
       ]);
    };
    </script>
</head>
<body>
  <input type="button" onclick="cargaNormal()" value="cargaNormal" />
  <br />
  <input type="button" onclick="cargaCombinado()" value="cargaCombinado" />
</body>
</html> Podemos darnos cuenta de la diferencia de la sentencia, en el primer caso son Sys.require independientes , en el segundo caso, que sería el de Script Combinados es solo un Sys.require que recibe una colección de componentes clientes.

 Veamos la diferencia con FireBug:
Opción carga normal:

Opción Scripts Combinados

En este caso hay una pequeña reducción de tiempo (medio segundo), la mayoría de este tiempo es parte de resolver al servidor y obtener los archivos individuales.

4) Carga de Script Personalizados

Muchas aplicaciones basadas en Ajax tienen comportamientos que no se ejecutan al iniciar la página, por lo que no es necesario cargar todos los script de la página en un inicio, solo cuando se necesita, evitando el retrazo del render hasta que se carguen todos los scripts.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ScriptLoader Demo CustomScript</title>
   <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
           type="text/javascript"></script>
    <script type="text/javascript">
        function Saludar() {
            Sys.loadScripts(["MyScripts/Script1.js",
                             "MyScripts/Script2.js",
                             "MyScripts/Script3.js"], 
                    function () {
                             Saludo1();
                             Saludo2();
                             Saludo3();
            });
        }
    </script>
</head>
<body>
 <input type="button" onclick="Saludar()" value="Saludar" />
 <br />
</body>
</html>

function Saludo1() {     alert("Hola desde Script1.js!"); }

Ahora ejecutamos , presionamos el botón saludar y revisamos nuevamente en FireBug:

Existe la posiblidad tambien, que veremos más adelante, podemos especificar las dependecias de nuestros propios script, pero eso lo vamos a ver en otro post :)

Saludos!
Gonzalo

[Charlas] “Técnicas Ninja de Optimización de Web & ASP.NET AJAX” –Instituto Virginio Gómez

Hola!, te quiero invitar, a una charla en el Instituto Virginio Gómez, sede Concepción, el Viernes a las 11 de Junio , a las 17:00 horas. El tema será:

Titulo: “Técnicas Ninja de Optimización de Web & ASP.NET AJAX”

Resumen: En esta sesión revisaremos algunas reglas de Oro dentro de la Optimización Web /ASP.NET AJAX todo esto acompañado de muchas demos para examinar y discutir las mejoras conseguidas. Compresión HTTP, CSS Sprites , Script Combinados, el uso de CDN, Minificación de Script y CSS, así como también tips para optimización de Microsoft AJAX , todas técnicas que puedes poner en práctica para hacer volar tu Sitio Web

Será una buena oportunidad para compartir experiencias sobre optimización de los front-end y revisar el camino a seguir para  utilizar buenas prácticas en el tema.

PD:Como siempre y quieres charlas en tu Universidad o lugar de trabajo, con gusto voy  :), solo nos ponemos de acuerdo.

Saludos,
Gonzalo

[WebCast] MSDN: Biblioteca Microsoft Ajax, jQuery y Visual Studio 2010

Hola!, quiero invitarte a un Webcast que voy a dar el próximo Miércoles 2 de Junio, a las 10:00 am  Bogotá. – 11:00 am Chile – 17:00 am Madrid

Información general del Evento

Aprenda 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.
Aprenda sobre 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 observe cómo ASP.NET AJAX fue diseñado para trabajar uniformemente con  jQuery, cómo puede crear controles ASP.NET Ajax directamente de jQuery y cómo puede utilizar la biblioteca jQuery en el código ASP.NET Ajax.
Conozca las nuevas características de Visual Studio 2010 y como crean en forma más productiva aplicaciones de Ajax.

Regístrate en:

https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032452574&EventCategory=4&culture=es-AR&CountryCode=AR

Nos vemos allá!!
Saludos,
Gonzalo