Chalalo Land

[Tips] & en Key de Web.Config

Gonzalo Perez — Tue, 09 Feb 2010 02:12:08 GMT

En la seguidilla de tips para los que se van iniciando y de repente tienen se les presenta un problema, el tener un símbolo en el value de un key del appSettings. Ya que si tienes:

<add key="miclave" value="uno&dos&tres"/>

Es incorrecto y arroja un error en tiempo de compilación, entonces a lo que hay que reemplazar es:
<add key="miclave" value="uno&dos&tres"/>

Es decir, & por & <- Fácil verdad?
Bueno, espero que esto les pueda ser de utilidad :)
Saludos,
Gonzalo

[Tips] Como leer el HTML de una Pagina desde ASP.NET

Gonzalo Perez — Tue, 09 Feb 2010 02:05:42 GMT

Pregunta repetida, por lo tanto amerita post, acá te dejo el código y la explicación.

Para esto vamos a utilizar la clase WebClient de System.NET que nos provee métodos para enviar y recibir datos desde un recurso identificado mediante el URI. Luego a descargar los datos y dejarlos en un arreglo de Bytes para luego obtener el texto HTML encodeado. Por último este código HTML lo asignamos aun TextBox Multiline para ver el resultado.

El código necesario es simplemente:

Dim MyWebClient As New WebClient
Dim ArregloBytes() As Byte
ArregloBytes = MyWebClient.DownloadData(http://www.bing.com/)
Dim oUTF8 As New UTF8Encoding
resultado.Text = oUTF8.GetString(ArregloBytes)

Posteriormente puedes buscar cadenas de texto, en el caso que necesites “replicar” algunas cosillas, ejejeje.

Saludos!
Gonzalo

[Tips] Multiples DataKeyName en una Grilla (o cuando la tabla tiene una clave compuesta)

Gonzalo Perez — Fri, 05 Feb 2010 12:09:06 GMT

Hola que tal?, ya que me han formulado esta pregunta varias veces, quiero dejarla como tips, no es que no me gusta que me pregunten, pero de este modo, la info está accesible más rápidamente.

El gridview que conocemos , es un control que es muy potente, obviamente podemos potenciarlo más y algunas empresas como Telerik tienen su propia implementación mucho más potente. Una de las características más importantes es su facilidad de uso y de configuración en escenarios “Cero Código” para agregar comportamientos de Eliminacion, Modificación y selección. Esto es bastante sencillo cuando se tiene que la grilla está mostrando datos de una tabla que tiene una clave principal que no es compuesta, como por ejemplo un ID Correlativo, pero algunas veces, tenemos que la grilla tiene una clave principal compuesta, este escenario es totalmente soportado por nuestra grilla.

Una de las propiedades de la grilla, necesario para poder agregar declarativamente los comportamientos es el DataKeyName, que representa el campo clave de la grilla. Ahora bien, si tenemos una clave compuesta el DataKeyName sería algo así:

DataKeyNames="ID1,ID2"

Hasta el momento todo bien, ahora, si tenemos otro control Gridview, para un maestro detalle, en el que tenemos que la selección de la primera grilla, nos muestra los detalles para la segunda grilla, (voy a utilizar un SqlDataSource), vamos a tener el SelectCommand:

SelectCommand="SELECT IDDET, GLOSA_DET FROM DETALLE WHERE ID1_DET = @ID1 AND ID2_DET=@ID2"

y la los parámetros: (acá está lo distinto, ya que el asistente no nos permite hacer esto, tenemos que hacerlo a mano)

Como ves, se extrae del SelectDataKey, los dos parámetros para poder hacer el select.

Ahora bien, si lo que necesitas es , por medio de código programático, obtener estos valores entonces tenemos:

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged

SqlDataSource2.SelectParameters(0).DefaultValue = GridView1.DataKeys(Me.GridView1.SelectedRow.RowIndex).Values(0)

SqlDataSource2.SelectParameters(1).DefaultValue = GridView1.DataKeys(Me.GridView1.SelectedRow.RowIndex).Values(1)

End Sub

En donde SqlDataSource2 es el DS de la grilla detalle, y GridView1 es la grilla con los datos del Maestro.

Como vez, es bastante sencillo, espero que te sirva el Tip :)

Saludos,
Gonzalo

Probando Microsoft SEO ToolKit- Free! :)

Gonzalo Perez — Tue, 26 Jan 2010 15:30:00 GMT

Holas,Ya hace un tiempo que el posicionamiento web ha tomado un papel muy importante , la optimización de nuestras paginas para que los SEO puedan indexar más y de mejor en manera nuestro sitio web, de manera que el usuario al momento de buscar en Google, Bing, por ejemplo.

Microsoft SEO Tookkit es una herramienta gratis, que la puedes descargar mediante WPI, se instala en el IIS y puedes hacer los análisis de tus sitios web, puedes obtener reportes de rendimiento y del estado de optimización de tu sitio en relación a los SEO

La idea principal de Microsoft SEO:

Aumentar el tráfico del sitio web y de Ingresos
Analizar tu sitio web y encontrar maneras de aumentar su número de visitas. Utilizar las recomendaciones de SEO para mejorar el tráfico y aumentar tu flujo de ingresos.

Influencia y actualización de motores de búsqueda
Controlar el acceso y la visualización de su contenido en los resultados de búsqueda. Mantener los motores de búsqueda con la última información de su sitio web.

Mejorar la experiencia del Usuario
Descubrir y resolver problemas comunes en el contenido de su sitio web y de diseño para mejorar su experiencia de usuario final. Que sea fácil para sus clientes a encontrar lo que estás buscando.

Visita la página

http://www.microsoft.com/web/seo/

Un video Demostrativo de como utilizarlo:

Como puedes ver, tienes posibilidad de examinar tu sitio de manera muy acabada, para obtener un reporte completo sobre los problemas de tu WebSite.

Espero que te sirva esta herramienta :)
Saludos,
Gonzalo

Exportar Grilla a CSV – Migrado a VB.NET

Gonzalo Perez — Fri, 15 Jan 2010 02:34:00 GMT

Hola, primero que nada, quiero aclarar que no soy el Dueño de este código, de hecho un lector de mi blog me posteó el ejemplo que estaba en C# y lo necesitaba en VB.NET. Resulta que al traducirlo automáticamente con el gran TELERIK Converter.

El articulo original está en:
http://www.arzion.com/empresa-de-internet/posts/Exportar-un-GridView-a-CSV-con-ASPnet
Realizado por Ernesto Traversaro

Luego al traducirlo el Lector lo probó y dijo:

Luego otra persona me dijo lo mismo y lo revisé y era simplemente que una variable se estaba declarando dos veces entonces lo cambié y resulto:

Protected Sub ExportarCSV()
        Response.Clear()
        Response.Buffer = True
        Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.csv")
        Response.Charset = ""
        Response.ContentType = "application/text"
        GridView1.AllowPaging = False
        GridView1.DataBind()
        Dim sb As New StringBuilder()
        Dim k As Integer = 0
        While k < GridView1.Columns.Count
            sb.Append(GridView1.Columns(k).HeaderText + ","c)
            System.Math.Max(System.Threading.Interlocked.Increment(k), k - 1)
        End While
        sb.Append(vbCr & vbLf)
        Dim i As Integer = 0
        While i < GridView1.Rows.Count
            Dim k2 As Integer = 0
            While k2 < GridView1.Columns.Count
                sb.Append(GridView1.Rows(i).Cells(k2).Text + ","c)
               System.Math.Max(System.Threading.Interlocked.Increment(k2), k2 - 1)
            End While
            sb.Append(vbCr & vbLf)
            System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1)
        End While
        Response.Output.Write(sb.ToString())
        Response.Flush()
        Response.End()
    End Sub

Entonces lo hice un ejemplo con VB.NET
PUEDES DESCARGARLO ACA

Y si quieres ver el articulo original C# esta en:

http://www.arzion.com/empresa-de-internet/posts/Exportar-un-GridView-a-CSV-con-ASPnet

Saludos,
Gonzalo

Resumen de Post de Optimización Web – Chaloptimaze!

Gonzalo Perez — Wed, 13 Jan 2010 17:25:00 GMT

Hola, ya que algunos me han preguntado “tienes algún tip de optimización” voy a publicar un pequeño resumen de algunos de los post más relevantes sobre este tema que he realizado. Obviamente todavía estoy en deuda y es en esta época del año en donde puedo escribir más post, así que próximamente … más tips de optimización!

Dejo entonces algunos links de este humilde blog:

Saludos!
Gonzalo

Optimizando tu Website con CSS Sprites, caso práctico

Gonzalo Perez — Mon, 04 Jan 2010 04:12:00 GMT

Una de las Reglas de Oro en el temas de performance, tiene que ver con tratar de disminuir la cantidad de HTTP Request de nuestro sitio web. Para ser más claro, cada vez que se carga una imagen, un archivo Js, un archivo flash, un css, etc, existe una petición al servidor, y como en toda petición hay un proceso de conexión, solicitud y recepción que tiene un costo asociado, sumado a que existen cabeceras por cada petición, no es lo mismo tener que descargar 1 archivo de 100Kb que 10 de 10Kb , ya que este último caso, va a tomar más de 100Kb para su descarga ( y sumémosle el tiempo asociado).

Es aquí en donde nos sirven los CCS Sprites, la idea es similar a la Tabla Ouija, en donde tenemos una “tabla” con todos los símbolos que necesitamos y apuntamos a uno en particular (bueno, en la Ouija son los demoniacos espíritus)

El Caso Práctico

Vamos a tener una barra de menú en nuestra página web, que tiene los siguientes elementos:

El peso total de estas imágenes es de 128 KB, por otra parte se puede ver una imagen que se llama Todo.png, esta imagen contiene un solo “lienzo” con todas las imágenes individuales que he mostrado. El hecho de que pese menos, sin ser especialista en imágenes, creo que es por la info asociada a la imagen propiamente tal. (Si no estoy en lo correcto, me ayudan) . Sin embargo esto no nos va a detener en nuestro análisis, ya que esto lo consideraremos al momento de obtener los resultados.

Para analizar los cargas y los resultados vamos a utilizar FireBug de FireFox.

Página “Normal” Sin CSS Sprite

Al ejecutar la página, con imágenes independientes vemos que su comportamiento en tema de carga es la siguiente:

Existen 8 HTTP Request, y cada imagen tiene su procesamiento en términos de peticiones. El tamaño final es 125 Kb descargados y la duración es 4.08Seg. Según Firebug, fíjate en la petición del Icono7 siguiente:

Con esto podemos ver que la mayor parte del tiempo, en cada petición de imágenes es más el tiempo de conexión de la recepción de la imagen propiamente tal!

Página con CSS Sprite

Vamos a escribir el estilo que nos va a servir para crear nuestro ejemplo, el siguiente, a grosso modo puedes ver que se visualizan sectores de la imagen, de un ancho de 128px de tal manera de completar el menú completo. Cada uno de estos estilos se los asignaremos a etiquetas span.

En el siguiente código vemos las etiquetas Span y el contenedor DIV que vamos a utilizar.

Ahora veamos el resultado en FireBug con FireFox.:

Solo dos pedidos, el HTML propiamente tal y luego la imagen, también al igual que en el caso anterior, hay un tiempo de Conexión alto en comparación al de recepción, pero esto se hace solo una vez, el resultado es claro, 109Kb de descarga con un tiempo de 2.12s.

Método	Tamaño (Kb)	Tiempo (Seg)
Normal	125Kb	4.08
CSS Sprite	109Kb	2.12

Es decir, un 48% de reducción en el tiempo, claramente no es relevante que sean 16 kb menos, (ya que según ese razonamiento, la de regla de tres simple, el CSS Sprite debería demorar 3.5 seg)

Obviamente se nos viene a la cabeza los image maps, aunque no son aplicables en todas las ocasiones como los CSS Sprites , por ejemplo cuando las imágenes no están físicamente organizadas en la página una al lado de otra, o puedes estar en el header y otra en el footer de la página.

Entonces , para concluir, esta además de otras técnicas que ire posteando en el futuro, son consideradas reglas de oro en la optimización de sitios web, estas reglas no las escribí yo!, si no que las aprendí y quiero compartirlas. De donde las aprendí? Del Libro “High Performance Web Sites” del maestro Steve Souders, lectura obligada para un Ninja Web.

Espero que te haya servido!
Nos vemos!

Microsoft AJAX CDN, Mejoras de rendimiento a considerar

Gonzalo Perez — Sat, 02 Jan 2010 07:05:00 GMT

Al utilizar Microsoft AJAX CDN, podemos mejorar significativamente el rendimiento de nuestras aplicaciones AJAX. Los Script se almacenan en servidores ubicados al rededor de todo el mundo (según la página http://www.asp.net/ajaxlibrary/CDN.ashx, garantizando disponibilidad y velocidad. Ademas el CDN de Microsoft AJAX (que incluye JQuery) envía los script ya comprimidos, (por si nuestro hosting no tiene configurado esta opción), además permite a los navegadores la reutilización de los archivos Javascript en cache de los sitios web que se encuentren en distintos dominios. Todo lo anterior se suma a que por HTTP, hay un límite de peticiones concurrentes hacia un mismo dominio, esto incluye imágenes, css, archivos Flash, y por supuesto, los archivos JS.

Vamos a ver una pequeña demo, no tiene imágenes ni css, ni nada, pero vamos a darnos cuenta que los contenidos vienen comprimidos desde el servidor, en este caso voy a utilizar JQuery y FireBug para obtener los tiempos y tamaños de descarga.

El Código lo obtuve de la Página http://www.asp.net/ajaxlibrary/CDN.ashx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery from Microsoft AJAX CDN</title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $( domReady );
    function domReady() {
        $('#btn').click( showMessage );
   }
    function showMessage() {
        $('#message').fadeIn('slow');
    }
    </script>
</head>
<body>
<button id="btn">Show Message</button>
<div id="message" style="display:none">
    <h1>Hello from jQuery!</h1>
</div>
</body>
</html>

Ahora medido con FireBug,
Sin CDN

Fijémonos en los resultados, estoy referenciando a jquery-1.3.2.min.js es decir la versión de producción, en total 55 KB (es lo que pesa, claro esta) y tiempo total de carga 2.05s.

Con CDN
Cambiando la línea de código en donde se hace la referencia a JQuery por:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

Esta vez, vemos que el tiempo de carga disminuyo, por que? por que la habilitación de compresión de los archivos JS de los servidores de CDN permitió que el mismo archivo, ahora tuviera la mitad del tamaño, solo 25KB, y el tiempo de carga 1.38s.
La segunda vez, ya que esta en cache, es menor aún el tiempo (1.2 Seg):

Ahora bien, es bueno comenzar a pensar pensar en distribuir nuestro contenido estático, lo que logra una reducción en los tiempos de respuesta, por lo menos en tema de referencias a archivos JS se hace sencillo con Microsoft Ajax CDN.
Por ahora no vamos a profundizar más (más adelante si) por mientras te dejo la página para que lo compruebes tu mismo y veas los beneficios de incluir este concepto en tus desarrollos, no solo con JQuery, si no con toda la gama de Script que podemos referenciar (http://www.asp.net/ajaxlibrary/CDNAjaxLibrary0911.ashx)

Acá está la página , tiene muchos ejemplos:
http://www.asp.net/ajaxlibrary/cdn.ashx

Saludos,
Gonzalo.

TUTORIAL - ValidatorCallOut Extender – Mejorando los avisos al usuario

Gonzalo Perez — Sat, 02 Jan 2010 05:29:00 GMT

Siguiendo el tema de los tutoriales de AJAX Control Toolkit, vamos a revisar el ValidadorCallOut Extender, de manera de mejorar el Look& Field de los mensajes de error como los que nos entregan los controles XFieldValidator.

Entonces vamos a utilizar el mismo ejemplo del articulo sobre AutoComplete Extender (que? que no lo viste? bueno, acá esta:

http://geeks.ms/blogs/gperez/archive/2009/12/31/tutorial-autocomplete-extender-autocompletando-desde-la-base-de-datos.aspx

Ahora vamos a agregar un control RequiredFieldValidator asociado al textbox tx_buscar, de tal manera que nos valide que debe existir texto en el control textbox antes de hacer postback.

Ahora veamos el Control…

La idea es que consigamos el efecto de este control, y luego que lo personalizaremos un poco para que se vea con los colores que nosotros necesitemos.

Si ves el ejemplo que hay en :
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx

Vamos a ver algo este formulario, y como ves, el control nos permite mejorar la forma del mensaje de error.

Volviendo a nuestro ejemplo, hacemos el Paso Uno, que sería extender el control RequiredFieldValidator.

Luego seleccionamos ValidatorCalloutExtender

Recuerda que debes setear la propiedad del RequiredFieldValidator, Display : None , o de otra manera vas a ver ambos mensajes de error al momento de validar tu form.

Paso Dos, Personalizar el control

Pero puede ser, como me pasó a mi, que los colores institucionales de la empresa en donde estaba desarrollando, no se ajustaban con el amarillo, debía ser verde agua (típico color pastel) así que vamos a setear este control.

Color de Fondo
Para revisar los CSS que se utilizan en el control, te recomiendo que utilices la IE Developer Toolbar de IE8 , que la puedes ocupar presionando F12, o también puedes utilizar el excelente FireFug de FireFox. Revisando podemos ver que el estilo que define el fondo es:

Importante: Recuerda agregar este estilo después del Control ScriptManager, el motivo es que el ScriptManager va a generar todos los archivos js, xml y css para los controles que utilicen ajax, entonces si tu este estilo aparece en el código antes del ScriptManager, va a ser sobrescrito y vas a ver siempre el color por defecto del control.

Iconos
Vamos a poder cambiar los iconos que corresponden al Alerta (signo de exclamación) y también la x (cerrar el mensaje) seteando las propiedades en el código declarativo, estos cambios también los puedes hacer desde el cuadro de propiedades del control RequiereFieldValidator.

WarningIconImageUrl="error.png"
CloseImageUrl="cerrar.png"

Obviamente yo tengo estas imágenes en mi proyecto, están en la misma ruta de la página que tiene el control.
Luego vemos la diferencia:

Eso es todo!
DESCARGA EL EJEMPLO ACA
Espero que te sirva, cualquier duda, me avisas!
Saludos,
Gonzalo

TUTORIAL- AutoComplete Extender, Autocompletando desde la Base de datos

Gonzalo Perez — Thu, 31 Dec 2009 22:14:00 GMT

Si bien muchas veces hablamos de lo último que viene saliendo, también hay que darse un tiempo de hablar sobre lo que está y se utiliza poco, he visto a varios desarrolladores ASP.NET que no aprovechan este herramienta del Ajax Control Toolkit, de hecho fue por esto que me propuse la tarea de hacer un ScreenCast y un artículo que cada uno de los controles del Ajax Control Toolkit. Pero basta de hablar de mi, hablemos del Control AutoComplete.

Recuerda siempre que puedes ver los demos, y bajar la Suite en el sitio de ASP.NET

Cual es la Idea del Control

La idea es que puedas tener una funcionalidad muy similar a la que tienes en Google, que va completando con sugerencias, a medida que vas escribiendo en la caja de texto.

Nuestro Ejemplo, un buscador de películas

EL primer paso va a ser crear nuestra base de datos de Películas, voy a agregar unas 15 películas para tener datos, la estructura es la siguiente:

Nuestro segundo Paso va a ser la creación de la Interfaz de Usuario. (Los colores son simple casualidad)

Nuestro tercer paso , será crear el WebService que nos va a permitir obtener los datos para el autocompletar:

Luego, Cuarto Paso va a ser codificar nuestro WebService:

<WebMethod()> _

Public Function ObtListaPeliculas(ByVal prefixText As String, ByVal count As Integer) As String()

Dim con As New SqlConnection (ConfigurationManager.ConnectionStrings("EjemploConString").ConnectionString)

Dim comando As New SqlCommand("select PeliculaNombre from Peliculas where PeliculaNombre LIKE '%' + @param + '%' ", con)
comando.Parameters.AddWithValue("param", prefixText)
        Dim dr As SqlDataReader
        comando.Connection.Open()
        dr = comando.ExecuteReader
        Dim lista As New List(Of String)
      While dr.Read
            lista.Add(dr.Item("PeliculaNombre"))
        End While
        comando.Connection.Close()
        Return lista.ToArray
    End Function

Si bien el código no quedo muy ordenado en el post, veamos a grosso modo lo que realiza, los parámetros de entrada son obligatorios, y aunque no los estamos utilizando, como decíamos, deben ir. En el código hacemos una consulta con Like, para ver las coincidencias en cualquier parte del texto del campo PeliculaNombre, luego recorremos estas coincidencias y las vamos guardando en una lista de String, para luego retornarlas, según nuestro ejemplo (y como lo veras abajo) este webservice se va a ejecutar cuando escribamos 2 letras en el Textbox.

Nuestro Quinto Paso , será extender nuestro control TextBox , cabe recordar que yo ya tengo instalado en mi Visual Studio el Ajax Control Toolkit 3.5. Si no lo tienes, debes ir a la página

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

En donde puedes ver una demo del control y además descargar la Suite.

Luego, como decíamos , extendemos el control, y seleccionamos la AutoCompleExtender

Esta acción nos va a generar el siguiente código declarativo, lo cual no es suficiente, deberemos configurar más opciones para que nuestro ejemplo funcione. También recuerda agregar un control ScripManager en tu página, es indispensable para que nuestro control funcione.

Código Generado:

<cc1:AutoCompleteExtender ID="tx_buscar_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServicePath="" TargetControlID="tx_buscar"> </cc1:AutoCompleteExtender>

Y lo que tenemos que configurar:

<cc1:AutoCompleteExtender ID="tx_buscar_AutoCompleteExtender" runat="server" enabled="True"
servicepath="BuscarPeliculas.asmx" minimumprefixlength="2" servicemethod="ObtListaPeliculas" enablecaching="true" targetcontrolid="tx_buscar" usecontextkey="True" completionsetcount="10" completioninterval="200" >
</cc1:AutoCompleteExtender>

Y Veamos los parámetros importantes:

servicepath : Corresponde al nombre del Webservice.
ServiceMethod : Corresponde al nombre del WebMethod del WebService
minimumprefixlength: corresponde a la cantidad mínima de caracteres antes de que se llame al WebService, esto es importante, ya que si dejas la cantidad mínima para un gran conjunto de datos, por la naturaleza del filtro, puede que tu consulta se demore un buen resto antes de entregar los datos.
targetcontrolid: Corresponde al control textbox en el que se va a ingresar el texto.
CompletionSetCount: Corresponde a la cantidad de resultados que quieres que se muestren en el autocomplete.
CompletionInterval : Corresponde a la cantidad de milisegundos antes de que se muestre la lista.

Para ver más detalles puedes ir a:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx

Sexto Paso: Ahora a probarlo!

Al escribir Los por la naturaleza de la Query (La sentencia Like que va a buscar la coincidencia de la cadena de texto en cualquier parte del campo a consultar) vamos a obtener:

Ahora veámoslo en Acción, con un Video :)

DESCARGA TODO EL EJEMPLO ACA

Espero que te sirva, cualquier duda o comentario, no dudes en consultar :)
Saludos y Feliz Año nuevo 2010!

Gonzalo

WebCast para UOC DotNetClub – Novedades de ASP.NET 4

Gonzalo Perez — Tue, 29 Dec 2009 12:44:00 GMT

Hola , tengo el honor de poder dar un Webcast sobre ASP.NET 4.0 para la gente de UOC DotNetClub , le agradezco mucho a Jesus Bosh quien hizo las gestiones. (visiten su blog, esta muy bueno!). Es el 19 de febrero, a las 19:00 horas (Hora Madrid).

El link de Registro es:
http://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032439032&EventCategory=4&culture=es-ES&CountryCode=ES

Información general del Evento
Idiomas:
Español.

Audiencia(s):
Programador/desarrollador de programas.

Duración:
90 Minutos

Fecha de Inicio:
viernes, 19 de febrero de 2010 19:00 Madrid, París

Club.Net UOC : Conoce las novedades de ASP.NET 4.0
Descripción:
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”
Ponente: Gonzalo Pérez

PD: Si estas en Chile, es GMT(-4) por que puedes ver este Webcast a las 15:00 horas.

Si estas en otras país y quieres ver a que hora corresponde en tu zona te recomiendo:
http://www.recursosvoip.com/comun/worldtime.htm

Los Espero!
Saludos,
Gonzalo

Por si te lo perdiste, la recopilación de ScreenCast de Fin de Año

Gonzalo Perez — Mon, 21 Dec 2009 13:47:00 GMT

Hola! quería hacer una recopilación de los principales screencast que hice durante el año MVP, jejejej, espero que te sean de ayuda, por si no viste alguno. Sobre el control gauget lo tengo algo abandonado, pero ahora retomo funciones. El RoadMap es :

Conectar el control con PHP (ejemplos con Jquery ,Mysql y PHP)
Migrar el control a Silverlight 4

Por mientras te dejo los Screencast de los que hablaba.

Silverlight 3
http://geeks.ms/blogs/gperez/archive/2009/10/18/screencast-mi-primer-desarrollo-con-silverlight-3.aspx

Ajax Control Toolkit – Sea Dragon
http://geeks.ms/blogs/gperez/archive/2009/10/04/screencast-utilizando-el-nuevo-control-seadragon-del-ajax-controltoolkit.aspx

Jquery- Filtar una grilla al presionar una tecla (muy bueno!)
http://geeks.ms/blogs/gperez/archive/2009/05/22/tips-filtrar-un-gridview-con-jquery-al-presionar-una-tecla.aspx

Patrones de Diseño
Prototype:
http://geeks.ms/blogs/gperez/archive/2009/09/01/patrones-de-dise-241-o-screencast-capitulo-4-patr-243-n-prototype.aspx

Builder
http://geeks.ms/blogs/gperez/archive/2009/08/28/patrones-de-dise-241-o-screencast-capitulo-3-patr-243-n-builder.aspx

Factory
http://geeks.ms/blogs/gperez/archive/2009/08/24/patrones-de-dise-241-o-screencast-capitulo-2-patr-243-n-factory.aspx

Singleton
http://geeks.ms/blogs/gperez/archive/2009/08/22/patrones-de-dise-241-o-screencast-capitulo-1-patr-243-n-singleton.aspx

Mi Súper Control ChalaGauget (Me dio varias satisfacciones saber que gente ya lo estaba ocupando, es totalmente gratis, y si necesitas ayuda para configurarlo, solo me escribes y yo participo en ello)
http://geeks.ms/blogs/gperez/archive/2009/07/13/gauge-mi-control-gauge-silverlight-versi-243-n-beta1-liberada-para-siempre-gratis.aspx

Gadget en Windows 7
http://geeks.ms/blogs/gperez/archive/2009/06/25/screencast-de-desarrollo-de-gadgets-en-windows-7.aspx

Saludos,
Gonzalo

[Off-Topic] Recomendable DELL Studio 1557 con Intel Core i7

Gonzalo Perez — Wed, 16 Dec 2009 21:38:00 GMT

Hola, no soy el más tuerca en esto del Hw, sin embargo ya tenia que cambiar mi Notebook Toshiba M105-sp381, es un Centrino duo que se ha portado de maravillas, esta un poco “enchulado” con 4Gb de RAM y disco de 320Gb de 7200 rpm, es un equipo que tiene un poco más de tres años, por lo que tiene mucho código que ha pasado por él , así como también muchas presentaciones (y caídas y todo eso).

Foto del siempre noble Toshiba , junto a Diablo de Blizzard

Elegí dentro de mis posibilidades el excelente DELL Studio 15, con procesador Intel i7, de hecho cuando lo compre vía fono, no estaba esta opción, a los dos días hubo vi una publicidad, y yo, que casi me kag…!, llamé de inmediato a Dell y sin mayor costo cambiaron el procesador (lo que incluye varias mejores, como placa, memorias, etc) , de hecho el valor con un core 2 duo era de 660.000 pesos chilenos y con i7 era de 680.000clp, lo que le incluí , fue una pantalla Full HD, ya saben el código es todo, y los IDE están cada vez más llenos de barras, ejejjee.

Kratos junto al Dell Studio 15.

Ahora un par de índices de performance:

Lo primero que me sorprendió fue el administrador de tareas, los 8 núcleos, (4 físicos) de la máquina, para ser un notebook, ufff, llama la atención.

Índice de Experiencia de Usuario con Windows 7, creo que es muy bueno para un portátil de menos de 2000 dólares no?

Un chekeo de performance rápido con Everest 4.60

Velocidad Lectura de Memoria:

Velocidad de Escritura de Memoria:

Velocidad de Copia en Memoria:

Latencia:

CPU Queen (aca ya bajamos, pero lo estamos comparando con equipos de escritorio)

CPU PhotoWorxx

CPU Zlib

Bueno, luego vi que en Everest podemos sacar un reporte en donde puedes ver en detalle el HW, lo otro que me gusto es que tiene teclado Retro-Iluminado (muy útil!) Batería de 9 celdas (hasta 3 horas y 45 minutos de autonomía) y Tarjeta Gráfica ATI Radeon HD 4570, con 512 Mb Independientes de la RAM Principal.

Baja el Informe de Everest

Tengo que destacar que el vendedor de DELL se portó excelente y me ofreció promociones, que resultaron en un portátil excelente y menor precio, de hecho al final de la compra te piden que los recomiendes, yo lo voy a hacer por la buena onda que tuvo.

Asesor de Ventas: Carlos Cardona
Dirección de Correo Electrónico: carlos_cardona (a_r_r_o_b_a) dell.com
Teléfono: 685-6800 ext: 5086369

No te aburro más :P, que estén bien!
Saludos,
Gonzalo

[Tips] Banner Rotativo con ASP.NET y JQuery

Gonzalo Perez — Sat, 05 Dec 2009 23:22:00 GMT

Hola que tal, acá va un pequeño tips de como hacer un banner que vaya cambiando de manera cíclica, si bien hay controles del lado del server que hacen esto, o la posibilidad de que con el control timer,más un updatepanel podamos realizar esto, creo que es mejor simplificar y no sobrecargar nuestra página con scripts generados.(No digo que sean malas técnicas, de hecho Microsoft Ajax me parece excelente, pero para un banner rotativo, simplifiquemos el asunto)

Primero: La Tabla que contiene los datos de los Banners

En donde vamos a tener el id, el texto alt, la url de la imagen y en link a donde nos vamos a dirigir cuando hagamos click.

Segundo: El script Jquery y Net para el Banner

Vamos a utilizar un plugin para Jquery que lo puedes descargar y ver las demos en http://malsup.com/jquery/cycle/ , tiene muy buenos efectos, en particular esta vez utilizaremos el efecto de Fade.

- Código JavaScript
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
       $('.slideshow').cycle({
           fx: 'fade'
        });
   });
</script>

-Código Declarativo

<div id="banner">
<div class="slideshow">
<asp:Literal ID="literal_banner" runat="server"></asp:Literal>
</div>
</div>

- CSS para el Ejemplo

.slideshow { height: 130px; width: 792px; }
.slideshow img { padding: 0px; }

- Código NET

Voy a utilizar un Dataset más su TableAdapter para que rápidamente tenga acceso a los datos de los banners a mostrar:

Y el código a utilizar:

Dim ta As New MiBannerDSTableAdapters.bannersTableAdapter
   For Each img As MiBannerDS.bannersRow In ta.GetData
     literal_banner.Text &= "<a href='" & img.banner_link & "'><img src='" & img.banner_imgUrl & "' alt='" & img.banner_alt & "' width=""792px"" height=""130px"" /></a>"
   Next
End Sub

Como vez, lo que estoy haciendo simplemente es escribir en el literal el código HTML recorriendo la colección de DataRows que son devueltos por el tableAdapter, obviamente lo puedes hacer también con DataReades, Linq, EF,etc.

Cuarto : Configurar para ocultarlo, puede que el usuario quiera tener toda la pantalla disponible para su uso.

Hay veces que el banner puede molestar al usuario, el cual desea más área de trabajo en la pantalla, entonces sería bueno poder darle esta opción al usuario, por lo que vamos a tener un link de Mostrar y Ocultar Pantalla. La idea es que pinche sobre una etiqueta y se oculte el banner, luego se pinche sobre la misma etiqueta y aparezca nuevamente el Banner.

- Código JavaScript

$("#msg").click(function() {
     if ($("#msg").html() == '[-]Banner') {
         $("#msg").html('[+]Banner');
         $("#banner").slideUp(1500);
     } else {
         $("#msg").html('[-]Banner');
         $("#banner").slideDown(1500);
     }
});

- Etiqueta HTML

<span id="msg">[-]Banner</span>

Resultado Final

El cual va cambiando con un efecto de FADE, además si apretamos [-]Banner se oculta con un efecto de slideUp.

Te dejo entonces el Ejemplo (con base y todo) para que lo pruebes.

DESCARGALO ACÁ

Espero que te haya servido,
Saludos,
Gonzalo

[Tips] JQuery Ribbon 2007

Gonzalo Perez — Fri, 04 Dec 2009 05:01:00 GMT

Hola!, estaba navegando para encontrar unos script de Jquery, y me encontré con este, JQuery Ribbon, esta bastante fácil de usar, quería compartirlo con ustedes, miren que bueno esta:

Con posibilidad de cambiar los tags:

Bájalo desde acá:

http://jqueryribbon.codeplex.com/

Saludos!
Gonzalo.

[Tutorial] Microsoft Ajax Minifier – Optimiza tus archivos Javascript

Gonzalo Perez — Mon, 16 Nov 2009 23:31:55 GMT

Hola, que tal, comienzo una serie de post y screencast sobre como mejorar la performance de nuestras aplicaciones Web, en especial (obviamente) ASP.NET, hay algunos datos que van a servir para PHP, estoy leyendo un libro buenísimo sobre ….

Microsoft Ajax Minifier

Es una herramienta que nos va a permitir mejorar el rendimiento de nuestras aplicaciones que utilizan Javascript, como las ajax (que como ya saben , utilizan bastante), ya que reduce el tamaño de los mismos, admitiendo dos niveles de minificación (diferenciando de compresión).

Normal Crunching
Se realiza el proceso de minificación del js, eliminando los espacios en blanco, puntos y comas y llaves innecesarias, como así también los comentarios (que son necesarios en tiempo de desarrollo, pero en explotación no)

Código Normal

if ( a == 0 )
{
    a = 10;
}

Normal Crunching

if(a==0)a=10;

Hyper Crunching
Se realiza el proceso de minificación, además acortando los nombres de las variables locales , nombres de funciones y eliminando lo innecesario.

Código Normal

function DivideTwoNumbers(numerator, denominator, unsedparameter )
{
    return numerator / denominator;
}

Hyper Crunching

function a(a,b){return a/b}

El Microsoft Ajax Minifier incluye los siguientes componentes:

Herramienta de Línea de Comandos: Nos permite minimizar los archivos JavaScript mediante la línea de comandos.
MSBuild Task: Permite minificar el archivo Javascript en Visual Studio, automáticamente cuando generas tu proyecto.
Componente: Permite usar el Microsoft Ajax Minifier programáticamente.

Ejemplo 1- Pequeña Sección de Código

Vamos a tener un archivo llamado funcion.js el que tiene el siguiente contenido (tomado prestado por ahi…)

function borra(opt) {
    var temp = opt.options.length;
    for (var x = 0; x < temp; x++) {
        opt.options[temp - x] = null;
    }
}

Al aplicar MAM con Normal Crunching, por línea de comandos:

C:\Program Files\Microsoft\Microsoft Ajax Minifier>ajaxmin prueba.js -o prueba.m
in.js.

Veamos los resultados:

El archivo pesa ahora 92 bytes, en comparación con los 123bytes del archivo normal, si vemos el contenido del archivo veremos:

function borra(opt) { for (var temp = opt.options.length, x = 0; x < temp; x++) opt.options[temp - x] = null }

Es decir el archivo final es aprox 25% más pequeño que el original

Ahora a aplicar Hyper Crunching

C:\Program Files\Microsoft\Microsoft Ajax Minifier>ajaxmin -hc prueba.js -o prue
ba.min.hc.js

El archivo pesa 77 bytes, por lo que es 37% menor al archivo original, si vemos el contenido del archivo veremos:

function borra(c) { for (var b = c.options.length, a = 0; a < b; a++) c.options[b - a] = null }

Ejemplo 2 – Archivo Real tomado de un Website

Para este ejemplo “tome prestado” un archivo JS de un Website de una Universidad, el archivo pesa 29.778 Bytes. No vamos a detallar nuevamente el proceso, en lugar de eso , quiero que veamos una tabla comparativa de los resultados:

Utilizar Microsoft Ajax Minifier desde Visual Studio

Cuando terminamos la instalación vemos que se crea un nuevo MSBuild en C:\program Files\MSBuild\Microsoft\MicrosoftAjax

Lo que debemos hacer ahora, es modificar el archivo del proyecto (.vbproj) , para esto lo puedes hacer con notepad o también puedes descargar el proyecto mediante visual studio y luego modificar el archivo, dentro del tag <Proyect> vamos a incluir lo siguiente:

Luego guardar y al recargar el proyecto elije la opción cargar normalmente del cuadro de diálogo:

Ahora al presionar F5(Build) , vamos ver que se genera automáticamente el archivo js min.Si no lo notamos de inmediato, es por que no hemos puesto la opción de ver todos los archivos:

Ahora puedes ver el archivo generado funciones.min.js ya en tu proyecto, todo archivo JS va a ser minificado :).

Una aclaración, esto no es compresión, sino minificación, la compresión la podemos hacer con gzip y obtenemos aún mejores resultados (a costa de tiempo de cpu).

Espero que te sirva!
Gonzalo.

[Tips] RockScroll Una gran ayuda para Visual Studio

Gonzalo Perez — Mon, 09 Nov 2009 14:03:00 GMT

Hola que tal? Quería compartir este tip, que no es nuevo, pero sirve mucho, o por lo menos a mí, se trata de RockScroll, una utilidad para Visual Studio que nos permite ver una vista en miniatura (o mega miniatura) al lado de nuestro Scroll, y destacando en esta sección cuando seleccionamos, por ejemplo una variable, todas las partes dentro del código del documento en donde se repite esa variable, es muy bueno! , nos permite ahorrar tiempo, que es lo que se necesita.

(Imagen tomada del Blog de Scott Hanselman)

Descárgalo aquí:
Rocky Downs' RockScroll for Visual Studio

Puedes ver el Blog de Scott Hanselman, para más detalles.
http://www.hanselman.com/blog/IntroducingRockScroll.aspx

Saludos,
Gonzalo

[Off-Topic] Pensamiento Freak: Hasta cuando vamos a seguir con los íconos de guardar con un disquete?

Gonzalo Perez — Thu, 05 Nov 2009 03:29:30 GMT

¿Cuando fue la última vez que guardaron algo en un disquete?

Solo eso, estoy mutando desarrollando, y de repente me detuve en el botón de guardar, siempre con el disquete, cuando los computadores venían con una unidad de discos! ,las clásicas 1.44. Tengo alumnos que no conocen los disquetes, solo pendrive y dvd, sin embargo el ícono sigue.

Jajajaj esto es muy off-topic y a nadie de interesa!

Saludos y sigo programando….
PD: Apuesto que también les ha pasado, el cerebro como mecanismo de autoprotección ante la diarrea craneo-encéfalica de varios días programando y durmiendo 4 horas diarias puede producir.

Ejemplo paso a paso de Routing en ASP.NET 4.0

Gonzalo Perez — Mon, 26 Oct 2009 15:44:47 GMT

Otra de las características soportadas por ASP.NET 4.0 ,y de las que se habló en el TEchdays 2009, las cuales dije que iba a postear más en detalle, es del Routing, lo bueno es que en la versión de ASP.NET 4.0 es mucho más sencillo de utilizar que en versiones anteriores. La idea principal es que configuramos nuestra aplicación para aceptar request de URLs que no se corresponden a un archivo físico en nuestro servidor. En su lugar, podemos utilizar el enrutamiento para definir direcciones URL que sean significativas para los usuarios , al estilo Wikipedia por ejemplo, y que pueden ayudar con la optimización de los motores de búsqueda (SEO) . Por ejemplo, la URL de una página que muestra los libros en una aplicación existente podría ser similar al ejemplo siguiente:

http://website/libros.aspx?libroid=param
Usando el ruteo, podemos configurar nuestra aplicación para que la siguiente URL sea equivalente:
http://website/libro/nombre/edicion

Obviamente el segundo link es mucho más amigable al usuario, de hecho es por eso que se le llaman Friendly Urls, con una inspección rápida el usuario puede saber de que trata dicha URL.

Si bien este enrutamiento esta disponible en ASP.NET 3.5 SP1, ASP.NET 4.0 incluye unas características que lo hacen más fácil de usar, como veremos en el siguiente ejemplo:

Paso 1 - Crear la Referencia
A System.Web.Routing

Paso 2 – Agregar lo necesario a nuestro Global.asax ( y sí!, en vb.net! jejej)

<%@ Application Language="VB" %>
<%@ Import Namespace="System.Web.Routing" %>
<script runat="server">
    Public Sub RegistraRuta()
        RouteTable.Routes.MapPageRoute("Libro", _
                                       "libreria/{nombre}/{*edicion}", _
                                       "~/libros.aspx")
    End Sub

    Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)
        RegistraRuta()
    End Sub

Pero detengámonos un poco en RegistraRuta, en donde MapPageRoute recibe como parámetros el nombre del esta llave de ruta (keyRoute), la ruta, y la página física a la que será referenciada, no es necesario que la página se llame igual que el prefijo del segundo parámetro,también es posible, si así lo deseamos, pasar como parámetro al método RegistrarRuta una colección RouteCollection. El asterisco al lado del parámetro edición indica que es opcional.

Paso 3 – Recibir los Parámetros

Como se ve, mi aplicación es bastante sencilla, recuerda que debemos tener una página que se llame libros.aspx ya que definimos en el mapa de rutas que todo lo que “entra” por librería, se va a mapear a la pagina libros.aspx.

Ahora necesitamos recibir este parámetro, para esto ocupamos en el evento Page_Load de nuestra página:

Page.RouteData.Values("param").ToString

En nuestro caso:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        lb_nombreLibro.Text = Page.RouteData.Values("nombre").ToString
        If Not Page.RouteData.Values("edicion") Is Nothing Then
            lb_edicionLibro.Text = Page.RouteData.Values("edicion").ToString
        End If
    End Sub

Como podrás ver, tengo dos labels que los voy a setear con los parámetros del ruteo. La página tiene la siguiente forma.

Y al ejecutar la URL en nuestro Browser:
http://localhost:23631/URLRouting/libreria/Necronomicon/666

Estamos ya en condiciones de utilizar nuestro ruteo, muy fácil.

Pregunta: ¿Y si estoy utilizando un DataSource con parámetros de entrada mediante URL?

Podemos setear nuestros DataSource para que reciban desde el parámetro proveniente del routeo, de hecho si agregamos una base de datos, luego una grilla y creamos un sqldatasource, cuando seleccionamos "Where…” para configurar el subconjunto de datos, veremos la opción Route (la última de la lista) y además podemos setear el RouteKey y su valor por defecto:

Luego le damos agregar, lo que nos genera en nuestro código declarativo:

<SelectParameters>
<asp:RouteParameter Name="NombreLibro" RouteKey="nombre" Type="String" />
</SelectParameters>

Probando… Funciona impecable :D

Espero que este tutorial te haya servido para introducirte a las nuevas características de ASP.NET 4.0

Si quieres el ejemplo:
Descárgalo aquí

Saludos,
Gonzalo

[ScreenCast] Mi Primer desarrollo con Silverlight 3

Gonzalo Perez — Sun, 18 Oct 2009 03:01:08 GMT

Hola, tal cual dice el título del Post, hice un ScreenCast con un pequeño desarrollo , (muy pequeño) sobre Silverlight, de hecho es un ejemplo, solo suma dos números, que útil no?jejeje, pero la idea es mostrar lo sencillo que es iniciarse en Silverlight.

Es este ScreenCast veras intro a Diseño con Blend3, Intro a Animaciones, y como configurar la aplicación para que sea ejecutable fuera del Browser.

Entonces, te dejo el video, te recomiendo verlo en pantalla completa, si ve mejor (el video esta en 1024 x 768 y dura ~~entretenidos~~ 18 minutos y 16 segundos.

Demo de Aplicación usando Silverlight from Gonzalo Pérez C. on Vimeo.

Espero que te sirva, nos vemos!
Saludos,
Gonzalo