He comenzado a indagar mas a fondo JQuery, dejenme decirles que mientras más lo voy conociendo más me va gustando. He decido compartir con todos ustedes cada uno de mis avances en tan interasante librería.
Qué es JQuery?
En pocas palabras: es una librería de Javascript que se caracteriza por ser rápida y conscisa que simplifica el acceso, modificación, animación, manejo de eventos y actualización de elelmentos de HTML. Es la única en su género?, en realidad no, existe otra infinidad de opciones disponibles, sin embargo su popularidad proviene de una característica: SIMPLICIDAD.
Mi primer Acercamiento a JQuery:
Nada como el momento crucial en que uno se enfrenta a lo nuevo y desconocido. Para muchos el simple hecho de ver sentencias de Javascript con caracteres raros como el simbolo ‘$’, es motivo para ni si quiera tomarse el tiempo de evaluar el potencial y facilidad de JQuery. Sin embargo no es para nada complicado, es simplemente de comprender los conceptos y el origen de las cosas.
A continuación presento una demostracion bastante sencilla de JQuery, donde pretendo darles una breve introduccion a su forma y facilidad de uso:
Paso 1
Primero deberan hacer referencia al archivo de JQuery que contiene los scripts de la libreria, en este caso en particular utilizaremos la version 1.4.4. Algo muy bueno es que Microsoft tiene a nuestra disposicion un CDN (Content Delivery Network) que nos facilitara el acceso al archivo de la libreria. El simple hecho de utilizar un CDN nos permite optimizar el tiempo de respuesta y carga de nuestra página.
Para hacer uso del CDN de Microsoft pueden visitar la siguiente dirección http://www.asp.net/ajaxlibrary/cdn.ashx
Nota: si no publicarán su pagina o website en internet entonces pueden descargar el archio de JQuery y copiarlo a la maquina o servidor donde será publicada la aplicación.
Para el ejemplo crearemos un archivo llamado “JQueryDemo.html”, lo pueden hacer desde Notepad, en mi caso utilizare el editor Notepad++. Creamos una pagina HTML simple con el siguiente código:
Como podran observar esta es una página simple que muestraun texto y tiene dos links para mostrar u ocultar la información.
Paso 2
Ahora hablemos de como comenzar a utilizar la libreria de JQuery. Una vez referenciada la librería en nuestra página (paso 1), podremos hacer uso de las funcionalidades definidas.
En primera instancia para tener acceso al objeto principal de JQuery podemos referirlo por medio del simbolo “$” o bien haciendo uso de la palabra “jQuery” (ver documentacion).
Tradicionalmente muchos desarrolladores hacen uso del evento “onload” del tag body, para invocar un script al momento en que halla sido cargada la pagina al navegador. Con JQuery podremos hacer uso de una funcion llamada “ready”, la cual no solo se ejecuta al haber terminado de cargar una página, sino también luego de que todo el arbol DOM este listo.
Agregaremos el uso de este evento y mostraremos un mensaje:
El resultado del anterior codigo debe ser el despliegue de una ventana con el texto “Hola”.
Algo interesante a sobresaltar en el codigo anterior es que el codigo que javascript que escribimos, no esta definido dentro de un tag de HTML o dentro de un atributo o evento. Esta caracteristica es referida como código no intrusivo.
Paso 3
Como podran observar en el ultimo código, la pagina actualmente esta desplegando un mensaje y tiene 2 links para mostrar u ocultar el mensaje. Normalmente para poder realizar este efecto, es necesario aplicar algunas instrucciones de CSS y javascript.
Para hacerlo con JQuery es bien sencillo. Pero antes de mostrar cómo hacerlo, hablaremos de los selectores. JQuery utiliza el concepto de selector definido para CSS 1-3.
Un selector nos va permitir seleccionar un elemento de HTML de varias formas. No voy a profundizar en este tema en este post, más adelante lo veremos. Sin embargo, es importante tomar en cuenta su definición.
En este primer ejemplo obtendremos referencia a los elementos del HTML en base a su atributo “id”, a continuación agregaremos los ids a os elementos <p> y <a>:
Para hacer referencia a un elemento debemos utilizar la siguiente sintaxis: $([selector]), donde selector es precisamiente un id, el nombre del tag, la clase de css utilizada por el tag, etc.
Veamos el codigo agregado:
Vamos paso a paso:
- La instruccion $(‘#ocultar’) significa lo siguiente: Seleccione todos los elementos que esten definidos dentro de la página cuyo id sea igual a “ocultar”.
- Luego utilizamos click(function() {…}); Aqui estamos haciendo referencia al evento click sobre el(los) elementos seleccionados en el paso 1 y definimos una función anónima (sin nombre) la cual será invocada cuando se dispare el evento (al hacer click).
- (‘#mensaje’) igual que el paso 1.
- hide() . Aqui viene lo interesante. Esta es una funcionalidad de JQuery que sirve para ocultar un elemento.
Si ejecutamos nuestra página de prueba y presionamos el boton ocultar podremos ver que el texto desaparece.
Ahora agreguemos la instruccion para mostrar nuevamente el texto:
Realizamos los mismos pasos del caso anterior, con la única diferencia que ahora hacemos uso de la funcion show().
Si ven esta funcionalidad por simple que parezca, sin JQuery hubiera representado una mezcla de CSS y Javascript, es aqui donde comenzamos a ver el potencial.
Paso 4
Y que pasa si queremos hacer animaciones?, pues muy sencillo: Si le agregamos a las funciones hide() y show() un valor en milisegundos, podremos ver el resultado de una animación:
Existen otras animaciones más interesantes pero estas las iremos viendo más adelante.
Paso 5
Ahora re-faroctizaremos un poco nuestro código. La única diferencia será el cambio en el uso del selector, ya no lo haremos por id, sino que por tag y haremos uso de otra funcionalidad:
En este caso lo que hicimos fue lo siguiente:
- Removimos los atributos “id” de los elementos
- Ahora referenciamos por tag en el selector. $(‘a’) significa seleccione todos los elementos <a> dentro de la página. OJO: que en este caso sencillo solo tenemos 1 elemento, que pasaría si tuvieramos más (Los reto a que propongan una solución, la pueden colocar en el área de comentarios, sino lo veremos más adelante).
- utilizamos la funcion slideToggle(1000) que nos resume a una sola linea mostrar u ocultar un texto.
Resumen
Bien como hemos visto, JQuery es una librería de Javascript que nos permitirá manipular el HTML de una página de una forma rápida y sencilla.
El simbolo $ es un identificador que es utilizado para hacer uso del objeto principal de JQuery.
Los selectores nos permitiran, valga la redundancia, seleccionar elementos del HTML de una página.
Las funciones y animaciones predefinidas en JQuery nos permitirán ahorrarnos bastante tiempo y código.
Bien espero haberle aclarado un poco el panorama sobre como iniciar el uso de JQuery, más adelante entraremos a ver más temas dentro de esta serie.
Cualquier comentario o sugerencia para esta serie es bienvenido.
Saludos,
Carlos A. Lone
sigueme en twitter: @carloslonegt
Mucho se ha especulado, hablado, bloggeado y hasta bromeado sobre el futuro de Silverlight, esto después de la entrevista de Bob Muglia sobre el nuevo enfoque que microsoft tomará sobre HTML5 y el hecho que en el PDC no hallan mostrado novedades sobre esta herramienta.
Realmente no deseo entrar en detalle y más controversia al respecto, pienso que la mejor respuesta que ha existido hasta el momento es el blog de aclaración de Scott Guthrie (the Gu).
Personalmente comparto la opinion de muchos buenos amigos y expertos de Silverlight (Ej. Rodrigo Díaz), en que realmente se estan comparando (si tan siquiera lo podemos llamar asi) peras con manzanas.
Bien para no causar más controversia y poder conocer cual ha sido el trabajo que ha venido desarrollando el Team de Silverlight y algunas novedades de la ultima versión de la herramienta quiero invitarles al siguiente evento que será totalmente en línea y lo mejor GRATIS!!!. No se lo pueden Perder:
Keynote Starts December 2, 2010 at 9:00 pacific time
- Hear what’s coming next from Microsoft’s Scott Guthrie
- Training, labs & swag
- Online or in-person at Microsoft HQ, December 2nd 2010
Register — Attend in Redmond Register — Watch Online
Firestarter Live Agenda
| Time | Presenter | Session Details |
| 8:00 am | | Breakfast |
| 9:00 am |  Scott Guthrie | The Future of Silverlight |
| 10:45 am |  Jesse Liberty | Data Binding Strategies with Silverlight and WP7 |
| 11:30 am |  Yavor Georgiev | Building Compelling Apps with WCF using REST and LINQ |
| 12:15 pm |  | Lunch |
| 1:00 pm |  Dan Wahlin | Building Feature Rich Business Apps Today with RIA Services |
| 1:45 pm |  John Papa | MVVM: Why and How? Tips and Patterns using MVVM and Service Patterns with Silverlight and WP7 |
| 2:45 pm |  Tim Heuer | Tips and Tricks for a Great Installation Experience |
| 3:30 pm |  Mike Cook &
Jossef Goldberg | Tune Your Application: Profiling and Performance Tips |
| 4:30 pm |  Jaime Rodriguez | Performance Tips for Silverlight Windows Phone 7 |
| 5:15 pm |  | After Party! |
Keynote : The Future of Silverlight
Be first to hear the official news about what’s coming up next for Silverlight from Scott Guthrie, Microsoft Corporate Vice President.
Data Binding In Silverlight and Windows Phone
Jesse Liberty walks us through the fundamentals of data binding, including binding to traditional and non-traditional data sources, binding to elements, binding in both Visual Studio and Blend, binding in code, data conversion and much more.
Building Compelling Apps with WCF using REST and LINQ
In this session we will cover how to build a WCF-based backend web service to provide data to the Silverlight application. We will demonstrate the use of LINQ in the service to retrieve objects from our database, and cover some details of how those objects are serialized to Silverlight. We will cover the use of faults for debugging and for driving production logic, as well as authentication strategies for internet and intranet deployment. We will finish with a look at how to access third-party REST/HTTP-based services from Silverlight.
Building Feature Rich Business Apps Today with RIA Services
Silverlight provides many different options for accessing distributed data including Web Services, REST APIs, sockets and more. This talk will walk you through the benefits that WCF RIA Services offers and demonstrate how it can be used to simplify n-tier programming and provide a flexible and productive way to access, validate and modify data in Silverlight applications. Topics covered include creating a domain service, simplifying asynchronous programming with the domain context, leveraging object tracking features, sharing data validation code between the client and server and writing domain services that can be used with any backend data access technology.
MVVM: Why and How? Tips and Patterns using MVVM and Service Patterns
See how good patterns and practices apply to Silverlight applications on the desktop, in the browser or on the phone. Learn how to integrate MVVM, Service Providers, design time data (aka Blendability), into your Silverlight applications to promote code reuse and create a highly maintainable application.
Tips and Tricks for a Great Installation Experience
Tired of seeing the spinning blue balls from Silverlight as the application loads? Your users probably are as well. The simple fact is that it is very easy to customize your complete application installation experience down to the plugin level. During this session you’ll see understand how Silverlight works with install/upgrade scenarios and how you can completely customize the installation experience. Additionally you’ll see custom ‘splash screen’ demonstrations on what you can do to further brand your application. If you are building an out-of-browser application with Silverlight we’ll discuss and demonstrate some of the tips/tricks to provide a good acquisition experience there as well and some tricks on automatically installing applications.
Tune Your Application: Profiling and Performance Tips
There are some common pitfalls that can negatively impact your Silverlight application’s performance. In this session we’ll demonstrate how to use some of the tools that are available to profile and identify performance issues. We’ll cover the available techniques with the performance tools that can help you to analyze your Silverlight application memory usage, rendering and CPU usage to help improve performance and avoid those common pitfalls.
Performance Tips for Silverlight Windows Phone 7
This will be a comprehensive deep-dive into Windows Phone performance. We will begin with the threading model changes and optimizations made to Silverlight run-time to take advantage of the GPU on the phone; we will then cover the most common pitfalls, the troubleshooting techniques, and close with the workarounds to create snappy Windows phone applications.
Nos vemos en el evento!
Saludos,
Carlos A. Lone
Sígueme en Twitter: @carloslonegt
Hace un poco mas de 1 mes, Microsoft anuncio la liberación de un manejador de paquetes para proyectos Open Source para .NET. Se trata del proyecto NuGet, el cual se integra totalmente a Visual Studio y esta en su primer preview.
NuPack es un proyecto miembro de Outercurve Foundation (Originalmente The CodePlex Foundation) que es la iniciativa de Microsoft para proyectos Open Source (FOSS). El 5to proyecto aceptado por Outercurve, es precisamente NuPack, del cual a continuación presentaremos una breve introducción.
Que es NuGet?
Para responderlo brevemente: NuPak es un administrador de paquetes que les hará su vida más simple al momento de buscar, instalar y utilizar una librería de .NET en su proyecto. Lo interesante es que funciona con cualquier tipo de proyecto de .NET dentro de Visual Studio.
Para que utilizar NuGet?
Si eres el moderador de un proyecto Oper Source como (NHibernate, Ninject, Elmah, etc), NuGet te permitirá empaquetar todas las librerías y archivos necesarios por tu herramienta y los publicara en un catálogo que podrá ser utilizado por desarrolladores de aplicaciones en .NET.
Como Funciona NuGet?
NuGet se encarga de administrar la administración e instalación de librerías de .NET en tu proyecto de trabajo, maneja la dependencia entre librerías, así mismo permite actualizar o remover las librerias de tu proyecto.
Es capaz de actualizar la información de un archivo web.config, en caso de que la libreria o paquete a utilizar requiera de configuraciones. Tambien tiene soporte a utilizar scripts de PowerShell para hacer operaciones automáticas.
En que versiones de Visual Studio Funciona?
Funciona con cualquier version de Visual Studio 2010 (incluyendo la express 
)
Ejemplo de uso de NuGet
Imaginemonos un escenario típico de una aplicación ASP.NET en donde cada vez que hay un error no controlado no queremos tener la tipica “Yellow Screen of Death”. Hace algún tiempo publiqué un screencast sobre como configurar una herramienta para administrar las excepciones no contraladas llamada ELMAH. En el mismo explicaba todos los pasos necesarios para poder configurar y utlizar dicha herramienta, este precisamente es un buen escenario donde podremos valorar la utilidad de NuGet. En vez de estar buscando donde descargar ELMAH, desempaquetarlo, copiarlo a nuestro proyecto y configurarlo, NuGet lo hace por nosotros.
Veamos a continuación cómo hacerlo:
Habiendo instalado previamente la herramienta NuGet, para configurar ELMAH en su proyecto deberan hacer lo siguiente:
Abrir la consola de NuGet y teclear el comando “install-Package elmah”:
Y LISTO!!!! …….
Si no lo quieren hacer manualmente escribiendo en la consola, pueden hacer click derecho sobre su proyecto y seleccionar la opción “Add Library Package Reference”, esto les habilitará una nueva ventana donde podrán buscar la herramienta a instalar:
Asi de simple?, si así de simple, esto es lo hermoso de esta herramienta.
Tras bambalinas, lo que hizo NuGet fue descargar todas las librerías y dependencias necesarias para utilizar la herramienta ELMAH en nuestro proyecto, asi mismo realizo las configuraciones básicas en nuestro archivo de configuración web.config:
Si ahora ejecutamos nuestro proyecto y generamos una excepción no controlada, ELMAH se encargará de loguearla para que podamos ver el detalle de todos los errores que han ocurrido en nuestra aplicación.
Bien espero haberles aclarado un poco el panorama sobre el uso de esta herramienta, la verdad este fue un breve y simple repaso sobre el uso y funcionalidad de NuGet
Mayor información en:
Sitio del proyecto: http://nuget.codeplex.com
Blog de Phil Haack: http://haacked.com/archive/2010/10/06/introducing-nupack-package-manager.aspx
Saludos,
Carlos A. Lone
sigueme en twitter: @carloslonegt
El día de hoy fue lanzado el Microsoft Community Contributor Award, el cual representa un nuevo reconocimiento de Microsoft para aquellas personas que dedican parte de su tiempo en apoyar a las diferentes comunidades de las diferentes tecnologías de Microsoft a través de foros y comunidades en línea.
Es importante tomar en cuenta los puntos expuestos por Fernando Garcia en su post:
- Un MVP no puede ser MCC al mismo tiempo
- Un MCC tiene un perfil diferente al del MVP (un MVP tiene un perfil técnico mucho mas alto)
- Un MCC solo puede ser nominado como candidato por recomendación de un MVP o por alguien de Microsoft
- El ser MCC no es requisito para ser MVP
- Por el hecho de ser MCC no significa que serán MVPs después (puede pasar pero como un hecho aislado)
Así que para aquellas personas que constantemente apoyen a las comunidades en línea participen para obtener el galardón, si eres uno de ellos o conoces a alguien escríbeme para poder evaluar sugerirte como MCC.
Saludos,
Mas información:
http://blogs.msdn.com/b/mvplead/archive/2010/11/11/microsoft-community-contributor-award.aspx
https://www.microsoftcommunitycontributor.com/logon.aspx
Carlos A. Lone
Sígueme en Twitter: @carloslonegt