[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

[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

[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

[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