Chalalo Land : javascript, AJAX

[Tutorial] Google Maps, JQuery y ASP.NET ejemplo práctico de este Mix

Gonzalo Perez — Sun, 12 Sep 2010 21:00:21 GMT

Hola!, ha pasado un tiempo sin postear, lamentablemente he estado súper corto de tiempo, pero sin embargo quiero compartir algo con ustedes.

Hace un tiempo un buen amigo mío me comentó la inquietud de hacer algo con google maps, para distintos dispositivos, lo que me pareció bastante interesante. El tema es que me desperté con ese bicho de programar y leer documentación así que , antes que te aburras leyendo esto, te muestro el ejemplo final en un video para que te entusiasmes.

Como vez, vamos a mostrar las panaderías cercanas, pero con nuestra información, la que esta almacenada en una Base de Datos y mediante un WS vamos a obtener estos datos para mostrarlos en el mapa y además, vamos a agregar una leyenda para cada uno de estos puntos

Revisemos los pasos a seguir para obtener este resultado…

Paso 1: Obtener el Key desde google Map

Debes obtenerlo desde la siguiente URL: API key for Google Maps , debes contar con una cuenta en gmail, y registrar de que servidor vas a utilizar esta API (no necesario para probar en Localhost). Luego vas a obtener la key , que con la cual tienes que hacer referencia a la API.
En mi caso:

Paso 2: Crear el div para el mapa

<body>

</div>

</ul>

</body>

Este va a ser el contenedor de nuestro mapa, además tenemos un tag ul para mostrar los puntos que vamos a marcar.

Paso 3: Crear el Código JavaScript

Luego viendo la documentación de la Api, vamos a configurar las siguientes características:

Icono de Marca Personalizado

$(document).ready(function () {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map_canvas"));

map.setCenter(new GLatLng(-36.809731, -73.042903), 15);

map.setUIToDefault();

var baseIcon = new GIcon(G_DEFAULT_ICON);

baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";

baseIcon.iconSize = new GSize(20, 34);

baseIcon.shadowSize = new GSize(37, 34);

baseIcon.iconAnchor = new GPoint(9, 34);

baseIcon.infoWindowAnchor = new GPoint(9, 2);

getMarkersWS(map);

}

Esta es la primera parte con esto instanciamos el mapa y lo asignamos al div que tenemos en el body. También damos las coordenadas para ubicar inicialmente el mapa (-36.809731, -73.042903), que es la ciudad donde vivo, y el zoom ,en este caso 15.

Para buscar tu ubicación, utiliza http://itouchmap.com/latlong.html

Luego vamos a modificar el icono partiendo de la base del icono por defecto, cambiamos la sombra y el tamaño, y como veremos, vamos a modificar con la función createMarker, que recibe el punto, y el html a imprimir, el icono sobre la marca.

function createMarker(point, htmlVentana) {

var Icon = new GIcon(baseIcon);

Icon.image = "empanadas.png";

markerOptions = { icon: Icon };

var marker = new GMarker(point, markerOptions);

GEvent.addListener(marker, "click", function () {

marker.openInfoWindowHtml(htmlVentana);

});

return marker;

}

Como comentaba antes, esta función se va a encargar de dibujar la marca, asignar además una ventana de información sobre la misma, asociada al evento click.

El ícono que elejí es la de una empanada, ya que es una comida típica Chilena y estamos celebrando el Bicentenario de mi Pais .

La ventana a la que le pasamos la variable (htmlVentana), se va a mostrar sobre el marker:

Obviamente, los datos son obtenidos desde la base de datos.

Paso 4: Crear la Base de Datos.

Creamos una tabla Panaderías, con la siguiente estructura:

Con los Datos:

Para hacerla como dice Pablo Campos “Short & Good”, voy a crear un modelo LinqToSql para el manejo de datos:

Agregamos el WebService y codificamos la función GetPanaderias() que devuelve una lista de Objetos PanaderiaItem.

<WebMethod()> _

Public Function GetPanaderias() As List(Of PanaderiaItem)

Dim Items As New List(Of PanaderiaItem)

Dim modelo As New ModeloDataContext

Dim lista = From p In modelo.Panaderias

For Each p As Panaderia In lista

Items.Add(New PanaderiaItem With {.nombre = p.nombre, _

.direccion = p.direccion, _

.precio = p.precio, _

.descripcion = p.descripcion, _

.foto = p.foto, _

.lng = p.Lng.ToString, _

.lat = p.Lat.ToString})

Return Items

End Function

Public Class PanaderiaItem

Public nombre As String

Public direccion As String

Public precio As Integer

Public descripcion As String

Public foto As String

Public lng As String

Public lat As String

End Class

Paso 5: Obtener los datos del WebService:

Vamos a crear un WebService que nos permita recuperar los datos mediante JSON:

function getMarkersWS(map) {

$.ajax({

type: "POST",

url: "MiWebService.asmx/GetPanaderias",

data: "{}",

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

dataType: "json",

success: function (response) {

var panaderias = response.d;

$.each(panaderias, function (index, pan) {

var point = new GLatLng(pan.lng, pan.lat);

var htmlVentana = "<img src='fotos/" + pan.foto + "'><br> Panadería:" + pan.nombre + "</b><br><i>Precio:" + pan.precio + "</i><br>Direccion:" + pan.direccion;

var marker = createMarker(point, htmlVentana);

map.addOverlay(marker);

$("<li />").html(pan.nombre + " " + pan.direccion + " <b>" + pan.precio + "</b>").click(function () {

marker.openInfoWindowHtml(htmlVentana);

}).appendTo("#list");

});

failure: function (msg) {

alert(msg);

}

}); //fin llamada ajax

} //fin funcion getMarkersWS

Como puedes ver el código , obtenemos los datos desde el WebService, mediante JSON, cuando ocurre el ok (success), y vamos recorriendo la colección de Objetos que nos devuelve el WS con la función $.each de Jquery

$.each(panaderias, function (index, pan)

Luego armamos el punto (var point) y el mensaje HTML para pasarlo a la función createMarker. Luego vamos a dibujar el listado y vamos agregando el handlers click , para que al pinchar cada elemento, se muestre en el mapa el punto y la ventana. Gracias al encadenamiento de Jquery, podemos finalmente agregarlo al list (appendTo).

$("<li />").html(pan.nombre + " " + pan.direccion + " <b>" + pan.precio + "</b>").click(function () {

marker.openInfoWindowHtml(htmlVentana);

}).appendTo("#list");

Paso 6: El Proyecto Web.

Esta es la estructura de nuestro proyecto, como vez es bastante sencillo, y podemos lograr un sistema de seguimiento, por ejemplo refrescando de manera asíncrona los markers.

Recursos:

Documentación Api de Google:
http://code.google.com/intl/es-ES/apis/maps/index.html

Búscate en el Mapa
http://itouchmap.com/latlong.html

Descarga la aplicación

Como siempre digo, espero que te sirva, y si sigues este blog, sorry que no haya posteado, pero creo que con esto me revindico . Si no te funciona postea porfa, así nos ayudamos entre todos!
Saludos,
Gonzalo

PD: Esta manera es más práctico que marcar de esta manera:

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

Gonzalo Perez — Fri, 23 Jul 2010 15:59:00 GMT

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:

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

ASP.NET Ajax Library, Introducción a Datalinker Parte 2: Converters

Gonzalo Perez — Wed, 30 Jun 2010 05:32:13 GMT

En el post Anterior (si no lo viste, pincha aquí), hablamos de la nueva característica llamada Datalinker, y teníamos una UI de esta manera:

… y todo funciona como es debido, sin embargo no nombre una nueva característica , que tiene que ver con otra propuesta más al team de jQuery , que tiene que ver con los converters .

Los Converters nos permiten convertir, como su nombre lo dice, el valor de una propiedad al momento de hacer el data linker.

Si recordamos la función del post anterior, la modificaremos para agregar el LinkFrom, que nos permite remplazar mediante expresiones regulares, todas los números que se ingresen en el campo de nombre (En esta versión deben ir linkBoth y LinkFrom , quizás más adelante, esto cambie).

Entonces al momento de escribir en el campo de texto y por ejemplo Gonzalo 123 y apretar el botón mostrar:

Los números fueron eliminados exitosamente

Espero que te sirva!
Saludos,
Gonzalo

ASP.NET Ajax Library , Introducción a las nuevas plantillas Client-Side

Gonzalo Perez — Sat, 12 Jun 2010 23:37:42 GMT

Ya no es noticia que el team de ASP.NET esté trabajando a toda máquina junto al equipo de jQuery, y que buenos productos se vienen a partir de esta sociedad. Uno de estos son los templates propuestos por el team de ASP.NET al team jQuery, que estan todavía en etapa de revisión, hay mucho feedback que se está recibiendo por parte de la comunidad.

Que son los Client Templates (o plantillas del lado del cliente)

Permiten a los desarrolladores web generar y renderizar HTML UI en el cliente (generalmente esto lo hacemos en el lado del servidor), mediante sintaxis simples permiten programáticamente invocar plantillas en el clienbte y pasar objetos Javascript , como arreglos por ejemplo, a divs específicos enmarcados en los tag propios de la plantilla. Debido a que esto todavía es una propuesta, es posible que la versión final sea diferente de lo que hoy vamos a ver.
Puedes descargar el prototipo en:
http://github.com/nje/jquery-tmpl

Vamos a ver un ejemplo para mostrar los datos de Docentes y sus asignaturas, agregando algunas características de las plantillas.

La idea es obtener el siguiente resultado:

Y como siempre en este Blog…. :)

PASO 1 – Importar las liberías

Debemos importar las librerías jQuery y la librería del template (descarga el prototipo aquí)

PASO 2 – Crear la Colección

Esta colección puede venir de un servicio Rest por ejemplo que nos devuelva en notación JSON un o una colección de objetos. En este caso usaremos una colección creada en la misma página:

Como puedes ver, es una colección simple que contiene otra colección de Asignaturas, la cual en el ejemplo de Bernardo, está vacía. (Espero que no se enojen los personajes aludidos :P)

PASO 3 – Crear el Contenedor y la Plantilla

Para esto vamos a crear un contenedor de la Plantilla, pudiendo existir en ella una o más plantillas para renderizar. Ahora viene lo bueno, como ves se utiliza un tag script de tipo texto/html para contener a la plantilla, como se ve n la figura:

Luego vemos unas marcas de tipo {{ = atributo_objeto }}, que hacen referencia a los atributos de la colección que se va renderizando mediante iteración, en este caso, hago un href al atributo URL de cada objeto de la colección, luego concateno nombre y apellido para mostrar el nombre completo en la UI.
A continuación vemos unas sentencias que están en el prototipo de la plantilla, existe el IF, y el each (foreach), acá la idea es que si la persona tiene asignaturas, se muestren en una lista, si no, que muestre el mensaje Sin Asignaturas.

Otr0 punto es que quiero imprimir la cantidad de Asignaturas, para eso no se imprime {{= asignaturas.length}} directamente, si no que hay que utilizar funciones javascript, en el ejemplo se muestra una llamada a la función getCantidad() , la cual tiene el siguiente código:

Obteniendo en cada iteración , mediante el contexto de la llamada (this), el largo de la colección de Asignaturas.

PASO 4 – Agregar el CSS

PASO 5 (y último) – Agregar la Colección a la Plantilla

Paso indispensable (y esta para el último, ejjeje) que nos permite hacer el binding de la colección y la plantilla:

Con esto estamos indicando que se renderize la colección contra plantillaDocente.

PASO 6 (Opcional) – Descarga el ejemplo

Como te diste cuenta puse imágenes en vez de texto,es bastante más rápido postear de esta manera, pero no se puede copiar el código!, por eso la aplicación la puedes descargar acá

Descarga el ejemplo

Espero que te sirva!, recuerda que esto está sujeto a cambios, pero nos da una buena idea de como van a trabajar las plantillas del lado del Cliente.
Muy buena la alianza Microsoft & jQuery!!

Saludos!
Gonzalo

Microsoft AJAX CDN, Mejoras de rendimiento a considerar

Gonzalo Perez — Sat, 02 Jan 2010 07:05:00 GMT

Al utilizar Microsoft AJAX CDN, podemos mejorar significativamente el rendimiento de nuestras aplicaciones AJAX. Los Script se almacenan en servidores ubicados al rededor de todo el mundo (según la página http://www.asp.net/ajaxlibrary/CDN.ashx, garantizando disponibilidad y velocidad. Ademas el CDN de Microsoft AJAX (que incluye JQuery) envía los script ya comprimidos, (por si nuestro hosting no tiene configurado esta opción), además permite a los navegadores la reutilización de los archivos Javascript en cache de los sitios web que se encuentren en distintos dominios. Todo lo anterior se suma a que por HTTP, hay un límite de peticiones concurrentes hacia un mismo dominio, esto incluye imágenes, css, archivos Flash, y por supuesto, los archivos JS.

Vamos a ver una pequeña demo, no tiene imágenes ni css, ni nada, pero vamos a darnos cuenta que los contenidos vienen comprimidos desde el servidor, en este caso voy a utilizar JQuery y FireBug para obtener los tiempos y tamaños de descarga.

El Código lo obtuve de la Página http://www.asp.net/ajaxlibrary/CDN.ashx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery from Microsoft AJAX CDN</title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $( domReady );
    function domReady() {
        $('#btn').click( showMessage );
   }
    function showMessage() {
        $('#message').fadeIn('slow');
    }
    </script>
</head>
<body>
<button id="btn">Show Message</button>
<div id="message" style="display:none">
    <h1>Hello from jQuery!</h1>
</div>
</body>
</html>

Ahora medido con FireBug,
Sin CDN

Fijémonos en los resultados, estoy referenciando a jquery-1.3.2.min.js es decir la versión de producción, en total 55 KB (es lo que pesa, claro esta) y tiempo total de carga 2.05s.

Con CDN
Cambiando la línea de código en donde se hace la referencia a JQuery por:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

Esta vez, vemos que el tiempo de carga disminuyo, por que? por que la habilitación de compresión de los archivos JS de los servidores de CDN permitió que el mismo archivo, ahora tuviera la mitad del tamaño, solo 25KB, y el tiempo de carga 1.38s.
La segunda vez, ya que esta en cache, es menor aún el tiempo (1.2 Seg):

Ahora bien, es bueno comenzar a pensar pensar en distribuir nuestro contenido estático, lo que logra una reducción en los tiempos de respuesta, por lo menos en tema de referencias a archivos JS se hace sencillo con Microsoft Ajax CDN.
Por ahora no vamos a profundizar más (más adelante si) por mientras te dejo la página para que lo compruebes tu mismo y veas los beneficios de incluir este concepto en tus desarrollos, no solo con JQuery, si no con toda la gama de Script que podemos referenciar (http://www.asp.net/ajaxlibrary/CDNAjaxLibrary0911.ashx)

Acá está la página , tiene muchos ejemplos:
http://www.asp.net/ajaxlibrary/cdn.ashx

Saludos,
Gonzalo.

[Tutorial] Microsoft Ajax Minifier – Optimiza tus archivos Javascript

Gonzalo Perez — Mon, 16 Nov 2009 23:31:55 GMT

Hola, que tal, comienzo una serie de post y screencast sobre como mejorar la performance de nuestras aplicaciones Web, en especial (obviamente) ASP.NET, hay algunos datos que van a servir para PHP, estoy leyendo un libro buenísimo sobre ….

Microsoft Ajax Minifier

Es una herramienta que nos va a permitir mejorar el rendimiento de nuestras aplicaciones que utilizan Javascript, como las ajax (que como ya saben , utilizan bastante), ya que reduce el tamaño de los mismos, admitiendo dos niveles de minificación (diferenciando de compresión).

Normal Crunching
Se realiza el proceso de minificación del js, eliminando los espacios en blanco, puntos y comas y llaves innecesarias, como así también los comentarios (que son necesarios en tiempo de desarrollo, pero en explotación no)

Código Normal

if ( a == 0 )
{
    a = 10;
}

Normal Crunching

if(a==0)a=10;

Hyper Crunching
Se realiza el proceso de minificación, además acortando los nombres de las variables locales , nombres de funciones y eliminando lo innecesario.

Código Normal

function DivideTwoNumbers(numerator, denominator, unsedparameter )
{
    return numerator / denominator;
}

Hyper Crunching

function a(a,b){return a/b}

El Microsoft Ajax Minifier incluye los siguientes componentes:

Herramienta de Línea de Comandos: Nos permite minimizar los archivos JavaScript mediante la línea de comandos.
MSBuild Task: Permite minificar el archivo Javascript en Visual Studio, automáticamente cuando generas tu proyecto.
Componente: Permite usar el Microsoft Ajax Minifier programáticamente.

Ejemplo 1- Pequeña Sección de Código

Vamos a tener un archivo llamado funcion.js el que tiene el siguiente contenido (tomado prestado por ahi…)

function borra(opt) {
    var temp = opt.options.length;
    for (var x = 0; x < temp; x++) {
        opt.options[temp - x] = null;
    }
}

Al aplicar MAM con Normal Crunching, por línea de comandos:

C:\Program Files\Microsoft\Microsoft Ajax Minifier>ajaxmin prueba.js -o prueba.m
in.js.

Veamos los resultados:

El archivo pesa ahora 92 bytes, en comparación con los 123bytes del archivo normal, si vemos el contenido del archivo veremos:

function borra(opt) { for (var temp = opt.options.length, x = 0; x < temp; x++) opt.options[temp - x] = null }

Es decir el archivo final es aprox 25% más pequeño que el original

Ahora a aplicar Hyper Crunching

C:\Program Files\Microsoft\Microsoft Ajax Minifier>ajaxmin -hc prueba.js -o prue
ba.min.hc.js

El archivo pesa 77 bytes, por lo que es 37% menor al archivo original, si vemos el contenido del archivo veremos:

function borra(c) { for (var b = c.options.length, a = 0; a < b; a++) c.options[b - a] = null }

Ejemplo 2 – Archivo Real tomado de un Website

Para este ejemplo “tome prestado” un archivo JS de un Website de una Universidad, el archivo pesa 29.778 Bytes. No vamos a detallar nuevamente el proceso, en lugar de eso , quiero que veamos una tabla comparativa de los resultados:

Utilizar Microsoft Ajax Minifier desde Visual Studio

Cuando terminamos la instalación vemos que se crea un nuevo MSBuild en C:\program Files\MSBuild\Microsoft\MicrosoftAjax

Lo que debemos hacer ahora, es modificar el archivo del proyecto (.vbproj) , para esto lo puedes hacer con notepad o también puedes descargar el proyecto mediante visual studio y luego modificar el archivo, dentro del tag <Proyect> vamos a incluir lo siguiente:

Luego guardar y al recargar el proyecto elije la opción cargar normalmente del cuadro de diálogo:

Ahora al presionar F5(Build) , vamos ver que se genera automáticamente el archivo js min.Si no lo notamos de inmediato, es por que no hemos puesto la opción de ver todos los archivos:

Ahora puedes ver el archivo generado funciones.min.js ya en tu proyecto, todo archivo JS va a ser minificado :).

Una aclaración, esto no es compresión, sino minificación, la compresión la podemos hacer con gzip y obtenemos aún mejores resultados (a costa de tiempo de cpu).

Espero que te sirva!
Gonzalo.

Microsoft Ajax CDN, nunca esta demás saberlo.

Gonzalo Perez — Tue, 22 Sep 2009 13:15:14 GMT

Una buena noticia, desde el team de ASP.NET, está disponible Microsoft Ajax CDN, el cual facilita el tema de agregar las librerias de Microsoft Ajax y jQuery a nuestras aplicaciones Web. La idea es que podemos agregar las referencias apuntando al sitio Ajax.Microsoft.com.

Usando Microsoft Ajax mediante CDN

También están disponibles las versiones al debug

Y para nuestra librería preferida jQuery también en ambas modalidades:

Debug:

Esto nos va a ayudar mucho para utilizar estas liberías en algunos sitios que no se nos permite subir archivos js, ya que los podemos referenciar a ajax.Microsoft.com.

Más información en:
http://www.asp.net/ajax/CDN/Default.aspx

Saludos,
Gonzalo

[Tips] FireAtlas, Extensión para FireBug para traceo ASP.NET AJAX Now!

Gonzalo Perez — Wed, 20 May 2009 16:37:00 GMT

Hola, excelente noticia, se ha liberado esta excelente herramienta basada en FireBug (Herramienta imprescindible para los que desarrollamos bastante código javascript).
El asunto es que ahora podemos hacer debug dedicado a Microsoft ASP.NET Ajax

Si no quieres llegar al fina y descargarlo Right now!

Descarga de FireAtlas
http://fireatlas.chesnaistechnologies.com/Default.aspx

Descarga de FireBug
http://getfirebug.com/

Algunas características:

PageRequestManager events tracing
Tracing de Llamadas a WebServices
Inspección de Updates parciales en la página a través del Panel de Firebug Net Panel
y viene mucho más (según el website)

Recuerda que primero debes tener instalado FireBug, y luego bajar e instalar el FireAtlas, si no sabes como instalación una extensión xpi, has lo siguiente:

1 - Abrir Firefox.
2 - Ir a Archivo : Luego en Abrir archivo... y seleccionas el xpi, luego te va a pedir reiniciar Firefox.

Vas a quedar con algo parecido a la siguiente Imagen:

Ahora bien, probando en la página de prueba que te da FireAtlas :

http://fireatlas.chesnaistechnologies.com/TestZone/UpdatePanelSample.aspx

Puedes hacer un tracert e ir directamente al código Javascript generado dinámicamente por el ScriptManager:

Ahora, la pregunta, donde bajo estas maravillas:

Descarga de FireAtlas
http://fireatlas.chesnaistechnologies.com/Default.aspx

Descarga de FireBug
http://getfirebug.com/

También puedes revisar este post de como realizar pruebas unitarias con extensiones de firefox a tu javascript, esta muy bueno , es de Stephen Walther:

http://stephenwalther.com/blog/archive/2009/05/18/unit-testing-javascript-with-fireunit.aspx

Espero que les sea de Ayuda.
Saludos,
Gonzalo