[Tutorial] Creando una App con JQuery Mobile, WebMatrix y Razor

Hace un par de días atrás se anunció JQuery Mobile, framework para el desarrollo de aplicaciones Web para dispositivos móviles. Aún estamos en un versión Alpha, pero está muy buena!, vamos ver un ejemplo práctico con bases de datos y con el nuevo producto del team de Microsoft ASP.NET: WebMatrix.

Puedes ver mi post anterior para ver un poco más de JQuery Mobile, en este post:

http://geeks.ms/blogs/gperez/archive/2010/10/18/jquery-mobile-1-0-alpha-release.aspx

Nuestro ejemplo tendrá que ver con Mostrar Facultades y las información de las carreras asociadas a ellas. El Resultado Final será:

image image image

Listado Facultades

Listado Carreras Asociadas

Detalle de la Carrera

Al final de este tutorial vamos a ver un video de como se “mueve” este ejemplo:

Construcción del Ejemplo

Voy a utilizar WebMatrix para mostrar lo fácil que es desarrollar (además voy a estar hablando de esto en el TechDays 2010- Chile).

WebMatrix

El entorno de desarrollo WebMatrix cuenta con todas las herramientas necesarias para creación de páginas, bases de datos y publicación de nuestra aplicación.  En primera instancia, lo que vamos a hacer es ir al menú de creación de bases de datos (recordar que esta base es SQL Server CE, un nuevo producto del Web Stack)

Paso 1: Creación de la base de datos

image

Luego creamos las dos tablas, Facultades y Carreras.

Tabla Facultades

Tabla Carreras

image image

Paso 2: Creación y (compresión) de la estructura de la página Facultades (facultares.cshtml)

La estructura de una página que soporte JQuery Mobile, es la de HTML5, de hecho necesitamos el doctype de HTML5. El Tag X-UA.Compatible sirve para forzar a IE para utilizar el renderizado más reciente. Necesitamos referenciar los Script de JQuery Mobile, para esto vamos a utilizar CDN. Si queremos asignar un ícono para que los usuarios puedan agregar la página su dispositivo (IPhone o Android) , agregamos el talg Link con el atributo  rel de apple-touch-icon. Luego referenciamos jQuery 1.4.3 y finalmente el script de jQuery Mobile (que está en alpha).

Vamos a agregar la página, el nuevo concepto de ASP.NET Web Pages para esto vamos a la opción :
image 

y Seleccionamos CSHTML:

image

Y ahora el código, si tienes dudas de la sintaxis de Razor, visita:
http://www.asp.net/webmatrix/tutorials/asp-net-web-pages-api-reference

<!DOCTYPE html>

<html>

   <head>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <title>www.chalalo.cl</title>

   <link rel="stylesheet"
 
 href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"
/>

   <link rel="apple-touch-icon" href="img/condor.jpg" />

   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>

 <div data-role="page"  data-theme="b" >

  <header data-role="header">

         <h2>JQuery Mobile</h2> 

   </header>

   <div data-role="content">

    <ul data-role="listview" data-theme="c" data-dividertheme="e"> 

    @{  var mibase =Database.Open("DemoBase");

        var facultades =mibase.Query("Select Id,Nombre from Facultades");

     } 

    @foreach (var facultad in facultades){

      <li>

         <img src="img/icono.png" alt="Mobiletuts+" class="ui-li-icon"/> 

         <a href=carreras.cshtml?id=@facultad.id
            data-transition="flip">@facultad.nombre</a>
 

      </li>

    }

   <li data-role="list-divider">JQuery Mobile</li>

     <li>

         <img src="img/icono.png" alt="Mobiletuts+" class="ui-li-icon"/> 

         <a href=http://www.jquery.com
            data-transition="flip">JQuery Mobile</a>
 

     </li>

     <li>

        <img src="img/icono.png" alt="Mobiletuts+" class="ui-li-icon"/> 

        <a href=http://www.jquerymobile.com/
           data-transition="flip">JQuery WebSite</a>
 

     </li>

  </ul>

   </div>

   <footer data-role="footer"> 

            <h4>www.chalalo.cl </h4> 

   </footer>

 </div>

</body>

</html>

Si revisamos la estructura, veremos este esqueleto:

<!DOCTYPE html>

<html>

   <head>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <title>www.chalalo.cl</title>

</head>

<body>

 <div data-role="page"  data-theme="a" >

  <header data-role="header">

  </header>

  <div data-role="content">

  </div>

  <footer data-role="footer"> 

  </footer>

 </div>

</body>

</html>

En donde vemos header con el tag  data-role="header"tambien div data-role="content” que representa el contenido de la pagina y por último el footer. Entonces los data-role nos sirven para redenderizar las distintas secciones de la página y tipos de contenido  para el dispositivo móvil.

Además JQuery Mobile tiene la capacidad de cambiar el skin de la aplicación con el menor esfuerzo posible, la página que estamos construyendo tiene el tag:

 <div data-role="page"  data-theme="a" >

Podemos cambiar el tema de la pagina (data-theme) a “b”  y  “c” para ver los  cambios, los colores de los temas se muestran a continuación

image

Visita:
http://jquerymobile.com/demos/1.0a1/#docs/about/themes.html para detalles de los temas.

De hecho , ahora si le agregamos las referencias a los scripts tendremos y “jugamos” con los temas, tendremos:

image image image image

Tema a

Tema b

Tema c

Tema e

Un punto importante, es que yo no tengo IPhone (si alguien me regala uno, por mi perfecto), entonces pruebo la aplicación con:http://www.testiphone.com/ desde safari o chrome.

Ahora volvamos a nuestro código, el competo en donde vamos a aprovechar la sintaxis resumida de Razor para crear la conexión:

    @{  var mibase =Database.Open("DemoBase");

        var facultades =mibase.Query("Select Id,Nombre from Facultades");

     } 

Para luego hacer la consulta a la base, y dejar el resultado (en este caso un conjunto de registros) en la variable facultades. Utilizamos un for each en razor para ir generando los LI dentro de UL que van a permitirnos tener el efecto de la lista de facultades. La lista tiene un tag especial data-role que indica que es un listview. ( si no le agregas el data-role, se ven como simples links)

    <ul data-role="listview" data-theme="c" data-dividertheme="e">

(Visita http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html para más información)

También puedes jugar con los temas, hay un punto interesante acá, que es el el tema del data-dividertheme, que son los separadores de lista. Luego voy a agregar el resultado que se consigue cambiando estos estilos. Una vez definido del listview, iteramos sobre la colección agregando una imagen y un link a las carreras asociadas a la facultad. el Link va asocuado a un tag que se llama data-transition que permite crear una animación en la transición de una página a otra, los tipos de animación son:

  • slide
  • slideup
  • slidedown
  • pop
  • flip
  • fade

Puedes visitar
http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-transitions.html 
para ver todos los estilos de animación de transición de páginas disponibles.

@foreach (var facultad in facultades){

      <li>

         <img src="img/icono.png" alt="Ver Carreras" class="ui-li-icon"/> 

         <a href=carreras.cshtml?id=@facultad.id
            data-transition="flip">@facultad.nombre</a>
 

      </li>

}

Un separador de Lista, tiene la siguiente estructura:

   <li data-role="list-divider">JQuery Mobile</li>

image

Su skin va a estar definido por el data-dividertheme del que hablamos anteriormente,   los  resultados son espectaculares:

image image image image
data-theme="c"
data-dividertheme="e"
data-theme="a"
data-dividertheme="b"
data-theme = "e"
data-dividertheme="c"
data-theme="b"
data-dividertheme="d"

Paso 3 : Página de Carreras (carreras.cshtml)

Esta página debe recibir el parámetro que viene de la página anterior (Facultades) para luego, mostrar la lista de carreras asociadas a dicha facultad.
En la nueva página (Carreras) JQuery Mobile automáticamente va agregar el botón Back en la parte superior, si te das cuenta se ha cargado la página en un div, vemos la url que sigue siendo inicio cshtml.

El código de la página sigue la misma estructura que la anterior. Veamos el código de la página:

<!DOCTYPE html>

<html>

   <head>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <title>www.chalalo.cl</title>

   <link rel="stylesheet"
 
 href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"
/>

   <link rel="apple-touch-icon" href="img/condor.jpg" />

   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>

 <div data-role="page">

  <header data-role="header">

     <h2>JQuery Mobile</h2> 

      </header>

   <div data-role="content">

    <ul data-role="listview" data-theme="c"> 

@{   var mibase =Database.Open("DemoBase");

     var id = Request["id"];

     var carreras = mibase.Query("SELECT Id,Nombre FROM carreras where IdFacultad=@0",id);

 }

 

@foreach (var carrera in carreras){

  <li>

    <img src="img/icono.png" alt="Carrera @carrera.Id" class="ui-li-icon"/> 

       <a href=detcarrera.cshtml?id=@carrera.Id 
          data-transition="pop">@carrera.Nombre</a>
 

  </li>

}

  </ul>

   </div>

   <footer data-role="footer"> 

            <h4>www.chalalo.cl </h4> 

   </footer>

 </div>

</body>

</html>

Ves que no hay mucha diferencia, solo el despliegue de las carreras a partir de un parámetro recibido por la URL:
     var id = Request["id"];

Luego recorrer la colección e ir agregando los li a la lista, el resultado:

image

Paso 4 : Página de Carreras (detcarreras.cshtml)

Esta página muestra el detalle de la carrera seleccionada, es bastante simple y si vemos el código veremos: 

@{   var mibase =Database.Open("DemoBase");

     var id = Request["id"];

     var carrera = mibase.QuerySingle ("SELECT Id,Nombre,Semestres,Descripcion FROM carreras where Id=@0",id);

 }

<!DOCTYPE html>

<html>

   <head>

   <meta charset="utf-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <title>www.chalalo.cl</title>

   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

   <link rel="apple-touch-icon" href="img/condor.jpg" />

   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>

 <div data-role="page">

  <header data-role="header">

     <h2>JQuery Mobile</h2> 

   </header>

   <div data-role="content" >

 

    <h3>@carrera.Nombre</h3> 

        <div>@carrera.Descripcion</div> 

        </br>

         Semestres:@carrera.Semestres

             </br>

   </div>

   <footer data-role="footer"  > 

            <h4 data-icon="forward">www.chalalo.cl </h4> 

   </footer>

 </div>

</body>

</html>

El resultado de es sencillo, mostramos el nombre,la descripción y el semestre, en un formulario simple. Como se puede observar al principio de la página agrego la consulta a la base de datos para obtener la información asociada a cada carrera.
El Resultado:

image

 

Ahora el Video! Nada de mal ah? y recuerda que estamos en un Alpha!

EN IPHONE

image

Ejemplo en IPhone

En Blackberry:
image

Ejemplo en Blackberry 6.0

image

Ejemplo en Android 2.2
Ojo es son solo emuladores, por lo que el comportamiento puede variar al del dispositivo físico
image

Este ejemplo es con un Tablet con Android , que me costó 104 dólares, por lo que el procesador es ….. lento, muy lento, pero de todas maneras funciona, con algunos problemas en los temas, pero nada que un cambio de tema solucione. Acá está el video:

Desde mi Tablet Chino

Paso 5 (Opcional) Subir el proyecto

Webmatrix integra las opciones de subida del proyecto a un hosting, también te muestra una lista con hosting en donde puedes subir tu aplicación.

image

Y podemos hacer el Deploy de nuestra aplicación una vez que nos inscribamos en un servicio de webhosting.

image

Luego al hacer deploy con los datos seleccionamos todos los archivos más la BD.

image

image

Y listo, estamos ok para probar nuestra aplicación en el hosting.En mi caso, está en

http://20377xhov4.adhostbeta.com/DemoJQM/inicio.cshtml

Pruébalo  con el visor de IPhone (o navégala desde tu dispositivo)

Conclusiones

JQuery Mobile nos permite crear aplicaciones de alto impacto y con muy poco esfuerzo para dispositivos móviles, no solo IPhone, si no , por lo menos en esta versión Alpha, con los siguientes dispositivos:

  • Apple iOS: iPhone, iPod Touch, iPad (all versions)
  • Android: all devices (all versions)
  • Blackberry Torch (version 6)
  • Palm WebOS Pre, Pixi
  • Nokia N900

Existen una gran cantidad de recursos visuales para formularios, búsquedas, ventanas modales, etc ( de los cuales voy a estar escribiendo próximamente) que podemos utilizar en nuestros desarrollos, los cuales puedes observar en :
http://jquerymobile.com/demos/1.0a1/#docs/forms/forms-themes.html

Esta ves hice el ejemplo con WebMatrix, pero se puede hacer perfectamente en PHP y MySQL, para que no creas que esto esta solo ligado al código que presente.

A mi parecer este Framerwork promete mucho y esta cumpliendo en versiones tempranas con bastante, aún se está trabajando para el soporte de nuevos dispositivos, de manera que al crear una app, no nos preocupe el como de va a desplegar en un smartphone que no sea en el cual probamos durante el desarrollo, acá la idea es programar una vez y ocupar en la mayor cantidad de dispositivos.

Recursos:

Descarga la Aplicación

image

Espero que te sirva!, pronto se viene el tutorial de formularios con JQuery Mobile, hasta pronto! nos vemos en el TechDay!

Saludos,
Chalalo

JQuery Mobile 1.0 Alpha Release!

image

Se estaba esperando hace bastante por los desarrolladores Web, la posibilidad de poder crear aplicaciones para dispositivos móviles con la misma filosofía de Jquery. El Framework JQuery Mobile tiene el mismo concepto de “write less, do more” y lo lleva un nuevo nivel,

En lugar de escribir aplicaciones únicas para cada dispositivo móvil o sistema operativo, el jQuery Mobile nos permitirá diseñar una única aplicación en formato web que funcione en una gran cantidad de teléfonos y tablets de distintos fabricantes y bajo distintos sistemas operativos de dichos dispositivos.  De hecho se ha trabajado con los siguientes fabricantes:

 image

El objetivo es proporcionar herramientas para crear interfaces dinámicas que nos permitan utilizar dispositivos touch. El JM ofrece dos tipos de layouts(listas, paneles y overlays) y un conjunto de controles de formulario & UI Widgets(tlggles,slides,tabs) . Claro está mencionar que todavia no estan disponibles todos los controles, estamos en un Alpha!

Ejemplos de la UI:

image

La URL es:

http://jquerymobile.com/

En donde puedes ver ejemplos, documentación y descargas, personalmente he probado en Blackberry y Android, en el primero funciona un poco errático (modelo 8520), pero estamos en versiones Beta.  De hecho los dispositivos soportados en esta release son:

  • Apple iOS: iPhone, iPod Touch, iPad (all versions)
  • Android: all devices (all versions)
  • Blackberry Torch (version 6)
  • Palm WebOS Pre, Pixi
  • Nokia N900

Te recomiendo que veas este interesante proyecto, esta muy bueno, y nos permite un nuevo escenario en el desarrollo de Aplicaciones Web para dispositivos móviles.

Saludos,
Chalalo

NUPack, Facilitando la instalación de Packages en nuestras Aplicaciones Web

image

NuPack es el último componente de la Web Stack de Microsoft, recientemente incorporado con el fin de proveer una fácil inclusión de librerías OpenSource a tus proyectos ASP.NET( Ya sea MVC o WebForms). Hay que dejar claro que no solo descarga liberías, sin o que resuelve dependencias, crea la referencia en el proyecto y modifica web.config.

Paso 0: Descargar nuPack

Puedes descargar la version CTP1 desde:
http://nupack.codeplex.com/

Se instala sobre Visual Studio y sobre Visual Web Developer, justamente que este último voy a hacer el demo.

Paso 1: Crear la Aplicacion Web

Como te decía es valido para proyectos web o MVC, en mi caso voy a crear un proyecto web “clasico” o WebForm.

image

Una vez creada la aplicación vamos a abrir la venta  Package Manager Console:

image

Esta consola utiliza PowerShell, si tipeamos List-Package veremos las librerías que podemos instalar en nuestra aplicación:

image

Son Aprox. 104 Librerías, aunque hay algunas repetidas con versiones distintas, en la foto no de ve mucho, pero es algo así:

Id                          Version     Description                    
—                          ——-     ———–                    
Antlr                       3.1.1       ANother Tool for Language Rec…
Artem.XmlProviders          2.5         Implementation of XML ASP.NET…
AutoMapper                  1.1.0.118   A convention-based object-obj…
Castle.Components.Validator 1.1.0       The Validator component is us…
Castle.Core                 1.2.0       Core of the castle project     
Castle.DynamicProxy         2.2.0       Castle DynamicProxy is a libr…
Castle.Ioc                  2.1.1       Castle Project offers two Inv…
EFCTP4                      1.0         This CTP is a an early previe…
elmah                       1.1         ELMAH (Error Logging Modules …
tarantino-db-deployer       1.0.146.0   This is a database migration …
WebFormsMVP                 0.9.7.2     A simple Model-View-Presenter…
xunit                       1.6.1       xUnit.net is a developer test…

Paso 2: Instalar un Package

Hace ya un tiempo he promocionado ELMAH, y es este post muestro su instalación, probemos suerte ahora con NUPACK, voy a escribir en la consola lo siguiente para poder instalar el Package:

PM> Add-Package elmah

El resultado:

image

Todo ok, se indica que se instaló, si revisamos las referencias de nuestro proyecto Elmah ya está incluido:

image

En el Web.config vemos la configuración básica incluida, automáticamente:

image

Probamos para ver si funciona, vamos a provocar algunos errores 404 en nuestro proyecto y probamos (recuerda la llamada a Elmah : Elmah.axd)

image

Y ya está funcionando! , súper sencillo!.

Ahora si no te gusta la consola, puedes hacer click con el botón derecho en el proyecto en Add Package Reference…

image

Y podemos ingresar a la opción visual de agregar nuevos packages a nuestro proyecto Sonrisa

image

Espero que te sirva, esto esta muy bueno,

Te recomiendo visitarel blog del maestro Scott Hanselman para mucho más información:

http://www.hanselman.com/blog/IntroducingNuPackPackageManagementForNETAnotherPieceOfTheWebStack.aspx

Saludos,
Gonzalo

Nos vemos en el Tech.Days 2010! 26 de Octubre

image Muy Contento nuevamente de poder participar como Orador del TechDays, esta vez en su versión 2010 Sonrisa. Gracias a la gente de Microsoft que confía en mí para esta tarea.

Esta vez estaremos junto a Gabriel Cor, reconocido Orador, hablando de las tecnologías que involucra WebMatrix, La WebStack de Microsoft incluyendo NuPack , MVC y como desarrollar aplicaciones arquitectónicamente robustas.

La charla la tenemos a las 16:00 horas, pero durante todo el día hay charlas muy interesantes,  puedes revisar la agenda acá: http://www.techdays.cl/agenda.html

Es una buena oportunidad para revisar los últimos lanzamientos de productos y conversar un buen rato sobre tecnología.

Puedes ver más información en:
Facebook: http://www.facebook.com/ComunidadesMS
Twitter:http://twitter.com/ComunidadesMS

image

Por mi parte nunca he ido a Casa Piedra, centro de eventos en donde se realizará el evento, me han comentado que es de lujo Sonrisa, muy cómodo. (lo voy a necesitar después de 6 horas y media de viaje!)

Y si me ubicas por el blog, genial!, conversemos un buen rato de Tecnología Web, de JQuery , tengo la idea de formar un grupo para capacitaciones gratis, bueno todo eso.

Nos vemos el 26!
Saludos,
Gonzalo

PD:Ultimo Post del mes que no es tutorial, jejejejej

[JQuery] Imperdible! Mega Tutorial Paso Paso – 10 Videos en Español!

Navegando, buscando información me topé con el Excelente Blog de Fernando Yanes, Desarrollador que ha creado un Tutorial de 10 Videos en Español, de muy buena calidad y claridad en sus contenidos, sin duda, un tremendo aporte. ME comuniqué con Fernando para pedir autorización para hacer referencia a sus Tutoriales desde mi página, y accedió de inmediato, muy buena onda!.

image

Sin más preámbulos, a ver los videos! a aprender JQuery!!!

PD: En cada post de Fernando verás que existe la posibilidad de descargar el video, para verlo OffLine


10. Videotutorial de Jquery

El tema en esta oportunidad es ajax, trabajamos asincrónicamente con el servidor, mostrando páginas sin recargar el navegador, en este tutorial vemos como trabaja el método load y el componente de bajo nivel ajax que tiene infinidad de opciones aquí se trata lo principal para poder trabajar. aproximadamente media hora de charla sobre estos temas y como siempre de manera muy practica.

Más información »


09. Videotutorial de Jquery

En este videotutorial vemos el funcionamiento de los siguientes métodos: eq, first, last. has, is, not, add, end, andSelf, slice, map, filter. Básicamente estos métodos nos ayudan a seleccionar fuera del selector lo que en algunas ocasiones no resultara de mucha utilidad. aproximadamente 35 minutos de charla y como siempre 100% practico.

Más información »


08. Videotutorial de Jquery

Hablamos de como movernos dentro los niveles de jerarquía  que tienen los documentos html. con funciones jquery como children, parent, parents, parentsUntil, offsetParent, next, nextAll, nextUntil, prev, prevUntil, prevAll, siblings, closest, find… aproximadamente 37 minutos de charla….

Más información »


07. Videotutorial de Jquery

En este videotutorial tratamos los temas de como insertar contenido dentro de nuestro documento html, tratamos los métodos: append, appendTo, prepend, prependTo, before, insertBefore, after, insertAfter, wrap, unwrap, wrapAll, wrapInner. También veremos la forma de como remplazar etiquetas por otra etiqueta algo muy interesante y sencillo, y lo haremos a través de los métodos: replaceWith y replaceAll, y veremos también como remover y copiar etiquetas con los métodos: detach, empty, remove, clone. Aquí vemos algunos métodos que se han introducido en la ultima versión de jquery 1.4.2. aproximadamente 34 minutos de charla con ejemplos simples como a sido la tónica del curso.

Más información »


06. Videotutorial de Jquery

En este videotutorial tratamos los temas de como manejar css desde jquery usamos los métodos css, addAclass,removeClass, toggleClass etc…. También trabajamos con métodos que nos permitían posicionar nuestros objetos dentro del documento los métodos fueron offset y position, aproximadamente 25 minutos de charla…

Más información »


05. Videotutorial de Jquery

trabajamos con métodos mas específicos para manejar eventos y hacemos un ejemplo practico cambiando las luces de un semáforo, trabajamos con metodos como one, trigger, triggerHandler, toggle.. etc..
casi 27 minutos de charla…

Más información »


04. Videotutorial de Jquery

Videotutorial donde comenzamos a ver los eventos principales para poder darle interactividad a nuestros elementos del DOM, tocamos click, bind, live y delegate, casi 33 minutos de charla…

Más información »


03. Videotutorial de Jquery

Tercer videotutorial dedicado al manejo de atributos, seguimos avanzando en la documentación de jquery, lento pero seguro, para tener una buena base para ya mas adelante hacer cosas de tipo mas complejas, esta parte es muy importante tenerla clara,  aproximadamente 27 minutos de charla.

Más información »


02. Videotutorial de Jquery

En este tutorial tocamos los temas de los filtros que son muy importantes para poder ubicar elementos mas específicos dentro del documento html, tratamos algunos como :first, :last, :eq, :even:, :odd, :lt, :gt, :has, etc…
aproximandamente 25 minutos de charla….

Más información »


01. Videotutorial de Jquery

Aquí hacemos una introducción a Jquery y a los selectores que son muy importante para el manejo de elementos dentro del documento html. Manejamos etiquetas, identificadores, descendientes etc…
aproximadamente 17 minutos de charla…. saludos….

Más información »


Espero que los hayas disfrutado!
Saludos!
Gonzalo

Silverlight Tour–Santiago, Chile (27 al 29 de Octubre 2010)

Rodrigo Díaz, Mega Ultra Master en Silverlight va a estar en Chile para el TechDays y además va a dictar un curso de tres días sobre Silverlight 4! (del 27 al 29 de Oct), es una tremenda oportunidad para aprender de manos de un experto. Te dejo la Info:

image

Hoy ha sido el lanzamiento de Windows Phone 7… ¿ya conoces su plataforma de desarrollo para aplicaciones?

El Curso de Silverlight que da la Vuelta al Mundo: el Silverlight Tour aterriza por primera vez en la capital Chilena del 27 al 29 de Octubre 2010.  El curso se llevará a cabo en las oficinas de Microsoft Chile (Sala Aconcagua).

SLT_Trans_small

El Silverlight Tour es un curso de tres días acerca de Silverlight 4: a detalle, con mucho código y una gran cantidad de conceptos técnicos y de arquitectura que todo desarrollador profesional de Silverlight (y claro, de Windows Phone 7) debe conocer a profundidad.

Gracias a una alianza con Microsoft Chile, este curso tiene una promoción especial del 50% de Descuento directo sobre el precio general.

Todos los cursos tienen un cupo limitado, así que si están interesados/as les sugiero se registren en la página del curso en Español.

NOTA: Puedes preguntar más detalles en su Blog:
http://rdiazconcha.com/2010/10/silverlight-toursantiago-chile-27-al-29-de-octubre-2010/

Saludos,
Gonzalo

ASP.NET Día de Anuncios, WebMatrix Beta 2, MVC 3 Beta & NuPack

Si recién ya nos habían anunciado las excelentes noticias  que Microsoft cooperaba con 3 nuevos plugins para Jquery, desarrollados por Developers del Team de ASP.NET: JQuery Templates, JQuery Data Link y jQuery Globalization.

Puedes ver más info en la Página de Stephen Walther
http://stephenwalther.com/blog/archive/2010/10/04/microsoft-templates-included-in-jquery-1-5.aspx

y Obviamente mis ejemplos sobre JQuery DataLinker:
http://geeks.ms/blogs/gperez/archive/2010/06/21/asp-net-ajax-library-introducci-243-n-a-datalinker.aspx

JQuery Templates
http://geeks.ms/blogs/gperez/archive/2010/06/13/asp-net-ajax-library-introducci-243-n-a-las-nuevas-plantillas-client-side.aspx

Hoy Scott Guthrie anuncia en su Blog

  • WebMatrix Beta 2
  • MVC 3 Beta
  • NuPack (con Elmah ready!)

Revisa este importante anuncio en el Blog del Maestro:

http://weblogs.asp.net/scottgu/archive/2010/10/06/announcing-nupack-asp-net-mvc-3-beta-and-webmatrix-beta-2.aspx

En donde encontrarás información y links sobre cada uno de los productos y como descargarlos.

Por mi parte, si quieres ver Elmah, que esta incluido en el NuPack Tools, puedes ver mi post:
http://geeks.ms/blogs/gperez/archive/2009/06/02/elmah-m-243-dulo-de-error-loggina-para-asp-net.aspx

Y también sobre WebMatrix
http://geeks.ms/blogs/gperez/archive/2010/07/08/introduciendo-webmatrix-lo-nuevo-del-team-asp-net.aspx

Como ven, no para la fiesta!! jajaj
nos vemos!a
Saludos,

[Tips] Usar Ventana de Notificación con JQuery al estilo Outlook

Buscando algunos plugins interesantes es que hace un tiempo me tome con : http://mosesofegypt.net/post/jQueryui-Messenger-Outlook-like-message-notification-Widget.aspx

Notificaciones al estilo Outlook, por lo que me decidí a modificar el ejemplo que ahí sale y agregarle alguna pequeñas opciones al ejemplo. Si quieres pasas al paso 6 y ves el ejemplo de inmediato en un video Sonrisa.

Si no, vamos paso a paso para que veas lo útil que es este plugin.

Paso 1: Base de Datos

Voy a crear una BD Simple, con los siguientes campos, la idea es que podamos mostrar un mensaje en un rango de tiempo desde fechaInicio hasta fechaFin y que además definamos el ícono de notificación.

image

Luego vamos a crear el contexto para utilizar Linq2Sql,  de manera de que, con poco código, podamos tener la funcionalidad que deseamos.

image

Paso 2: WebService

El WebService nos proveerá de los datos para armar el mensaje, en este caso, (hay formas mejores) , obtenemos el registro de notificación que corresponde al momento de la consulta, en el caso que exista registro, se devuelve el objeto, en el caso que no, capturo la excepción generada ( el método single, si no tiene un resultado, levanta el error) e instancio un nuevo objeto y lo devuelvo con el ID:0  (para que en  el código JS se sepa cuando no existe notificación).

<WebMethod()> _

    Public Function getNotificacion() As notificacione

        Dim contexto As New NotificacionModelDataContext

        Dim notificacion As notificacione

        Try

            notificacion = (From p In contexto.notificaciones _

                            Where p.fechaInicio <= Date.Now _

                            And p.fechaFin >= Date.Now).Single

            Return notificacion

        Catch ex As Exception

            Return New notificacione With {.id = 0}

        End Try

 

    End Function

Paso 3 :Agregamos las referencias

Ahora en la pagina Default.aspx vamos a agregar las referencias a los archivos que participan en el ejemplo.

<link href=”styles/notificationmsg.css” rel=”stylesheet” type=”text/css” />

<script type=”text/javascript”  src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js “></script>

<script type=”text/javascript” src=”jQuery/ui.core.js”></script>

<script type=”text/javascript” src=”jQuery/ui.notificationmsg.js”></script>

La Estructura es la siguiente:

image

Paso 4: El código JavaScript (JQuery)

Seteamos con setInterval que la función getMensaje se ejecute cada 10 segundos, de manera que se este revisando constantemente, puedes ver también parte de la configuración del plugin, como el estilo de animación, la duración en pantalla (period:2500) en milisegundos y la función asociada al botón X para cerrar.

Acá es donde utilizamos el Id:0 que te comentaba anteriormente, ya que si no hay mensaje, devuelvo el valor 0, y no muestro la pantalla.

Si el valor es mayor que 0, quiere decir que recuperé un mensaje de notificación y seteo los div y span de manera de mostrar el mensaje.

<script type=”text/javascript”>

$(document).ready(function () {

   setInterval(getMensaje, 10000);

   function getMensaje() {

      var animStyle = ‘slide’;

      $(‘#msg1’).notificationmsg({ period: 2500 });

      $(‘#closebutton’).click(function ()
                          { $(‘#msg1’).notificationmsg(‘hide’); });

      $.ajax({
           type: “POST”,

           url: “NotificacionWS.asmx/getNotificacion”,

           data: “{}”,

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

           dataType: “json”,

           success: function (response) {

               var mensaje = response.d;

               if (mensaje.id > 0) {

                  $(“#modalbody”).text(mensaje.mensaje);

                  $(“#icono”).html(“<img src='” + mensaje.icono + “‘/>”);

                  $(‘#msg1’).notificationmsg({ animation: animStyle });

                  $(‘#msg1’).notificationmsg(‘show’);

                }

              },

            failure: function (msg) {

                alert(msg);

            }

         });

       }

    });

</script>

Paso 5 : El Código HTML

Este código, corresponde a la ventana de notificación propiamente tal, puedes dejarlo en tu masterPage para disponibilizarlo a toda la aplicación Web.

<div id=”msg1″>
  <div id=”modal”>
   <div class=”modaltop”>

     <div class=”modaltitle”>Información</div>

        <span id=”closebutton” style=”cursor: hand”>

         <img alt=”Hide Popup” src=”styles/img/close_vista.gif” border=”0″/>

        </span>

     </div>

     <div class=”modalbody”>

       <table style=”width: 100%;”>

          <tr>

             <td>

                <div id=”icono”></div>

             </td>

              <td>
                 <span id=”modalbody”></span>

              </td>

          </tr>

       </table>

      </div>

     </div>

</div>

Paso 6: El Videíto!, para que te entusiasmes a usarlo.

 

Notificaciones con Jquery…..

 

Paso 7: Descarga el Ejemplo.

 image

Espero que te sirva!,
Nos vemos
Chalalo.