JQuery Day 01

He empezado un nuevo proyecto para Microsoft Colombia y la Secretaria de Salud que es a la vez una prueba de concepto de una migración de una aplicación de VS2003 a VS2008 como la reconstrucción de la aplicación (refactoring) hacia un modelo orientado a Software + Servicios.

Uno de los entregables del proyecto es un Web Site, así que pareció una buena oportunidad para comenzar a explorar JQuery, que lo había visto por ahí con los anuncios de soporte en VS2008 y demás pero nunca lo había tocado.

Lo primero es hacerlo funcionar, eso lo explico mejor Scott Guttrie en un post, entonces yo cree un Web Application, luego una carpeta scripts, y en ella copie el archivo jquery-1.2.6.js y el archivo jquery-1.2.6-vsdoc.js, estos dos me permiten tener JQuery e IntelliSense en Visual Studio, se pueden descargar de Aquí.

Luego incluí el archivo de JQuery y el archivo de la documentación en el default.aspx así:

<script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>

<script src="scripts/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>

Si no se incluye el archivo de la documentacion JQuery funciona, pero no tengo intellisense.

Ahora, cómo funciona esto:

Recorriendo el DOM

var help = $("#help"); //obtiene el elemento que se llama help, es como usar document.getElementById solo que funciona en cualquier browser.

var p = $("p"); //obtiene todos los elementos de tipo <p>

var username = $("input[name=’username’]"); //obtiene un elemento de tipo input llamado username

Todas las funciones anteriores retornan un arreglo (array), de hecho, la función $(), conocida como función JQuery siempre retorna un array de 0 elementos, 1 elemento o el número de elementos que encuentre (y es en realidad una abreviación de JQuery(“p”) ).

Es una práctica recomendada nombrar las variables con el signo pesos, así que el último ejemplo debería ser algo como esto:

var $username = $("input[name=’username’]");

Al ser $username un array tiene un conjunto de métodos que se pueden usar para obtener su longitud, elementos, etc (var form = $form.get(0); var form = $form. length)

Manipulando el DOM

Una vez que tengo identificados los objetos puedo empezar a hacer algo con ellos, algunos consejos:

No es necesario crear todas las clases que se van a usar en la hoja de estilo, solamente se necesitan para que JQuery las identifique

Un elemento puede tener varias clases aplicadas asi: <table class=”VisualTable PopulationTable”>…</table>, de esta forma puedo separar las clases que modifican los diseñadores de las que yo utilizo en JQuery para manipular los objetos.

Eventos

Uno de los elementos importantes de JQuery son los eventos, estos responden generalmente a acciones de los usuarios, pero uno que siempre es útil es el evento ready del document. Algo como esto:

$(document).ready(function{ myCodigo});

Que quiere decir que se debe ejecutar el código {MyCodigo} cuando la pagina este lista. Algo interesante es la forma como se declarara la función a ejecutar, muy similar a un método anónimo y también con una notación de JSON. Sin embargo si por alguna razón a uno no le gusta esta forma de funciones en línea puede usar esta notación: %(document).ready(onLoaded); donde onLoaded es un método definido previamente en el script. (esto también puede ser útil cuando se combinan diversos scripts y se quiere invocar desde un evento una parte de otro script).

Muchos eventos reciben funciones como parámetros, incluso una función en cada parámetro, por ejemplo:

$("#partList .row").hover

(

function()

{

$(this).addClass("rowOver");

},

function()

{

$(this).removeClass("rowOver");

}

)

Recibe dos funciones, una para cuando se entra al hover y otra para cuando se sale. Aquí puede ser interesante notar el $(this) que significa un “apuntador” al elemento que está ejecutando el evento, algo parecido al $(document).

 

Juan Pelaez.

Arquitecto de Software.

 

Keywords: JQuery, Web Applications,

Technorati Tags: ,

Primer año en Geeks.ms

Hace casi un año, Rodrigo Corral me envió un mail invitándome a participar en la comunidad Geeks.ms. (todavía hoy me pregunto cómo me encontró). 

Casualmente me encontraba con Miguel Jiménez en Sao Paulo recibiendo un entrenamiento en Silverlight y tecnologías de presentación, él conocía a muchos de los que publican por aca y me animo aun más a participar en geeks.ms.

En este año he escrito 28 posts (no debo ser el que más publica), he creado poca polémica (excepto por el número de proyectos que he hecho en la vida :-)) y recibido más de 30 comentarios, de todo tipo, sin embargo lo más valioso ha sido que he aprendido un montón en la preparación de cada post,  Ocasionalmente alguien me escribe agradeciendo algo que ha encontrado y que le ha ahorrado un par de horas o dolores de cabeza, lo que me llena de satisfacción.

No quería dejar pasar este aniversario del inicio del  blog sin agradecer a Rodrigo, a la Comunidad, pero sobre todo a todos los que nos leen. Espero haber realizado algún aporte y seguir haciéndolo por un buen rato. , tener la posibilidad de publicar en esta comunidad, una de las más grandes y de alto nivel en habla hispana, ha sido toda una realización personal y profesional.

Cordial Saludo

Juan Pelaez

Arquitecto de Software.

 

Keywords: Geeks.ms, Juan Pelaez

Technorati Tags: ,

Entrenamiento en Silverlight para Partner. Programa Metro.

 

El pasado 05 y 06 de Noviembre de 2008, tuve la oportunidad de dictar el entrenamiento en Silverlight para Partners de Microsoft Colombia inscritos en el programa Metro. Durante las 6 sesiones (8 horas) desarrollamos este programa:

 

• 8:30 – 9:30 Framework y Herramientas. Novedades en C# y VS2008.

• 9:35 – 10:45 WPF 101. Conceptos básicos, XAML, Blend y ejemplos.

• 10:45 – 11:00 Refrigerio

• 11:05 – 12:30 WPF 201. Dependecy Properties, Routed Events, IValueConverters, ApplicationsCommands

• 12:30 – 1:50 Almuerzo Libre

• 2:00 – 3:00 Silverlight 101. Conceptos Basicos y ejemplos.

• 3:05 – 4:15 Silverlight WorkShop . Construccion de un reproductor de MP3 con Silverlight. Comunicaciones entre SL y JS.

• 4:15 – 4:30 Refrigerio

• 4:35 – 5:30 Encoder, Deep Zoom y Silverlight Streaming. Ejemplos.

Gracias a todos los que participaron, espero que haya sido útil para el desarrollo de sus proyectos. Por favor no dejen de enviarnos sus comentarios sobre este evento a jpelaez at juanpelaez.com y a Sandra Marin en sandra.marin at microsoft.com

Dejo aquí las PPTs, y los resultados de la sesión 1, sesión 3 y el taller.

 

Recursos

Presentaciones.

Código de la Sesion 01. Novedades en c# y VS2008 

Código de la Sesion 02. WPF 201.

Código del Taller

 

Juan Pelaez

Arquitecto de Software

 

Keywords: Silverlight, Partners Microsoft Colombia, Programa Metro, Capacitacion, Juan Pelaez, Juan Carlos Pelaez, Entrenamiento, WPF.

 

Technorati Tags: ,,

[Off-Topic] Otro par de Sitios.

Durante 2008 estuve trabajando con el equipo de studiocom en el desarrollo de 2 nuevos web sites para  McCormick, la compañía de alimentos. En este mes salieron a producción, es muy emocionante ver cuando un proyecto de este tamaño se concreta en una dirección web pública.

 

Si quiere darle una mirada a los sitios aqui dejo las direcciones:

McCormick Web Site.

McCormick Corporate Web Site.

 

Para la construcción de estos sitios utilizamos SiteCore CMS 6.0 y se construyó todo sobre el Framework 3.0 de .Net  y Visual Studio 2008.

 

Durante el proceso tuve la oportunidad de trabajar con un equipo de gente muy talentosa:  

 

Alejandro Cadavid

Alexis Ilnicki

Andres Ardila

Alpesh Dhameliya

Ashley Sprowl

Camilo Cortes

Carlos Pelaez

David McAlister

David Preiss

Dev Kumar

Devra Jones

Diego Pineda

Eddy Milfort

Emily Rickerson Bove

Henri Bui

Jackie Dane

Jairo Celis

Joe Ayotte

Juan Carlos Pelaez (ME)

Juan Fernando Santos

Julian Orjuela

Keith Oh

Kelly Burk

Kim Colter

Kris Cargile

Kristie Stoeckel

Lara Becker

Mauricio Talero

Matt Roth

Mehmet Uzer

Mike Creati

Mohammed N. Mohammed

Nancy Edge

Nicholas Mutis

The Whole OSG McCormick team

Olga Cardenas

Rajit Gulati

Renso Vargas

Richard Wells

Ruchi Agarwal

Ryan Fuquea

Sandra Merino

Ted Duncan

Tito Milla

Timothy Kohler

Virgil Olteanu

Vivian Lowe

 

Juan Pelaez.

Software Architect.

Keywords: SiteCore, studiocom, Juan Pelaez Resume

Technorati Tags: ,,