Chalalo Land

Modernizr–Ejemplo práctico 2 : Utilizando Border Radius, elemento date y atributo required

Gonzalo Perez — Wed, 25 Jan 2012 04:12:00 GMT

Hola que tal, este vez revisaremos tres ejemplos prácticos en donde podemos utilizar modernizer para detectar características del browser y decidir según la disponibilidad de ellas que hacer, como por ejemplo, incluir librerías o polyfills para mitigar el problema. Puedes ver mi articulo anterior en donde iniciamos esta serie de ejemplos prácticos.

Vamos dos problemáticas , la de la archi nombrada característica de HTML5 de bordes redondeados,también el nuevo elemento date formulario y por ultimo la propiedad “required” de los elementos del formulario.

Ejemplo:

Veamos que cuenta con las siguientes características HTML5:

Bordes Redondeados
Campo Date en el formulario
Campo Date es obligatorio

<!DOCTYPE html>
<html lang="en">
<head>

form{

background-color:#9fbfa3;

width:300px;

padding:15px;

border-radius:10px;

}

</style>

</head>

<body>

<label for="TxFecha">Seleccione Fecha</label>

</form>

</body>

</html>

El resultado en un IE9 es:

Si bien existen el soporte a bordes redondeados, no se soporta el campo email ni el atributo “required”

IE7 (Probando con IE9 En modo explorador IE7), no existe soporte para ninguna funcionalidad.

En Chrome (16.0.912.77 m), si bien se soporta además el atributo required, no se soporta el campo date:

Veamos ahora en Firefox 9.0.1, al igual que Chrome, no se soporta el campo date.

El turno de Safari, no soporta required y si bien soporta el campo fecha, lo hace de una manera deficiente a mi parecer, pero al fin y al cabo, lo soporta.

Opera, al menos para nuestro ejemplo, lleva la delantera soportando todas las funcionalidades.

Ahora vemos como arreglar el código para que exista soporte para bordes redondeados para todos los navegadores:

Primero vamos a ver como solucionar el tema del Borde Redondeado.

Los pasos a seguir serán:

Agregar librería Modernizr y jQuery (estoy utilizando versiones de desarrollo)
Agregar, solo para asegurarnos de compatibilidad hacia atrás, las propiedades CSS para border radius propietarias.
Agregar y ejecutar la librería jquery.corner en el caso de que el browser no soporte nativamente la característica de bordes redondeados, de manera que este script proporcione la funcionalidad, notar que es lazy download, es decir solo se va cargar esta librería cuando se necesite.

<!DOCTYPE html>

<head>

form{

background-color:#9fbfa3;

width:300px;

padding:15px;

-moz-border-radius: 10px;

-webkit-border-radius:10px;

border-radius: 10px;

}

</style>

</head>

<body>

<label for="TxFecha">Seleccione Fecha</label>

</form>

</body>

</html>

if (!Modernizr.borderradius) {

$.getScript("js/jquery.corner.js", function () {

$("form").corner();

});

}

</script>

Si ejecutamos esta página en IE7 veremos:

Es decir, ya no hay problema de los bordes redondeados, ahora continuemos con el calendario, para esto vamos a utilizar JqueryUI, el script de calendario, para ello seguiremos los siguientes pasos:

Determinar si el navegador soporta el tag input type=”date” mediante modernizer
En caso que el browser no cuente con esta característica, cargar el script de jQueryUI y asignárselo al campo fecha, además de cargar dinámicamente el CSS asociado.

if (!Modernizr.inputtypes.date) {

$.getScript("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js",
function () {

var css = jQuery("<link>");

css.attr({ rel: "stylesheet",

type: "text/css",

href: "http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/ui-lightness/jquery-ui.css"

});

$("head").append(css);

$("#TxFecha").datepicker();

});

}

Ahora ejecutamos en IE y veremos

Tenemos bordes redondeados y calendario, pero falta el validador, esta vez no usé jQuery-Validator, ya que lo consideré mucho para un solo campo, pero obviamente consideraría JV para la próxima, en este caso, yo mismo hice una validación de requerido, obviamente es solo a modo de ejemplo, le queda mucho ser algo para producción.

if (!Modernizr.input.required){

$("#formulario").submit(function(){

if ($("#TxFecha").val().length==0){

return fallo();

}else{

return normal();

}

});

$("#TxFecha").focus(normal);

}

function normal(){

$("#TxFecha").css("background","white");

$("#TxFecha").css("color","black");

$("#TxFecha").val("");

return true;

}

function fallo(){

$("#TxFecha").css("background","red");

$("#TxFecha").css("color","white");

$("#TxFecha").val("Este campo es necesario");

return false;

}

Luego al probarlo, tenemos lo siguiente:

Si bien no es lo mismo, podemos lograr un efecto más deseado con distintos plugins.

Para terminar veamos las cargas de archivos con los dos navegadores (obviamente todos van a cargar jQuery y Modernizr)

IE7 (todos los polyfills)

IE9(Solo jQueryUI, ya que soporta bordes redondeados)

Firefox(Solo jQueryUI, ya que soporta bordes redondeados)

Chrome(Solo jQueryUI, ya que soporta bordes redondeados)

Opera (No necesita cargar pollyfills)

Como puedes ver, solo se cargan los scripts cuando se les necesita, aumentando el rendimiento.

Espero que les sirva!
Saludos,

[Tips]Ejecutar métodos en paralelo en ASP.NET 3.5

Gonzalo Perez — Mon, 16 Jan 2012 19:41:00 GMT

Hola, en esta ocasión quiero volver a tocar el tema de la ejecución en paralelo de métodos en ASP.NET, que si bien está muy optimizado en la versión 4.5, que aún está en desarrollo, muchos de nosotros no tenemos planes a corto plazo de migrar para aprovechar las ventajas.

Veamos un escenario común, grillas grillas combos combos, a que me refiero con esto, es que muchas veces nuestros sistemas cargan una cantidad considerable de combos que no están asociados e igual cantidad de grillas en el Page Load. Generalmente no es necesario que esto se cargue secuencialmente, y podemos aprovechar las ventajas en términos de tiempo al utilizar la carga en paralelo.

Para explicar un poco más vamos a crear un pequeño proyecto, que tenga 2 DropDownList (o combos, como le llamamos universalmente). Cada uno de estos combos va a tener una duración de carga de 3 segundos, obviamente de manera secuencial se va a demorar mínimo 6 segundos la carga de la página, mientras que en paralelo, claro como el agua, mínimo 3 segundos:


Carga Secuencial	Carga Paralela

Ahora veamos el código

El código de la página con carga secuencial:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

dd_ciudades.DataSource = Obtciudades()

dd_ciudades.DataBind()

dd_regiones.DataSource = Obtregiones()

dd_regiones.DataBind()

End If

End Sub

Public Function Obtciudades() As List(Of Ciudad)

System.Threading.Thread.Sleep(3000)

Dim ciudades As New List(Of Ciudad)

ciudades.Add(New Ciudad With {.id = 1, .nombre = "Concepcion"})

ciudades.Add(New Ciudad With {.id = 2, .nombre = "Santiago"})

ciudades.Add(New Ciudad With {.id = 3, .nombre = "Viña del Mar"})

ciudades.Add(New Ciudad With {.id = 4, .nombre = "Puerto Montt"})

ciudades.Add(New Ciudad With {.id = 5, .nombre = "Cañete"})

Return ciudades

End Function

Public Function Obtregiones() As List(Of Region)

System.Threading.Thread.Sleep(3000)

Dim regiones As New List(Of Region)

regiones.Add(New Region With {.id = 1, .nombre = "Primera Region"})

regiones.Add(New Region With {.id = 2, .nombre = "Segunda Region"})

regiones.Add(New Region With {.id = 3, .nombre = "Tercera Region"})

regiones.Add(New Region With {.id = 4, .nombre = "Cuarta Region"})

regiones.Add(New Region With {.id = 5, .nombre = "Quinta Region"})

Return regiones

End Function

Puedes notar los métodos Sleep para causar la demora en el thread de ejecución en cada uno de los métodos que sirvan para poblar los dropdownlist.Ahora si vemos la carga del la página con el IE Developer Toolbar, el resultado son 6.07 segundos:

Veamos el código para ASP.NET 3.5, es más largo pero la relación costo beneficio es muy buena, ya que vamos a bajar los tiempos casi a la mitad. Como dije anteriormente, implementar esta misma funcionalidad en ASP.NET 4.5 es mucho más sencillo, ya que elimina las complejidades al momento de especificar cuales métodos serán ejecutados de manera Asíncrona, pero eso lo dejaremos para otro post

Imports Microsoft.VisualBasic
Imports System.Threading

Partial Class Paralelo

Inherits System.Web.UI.Page

Private ehRecuperarDatosDeDropDownList1 As EventHandler = Nothing

Private ehRecuperarDatosDeDropDownList2 As EventHandler = Nothing

Private listaRegiones As New List(Of Region)

Private listaCiudades As New List(Of Ciudad)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

Dim pat1 As New PageAsyncTask(New BeginEventHandler(AddressOf
Me.RecuperarDatosDeDropDownList1), New EndEventHandler(AddressOf
Me.CargarDropDownList1), Nothing, Nothing, True)

Dim pat2 As New PageAsyncTask(New BeginEventHandler(AddressOf
Me.RecuperarDatosDeDropDownList2), New EndEventHandler(AddressOf
Me.CargarDropDownList2), Nothing, Nothing, True)

Page.RegisterAsyncTask(pat1)

Page.RegisterAsyncTask(pat2)

End Sub

#Region "dd_regiones"

Private Function RecuperarDatosDeDropDownList1(sender As Object, e As
EventArgs, cb As AsyncCallback, state As Object) As IAsyncResult

Me.ehRecuperarDatosDeDropDownList1 = New EventHandler(AddressOf
Me.RecuperarRegiones)

Return Me.ehRecuperarDatosDeDropDownList1.BeginInvoke(Me,
EventArgs.Empty, cb, Nothing)
End Function

Private Sub RecuperarRegiones(sender As Object, e As EventArgs)

Me.listaRegiones = Obtregiones()

End Sub

Private Sub CargarDropDownList1(ar As IAsyncResult)

Me.ehRecuperarDatosDeDropDownList1.EndInvoke(ar)

Me.dd_regiones.DataSource = Me.listaRegiones

Me.dd_regiones.DataBind()

End Sub

Public Function Obtregiones() As List(Of Region)

System.Threading.Thread.Sleep(3000)

Dim regiones As New List(Of Region)

regiones.Add(New Region With {.id = 1, .nombre = "Primera Region"})

regiones.Add(New Region With {.id = 2, .nombre = "Segunda Region"})

regiones.Add(New Region With {.id = 3, .nombre = "Tercera Region"})

regiones.Add(New Region With {.id = 4, .nombre = "Cuarta Region"})

regiones.Add(New Region With {.id = 5, .nombre = "Quinta Region"})

Return regiones

End Function

#End Region

#Region "dd_ciudades"

Private Function RecuperarDatosDeDropDownList2(sender As Object, e As EventArgs, cb As AsyncCallback, state As Object) As IAsyncResult

Me.ehRecuperarDatosDeDropDownList2 = New EventHandler(AddressOf Me.RecuperarCiudades)

Return Me.ehRecuperarDatosDeDropDownList2.BeginInvoke(Me,
EventArgs.Empty, cb, Nothing)

End Function

Private Sub RecuperarCiudades(sender As Object, e As EventArgs)

Me.listaCiudades = Obtciudades()

End Sub

Private Sub CargarDropDownList2(ar As IAsyncResult)

Me.ehRecuperarDatosDeDropDownList2.EndInvoke(ar)

Me.dd_ciudades.DataSource = Me.listaCiudades

Me.dd_ciudades.DataBind()

End Sub

Public Function Obtciudades() As List(Of Ciudad)

System.Threading.Thread.Sleep(3000)

Dim ciudades As New List(Of Ciudad)

ciudades.Add(New Ciudad With {.id = 1, .nombre = "Concepcion"})

ciudades.Add(New Ciudad With {.id = 2, .nombre = "Santiago"})

ciudades.Add(New Ciudad With {.id = 3, .nombre = "Viña del Mar"})

ciudades.Add(New Ciudad With {.id = 4, .nombre = "Puerto Montt"})

ciudades.Add(New Ciudad With {.id = 5, .nombre = "Cañete"})

Return ciudades

End Function

#End Region

End Class

Ciertamente el código puede resultar confuso,(adjunto el código fuente, ya que se ve mejor en Visual Studio que en el blog), primero se registran las “tareas” que vamos a correr en paralelo, cada tarea tiene un método de inicio(BeginEventHandler), y método de finalización (EndEventHandler), luego registramos cada una de estas tareas, en este caso son dos, lo hacemos llamando al método RegisterAsyncTask de la página.

Los métodos ObtCiudades y ObtieneRegiones no sufren alteraciones, ahora al momento de ejecutar la página, obtenemos mejores tiempo, tal cual habíamos estimado, 3,16 segundos.

Claro está que solo estoy usando esta funcionalidad con dos métodos, puedes utilizarlos con más según tu conveniencia.

Puedes bajar el código desde acá

Espero que te sirva!
@chalalo

Modernizr–Ejemplo práctico 1 : Utilizando Placeholder

Gonzalo Perez — Tue, 10 Jan 2012 15:59:29 GMT

Como ya saben Modernizr es una librería JavaScript que nos permite detectar las capacidades del soportadas por el navegador en relación a HTML5 y CSS3. Esto nos será en extremo útil cuando estemos desarrollando nuestras páginas con funcionalidades incluidas HTML5 y deseemos que, en la medida de lo posible, usuarios con navegadores antiguos puedan tener la misma experiencia de usuarios, es decir, simular la característica nativa de HTML5 con un pollyfill, que básicamente son códigos o plugins que proveen la tecnología que nosotros, los desarrolladores, esperaríamos que el browser soportara nativamente.

Ejemplo práctico – PlaceHolder

El atributo Placeholder

Atributo HTML5, que podemos describirlo como el texto que aparece dentro de un campo de texto antes de que este tenga el foco, cuando el campo pierde el foco y si el campo está vacío, aparece nuevamente el texto. Ejemplo:

<label for="Rut">Ingrese su Rut:</label>
<input type="text" placeholder ="Ej: 13657654-K" id="rut" />

Lo que resulta en lo siguiente:

Ahora bien, que pasa y con browser que no soporten esta característica? y como detectamos si el browser que navega nuestra página no soporta esta funcionalidad? Tenemos dos opciones:

La más fácil : No hacer nada, simplemente las personas que naveguen con browser antiguos no van a tener esta funcionalidad

Lo mejor, mantener la experiencia de usuario, utilizando Modernizer y PollyFills

Paso 1, Agregar la librería Modernizr

Paso 2, Agregar el código de detección y Pollyfill

if(!Modernizr.input.placeholder){

$('[placeholder]').focus(function() {
   var input = $(this);
   if (input.val() == input.attr('placeholder')) {
       input.val('');
       input.removeClass('placeholder');
}
}).blur(function() {
     var input = $(this);
     if (input.val() == '' || input.val() == input.attr('placeholder')) {
         input.addClass('placeholder');
         input.val(input.attr('placeholder'));
     }
}).blur();
$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
       input.val('');
    }
})
});

Como puedes ver, el primer if , detecta mediante el objeto Modernizr la capacidad del navegador , y si no soporta placeholder (que es un atributo de input), entonces aplicamos el código jQuery que provee la misma funcionalidad del placeholder nativo HTML5.

En navegadores que aún no soportan este atributo, mediante la técnica de graceful degradation vamos a lograr similares experiencias de usuario en navegadores antiguos.

Saludos!, pronto subo más ejemplos.

@chalalo

Grabación WebCast, Nuevas características de Visual Studio 2011 para el Desarrollo Web.

Gonzalo Perez — Wed, 04 Jan 2012 11:29:26 GMT

Hola!, para empezar el año, les dejo un video de algunas de las nuevas características de Visual Studio 2011 para el desarrollo con ASP.NET. Bueno ya estamos en el 2012, quizás Visual Studio cambie de nombre a Visual Studio 2012, no lo sé. Sin más teorías, acá está el video:

Los puntos a tratados en este WebCast son:

Nuevas características en el Solution Explorer
Nuevas características de desacoplamiento de ventanas
Editor CSS (Regiones, Helpers, Autocompletación)
Editor JavaScript (Referencia de Definiciones, Referencia a librerías)
Nuevas posibilidades del editor de código (Asociar Eventos, agregar columnas en grillas)
Repeters Tipados, Bundling , Validaciones no Intrusivas
Instalación de Librerías mediante NuGet , ValidateRequestMode.

Espero que les sea de ayuda

Saludos!
@chalalo

Video del WebCast del Introducción de MongoDB y ASP.NET

Gonzalo Perez — Sat, 24 Dec 2011 00:07:17 GMT

Hola, les dejo el video del Webcast que di sobre MongoDB y ASP.NET. No profundicé mucho pero creo que la se entiende, en este mismo blog están los códigos que se mostraron en la presentación, cualquier duda, no dudes en consultar.

Saludos!
@chalalo.

Grabación del WebCast de Uso de HTML5 y Pollyfills

Gonzalo Perez — Thu, 22 Dec 2011 14:46:00 GMT

Hola, les dejo la grabación del WebCast que realizé el día martes 20 de Diciembre, está basada en la charla del mix2011 Master Rey Bango, con algunos aportes propios.

Véanla en HD, mucho mejor! :)

Saludos!
@Chalalo

Serie de WebCast de Fin de Año: HTML5, MongoDB y ASP.NET WebStack

Gonzalo Perez — Sun, 18 Dec 2011 13:13:00 GMT

Holas, ya es fin de año pero no por eso se bajan las revoluciones!. Te invito a una serie de WebCast que voy a impartir:

Webcast MSDN:Cómo llenar los vacíos de HTML5 con Pollyfills y Shims

Todo el mundo quiere saltar a HTML5, pero ¿cómo usar las mejores características de esta nueva especificación garantizando al mismo tiempo que los navegadores más antiguos ofrece páginas Web como se esperaba? Aquí es donde entran los multillenados y las cuñas. En la sesión, aprenderás cómo usar el código especialmente diseñado para JavaScript y CSS que emula las características de HTML5 para que puedas tomar ventaja de HTML5 hoy sin romper tus sitios en navegadores antiguos.

Fecha – Hora:
martes 20 de diciembre de 2011 - 06:00PM (Chile)
martes 20 de diciembre de 2011 - 4:00PM (Bogotá)

Registrarse aquí

----------------------------------------------------------------------------------------------------------

Webcast MSDN: Desarrollo de Aplicaciones Web con ASP.NET y MongoDB

MongoDB es una base de datos multiplataforma orientado a documentos, OpenSource preparada para alta disponibilidad y High-Performance, que es una de las principales exponentes del movimiento NoSQL.

En esta sesión veremos una introducción a esta nueva filosofía en el manejo de datos y como utilizarla para nuestros proyectos ASP.NET MVC y ASP.NET WebForms

Fecha – Hora:
viernes 23 de diciembre de 2011 - 03:00PM (Chile)
viernes 23 de diciembre de 2011 - 01:00PM (Bogotá)

Registrarse aquí

----------------------------------------------------------------------------------------------------------

Webcast MSDN: Una visión general de MS Web Stack of Love

La creación de aplicaciones Web en la pila de Microsoft continúa evolucionando. Hay un montón de grandes herramientas que se pueden aprovechar, pero puede ser difícil mantenerse al día con todas las opciones disponibles.

En esta sesión técnica y con un ritmo rápido, aprenderás cómo encajan las piezas. Nos ocuparemos de ASP.NET MVC 3, MvcScaffolding, Entity Framework Code First (Magic Unicorn Edition), SQL Compact 4, jQuery y mucho más.

Fecha – Hora:
martes 27 de diciembre de 2011- 12:00PM (Chile)
martes 27 de diciembre de 2011- 10:00AM(Bogotá)

Registrarse aquí

HTML5CL–ScreenCast sobre Geolocalización

Gonzalo Perez — Mon, 12 Dec 2011 17:22:49 GMT

Hola , acabo de publicar un ScreenCast sobre Geolocalizacón de HTML5, lo puedes ver este y otros ScreenCasts en :

http://html5cl.wordpress.com/

Pero bueno, si quieres verlo por acá , comporto también el Video:

Descarga los archivos utilizados en el Screencast

Saludos!
@chalalo

Búsquedas de Texto con MongoDB y VB.NET ASP.NET Webform

Gonzalo Perez — Wed, 07 Dec 2011 15:18:00 GMT

Hola, si recueras mi post anterior sobre MongoDB y ASP.NET MVC, vimos como instalar mongoDB, instalar las librerías y utilizarlo junto a ASP.NET MVC. Esta vez veremos como utilizar ASP.NET Webforms con VB.NET junto a MongoDB para crear búsquedas de texto.

El problema

Tenemos aproximadamente 105.000 registros, que corresponden a un listado de diagnósticos posibles. Las búsquedas de texto siempre (o al menos la mayoría de las veces) son bastante costosas en términos de procesamiento, entonces para liberar la carga de nuestro ya exigido motor de BD, decidí utilizar mongoDB para estas búsquedas.

Los registros para la búsqueda tienen un código que se puede repetir y una descripción del diagnóstico, ej:

A244;Infeccion por Pseudomonas pseudomallei
A244;Melioidosis
A244;Neumoenteritis
A244;Neumonia debida a Pseudomonas pseudomallei
A250;Espirilosis
A250;Fiebre espirilar
A250;Fiebre mordedura debida Spirillum

No tengo idea que significan esos diagnósticos (y no me las doy de House MD). Entonces la idea e poder buscar por palabras, por ejemplo “mordedura” y “Spirillum” y obtener el o los registros concordante con los parámetros de búsqueda.

La Solución

Este post es parte de la solución, para eso armé un prototipo(que es el que ves en la siguiente imagen, un webform asp.net con vb.net)

La estructura, (si, Webform)

Diseño (si es que se puede llamar diseño)

Los botones AJ y KZ cargan los datos de lo archivos hacia mongoDB, y luego la búsqueda , consulta esos registros por las palabras ingresadas y lo muestra en el textarea.

Leyendo la documentación, revisé que se recomendaba crear un objeto con Keywords de búsqueda, es decir, las palabras relevantes, en mi caso todas las palabras que tengan más de 2 letras en la palabra. Veamos cual es la clase que utilizé: (Tapsa se llama el concepto de lista de diagnósticos)

Class Tapsa

<BsonId()> _

Public Id As ObjectId

Public codigo As String

Public texto As String

Public _keywords As List(Of String)

End Class

Como ves, la _keywords es una lista de String, así que para cargar la lista de registros desde el archivo, voy a utilizar la siguiente función asociada a un botón(por el ejemplo), eliminando las palabras con menos de 3 letras.

Pero primero, la conexión a MongoDB

Private Function DB() As MongoDatabase

Dim server = MongoServer.Create("mongodb://localhost")

Dim dbm As MongoDatabase = server.GetDatabase("sinetsur")

Return dbm

End Function

Lueego el botón AJ, que hace lo mismo que el botón KZ, solo cambia el archivo:

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

Dim sr As New StreamReader(Server.MapPath("ajC.csv"))

Dim linea As String = sr.ReadLine()

Dim tapsaas As MongoCollection(Of tapsa) = DB.GetCollection(Of tapsa)("tapsaas")

Do While linea <> Nothing

Dim tp As New Tapsa() With {.codigo = linea.Split(";")(0), .texto =
linea.Split(";")(1), ._keywords = divide(linea.Split(";")(1))}

tapsaas.Insert(tp)

linea = sr.ReadLine()
Loop

sr.Close()

End Sub

Y la función Divide, que devuelve un la lista de String, ignorando las palabras “cortas”

Private Function divide(texto As String) As List(Of String)

Dim lista As New List(Of String)

For Each obj In texto.Split(" ").ToList

If obj.Length > 2 Then

lista.Add(obj.ToLower)

End If

Return lista

End Function

Con esto ya llené mi colección MongoDB, veamos como se visualiza la colección:

O si lo prefieres ver en formato JSON:

{
"_id" : ObjectId("4edf74d4ac7d9820405ca343"),
"codigo" : "A021",
"texto" : "Septicemia debida a Salmonella cholerae-suis",
"_keywords" : ["septicemia", "debida", "salmonella", "cholerae-suis"]
}

Puedes ver que existen 4 keywords y el texto era de 5 palabras, pero el “a” es totalmente ignorable.

Puedes probar en el Shell de MongoDB las búsquedas, por ejemplo escribimos lo siguiente en la consola:

db.tapsaas.find({"_keywords": { "$all": ["dolor","ojo"] }});

El resultado fue prácticamente inmediato, pero aún se puede ejecutar la consulta más rápido, esto es creando un índice por el campo keywords

db.tapsaas.ensureIndex({_keywords:1});

El proceso de creación del índice varia dependiendo de el campo al que se le aplica y a la cantidad de registros que ya existen en dicha colección. y bueno con esto creamos el índice, y ahora las búsquedas simplemente vuelan. (luego me referiré en detalle sobre el profiler de MongoDB, en otro post)

Ahora vamos revisar el código de la búsqueda (botón Búsqueda).

Protected Sub Button2_Click(sender As Object, e As System.EventArgs) Handles Button2.Click

tx_resultado.Text = ""

Dim db__1 As MongoDatabase = DB()

Dim ta As MongoCollection(Of Tapsa) = db__1.GetCollection(Of Tapsa)("tapsaas")

Dim array As New List(Of String)

array = divide(tx_texto.Text)

Dim cont As Integer = 0

Dim q = Query.All("_keywords", BsonArray.Create(array))

For Each obj As Tapsa In ta.Find(q)

tx_resultado.Text &= obj.codigo & " " & obj.texto & vbCrLf

cont = cont + 1

lb_cantidad.Text = cont

End Sub

Como puedes ver en el código, creamos la conexión a mongo, luego sobre el texto ingresado aplicamos la misma regla de eliminar las palabras “cortas” de menos de dos letras utilizando la misma función divide. Una vez que el array esta listo , creamos una query, buscando en el campo keywords y transformando a un BsonArray nuestra lista de string (array), luego hacemos un foreach sobre todas los registros resultantes de la búsqueda. Si hacemos un watch sobre la query vemos lo siguiente:

Lo que corresponde a la misma consulta que habíamos ejecutado en el Shell (texto resaltado en amarillo, a 20cm de acá, hacia arriba )

Y luego mostramos los resultados en el tx_resultado (textarea), en el ejemplo siguiente busqué izquierdo:

La cantidad es 2.338 registros, es un tiempo muy reducido de tiempo, obviamente este sigue siendo un numero muy elevado de registros como para presentarlos al cliente, solo es para efectos de demostración, en producción la lógica es distinta, sin embargo, lo que quiero mostrar el la forma de buscar datos de texto dentro de una colección mongoDB.

Como siempre, te puedes bajar todo el código, incluyendo los registros para que pruebes:

Para la explicación de como instalar mongoDB en tu computador, revisa el Post Anterior

Saludos!
@chalalo

Tutorial MongoDB con ASP.NET MVC - Ejemplo Práctico

Gonzalo Perez — Fri, 02 Dec 2011 13:40:46 GMT

Hola que tal, este tutorial lo estaba preparando hace un tiempo atrás, pero por cosas del destino, venia trazado con esto. Es esta oportunidad, vamos revisar un completo (quiero creerlo, aunque no es tan completo), caso de uso de MongoDB con ASP.NET MVC. Quiero aclarar primero que este articulo es parte de mi aprendizaje con MongoDB, no soy un experto, de hecho, espero que expertos critiquen mi trabajo de manera de aprender más, es decir, este articulo esta hecho con la excelente metodología “aprender haciendo”, y no enfurecerse por los errores.

Pero estoy seguro que nadie quiere leer mis penas, si no el artículo, veamos el contexto de la aplicación: “Un sencillo (paupérrimo) sistema de Blog, en donde se puedan ingresar post y se pueda además agregar comentarios a ese post.” Si lo vemos en más detalle:

Página Principal

1) Ingreso de el Post a MongoDB, por un tema de ahorrar código, no hice las validaciones para el ingreso. Los Tags puedes separarlos por espacios, puntos o punto y coma.

2) Listar todos los Post que se han ingresado, mostrando como link el título y luego la fecha de publicación. El link nos enviará a la página de detalle y allí se mostrará el texto del post.

3) Se muestran la cantidad de comentarios asociados y la lista de tags ingresados, separados por ;

4) Posibilidad de borrar el Post, si bien no tiene mucho sentido hacerlo acá, es por mostrar la funcionalidad.

Página Detalle

1) Mostrar el Titulo y el texto ingresado para el Post

2) Al igual que la página anterior mostramos la lista de tags separados por punto y coma.

3)Formulario para el ingreso de comentarios, esta vez usé solo input type=”text”, no quise usar textarea, solo por diseño. Al igual que la pantalla anterior, no tengo validada las entradas, por un tema de simplicidad.

4) Listado de Comentarios asociados al post, cada vez que ingresamos uno comentario, se refleja en esta lista.

Todo esto lo haremos almacenando los datos en MongoDB, así que vamos por parte

Parte 1 – MongoDB

¿Que es MongoDB?

Es un sistema de Bases de datos OpenSource, multiplataforma basado en Documentos JSON, de esquemas libres, lo que significa que cada registro puede tener un esquema de datos distinto, es decir, que una colección puede contener registros con distintas estructuras. Las características más relevantes, (además de que es OpenSource), son la velocidad (es muuuy rápido) , su capacidad para soportar ambientes de alto rendimiento y su motor de consultas, simple y poderoso. Te recomiendo que veas los siguientes links para profundizar:

http://www.genbetadev.com/bases-de-datos/una-introduccion-a-mongodb

http://www.4tic.com/blog/2011/06/29/mongodb-la-mysql-del-nosql/

Instalación de MongoDB en Windows 7

Primero que nada, tenemos que descargar MongoDB desde el WebSite del proyecto: http://www.mongodb.org/downloads , como puedes ver tienes la posibilidad de descargarlo para bastantes plataformas.

Descarga y descomprime el Zip 32-bit. El compilado "Production" es el recomendado.

Descarga y descomprime el Zip 64-bit

Nota, existen limitaciones de tamaño de almacenamiento en la versión de 32 Bits, que la puedes revisar en:http://blog.mongodb.org/post/137788967/32-bit-limitations

Te recomiendo descomprimir el archivo y cambiar el nombre de la carpeta a algo más corto, por ejemplo, simplemente mongo.

Crear el directorio de Datos

Por defecto, MongoDB almacenará la data en la carpeta \db\data, pero esta no es creada automáticamente, por lo que debemos hacerlo nosotros.

C:\> mkdir \data
C:\> mkdir \data\db

Y listo!, ya tenemos instalado MongoDB.

Levantar el server y conectarnos a él.

Los binarios importantes que están en la carpeta \mongo\bin son:

mongod.exe – que corresponde al servidor, prueba con mongod –help para las opciones

mongo.exe – El Shell para administración

En mi caso , entro a c:\mongo\bin\mongod.exe para correr el server:

Quizás esta opción de levantar manualmente el servidor no nos acomode, pero descuida, el manual para instalarlo como servicio lo puedes encontrar acá :http://www.mongodb.org/display/DOCS/Windows+Service

La consola de administración por defecto nos conecta al el servidor de MongoDB corriendo en localhost, y usa una base de datos llamada test, podemos ver más opciones para el arranque de el shell con mongo --help.

Luego descargue el Driver para C#, ya que vamos a programar la aplicación, yo descargué el MSI desde: https://github.com/mongodb/mongo-csharp-driver/downloads en mi caso la versión 1.3

Para ver una descripción de los comandos de administración del Shell puedes visitar http://www.mongodb.org/display/DOCS/Developer+Zone

Se instala en Archivos de Programa\MongoDB\CsharpDriver 1.3

Y estamos listos con la instalación y el driver. Luego obviamente tenemos que hacer la referencia en el proyecto MVC 3.

Parte 2 - Creación del Blog “La Preparación”

Vamos a utilizar 3 clases, Artículo, Comentario y Tag, el modelo de clases el siguiente:

Y el código:

using System;

using System.Collections.Generic;

using System.Web;

using MongoDB.Bson.Serialization.Attributes;

using MongoDB.Bson.Serialization.IdGenerators;

using MongoDB.Bson;

namespace Blog.Models

{

public class Tag

{

public string tag { get; set; }

}

public class Comentario

{

[BsonId]

public ObjectId id { get; set; }

public string fecha { get; set; }

public string usuario { get; set; }

public string texto { get; set; }

}

public class Articulo

{

public Articulo()

{

Tags =new List<Tag>();

Comentarios = new List<Comentario>();

}

[BsonId]

public ObjectId id { get; set; }

public string titulo {get;set;}

public string texto { get; set; }

public string fecha { get; set; }

public List<Tag> Tags { get; set; }

public List<Comentario> Comentarios { set; get; }

}

Como puedes ver el Objeto Articulo contiene una lista de Tags y una lista de comentarios, quise a propósito tener objetos “más complejos” que una colección Key-Value simple, para colocarme en un escenario un poco más real y que sirve al amigo lector

MondoDB automáticamente asigna un id a cada objeto, sin tener que nosotros agregar una propiedad, sin embargo por facilidad en el manejo y a manera de demo, voy a agregar un id propio, sin embargo, decoro el atributo con BsonId indicando así que es un id de tipo BSON (Propiedades de MongoDB). La fecha la dejé como string, no voy a hacer búsquedas sobre ella, hay un tema de performance de cuidado sobre los datetime y su conversión.

La Estructura del proyecto entonces, es la siguiente:

Parte 3 – Pagina de Ingreso de POST (Index.cshtml)

Veamos el Index.cshtml y revisaremos la implementación de las siguientes funcionalidades:

Ingreso de datos (Post y Tags)

Listado de Post

Contador de Comentarios

Borrar Post

Primero que nada, vamos a ver el listado de datos, para eso veremos la acción del controlador y el método del modelo asociado:

Controlador

public ActionResult Index()

{

ArticulosModel model = new ArticulosModel();

ViewBag.Articulos = model.ObtArticulos();

return View();

}

Modelo

public IEnumerable<Articulo> ObtArticulos()

{

MongoDatabase db = Db();

MongoCollection<Articulo> Articulos=db.GetCollection<Articulo>("articulos");

return Articulos.FindAll().ToList<Articulo>();

}

La función de conexión devuelve un objeto MongoDatabase referenciando a la base de datos en la que estoy trabajando, en mi caso mydb, no es necesario que la crees antes, si no que mongoDB la crea onfly si es que no existe (lo mismo que las colecciones).

private MongoDatabase Db()

{

string connectionString = "mongodb://localhost";

MongoServer server = MongoServer.Create(connectionString);

MongoDatabase db = server.GetDatabase("mydb");

return db;

}

Ahora si analizamos el código del Modelo, podemos ver que primero creamos el objeto conexión a partir del método Db (El cual veremos a continuación). Luego obtenemos toda la colección con GetColletion, nota que la colección es tipada (Articulo), una MongoCollection de objeto articulo. Luego retornamos todos los registros (findAll), revisa la documentación de la api de CSharp http://www.mongodb.org/display/DOCS/CSharp+Driver+Tutorial para obtener mas información.

En resumen, obtenemos toda la colección de “articulos”, con GetCollection<Articulo>(“articulos”), este último parámetro indica la colección dentro de MongoDB.

En el controlador retorna hacia la vista,en el diccionario dinámico ViewBag, la lista de artículos. Como puedes ver esta vista no es tipada, de todos modos podemos recorrer la lista fácilmente con un foreach. Dentro de este ciclo, vamos a tener otro foreach en donde vamos a recorrer la lista de tags (articuloItem.Tags).

Puedes notar que existen dos links, en los cuales se utiliza el helper @Url, el primero hace referencia a la Acción Detalle del Controlador Artículos, el cual nos envia a la vista de detalle, y el siguiente hace referencia a la acción Borrar del controlador Articulos. en estos Links ocupo el Id de Articulo como parámetro en la url, en las vistas y controlador lo vamos a tratar como un String y luego, al momento de acceder a la colección de MongoDB vamos a convertirlo a un ObjectID

<section id="listado">
<ul>
   @foreach (Blog.Models.Articulo articuloItem in ViewBag.Articulos)
    {
     <li>

<p>

<a class="Titulo"

           href="@Url.Action("Detalle", "Articulos",
            new { Guid = articuloItem.id })">@articuloItem.texto</a>
        <br />

(@articuloItem.fecha)</p>

@articuloItem.Comentarios.Count() Comentarios, Tags:

@foreach (Blog.Models.Tag tagItem in articuloItem.Tags)

{

<text> @tagItem.tag ;</text>

}

<p>

Borrar</a>
</p>

</li> }

</ul>

</section>

Lo anterior nos dibuja lo siguiente en pantalla:

Como vez, bastante fácil el recorrer la colección. Veamos ahora como se implementa la acción Borrar.

Acción Borrar

Controlador

public ActionResult Borrar(string Guid)

{

ArticulosModel model = new ArticulosModel();

model.Borrar(Guid);

return RedirectToAction("Index");

}

Modelo

public void Borrar(string Guid)

{

MongoDatabase db = Db();

db.GetCollection<Articulo>("articulos").FindAndRemove(Query.EQ("_id",

ObjectId.Parse(Guid)), SortBy.Ascending("id"));

}

Al igual que el ejemplo anterior, en el controlador, obtenemos la referencia a mongoDB, y luego obtenemos la colección, y de inmediato utilizamos el método FindAndRemove y le pasamos la query que compara equivalencia (EQ) del campo “_id”, y le pasamos el campo Guid parseado a ObjectId. No podemos pasar directamente sin parsear el Id, ya que la equivalencia no se cumpliría. Puedes ver la manera de almacer el id en la colección escribiendo db.articulos.find() en el shell, fijate que el campo Id es _id:

En resumen, esta sola línea de código permite obtener la colección filtrada mediante la query EQ, y a la vez, remover los elementos de ese filtro, es realmente fantástico que con una sola línea podamos hacer tanto sobre mongo.

Acción Detalle

Controlador

public ActionResult Detalle(string Guid)

{

if (Guid == null)

{

Guid = TempData["ObjId"].ToString();

}

ArticulosModel model = new ArticulosModel();

ViewBag.Id = Guid;

return View(model.Detalle(Guid));

}

Modelo

public Articulo Detalle(string Guid)

{

MongoDatabase db = Db();

return db.GetCollection<Articulo>("articulos").FindOneById(ObjectId.Parse(Guid));

}

De igual manera que para borrar un registro, se obtiene la colección y obtenemos mediante el método FindOneById (parseando el Id) un único registro el cual retornaremos al controlador Detalla y este a su vez a la vista tipada. El if que vez en el controlador lo utilizo para determinar el id si es que es la primera carga de la vista detalle o si es que se creó un nuevo comentario en la vista detalle, de manera de mantener del id.

Formulario de Inserción

Veamos el formulario, comentarios de CSS aparte (no soy diseñador, hago todo absolutamente horrible).

El código asociado a este formulario es el siguiente:

@using (Html.BeginForm("Create", "Articulos",

FormMethod.Post, new { id = "formulario" }))

{

<label for="titulo">Título:</label>

<label for="titulo">Texto:</label>

}

</section>

Muy simple la verdad, ahora veamos el Controlador y el Modelo

Controlador

[HttpPost]
public ActionResult Create(FormCollection form)

{

Articulo articulo = new Articulo();

articulo.titulo = form["titulo"];

articulo.texto = form["texto"];

articulo.fecha = Convert.ToString(DateTime.Now);

string tags = form["tags"];

char[] delimitadores = { ' ', ',', '.', ';' };

string[] TagsString = tags.Split(delimitadores);

foreach (String tagtexto in TagsString)

{

articulo.Tags.Add(new Tag() { tag = tagtexto });

}

ArticulosModel model = new ArticulosModel();

model.Insertar(articulo);

return RedirectToAction("Index");

}

Modelo

public void Insertar(Articulo articulo)
{
MongoDatabase db = Db();
MongoCollection<Articulo> articulos = db.GetCollection<Articulo>("articulos");
articulos.Insert(articulo.ToBsonDocument());

}

Nota que en el controlador, recibimos los objetos del formulario y los vamos asignando a un nuevo objeto Articulo, luego vamos separando los tags mediante delimitadores y los vamos ingresando a la lista de objetos tag de Articulo. Una vez que este listo el objeto, se lo pasamos al método del modelo para que lo inserte. Y nuevamente, crear la conexión, obtener la colección para luego insertar el articulo, parseado a una clase BsonDocument, que es con lo que trabaja MongoDB. El controlador nos devuelve a la acción Index, que nos va a recargar la vista.

Página detalle (Detalle.cshtml)

La página de detalle es una vista tipada, básicamente tiene el mismo funcionamiento que la página anterior, por lo que solo me voy a enfocar a las funcionalidades que varían.

Un tema importante para la funcionalidad del detalle, es agregar nuevos comentarios, esto implica obtener el objeto Articulo desde la colección y luego agregarle un nuevo objeto comentario, para posteriormente almacenarlo.

Veamos la inserción de un nuevo comentario:

Controlador

[HttpPost]

public ActionResult CrearComentario(FormCollection form)

{

ArticulosModel model = new ArticulosModel();

model.CrearComentario(form["id"].ToString(),

new Comentario()

{

usuario = form["usuario"].ToString(),

texto = form["comentario"].ToString(),

fecha = Convert.ToString(DateTime.Now)

});

TempData["ObjId"] = form["id"].ToString();

return RedirectToAction("Detalle");

}

Modelo

public void CrearComentario(string Guid, Comentario comentario)

{

MongoDatabase db = Db();

var articulos = db.GetCollection<Articulo>("articulos");

Articulo a = articulos.FindOneById(ObjectId.Parse(Guid));

a.Comentarios.Add(comentario);

articulos.Save<Articulo>(a);

}

En el controlador creamos el comentario, a partir de los datos obtenidos desde el formulario, recuerda que debemos almacenar en algún elemento de formulario el id del articulo, para obtener el elemento desde la colección, llamamos al método del modelo llamado CrearComentario y pasamos como argumento el nuevo objeto, luego retornamos a la acción detalle, lo que produce evidentemente una recarga de página y podremos ver la lista de comentarios actualizada. Es en esta acción donde utilizamos TempData para enviar el ObjId hacia la acción Detalle).

En el modelo, como ya habíamos dicho, obtenemos el articulo (objeto a), y agregamos el comentario a la lista de comentarios (a.Comentarios.Add(comentario)). Luego ( y con una facilidad fascinante) , simplemente guardamos el articulo con el método de MongoDB Save, indicando el tipo y el objeto que vamos a guardar.

En la vista, el formulario tiene el siguiente código, en el que puedes ver que tenemos un campo oculto con el Id, el cual es asignado al ViewBag en el controlador Articulo, en la acción Detalle. Veamos el código:

<p>

@using (Html.BeginForm("CrearComentario", "Articulos", FormMethod.Post, new { id = "formularioPost" }))

{

<label for="usuario">Usuario:</label>

<label for="comentario">Comentario:</label>

}

</p>

Luego, todos los comentarios ingresados son mostrador en la tabla siguiente:

Cuyo código es muy simple, recordemos que esta vista es tipada, por lo que podemos recorrer la colección de Comentarios fácilmente:

<ul>
@foreach (Blog.Models.Comentario comentarioItem in @Model.Comentarios)

{

<li>
<p>@comentarioItem.texto</p>

<p>Posteado el @comentarioItem.fecha By @comentarioItem.usuario</p>

</li>

}

</ul>

Puedes utilizar MongoVUE para visualizar los datos , en el caso que no te guste utilizar la Shell, descárgalo en http://www.mongovue.com/, yo descargué la versión gratis, aunque el producto no es caro, de hecho estamos evaluando el comprarlo, ya que ayuda bastante

Nos conectamos y podemos ver la colección y su estructura.

Nota que los comentarios tienen el _id 00000000000, debido a que no los estoy asignando en la creación del comentario, ya que no voy a hacer nada con esto, sin embargo, si vas a hacer filtros mediante los comentarios, es necesario que si tengan un Id asignado.

Descarga el ejemplo!!

Sumario

No soy para nada un experto en MongoDB, simplemente dije “voy a investigar, hacer una aplicación de prueba, y escribir en el blog lo que aprendí”, y dicho sea de paso, proponerlo para la búsqueda entre miles de registros para un sistema en producción, para esto tenía que convencer a mi jefe para que diera el OK a utilizar MongoDB, y bueno, ese es tema aparte, pero lo aprobó

Personalmente me sorprendió la rapidez, y su nueva filosofía, distinta a mis ojos que solo conocían bases de datos relacionales. La API de C# provee de prácticamente de todo lo necesario. Quizás puedo criticar la falta e ejemplos en C# o que yo soy malo para buscar información, justamente fue esto lo que me inspiró a escribir este pequeño tutorial, de manera de poder ayudar a los que andan tan perdidos como yo.

Seguramente hay gente que puede aportar mejorando este código, sea bienvenido, de esa manera yo también aprendo

Espero que te sirva!! y ya tengo otro articulo sobre búsquedas de texto, en VBNET y Mongo

Saludos!

HTML5CL–Comunidad Chilena entorno a HTML5

Gonzalo Perez — Mon, 28 Nov 2011 13:22:26 GMT

Hola que tal?, te cuento que estamos armando una iniciativa de compartir información acerca de este nuevo estándar de la Web. La URL es:

http://html5cl.wordpress.com/

Como dice el sitio:

HTML5CL es un lugar de encuentro para que nosotros, los desarrolladores web compartamos información acerca de este nuevo estándar de la Web. Buscamos la manera de apoyarnos mutuamente fomentando el buen uso de las nuevas características mediante tutoriales, videos, aportes de todos. Entre todos hacemos este sitio!

Seguramente preguntas como puedo cooperar…

Puedes colaborar enviando tus aportes al correo electrónico contacto.html5cl@gmail.com, todo es bienvenido:

WebCast
ScreenCast
Artículos
Noticias
Código con ejemplo ( es importante que adjuntes el código, de manera que todos puedan probar tus aportes)

El reconocimiento del material, siempre será del autor, es por eso que puedes especificar tu correo, Facebook, twitter, la url de tu propio sitio web, etc.

Esperamos tener una buena llegada con los desarrolladores. La cara visible de esta comunidad es tu mismo, con tus aportes.

---------

La idea es que todos cooperemos, en mi caso, fue un video sobre LocalStorage:

Espero que te animes a cooperar!
Saludos,
@chalalo

Slides App en HTML5, Los pilares de una Nueva Web–TechDays 2011

Gonzalo Perez — Tue, 22 Nov 2011 12:07:41 GMT

Hola, también les dejo los slides de la charla de HTML que dimos con el Maestro Miguel Ángel Sáez, agradezco a todos los buenos comentarios

Recuerden lo del diplomado en HTML5 y el hashtag #HTML5CL para comenzar a armar comunidad e intercambiar información!

http://blogs.msdn.com/b/rmugar/archive/2011/11/11/diplomado-microsoft-fundamentos-de-html5.aspx

Aplicaciones html5 tech days-mañana

View more presentations from Gonzalo C..

Saludos,
@chalalo

Slides de Novedades de WebMatrix Beta 2–TechDays 2011

Gonzalo Perez — Tue, 22 Nov 2011 11:53:37 GMT

Hola, les comparto la presentación que utilicé para la charla de WebMatrix 2 en el TechDay 2011, recuerda que está disponible la academia MVA de WebMatrix en :

https://www.microsoftvirtualacademy.com/tracks/desarrollo-con-webmatrix

y que pueden descargar WebMatrix Beta 2 desde:

http://www.microsoft.com/web/webmatrix/next/

Las Slides!

Saludos!
@chalalo

Ajax Control Toolkit November 2011 Release

Gonzalo Perez — Thu, 17 Nov 2011 22:17:00 GMT

(Extracto del Blog de Stephen Walter)

Se lanzó un nuevo release del ya famoso Ajax Control Toolkit, esta vez se introduce un nuevo control Ballon Popup y mejoras en el ya existente Control Tab, incluyendo el soporte de carga bajo demanda de cada pestaña y el soporte para navegación mediante teclado. Se ha solucionado los bugs más reportados en CodePlex.com

Puedes descargar este control desde el sitio de CodePlex.

http://AjaxControlToolkit.CodePlex.com

De manera alternativa y rápida se puede obtener esta versión del ACT utilizando NuGet simplemente abriendo la consola del Library Package Manager en Visual Studio 2010 y escribir:

Con el control ballonPopUpExtender puedes hacer lo siguiente ente otras cosas:

Con una configuración realmente fácil, especificando el TargetControlID al que se va a asignar el BallonPopUpExtender

Sobre las pestañas, mejor lo lees de la fuente, pero que puedes esperar? Antes el contenido de los tabs se cargaban al momento del redenrizar el control, lo que a toda vista puede generar un problema de performance o de vista de actualización de datos.

Revísalo en el blog de Sthepen Walther:

http://stephenwalther.com/blog/archive/2011/11/16/ajax-control-toolkit-november-2011-release.aspx

Actualmente ya hay bastantes plugins para JQuery que permiten utilizar efectos similares en nuestras páginas, sin embargo, si eres un programador WebForm te va a servir mucho esta nueva release.

Saludos!
@chalalo

Video del WebCast de Relación de ASP.NET con HTML5 y CSS3

Gonzalo Perez — Tue, 15 Nov 2011 00:50:43 GMT

Hola, acá les dejo el video del webcast de hoy sobre la relación de ASP.NET con HTML5 y CSS3, no apuntaba a ser algo muy técnico, más bien una conversación acerca de lo que está haciendo el team ASP.NET en Webforms y MVC.

Ahh trata de verlo en HD , vas a distinguir mejor el código y te advierto, dura 1 hora 20 minutos, para rato!

Saludos!
@chalalo

[Tips] Activar Autocompletación de código JQuery en WebMatrix Beta 2

Gonzalo Perez — Fri, 11 Nov 2011 13:50:00 GMT

Hola que tal, una de las características que más me gustan en WebMatrix beta 2 son la autocompletación de código para PHP, funciones de WordPress y obviamente jQuery, pero la primera vez que lo baje, no me funcionó el intellisense de jQuery, pense que algo no estaba haciendo bien,y claro, hay que agregar la referencia al archivo de autocompletar. Creo que eso tiene lógica, debido a que este archivo, que es el mismo que se utiliza en Visual Studio, se puede actualizar tan rápido como versiones de jQuery están siendo liberadas, ( y están liberando versiones con mucha frecuencia!)

Primero que nada, descarga la versión de vsdoc desde http://www.asp.net/ajaxlibrary/cdn.ashx , en mi caso seleccione la 1.7.

Luego la agregar a tu proyecto, a continuación agregar la referencia al archivo en donde quieres que funcione la autocompletación:

/// <reference file="jquery-1.7-vsdoc.js" />

y listo, ya tienes Intellinsense para jQuery en WebMatrix Beta 2

Y si no tienes WebMatrix, descárgalo ya!
http://www.microsoft.com/web/webmatrix/next/

Saludos,
@chalalo

TechDays 2011- Chile : Agenda disponible!

Gonzalo Perez — Thu, 10 Nov 2011 20:54:00 GMT

Están abiertos los registros para el evento TechDays 2011, tengo el agrado de participar como orador, sobre temas de HTML5 y WebMatrix, espero que nos veamos allá

Regístrate en:http://www.techdays.cl/registro.html

Evento de la Mañana:Orientado a Profesionales (Infraestructura y Desarrollo) que trabajen en el área Informática dentro de una empresa. Abordará temas de Innovación, Entornos de Trabajo flexibles, Valor de negocios, Reducción de costos, Nuevas tendencias (computación en la nube, consumerización de TI, etc.).

Yo estoy a las 10:40 junto a Miguel Ángel Saez hablando de HTML5,CSS y Javascript

Evento de la tarde:Para Desarrolladores o Profesionales de TI independientes, Emprendedores, o Estudiantes de informática interesados en temas de Desarrollo web, de Videojuegos, Desarrollo móvil, Computación en la nube, Virtualización, Administración y Soporte de equipos,etc.

Estoy a las 17:00 horas junto a Maximiliano Marín hablando sobre WebMatrix 2

Nos vemos!
Saludos,
Gonzalo

ASP.NET 4.5–Nueva característica de Agrupación y Minificación

Gonzalo Perez — Sat, 05 Nov 2011 22:24:00 GMT

Hola que tal, hoy voy a hablar sobre una muy buena característica que nos trae ASP.NET 4.5. Para situarnos en el contexto, hablemos de optimización, ASP.NET nos ha dado mecanismos de optimización en el front-end y back-end. Técnicas de agrupación y Minificación ya eran posibles de aplicar en ASP.NET, sin embargo, no con la facilidad y flexibilidad que nos presenta ASP.NET 4.5 Developer Preview , la cual introduce bundling(Agrupación o combinación), que nos permite combinar múltiples archivos JavaScript para una carga más rápida al evitar request por cada uno de los archivos js, y aplicando minificación, que reduce considerablemente el tamaño de los archivos JavaScript y CSS removiendo los caracteres innecesarios.

Veamos como funciona, para esto veamos la estructura típica de un proyecto ASP.NET WebForm:

El archivo index.aspx está simplificado al máximo solo para efectos demostrativos, veamos el código:

Como ves, solo tenemos la carga de los CSS y los Scripts, al momento de ver las peticiones request de la página veremos:

Nos podemos dar cuenta de la forma de la carga de los archivos, tenemos 9 peticiones y 137KB.

Veamos ahora la nueva característica de ASP. NET 4.5, que permite reducir el numero de request combinando los archivos JS en uno solo, al igual que los archivos CSS, los cuales son minimizados automáticamente.

Primero que nada debemos hacer referencia ahora a las carpetas en donde se encuentran los script y estilos:

Y en el globlax.asax, agregar en el método Application_Start la combinación por Default (EnableDefaultBundles)

<%@ Import Namespace="System.Web.Optimization" %>

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

BundleTable.Bundles.EnableDefaultBundles()

End Sub

Ahora en tiempo de ejecución automáticamente se combinará y minimizarán los archivos JS y CSS, veamos:

Wow!!!, El CSS minimizado y el JS minimizado, él tamaño total del request es 80KB, pero una aclaración, debes eliminar todos los archivos que nos vas a ocupar en producción, como por ejemplo, los ya minimizados, por que ahora ya no estas discriminando por archivo referenciado desde tu página, si no que es toda la carpeta Script, lo mismo para los CSS, además deben estar bien formateados o la minificación falla.

Para comprobar esto, podemos ver la respuesta del request al recurso CSS Minimizado

Ahora también puedes crear tu propio Bundling en el archivo globlal.asax, para CSS con CssMinify o para JavaScript JsMinify y agregrando los archivos que serán combinados y minimizados con su ruta relativa.

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

BundleTable.Bundles.EnableDefaultBundles()

Dim cssBundle = New Bundle("~/Content/css", GetType(CssMinify))

cssBundle.AddFile("~/Styles/css1.css")

cssBundle.AddFile("~/Styles/css2.css")

cssBundle.AddFile("~/Styles/css3.css")

End Sub

Para hacer un resumen:
Antes del aplicar esta característica:9 Peticiones, 137Kb
Después de aplicar combinación y minificación:3 peticiones, 80Kb.

Espero que te sirva
Saludos!

Webcast MSDN: Trabajando con ASP.NET 4.5 & HTML5 & CSS

Gonzalo Perez — Thu, 03 Nov 2011 02:44:55 GMT

Hola que tal, los quiero invitar a este WebCast que voy a dar el 14 de Noviembre, espero que puedan agendarlo

Url:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032498442&Culture=es-AR

Si estas desarrollando un nuevo Sitio Web con ASP.NET o estas manteniendo uno existente, de seguro ya estarás escuchando las voces que hablan de HTML5.En esta sesión veremos cómo trabajar con HTML5 y CSS3 dentro de Visual Studio en proyectos ASP.NET. También veremos lo nuevo que nos trae JavaScript para el desarrollo de aplicaciones más ricas y modernas todo esto bajo Visual Studio 2011.

Inicio: lunes, 14 de noviembre de 2011 02:00 p.m. Zona horaria: (GMT-05:00) Bogotá

Hora Chile: 16:00 horas
Duración: 1 hora(s)

Nos vemos allá!
Saludos!
Gonzalo

[ASP.NET] Acelera tus WebSites con WebCache

Gonzalo Perez — Thu, 27 Oct 2011 14:43:30 GMT

Hola que tal, si bien no es nada nuevo esto de WebCache, he visto que es poco utilizado y realmente muy útil, pongámonos en la siguiente situación :

“Tienes una consulta a una fuente de datos, la cual tiene un tiempo de ejecución y/o de CPU considerable, los datos tienen una frecuencia de actualización de unos 30 minutos, por ejemplo un reporte del estado sobre algún proceso.”

Ahora bien, podríamos pensar en usar sesiones , con todo el costo en rendimiento y problemas de escalabilidad, pero ya que las sesiones son por usuario, cuando otro usuario, alguien que no ha ingresado a ver el reporte, lo haga, de todos modos deberá esperar, sin considerar que luego de 20min (tiempo de vida por defecto de las sesiones), el usuario que ya había ingresado, va a tener que esperar nuevamente. Entonces las sesiones no son una solución efectiva al problema.

Desde la versión 1.1 de ASP.NET (hace ya bastantes años, aunque se recomienda usarlo desde la versión 2) se implemente la Clase Cache, que nos permite persistir en memoria objetos, además nos permite definir la cantidad de tiempo que los datos van a persistir e implementar un callback para cuando la cache expira. Esta cache es compartida por todas las solicitudes al sitio, no solo por usuario.

Un pequeño extracto de código de una aplicación(modificado):

Private Sub getReporte()

Dim dt As New DataTable

If Cache.Item("datos") Is Nothing Then

dt.ReadXml(Server.MapPath("Ventas2.xml"))

      Cache.Insert("datos", dt, Nothing, DateTime.Now.AddMinutes(30),
      TimeSpan.Zero, CacheItemPriority.Default, New CacheItemRemovedCallback
       (AddressOf ReportRemovedCallback))

Else

dt = DirectCast(Cache.Item("datos"), DataTable)

End If

End Sub

Esta pequeña función obtiene los datos de un XML que es bastante extenso,(en realidad el código original hace referencia a un WebService que se demora bastante en responder, cerca que 20 segundos). Pero veamos en detalle:

Primero que nada revisamos si los datos están en cache, con Cache.Item(key)
Luego, en el caso que no estén en la cache, los vamos a buscar leyendo del xml normalmente, luego se insertan el cache con Cache.Insert y le damos un tiempo de vida a esta entrada en el cache de 30 minutos (AddMinutes(30)), también seteamos mediante un objeto CacheItemRemovedCallback la dirección del método (ReportRemovedCallback), esta es la función que se va a ejecutar cuando el cache expire.
En el caso que ya tengamos los datos en el cache (según el paso 1), simplemente hacemos el casting para pasarlos a un datatable.

Ahora si vemos la función ReportRemoveCallback tenemos que llamamos nuevamente a la lectura del Reporte, generando nuevamente la llamada. Se lo que estás pensando, estoy se está generando todo el día independiente si se esta viendo realmente, bueno, esto lo puedes controlar programáticamente, es decir, programar para que el cache se vuelva a generar si estoy dentro de ciertas horas, todo depende de la frecuencia y horas en los que los usuarios consultas el reporte.

Public Sub ReportRemovedCallback(ByVal key As String, _

ByVal value As Object, ByVal removedReason _

As CacheItemRemovedReason)

getReporte()

End Sub

En la práctica el cache compartido y la validación de la existencia de los datos en el mismo, hace que la experiencia de usuario al momento de leer el reporte se mejore bastante. En mi caso, esto era una llamada a un Web Service, que fácil se demoraba 20 segundos, y era consultado desde un teléfono Blackberry, ahora es prácticamente instantáneo y solo con utilizar esta excelente clase.

Espero que te sirva, a mi , ufff, bastante, y a los usuarios, mucho más.
Saludos!
Gonzalo