[WebCast] Introducción a MVVM y Knockout.js

Hola, ayer di un WebCast sobre MVVM y Knockout.js, utilizando webmatrix, básicamente repasé y expliqué lo que habíamos visto en este blog, de todas maneras te dejo el video de la grabación.

Los ejemplos están todos disponibles en los artículos sobre el tema que están en el blog. Te dejo la URL

http://geeks.ms/blogs/gperez/archive/2012/09/21/tutorial-comenzado-con-mvvm-y-knockout-js-parte-5-conectar-el-viewmodel-con-el-model-mediante-asp-net-webmatrix-amp-razor.aspx

Saludos!
@chalalo

Material del WebCast: Introducción a ASP.NET Web API con MongoDB, una visión pragmática

Hola, como lo había prometido, les dejo el material del WebCast sobre introducción a ASP.NET Web API y mongoDB, una visión pragmática. La idea fue crear una webapi que se consumiera desde Android, Windos Phone y HTML c/jQuery. El esquema es el siguiente:

image

Descarga acá el archivo, contiene:

  • Proyecto para Windows Phone 8
  • Proyecto para Android (Necesario Eclipse)
  • Proyecto para Asp.NET Web API, incluye CRUD jQuery y código para acceso MongoDB

Espero que te sirva y te animes a crear tus API’s. Cual duda me la puedes hacer a mi twitter @chalalo.

Saludos!

[Tips] Como hacer test de carga con Visual Studio 2012

Hola que tal? , por acá de nuevo , entre los trabajos de la maestría que estoy haciendo, el laburo, los proyectos freelance, los estudios  me han tenido bastante ocupado, pero siempre hay tiempo para un tip Sonrisa

Una de las características que encuentro muy útil en VS2012 es la posibilidad de crear test de carga. Para crear una prueba de carga tenemos que ir Archivo > Nuevo Proyecto, y seleccionamos “Proyecto de prueba de carga y rendimiento web”

image

Ahora vamos a ver un entorno para la creación de las pruebas. En el explorador de soluciones vamos a apretar botón derecho y elegimos agregar>prueba de rendimiento web…

image

Debería abrirse Internet Explorer con la grabadora de prueba web activada:

image

Si no aparece esta opción es por que tienes el complemento Microsoft Web Test Recorder deshabilitado, por lo que tienes que habilitarlo para que funcione.

image

Luego agregamos la URL por ejemplo www.microsoft.com

image

Luego simplemente presiona Detener y se va a ejecutar el WebTest, en realidad este no es lo que andábamos buscando si no que nos sirve para crear los loadtest. Cuando presiones detener, vas a ver la siguiente ventana, en donde se procesan los parámetros dinámicos.

image

Con este WebTest podemos realizar pruebas de rendimiento, en donde podemos utilizar distintas configuraciones de browsers, por ejemplo puedes elegir un smartphone de manera de determinar como se comportan las peticiones desde un móvil.

image

Ahora vamos crear el test de carga, para eso vamos de nuevo al explorador de soluciones y agregamos un test de carga:

image

Se abrirá un asistente bastante potente, en donde podemos elegir muchas características para crear un test de carga personalizado:

image

Podemos simular un modelo de carga simulada,  contante o cantidad de usuario en intervalos de tiempo por paso.

image

Podemos hacer una combinación de pruebas a partir de los WebStest que antes habíamos creado, en mi caso seleccione el WebTest2 que fue el que creamos inicialmente:

image

Luego podemos elegir el tipo de conexión de los clientes:

image

También podemos configurar el tipo de explorador

image

Luego podemos establecer la duración de la carga:

image

Y listo, ahora ejecutamos el test y comenzamos a recibir los resultados!! Sonrisa

image

Y Listo! se que son varios pasos, pero esto es muy útil, ahora mismo me ha tocado realizar pruebas de carga a algunas páginas y está herramienta me ha venido de perilla!!

Saludos!
@chalalo

[Tips]Generar Codigos QR con jQuery

Hola que tal, buscando unos ejemplos me encontré con esta plugin para jquery muy útil a la hora de generar códigos QR. http://larsjung.de/qrcode/. La verdad me gustó mucho por que tiene la opción de hacer el render mediante un canvas, divs  mediante una tabla, lo que es muy útil al momento de dar compatibilidad con browsers antiguos. Su uso es bastante fácil, solo baje el plugin y armé el proyecto como ASP.NET como lo vez a continuación:

image

Luego incluí los scripts:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>

<script src="js/jquery.qrcode-0.2.js"></script>

 

y seguí las instrucciones de la página, en donde se indica que se deben crear los divs correspondiente para hacer el render, luego utilizando los ya clásicos

selectores de jquery, vamos a asignar el plugin a dichos divs.

 

 

   <p>Render en tabla</p>

    <div id="qrcodeTable"></div>

 

    <p>Render en canvas</p>

    <div id="qrcodeCanvas"></div>

<script>

 

    jQuery(‘#qrcodeTable’).qrcode({

        render: "table",

        text: "http://www.chalalo.cl"

    });

 

 

    $(‘#qrcodeCanvas’).qrcode({

        render: ‘div’,

        width: 100,

        height: 100,

        color: ‘#CCAA00’,

        text: ‘http://www.chalalo.cl’

    });

</script>

Atención especial a como se hace el render en el cliente,  como puedes ver, si elegimos canvas, el código generado es el siguiente:

image

Si elegimos tabla, debido a que estamos con un browser antiguo, o lo simulas como lo hice con IE con el modo de documento, se generan muchas celdas una tabla generada en tiempo de ejecución con el backgound de la celda coloreado según especificamos en el plugin.

image

Si elegimos divs tendemos algo similar, aunque más rápido en el render

image

Otro ejemplo de la personalización que podemos llegar a hacer:

$(‘#qrcodeCanvas’).qrcode({

        render: ‘div’,

        width: 100,

        height: 100,

        color: ‘#CCAA00’,

        text: ‘http://www.chalalo.cl’

    });

image

Además podemos desde la versión 0.2 de este plugin encodear aprox 2900 caracteres. Para probar tomé una porción de código de la página de ASP.NET y la agregué a la propiedad text del plugin,

image

El código (hay mucho más en la línea, pero se entiende verdad?)

image

y el código QR Generado:

image

Y puedes comprobarlo desde tu teléfono, para este ejemplo, por el tema de los screenshot utilice mi galaxy nexus. (PD: luego de ver la imagen, me reí, el número 911 se me repite en todos lados)

image

Ahora bien, esto lo hizo generando como div, por lo que son muuuuchos divs en la página, por lo que le tomó un tiempo de aprox 8 segundos en hacer el render,  como canvas un par de segundos menos, como tabla, mejor olvídalo Sonrisa

Bueno, espero que les sirva el tips, y si, pueden ocuparlo con WebForms también , pueden encapsular este plugin y listo! en otro artículo lo hago.

Nos vemos!!
@chalalo