[Material] Sesión 3 WebMatrix : Trabajando con Imágenes, gráficos, Redes Sociales , Videos y búsquedas.

Hola!, les dejo la presentación de la tercera charla de ciclo de WebMatrix, y los ejemplo de código con sintaxis Razor.

Descarga los Demos aquí

Puedes ver el video online de la presentación acá:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032480609&Culture=es-AR

 

Saludos!
Gonzalo

[jQuery] Utilizar Shortcut Keys en tus páginas Web, Ejemplo para grabar y bloquear pantalla.

Hola que tal?, este tip surgió de la necesidad de “pseudo bloquear” una aplicación web mediante el uso de una combinación de teclas, sin embargo, este ejemplo va un poco más allá y veremos también como utilizar los shortcut para que con Ctrl + S podamos grabar asíncronamente en la base de datos. Entonces, hay dos ideas principales de este post, bloquear y grabar.

Entonces, vamos a utilizar un formulario bastante sencillo, que tiene un textarea y un div con id mensaje para mostrar el aviso sobre el estado de la grabación del registro.

image

El plugin que vamos a utilizar se llama hotkeys y está creado por J.Resig, creado de jQuery, pueden verlo en:
https://github.com/jeresig/jquery.hotkeys

Primer Caso, Grabar con Ctrl +  S

La idea es que al estar escribiendo un texto, con Ctrl + S podamos guardar, para mi ejemplo, son notas independientes que se irán grabando, es decir, cada vez que se graba, se crea un nuevo registro.Para ambos ejemplos (grabar y bloquear) vamos a agregar las librerías:

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.hotkeys.min.js" type="text/javascript"></script>

<script src="Scripts/modal.js" type="text/javascript"></script>

<script src="Scripts/bloqueo.ejemplo.js" type="text/javascript"></script>

<link href="css/estilos.css" rel="stylesheet" type="text/css" />

En la librería bloqueo.ejemplo.js está el código para asociar la combinación de teclas a la funcionalidad:

    $(document).bind(‘keydown’, ‘ctrl+s’, function (evt) { 

        guardaTexto();

        return false;

    });

La simpleza es increíble, le indicamos que combinación de teclas va a ser la que gatille el evento, luego invocamos a la función guardaTexto();

function guardaTexto() {

        $("#mensaje").html("<strong>Guardando…</strong>");

        var texto = $("#tx_nota").val();

        $.ajax({

            type: "POST",

            url: "TextoWS.asmx/guardaNota",

            data: "{ texto:’" + texto + "’ }",

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function () {

                $("#mensaje").html("Registro Grabado…");

 

            },

            failure: function (msg) {

                alert(msg);

            }

 

        });

    }

Como se puede ver, me estoy conectado a un webService, que el cual siemplemente guarda el texto:

   <WebMethod()> _

    Public Sub guardaNota(texto As String)

        Dim contexto As New ContextoDataContext

        Dim registro As New nota With {.nota = texto, .fecha = Date.Now}

        contexto.notas.InsertOnSubmit(registro)

        contexto.SubmitChanges()

    End Sub

El ejemplo utiliza LinQ y el contexto es:

image

De todas maneras, al final del post, se adjunta el demo para que lo descargues:

A Probarlo! Sonrisa 

Segundo Caso, Bloquear la pantalla.

En este caso no hay llamada asíncrona, si que no debemos tratar de bloquear la pantalla para que no se puede seguir escribiendo, para esto vamos a configurar que cuando se presione Ctrl + K se bloquee la pantalla y al volver a presionar estas teclas,  se desbloquee.

image

En vez de elegir una ventana Modal de los plugins conocidos, elegí el ejemplo de Ribosomatic, de paso excelente blog:
http://www.ribosomatic.com/articulos/ventana-modal-con-jquery-paso-a-paso/

Ya que este ejemplo no tiene la opción explícita de cerrar la ventana, entonces, nos sirve para crear el efecto de bloquear. Dentro del archivo modal.js encontraremos el código de la ventana.

Veamos el código del bloqueo:

$(document).bind(‘keydown’, ‘ctrl+k’, function (evt) {

        if (bloqueo_pantalla == 0) {

            $("#mensaje").focus();

            mostrar_msg_bloqueo();

 

            bloqueo_pantalla = 1;

            return false;

        } else {

            closeModal();

            bloqueo_pantalla = 0;

            return false;

        }

 

    });

Voy a mantener la variable bloqueo_pantalla para hacer el cambio de bloqueo a desbloqueo cada vez que se presione Ctrl + K. Algo importante es sacar el foco desde un campo input, por que si al momento de presionar la ctrl+k el cursor está sobre, por ejemplo, una caja de texto, se podrá seguir escribiendo, es por eso que enviamos el foco a un DIV, en este caso, mensaje.

También es necesario, por lo menos para mi Sonrisa,  bloquear la tecla F5, por lo que voy a agregar otro código:

   $("body").keydown(function () {

        var tecla = window.event.keyCode;

        if (tecla == 116) {

            event.keyCode = 0;

            event.returnValue = false;

        }

 

    });

El código del F5 es el 116, y anulamos el evento.

A Probarlo! Sonrisa

 

 

Como vez, el efecto es el deseado, puedes cambiar el contenido de la ventana modal en el archivo modal.js.

Te dejo el código completo para que lo descargues:

Espero que te sirva!!
Nos vemos!!

[Tips] Filtrar un Gridview con Jquery al presionar una tecla, y no filtra el Pager

Hola , después de que hace meses me había comprometido a arreglar el ejemplo de filtrar un gridview al presionar una tecla el cual filtraba también la fila de paginación, retome el tema y bueno, aquí está la solución, que es bastante sencilla, si ya hiciste el ejemplo anterior, falta la nada misma para lograr que ahora, no filtre también ni el header ni el pager de la grilla.

Para ser más claros, en la versión anterior (la paginación desaparecía): Triste

image

En esta versión: Sonrisa

image

Simplemente agregando el atributo ItemStyle–CssClass=”filtro”, sin embargo puedes elegir  el nombre que quieras, siempre y cuando se relacione con el selector que veremos a continuación:

image

Y agregamos en el selector inicial del script la clase que agregamos el boundfield o templatefield, funciona de la misma manera. Ahora bien, con este selector estamos diciendo, “todas las filas, que tengan una celda que tenga como atributo una clase que se llame filtro”  entonces, puedes hacer tus propios experimentos con los selectores.

image

Esta vez, dejo disponible el código:
image

El post Original (con video incluido) está en:
http://geeks.ms/blogs/gperez/archive/2009/05/22/tips-filtrar-un-gridview-con-jquery-al-presionar-una-tecla.aspx

Espero que te sirva Sonrisa
Saludos,
Chalalo….

[IE9] IE9ify, plugin de jQuery para IE9

image

Hola, quiero compartir este plugin que he encontrado, que facilita bastante el agregar la funcionalidad de Pinned sites , Task y Jumping list, se llama IE9ify y esta disponible para la descarga en:

http://ie9ify.codeplex.com/

Instalación

Para instalarlo en nuestro sitio, podemos también utilizar el excelente NuGet desde Visual Studio y como te darás cuenta, instala jQuery 1.5.2 y jQuery.ie9ify 1.0,

image

Una vez con los Script ya descargados, vamos a poder utilizarlo.

image

Dentro de las facilidades que nos da este plugin, es que se encarga de agregar los meta tags necesarios para activar las funcionalidades en IE9,  proveer una forma más “Ordenada” de agregar Task List y Jumping List y agregar un aviso al usuario de que se puede arrastrar el sitio a la barra para poder anclarlo.

Código

Primero agregamos las referencias y el favicon:

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” /> 

<script src=”Scripts/jquery-1.5.2.min.js” type=”text/javascript”></script>

<script src=”Scripts/jquery.ie9ify.min.js” type=”text/javascript”></script>

Luego el código (Creo que es auto explicativo, cualquier consulta, la puedes hacer en el blog)

<script type=”text/javascript”>

   $(document).ready(function () {

       $(‘head’).ie9ify({

          applicationName: ‘Ejemplo IE9ifi’,

          tooltip: ‘Ejemplo de IE9Ifi ‘,

          startUrl: ‘Default.aspx’,

           tasks: [{

                ‘name’: ‘Mi Blog’,

                ‘action’: ‘http://www.chalalo.cl’,

                ‘icon’: ‘favicon.ico’

              },

              {

                ‘name’: ‘RSS’,

                ‘action’: ‘http://geeks.ms/blogs/gperez/rsscomments.aspx’,

                ‘icon’: ‘icons/rss.ico’

              },

              {

                ‘name’: ‘Twitter’,

                ‘action’: ‘http://twitter.com/chalalo’,

                ‘icon’: ‘icons/twitter.ico’

              },

              {

                ‘name’: ‘Facebook’,

                ‘action’: ‘http://www.facebool.com/chalalo’,

                ‘icon’: ‘icons/facebook.ico’

                }]

            });

 

           

           $(‘#barra’).ie9ify(‘pinTeaser’, {

                addStartLink: false,

                backgroundColor: ‘#ea6d03’,

                pinText: ‘Arrastra esta imagen a la barra de tareas’

            });

 

            if ($.ie9ify.isPinned()) {

 

                $.ie9ify.addJumpList({

                    title: ‘IE9 en Chalalo’,

                    items: [

                    {

                    ‘name’: ‘Thumbnails Icons’,

                    ‘url’: ‘http://geeks.ms/blogs/gperez/archive/2010/11/16/tutorial-r-225-pido-crea-tus-propios-thumbnails-icons-en-ie9.aspx’,

                    ‘icon’: ‘http://geeks.ms/favicon.ico’

                    },

                    {

                    ‘name’: ‘Overlays Icons’,

                   ‘url’: ‘http://geeks.ms/blogs/gperez/archive/2010/11/17/tutorial-r-225-pido-utilizar-overlays-icons-en-tu-p-225-gina-con-ie9.aspx’,

                    ‘icon’: ‘http://geeks.ms/favicon.ico’

                    },

                    {

                    ‘name’: ‘Promoción de Sitios’,

                    ‘url’: ‘http://geeks.ms/blogs/gperez/archive/2010/11/23/tutorial-r-225-pido-promocionar-tus-sitios-que-utilizan-ie9.aspx’,

                    ‘icon’: ‘http://geeks.ms/favicon.ico’

                    }]

                });

            }

 

        });

    </script>

 

Con este código, lo que estamos haciendo es agregando las task item, las jumping list y la funcionalidad de indicarle al usuario que puede anclar en sitio, para esto solo debes agregar un div en tu página, por ejemplo:

<div id=”barra”></div>

y al momento de visualizar nuestra página veremos el div posicionado en la parte superior y con el formato y texto que nosotros hayamos escogido Sonrisa

image

 

Luego, al anclar el sitio, veremos desaparecer esta barra y la lista de tareas de nuestro sitio anclado se verá mucho más completa Guiño

 

image

Esto no es todo lo que puede lograr el Plugin, puedes revisar más información en:

Saludos,
Gonzalo

[Tips] Divvy organiza tus ventanas a tu antojo!

image

Hola que tal, este tips no es de programación pero te puede ayudar a organizar tu IDE + Herramientas + Browser cuando estas desarrollando y/o depurando.

Se trata de Divvy, un software que te va a permitir organizar tus ventanas a tu antojo, va más allá de organizar dos ventanas de manera que cada una utilice el 50% de la pantalla.

Divvy presenta una matriz en pantalla en donde podrás seleccionar la sección de la pantalla en donde quieres que se organice tu ventana:

image

También puedes asignar una combinación de teclas para activarlo entre otras opciones.

De este modo haces mucho más personalizable tu escritorio, descárgalo desde su página principal:
http://mizage.com/windivvy/

También hay versiones para MAC Sonrisa
Espero que te sirva el tip, para mi, ya es indispensable!
Saludos,
Gonzalo

[Noticia] jQuery Mobile Alpha 4 Liberado y con soporte para WP7!

El Team de jQuery Mobile ha anunciado hace pocas horas que han liberado la versión Alpha 4.  Hay nuevas características y una larga lista de bugs arreglados(algo que más de 150), también se ha optimizado la performance.

Una de las características principales de esta versión, que ya algo habían adelantado vía Twitter, es que hay soporte para Windows Phone 7.

En el blog oficial indican que las características esenciales están soportadas, y que en general la experiencia es aceptable, sin embargo hay que tomar en cuenta que el browser de WP7 es muy cercano a IE7 que no tiene funciones avanzadas de CSS, como las esquinas redondeadas ni las características de drop shadows.

Pero este tema del browser, como algunos ya saben, WP7 se actualizará a fin de año a IE9, y según el Team de jQuery Mobile, ya están trabajando para apoyar esta actualización.

Hay más novedades sobre este nuevo release, que te invito a revisar en :
http://jquerymobile.com/2011/03/jquery-mobile-alpha-4-released/

Saludos!
Gonzalo