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

image

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

[Charlas] Charlas en la Universidad del Bío-Bío, Concepción.

Hola que tal? , quería comentar que el próximo miércoles 9 y miércoles 16 de junio voy a estar en la Universidad del Bío-Bio , Sede Concepción con dos charlas sobre ASP.NET, te dejo la info por si quieres ir:

Charla 1

Titulo: “Novedades de ASP.NET 4.0”
Fecha: Miércoles 09 de Junio del 2010 – Hora 18:30 horas
Lugar: Universidad del Bío-Bío, Auditorio Facultad de Ciencias Empresariales( 2° Piso) – Avenida Collao Nº 1202
Abstract:
Conoce las principales novedades en el nuevo release de ASP.NET, en su versión 4.0, revisaremos nuevas características que nos permiten aumentar nuestra productividad al momento de desarrollar WebSites, veremos demos del nuevo manejo del ClientID, mejoras en el manejo del Viewstate, Routing, Microsoft Ajax Library, Client Templates, Dyinamic Data WebSite y más”

Charla 2

Titulo: “Técnicas Ninja de Optimización de Web & ASP.NET AJAX”
Fecha: Miércoles 16 de Junio del 2010 – Hora 18:30 horas
Lugar: Universidad del Bío-Bío, Auditorio Facultad de Ciencias Empresariales( 2° Piso) – Avenida Collao Nº 1202
Abstract:
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

Por lo demás, si quieres estas u otras charlas en tu Universidad, contáctame y vemos como lo podemos hacer, yo no cobro nada por esto :).

[jQuery-Links] Selección de Plugins jQuery de la Semana

Hola!, sería un poco exagerado decir que voy a inaugurar una nueva sección, esto es mucho más simple. Debido a que siempre estoy revisando plugins de jQuery para mis desarrollos, los voy seleccionando de manera de tener una “Biblioteca de Plugins”, y pensé… por que no la comparto!:

Entonces sin más preámbulos acá están:

Selección de 14 Plugins para dar Efectos (hay unos bastante buenos!)
http://webdesignledger.com/tools/14-fresh-and-useful-jquery-plugins

Selección de 30 Galerías de Imágenes con jQuery(como para que nos vayamos olvidando de Flash :P):
http://www.1stwebdesigner.com/resources/ajax-jquery-image-galleries/

Selección de 38 Plugins para crear menús con jQuery:
http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/

Un efecto de Zoom interesante para tus imágenes (parecido al que hice en este blog)
http://www.professorcloud.com/mainsite/cloud-zoom.htm

Efecto de Barra Dock con jQuery:
http://www.wizzud.com/jqDock/index.php?dt=1

Un SliderNav bastante Bueno, tipo Iphone (no tengo Iphone 🙁 , por lo que solo creo que se parece)
http://devgrow.com/slidernav-jquery-plugin/

Colección de Plugins interesantes:
http://www.stumbleupon.com/su/7FSgDc/www.bestfreewebresources.com/2010/05/ultimate-collection-of-useful-jquery.html

Selección de 40 técnicas y Plugins útiles de jQuery:
http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/

Selección de Plugins para el manejo de Tablas (para que parezcan grillas!)
http://javabyexample.wisdomplug.com/web-programming/47-javascript/88-20-best-jquery-table-plugins.html

Eso por ahora, espero que alguno te sirva 🙂
Saludos,
Gonzalo

[Tutorial] Utilizando jQZoom + DataList par dar un toque muy Cool a tus imágenes.

Hace unos días vi una página de compra y venta de productos que lograba un efecto muy cool sobre las imágenes, ,al pasar el mouse por encima de la imagen, se hace un zoom a lo que va debajo del mouse. Bastante útil para mostrar el detalle de algún producto que necesitemos.

Es como el ejemplo de la foto, en donde vemos el detalle de la moto que me compre (jajajja, nah) . Cuento corto, esto es un efecto que se logra con un plugin de jQuery que se llama jQZoom, es bastante bueno y sencillo de utilizar. Puedes ir al sitio del creador desde acá:

http://www.mind-projects.it/projects/jqzoom/

image

Entonces, y por que este post es tutorial vamos crear dos ejemplos, uno con el webcontrol Image y otra con un listview.

CON IMAGE BUTTON

Paso 1 – Configurar la Aplicación

Vamos a hacer referencia a los archivos de jQuery y JQZoom

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>    <script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

Luego agregamos la referencia al CSS de jqzoom

<link rel="stylesheet" href="css/jqzoom.css" type="text/css">

Paso 2 – Utilización 

El uso de jQZoom es sencillo , y es necesario especificar el elemento de anclaje HTML, que  va a generar el zoom revelando una porción de la imagen ampliada.

<body>
    <form id="form1" runat="server">
    <a href="images/CamaroBig.jpg" class="jqzoom" style="">
        <asp:Image ID="Imagen1" 
                   ImageUrl="images/CamaroSmall.jpg" 
                   Title="CAMARO" 
                   Style="border: 1px solid #666;"
                   runat="server" />
   
 </a>
    </form>
</body>
<script type="text/javascript">
    $(function () {
        $(".jqzoom").jqzoom();
    });
</script>

Como vez, agregamos el código necesario, un href  con la imagen grande (camaroBig)  y dentro una imagen que corresponde a la imagen pequeña(la que se muestra como normal). Es importante tener dos imágenes, una grande y otra pequeña, redimensionadas a escala, para que el zoom se vea bien.

Paso 3 -  Probando…

Como siempre, un video vale 25 fotogramas y cada fotograma mil palabras, entonces veamos el video 🙂

CON LIST VIEW

Ya sabemos como implementar este plugin con un webcontrol Image, no difiere mucho con un DataList, para esto vamos a tener una BD con las imágenes. Entonces…

Paso 1: Crear la BD

image

Paso 2: Crear el DataList

 <asp:DataList ID="DataList1" runat="server"
                 DataKeyField="Id" DataSourceID="SqlDataSource1"
                
Width="697px">
   <ItemTemplate>
       <a href=’<%# Eval("ImagenBig") %> class="jqzoom" style="">
        <asp:Image ID="Imagen1"
               
   ImageUrl=’<%# Eval("ImagenSmall") %>
                   title=’<%# Eval("Nombre") %>
                   Style="border: 1px solid #666;"
                   runat="server" />
      </a>
   </ItemTemplate>
</asp:DataList>

<asp:SqlDataSource ID="SqlDataSource1" 
                runat="server" 
                ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
       
        SelectCommand="SELECT [Id], [Nombre], [ImagenBig], [ImagenSmall] FROM [Productos]">
    </asp:SqlDataSource>

Paso 3 – El Video…

Si quieres el código lo puedes descargar acá:
http://cid-053a660afa3473b3.skydrive.live.com/self.aspx/P%c3%bablico/jQZoom.zip

Espero que te sirva!
Saludos,
Gonzalo

Material Charla – Técnicas Ninja de Optimización Web

Hola, quiero dar las gracias por los buenos comentarios que recibí por la charla sobre tips de optimización.  Como me comprometí, comparto la presentación:

Sobre HTTP Watch:
http://geeks.ms/blogs/gperez/archive/2010/04/20/tips-debug-de-mejor-manera-con-ie8-y-http-watch.aspx

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

Sobre Ajax Minifier:
http://geeks.ms/blogs/gperez/archive/2009/11/17/tutoturial-microsoft-ajax-minifier-optimiza-tus-archivos-javascript.aspx

Sobre CompositeScript + ScriptRefenceProfiler:
http://geeks.ms/blogs/gperez/archive/2009/06/04/scriptreferenceprofiler-compositescript-y-pensando-por-que-no-lo-ocupe-antes-optimizaci-243-n-de-request-de-javasscripts.aspx

Descargar los ejemplos de la Charla:

Saludos!
Gonzalo

[Tutorial] JQUERY + ODATA + Excel Power Pivot

image

Introducción

Hola que tal, siguiendo los artículos inspirados en el trabajo del Mega Maestro Stephen Walther,  vamos a revisar la inserción y muestra de datos mediante oData. oData fue desarrollado por Microsoft para ser un estándar abierto para la comunicación de datos a través de Internet. Este estándar es compatible con JSON y REST, protocolos fácilmente abordables con AJAX.OData es lo que antes conocimos como Astoria, y luego ADO.NET Data Services, y es utilizado por Sharepoint Server 2010, Azure, Excel 2010, Sql Server 2008 entre otros.Para aprender más sobre OData, pueden visitar :

http://www.odata.org

http://msdn.Microsoft.com/en-US/Data/bb931106.aspx

Lo mejor de todo, es que cuando utilizamos .NET Framework podemos exponer fácilmente los datos de una BD mediante OData mediante un servicio WCF. La idea es hacer crear una página que sea un CRUD.Para eso, al igual que en el Post Anterior, vamos a crear una Base de Datos (distinta al post anterior, para poder ver las ventajas de ocupar Power Pivot de Excel 2010)

Creando la BD

Vamos a crear dos tablas con una estructura bastante sencilla.

Tabla Películas

image

Tabla Género

image

Y Finalmente la relación entre ellas:

image

Creando el Modelo

Vamos a ocupar Entity Framework para la creación de nuestro modelo, los pasos los expliqué en mi post anterior, pero si no quieres ir a verlos, los pego acá:
Vamos a seleccionar ASP.NET Empty Web Aplication, que como saben, es una aplicación web limpia, sin los templates que nos ofrece Visual Studio 2010.Según nuestro diseño (Figura 1) , tenemos que crear el Modelo de Entidades, para ello vamos a utilizar ADO.NET Entity Framewok. Para esto:

  1. Seleccionamos la opción Agregar nuevo Item del proyecto, seleccionamos ADO.NET Entity Data Model.
    image
  2. Luego le damos un nombre, en mi caso MiAgendaBD, luego seleccionamos “Generar desde una Base de Datos” y seleccionamos nuestra conexión.
    image

  3. Luego podemos elegir las tablas que van a formar parte del modelo, que en nuestro caso es solo una, finalmente vamos a ver nuestro Modelo Generado:

image

Agregar el Servicio WCF

Vamos a nuestro proyecto, agregar->WCF Data Service

image

Una vez agregado el servicio, vamos a agregar el código necesario para que podamos realizar todas operaciones que necesitamos ( para el ejemplo, solo leer e insertar, pero ya sabes, puedes seguir completando el ejemplo), veamos el código:

Imports System.Data.Services
Imports System.Data.Services.Common
Imports System.Linq
Imports System.ServiceModel.Web 

Public Class VideoClubDS
    Inherits DataService(Of VideoClubEntities)

Public Shared Sub InitializeService(ByVal config As DataServiceConfiguration)
        config.SetEntitySetAccessRule(“*”, EntitySetRights.All)
        config.DataServiceBehavior.MaxProtocolVersion =   DataServiceProtocolVersion.V2
End Sub
End Class

Con estos  estamos seteando las reglas de acceso a todas las entidades (por eso el “*”) con todos los permisos (obviamente esto para simplificar el ejemplo, pero puedes dar valores individuales sobre las entidades según las operaciones sobre ellas).

El formulario HTML

Este formulario, como vez, no es ninguna maravilla en diseño, lo que debe hacer es poder ingresar películas a la base de datos y posteriormente desplegar en pantalla el listado de ellas.

image

Como  podrás ver, existe un select Genero (estamos hablando de solo elementos HTML en esto, nada de WebControls y sus lindos Viewstates), el cual debemos enlazar con la tabla Genero que se expone a través de OData.

Obtener los datos de Genero para el Select

Antes que nada vamos a hacer la referencia a los archivos necesarios para utilizar jQuery

<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js” type=”text/javascript”></script> 
<script src=”Scripts/json2.js” type=”text/javascript”></script>

Como ves estamos utilizando Microsoft AJAX CDN (puedes ver mi articulo sobre el tema aquí),

Voy a crear una función Javascript que me permita obtener los datos tanto de Genero y de Películas, esta función la modifiqué de los ejemplos de la documentación de OData que la puedes ver aquí.

<script type=”text/javascript”>
        var ajaxRequest;
        var aValores = new Array();
        $(document).ready(function () {
            GetData(‘Genero’);
        });       function GetData(set) {
            var materializer;
            switch (set) {
                case ‘Genero’:
                    materializer = ObtieneRegistroGenero;
                    break;
               case ‘Peliculas’:
                    materializer = ObtieneRegistroPeliculas;
                    break;
                default:
                    alert(‘Error!’);
            }             if (ajaxRequest != null)
                ajaxRequest.abort(); 
     ajaxRequest = $.getJSON(
     “VideoClubDS.svc/” + set,
     function (data) {
     var array = [];
     $.each(data.d, function (i, item) {
        materializer(array, item)
        if (set == ‘Genero’) { aValores[item.Id] = item.Nombre; }
     });
     }
   );
   }
 
function ObtieneRegistroGenero(array, item) {
            $(‘#dd_genero’).append(‘<option value=”‘ + item.Id + ‘”>’ + item.Nombre + ‘</option>’); 
   }
function ObtieneRegistroPeliculas(array, item) {
            $(‘#listadoPeliculas > tbody:last’).append(‘<tr><td>’ + item.Id + ‘</td><td>’ + item.Nombre + ‘</td><td>’ + item.Duraccion + ‘</td><td>’ + item.Año + ‘</td><td>’ + aValores[item.GeneroId] + ‘</td></tr>’);
         

 Vamos por parte, lo primero que hacemos es declarar la variable ajaxRequest que va a tener el resultado de la ejecución de la llamada asíncrona y aValores que es un arreglo que nos va a servir para armar la tabla con las películas  (ya lo explico más adelante)Luego con $(document).ready(function… nos aseguramos que ya terminó de cargar la página para llenar el select.

Paso siguiente es llamar a la función GetData con el parámetro set, que indica de que tabla queremos hacer el select. Como vez, esta función utiliza una variable materializer que obtiene la referencia  la función, mediante este patrón de diseño es posible utilizar las funciones ObtieneRegistroGenero y ObtieneRegistroPeliculas de igual forma para armar los correspondientes objetos DOM.

En la sección:

ajaxRequest = $.getJSON(
     “VideoClubDS.svc/” + set,

Corresponde a la llamada del servicio, el parámetro set contiene el nombre de la tabla a consultar. La línea con el código:
if (set == ‘Genero’) { aValores[item.Id] = item.Nombre; }

Nos sirve para almacenar los valores de género, de tal manera que cuando obtengamos los valores de la tabla, convirtamos los GeneroID a la descripción correspondiente, lo puedes ver en el código de la función ObtieneRegistroPeliculas :aValores[item.GeneroId], de otra manera, tendríamos que hacer otra llamada al WS. (Estoy averiguando más como hacerlo sin que esto suceda).
Y para terminar, las funciones ObtieneRegistroXXXX arman los DOM, agregando objetos <option> para genero, y <tr> para las películas.

Insertando las Películas

Atachamos al botón grabar la función que contiene el comportamiento de insertar. Notar que me equivoqué en la palabra Duración, escribí Duraccion :P. Bueno, acá hacemos la llamada al Servicio VideoClubDS.svc/Peliculas y antes tenemos que serializar el objeto a JSON, para eso utilizamos la librería JSon2:
La librería que usaremos la puedes descargar desde:
http://www.json.org/js.html

 

$(“#btnGrabar”).click(function () {
var oPelicula = { Nombre: $(“#tx_nombre”).val(), Duraccion: $(“#tx_duracion”).val(), Año: $(“#tx_año”).val(), GeneroId: $(“#dd_genero”).val() }; 

var oPelicula = JSON.stringify(oPelicula);
            $.ajax({
                type: “POST”,
                contentType: “application/json; charset=utf-8”,
                url: “VideoClubDS.svc/Peliculas”,
                data: oPelicula,
                dataType: “json”,
                success: insertCallback
            });
        });  

      function insertCallback(result) {
            var nuevaPelicula = result[“d”];
            alert(“La Pelicula se ha grabado con el ID “ +  
            nuevaPelicula.Id);
            getPeliculas()
         

      function borraTabla() {
            n = 0;
            $(‘#listadoPeliculas tr’).each(function () {
                if (n > 0) $(this).remove(); n++;
            });
        }

 

    function getPeliculas() {
            borraTabla();
            GetData(‘Peliculas’);
         

Una vez que se ejecuta la función llamamos se ejecuta insertCallback, en donde mostramos el Id de la película recién insertada y llamamos la función getPeliculas, que se encarga borrar la tabla (para que no se repitan las filas al hacer append), desde la fila 1, o si no borraríamos los títulos, y eso no se vería muy bien.

Video Funcionando…

 

Power Pivot

Según las definiciones:

Microsoft PowerPivot es un complemento de análisis de datos de Excel 2010, antes conocido como “Project Gemini”, que proporciona una potencia computacional sin precedentes directamente dentro de Excel 2010.

PowerPivot proporciona su enlace a los usuarios de negocios de BI, mientras permite a las organizaciones monitorear y manejar la colaboración eficientemente usando SharePoint 2010 y SQL Server 2008 basado en herramientas de gestión.

Puedes ver más info en el blog del equipo de Power Pivot
http://blogs.msdn.com/powerpivot/default.aspx y este este excelente post sobre el tema de Juan Alvarado : Uso de oData con Powerpivots como consumidor

En mi caso voy a consumir de manera rápida (sin mucho sentido de la estadística) el servicio, más que nada para que veas las potencialidades del producto.

Elegimos obtener los datos desde un Data Feed

image

 

Luego nos aparece la pantalla del asistente, en donde escribimos la dirección de nuestro servicio y probamos (solo para estar re seguros)

image

Luego seleccionamos las tablas expuestas por el servicio que van a participar en el análisis:

image

y luego se extraen los datos a planillas Excel que puedes utilizar con Power Pivot:

image

Descarga el ejemplo desde acá

Espero que te sirva!
Saludos,
Gonzalo