Posters de los Shortcuts de Visual Studio 2010 (después de jugar StarCraft 2 y perder)

Después de jugar Starcraft 2 y ser derrotado, siendo una de las causales que con el mouse me demoraba mucho en elegir, crear, enviar al ataque algunas unidades, es que es mi deber compartir  poster con los ShortCuts de Visual Studio 2010. Hace muy poco se agregaron mejoras para optimizar la impresión de los mismos, existen poster para cada uno de los lenguajes y distintas versiones para el tamaño del papel para imprimir. Recuerda que el usar ShortCuts puede aumentar tu productividad y además, que es lo más importante, se ve muy cool!, jajaj

Descárgalo en
http://www.microsoft.com/downloads/details.aspx?FamilyID=92CED922-D505-457A-8C9C-84036160639F&displaylang=en

image

Saludos!!!
Gonzalo

PD: Sigo jugando Sonrisa

Material Charla Mejores Prácticas en el Desarrollo de Sitios Web & ASP.NET Ajax

Ayer jueves 22/07 tuve la oportunidad de participar como Orador en la charla Mejores Prácticas en el Desarrollo del Sitios Web & ASP.NET Ajax & Nuevas Funcionalidades en ASP.NET 4 junto a Juan Carlos Olamendy, un título Bastante Largo para una agenda también extensa. Estoy muy contento ya que recibimos buenos comentarios sobre la charla, las preguntas estuvieron muy buenas, y hubo espacio para discusión.

image

AGENDA:

image

Ya están subiendo al sitio de Comunidades Técnicas la grabación de ayer http://www.facebook.com/ComunidadesMS  (si no está ahora, durante el día debería), te recomiendo que te hagas fan de esa manera siempre vas a estar actualizado con los eventos.

Creo que Juan Carlos va a subir también los ejemplos, por mi parte te dejo la PPT  y links de mi sitio que están relacionados con lo que vimos ayer:

PPTX:
http://cid-053a660afa3473b3.office.live.com/view.aspx/P%c3%bablico/Charla22.pptx

LINKS:

  • Optimizando tu Web con CSS SPrites
  • Utilizar Microsoft Ajax CDN
  • Minificar los archivos JavaScript
  • CompositeScript – Combinar para optimizar
  • Mejora para los motores de Búsqueda (ASP.NET 4)
  • Mejorar el rendimiento optimizando los ViewState (ASP.NET 4)
  • Nuevas Plantillas en el Cliente con Jquery
  • [Tutorial]Introducción al nuevo ScriptLoader de ASP.NET AJAX Library
  • [Tips] ASP.NET 4 Comprime las variables de Session (Para WebFarm)
  • [Tips] ASP.NET 4 – Extensible Request Validation, con ejemplo.
  • [ScreenCast] ASP.NET 4.0 – ClientIDMode
  • [ScreenCast] ASP.NET 4.0 – ViewStateMode
  • [ScreenCast] ASP.NET 4.0 – Routing
  • [ScreenCast] ASP.NET 4.0 – RedirectPermanent
  • [ASP.NET 4.0] Mejora para los Motores de Búsqueda- Meta Tag y Descripción.
  • Espero que te sirvan los links, nos vemos!
    Saludos,
    Gonzalo

    [Tutorial]–Facebook List, un AutoCompletar Cool para JQuery y su integración con ASP.NET

    Hola que tal? Hoy voy ha escribir una especie de tutorial para mostrar como integrar (no es la única forma) el excelente Plugin para jQuery  Facebook List, puedes ver el demo de como funciona acá:
    http://devthought.com/wp-content/articles/autocompletelist/test.html

    image

    También puedes ver un comportamiento similar en Hotmail, cuando elijes a los destinatarios de tu correo
    image

    FaceBook List

    Este PlugIn, obtiene los datos desde una fuente que le retorne un objeto en notación JSON con los campos:caption y value.
    Además puedes agregar a la lista ítems ya previamente seleccionados y agregar nuevos elementos  la lista de búsqueda mediantes LI.
    Revisa para mayor información:
    http://devthought.com/blog/projects-news/2008/01/textboxlist-meets-autocompletion/

    Nuestro Ejemplo

    Nuestra base es simple, tenemos la siguiente Modelo y  su contexto con Linq2Sql asociado.

    MER

    Contexto

    image image

    Como ves, es un listado géneros y sus películas asociadas, de manera de poder consultar por los géneros y obtener un listado de películas.

    Ahora hay que crear el código para devolver en notación JSON el listado de géneros para que funcione el autocomplete. Para esto podríamos utilizar Servicios WCF que nos pueden retornar el conjunto de resultados con dicha notación. Pero en este caso , podrías no querer desarrollar un webservice, por lo que vamos a generar la respuesta con JSON desde un WebForm, para esto , creamos el webform getDatos.aspx:

    Public Class getDatos
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
           Dim datos As String = GetGeneros()
            Response.ContentType = "application/json"
            Response.Write(datos)
            Response.End()
        End Sub

        Public Function GetGeneros() As String
            Dim Items As New List(Of GeneroItem)
            Dim modelo As New ModeloDataContext
            Dim lista = From p In modelo.Generos Order By p.Genero
            For Each g As Genero In lista
                Items.Add(New GeneroItem With {.caption = g.Genero, .value = p.Id})
            Next
            Dim jsonSerializer As New _  
                  System.Web.Script.Serialization.JavaScriptSerializer()

            Return jsonSerializer.Serialize(Items)
        End Function

        Public Class GeneroItem
            Public caption As String
            Public value As Integer
        End Class
    End Class

    Contamos con una funcion getGeneros que se encarga de obtener mediante linqtoSql una lista de GeneroItem serializada a JSON. Como ves. se obtiene una lista de géneros y luego se pasa a una lista de generoItem y se retorna el resultado “JSONEADO”. La clase GeneroItem tiene los campos necesarios que requiere Facebook-list para crear los ítems al momento de seleccionar el autocompletado.
    Luego en la Page_Load obtenemos la respuesta de GetGeneros y escribimos en la página mediante Response.Write esta respuesta, cambiando el ContentType de la página para que se escriba con la notación que necesitamos.

    Ahora al momento de ejecutar la página GetDatos.aspx tenemos la respuesta:

    [{"caption":"Accion","value":3},
    {"caption":"Comedia","value":5},
    {"caption":"Drama","value":2},
    {"caption":"Suspenso","value":4},
    {"caption":"Terror","value":1}]

    Que es justamente lo que buscamos Sonrisa.

    Formulario Principal

    Para crear esto, me baso en el ejemplo que viene con el plugin, pero vamos a crear más código javascript para que se adapte para trabajar con WebForms. En el tema de diseño, vamos tener lo siguiente:

    image

    Veamos el código declarativo

    Primero que nada, debemos hacer las referencias necesarias:

    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>    <script src="fcbkcomplete.min.js" type="text/javascript" charset="utf-8"></script>

    Luego seguimos con el código propio del del Plugin:

      <ol>
          <li id="facebook-list" class="input-text">
            <label>
               Demo FacebookList – Busca los nombres de los Generos
            </label>
                    <asp:TextBox ID="TxBusca" runat="server"></asp:TextBox>
                    <ul id="preadded" style="display: none">
                        <asp:Literal ID="Agregados" runat="server">
                        </asp:Literal>
                    </ul>
                    <div id="facebook-auto">
                        <div class="default">
                            Escribe los géneros de las películas a buscar</div>
                        <ul id="feed">
                        </ul>
                    </div>
                </li>
            </ol>

    Según el esquema del plugin, la estructura debe ser la que antes se muestra, el UL con Id preadded sirve para agregar selecciones al cargar el plugin, esto nos va a servir para mantener el estado del plugin, es decir que no se pierda la selección entre PostBack, para esto agregamos un control Literal “Agregados” para que mediante código programático mantengamos las selecciones anteriores, esto se ve apoyado mediante código JavaScript.

    <script language="JavaScript">

            $(document).ready(function () {
                $.facebooklist(‘#TxBusca’, ‘#preadded’, ‘#facebook-auto’,
                              { url: ‘getDatos.aspx’, cache: 1 }, 10, 
                               { userfilter: 1, casesensetive: 0 });
           });

       function getList() {
              var lista = document.getElementById("facebook-list").children[1];
              var i = 0;
              var generos = "";
                for (i = 0; i < lista.children.length – 1; i++) {
                   generos = generos + ";" + lista.children[i].outerText;
                }
                document.getElementById("hf_generos").value = generos;
                return true;
            }
    </script>

    El primer código que vemos es propio del plugin, que  indica, cual es el input-text, cual es la sección del preadded , el cual tiene que ver con la sección en donde se agregan las selecciones, la URL que retorna la lista en JSON, la cantidad de sugerencias entre otros( para una info detallada, ve a la página del plugin).

    Lo que no indica la documentación del plugin es como capturar los valores seleccionados, por lo que vamos a crear una función getList que obtiene cada uno de los valores seleccionados y luego genera una lista separa por ; y se los asignamos a al HiddenField hf_generos. Esta función la llamamos desde la propiedad onClientClick del botón.

     

    <asp:Button ID="Button2"
                runat="server"
                Text="Buscar"
                 OnClientClick="getList()" />

    De esta manera, al presionar el botón llamamos a la función JavasScript y al método en el código programático:

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

        Dim listaGeneros() As String = hf_generos.Value.ToString.Split(";")
        Dim modelo As New ModeloDataContext
        Dim listaPeliculas = From p In modelo.Peliculas _
                             Where listaGeneros.Contains(p.Genero.Genero) _
                             Select p.Nombre, p.Genero.Genero
       
        GrillaPeliculas.DataSource = listaPeliculas
        GrillaPeliculas.DataBind()

        ‘volvemos a Poner en la lista lo que había antes
        Dim listaAgregados As String = String.Empty
        Dim i As Integer
        For i = 0 To listaGeneros.Length – 1
                If Not String.IsNullOrEmpty(listaGeneros(i)) Then
                    listaAgregados = listaAgregados + _
                        String.Format("<li value=""{0}"">{1}</li>", i,   
                            listaGeneros(i))
                End If
         Next
         Agregados.Text = listaAgregados 
      
    End Sub

     

    Lo primero tenemos que hacer es obtener desde el HiddenField la lista de seleccione y las pasamos a un arreglo, luego hacemos la consulta con LinQ, para mostrar todos las películas que pertenecen a los géneros seleccionados. Luego ponemos en la lista la selección anterior , para mantener el estado, apoyándonos en el Literal e imprimiendo li con las selecciones previas.

    Veamos el Video del funcionamiento:

    Baja el ejemplo desde acá:

    http://cid-053a660afa3473b3.office.live.com/self.aspx/P%c3%bablico/Autocomplete2.rar

    PD:Recuerda que el onClientClick no funciona de manera adecuada en FireFox.

    Este es un control que esta es sus primeros pasos,  por lo que pueden existir algunos bugs por el momento, pero como vez, es totalmente funcional.

    Espero que te sirva!
    Gonzalo

    [Tips]ASP.NET , determinar si nos navegan desde un cliente móbil & JQuery – JQTouch,

    Hola!, de hace un tiempo que estoy con la inquietud de crear aplicaciones para dispositivos móviles. Generalmente podemos encontrar de dos tipos, las que son App instaladas en el teléfono, o otras que abren el navegador del dispositivo y que corresponden a páginas web que deben estar seteadas para el dispositivo.

    Request.Browser.IsMobileDevice de ASP.NET nos permite determinar si el browser que está navegando nuestra página corresponde al de un dispositivo móvil. De hecho podemos ver más información del browser como:

    Response.Write("<B>User Agent:</B> " & Request.UserAgent & "<BR />")        Response.Write("<B>Movil:</B> " & Request.Browser.IsMobileDevice & "<BR />")
    Response.Write("<B>Browser:</B> " & Request.Browser.Browser & "<BR />")
    Response.Write("<B>Version:</B> " & Request.Browser.Version & "<BR />")
    Response.Write("<B>Mayor:</B> " & Request.Browser.MajorVersion & "<BR />")
    Response.Write("<B>Menor:</B> " & Request.Browser.MinorVersion & "<BR />")

    El resultado es:

    image

    Con esto obviamente puedes redireccionar tu sitio a una página hecha para dispositivos móviles,ahora bien, también gustaría saber que dispositivo móvil está navegando nuestra página,  ya que no todos tienen la misma resolución.Para esto podemos utilizar Request
    .UserAgent
    que contiene como string el tipo de dispositivo, por ejemplo podemos determinar el tipo de teléfono (fijando el en tipo de navegador, aunque muchas veces no es lo más certero)

    • userAgent.Contains("iphone")
    • userAgent.Contains("blackberry")
    • userAgent.Contains("palm")
    • Etc….

    Es en este sentido, con toda esta latera introducción, que te quería recomendar , si es que querías hacer algo similar, le hecharas uno ojo a JQTouch, que está basado en jQuery, que nos permite realizar páginas con “look and Feel” similar a una UI de Iphone:

    http://jqtouch.com/

    Que no solo consiste en los gráficos, si no que también son similares en comportamiento, es decir, el scroll, botones, navegación y demases,

    image

    Yo no tengo IPhone, pero puedo utilizar safari para probar las páginas que estoy haciendo,tambien en Blackberry vas a encontrar emuladores, la idea es que aunque no tengas el dispositivo físico, puedas crear tus aplicaciones y navegarlas con los dispositivos.

    Por mi parte, estoy entusiasmado para crear web y app para móviles Sonrisa, espero que esto que escribií recien, te sirva!

    Saludos,
    Gonzalo!

    Introduciendo WebMatrix, lo nuevo del Team ASP.NET

    Estos días se vienen varias novedades en lo que es desarrollo web, tenemos los siguientes anuncios de Scott Guthrie:

    • IIS Developer Express: Un Servidor Web liviano, gratis, simple de configurar, compatible con todas las versiones de Windows y compatible totalmente IIS 7.5

    • SQL Server Compact Edition:  Una base de datos basada en un archivo (tipo SqlLite), muy liviana, gratis y que puede ser integrada en las aplicaciones ASP.NET, permite la migración a SQL Server.

    • ASP.NET “Razor”: Un nuevo motor opcional de vistas para ASP.NET, que permite enfocase en la generación de plantillas optimizando la generación del HTML. Sintaxis fácil de usar, de aprender.

    Y se anunció WebMatrix

    WebMatrix

    image

    WebMatrix tiene todo lo que necesitamos para crear sitios Web que utiliza Windows. Incluye el servidor web IIS Developer Express, ASP.NET ( Web framework), y SQL Server Compact (Nueva base de datos embebida).

    WebMatrix pesa aproximadamente 15MB si tienes el Fx 4 instalado, si no, aproximadamente 40Mb.

    Es un entorno Muy integrado , que nos permite crear páginas de una forma sencilla, con un lenguaje con sintaxis simples y poderosas, con helpers que nos facilitan bastante las cosas.

    Lo puedes descargar desde acá http://www.microsoft.com/web/webmatrix/ mediante el WPI.Puedes ver tutoriales acá: http://www.asp.net/webmatrix para aprender más, realmente hay muchas posibilidades con todo lo que trae esta herramienta, por ejemplo, mira el post de Scott Hanselman:
    http://www.hanselman.com/blog/MicrosoftWebMatrixInContextAndDeployingYourFirstSite.aspx

    Crear nuestro Primer Sitio

    Una vez instalado el Sw, y al seleccionar la opción de crear nuevo sitio, vamos a ver la siguiente pantalla, en donde nos da la opción de elegir una plantilla para la confección del sitio, en nuestro caso, una plantilla vacía:

    image

    Luego verás el siguiente pantalla relacionada con tu sitio, en donde puedes setear y crear bases de datos, archivos de la aplicaciones y reportes de CEO.

    image

    Voy a agregar un nuevo archivo, para eso vamos a Files y  pinchamos Agregar nuevo archivo al sitio:
    image 
    Luego podemos elegir el tipo de archivo que vamos a manejar para nuestro sitio, como ven hay una amplia gama, lo que vamos a seleccionar (y es que aquí está la gracia) es CSHTML, el cual lo podemos leer como (HTML C#).

    image 

    Como ves, el documento es un HTML normal, pero luego podemos comenzar a programar con las sintaxis de Razor (Solo la sintaxis, ya que el motor no esta disponible en esta versión)

    image

    Veamos uno ejemplo de la Sintaxis, como verás en bastante minimalista, genera además un código limpio del lado del Cliente

    <!DOCTYPE html>
    <html>
        <head>
            <title>Primer Demo con WebMatrix</title>
        </head>
        <body>
        
     @{ var miNombre = “Gonzalo”; }
         <p>Hola, mi nombre es : @miNombre </p>
        @{
           var var1 = “Esto esta muy bueno,”
           var dia = DateTime.Now.DayOfWeek; 
           var msgTotal = var1 + ” hoy es: “ + dia;
         }
         <p>@msgTotal</p>}
      
    </body>
    </html>

    Luego, si queremos ejecutar nuestra página, tenemos la opción de Run (Ejecutar) lo que hemos hecho, mostrándonos en una pestaña todos los navegadores disponibles en nuestro SO, o también nos da la opción de probar en todos los navegadores., image

    image

    Agregar Bases de Datos

    Como te había comentado, WebMatrix es un entorno integrado, que incluye bases de datos, SQL Server Compact, la cual es una nueva base de datos integrada con ASP.NET, compatible con las API existentes del mundo NET, además no requiere instalación (cuando lo subas a un hosting)

    image 

    Gráficamente podemos crear la tabla con los campos, para este ejemplo algo sencillo, solo Id, Nombre y Edad :

    image
    Ahora vamos a crear el código para mostrar los datos de la tabla. Para el manejo de datos existe gran cantidad de Helpers, mira lo sencillo que es conectarse a la base que hemos creado y crear la consulta para luego ejecutarla:

    <!DOCTYPE html>
    @{   var mibase =Database.Open(“DemoWM”);
         var personas =mibase.Query(“Select * from Personas”);
    }
    <html>
        <head>
            <title>Demo 2 WebMatrix </title>
        </head>
        <body>
       <h2>Mostrar Datos </h2>
        <ul>
           @foreach (var persona in personas){
            <li>Nombre @persona.nombre Edad: @persona.edad</li>
        }
        </ul>
        </body>
    </html>

    Y al ejecutar:

    Ejecución del la Página

    Código Generado

    image image

    Insertando Datos

    Necesitamos insertar los datos, y para ello vamos a utilizar los helpers que nos van a permitir ahorrarnos bastante código:

    @{   var mibase =Database.Open(“DemoWM”);
    if (IsPost) {
      string Nombre = Request[“Nombre”]; 
      if (Nombre.IsEmpty()){ 
               Validation.AddFieldError(“Nombre”, “El nombre es Obligatorio.”);
      }

      int Edad = Request[“Edad”].AsInt();
      if (Edad==0){
         Validation.AddFieldError(“Edad”, “Escriba Edad >0”);
      }
      if(Validation.Success) {
       var SqlInsertar = “INSERT INTO Personas (Nombre, Edad) VALUES (@0, @1)”;
       mibase.Execute(SqlInsertar, Nombre, Edad);
      }

    var personas =mibase.Query(“Select * from Personas”);
    }

    isPost nos sirve para determinar si se efectuó un postback, luego utilizamos el helper Validation y su método AddFieldErrror, que nos permite agregar los mensajes de error en el helper @html.ValidationSummary. AsInt nos permite convertir el parámetro que viene por Post. Finalmente si Validation.Success es verdadero, es decir, no se agregaron Errores (addFieldError), vamos a agregar el el registro.

    Y el código HTML Asociado

    image

    Ahora al ejecutar:

    image image

    Ya ingresamos un nuevo registro, con pocas líneas de código podemos crear páginas dinámicas.

    Además puedes probar el comportamiento de tu sitio en el menú sitio y luego request:

    image

    Encontrar un WebHosting para tu aplicación y agregarlo a tu lista:

    image

    Y Luego publicar directamente tu aplicación:

    image

    Te recomiendo  que veas para ver revisar la documentación.
    http://www.asp.net/webmatrix

    Personalmente, creo que esta herramienta promete, si bien no vas a encontrar un editor de texto totalmente completo, vas a poder probar y disfrutar aprendiendo esta herramienta.

    Saludos!!
    Gonzalo

    Conferencia Técnica MSDN:La máxima potencia en el desarrollo de sitios web.

    Hola!, te quiero invitar a un evento presencial en Santiago, el próximo jueves 22 de Julio a las 18:30 horas, en las oficinas de Microsoft Chile, en donde podremos conversar sobre tips de optimización web, secretos ninjas para hacer volar tu web y además novedades en el ASP.NET Ajax Library y ASP.NET 4 que potenciaran tus desarrollos Sonrisa

    Registrare aquí:
    https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032454982&Culture=es-CL

    Si eres de regiones (más al sur, y no puedes viajar) creo que esta conferencia va a ser transmitida por Internet, si eres de Concepción, me esperas un poco y como soy también de Concepción y quieres que en tu Universidad se dicte la Charla, me contactas y ya está.

    Detalle del Evento:

    Microsoft Chile – Sala Farellones y Colorado

    Mariano Sánchez Fontecilla 310 Piso 6
    Las Condes Santiago Región Metropolitana Chile

    Idiomas:
    Español.

    Información general del Evento

    Si eres desarrollador de sitios web no te pierdas este evento!!
    En la primera parte de esta charla revisaremos técnicas que puedes poner hoy en práctica fácilmente para hacer volar y potenciar tu Sitio Web actual: Compresión HTTP, CSS Sprites , Script Combinados, el uso de CDN, Minificación de Script y mucho más…
    Y en la segunda parte te mostraremos las nuevas características y potencialidades de ASP.NET 4.0  que puedes utilizar para la creación de tus nuevos sitios web.
    Oradores:

    Gonzalo Pérez – MVP ASP/ASP.NET
    John Charles Olamendy – MVP C#

    INFORMACIÓN IMPORTANTE:
    Este evento no considera el pago de estacionamientos para los asistentes.
    Microsoft se reserva el derecho a utilizar los espacios disponibles, una vez comenzado el evento.

    Opciones de registro

    Id. de evento:
    1032454982

    Eso, los espero!