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 :).
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/
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
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
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
Tabla Género
Y Finalmente la relación entre ellas:
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:
- Seleccionamos la opción Agregar nuevo Item del proyecto, seleccionamos ADO.NET Entity Data Model.
-
Luego le damos un nombre, en mi caso MiAgendaBD, luego seleccionamos “Generar desde una Base de Datos” y seleccionamos nuestra conexión.
-
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:
Agregar el Servicio WCF
Vamos a nuestro proyecto, agregar->WCF Data Service
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.
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
Luego nos aparece la pantalla del asistente, en donde escribimos la dirección de nuestro servicio y probamos (solo para estar re seguros)
Luego seleccionamos las tablas expuestas por el servicio que van a participar en el análisis:
y luego se extraen los datos a planillas Excel que puedes utilizar con Power Pivot:
Descarga el ejemplo desde acá
Espero que te sirva!
Saludos,
Gonzalo