Me gusta estar atento a las novedades que van apareciendo el lenguajes y frameworks que nos ayudan a mejorar la forma de hacer las cosas. Lamentablemente, en este mundo tan cambiante no es fácil estar al día en todo, y hay muchas veces que sigo haciendo cosas como siempre aunque existan fórmulas más modernas y mejores para conseguirlo.
Un ejemplo lo he encontrado hace poco, cuando, trabajando con JavaScript, una vez más he tenido necesidad de parsear la URL de la página actual en busca de los valores de los parámetros suministrados en la query string al cargar una página. Lo habitual en estos casos era tirar de Google o StackOverflow y acabar implementado una función parecida a la siguiente:
function getParameterValue(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
Casualmente, en este caso recordé haber leído de pasada sobre la existencia de un "nuevo" objeto de JavaScript que actualmente nos permite hacerlo de forma más sencilla, así que aproveché para ponerme un poco al día al respecto ;)
Publicado por José M. Aguilar a las 8:05 a. m.
Etiquetas: javascript, trucos
A veces no es necesario usar lenguajes esotéricos para crear un código que nadie sea capaz de entender a simple vista... de hecho, lo hacemos muy frecuentemente en nuestro día a día 😉. Basta nombrar inapropiadamente unas cuantas variables, acoplar y desacoplar sin criterio o usar una mala indentación para que nuestro código ya venga "ofuscado" de serie, sin usar ninguna herramienta externa.
Sin embargo hay otro nivel de maldad, que consiste en el abuso de la flexibilidad de sintaxis en algunos lenguajes para construir expresiones diabólicamente enrevesadas. Hace poco me topé por casualidad con un buen ejemplo de ello en JavaScript, un código que, a simple vista, es imposible de entender:
// ¿Qué retorna esta expresión?
(_$=($,_=[]+[])=>$?_$($>>+!![],($&+!![])+_):_)(255)
Obviamente, podemos copiarla y pegarla en la consola de nuestro navegador, y rápidamente veremos de qué se trata. Sin embargo, me pareció interesante dedicar unos minutos a intentar comprender el código, así que vamos a ir troceando y refactorizando esta expresión ilegible hasta convertirla en algo que, al menos, podamos digerir.
En este post vamos a ver algunas técnicas muy básicas que nos permitirán ejecutar un código u otro en el lado cliente de aplicaciones ASP.NET MVC (o ASP.NET en general) en función del modo de compilación.
También presentamos en aquél momento dos conceptos que resultaban básicos para Knockout.js:
- El binding, que es el mecanismo que permite mapear datos y acciones de la vista a propiedades y métodos del View-Model.
- Las propiedades observables, que son aquellas a las que el framework realiza seguimiento de cambios con objeto de actualizar, cuando sus valores cambien, los elementos que dependan de ellas.
Blogger invitado
Óscar Sotorrío Sánchez
Desarrollador independiente, MCP C#
Eterno aprendiz en esto de las tecnologías .NET y en especial con ASP.NET. Admirador de la filosofía de Internet y entusiasta de los nuevos modelos de negocio que rigen este mundillo. Blog: oscarsotorrio.comEn este artículo vamos a comenzar por identificar en el código cuándo se producen los closures para luego ver qué tienen de especial. Después pasaremos a ver algunos comportamientos que nos servirán para terminar completamente de entender cómo funcionan. Para finalizar, veremos un par de ejemplos de aplicaciones prácticas.
Se trata de la obra más reciente del maestro José Manuel Alarcón, nacida con un ambicioso objetivo: ser útil tanto para desarrolladores experimentados que buscan reforzar y ampliar sus conocimientos en Javascript, como para aquellos que desean comenzar trabajar con el lenguaje sin haber tenido contacto previo con el mismo.
Y desde luego, nadie mejor que el autor para conseguirlo: dilatada y reconocida experiencia en el mundo web, en Javascript (publicó su primer libro sobre el tema hace más de diez años), y una forma de escribir muy amena y cercana que hace que las trescientas ochenta páginas del libro se lean con mucha facilidad.
El índice completo podéis consultarlo en Scribd, pero, a grandes rasgos, el libro está dividido en los siguientes bloques:
- Una amplia introducción al lenguaje, en cuyos primeros siete primeros capítulos se comienza a presentar Javascript desde cero, introduciendo ordenada y progresivamente conceptos como las variables, tipos de datos, funciones, operadores, estructuras de control de flujo, uso de matrices, textos, fechas o temporizadores, siempre usando ejemplos simples y directos.
A pesar de que esta primera parte se destina sobre todo a los programadores noveles, me la he zampado por completo y puedo asegurar que he aprendido bastante con ella.
El capítulo 8, que cerraría este bloque, cambia el ritmo de forma considerable entrando en aspectos avanzados, como la definición de objetos, constructores, el uso del siempre intrigante “this”, la herencia basada en prototipos, closures, y ocultación de miembros, entre otros interesantes asuntos.
- Una vez conocido el lenguaje Javascript, a continuación se nos muestra cómo utilizarlo en el contexto de un navegador, realizando un completo recorrido por el DOM y las técnicas que nos permiten manipularlo de forma directa, sin usar jQuery ni frameworks similares. Aprenderemos a localizar elementos de la página, recorrerlos, realizar consultas dinámicas, y a modificar el contenido de la página en tiempo de ejecución.
También se estudia en profundidad el tratamiento de eventos, su funcionamiento interno, los distintos modelos soportados por los navegadores, y cómo implementarlos de forma eficiente, por supuesto sin necesidad de emplear marcos de trabajo externos. Es, además, una referencia completísima de los eventos disponibles para cada tipo de elemento y la forma de procesarlos sin caer en particularidades de navegadores concretos.
Para cerrar este bloque, se dedica un capítulo exclusivamente a hablar de Ajax, el uso del objetoXMLHttpRequest
para enviar y recibir información y los problemas más habituales que surgen cuando usamos esta técnica de intercambio de datos entre cliente y servidor. También se describen soluciones para la comunicación cross-site como JSONP (JSON with Padding), estudiado muy en profundidad, y CORS (Cross-Origin Resource Sharing).
- Un último bloque muy orientado a la práctica, en el que se describen errores más comunes y la forma de trazar y depurar aplicaciones Javascript utilizando herramientas integradas en los navegadores, donde encontramos mecanismos similares a los que estamos acostumbrados en entornos de desarrollo como logs, profilers o breakpoints.
- Por último, se dedica un capítulo en exclusiva para ver cómo lidiar con las misteriosas expresiones regulares, donde se demuestra que con la base adecuada no son tan fieras como parecen ;-)
Con toda seguridad, un must have para todos los que aún no conocen Javascript y desean entrar por la puerta grande, y también para todos los que ya habíamos entrado hace años pero nos hemos ido dejando algunos detalles por el camino ;-)
Publicado en Variable not found.
Y Microsoft ha movido ficha. Hace un par de días, S. Somasesegar, vicepresidente corporativo de la división de desarrollo de la casa, presentó un nuevo lenguaje que pretende acabar con las tradicionales carencias de Javascript, al que han denominado TypeScript. Detrás de este nuevo “invento” está el mismísimo Anders Hejlberg, padre de C# y otras maravillas, que ya sabíamos hace tiempo que andaba liado con algo relacionado con Javascript.
Publicado por José M. Aguilar a las 12:07 p. m.
Etiquetas: desarrollo, javascript, novedades, typescript
Publicado por José M. Aguilar a las 9:45 a. m.
Etiquetas: desarrollo, javascript, knockout, patrones
.Net
- Mono in 2011
Miguel de Icaza
Asp.net
- How to combine a Worker Role with a MVC4 Web Role into a single instance
Liam Cavanagh - ASP.NET MVC + Selenium + IISExpress
Stephen Walther - Model Binding with Dropdown List in ASP.NET 4.5
Abhijit Jana - Knockout 2.0.0 released
Steve Sanderson - Free eBook: OWASP Top 10 for .NET developers
Troy Hunt - Solving Duplicate Content with Distinct URLs Issue in ASP.NET MVC
Imran Baloch's - New Request validation features in ASP.Net 4.5
K. G. Sreeju Nair - Using CORS to access ASP.NET services across domains
Dave Ward - HttpRequestBase vs HttpRequest
Eduard Tomás - Debugging Application_Start and Module Initialization with IIS and Visual Studio
Rick Strahl - Rotate an ASP.NET Image Control using HTML 5 Canvas
Suprotim Agarwal - Retoques a MVC y Razor para proyectos grandes–Una recomendación
Lucas Ontivero - High-Performance ASP.NET Caching
Peter Vogel - Microsoft blogging platform gains 33% performance boost after adopting RequestReduce
Matt Wrocks
Azure / Cloud
- Azure Monitor for Windows Phone 7 is out!
Ibon Landa - Libro gratuito sobre Windows Azure (Parte IV): Diseño y herramientas
CampusMVP - SQL Azure Q4 2011 Service Release
Ibon Landa
Data access
- MongoDB Best Practices
Inés Sombra - Inserciones masivas en SQL Server CE vs SQL Server vs MongoDb (y II)
Josué Yeray - Raven DB VI, La hora de las consultas…
Unai Zorrilla
Html/Css/Javascript
- JavaScript as a First Language
John Resig - The output element in HTML5
Richard Clark - Excssive, herramienta online para comprimir archivos CSS
Zach Will (Vía desarrolloweb.com) - Meet the CSS4 selectors
Catalin Rosu - JavaScript for C# developers: calling functions and the ‘this’ variable
Julian M. Bucknall - Top 10 “Must Follow” JavaScript Best Practices
Salman Siddiqui - Online Javascript Compression Tool
BrightBit - The rise and rise of JavaScript
Dan North - Using the JavaScript Prototype Property to Structure and Extend Code
Dan Wahlin's - Multiple Attribute Values
Chris Coyier - The Seven Deadly Sins Of JavaScript Implementation
Christian Heilmann (vía @alegrebandolero)
Visual Studio/Complementos
- C# + ReSharper = Awesome: Tip #5 – Replace Constructor with Factory Method
Alvin Ashcraft - ReSharper 6.1, dotCover 1.2 and dotTrace 4.5.2 Performance Released
Hadi Hariri - C# + ReSharper = Awesome: Tip #4 – Convert Abstract Class to Interface
Alvin Ashcraft - C# + ReSharper = Awesome: Tip #3 – Convert Into LINQ Expression
Alvin Ashcraft
Publicado en Variable not found
Blogger invitado
Óscar Sotorrío Sánchez
Desarrollador independiente, MCP C#
Eterno aprendiz en esto de las tecnologías .NET y en especial con ASP.NET. Admirador de la filosofía de Internet y entusiasta de los nuevos modelos de negocio que rigen este mundillo.Blog: oscarsotorrio.com
file
(el que usamos para hacer los uploads) de un formulario, por ejemplo, para evitar que el usuario envíe un archivo que por cualquier motivo no deba ser subido al servidor.O dicho de otra forma, imaginemos la siguiente porción de un formulario en pantalla, que podría ser generada con el código que podéis ver justo a continuación:
<label for="archivo">Archivo a enviar:</label> <input type="file" id="archivo" name="archivo" /> <input type="button" onclick="limpiarInputFile('archivo');" value="Limpiar" />
Y la pregunta en este momento sería, ¿qué código deberíamos implementar en la función
limpiarInputFile()
que estamos utilizando en el evento onclick
si quisiéramos limpiar o inicializar el contenido del campo archivo
?Aunque de forma intuitiva podría parecer que basta con establecer el valor del campo a una cadena vacía, una prueba rápida nos demostrará que esto no es posible. Desde hace ya tiempo, por motivos de seguridad, los navegadores no permiten el acceso de escritura a la propiedad value en los campos de envío de archivos, por lo que nos encontramos una vía sin salida. Esto lo vemos con el siguiente código, utilizando jQuery:
function limpiarInputfile(id) {
var input = $('#' + id);
var nuevoValor = "c:\\windows\\system32\\mspaint.exe";
alert(input.val()); // Muestra "C:\Datos.dat"
input.val(nuevoValor); // Establecemos un nuevo valor
alert(input.val()); // ¡¡Muestra "C:\Datos.dat"!!
}
Como vemos, somos vilmente ignorados cuando intentamos establecerle un valor.
Pues bien, una posible solución consiste en eliminar del DOM el elemento
<input type="file">
y volver a crearlo justo después en el mismo lugar. He visto por ahí varias implementaciones que obligaban a introducir este elemento dentro de un contenedor, pero he creado otra que creo que es más sencilla e igual de efectiva: function limpiarInputfile(id) {
var input = $('#' + id);
var clon = input.clone(); // Creamos un clon del elemento original
input.replaceWith(clon); // Y sustituimos el original por el clon
}
Y eso es todo :-). Observad que lo único que hacemos es crean un clon del elemento original cuyo
value
por supuesto estará en blanco (recordad que esta propiedad no se puede establecer), y justo a continuación eliminamos el elemento original sustituyéndolo por este clon.Si queremos generalizar este código e implementar esta funcionalidad de forma no intrusiva podríamos hacer lo siguiente:
$(function () {
$("input[type=file]").after(
"<input type='button' class='limpiar-inputfile' value='Limpiar'>"
);
$(".limpiar-inputfile").click(function () {
var input = $(this).prev("input[type=file]");
var clon = input.clone();
input.replaceWith(clon);
return false;
});
});
Este código añade automáticamente un botón “Limpiar” a continuación de todos los
<input type=file>
de la página, implementando en el manejador del evento click
la lógica de inicialización del componente que hemos visto antes. De esta forma, sólo se introducirá en la página el botón de limpiado cuando estén activados los scripts, que es en el único momento en que su ejecución tendrá sentido con la solución propuesta.Espero que os sea de utilidad.
Publicado en: Variable not found.
Blogger invitado
Óscar Sotorrío Sánchez
Senior Analyst en Avanade, MCP C#
Eterno aprendiz en esto de las tecnologías .NET y en especial con ASP.NET. Admirador de la filosofía de Internet y entusiasta de los nuevos modelos de negocio que rigen este mundillo.Blog: oscarsotorrio.com
En primer lugar vamos a dar una definición más o menos formal y después veremos algunos ejemplos que explicarán mejor esta definición:
"Los objetos de JavaScript son colecciones de propiedades cada una con un nombre y un valor. Este valor puede ser otro objeto, por lo tanto, podemos decir también que los objetos JavaScript son contenedores para otros objetos JavaScript"
Pues bien, resulta que IE9 trae de fábrica una herramienta que nos permite reformatear el código script de una página para hacerlo más legible. Yo no lo conocía, así que aquí lo pongo por si puede ser de utilidad para alguien más.
Lo único que hay que hacer es acceder a la pestaña “Script” de las Developer Tools, desplegar el menú de herramientas y marcar la opción “Formato Javascript”:
Y ahí lo tenemos:
Obviamente no hace milagros; si se han utilizado técnicas de ofuscación o se han modificado los nombres de funciones y variables vamos a seguir teniéndolos igual, pero algo es algo…
Publicado en: Variable not found.
Publicado por José M. Aguilar a las 9:29 a. m.
Etiquetas: depuración, desarrollo, ie, javascript, trucos
Json
, también definida en dicho espacio de nombres, que podemos utilizar para codificar objetos en formato JSON (JavaScript Object Notation) y viceversa, crear instancias de objetos partiendo de un texto JSON.El primero de los sentidos, CLR—>JSON, no es algo que no pudiéramos hacer antes utilizando los serializadores Javascript, pero este componente nos lo pone algo más fácil. Por ejemplo, dada la siguiente clase del Modelo:
… y un controlador en el que suministramos a la vista una instancia de dicha clase:
En la Vista podríamos introducir un código como el siguiente para volcar sobre la salida la representación JSON del objeto del modelo. Observad que hasta ahora para conseguir lo mismo teníamos que escribir bastante más código:
Fijaos también que el resultado de
Json.Encode
(bueno, y la alternativa anterior también), debemos pasarlo por una llamada a Html.Raw()
para evitar que sea codificado a HTML antes de enviarlo al cliente. En cualquier caso, el resultado puede ser asignado directamente a una variable, puesto que el marcado generado es la representación JSON del objeto suministrado listo para su uso, como puede observarse en el resultado de procesar la vista anterior:Por otra parte, también podemos utilizar la clase
Json
para hacer la conversión inversa, es decir, construir un objeto del CLR desde un string
que representa un objeto codificado en JSON. Como en el caso anterior, también podíamos utilizar JavascriptSerializer
para conseguirlo, pero ahora podemos hacerlo más rápidamente:Publicado en: Variable not found.
Publicado por José M. Aguilar a las 11:32 a. m.
Etiquetas: asp.net, aspnetmvc, desarrollo, javascript
Resulta que estoy metido en un proyecto colaborando con un equipo de trabajo que está desarrollando un portal web con esa tecnología (!), y me han encargado la creación de unas herramientas ajaxificadas dentro del mismo.
Aunque pueda parecer lo contrario, las aplicaciones desarrolladas con las vetustas (pero aún vivas) páginas activas de servidor (ASP) pueden aprovechar toda la potencia de las librerías de script de última generación, como la maravillosa jQuery. Vamos a ver lo sencillo que resulta tanto implementar un servicio JSON como consumirlo desde una página ASP.
El lado servidor
El servicio JSON lo implementaremos en un archivo al que llamaremos, por ejemplo, JsonObtenerProductos.asp, cuyo código podría ser como el siguiente:<!--#INCLUDE FILE="Includes\Functions.asp" -->
<%
Dim categoryId, Rs, count
Response.Expires = -1
If Not UserLogged() or Request("categoryId")="" Then
Response.End
End If
categoryId = Cint(Request("categoryId"))
OpenDatabase()
Set Rs = GetProductsByCategoryRecordset(categoryId)
Response.ContentType = "application/json"
Response.Write "{"
Response.Write " ""datos"": ["
count = 0
While Not Rs.Eof
Dim id, name, desc
id = Rs("id")
name = Rs("name")
desc = Rs("desc")
count = count + 1
If count > 1 Then
Response.Write ", "
End If
Response.Write "{ "
Response.Write " ""productId"": " & id & ", "
Response.Write " ""productName"": """ & name & """, "
Response.Write " ""productDesc"": """ & desc & """"
Response.Write "}"
Rs.MoveNext
Wend
Response.Write " ]"
Response.Write "}"
Rs.Close
CloseDatabase()
%>
Como se observa, se establece el tipo de contenido a “application/json”, y a continuación se envía al cliente un objeto en formato JSON, en este caso un array de objetos construidos a partir de la información obtenida desde un RecordSet.
Así, una llamada al servicio mediante la petición GET /JsonObtenerProductos.asp?categoryId=3 podría retornar el siguiente resultado:
{
"datos":
[
{ "productId": 1, "productName": "Producto 1", "productDesc": "Descripción 1"},
{ "productId": 2, "productName": "Producto 2", "productDesc": "Descripción 2"},
{ "productId": 3, "productName": "Producto 3", "productDesc": "Descripción 3"}
]
}
Se puede entender a simple vista; se trata de una serie de objetos, separados por comas, en cuyo interior se definen cada una de sus propiedades con su correspondiente valor. Fijaos que el mismo nombre de la propiedad va entrecomillado.
El lado cliente
Desde la página .asp que consumirá el servicio, como siempre, lo primero es referenciar la librería jQuery en la página, así:<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
A continuación, introducimos en el marcado de la página el siguiente código, que muestra un desplegable con categorías de productos, cuyo cambio provocará la llamada al servidor, y reserva un bloque
<div>
para mostrar el resultado:<select id="categories" onchange="reloadProducts()">
<option value="1">Electrodomésticos</option>
<option value="2">Informática</option>
<option value="3">Cocina</option>
...
</select>
<div id="result">
</div>
El código de la función
reloadProducts()
es el mostrado a continuación. Utiliza el método getJSON()
de jQuery para realizar la llamada Ajax, suministrándole como parámetro la categoría seleccionada en el desplegable en forma de objeto anónimo.<script type="text/javascript">
function reloadProducts() {
$.getJSON(
"JsonObtenerProductos.asp", // URL del servicio
{ categoryId: $("#categories").val() }, // Parámetros
function(data) { // Función callback
var elem = $("#result");elem.empty(); // Limpiamos el contenedor
var s = "<ul>";
$.each(data.datos, function(i, item) {
s += "<li>" + item.productName + "</li>";
});
s += "</ul>";
elem.html(s); // Insertamos la lista en el contenedor
});
}
</script>
En la función callback, invocada por jQuery cuando la llamada Ajax ha sido completada con éxito, recibimos en el parámetro “data” los datos obtenidos desde el servidor, en nuestro caso un array de objetos.
Tras limpiar el
<div>
donde depositaremos la información, recorremos con $.each()
el array de objetos data.datos
para crear una lista de productos, que insertamos a continuación en el interior del contenedor.Observad que en el interior del bucle estamos accediendo directamente a la propiedad “productName” del elemento.Y voila! Con esto tendríamos listo un sistema completo de carga asíncrona de elementos utilizando ASP y jQuery. Pero no sólo eso, podríamos utilizar la misma técnica para realizar actualizaciones de zonas de página definidas en archivos .asp independientes, o aprovechar la potencia de plugins y librerías adicionales para mejorar la experiencia de usuario de nuestros sistemas.
Y es que ASP todavía se utiliza bastante y, aunque se trate de una tecnología obsoleta, puede resultar totalmente válida para crear aplicaciones actuales desde el punto de vista de interfaces de usuario e interacción con el servidor, utilizando librerías de scripts de última hornada.
Publicado en: Variable not found.
Hey, ¡estoy en twitter!
Por ejemplo, si un servidor recibe esta solicitud:
GET / HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, (...omitido...), */*
Referer: http://www.google.es/search?hl=es&rls=ig&q=variable&btnG=Buscar&meta=&aq=f&oq=
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; (...omitido...) )
Accept-Language: es
Accept-Encoding: gzip, deflate
Host: www.variablenotfound.com
Connection: Keep-Alive
analizando el campo Referer se puede determinar de forma muy sencilla que se trata de un usuario que proviene de Google, y que estaba buscando el término “variable”. Esta característica aporta una información, que aunque no es demasiado fiable (se puede alterar y desactivar muy fácilmente), se utiliza con mucha frecuencia con fines estadísticos, o para adecuar el contenido de la página a las intenciones del usuario.
Sin embargo, como se trata de una característica manejada directamente por el navegador, podemos encontrarnos con que no todos actúan de la misma manera... o en otras palabras, es Internet Explorer es el que actúa de forma diferente al resto ;-)
Si la visita a nuestra página se produce como consecuencia de la ejecución de un script que ha modificado dinámicamente el
location.href
, o ha invocado a location.replace
, Internet Explorer saltará a la nueva dirección, pero no enviará el Referer en los encabezados de la petición, por lo que en el punto de destino no se podrá conocer el origen de la misma.Por tanto, un código como el siguiente hará que la página editar.asp no pueda conocer desde dónde se le ha referenciado:
<input type="button" value="editar" onclick="location.href='editar.asp';">
Dado que Microsoft todavía está considerando modificar este comportamiento, hay que darle un poco las vueltas para conseguirlo provocando el salto hacia la página de destino sin utilizar los mecanismos citados anteriormente.
Una forma muy ingeniosa que he encontrado se basa en crear dinámicamente un tag
<a>
con su correspondiente href
establecido, y simular la pulsación del mismo invocando al evento click:function navigateWithReferrer(url) {
var fakeLink = document.createElement("a");
if (typeof (fakeLink.click) == 'undefined')
location.href = url;
else {
fakeLink.href = url;
document.body.appendChild(fakeLink);
fakeLink.click();
}
}
Visto en: Velocity Reviews
Publicado en: Variable not found
Publicado por José M. Aguilar a las 9:09 a. m.
Etiquetas: asp.net, desarrollo, javascript, scripting, trucos, web