Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto

Siempre al Día!:

Suscribirse al Blog!

Consultas Técnicas:


En Twitter!


Comunidades Técnicas Chile:

De donde me Visitan?

Locations of visitors to this page

Tech days 2009

CMC

Recent Posts

Tags

Community

Blogs de MVP

Blogs Microsoft

Amigos Geeks

Blogs Imperdibles

GODS

Team Ajax Control Toolkit

Mi Trabajo

Archives

Email Notifications

Hot Topics

[Off-Topic] SDExplorer, Excelente Cliente para SkyDrive

Como ya lo sabes (eso espero) Skydrive nos permite respaldar y compartir nuestros archivos en la nube, este es un servicio dentro de la gama Live de Microsoft, personalmente lo utilizo bastante, de hecho todos los archivos demos de mis artículos están alojados ahí, puedo decidir si son públicos o compartirlos solo con alguien específico.

Ahora bien, siempre ingresaba a la web y subía a los archivos, pero no es lo más cómodo, luego de probar varios clientes , me quedé con:

image

Permite dejar en nuestro equipo una unidad virtual accesible de manera muy sencilla, solo instálalo, has click en el ícono, te va a pedir tu LiveID y listo, tienes acceso a Skydive como una unidad común y corriente :)

image

 

 

 

Descarga el Cliente SkyDrive, SDExplorer 2.0:
http://www.cloudstorageexplorer.com/download.php

Saludos,
Gonzalo

Posted: 12/3/2010 23:33 por Gonzalo Perez | con 1 comment(s)
Archivado en:
IE8 WebSlice con la ultima información de Sismos en Chile

Espero que sea de ayuda, quizás un poco tarde (ojalá) , lo hice utilizando la data de http://earthquake.usgs.gov/ y el artículo http://geeks.ms/blogs/gperez/archive/2010/02/09/tips-como-leer-el-html-de-una-pagina-desde-asp-net.aspx

Está funcional los links sobre los cuadros que representan los sismos,los rojos son los que han pasado en la última hora.

image

Las flechas a ambos lados no funcionan (no lo he arreglado aún) esta en beta, jejeje, puedes descargarlo en:

http://www.sitiosenprueba.com/ie/sismos.aspx

Saludos!
Gonzalo

Posted: 7/3/2010 3:49 por Gonzalo Perez | con no comments
Archivado en:
[Tips] Como detectar el fin de Página con Javascript, a lo Facebook :)

Hola, este post aunque sea sencillo, tiene algo especial (por lo menos para mi, jejeje) debido a que es el primer post post-terremoto que sea articulo, agradezco mucho las palabras de apoyo.

Ahora bien, al articulo.
Te has fijado que en Facebook, al momento de llegar al fin de la pagina, haciendo scroll, se carga nuevo contenido y así sucesivamente, entonces la pregunta, ¿Como puedo simular eso?

Manos a la Obra
Ya que no existe un evento onScroll, que nos podría ser de ayuda, vamos a tener que construir algo parecido y vamos a utilizar document.body.scrollTop, que representa el numero de pixeles que el usuario se ha desplazado hacia abajo desde la parte superior de la página. El tema es que scrollToplo ocupa IE y los demás navegadores utilizan pageYOffset.

image

La idea del ejemplo es tener una grilla y que cuando lleguemos al final , en la barra de estado se setee el texto “Fin de Pagina, ocupe la paginación de la grilla”, y en caso contrario, que indique al usuario que se puede ocupar las barras de desplazamiento.

El siguiente código utiliza la función, “inicioFuncion” como punto de partida, la que será llamada en el tag body: <body onload="InicioFuncion();"> de tal manera que al momento de cargar la página, se ejecute, y podemos observar que esta función setea la barra de estado y luego llama con un setInterval a la función RevisarPosicion cada 300 milisegundos, esto nos dará el efecto del onScroll. La posición que voy establecer es de 260 pixeles, que es totalmente arbitrario al ejemplo (la ventana de IE la voy a modificar en tamaño para que se vea el efecto).

Es importante remarcar que para que el ejemplo funcionara bien, cambié el Doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Ahora el código BLOCKED SCRIPT

<script type="text/javascript">

  var position = 0;
   function InicioFuncion() {
     window.status = "Ocupe las barras de desplazamiento para ir al final de la página";
     setInterval("RevisarPosicion()", 300);
 
 }

   function RevisarPosicion() {
     if (navigator.appName == "Microsoft Internet Explorer") {
        var position = document.body.scrollTop;
     }
else {
        var position = window.pageYOffset;
     }

     if (position > 260) {
         window.status = "Fin de Pagina, ocupe la paginación de la grilla";
     } else {
       
 window.status = "Ocupe las barras de desplazamiento para ir al final de la página";
            }
        }
    </script>

Como es de costumbre te dejo un video, quizás no se distingue mucho, pero lo puedes ver con full Screen y te vas a dar cuenta.

Espero que te sirva y ánimo!!,que recién estoy sintiendo una replica(temblor) al subir esto, ejejjeje
Saludos,
Gonzalo

[Off-Topic]Saliendo del terremoto- Concepcion-Chile

Hola! que bueno escribir, pude salir con mi esposa sin mayores lesiones del terremoto, sinceramente, pense que hasta ahi llegaba, nunca habia pasado por algo parecido (soy de Concepciòn- Chile), no puedo escribir mucho de como fue, pero Concepción se volvio un infierno en algunas noches, lo bueno es que toda la familia esta bien, espero que todo vuelva a la normalidad, para los amigos que vieron el webcast, estaba a punto de grabarlo nuevamente, y vino el terremoto :S.

Los dias siguientes al terremoto jaurias de delincuentes amenazaban las casas para saquearlas, increible, todos se volvieron monos, mucho disparo en la noche,vi gente saqueando supermercados llevandose lavadoras, plasmas, netbooks, etc. Pasamos noches en vela armados improvisadamente para resguardar a nuestras familias, bueno, eso sigue hoy por la noche.

A todos los que sufrieron los problemas de este terrible terremoto, mucha fuerza!

Nunca el hombre esta vencido, su derrota es siempre breve , un estimulo que mueve.... (de inti-illimani),

Saludos a Pcampos también supe recien que esta bien, MVP que vive en Concepción.

Tambien a la gente de Microsoft Chile, que nos enviaron víveres desde Santiago, Muchas gracias!!!!!

Saludos!, nos vemos!!

 

[Tutotorial] PasswordStrenght, indícale al usuario que tal fuerte es su password

El control PasswordStregth nos permite atachar a un textbox la funcionalidad de indicarle al usuario el grado de “fortaleza” de la password que está ingresando, bueno, ya saben, para indicarle que la contraseña “asdasd” o “123” no es la mejor elección (aunque sean de las más repetidas).

El mensaje al usuario puede ser en forma de texto o una barra de progreso, la posición también se la podemos indicar declarativamente, esta mensaje aparece mientras el usuario va escribiendo su password y desaparece cuando se pierde el foco del textbox en donde está escribiendo.

El mensaje al usuario puede ser en forma de texto o una barra de progreso, la posición también se la podemos indicar declarativamente, esta mensaje aparece mientras el usuario va escribiendo su password y desaparece cuando se pierde el foco del textbox en donde está escribiendo

Las propiedades mas importantes que tenemos que tener en cuenta:

  • TargetControlID : Es el ID del TextBox al que vamos a atachar el control
  • DisplayPosition: La posición en donde va a quedar el control respecto al textbox,
  • StrengthIndicatorType: El t.ipo de indicador de “fortaleza” (Texto o Indicador como Barra)
  • PreferredPasswordLength: El largo preferido de la password
  • PrefixText: El texto que va antes de la descripción cuando StrengthIndicatorType= Text , por ejemplo : “Complejidad:”
  • MinimumNumericCharacters: La cantidad mínima de caracteres numéricos en la Password
  • MinimumSymbolCharacters: La cantidad mínima de caracteres símbolos (% $*)
  • RequiresUpperAndLowerCaseCharacters: Especifica la password debe contener mayúsculas y minúsculas.
  • MinimumUpperCaseCharacters: Solo tiene efecto si RequiresUpperAndLowerCaseCharacters esta activado, y especifica la cantidad
  • TextStrengthDescriptions : Lista de valores que corresponden a las descripciones de la complejidad de la password ,separamos por punto y coma, siempre y cuando esté seteado StrengthIndicatorType=Text, el mínimo de valores es dos y el máximo es 10, se ordena de menor a mayor complejidad.
    Ej:"Muy Simple;Simple;Aceptable;Fuerte;Excelente!"
  • TextStrengthDescriptionStyles: Sirve para seatear los estilos de cada valor de la lista de indicadores de TextStrengthDescriptions, e igualmente es una lista separada por punta y coma
  • CalculationWeightings: Lista separada por puntos y coma, de valores numéricos utilizados para determinar la ponderación de las características que hacen más fuerte la password. Deben existir 4 valores especificados, y la suma de estos valores debe ser 100. La ponderación predeterminada es 50;15;15;20. Esto corresponde a que el criterio de longitud de la contraseña corresponde a un 50% del calculo, el criterio numérico corresponde a un 15% del calculo, el criterio sobre mayúsculas y minúsculas  al 15% del calculo, el criterio de caracteres símbolos a un 20% del calculo ,por lo que es el formato 'A; B; C; D' donde A = ponderación largo password, B = ponderación de caracteres numéricos, C = ponderación de mayúsculas y minúsculas, D = ponderación de caracteres  símbolo.

El ejemplo, de una vez por todas!

1) Primero que nada (o antes que todo) vamos a tener un formulario con el clásico “Ingrese su Password”  , el textbox, y agregamos el control presionando Add Extender…

image 

2) Luego seleccionamos PasswordStrength (obvio no?)

image

3) Configuramos las opciones, es mucho más cómodo por código declarativo, según mi opinión.

<cc1:PasswordStrength ID="tx_pass_PasswordStrength" runat="server"
TargetControlID="tx_pass"
DisplayPosition="RightSide"                        StrengthIndicatorType="Text"                        PreferredPasswordLength="10"                        PrefixText="Complejidad:"                        TextCssClass="TextIndicator_TextBox1"                         MinimumNumericCharacters="1"                        MinimumSymbolCharacters="1"                        RequiresUpperAndLowerCaseCharacters="false"                        TextStrengthDescriptions="Muy Simple;Simple;Bien;Fuerte;Excelente"
TextStrengthDescriptionStyles="MuySimple;Simple;Bien;Fuerte;Excelente"                        CalculationWeightings="50;15;15;20" />

Como se ve, existen CSS Asociados cada una de las descripciones, los cuales son:
<style type="text/css">
 
.MuySimple{color: #FF0000;}
  .Simple   {color: #FF6600;}
  .Bien     {color: #FFCC66;}
  .Fuerte   {color: #66CCFF;}
  .Excelente{color: #00CC99;}
</style>

Ahora a probarlo, ya que esta todo ok, Te dejo un video de como funciona, el código lo puedes descargar aquí

El video:

Como siempre, espero que te sirva este artículo, nos vemos!
Gonzalo.

[Noticia] Ajax Minifier 4.0 Release, y con soporte de minificar los CSS! :)

Hace un tiempo escribí el artículo:
http://geeks.ms/blogs/gperez/archive/2009/11/17/tutoturial-microsoft-ajax-minifier-optimiza-tus-archivos-javascript.aspx <-que buen artículo! jejeje

En donde enseñaba a minificar los archivos JS a partir de la herramienta Microsoft Ajax Minifier, la buena noticia es que ahora, está el Release 4.0 y que trae como novedad el soporte para la  minificación de nuestros CSS.

La Minificación por Defecto de CSS Permite:

  • Remover todos los espacios en blanco que no son relevantes
  • Remover todos los comentarios
  • Remover los punto y comas innecesarios
  • Reducir el código de color (por un equivalente,obvio)
  • Reducir representaciones de enteros, eliminando los ceros iniciales y finales.
  • Remover los especificadores de unidad que tienen valor Cero
  • Utilizar nombres de colores  basados estrictamente en  W3C para reducir aún más el código resultante

Y donde puedes conseguir esta herramienta:
Descarga:
http://aspnet.codeplex.com/releases/view/40584

Introducción:
http://geeks.ms/blogs/gperez/archive/2009/11/17/tutoturial-microsoft-ajax-minifier-optimiza-tus-archivos-javascript.aspx

Documentación completa:
http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

Espero que te sea de utilidad, esta muy bueno!
Saludos,
Gonzalo

ASP.NET 4.0 El nuevo RedirectPermanent, otra mejora para los SEO

Para comenzar a hablar sobre este nuevo método de la Clase response, tenemos que hablar sobre como funciona el clásico Responde.Redirect.Cuando utilizamos Response.redirect se indica a nuestro server que haga una redirección temporal a la nueva URL (genera una respuesta HTTP 302) esto no tiene incidencia para el usuario que navega nuestra página, pero los motores de búsqueda asumen que solo es un cambio de URL temporal y no actualizaran sus índices.Existe con ASP.NET 4.0 el método Redirectpermanent que nos va a generar una respuesta HTTP 301, (redirección permanente) que le indica a los SEO que es la nueva URL a indexar.
Pero veamos un ejemplo práctico, vamos a tener una aplicación que utilice los dos métodos (redirect y redirectPermanent) y vamos a ver con Firebug es el resultado de la ejecución de ambos.

image

y el código…

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Response.Redirect("destino.aspx")
End Sub

 

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        Response.RedirectPermanent("destino.aspx")
End Sub Todo listo , entonces …
Presionando el Primer Botón (HTTP 302) , con response.redirect:

 

image

Presionando el Segundo Botón (HTTP 301) , con response.redirectPermanent:

image

Esto es mucho “mejor recibido” por los SEO de los motores de búsqueda como Bing o Google, entonces para tener en cuenta esta mejora :).

El Maestro Ibon Landa también escribió sobre esto en su blog:
http://geeks.ms/blogs/ilanda/archive/2010/01/26/m-233-todo-response-redirectpermanent.aspx

También Eduard Tomas escribió sobre esto enfocado a MVC:
http://geeks.ms/blogs/etomas/archive/2010/02/10/asp-net-mvc-redirecciones-permanentes.aspx

Y un completo articulo sobre las diferencias de ambos métodos HTTP en:
http://www.mattcutts.com/blog/seo-advice-discussing-302-redirects/

Espero que te sirva :)
Saludos,
Gonzalo

[Tips] Medidor de ViewState, mi (in)utilidad gratuita

Bueno, me preguntaron que podría hacer uno con el ejemplo del articulo anterior http://geeks.ms/blogs/gperez/archive/2010/02/09/tips-como-leer-el-html-de-una-pagina-desde-asp-net.aspx , entonces se me ocurrió hacer rápidamente un Medidor de ViewState, que muestre el tamaño del mismo y la relación, en peso, con el total de la pagina.

image

Hay muy poco código pero lo que quiero mostrar es la facilidad para ocupar gráficos en nuestras páginas ASP.NET. Visual Studio 2010 RC1, que ya esta disponible, incluye dentro de la suite de controles al componente Chart. Simplemente es arrastrar a nuestro formulario y usar.

image

Código del Botón [Ver]

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

 

Dim Resultado As String
Dim MyWebClient As New WebClient
Dim ArregloBytes() As Byte
Dim total As Double
Dim vs As Double
Dim oUTF8 As New UTF8Encoding
ArregloBytes = MyWebClient.DownloadData(tx_url.Text)
Try
   Resultado = oUTF8.GetString(ArregloBytes)
   If Resultado.Contains("__VIEWSTATE") Then
    Dim inicio As Integer = Resultado.IndexOf("id=""__VIEWSTATE"" value=")
    Dim subresultado = Resultado.Remove(0, inicio + 24)
    total = ArregloBytes.Length
    vs = subresultado.Substring(0, subresultado.IndexOf("""")).Length
    lb_total.Text = Format(total / 1000, "##,##0.00") & " KB"
   
lb_viewstate.Text = Format(vs / 1000, "##,##0.00") & "KB"                'Armar gráfico
    Dim yValues As Double() = {total, vs}
    Dim xValues As String() = {"Total", "ViewState"}
    Grafico.Series(0).Points.DataBindXY(xValues, yValues)
   Else
    lb_mensaje.Text = "No se encuentra ViewState"
   End If
Catch ex As Exception
    lb_mensaje.Text = "Error"
End Try
End Sub

 

Como vez, son solo 3 líneas para armar el gráfico, la definición de X e Y y agregar a la serie los puntos.

Pruébalo tu mismo, lo hice con Visual Studio 2010 RC1, y el código lo puedes descargar acá

Saludos,
Gonzalo

Posted: 11/2/2010 23:07 por Gonzalo Perez | con no comments
Archivado en: ,,
[Off-Topic] Visual Studio 2010 RC se ajusta a la performance de tu PC

image

Fíjate en la opción Visual Experience, Visual Studio utiliza la aceleración por Hw para acelerar el renderizado, Por eso lo noté mucho más rápido!, Notable!

Saludos,
Gonzalo

Posted: 11/2/2010 4:58 por Gonzalo Perez | con 2 comment(s)
Archivado en:
[Tips] & en Key de Web.Config

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&amp;dos&amp;tres"/>

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

Posted: 9/2/2010 3:12 por Gonzalo Perez | con 3 comment(s)
Archivado en: ,,
[Tips] Como leer el HTML de una Pagina desde ASP.NET

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)

image

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

Saludos!
Gonzalo

Posted: 9/2/2010 3:05 por Gonzalo Perez | con 3 comment(s)
Archivado en: ,,
[Tips] Multiples DataKeyName en una Grilla (o cuando la tabla tiene una clave compuesta)

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)

<SelectParameters>
    <asp:ControlParameter ControlID="GridView1" Name="ID1" PropertyName="SelectedDataKey.Values[ID1]" Type="Int32" />
    <asp:ControlParameter ControlID="GridView1" Name="ID2" PropertyName="SelectedDataKey.Values[ID2]"  Type="Int32" />        </SelectParameters>

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

Posted: 5/2/2010 13:09 por Gonzalo Perez | con no comments
Archivado en: ,,
Probando Microsoft SEO ToolKit- Free! :)

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 image

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

Posted: 26/1/2010 16:30 por Gonzalo Perez | con no comments
Archivado en:
Exportar Grilla a CSV – Migrado a VB.NET

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.

image

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:

image

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

Posted: 15/1/2010 3:34 por Gonzalo Perez | con 2 comment(s)
Archivado en: ,
Resumen de Post de Optimización Web – Chaloptimaze!
image

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

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:

image

 

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.

image 

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:

image

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:

image

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.

 

<style>
#menu span {
  width:128px;
  height:110px;
  display:inline;
  float:left;
  background-image:url(ejemplo/todo.png);
}
.icono1 { background-position:0 0;}
.icono2 { background-position:-128px 0;}
.icono3 { background-position:-256px 0;}
.icono4 { background-position:-384px 0;}
.icono5 { background-position:-512px 0;}
.icono6 { background-position:-640px 0;}
.icono7 { background-position:-768px 0;}
</style>

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

<div id="menu" style="width:910px; height: 110px;">
  <a href="BLOCKED SCRIPTalert('icono1')" title="icono1">
     
<span class="icono1"></span>
  </
a>
  <a href="BLOCKED SCRIPTalert('icono2')" title="icono2">
     <
span class="icono2"></span>
  </
a>
 
<a href="BLOCKED SCRIPTalert('icono3')" title="icono3">
    <
span class="icono3"></span>
  </
a>
 
<a href="BLOCKED SCRIPTalert('icono4')" title="icono4">
    <
span class="icono4"></span>
  </
a>
 
<a href="BLOCKED SCRIPTalert('icono5')" title="icono5">
    <
span class="icono5"></span>
  </
a>
 
<a href="BLOCKED SCRIPTalert('icono6')" title="icono6">
    <
span class="icono6"></span>
  </
a>
 
<a href="BLOCKED SCRIPTalert('icono7')" title="icono7">
    <
span class="icono7"></span>
 
</a>
</div>

Ahora veamos el resultado en FireBug con FireFox.:

image

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

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

image

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>

image

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):

image

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

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.

image

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.

image

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

image

 

Luego seleccionamos ValidatorCalloutExtender

image

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.

image

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:

<style>
  .ajax__validatorcallout div, .ajax__validatorcallout td
     {
            background-color: LightSteelBlue;
            border: 1px solid Blue;
        }
</style>

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:

image

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

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.

image 

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:

image

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

image

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

image

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.

image

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

image

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:

image

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

Club.Net UOC : Conoce las novedades de ASP.NET 4.0

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

Más artículos Página siguiente >