Los plugins para JQuery desarrollados por Microsoft ahora forman parte de los plugins oficiales para JQuery

El día de ayer Scott Guthrie anuncio en su blog que los plugin  jQuery Templates pluginjQuery Data Link plugin, y  jQuery Globalization plugin ahora forman parte de los plugin oficiales de Jquery lo cual reafirma las intenciones de Microsoft de seguir impulsando el famoso framework javascript y el ahora visto bueno de la Software Freedom Conservancy admitiendo estos plugin como parte del grupo de plugins oficiales de Jquery.

Por otro lado actualmente Microsoft ofrece soporte para Jquery y en el nuevo Visual Studio 2010 cuando creamos aplicaciones ASP.NET Web Forms and ASP.NET MVC por defecto vienen incluidas las librerías de Jquery.

Por mi parte pienso que Microsoft y el equipo de ASP.NET apunta en la dirección correcta y espero que sigan liberando nuevos plugins.

Artículos de Jquery en este blog.

Reciente vulnerabilidad en ASP.NET y como evitarla (por ahora)

Como algunos sabran recientemente fue descubierta una vulnerabilidad en ASP.NET que podría permitir que un atacante descargara archivos de nuestro servidor que puedan tener información delicada como el web.config,  a grandes rasgos la vulnerabilidad se produce cuando un atacante empieza a enviar texto cifrado a nuestro servidor y comienza  a recolectar información sobre los distintos mensajes de error que devuelve el servidor lo cual da pistas de como el texto enviado es descifrado y finalmente después de enviar las suficientes peticiones al servidor el atacante podría determinar como desencriptar los mensajes del servidor. Este fenómeno en criptografía se conoce como cryptographic oracles ya que el sistema devuelve respuestas parciales a peticiones que se le envían.

Aun la vulnerabilidad no se encuentra resuelta pero hay una manera muy sencilla de ser vulnerables y es habilitar en nuestro web.config el custom error y devolver siempre la misma pagina de error para todos los errores de manera de que nuestro servidor no de pistas al atacante enviando distintos errores para distintos textos cifrados enviados.
Seguir leyendo

Crear calendario con JQuery/ Create a Date Picker using JQuery

The purpose of this control is show up a calendar where the user can pick a date, all the jquery libreries  needed has been directly referenced from the Google CDN.

We can get and set the value of the control through the text property of the control and also we can change the calendar culture as we can see in the line datepicker($.datepicker.regional['es']).

El propósito de este control es mostrar un calendario donde el usuario puede elegir una fecha, todas las librerías jQuery necesarias se referencian desde el CDN de Google.

Podemos obtener y establecer el valor del control a través de la propiedad de text del control y también podemos cambiar la cultura de calendario como podemos ver en la línea datepicker($.datepicker.regional['es']).

The Control:

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”Calendar.ascx.cs” Inherits=”Calendar” %>

<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”

type=”text/javascript”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js”

type=”text/javascript”></script>

<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/i18n/jquery-ui-i18n.min.js”

type=”text/javascript”></script>

<script type=”text/javascript”>

$(function() {

$.datepicker.setDefaults($.datepicker.regional['']);

$(“#<%=datepicker1.ClientID %>”).datepicker($.datepicker.regional['es']);

});

</script>

<div>

<asp:Label ID=”lblFecha” runat=”server” Text=”Fecha: “></asp:Label>

<asp:TextBox ID=”datepicker1″ runat=”server”></asp:TextBox>

</div>

Code Behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class Calendar : System.Web.UI.UserControl

{

public string text

{

get { return datepicker1.Text ; }

set { datepicker1.Text = value; }

}

protected void Page_Load(object sender, EventArgs e)

{

}

}

The Page :

<%@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default”%>

<%@ Register src=”calendar.ascx” tagname=”calendar” tagprefix=”uc3″ %>

<!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 runat=”server”>

</head>

<body>

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”sp1″ runat =”server”>

</asp:ScriptManager>

<div>

<uc3:calendar ID =”calendar1″ runat =”server” />

</div>

</form>

</body>

</html>

You can download the code from here/ Puedes descargar el codigo desde aqui.

Efecto Page Curls usando JQuery

JQuery además de ayudarnos a hacer nuestras aplicaciones mas rápidas y ahorrarnos los postback en nuestros formularios Asp.Net , también nos puede ayudar a crear algunos efectos interesantes en nuestras páginas.  Para esto solo necesitamos el plugin para Jquery the-sexy-curls-jquery-plugin que pueden descargar de aquí.

El siguiente es un ejemplo que muestra lo fácil de usarlo.

<html xmlns=”http://www.w3.org/1999/xhtml”><head runat=”server”>

<script  type =”text/javascript”  src=”turn/jquery.min.js”>

</script><script type =”text/javascript”  src=”turn/jquery-ui.min.js”></script>

<script type =”text/javascript”  src=”turn/turn.js”></script><link rel=”stylesheet” href=”turn/turn.css”>

<script type=”text/javascript”>

$(document).ready(function () {        $(‘#target’).fold();    });

</script>
</head>

<body>

<form id=”form1″ runat=”server”>    <div>

<img id=”target” src=”turn/imagen.png” alt=”">          </div>

</form>

</body>

</html>

El ejemplo lo pueden descarga de aquí.

Plugin de Globalizacion para JQuery

Microsoft  sigue colaborando con jQuery, ya antes habían creado un plugin para realizar plantillas vinculadas a datos en JQuery y mas recientemente han creado un plugin para establecer parámetros de Globalización de nuestra aplicación web desde Jquery de esta manera podemos adaptar nuestras paginas rápidamente a la cultura del usuario, podemos cambiar formatos de fechas, monedas, etc , además incluye 350 culturas . Por lo que vemos Microsoft sigue apoyando de manera activa a JQuery por lo que es una clara invitación a los desarrolladores web de ASP.NET a empezar usar este cada vez mas popular framework JavaScript.

Para mas información sobre como funciona el plugin y descargar algunos ejemplo entren al siguiente post del blog de Scott Guthrie.

DNJ un Framework JQuery para .Net

DNJ  es un Framework JQuery para desarrollo de aplicaciones ASP .Net el mismo trata de hacernos la vida mas facil a la hora realizar desarrollos basados en el uso constante de JQuery y Ajax, por medio de DNJ podemos realizar llamadas a métodos de manera remota y provee muchas otras funciones  para extender el comportamiento Ajax de nuestros controles entre ello la posibilidad de convertir todos nuestros controles web en controles ajax.

Por otra parte DNJ posee una serie de controles JQuery UI que ademas son wysiwyg y entre los cuales se encuentran Tabs, accordion, Datepicker, slider y themeswitcher.

En mi opinión es una buena alternativa para aplicaciones cargadas con mucho logica del lado del cliente y que aprovecha las bondades de JSON y JQuery.

Para visitar la pagina de DNJ pueden hacer click aquí donde además de descargar el Framework DNJ tendrán acceso a la documentación.

¿Por qué debo empezar a usar JQuery?

Para los que no lo saben, JQuery es una librería javascript que permite de una manera bastante rápida y sencilla acceder y manipular el HTML DOM. Pero porque deberíamos de empezar a usar JQuery? pues aquí van algunas razones:

-Primero: podemos manipular nuestro DOM con menos código, es decir menos código que hace mas, obviamente además de facilitarnos la manipulación del DOM con consultas más sencillas conllevara a páginas más ligeras.

Por Ejemplo

$(‘#txtName’); En lugar de document.getElementById(‘txtName’);

-Segundo: soporta JSON por lo que nos permite realizar aplicaciones AJAX ligeras y sencillas a través del uso de funciones que nos permiten obtener datos del servidor codificados en JSON sin necesidad de refrescar la pagina usando una petición Get HTTPRequest.
Las siguientes son algunas de las funciones que  nos otorga JQuery para trabajar con AJAX.

Low-Level Interface Perform an asynchronous HTTP (Ajax) request.

Global Ajax Event Handlers Register a handler to be called when Ajax requests complete. This is an Ajax Event.

Global Ajax Event Handlers Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.

Global Ajax Event Handlers Show a message before an Ajax request is sent.

Low-Level Interface Set default values for future Ajax requests.

Global Ajax Event Handlers Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

Global Ajax Event Handlers Hide a loading message after all the Ajax requests have stopped.

Global Ajax Event Handlers Show a message when an Ajax request completes successfully.

Shorthand Methods Load data from the server using a HTTP GET request.

Shorthand Methods Load JSON-encoded data from the server using a GET HTTP request.

Shorthand Methods Load a JavaScript file from the server using a GET HTTP request, then execute it.

Shorthand Methods Load data from the server and place the returned HTML into the matched element.

Collection ManipulationFormsHelper Functions Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.

Shorthand Methods Load data from the server using a HTTP POST request.

FormsHelper Functions Encode a set of form elements as a string for submission.

FormsHelper Functions Encode a set of form elements as an array of names and values.

-Tercero: nos permite separar nuestro código javascript de nuestro HTML

Por ejemplo podemos asignarle una función al evento click de un botón de la siguiente manera:

<script src=”_scripts/jquery-1.3.2.min.js” type=”text/javascript”></script>

<script language=”javascript”>

$(document).ready(function() {

$(‘#btnSubmit’).click(function() {

alert(‘Submit Clicked!’);

});

});

</script>

en Lugar de:

<input id=”btnSubmit” onclick=”javscript:Save()” type=”button” value=”button” />
-Cuarto: JQuery es ampliamente usado y soportado por lo que es multinavegador, existen muchos plugin disponibles, posee soporte Intellisense desde Visual Studio 2008 y se puede obtener desde los CDN de google  usando:

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>

<script type=”text/javascript”>

google.load(“jquery”, “1″);

google.setOnLoadCallback(function() {

alert(“Welcome to Google Hosted JQuery!!”);

});

</script>
Si te convenciste de usar JQuery este es el  link de su site oficial desde el que puedes tener acceso a la documentación, ejemplos, plugin, etc.

Herramientas útiles que nos ayudaran a mejorar el rendimiento de nuestras paginas web.

ASP.NET ViewState Helper

Esta herramienta nos permite monitorear el tamaño del viewstate de nuestra pagina y ver en detalle el peso de cada componente, ya sabemos los dolores de cabeza que pueden producir el tamaño del viewstate en aplicaciones ASP.NET webForms, sobre todo si tenemos muchos controles en nuestra paginas o control como un gridView o datagrid, con esta herramienta podremos ir viendo como se comporta el viewstate y de esa manera tratar de mantenerlo controlado, ademas es muy fácil de instalar y de usar.

Pueden descargarlo de aqui.


JS Minifier

Es una pagina web bastante básica que no permite eliminar de nuestro código javascript todo aquello que no es necesario, lo he probado y generalmente suele reducir el tamaño de los js entre el 30 y el 40 %, esta basado en la aplicacion JSMin de Douglas Crockford.

Puedes empezar a usarlo haciendo click aquí.


Fiddler

Es un proxy de depuracion web que registra todo el trafico HTTP o HTTPS, con esta herramienta podemos inspeccionar dicho trafico obteniendo estadisticas sobre tiempo de carga de paginas, js, imagines, etc… tambien podemos ver informacion sobre la cantidad de bytes enviados y recibidos en cada petición, encabezados, html devuelto y mucho mas.

Pueden descargarlo aquí.


Cuando usar ASP.NET MVC

El framework ASP.NET MVC fue creado por Microsoft con la idea de proveer a los desarrolladores de aplicaciones web mayor control sobre el html, crear URLs intuitivas de manera mas potente, lo cual ayuda a posicionar mejor las paginas asp.net en los motores de búsqueda, mantener el SoC (separation of concerns) de una manera mas clara y limpia de manera que las aplicaciones sean mas fáciles de mantener y extenderse,  y por ultimo y uno de los aspectos mas importante el ASP.NET MVC nos permite llevar un desarrollo guiado por pruebas (for test-driven development) facilitándonos la creación y ejecución de las pruebas unitarias.

Ahora bien la idea de ASP.NET MVC no es ser un sustituto para las tradicionales aplicaciones basadas en web forms sino aportarnos otra opción mas al momento de realizar nuestros proyectos web por lo tanto la única manera de poder decidirnos entre uno y otro es analizar sus ventajas y desventajas y en base a eso tomar nuestra decisión.
Seguir leyendo