Chalalo Land

Introducción a Linq to JavaScript

Linq es un lenguaje de consulta sobre colecciones de objetos, generalmente escuchamos sobre LinqToSQL , LinqToXML, LinqToDataSet entre otros, pero también lo puedes ocupar con Javascript, el lenguaje de moda

Primero que nada LinqToJavascript  (JSLINQ) es una implementación de Linq to Object en JavaScript. Está creado usando un conjunto de métodos de extensión en Arreglos de Objetos de Javascript. Si estamos utilizando un Arreglo, podemos entonces utilizar LINQ to Javascript.

Ejemplo de Uso

Primero que nada, debes descargar la librería en jslinq.codeplex.com, con la descarga tienes los script y bastantes ejemplos que sin duda, son de gran ayuda. Primero que nada vamos a agregar las referencias a los Script y luego crear un arreglo de objetos

<script type="text/javascript" src="scripts/JSLINQ.js"></script>

<script>

  var Personas =[

                {Rut:1, Nombre:"Gonzalo",Apellido:"Perez",Edad:32},

                {Rut:2, Nombre:"Pedro",Apellido:"Correa",Edad:31},

                {Rut:3, Nombre:"Carlos",Apellido:"Jerez",Edad:26},

                {Rut:4, Nombre:"Gonzalo",Apellido:"Diaz",Edad:23},

                {Rut:5, Nombre:"Juan",Apellido:"Rocha",Edad:19},

                {Rut:6, Nombre:"Jose",Apellido:"Osses",Edad:27},

                {Rut:7, Nombre:"Gonzalo",Apellido:"Mellado",Edad:21}

            ];

</script>

Debemos crear ahora una instancia del objeto JSLINQ con nuestro arreglo Personas:

var ejemploPersonas = JSLINQ(Personas);

Podemos además ocupar el operador Where para especificar el criterio de selección y además ocupar el método Count()

var cantPersonas =JSLINQ(Personas).Where(function(persona){
                         return persona.Nombre == "Gonzalo";}).Count();

Veamos ahora como recorrer el arreglo de personas resultantes de una consulta por Nombre:

var ejemploPersonas =JSLINQ(Personas).Where(function(persona){
                                return persona.Nombre == "Gonzalo";
                      });

var rs = ejemploPersonas.ToArray();

for (var i in rs) {

    alert( rs[i].Nombre +" "

         + rs[i].Apellido +" "

         + rs[i].Edad);

    }

En el caso que queramos obtener una consulta ordenada por algún campo, en este caso edad, debemos modificar la consulta para incluir el campo edad en el orden:

var ejemploPersonas =JSLINQ(Personas).Where(function(persona){ 

                                  return persona.Nombre == "Gonzalo";

                        }).OrderBy(function(persona){return persona.Edad;});

var rs = ejemploPersonas.ToArray();

for (var i in rs) {

    alert( rs[i].Nombre +" "

         + rs[i].Apellido +" "

         + rs[i].Edad);

}

Y listo!, bastante útil para manejar nuestros objetos JSON que podemos obtener a través de un WS, revisa la página del proyecto y los ejemplos que se descargan para mayor detalle.

Espero que te sirva!

Saludos

@chalalo

Dándole más caña, agregando sonido con HTML5 a animaciones jQuery

Este post viene a modificar el ejemplo anterior, es uno en donde ocupamos elementos HTML5  y Modernizr para cargar distintos polyfills para solucionar el problema de la compatibilidad.

Ahora, para darle un poco más “choreza” como decimos por acá, vamos agregar audio con HTML5. Ahora bien, no creo que mucha gente le interese escuchar el sonido a cada rato, pero bueno, es para fines demostrativos.

La modificación al ejemplo consistirá en dejar el formulario oculto y crear una especia de acordeón, de tal manera de ejecutar un sonido cuando se abra y cierre el acordeón.

Algo así:

Estado Cerrado (inicial)	Estado Abierto

En cada abrir y cerrar reproduciremos un sonido, el resultado es el del siguiente video:

Entonces manos a la obra, primero vamos a agregar los tags de audio

    <audio id="abrir" preload="auto">

            <source src="audio/abrir.mp3" type="audio/mpeg" />

            <source src="audio/abrir.ogg" type="audio/ogg" />

    </audio>

    <audio id="cerrar" preload="auto">

            <source src="audio/cerrar.ogg" type="audio/ogg" />

            <source src="audio/cerrar.mp3" type="audio/mpeg" />

    </audio>

Como vemos no es necesario mostrar los controles del tag audio, luego, mediante jQuery vamos a hacer play a esto controles.

Los archivos de audio mp3 y ogg los convertí desde wav mediante esta herramienta gratuita (cuidado con sus barras para IE instalables)http://www.koyotesoft.com/audio-software/free-mp3-wma-converter.html imagino que hay mucho mejores, pero fue lo primero que encontré. Entonces, en la carpeta audio agregamos los archivos y listo!

PD: Recuerda que no todos los navegadores soportan los mismos codec para reproducción de audio y video, por eso tenemos que agregar diferentes formatos para asegurar compatibilidad. Puedes ver el siguiente cuadro para tener el escenario con el que vas a tener que lidiar:

Ahora el código jQuery, muy simple para crear el efecto y puedes notar el atributo play para el tag audio con id abrir y el otro tag con el id cerrar:

$(document).ready(function(){

            $("form").hide();

            $("#texto").toggle(function(){

                $("form").slideDown("slow");

                $("#texto").html("- Cerrar");

                $("#abrir")[0].play();

        },function(){

               $("form").slideUp("slow");

               $("#texto").html("+ Abrir");

               $("#cerrar")[0].play();

        });  

});  

Y estamos ok, ya tenemos nuestro ejemplo balls breaker con sonido

Espero que te sirva!
@chalalo

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

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:

1. Bordes Redondeados
2. Campo Date en el formulario
3. Campo Date es obligatorio

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

        <meta charset="utf-8" />

        <title>Demo</title>

        <style type="text/css">

            form{

                 background-color:#9fbfa3;

                 width:300px;

                 padding:15px;

                 border-radius:10px;

                }

        </style>

    </head>

    <body>

        <form id="formulario" action="#">

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

           <input type="date" name="TxFecha" id="TxFecha" required>

           <input type="submit" id="btEnviar" value="Enviar">

        </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>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Demo</title>

       <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>

        <style type="text/css">

            form{

                 background-color:#9fbfa3;

                 width:300px;

                 padding:15px;

                 -moz-border-radius: 10px;

                 -webkit-border-radius:10px;

                 border-radius: 10px;

                }

        </style>

    </head>

    <body>

        <form id="formulario" action="#">

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

           <input type="date" name="TxFecha" id="TxFecha" required="true">

           <input type="submit" id="btEnviar" value="Enviar">

        </form>

    </body>

</html>

<script type="text/javascript">

        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

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

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

<script src="js/modernizr-1.5.min.js"></script>¨

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.

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

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

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

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

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

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

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

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

HTML5CL–ScreenCast sobre Geolocalización

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

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

        Next

        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

  Next

  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

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:

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>

      <a class="Borrar" href="@Url.Action("Borrar", "Articulos",
                    new { Guid = articuloItem.id })">

                    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:

<section id="contenido">

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

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

    {

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

        <input type="text" id="titulo" name="titulo" />

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

        <textarea id="texto" name="texto" rows="3" cols="40"></textarea>

        <label for="tags">Tags</label>

        <input type="text" id="tags" name="tags" />

        <input type="submit" value="Grabar!" id="grabar" />

    }

</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" }))

{