
Primero que nada, debes seguir si o sí el canal #jquery, hay mucha información de nuevos plugins & efectos para tu web. Ahora tomados de la web del Genial Matthew David, tenemos:
- @jquery – El oficial
- @smashingmag – Muchos artículos sobre JQuery
- @jqtouch – uno de los mejores Framework para dispositivos móviles.
- @usejquery – Excelentes Tips
- @jquerypodcast – conoce los ultimos podcast de jquery
- @jquerybot – Mucha información útil sobre jQuery
- @matthewadavid –El creador de la lista y un dev de jquery genial!
- @aNieto2k - una de las páginas en español con más información de desarrollo Web
- @elijahmanor – Mestro de Jquery
- @jeresig - Creador de Jquery
La lista se puede complementar mucho más, se aceptan sugerencias!!
Saludos,
gonzalo
Jesús Boch me ha invitado a participar en un WebCast Sobre Ajax. Acá tienes los datos de los contenidos 
Aprenderemos cómo Microsoft AJAX le permite crear fácilmente y utilizar los controles del Kit de Herramientas de Control AJAX en ambas Formas ASP.NET Web y aplicaciones ASP.NET MVC. Conoceremos todas las nuevas características y mejoras en los controles del Kit de Herramienta de Control AJAX tal como el nuevo Script Loader de cliente y el control de DataView de cliente.
También veremos cómo ASP.NET AJAX fue diseñado para trabajar uniformemente con jQuery, cómo crear controles ASP.NET Ajax directamente de jQuery y cómo utilizar la biblioteca jQuery en el código ASP.NET Ajax. Así mismo descubriremos las nuevas características de Visual Studio 2010 y como crear con su ayuda aplicaciones AJAX de forma más productiva.
Todo ello de la mano del MVP en ASP.NET Gonzalo Pérez Correa (Chalalo).
Fecha:
jueves, 23 de septiembre de 2010 19:00 Madrid, París
jueves, 23 de septiembre de 2010 13:00 Santiago, Chile
Apúntate con antelación al evento en este enlace:
https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032459011&EventCategory=4&culture=es-ES&CountryCode=ES

Nos vemos allá!
Que tal? Vamos a revisar este nuevo release del Team de ASP.NET. Release que corresponde a un Framework de optimización de imágenes, que nos permite utilizar CSS Sprites y base64 image inlining para hacer que nuestro sitio web cargue las imágenes más rápido.
Lo primero , es que lo puedes descargar, junto a su documentación en:
http://aspnet.codeplex.com/releases/view/50140
La siguiente guía está basada en la documentación oficial del producto, al final vas a poder ver un video de como esto funciona. La documentación estaba en ingles, pero la traduje y aproveché de estudiar esta nueva herramienta, y quiero compartir lo que aprendí.
Técnicas de optimización de Imágenes
CSS Sprites
Si quieres saber más sobre CSS Sprites visita este artículo:
http://geeks.ms/blogs/gperez/archive/2010/01/04/optimizando-tu-website-con-css-sprites-caso-pr-225-ctico.aspx
Otra técnica de optimización para imágenes es la denominada (la dejo en inglés mejor) image inlining. En esta técnica, se embebe la data de la imagen (usando la codificación base-64) directamente en el HTML o en el CSS en lugar de hacer la referencia a la imagen como recurso externo. Cabe recordar que cuando es recurso externo, se realiza un request. Al integrar las imágenes en el HTML o CSS, podemos reducir el número de request a las imágenes en una página a cero (o a uno, dependiendo de si los datos de la imagen se encuentran en la misma página o en una hoja de estilos referenciada).El total del contenido se puede descargar en un resquest.
Ejemplo:
Desventajas el Inlining Images
Si bien esta técnica nos permite optimizar bastante el tema de la carga de imágenes en nuestro sitio, tiene algunas desventajas:
-
Soporte del Browser, ya que no todos los browser lo soportan , de hecho podríamos decir que la mayoría, hasta ahora, no lo soporta, para darnos una idea, IE8 lo soporta y las nuevas versiones, también FireFox desde la versión 3.5
-
Tamaño más grande de las imágenes, estas al estar codificadas en base-64, su tamaño se incrementa, hasta un 40% más del tamaño original.
-
Cache, ya que los browser no cachean imágenes encodeadas en base-64, si estas están encodeadas directamente en el HTML, sin embargo, si están n un archivo externo CSS, si funciona l cache.
Comparación entre Sprites e Inlining Images
|
Tag img normal
|
Sprites
|
Base-64 Inlining
|
|
Alto numero de request, uno por cada imagen de la página
|
Numero de Request HTTP Moderados (uno para el archivo RSS y otro para el Sprite)
|
Bajo número de request (solo uno, para el archivo CSS)
|
|
Tamaño de archivo moderado
|
Tamaño pequeño de archivo, se ahorra espacio al tener una sola imagen que contiene a todas.
|
Tamaño de archivo mayor al estar codificado en base-64
|
|
Compatible con todos los Browsers
|
Compatible con todos los Browsers actuales.
|
Solo compatible con las ultimas versiones de browser basados en WebKit y Mozilla
|
Optimización de Imágenes en ASP.NET
Para usar images Sprites en Web Forms, podemos utilizar el nuevo control SpriteImage, este control funciona de manera similar al control Image que ya conocíamos, pero automatiza totalmente la tarea de desplegar las imágenes optimizadas con la técnica CSSS Sprite. Además , podemos utilizar los sprites creados por este control en páginas HTML Standars (como elementos img), o ya sea utilizando helpers ImageSprite.Image para MVC o para Razor.
Instalando y Configurando el ASP.NET Image Optimización Framework
Para agregar la funcionalidad a nuestro sitio, debemos agregar las DLL al proyecto y referenciar al ensamblado ImageOptimizationFramework. Los sitios Web Form (ASP.NET Tradicional), además deben referenciar el ensamblado WebFormsControl. Para los sitios que utilizan MVC y Razor deben referenciar al ensamblado MVCHelper para tener acceso al helper ImageSprite.Image.
La siguiente imagen resume lo anterior:

El ensamblado ImageOptimizationFramework incluye un módulo que se debe ejecutar cuando la aplicación se inicia, para habilitar este módulo, agregamos en el Web.config:
Para II6
<httpModules>
<add type ="Microsoft.Samples.Web.ImageOptimizationModule"
name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
</httpModules><?xml:namespace prefix = o />
Para II7
<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
<add type="Microsoft.Samples.Web.ImageOptimizationModule"
name ="Microsoft.Samples.Web.ImageOptimizationModule"/>
</modules>
</system.webServer>
Preparar las Imágenes para la Optimización
Para usar CSS Sprites, se debe agregar las imágenes al sitio en una carpeta específica. Opcionalmente podemos configurar opciones para el Sprite mediante un archivo XML.
Agregar imágenes a la Carpeta App_Sprites
Todos los imágenes deben ser agregadas a la carpeta App_Sprites, que debe estar por debajo de la raíz del sitio. Esta carpeta puede incluir Sub Carpetas. Para este post estoy utilizando las imágenes del ejemplo que viene por defecto (y en la documentación oficial)
Ej:

En tiempo de ejecución, las imágenes en casa subcarpeta se fusionan automáticamente en Sprites o embebido directamente en archivos CSS (que son creados por el paquete de optimización), dependiendo como se ha configurado.
Configuración las opciones de Optimización
Podemos sobrescribir la configuración por defecto creando el archivo settings.xml. Este archivo lo podemos crear en la carpeta App_Sprites o en cada subcarpeta que contiene los image sprites. Si una subcarpeta no contiene el archivo settings.xml, entonces esta hereda la configuración desde el archivo settings.xml de la carpeta padre (si es que existe, o si no se utiliza la configuración por defecto).
En el archivo settings,xml, podemos setear los siguientes elementos:
FileFormat: Esto controla el formato de la imagen del sprite generado. Las Opciones son JPG, GIF, PNG y BMP.
Calidad: Controla el nivel de compresión del resultando del sprite. El valor se especifica como un entero que representa el porcentaje de compresión
MazSize: Esto determina el tamaño máximo (en KB) para el image sprite. Si el tamaño del combinado de imágenes en una carpeta excede este valor, entonces se crearán multiples sprites automáticamente y será transparente la referencia a través de un solo archivo CSS.
BackgroundColor: Define el color de fondo de image sprite, incluyendo transparencia. Se especifica en el formato estándar ARGB. Esta configuración se suele utilizar cuando se agregan imágenes PNG transparentes a un sprite que se va a generar en un formato que no admite la transparencia.
Base64Encoding: Esto habilita o deshabilita el Base64Encoding. Incluso si esta opción está activada, los sprites se producirán por compatibilidad con navegadores que no soportan imágenes en línea)
El siguiente ejemplo muestra el contendido de un archivo setting,xml, que refleja la configuración por defecto.
<?xml version="1.0" encoding="utf-8"?><ImageOptimizationSettings>
<FileFormat>png</FileFormat>
<Base64Encoding>true</Base64Encoding>
<Quality>80</Quality>
<BackgroundColor>00000000</BackgroundColor>
<MaxSize>500</MaxSize>
</ImageOptimizationSettings>
Notar lo siguiente:
-
El elemento Quality es redundante para el ejemplo, debido a que es ignorado cuando el output de formato de salida seleccionado es png.
-
Si se especifica un formato de salida que no es reconocido , el defecto es PNG
-
El valor BackgroundColor es ignorado para las imágenes Base-64
¿Como funciona ASP.NET Image Optimization?
Monitoreo de la carpeta APP_Sprites para detección de Cambios
El módulo ImageOptimizationModule se ejecuta durante la fase de carga inicial de la aplicación ASP.NET e implementa el framework de optimización propiamente tal. Agrega un cache de dependencia a la carpeta App_Sprites y a todas las subcarpetas(si es que existen). Si el contenido de alguna de estas subcarpetas cambia, el framework de optimización hace lo siguiente:
-
Si una imagen o archivo de configuración es agregado, eliminado o modificado, o la carpeta se vuelve a generar, se creara una nueva imagen y archivo css. Si las subcarpetas no tienen un archivo settings.xml, será reconstruido, debido a que sus valores heredados pudieron haber cambiado.
- Si una carpeta se agrega, se agrega también un elemento a la cache
- Si una carpeta es eliminada, se elimina también de la cache
Adicionalmente, un archivo llamado timestamp.dat es utilizado para comprobar si la carpeta tiene que ser reconstruida (img y css) cuando se inicia la aplicación. Si este archivo no ha cambiado cuando se reinicia la aplicación, entonces no hay que reconstruir todo la carpeta App_Sprites, proceso que puede hacer uso intensivo de CPU y Disco.
¿Como son desplegadas las imágenes por el control Built-In?
Los Sprites y las inlined images son redenderizadas usando CSS IDs o clases, las cuales se asocian a los elementos de la pagina como los div, span,a ,p e img. Puesto que el fin es optimizar la carga de imágenes, y que la mejora se siga tratando como imágenes vs el CSS, el control para WebForm y las funciones Helpers hace que estas imágenes utilice una imagen GIF cuyas características son transparente y de 1x1 píxeles. (Codificada en el atributo scr), y luego se usan las clases CSS para mostrar la imagen correcta.
El siguiente ejemplo muestra el código generado al redenderizar:
<img class="aspNetLogos_2-png"
src="data:image/gif;base64,R0lGODlhAQABAIABAP///
wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
Para asegurar la compatibilidad Cross Browser, el framework de optimización genera dos archivos CSS: highCompact.css, el cual permite el uso de images inline(si es que lo estamos utilizando), y lowCompat.css, que permite solo image Sprites. Para que la referencia correctamente, se debe vincular la hoja de estilo se debe vincular en el head de la página. El siguiente ejemplo muestra un link a la hoja de estilos que es compatible con todos los navegadores (esto es, que utiliza CSS Sprites)
<link href="App_Sprites/aspNetLogos/lowCompat.css" rel="stylesheet"
type="text/css" media="all" />
Agregar las imágenes optimizadas a la Página.
El enfoque o la forma que se utiliza para aprovechar la ventaja de las imágenes optimizadas en una página web depende de si se está utilizando un WebForm, una vista de MVC o Razor, o incluso, si se quiere crear manualmente y agregar los tags de forma manual.
Control para ASP.NET Web Forms
Para usar la optimización de imágenes in ASP.NET Web Forms, agregamos el control SpriteImage, la sintaxis sería algo como:
<SpriteImage:SpriteImage ID="SpriteImage3" runat="server"
ImageUrl="~/App_Sprites/aspNetLogos/2.png" Optimize="true" />
Podemos setear la propiedad ImageUrl a la imagen sin optimizar en la carpeta App_Sprites, y adicionalmente setear la propiedad Optimize a true. Cuando la pagina se renderiza el framework de optimización agrega el link de referencia al CSS apropiado en la cabecera de la página y procesa la imagen adecuada para la opción elegida.
Helper ASP.NET MVC y Razor
Para usar la optimización en vistas MVC o páginas Razor, debemos agregar dos helpers, uno para procesar el link al archivo CSS en la vista, y el otro para renderizar la imagen en la página. Para lo primero, agregamos el siguiente helper en el tag head.
<%: Microsoft.Samples.Web.ImageSprite.ImportStylesheet("~/App_Sprites/") %>
El método ImageSprite.ImportStylesheet genera el HTML requerido para crear el link apropiado al CSS, según la compatibilidad del browser.Para las aplicaciones MVC, debemos pasar esto al header, típicamente utilizando un elemento ContentPlaceHolder, al estar utilizando MasterPages.Para insertar la imagen en la vista mvc o razor, usamos el helper ImageSprite.Image como el siguiente ejemplo:
<%: Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/myImage.jpg")
Ahora el video
Como siempre, espero que te sirva!
Saludos,
Gonzalo
Pablo Campos, MVP en Virtualización va a realizar una excelente Charla sobre como Construir un DataCenter Dinámico, este es el post de su blog. Visítalo en http://geeks.ms/blogs/pcampos/
“Hola a todos, con Duoc-UC, donde me desempeño como docente y ArtcLynx, donde me desempeño como Ingeniero de Plataformas, Organizamos 3 charlas,
donde mostraremos todas las gracias de Hyper-v R2 + SCVMM R2
Donde es y cuando ? 
lunes, 16 de agosto de 2010 19:00
DUOC-PUC - Sede Concepción
Auditorio S-18
Paicaví 3280, Concepción
Concepción Bío-Bío Chile
Donde me inscribo
Lunes 16 de agosto de 19:00 a 20:30 hrs:
Construye un Datacenter Dinámico de la Mano de Hyper-V y System Center Virtual Machine Manager 2008 r2 "Parte 1"
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032456645&Culture=es-CL
Lunes 23 de agosto de 19:00 a 20:30 hrs:
Construye un Datacenter Dinámico de la Mano de Hyper-V y System Center Virtual Machine Manager 2008 r2 "Parte 2"
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032456646&Culture=es-CL
Lunes 30 de agosto de 19:00 a 20:30 hrs:
Construye un Datacenter Dinámico de la Mano de Hyper-V y System Center Virtual Machine Manager 2008 r2 "Parte 3" FINAL
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032456648&Culture=es-CL
Acá ven una foto de Pablo preparando la charla, va a estar buenísima!

Saludos,
Gonzalo
Esta es una imagen que la encontré en el Facebook de Alexander Jiménez, la encuentro muy representativa de lo que nos pasa a diario. Sin más explicación, el chisteeee:

Díganme que no es verdad?
Saludos,
Bicho Raro
Hola!, no sabía como nombrar este post, pero vamos por parte, primero que nada quiero que veas el siguiente articulo sobre un plugin para JQuery:
http://vadikom.com/demos/poshytip/
Como pudiste ver, este plugin nos permite generar atractivos Tooltips configurables , puedes ver en la misma página la lista de propiedades

Ahora bien, consiente de que no todos los desarrolladores están familiarizados con JQuery es que me propuse hacer un pequeño aporte para que se les haga más fácil el trabajo.
Mi idea fue crear las clases necesarias para que desde el lado del servidor puedas agregar la funcionalidad de Poshytip a tus páginas mediante código programático.
Vamos a empezar de Atrás para Adelante, es decir, mostrando el resultado Final y luego el como se programó, por si te animas a hacer lo mismo con otro control
Tengo un webform con unos varios hyperlink (aunque podrías usar otro control) y un textbox:

Luego al ejecutar el siguiente código:
Dim tm As New ToolTipManager(Me.Page, True)
Dim tlista As New List(Of ToolTip)
tlista.Add(New ToolTip(hp1.ClientID, "probando"))
tlista.Add(New ToolTip(hp2.ClientID, "probando2",
ToolTip.CssClassOption.tipGreen))
tlista.Add(New ToolTip(hp3.ClientID, "probando3",
ToolTip.CssClassOption.tipTwitter))
tlista.Add(New ToolTip(hp4.ClientID, "probando4",
ToolTip.CssClassOption.tipViolet))
tlista.Add(New ToolTip(hp5.ClientID, "probando5",
ToolTip.CssClassOption.tipYellowsimple))
tlista.Add(New ToolTip With {.target = txNombre.ClientID, _
.content = "Ingrese Nombre", _
.showOn = ToolTip.ShowOnOption.focus, _
.alignTo = ToolTip.AlignToOption.target, _
.alignX = ToolTip.AlingXOption.right, _
.alignY = ToolTip.AlingXOption.center, _
.className = ToolTip.CssClassOption.tipGreen, _
.offsetX = 5
})
tm.writeToolTipList(Me.Page, tlista)
Como puedes ver, se crear un TooltipManager, que nos va generar todo el código necesario para visualizar los ToolTip. Luego por cada control HyperLink (hp1,hp2…) vamos agregando mediante su clientID, el texto del tooltip. He creado dos constructores para facilitar las cosas, uno que recibe el ClientID y el texto, y otro que además recibe el estilo.
Ahora para que veas el resultado (luego explico como lo hice)
Se ve bien verdad?, como vez, la idea es que sin tener que escribir código JS puedas utilizar este excelente PlugIn.
La configuración es bastante sencilla y lo hice para que minimizaras el código a escribir. Revisemos la estructura del proyecto.

Incluimos en el AppSetting las siguientes entradas:
<appSettings>
<add key="ToolTipJSPath" value="js/"/>
<add key ="ToolTipCSSPath" value="TooltipCss/"/>
</appSettings>
Que no hace nada más que indicar cual es la ruta para los JS que vamos a incluir, lo mismo para los CSS, puedes crear nuevos e incluirlos (recuerda agregarlos a la enumeración correspondiente)
Las Clases involucradas en esto son:

En donde Tooltip es la clase que representa el ToolTip y tiene las propiedades del plugin, además un método que se llama writeTooltip que devuelve un string listo para imprimir. Utilizo enumeraciones para que sea más fácil a la hora setear los posibles valores, los cuales corresponden obviamente a los originales del plugin.

La clase ToolTipManager tiene un constructor que escribe los links necesarios para que se ejecute el plugin.

Este constructor recibe dos parámetros uno que es la página y el otro si se utiliza CDN (para estar un poco a la moda). Vamos agregando links programáticamente al header, de esta manera al momento de ejecutar la página, sin tener que escribir nosotros el código , va a estar incrustado, a continuación un ejemplo de como incluir un archivo js.
Dim include2 As New HtmlGenericControl("script")
include2.Attributes.Add("type", "text/javascript")
include2.Attributes.Add("src", path & "jquery.poshytip.js")
page.Header.Controls.Add(include2)
Luego el método WriteToolTipList recibe una lista de ToolTips y llama al método writeToolTip de cada ToolTip, de esta manera se va escribiendo en la página el código JQuery que va a permitir atachar el plugin a los controles que especifiquemos:
Public Sub writeToolTipList(ByVal Page As Page, ByVal ToolTipList As List(Of ToolTip))
Dim include As New HtmlGenericControl("script")
include.Attributes.Add("type", "text/javascript")
include.InnerHtml = "$(function(){"
For Each tt As ToolTip In ToolTipList
include.InnerHtml &= tt.WriteTooTip
Next
include.InnerHtml &= "});"
Page.Header.Controls.Add(include)
End Sub
Entonces, ahora si quieres bájalo y pruébalo, esta escrito con VS2010, es llegar y ocupar
,incluye el plugin, jquery, los estilos, las clases y el ejemplo
PD: El Dueño de control es http://vadikom.com/, a él el honor y la gloria, yo solo hice una especie de “Encapsulación” del control. Si vas a la página del autor, tiene ejemplos con llamadas asíncronas muy buenas!
Espero que te sirva,
Nos vemos!
Gonzalo
Una de los puntos de optimización en los que he puesto atención es en los CSS Sprites, si no tienes claro aún cual es el propósito de utilizarlos te recomiendo que visites mi artículo de CSS Sprites. Por otro lado, te adelanto que en los próximos días se va lanzar un nuevo control de ASP.NET para WebForms y MVC que nos provee esta característica como webcontrol. Si no quieres espera o estas utilizando otro lenguaje, te recomiendo visitar la siguiente página:
Que tiene un generador de CSS Sprites Online
. Los Pasos a seguir son:

El autor de la página hizo un video muy bueno explicando esto lo comparto para que lo veas
Espero que te sirva este tip 
Saludos,
Gonzalo
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 
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
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
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:
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!
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
<!DOCTYPE html>
<html>
<head>
<title>Primer Demo con WebMatrix</title>
</head>
<body>
@{ var miNombre = "Gonzalo"; }
<p>Hola, mi nombre es : @miNombre </p>
@{
var var1 = "Esto esta muy bueno,";
var dia = DateTime.Now.DayOfWeek;
var msgTotal = var1 + " hoy es: " + dia;
}
<p>@msgTotal</p>}
</body>
</html>
| 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
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!
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
Otra de las propuestas que se han enviado a el team de jQuery por parte del team de ASP.NET tiene que ver con los Datalinker. Esta nueva característica permite hacer el “link” desde una propiedad de un objeto a otra propiedad de otro objeto, además que el cambio en el objeto origen, provoque un cambio automático en el objeto con el link. Utilizando en DataLinking podemos sincronizar (y mantener sincronizados) fácilmente la UI con los objetos en el lado del cliente.
Vamos a tener algo parecido al ejemplo del post anterior (http://geeks.ms/blogs/gperez/archive/2010/06/13/asp-net-ajax-library-introducci-243-n-a-las-nuevas-plantillas-client-side.aspx .
La UI será la siguiente:
El primer paso es incluir la librería:
Luego vamos a tener un objeto que tiene los siguientes campos:
Los cuales son coincidentes con nuestra UI, luego debemos hacer el link del objeto “ObjetoDocentes” con nuestros objetos Dom de la UI. (Esto es lo bueno!)
Como puedes ver con el método linkBoth lo que hacemos es linkear la el campo nombre, con la propiedad val del objeto txNombre, de esta manera se realiza la sincronización. al momento de ejecutar la pagina:
Ahora bien, si modificamos en la UI los valores, se sincronizan automáticamente en el objeto “ObjetosDocente”. Para eso tenemos una función que nos muestra los datos del objeto, la que está atachada al boton mostrar.
Modificamos el Nombre y Apellido (en la onda mundialera) y al momento de hacer click en mostrar, sin ninguna modificación ni código adicional, podemos ver que se sincronizó los datos del objeto con los datos de la UI.
Ahora bien, si queremos modificar los datos por código, lo podemos hacer mediante el método attr:
Vamos entonces a presionar el botón guardar y de inmediato se sincroniza la UI:
Estas funcionalidades todavía están en un estado de propuesta, y es posible que cambien en el futuro. Pero al menos nos da una visión general de como va a funcionar esta característica en el futuro.
Espero que te sirva!
Saludos
Gonzalo!
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í)
<script src="http://code.jquery.com/jquery.js" type="text/javascript"/>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"/>
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
Hola!, se que es sencillo, pero por experiencia en el blog, me he dado cuenta que estos tips son de gran utilidad para algunos visitantes.
La idea principal es pedir la confirmación por parte del usuario cuando va cerrar la página ( incluso por que se va a cambiar de página por un menú por ejemplo).
Vamos por parte, primero vamos a tener la página:
La idea es que cuando escriban algo, o cambien el dato seleccionado en profesión, o pinchen en sexo o notificaciones, se considere una modificación en la página , por lo cual se debe mostrar el mensaje de confirmación, sin embargo, cuando presionen guardar, no muestre el mensaje. De la misma manera, en los links, hay uno que genera confirmación el otro no.
Para esto, vamos a crear un archivo js, que en mi caso se llama jverificador, con la programación necesaria para lograr lo que queremos, la estructura del sitio de prueba queda de la siguiente manera:
El contenido es el siguiente:
var __modificado = 0;
$(document).ready(function () {
$(".editable").keypress(function () {
__modificado = 1;
});
$(".clickeable").click(function () {
__modificado = 1;
});
$(".cambiable").change(function () {
__modificado = 1;
});
$(".anulable").click(function () {
__modificado = 0;
});
});
window.onbeforeunload = function (e) {
if (__modificado == 1) {
return "Ha modificado datos de página, si continua perderá sus cambios!";
}
};
La idea es simple, distintos selectores css, para distintos controles, por ejemplo, el selector para editable, lo puedo setear para los texbox:
<asp:TextBox ID="TextBox2" class="editable" runat="server"/>
o clickeable, podemos asignarlo a los checkboxs y radiobuttons, cambiable para el dropdown.
Otro ejemplo:
<asp:DropDownList ID="DropDownList1" class="cambiable" runat="server">
Existe una variable __modificado que asume el valor de 1 cuando los eventos antes mencionados suceden , pero también la clase anulable para sacar la marca y no mostrar el mensaje.
Luego en el método onbeforeunload, pregunto por el valor la variable __modificado, si existió una acción o modificación el dato toma el valor 1, en otro caso, simplemente no hace nada.
El resultado es el siguiente:
Puedes ver además que hay una sección que indica:
Al igual que el botón guardar del formulario en uno de estos link no debe pedir confirmación, recordemos que el botón guardar realiza un postback, que si no controlamos mediante la variable __modificado=0, nos pediría confirmación.
Nota, obviamente esto puede generar conflictos como en escenarios en donde se utilice controles con autopostack. Sin embargo en escenarios con Microsoft Ajax funciona ya que no se recarga la página.
Eso!, espero que este archivo JS te sea de utilidad.
Saludos,
Gonzalo
Hola!, yo de nuevo :), hoy quería hablar de un control de la libería de ajax de ASP.NET que se llama ScriptLoader, el cual en breves palabras nos va a servir para reducir la complejidad a la hora de cargar script y resolver sus dependencias. De hecho la librería Microsoft Ajax Client-Side está dividida en múltiples archivos Javascript, permintiéndonos el ScriptLoader descargar solo los que necesitemos.
Dentro de sus características principales podemos encontrar:
- Resolución Automática de dependencias
- Carga Perezosa (Lazy loading)
- Carga de Script convinados
- Carga de Script Personalizados
Veamos con un ejemplo cada Caso:
1) Resolución Automática de dependencias
Vamos a realizar con el siguiente código nuestro análisis:
<html>
<title>ScriptLoader Demo 1</title>
<head>
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js"
type="text/javascript"></script>
<script type="text/javascript">
//Habilitar debugging
Sys.Debug = true;
//Resolver Dependencias
Sys.require([Sys.scripts.DataContext]);
</script>
</head>
<body>
</body>
</html>
Como podemos ver la referencia hacia la librería que contiene al ScriptLoader src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js , luego utilizamos Sys.require para y especificamos el nombre del componente cliente (o un arreglo de componentes cliente) que queremos cargar. Este control descarga todos los script necesarios en paralelo , permitiendo que la carga sea más rápida que lo normal (normalmente no hay descarga de script en paralelo), evitando bloquear la pagina mientras se renderiza. Cuando están cargados todos los script, se llama al método Sys.onready.
Al ejecutar el ejemplo 1 vamos a ver lo siguiente cuando analicemos el tráfico con Firebug:
Como ves, se estan cargando los script y sus correspondientes dependencias y en paralelo :)
2) Carga Perezosa de Script
Como no todo hay que cargarlo siempre al inicio, ya que por algún motivo, es posible que debido a la lógica de nuestro front-end. Veamos el Script:
<html>
<title>ScriptLoader Demo 2</title>
<head>
<script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
type="text/javascript"></script>
<script type="text/javascript">
Sys.Debug = true;
//Carga Demorada
function doSomething() {
alert('Carga Demorada');
Sys.require([Sys.scripts.DataContext]);
};
</script>
</head>
<body>
<input type="button" onclick="doSomething()" value="ClickMe!" />
</body>
</html>
En este caso, al momento de presionar el botón, se van a cargar los archivos :), mostrando el mismo resultado que la foto tomada con FireBug anteriormente.
3) Carga de Script Combinados
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
type="text/javascript"></script>
<script type="text/javascript">
Sys.Debug = true;
//Carga normal
function cargaNormal() {
Sys.require([Sys.scripts.Core]);
Sys.require([Sys.scripts.ComponentModel]);
Sys.require([Sys.scripts.Network]);
Sys.require([Sys.scripts.Serialization]);
Sys.require([Sys.scripts.History]);
Sys.require([Sys.scripts.Globalization]);
Sys.require([Sys.scripts.WebServices]);
}; //Script Combinados
function cargaCombinado() {
Sys.require([
Sys.scripts.Core,
Sys.scripts.ComponentModel,
Sys.scripts.Network,
Sys.scripts.Serialization,
Sys.scripts.History,
Sys.scripts.Globalization,
Sys.scripts.WebServices
]);
};
</script>
</head>
<body>
<input type="button" onclick="cargaNormal()" value="cargaNormal" />
<br />
<input type="button" onclick="cargaCombinado()" value="cargaCombinado" />
</body>
</html> Podemos darnos cuenta de la diferencia de la sentencia, en el primer caso son Sys.require independientes , en el segundo caso, que sería el de Script Combinados es solo un Sys.require que recibe una colección de componentes clientes.
Veamos la diferencia con FireBug:
Opción carga normal:
Opción Scripts Combinados
En este caso hay una pequeña reducción de tiempo (medio segundo), la mayoría de este tiempo es parte de resolver al servidor y obtener los archivos individuales.
4) Carga de Script Personalizados
Muchas aplicaciones basadas en Ajax tienen comportamientos que no se ejecutan al iniciar la página, por lo que no es necesario cargar todos los script de la página en un inicio, solo cuando se necesita, evitando el retrazo del render hasta que se carguen todos los scripts.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ScriptLoader Demo CustomScript</title>
<script src=http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js
type="text/javascript"></script>
<script type="text/javascript">
function Saludar() {
Sys.loadScripts(["MyScripts/Script1.js",
"MyScripts/Script2.js",
"MyScripts/Script3.js"],
function () {
Saludo1();
Saludo2();
Saludo3();
});
}
</script>
</head>
<body>
<input type="button" onclick="Saludar()" value="Saludar" />
<br />
</body>
</html>
En este caso tengo 3 Script que tienen una función que se llama Saludo1, Saludo2 y Saludo3 respectivamente, por ejemplo el código del Script1
 |
function Saludo1() { alert("Hola desde Script1.js!"); }
|
Ahora ejecutamos , presionamos el botón saludar y revisamos nuevamente en FireBug:
Existe la posiblidad tambien, que veremos más adelante, podemos especificar las dependecias de nuestros propios script, pero eso lo vamos a ver en otro post :)
Saludos!
Gonzalo
Hola!, te quiero invitar, a una charla en el Instituto Virginio Gómez, sede Concepción, el Viernes a las 11 de Junio , a las 17:00 horas. El tema será:
Titulo: “Técnicas Ninja de Optimización de Web & ASP.NET AJAX”
 | Resumen: En esta sesión revisaremos algunas reglas de Oro dentro de la Optimización Web /ASP.NET AJAX todo esto acompañado de muchas demos para examinar y discutir las mejoras conseguidas. Compresión HTTP, CSS Sprites , Script Combinados, el uso de CDN, Minificación de Script y CSS, así como también tips para optimización de Microsoft AJAX , todas técnicas que puedes poner en práctica para hacer volar tu Sitio Web |
Será una buena oportunidad para compartir experiencias sobre optimización de los front-end y revisar el camino a seguir para utilizar buenas prácticas en el tema.
PD:Como siempre y quieres charlas en tu Universidad o lugar de trabajo, con gusto voy :), solo nos ponemos de acuerdo.
Saludos,
Gonzalo
Hola!, quiero invitarte a un Webcast que voy a dar el próximo Miércoles 2 de Junio, a las 10:00 am Bogotá. – 11:00 am Chile – 17:00 am Madrid
Información general del Evento
Aprenda cómo Microsoft AJAX le permite crear fácilmente y utilizar los controles del Kit de Herramientas de Control AJAX en ambas Formas ASP.NET Web y aplicaciones ASP.NET MVC.
Aprenda sobre todas las nuevas características y mejoras en los controles del Kit de Herramienta de Control AJAX tal como el nuevo Script Loader de cliente y el control de DataView de cliente.
También observe cómo ASP.NET AJAX fue diseñado para trabajar uniformemente con jQuery, cómo puede crear controles ASP.NET Ajax directamente de jQuery y cómo puede utilizar la biblioteca jQuery en el código ASP.NET Ajax.
Conozca las nuevas características de Visual Studio 2010 y como crean en forma más productiva aplicaciones de Ajax.
Regístrate en:
https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032452574&EventCategory=4&culture=es-AR&CountryCode=AR
Nos vemos allá!!
Saludos,
Gonzalo
Más artículos
Página siguiente >