Chalalo Land

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

Saludos!!!
Gonzalo

PD: Sigo jugando

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.

AGENDA:

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:

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

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

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

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 .

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:

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:

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,

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

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:

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.

Voy a agregar un nuevo archivo, para eso vamos a Files y  pinchamos Agregar nuevo archivo al sitio:
 
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#).

 

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)

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

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.,

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)

 

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

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

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

Ahora al ejecutar:

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:

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

Y Luego publicar directamente tu aplicación:

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

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!