Juanma Santoyo

Animar transformaciones en WPF con el método BeginAnimation.

Juanma — Tue, 06 Jul 2010 22:17:31 +0000

Me preguntaron hace poco cómo animar elementos en Microsoft Surface. En esencia se haría como en cualquier entorno basado en WPF.

Hay varias formas de animar, pero quizás una de las más sencilla y potente sea la animación de transformaciones con el método BeginAnimation.

Las transformaciones.

En WPF existen varios tipos de transformaciones:

RotateTransform. Cambia la orientación de un elemento.
ScaleTransform. Cambia el tamaño de un elemento.
TranslateTransform. Cambia la posición de un elemento.
TransformGroup. Es un tipo de transformación especial, ya que consiste en una combinación de las tres anteriores.

Animar transformaciones.

La idea es simple: Una animación consiste en modificar progresivamente el valor de una propiedad durante un periodo de tiempo. En principio, se puede animar cualquier propiedad de dependencia del API de WPF.

Concretamente, las transformaciones usan propiedades de dependencia para modificar el aspecto del elemento en el que se aplican; así que si aplicamos una animación sobre una propiedad de una transformación de cualquier tipo, el resultado será una animación sobre el elemento.

El código para aplicar una transformación es sencillo. Se puede aplicar desde XAML o desde C#, pero en lo personal prefiero hacerlo en XAML:

Fijaos que al usar el nodo “TransformGroup” podemos aplicar más de una transformación. De no usarlo sólo podríamos aplicar una, ya que el nodo “Image.RenderTransform” sólo admite un nodo hijo. Notad también que las transformaciones se aplican desde la última a la primera. No es lo mismo mover y rotar, que rotar y mover.

Las animaciones y el método BeginAnimation.

A nivel práctico, una animación es un objeto con una serie de propiedades configuradas, como por ejemplo la duración de la animación, la aceleración, el valor inicial y final de la propiedad, etc. Dependiendo del tipo de dato que queramos animar, el objeto de animación cambia. No es lo mismo animar un color (ColorAnimation) que una orientación (DoubleAnimation). Se pueden ver todos los tipos de animación posible en la especificación de la clase madre: AnimationTimeLine.

Para aplicar una animación sobre una transformación, contamos con un potente aliado: el método BeginAnimation, presente en todas las transformaciones. Al método BeginAnimation se le pasan dos parámetros: la propiedad de dependencia a animar, y la animación. La animación deberemos construirla en base a lo que queremos animar, la propiedad de dependencia es una propiedad estática de la clase a la que pertenece el elemento que queremos animar. Por ejemplo, si queremos animar el ángulo de un RotateTransform, tendremos una propiedad estática “RotateTransform.AngleProperty“. Más fácil con un poco de código C#:

	DoubleAnimation animacion = new DoubleAnimation();

	animacion.To = 180;
	animacion.Duration = new Duration(TimeSpan.FromMilliseconds(1000));

	Rotacion.BeginAnimation(RotateTransform.AngleProperty, animacion);

Es todo por el momento.

Y en realidad no hay mucho más que decir sobre animaciones. Sólo destacar que, como imagináis, el objeto animación tiene eventos que informarán del estado del proceso, y que no son bloqueantes (es decir, mientras una animación se ejecuta, el flujo del programa no se detiene, por lo que necesitan una gestión asíncrona). También destacar que la animación se iniciará en el instante en que se ejecute el método BeginAnimation.

Si queréis aprender sobre animaciones más complejas, os recomiendo que miréis el objeto StoryBoard.

Vídeo de Rent a Car Surface by Bizzit

Juanma — Tue, 06 Jul 2010 21:28:47 +0000

Ya he hablado en mi blog algúna vez sobre la demo para Microsoft Surface que estábamos realizando en Bizzit.

La aplicación fue principalmente desarrollada por un servidor (me refiero al que escribe, no a un servidor de aplicaciones ), y fue un reto muy bonito. La verdad es que ha sido una experiencia profesional muy interesante y divertida.

Bueno, al tema: Mi compañero en esta aventura, Carlos García; ha realizado un vídeo donde se puede ver cómo es la aplicación y su funcionamiento. Me llena de orgullo y satisfacción compartirlo con todos vosotros:

Este video fue agregado usando YouTuber, plugin desarrollado por Roy Tanck. Se requiere Adobe Flash Player para visualizarlo.

Ocultar el texto de un input submit

Juanma — Fri, 11 Jun 2010 05:17:35 +0000

Ayer me surgió la necesidad de ocultar el texto de un Input Submit con CSS.

¿Es una locura?. No, porque mi botón tenía una imagen de fondo lo suficientemente descriptiva como para no tener texto.

Una opción podría ser dejar el atributo value vacío, pero necesitaba el value para poder discriminar después en el servidor (tenía más de un botón, y necesitaba saber cual se había pulsado). Además, siendo estrictos, el value no debería ser la solución a un problema gráfico.

En definitiva, la solución que encontré en esta entrada y que posteriormente apliqué consiste en este código CSS:

	input.hidden_text
	{
		/* Imagen de fondo */
		background: transparent url(“imagen.jpg”) left center no-repeat;   

		/* Tamaño de la imagen */
		width: 20px;
		height: 20px;

		text-indent: -9999px;
		border: none;
		color: transparent;

		/* Parche para IE  */
		text-transform: capitalize;
	}

Espero que os resulte útil.

Charla sobre Microsoft Surface

Juanma — Fri, 28 May 2010 15:15:12 +0000

Ayer dí una charla sobre Microsoft Surface en el centro de Innovación de Microsoft de Palma para el grupo de desarrolladores de .Net en Baleares.

Hablamos un poco de todo lo que implica la Surface y el desarrollo de aplicaciones para este dispositivo. Fue una experiencia muy gratificante.

Dejo la descarga del Power Point que redacté para la ocasión, por si os interesa.

Microsoft Surface.

ScatterViewItem invisibles en Microsoft Surface

Juanma — Tue, 18 May 2010 06:00:57 +0000

Cuando empecé a desarrollar para Microsoft Surface, me di cuenta de tres cosas:

El control ScatterViewItem es la base de toda aplicación.
La mayoría de las veces, no queremos que el ScatterViewItem tenga la apariencia tan horrible que tiene por defecto, es más, nos interesará que sea “invisible”.
El control ScatterViewItem no proporciona ningun sistema simple para volverse invisible.

Así que despues de trastear un poco con Microsoft Expression Blend, conseguí montar un pequeño estilo que podemos aplicar a nuestros ScatterViewItem para que estos sean invisibles. Esto es, inapreciables para el usuario. Por lo tanto, el contenido se verá perfectamente, pero las sombras, reflejos, destellos y demás tonterías, no.

Este es el estilo en cuestión:

Espero que os sirva tanto como a mí.

Introducción al componente ScatterView de Surface (1: ScatterViews con XAML)

Juanma — Thu, 08 Apr 2010 12:30:16 +0000

El multitouch es probablemente una de las características más atractivas de Surface. Esto se debe a que plantea una serie de posibilidades al usuario que convierte su experiencia en algo mucho más intuitivo y sencillo.

El componente ScatterView es quizás uno de los mejores ejemplos de esto. Este es el primero de varios artículos en el que veremos cómo se usan y qué posiblides nos ofrecen.

Sobre el componente ScatterView

Un ScatterView representa un elemento que reacciona a los contactos sobre Surface y que se puede mover, rotar o redimensionar.

El ejemplo más clásico sería un puñado de fotografías. Cada una de esas fotografías puede ser un ScatterView.

Preparamos el proyecto

Antes de iniciar el Visual Studio, debemos haber iniciado el emulador de Surface que viene con el SDK. Si no lo has hecho así, cierra el Visual Studio y inícialo todo en el orden correcto.

Creamos el proyecto

Nuestro proyecto va a ser una aplicación para Surface basada en WPF. Lo llamaremos HelloScatterView.

Al crear nuestro proyecto se nos ha creado una ventana por defecto: SurfaceWindow1. La renombraremos, y le pondremos el nombre de “XamlSample“.

Añadimos unas imágenes

Para poder trabajar con los ScatterViews, necesitaremos algunas imágenes.

Dentro de nuestro proyecto Surface tenemos una carpeta llamada Resources. Crearemos otra carpeta en su interior llamada Img y ubicaremos ahí nuestras imágenes.

Añadir ScatterViews desde XAML

ScatterView simple con XAML

Comenzaremos usando los ScatterViews desde XAML. En realidad añadir un ScatterView es muy simple:

Este es el código que añade un ScatterView. Fijaos en un detalle: añadir un ScatterView no es sólo añadir el nodo ScatterView, también es añadir el recurso que se manejará, en este caso la imagen. Y es que un ScatterView no es una imagen, sino la capacidad que tiene un elemento (en este caso una imagen) de ser rotado, redimensionado y movido.

El XAML completo de la ventana es este:

Si ahora compilamos nuestro proyecto, podremos jugar un poco con nuestra foto sobre el emulador de Surface. Incluso, si conectas dos ratones por USB puedes simular multitouch.

Vamos a hacerlo un poco más espectacular añadiendo varias imágenes:

Scatterviews complejos con XAML

Probablemente ya te estés preguntando lo siguiente: ¿cómo determinar los parámetros por defecto de nuestro ScatterView? Vamos a ello.

La clave está en que la estructura que hemos usado ahora no acaba de ser la mejor. En realidad, nos está faltando crear un ScatterViewItem, que hasta el momento se estaba creando de forma automática para cada elemento en el ScatterView.

En el nodo ScatterViewItem podemos establecer muchas propiedades que afectarán al comportamiento de nuestro ScatterView.

Algunas de esas propiedades son:

MinWidth, MaxWidth, MinHeight, MaxHeight: Máximos y mínimos de anchura y altura.
CanMove, CanRotate, CanScale: Activan o desactivan las capacidades de mover, rotar y redimensionar.
Width, Height, Center, Orientation: Valores iniciales para el ancho, el alto, la posición, y la rotación.
BorderBrush, BorderThikness: Color y grosor del borde.

Un ejemplo sencillo:

Aunque de hecho, podemos centralizar la mayoría de estas propiedades en un único nodo, como un estilo:

Es todo por hoy

El componente ScatterView es sencillo de usar y proporciona una característica muy interesante a nuestras aplicaciones.

Cuando se trabaja para Surface, hay que tener muy en cuenta que los diversos usuarios se colocan alrededor de la mesa, por lo que no existe el derecho ni el revés. Los ScatterViews nos solucionarán este problema más de una vez.

En la siguiente parte del artículo, veremos cómo trabajar con ScatterViews desde C#.

Editado 7/5/2010:

Me comentaron que los códigos fuente en XAML tenían mal la sintaxis, y efectívamente; cuando he pasado a revisarlo así era. Ni idea de que pudo pasar… Bueno, ya están arreglados.

Enrutamiento Seo Friendly con asp.Net

Juanma — Tue, 06 Apr 2010 21:55:48 +0000

En los últimos años se ha ido estableciendo en los sitios web una buena práctica: las Seo Friendly URL. Friendly de amistoso, por que hace que nuestras rutas sean fáciles de indexar por los buscadores (los parámetros GET nunca les han gustado demasiado) y, mucho más importante; fáciles de comprender por los usuarios.

Es de sentido común que la URL de una página tenga que tener cierta relación con lo que contiene. A nadie le dice nada una URL de tipo http://www.dominio.com?seccion=5, pero la cosa es más interesante si es algo del tipo http://www.dominio.com/contacto. La propia URL de este artículo es un buen ejemplo.

En este artículo veremos un pequeño ejemplo de como podemos crear Friendly URLs en asp.Net

¿En que consisten técnicamente las Friendly URL?

La idea es interceptar las peticiones por URL que se realizan a nuestro sitio web antes de que se sirva ningún contenido, de forma que podamos analizar la ruta y servir un archivo u otro en consecuencia. También podemos considerar que parte de la URL es un parámetro de entrada.

Por ejemplo, la URL de este artículo podría ser una como http://www.dominio.com/articulos/enrutamiento-friendly-url/, donde la parte “enrutamiento-friendly-url” es la que determina qué artículo se está mostrando.

¿Cómo montamos el nuevo sistema de direccionamiento?

Cada tecnología de servidor tiene su forma de hacerlo. En este artículo veremos un ejemplo sobre asp.Net.

La clave es el archivo Global.asax. Este es un archivo que proporciona manejadores para una serie de eventos producidos por la aplicación. A nosotros nos interesará el evento Application_BeginRequest: es ahí donde podemos interceptar las peticiones antes de que se sirva ningún contenido, y donde analizaremos las URL para reprogramar el direccionamiento a donde nos interese. Obviamente, el archivo Global.asax tiene más utilidades que el enrutamiento, pero de momento no nos interesan.

Un ejemplo

Vamos a programar un pequeño ejemplo que nos serviría para gestionar los direccionamientos de una red social.

Haremos una dirección para las secciones principales, y una dirección que será dinámica para cada usuario miembro de la red social.

Diseñamos el nuevo enrutamiento

Como siempre, antes de empezar a hacer nada; necesitamos tener claro qué queremos hacer. Vamos a considerar todas las rutas que tendremos.

/inicio/
Todos los sitios web, las redes sociales también; necesitan una página de inicio.
/buscar/
Toda red social necesita un buscador.
/usuarios/
Lo más importante de una red social son los usuarios. Esta es la página genérica de usuarios, que podría ser por ejemplo un formulario de Login.
/usuarios//
Todos los usuarios tienen un perfil con su nombre, su foto, las cosas que hacen los domingos… Fijaos en que ya incluímos un parámetro, el nombre del usuario.
/usuarios//contacto/
La gracia de una red social es poder contactar con los usuarios. Esta página proporcionaría funcionalidad a una red de mensajería interna. Tambien tenemos el parámetro de nombre de usuario.

Creamos el proyecto

Vamos a crear un proyecto web normal y corrente desde el Visual Studio.

Crearemos cuatro .aspx, uno para cada una de nuestras rutas, excepto para /inicio/, que será el Default.aspx que se ha creado por defecto. Tambien crearemos una clase .cs para simular el origen de datos de los usuarios.

Buscar.aspx
Usuarios.aspx
UsuariosPerfil.aspx
UsuariosContacto.aspx
Datos/Usuarios.cs

Algo de código para los .aspx

Vamos a añadir algo de código en los .aspx. Para diferenciarlos, más que nada; y para probar unos links.

Default.aspx

	
		Inicio
	
	
		
		
			Inicio

			
				Buscar
				Usuarios

Buscar.aspx

	
		Buscar
	
	
		
		
			Buscar

			
				Inicio
				Usuarios

Usuarios.aspx

	
		Usuarios
	
	
		
		
			Usuarios

			
				Inicio
				Buscar

UsuariosPerfil.aspx

	
		Perfil de 
	
	
		
		
			

			
				Inicio
				Perfíl de

UsuariosContacto.aspx

	
		Contactar con 
	
	
		
		
			Contactar con 

			
				Inicio
				Perfíl de <%= getUserName() %>

Debemos considerar, además, un poco de código en los .cs:

Datos/Usuarios.cs

Este será nuestro origen de datos. Normalmente será una tabla en base de datos, un xml, o algo por el estilo; pero para nuestro ejemplo nos basta una clase que extienda de List. Le hemos programado además dos nuevos métodos: uno para convertir un valor de la lista al formato que usamos en las URL, y otro para encontrar valores. Destacar que el algoritmo de búsqueda podría ser bastante mejor, pero para el caso ya nos sirve.

	using System;
	using System.Collections.Generic;

	namespace JuanmaSantoyoSeoFriendly.Datos
	{
		public class Usuarios : List
		{
			public Usuarios()
			{
				this.Add("John Travolta");
				this.Add("Samuel L Jackson");
				this.Add("Bruce Willis");
				this.Add("Uma Thurman");
				this.Add("Quentin Tarantino");
			}
		}

		private string urlFormat(string str)
        {
            return str.ToLowerInvariant().Replace(" ", "-");
        }

        public int search(string username)
        {
            int userid = -1;
            int i = 0;

            while(this.Count > i)
            {
                if (urlFormat(this[i]) == username)
                {
                    userid = i;
                    break;
                }

                i  ;
            }

            return userid;
        }
	}

UsuariosPerfil.aspx.cs

En este .cs daremos valores a algunos elementos del .aspx, y además proporcionaremos métodos que rescatarán de sesión el ID del usuario y devolverán su nombre. Hay dos versiones para este método, uno devolverá el nombre tal cual, y el otro nos dará la posiblidad de devolver el nombre formateado para URL.

	protected void Page_Load(object sender, EventArgs e)
	{
		this.hTitle.InnerText = this.getUserName();

		Page.Title  = this.getUserName();

		lbUsuariosContacto.PostBackUrl = "~/usuarios/"   this.getUserName(true)   "/contacto/";
		lbUsuariosContacto.Text  = this.getUserName();
	}

	public string getUserName()
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid") && HttpContext.Current.Items["userid"].ToString() != "-1")
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])];
		}
		else
		{
			return "user not found";
		}
	}

	public string getUserName(bool encode)
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid"))
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])].ToLowerInvariant().Replace(" ", "-");
		}
		else
		{
			return "user not found";
		}
	}

UsuariosContacto.cs

Este .cs es bastante similar al anterior, así que no merece demasiados comentarios:

	protected void Page_Load(object sender, EventArgs e)
	{
		hTitle.InnerHtml  = getUserName();

		Page.Title  = this.getUserName();

		lbUsuariosPerfil.PostBackUrl = "~/usuarios/"   getUserName(true)   "/";
		lbUsuariosPerfil.Text  = getUserName();
	}

	public string getUserName()
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid"))
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])];
		}
		else
		{
			return "user not found";
		}
	}

	public string getUserName(bool encode)
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid") && HttpContext.Current.Items["userid"].ToString() != "-1")
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])].ToLowerInvariant().Replace(" ", "-");
		}
		else
		{
			return "user not found";
		}
	}

Añadimos el Global.asax

Añadimos un nuevo elemento en el proyecto. El nuevo elemento será un Artchivo de aplicación global. No le cambiaremos el nombre: lo dejaremos como “Global.asax”.

Configuramos las nuevas rutas

Antes que nada, debemos agregar la librería “System.Web.Routing”.

Programaremos nuestra propia función para aplicar el enrutamiento. La llamaremos “ApplyRouting”:

	private void ApplyRouting(RouteCollection Routes)
	{
		Routes.Add(new Route("", new RouteHandler("~/Default.aspx")));
		Routes.Add(new Route("inicio/", new RouteHandler("~/Default.aspx")));
		Routes.Add(new Route("buscar/", new RouteHandler("~/Buscar.aspx")));
		Routes.Add(new Route("usuarios/", new RouteHandler("~/Usuarios.aspx")));
		Routes.Add(new Route("usuarios/{username}/", new RouteHandler("~/UsuariosPerfil.aspx")));
		Routes.Add(new Route("usuarios/{username}/contacto/", new RouteHandler("~/UsuariosContacto.aspx")));
	}

Y la llamaremos desde el evento Application_BeginRequest:

	protected void Application_BeginRequest(object sender, EventArgs e)
	{
		ApplyRouting(RouteTable.Routes);
	}

Lo que hacemos es, básicamente; añadir nuevas rutas creadas por nosotros a la tabla de rutas de nuestra aplicación. Hay varias cosas destacables:

El primer parámetro es la nueva ruta. Si escribimos el valor entre llaves, será un parámetro. Los parámetros que antes enviábamos por GET deberían ser sustituídos por estos.
Estamos creando instancias de RouteHandler. Esta clase no existe en la Api de C#, la tenemos que programar nosotros y será donde añadiremos toda la lógica de redireccionamiento.
Como la clase RouteHandler la programamos nosotros, tenemos ciertas ventajas. En este caso, pasamos como parámetro del constructor el archivo al cual redirigimos. No tendría por qué ser así, pero como una de las características de nuestras URL es que siempre redirigen a un único archivo; este sistema nos viene bastante bien.

Programamos la lógica de redireccionamiento

Vamos a crear ahora la clase Routing/RouteHandler.cs. Esta clase, deberá heredar de IRouteHandler y por tanto deberá incorporar un método público llamado GetHttpHandler, que recibirá un único parámetro que es un RequestContext y que retornará un IHttpHandler.

En este método pasaran escencialmente dos cosas: por una parte, se meterán los parámetros recibidos en sesión. Por otra, se retornará un IHttpHandler que construiremos usando la ruta del .aspx al que queremos redirigir.

	public IHttpHandler GetHttpHandler(RequestContext requestContext)
	{
		/*
		 * Tratamos los parámetros de la URL:
		 * Si es el nombre de usuario, buscamos su ID y lo metemos en sesión.
		 * Si no, símplemente lo metemos en sesión
		 */
		foreach (KeyValuePair val in requestContext.RouteData.Values)
		{
			if (val.Key == "username")
			{
				Datos.Usuarios usu = new Datos.Usuarios();
				int userid = usu.search(val.Value.ToString());
				requestContext.HttpContext.Items["userid"] = userid;
			}

			requestContext.HttpContext.Items[val.Key] = val.Value;
		}

		return (Page) BuildManager.CreateInstanceFromVirtualPath(VirtualPath, typeof(Page));
	}

Añadimos además un constructor y una variable global para el parámetro que indica el archivo al que redirigimos.

	string VirtualPath = string.Empty;

	public RouteHandler(string path)
	{
		this.VirtualPath = path;
	}

Hecho esto, nuestras nuevas rutas ya deberían estar funcionando. Sólo nos queda un detalle.

Ignorando rutas

Generalmente, no sólo nos va a interesar añadir rutas a nuestra aplicación, sino tambien quitarlas. Por ejemplo, no es una mala idea que se ignoren las rutas directas a un .aspx, o aquellas rutas que no acaben con el carácter “/” (para tener un sistema de rutas uniforme). Vamos a programar una función en Global.asax, a la cual llamaremos justo antes de ApplyRouting y que se encargará de comprobar si nuestra ruta debe ser ignorada y, en ese caso, redirigir a /inicio/.

El método Application_BeginRequest en Global.asax queraría de la siguiente forma:

	protected void Application_BeginRequest(object sender, EventArgs e)
	{
		Redirect();
		ApplyRouting(RouteTable.Routes);
	}

El método Redirect:

	private void Redirect()
	{
		string url = Request.Url.ToString();

		if (url.Contains(".aspx"))
		{
			Response.Redirect("~/inicio/");
		}

		if (url[url.Length - 1] != '/' && !url.Contains("?"))
		{
			Response.Redirect(url + "/");
		}
	}

Descarga el código fuente

Sé que me odias por no haber puesto este archivo al principio, pero más vale tarde que nunca ¿no?.

Código fuente.

¡Hemos acabado!

Como véis, en asp.Net el enrutamiento Seo Friendly se reduce a dos clases: Global.asax y el manejador de rutas. Es bastante simple, y no requiere demasiado tiempo de implementación. Los beneficios de usar este tipo de enrutamiento son múltiples, desde aspectos de seguridad, hasta aspectos de usuabilidad y posicionamiento en buscadores. ¡Ya no hay excusa para no implementarlo!.

Introducción al desarrollo sobre Microsoft Surface

Juanma — Tue, 06 Apr 2010 06:15:28 +0000

Microsoft Surface (Surface a partir de ahora) es sin duda un desafío para los programadores. Acostumbrados a entornos gráficos basados en respuestas al ratón, una interfaz de usuario multitáctil nos plantea un nuevo reto a la mayoría de nosotros.

En este artículo, pretendo dos cosas: por una parte, informarte de qué necesitas para comenzar a desarrollar y cómo obtenerlo. Por otra parte, facilitarte esa documentación que a todos nos va tan bien para empezar con una nueva tecnología. Así que vamos a ello.

Lo primero que debes saber, es que una aplicación para Surface no es más que una aplicación WPF o XNA. Por si no lo sabías, WPF es un entorno muy potente para desarrollar aplicaciones de escritorio orientadas a los nuevos entornos gráficos de Windows Vista y Windows 7. XNA es un entorno para desarrollo de videojuegos también facilitado por Microsoft. Si has jugado con la Xbox 360 te habrás preguntado ¿de dónde salen los tantísimos juegos del bazar? Pues bien, la mayoría están desarrollados por compañías independientes con XNA.

Obviamente, optar por WPF o XNA dependerá de nuestra aplicación. Si necesitamos un motor rico en controles de usuario, optaríamos por WPF. Si necesitamos un motor potente en la renderización de gráficos 3D, optaríamos por XNA. Depende de las necesidades de nuestra aplicación.

Lo primero que debes saber, es que una aplicación para Surface no es más que una aplicación WPF o XNA. Por si no lo sabías, WPF es un entorno muy potente para desarrollar aplicaciones de escritorio orientadas a los nuevos entornos gráficos de Windows Vista y Windows 7. XNA es un entorno para desarrollo de videojuegos también facilitado por Microsoft. Si has jugado con la Xbox 360 te habrás preguntado ¿de dónde salen los tantísimos juegos del bazar? Pues bien, la mayoría están desarrollados por compañías independientes con XNA.Obviamente, optar por WPF o XNA dependerá de nuestra aplicación. Si necesitamos un motor rico en controles de usuario, optaríamos por WPF. Si necesitamos un motor potente en la renderización de gráficos 3D, optaríamos por XNA. Depende de las necesidades de nuestra aplicación.

Instalación del entorno de desarrollo

Para empezar, un detalle importante es nuestro sistema operativo: El SDK de Surface no funcionará en Windows XP, necesitaremos Windows Vista o superior.

Bien, empecemos a instalar los programas necesarios. Antes de empezar, no estaría mal asegurarse de que tenemos instalada la última versión del .Net Framework (3.5 SP1 en estos momentos).

La primera herramienta que debemos conseguir es un Visual Studio. Como sabrás, Visual Studio es un IDE desarrollado por Microsoft y orientado al desarrollo de aplicaciones en .Net. Si no lo tienes y eres estudiante universitario, puedes hacerte con una licencia de estudiante. Esta licencia es totalmente gratuita y sólo necesitaras proporcionar tu identificación como estudiante. Puedes obtenerla aquí: Microsoft Visual Studio.

Cuando tengamos el Visual Studio instalado, deberemos instalar el Framework de XNA (independientemente de que queramos desarrollar con WPF). Lo podemos obtener de aquí: Microsoft XNA Framework.

Finalmente, instalamos el SDK de Surface. Lo encontramos aquí: Microsoft Surface SDK.

Con este software instalado, ya estamos listos para abrir el Visual Studio y crear un nuevo proyecto de Surface, no sin antes ejecutar el emulador de Surface que viene con el SDK. De esta forma, al depurar proyectos desde Visual Studio, se ejecutarán en el emulador.

Debes saber, además; que si conectas más de un ratón por USB el emulador los considerará dedos diferentes. ¡Eso es, soporte multitáctil en tu ordenador!.

Recursos de documentación para empezar

Ya tenemos todo lo necesario para empezar a desarrollar aplicaciones de Surface. Ahora, sólo nos falta algo de documentación que nos oriente para empezar a hacer cosas.

Developing for Microsoft Surface

Pero ¿dónde nos estamos metiendo realmente? En esta conferencia de Microsoft se ilustra cómo es el desarrollo de aplicaciones en Surface.
Developing for Microsoft Surface.

Hola Mundo Surface con WPF

Siguiendo en la línea anterior, este artículo me ha aclarado algunos conceptos generales más a la hora de afrontar el desarrollo con Surface. Interesante sobre todo porque habla algo de los nuevos eventos de contacto de Surface.
Hola Mundo Surface con WPF.

MSDN .Net Framework Developer Center

Pero vamos, ya está bien de conceptos generales, ¿verdad? Seguro que ya tienes ganas de meterle mano a Surface.

En MSDN nos facilitan información y ejemplos varios para empezar a programar algunas cosas. ¡Suerte!.
MSDN .Net Framework Developer Center.

XML dinámicos con asp.Net

Juanma — Tue, 16 Mar 2010 19:04:33 +0000

Desde que me inicié en el asp.Net (no hace demasiado de eso) me he estado preguntando cómo se podría hacer una llamada al servidor que devolviese un contenido XML dinámico. Dicho de otra forma, lo que yo quería era generar un contenido XML en base a un parámetro enviado por GET o POST. Estos XML son necesarios para cualquier aplicación basada en Ajax que se precie, además de ser especialmente útiles para otras situaciones (como por ejemplo, compartir contenido interno a un consumidor externo).

Pues bien, hace un par de días me surgió la necesidad y investigué un poco al respecto. En realidad, la solución que nos propone .Net no está nada mal: un archivo .asmx que actúa como WebService.

Sobre los .asmx

De la misma forma que podemos añadir archivos .aspx a un proyecto web, también podemos añadir archivos .asmx. Estos archivos son la base de cualquier proyecto de WebService que desarrollemos en .Net, pero también podemos usarlos en los proyectos web normales.

¿Cómo se usan los .asmx?

El uso de los .asmx es simple: básicamente, lo que debemos hacer es crear un método, que devuelva un valor y que tenga la etiqueta [WebMethod]. Al final, la llamada a servidor: “http:////” nos devolverá el resultado devuelto por el método.

Por supuesto, el método puede tener parámetros, que enviaremos por GET o por POST; en cuyo caso, al hacer la llamada los parámetros enviados deberán tener el mismo nombre que el parámetro en el método.

Es importante destacar que si queremos enviar parámetros por GET o POST, deberemos activar ambos protocolos en el Web.config de nuestra aplicación.

Un ejemplo

La mejor forma de ver cómo funciona un .asmx es viendo un pequeño ejemplo. Con poco esfuerzo podremos hacer algunas pruebas.

Crear el proyecto

Sólo necesitaremos crear un nuevo proyecto web en nuestro Visual Studio. Nos creará por defecto un .aspx, pero no nos interesa demasiado.

Crear el asmx

Añadiremos en el proyecto web un nuevo elemento, que será un Servicio web. Lo encontrarás entre los posibles elementos de la categoría “Web”. Lo llamaremos “test.asmx“.

Cuando tengamos nuestro .asmx creado, lo estableceremos como la página inicial de nuestro proyecto (es una opción que aparecerá si clicamos con el botón derecho en el .asmx).

Un nuevo método en el .asmx

En el .asmx ya tenemos un método creado: HelloWorld. Es muy ilustrativo, ya que nos indica dos cosas: la primera, que nuestros métodos deberán tener al principio la etiqueta [WebMethod]. La segunda, que el valor retornado será lo que mostrará nuestro WebService al realizar una petición al método.

Vamos a programar un método más bien absurdo, pero que nos permitirá ver cómo funciona el envío de parámetros:

	[WebMethod]
	public string ReturnThisString(string str)
	{
		return str;

	}

Hay dos cosas a destacar:

El parámetro que recibe este método se llama str.
El resultado que genera este método, es un string.

Activamos los protocolos GET y POST

Como dije unas líneas más arriba, debemos activar los protocolos de envío GET y POST si queremos usarlos en nuestro WebService. Todo lo que debemos hacer es incluir dentro del nodo de nuestro Web.config las siguientes líneas:

Probamos el WebService

Y toca inicar una depuración. La primera vez que lo hagamos nos pedirá que activemos el modo debug. Le decimos que sí, y arrancará el .asmx.

Lo que veremos, será un resumen de los métodos que tiene el .asmx (esto no se vería en un entorno de producción). Podemos clicar en el nombre de nuestro método “ReturnThisString” para que nos muestre un pequeño formulario donde indicaremos el valor del parámetro “str“. Al enviarlo, veremos el resultado de nuestro método de WebService.

Hay varias cosas interesantes en las que fijarse ahora:

El resultado devuelto es un XML.

Sea cual sea el resultado, el asmx siempre nos dará una respuesta XML.
La ruta de la página.

Como ves, la url de este xml es: “http:////”. Esta es la dirección a la que accederemos para obtener resultados de nuestro WebService, ya sea con Ajax o con otra tecnología.
El nodo string.

El resultado del método viene, en realidad, dentro de un nodo llamado string. Esto es, efectívamente, el tipo del dato devuelto. ¿imaginas lo que pasaría si en vez de un string, devolvemos una lista de strings? Efectivamente, el XML resultante sería una lista de nodos string.

Generamos un XML como respuesta del método

Como ves, los WebServices .asmx no son demasiado complicados, aunque por el momento seguimos teniendo un pequeño problema: los XML que generamos como resultado son generados automáticamente y no tenemos control sobre ellos. Vamos a poner solución a esto.

La cuestión es que si en lugar de un string, devolvemos un objeto XmlDocument, el resultado devuelto por el WebService será el contenido del XmlDocument tal cual. Por lo tanto, se podría decir que el proceso para generar respuestas XML personalizadas (la razón de este artículo) es el siguiente:

Creamos un método en el .asmx que devuelva un objeto XmlDocument.
Obtenemos todos los datos que queramos devolver.
Los metemos en un XmlDocument.
Retornamos el XmlDocument.

Un último ejemplo

Vamos a crear un último ejemplo: un pequeño método que nos introducirá en la creación de XML dinámicos:

	[WebMethod]
	public XmlDocument ReturnXml()
	{
		XmlDocument xml = new XmlDocument();

		XmlNode rootNode = xml.CreateElement("RespuestaXml");
		XmlNode txtNode = xml.CreateTextNode("Xml generado automáticamente");
		XmlNode subNode = xml.CreateElement("HolaMundo");
		XmlNode commentNode = xml.CreateComment("Esto es un comentario");

		subNode.AppendChild(commentNode);
		rootNode.AppendChild(txtNode);
		rootNode.AppendChild(subNode);
		xml.AppendChild(rootNode);

		return xml;
	}

Esto generaría el siguiente resultado:

Descargar el ejemplo

Puedes descargar el ejemplo si algo no te ha quedado claro. Recuerda también que puedes dejar comentarios.

JuanmaSantoyoXmlDinamicos

¡Hemos terminado!

Y de momento no hay mucho más que decir. Con este ejemplo, hemos tocado un tema especialmente importante para la mayoría de proyectos web, ya que los XML dinámicos son importantes para las funcionalidades Ajax y para comunicarnos con otras aplicaciones externas. ¿Aún no tienes RSS en tu sitio web? ¡A qué esperas!.

Generación de colores intermedios con resultados multicolor

Juanma — Wed, 24 Feb 2010 15:00:35 +0000

No hace mucho se comenté una técnica para calcular los colores intermedios entre dos colores cualesquiera. Lo que haremos en esta ocasión es ampliar el script que creamos entonces para que se puedan especificar más de dos colores.

Multi-Colores intermedios.

La idea

La idea es sencilla: si tenemos una función para calcular los intermedios entre dos colores, podemos usar esa función varias veces y de esta forma obtener un resultado multicolor. Donde antes íbamos del azul al rojo, ahora podremos ir del azul al rojo, y después del rojo al verde; de forma que lo que tenemos es una sucesión de colores que va del azul al verde pasando por el rojo.

¿Cómo lo haremos? Fácil. En realidad, no hay que programar nada nuevo sobre mezclas de colores, todo lo que haremos será una función que gestionará diversas llamadas a la mezcla de dos colores que ya teníamos.

Aclaramos un par de detalles

Crearemos una función llamada getGradientMultiColors, que recibirá un array con los colores básicos de nuestro degradado. Por ejemplo, si queremos un degradado de azul a verde, pasando por el rojo, el array contendrá el color azul, el rojo y el verde (por ese orden). Esta función también recibirá la cantidad de colores que queremos al final del cálculo (incluyendo los colores básicos).
Se hará una gestión de los colores resultantes que eliminará repeticiones de colores básicos, y calculará la cantidad de colores que se obtendrán en cada llamada a getGradientColors.
La política para el cálculo de colores será la siguiente: Se calcularán una cantidad de total de colores / total de colores basicos, redondeando a la baja. Los colores que falten para completar la cantidad total de colores, se generarán repitiendo los colores al inicio y al final de la sucesión de colores resultante.

Programamos la función

Bueno, al lío:

function getGradientMiltiColours(colours, total)
{
	var res = new Array();
	var temp = new Array();

	var gradientZones = Math.floor(total / (colours.length - 1));

	for(var i = 0; i < (colours.length - 1); i++)
	{
		temp = getGradientColours(colours[i], colours[i + 1], gradientZones);

		// Si no es el primer cálculo de colores, quitamos el primer elemento para evitar repeticiones.
		if(i != 0)
		{
			temp.shift();
		}

		res = res.concat(temp);
	}

	var toAdd = (total - res.length);

	/*
		Si queda un número par de colores por añadir, añadimos la mitad al inicio y la mitad al final.
		Si no, restamos uno, añadimos la mitad al principio y la mitad al final, y finalmente uno más al final.
	*/

	var repeatLast = false;
	if(toAdd % 2 != 0)
	{
		toAdd --;
		repeatLast = true;
	}

	var i = 0;
	toAdd = toAdd / 2;
	while(i < toAdd)
	{
		res.unshift(res[0]);
		res.push(res[res.length - 1]);
		i++;
	}

	if(repeatLast == true)
	{
		res.push(res[res.length - 1]);
	}

	return res;
}

¡Hemos terminado!

Bueno, en realidad no hemos hecho nada del otro mundo, pero es una mejora que se me ocurrió poco después de publicar el artículo original y valía la pena hacerla.

Colores intermedios con JavaScript

Juanma — Fri, 12 Feb 2010 18:09:37 +0000

Hace poco, un compañero me preguntó sobre encontrar varios colores intermedios entre dos colores, de forma que un color pueda transformarse gradualmente en el otro. Esto es lo que se hace, por ejemplo, para averiguar los colores que forman un degradado o para calcular el color resultante al solapar dos colores con cierta transparencia.

Lo que vamos a hacer es crear un pequeño script en JavaScript que se encargará de calcular varios colores intermedios entre dos colores cualesquiera.

Colores intermedios.

Bien, en realidad, es un proceso muy sencillo, ya que los colores son en esencia, números.

Sobre los colores como números

Cualquier color en pantalla, se basa en tres componentes: la cantidad de rojo, la cantidad de verde y la cantidad de azul. Un color especificado de esta forma, está siguiendo el patrón RGB. Los diferentes valores de las componentes pueden ir desde el 0 hasta el 255.

Puesto que cada componente del color tiene exactamente 256 valores posibles, se pueden representar con un valor hexadecimal de dos cifras, desde el 0 hasta el FF. De hecho, lo más normal es representarlos mediante tres valores hexadecimales. Esto nos da un número hexadecimal de seis cifras, donde las dos primeras son la componente R (cantidad de rojo), los dos segundos son la componente G (la cantidad de verde) y los dos últimos la componente B (la cantidad de azul).

Por ejemplo, el rojo se representaría así: FF0000 (255 de rojo, 0 de verde y 0 de azul).

Con lo cual, un color no es más que un número. Con la calculadora de tu sistema operativo puedes hacer una conversión de hexadecimal a decimal y ver qué valor decimal corresponde al color rojo. Se trata del 16711680.

La idea

Bien, ahora que sabemos que un color es un número, podemos simplificar mucho el problema al que nos enfrentamos.

Cualquiera con nociones de matemáticas básicas, sabría decir que el valor intermedio entre el 10 y el 20 es el 15. Los colores intermedios se calculan de la misma forma. Cambiaremos el 10 y el 20 por nuestras componentes.

Debemos tener en cuenta que debemos mezclar cada componente por separado. De forma que el punto intermedio entre rojos, el punto intermedio entre verdes y el punto intermedio entre azules nos dará el color intermedio entre nuestros dos colores.

Un script para calcular colores intermedios

Antes de empezar a programar nada, lo de siempre: hay que saber más o menos cómo vamos a hacer las cosas.

En principio, trabajaremos con los colores en su notación hexadecimal. Por lo tanto, necesitamos una pequeña función que se encargue de separar las componentes, y de convertirlas a un valor decimal. Esta función se llamará getColorComponents.
Necesitaremos una función que se dedique a calcular los intervalos necesarios entre dos componentes de color. Es decir, encontraremos todos los intervalos de cada componente de color por separado. Esta función se llamará getGradientComponents.
Por lo tanto, lo único que nos falta es una función que lo integre todo y que sea capaz de retornar una lista de cadenas de texto, cada una de las cuales representará un intervalo de color en codificado en hexadecimal. Esta función se llamará getGradientColors.
Sólo un detalle más: El primer y último color, son un intervalo más. Esto es que si pedimos tres colores, sólo calculará uno adicional: el valor central.

Programamos el Script

La función getColorComponents

function getColorComponents(numero)
{
	var res = new Array();

	res[0] = parseInt("0x" + numero.substr(0, 2));
	res[1] = parseInt("0x" + numero.substr(2, 2));
	res[2] = parseInt("0x" + numero.substr(4, 2));

	return res;
}

Como veis, nos limitamos a separar los componentes. Lo único destacable es cómo realiza la conversión a hexadecimal. En JavaScript, los números que empiezan con 0x se consideran hexadecimales.

La función getGradientComponents

function getGradientComponents(n1, n2, z)
{
	var i = 0;
	var n = 0;
	var res = new Array();

	n = (n1 - n2) / (z - 1);

	for(i = 0; i < z; i++)
	{
		res[i] = n2 + (n * ((z - 1) - i));
		res[i] = Math.floor(res[i]);
		res[i] = res[i].toString(16);

		if(res[i].length < 2) res[i] = "0" + res[i];
	}

	return  res;
}

Esta función tiene como parámetros las componentes iniciales y finales, y el número de valores intermedios que hay que sacar. El cálculo como veis es sencillo.

La función getGradientColors

function getGradientColors(firstColor, lastColor, gradientZones)
{
	var components1 = getColorComponents(firstColor);
	var components2 = getColorComponents(lastColor);

	var i = 0;
	var colors = new Array();
	var res = new Array();

	for(i = 0; i < components1.length; i++)
	{
		colors[i] = getGradientComponents(components1[i], components2[i], gradientZones);
	}

	for(i = 0; i < gradientZones; i++)
	{
		res[i] = colors[0][i] + colors[1][i] + colors[2][i];
	}

	return res;
}

Esta función gestiona las dos anteriores: primero separa cada color en sus componentes, después obtiene los puntos intermedios por componente y por último genera un string que representa los nuevos colores en hexadecimal.

Los resultados se devuelven en un array. Donde el primer elemento es el primer color, el último elemento es el segundo color; y todos los elementos intermedios son colores calculados.

¡Hemos terminado!

Puede que inicialmente sea complicado hacerse a la idea de que los colores funcionan como los números, pero una vez que ese concepto está claro, es fácíl trabajar con ellos y transformarlos.

Lo que hemos trabajado con este script es mezcla de colores, lo cual es muy potente para generar muchos tipos de efectos. En esta ocasión, nos hemos limitado a una mezcla progresiva, pero como siempre, las posiblidades son infinitas.

El array arguments de JavaScript

Juanma — Tue, 09 Feb 2010 11:00:02 +0000

Normalmente los lenguajes de programación aplican ciertos controles sobre los argumentos que se pasan a una función:

¿Se pasan los mismos parámetros que están especificados?
¿Si se pasan menos parámetros, los que faltan tienen especificados valores por defeto?
¿Los tipos coinciden?

Este tipo de cosas.

En JavaScript no es así. JavaScript no aplica ningún tipo de control sobre los parámetros que se le pasan, y en principio puedes pasar más parámetros de los especificados, o menos; a cualquier función. Pero JavaScript tiene el array arguments.

El array arguments es un array que tenemos en todas las funciones de JavaScript y que contiene los parámetros que se han pasado a la función.
Por ejemplo, si invocamos a una función de esta manera:

mi_funcion("param1", "param2", "param3", "param4");

El array arguments (que será accesible desde cualquier parte de mi_funcion) contendrá:

[
	"param1"
	, "param2"
	, "param3"
	, "param4"
]

Nuestro control de parámetros

En las ocasiones en que necesitemos realizar un control de parámetros, podemos hacer un par de coas:

Detectar que se estén pasando un número concreto de parámetros

El array arguments es un array como cualquier otro y también tiene la propiedad length. El valor arguments.length nos dirá cuántos parámetros se han enviado y notros podemos acuar en consecuencia:

function mi_funcion(param1, param2, param3, param4)
{
	if(arguments.length == 4)
	{
		/* ... */
	}
	else
	{
		/* ... */
	}
}

Parámetros indeterminados

¿Como actuar si queremos que nuestra función tenga una cantidad indeterminada de parámetros? Normalmente, ante estos se pasan arrays como argumento, arguments nos soluciona el problema. Supongamos que nuestra función recibe un primer parámetro fijo, y el resto puede ser variable:

/* La invocación a la función */
mi_funcion(fijo, variable1, variable2, variable3, variable4, variable5);

/* La especificación de la función */
function mi_funcion(fijo)
{
	var variables = new Array();

	if(arguments.length > 1)
	{
		variables = arguments.slice(1);
	}

	/* ... */
}

De esta forma, el valor de el array variables será:

[
	variable1
	, variable2
	, variable3
	, variable4
	, variable5
]

Conclusión

El array arguments nos permite llevar un control de los argumentos que se pasan a las funciones, de forma que se puedan detectar las irregularidades que nosotros queramos y podamos actuar en consecuencia. Lo que hemos visto aquí es sólo una pequeña parte de las posiblidades que nos da arguments, y obviamente su uso dependerá de las necesidades de nuestra función, pero creo que es lo suficientemente ilustrativo como para conocer su potencial.

Clase para acceso avanzado a las AppSettings del WebConfig

Juanma — Mon, 08 Feb 2010 17:41:54 +0000

Para quien no lo sepa, el WebConfig de asp.Net es un archivo XML que contiene todos los aspectos de configuración de nuestra aplicación. Entre los distintos parámetros, hay un nodo llamado AppSettings que nos permite definir pares clave / valor para después acceder a ellas desde cualquier punto de la aplicación.

Pero, a pesar de que el api proporciona dos métodos diferentes de acceso a las AppSettings, ambos tienen algunos inconvenientes. Lo que haremos, es crear una pequeña clase que nos permitirá tratar las AppSettings de una forma más simple y con una funcionalidad mejorada.

Clase AppSettings

Los inconvenientes

Los inconvenientes a la hora de trabajar con las variables de AppSettings son varios. Se podría decir que hay dos formas de acceder. Comentemos las dos formas:

Primera forma: la clase ConfigurationManager

La clase ConfigurationManager nos proporciona un diccionario estático que contiene los valores definidos en AppSettings:

ConfigurationManager.AppSettings["clave"];

A mi modo de ver, más largo de lo necesario y poco intuitivo (escribid “Configuration” en un VisualStudio y mirad cuantas entradas muestra el intellisense). Prometo que me costó un par de intentos memorizar esta línea.

Por otra parte, lo más grave es que el dato devuelto es siempre un string, lo cual nos obliga a hacer una conversión del dato inmediatamente después si queremos otro formato.

Segunda forma: la clase AppSettingsReader

Esta segunda clase, tiene algunas ventajas respecto a la anterior, pero también es mejorable.

Por una parte, su uso requiere de una instancia de AppSettingsReader y la posterior invocación a un método:

AppSettingsReader settings = new AppSettingsReader();
string valor = (string) settings.GetValue("clave", typeof(string));

Por no mencionar el casting obligatorio.

Por otra parte, aunque en principio se puede especificar el tipo del dato devuelto, hay poco control sobre él. ¿Qué pasa si es una fecha? Sinceramente, ni lo he probado.

Una posible solución

Yendo al grano, lo cierto es que el acceso a las AppSettings es mejorable. Vamos a considerar y a anotar algunas cosas sobre una posible alternativa que nos solucione los inconvenientes comentados:

Se accede desde una clase estática, pero más simple que la vista en la primera forma de acceder. No debería ser mucho más complejo que AppSettings.GetValue(“clave”).
Se ofrecen varios tipos básicos (pocos, pero controlados) como posibles retornos. Nuestra clase se encarga de hacer la conversión.
Además, la clase será capaz de realizar un tratamiento avanzado del contenido de las AppSettings: podrá retornar listas y diccionarios de los tipos básicos.

Definimos los diferentes tipos básicos de AppSettings

Serán solamente cuatro, pero a cambio ganaremos el control absoluto sobre los valores que retornamos.

Los tipos serán:

string
int
bool
DateTime

Definimos los diferentes formatos de las claves del AppSettings

Vamos a estipular como deberán ser escritos los datos en el WebConfig. A partir de ahora, deberemos escribir los valores en AppSettings siguiendo uno de los formatos siguientes. aunque ante cualquier excepción, siempre podremos obtener los datos como un tipo básico string (que será como si no aplicásemos ninguna conversión).

Datos básicos

No consideraremos un formato para los datos básicos porque no lo necesitan (excepto las fechas, que las vemos ahora mismo). Las cadenas se escribirán como cadenas, los números como números, y los booleanos como “true” y “false”.

Fechas

Las fechas seguirán un formato típicamente español:

dia/mes/año

Donde los días van del 1 al 31, los meses del 1 al 12, y los años tienen cuatro cifras.

Listas

Separaremos los diferentes elementos con comas.

valor1, valor2, valor3, valor4

Los espacios en blanco entre los valores y las comas serán indiferentes.

Diccionarios

Separaremos los pares con comas, y los clave valor con dos puntos.

clave1: valor1, clave2: valor2, clave3: valor3

Al igual que antes, los espacios en blanco entre los separadores y los valores son indiferentes.

Programamos la clase AppSettings

Ya sabemos que formatos tenemos que considerar. Ahora vamos a programar nuestra clase.

Antes que nada, debemos tener más o menos claro cómo queremos hacerlo. Lo haremos así:

Tendremos un método privado, llamado Get; que se encargará simplemente de obtener el dato de WebConfig como un string.
Tendremos tres métodos privados que se encargarán de convertir un string al resto de formatos. Se llamarán ToInt, ToBool y ToDate.
Tendremos varios métodos públicos, cada uno devolverá un tipo de dato. Los métodos se llamarán GetAsString, GetAsStringList, GetAsStringDict, GetAsInt, etc.

El método Get

private static string Get(string key)
{
	AppSettingsReader settings = new AppSettingsReader();            

	return (string) settings.GetValue(key, typeof(string));
}

En este método tenemos la única instancia de AppSettingsReader que vamos a usar. El resto de métodos de la clase se apoyarán en este para obtener la información del WebConfig.

Los métodos conversores

Serán tres. Uno convertirá un string a int, otro a bool y el último a DateTime.

private static int ToInt(string value)
{
	int v = 0;

	if (int.TryParse(value, out v))
	{
		return v;
	}

	return 0;
}

private static bool ToBool(string value)
{
	bool v = false;

	if (bool.TryParse(value, out v))
	{
		return v;
	}

	return false;
}

private static DateTime ToDateTime(string value)
{
	DateTime v = DateTime.Today;

	if (DateTime.TryParseExact(value, "dd/MM/yyyy", new CultureInfo("es-ES"), DateTimeStyles.None, out v))
	{
		return v;
	}

	else return new DateTime();
}

Los métodos que retornarán los datos

Estos métodos se apoyarán en los anteriores para obtener los valores, darles un formato de salida y devolverlos. Hay uno por tipo de dato y tipo de salida (normal, lista o diccionario).

Además, a los métodos que requieran de un separador (los que devuelven listas y diccionarios) les haremos una sobrecarga que permita indicar un separador distinto. De esta forma podremos reaccionar ante posibles conflictos entre nuestros separadores por defecto y los valores que contengan las AppSettings.

public static string GetAsString(string key)
{
	string value = Get(key);

	return value;
}

public static int GetAsInt(string key)
{
	string value = Get(key);

	return ToInt(value);
}

public static bool GetAsBool(string key)
{
	string value = Get(key);

	return ToBool(value);
}

public static DateTime GetAsDateTime(string key)
{
	string value = Get(key);

	return ToDateTime(value);
}

public static List GetAsStringList(string key, char sep)
{
	string value = Get(key);
	List list = new List();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(s.Trim());
	}

	return list;
}

public static List GetAsStringList(string key)
{
	return GetAsStringList(key, '|');
}

public static List GetAsIntList(string key, char sep)
{
	string value = Get(key);
	List list = new List();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(ToInt(s.Trim()));
	}

	return list;
}

public static List GetAsIntList(string key)
{
	return GetAsIntList(key, '|');
}

public static List GetAsBoolList(string key, char sep)
{
	string value = Get(key);
	List list = new List();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(ToBool(s.Trim()));
	}

	return list;
}

public static List GetAsBoolList(string key)
{
	return GetAsBoolList(key, '|');
}

public static List GetAsDateTimeList(string key, char sep)
{
	string value = Get(key);
	List list = new List();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(ToDateTime(s.Trim()));
	}

	return list;
}

public static List GetAsDateTimeList(string key)
{
	return GetAsDateTimeList(key, '|');
}

public static Dictionary GetAsStringDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary dict = new Dictionary();

	foreach(string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], value[1]);
		}
	}

	return dict;
}

public static Dictionary GetAsStringDict(string key)
{
	return GetAsStringDict(key, ';', '|');
}

public static Dictionary GetAsIntDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary dict = new Dictionary();

	foreach (string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], ToInt(value[1]));
		}
	}

	return dict;
}

public static Dictionary GetAsIntDict(string key)
{
	return GetAsIntDict(key, ';', '|');
}

public static Dictionary GetAsBoolDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary dict = new Dictionary();

	foreach (string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], ToBool(value[1]));
		}
	}

	return dict;
}

public static Dictionary GetAsBoolDict(string key)
{
	return GetAsBoolDict(key, ';', '|');
}

public static Dictionary GetAsDateTimeDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary dict = new Dictionary();

	foreach (string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], ToDateTime(value[1]));
		}
	}

	return dict;
}

public static Dictionary GetAsDateTimeDict(string key)
{
	return GetAsDateTimeDict(key, ';', '|');
}

¡Hemos terminado!

Ahora ya tenemos una clase que, además de ser fácilmente utilizable desde cualquier parte del programa, nos proporciona los valores de AppSettings en el formato que necesitemos. Además hemos extendido la funcionalidad respecto al api de asp.Net por que también es capaz de obtener los datos en forma de listas y diccionarios.

Manual básico de Ajax (Parte 2)

Juanma — Fri, 05 Feb 2010 13:50:26 +0000

¡Pasemos a la acción!

Bueno, la teoría es necesaria pero lo bonito, y lo que a todos nos gusta es pringarnos las manos. Vamos allá con un ejemplo simple de Ajax.

El ejemplo consistirá en programar dos select. En el primero, tendremos una lista de países, y en el segundo una lista de ciudades. Lo que haremos, será modificar el select de ciudades en función del país seleccionado en el select de países.

El ejemplo tendrá tres partes: primero, programaremos la página HTML que contendrá los dos selects. Después programaremos un script de servidor en PHP, que será la petición Ajax y que generará la respuesta que contendrá toda la información sobre ciudades. Por último, programaremos un archivo JS que realizará la petición Ajax y que hará todas las gestiones pertinentes con el fin de presentar los resultados dentro del select de ciudades.

El código fuente

Este es el código fuente para este ejemplo. Te recomiendo que vayas mirando los archivos mientas los voy comentando:

Nociones básicas de Ajax (código fuente).

La página HTML

No nos complicaremos. Cumpliremos los requisitos básicos para generar un XHTML válido y fácil de maquetar con CSS; y que conste que es por orgullo propio, porque realmente al Ajax le va a dar igual si nuestro HTML valida o no.

En resumen, dos campos select y poco más.

El Script PHP.

En este caso, vamos a hacerlo fácil: guardaremos en arrays información sobre países y ciudades; y el script se limitará a recibir el país por GET y montar una salida XML que contenga los resultados.

Destacar que lo mismo que yo uso arrays, se podría hacer, por ejemplo; un acceso a base de datos. Y, obviamente, se podría usar cualquier otro lenguaje de servidor para generar el XML, como jsp o asp.

El XML generado será más o menos algo como esto:



	Madrid
	Barcelona
	Palma de Mallorca
	Sevilla
	Valencia
	Bilbao

Destacar dos cosas: los códigos de las ciudades se han generado mediante una sencilla fórmula:
(código de la ciudad) = ((índice del país) * 100) + (índice de la ciudad)

Por otra parte, el código XML se ha montado en una línea única. Esto se hace así para no tener que lidiar con los saltos de línea cuando analicemos el XML con JavaScript (cada navegador los interpreta a su manera).

El script JavaScript

Ahora viene lo bueno. Este script hará tres cosas: gestionará la petición Ajax a ciudades.php, procesará el objeto XML resultante, y mostrará el resultado en pantalla.

Esta es con toda seguridad la parte más compleja de la pequeña aplicación que estamos programando.

A partir de ahora, el código merece una digna explicación, por lo que comentaré una a una todas las funciones del archivo js.

Empecemos con dos funciones sencillas: dos escuchadores de eventos.

function paginaCargada()
{
	var pais = document.getElementById("pais");
	var ciudad = document.getElementById("ciudad");

	pais.disabled = false;
	pais.value = 0;

	ciudad.disabled = false;
	ciudad.value = 0;
}

function paisCambiado(select)
{
	var ciudades = document.getElementById("ciudad");
	ciudades.disabled = true;

	_actualizarCiudades(select.value);
}

El escuchador paginaCargada, responde al evento de body onload y simplemente inicia los selectores de país y ciudad. Esto es para que al refrescar con F5 no conserven el valor anterior, y por si alguno hubiese quedado desactivado (durante el ejemplo, se desactivaran mientras se realiza la petición Ajax).

El escuchador paisCambiado responde al evento onchange del select de países. El único parámetro que recibe es el propio select de países.

La función de paisCambiado es simple: por una parte, deshabilita el select de ciudades (ya que se están cargando sus nuevos valores) y por otra, inicia la petición Ajax mediante la función _actualizarCiudades.

La siguiente función cumple la labor más importante de todas: crear un nuevo objeto Ajax y retornarlo.

function ajax()
{
	var httpRequest = null;

	if (window.XMLHttpRequest)
	{
		//El explorador implementa el interfaz de forma nativa
		httpRequest = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		//El explorador permite crear objetos ActiveX
		try
		{
			httpRequest = new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{

			}
		}
	}

	return httpRequest;
}

Una de las perticularidades del objeto XMLHTTPRequest (o ajax) es que está implementado de forma distinta en cada navegador. Firefox y la mayoría, lo traen implementado junto al resto de funcionalidades JavaScript, pero Internet Explorer lo trae implementado como un control ActiveX. Esta función hace exactamente eso: hace una detección de las funcionalidades del navegador y actúa en consecuencia para obtener una instancia del objeto XMLHTTPRequest y retornarla. Esta es una función muy típica, que de hecho ni siquiera es mía… en realidad la he copiado de la wikipedia: XMLHttpRequest en Wikipedia.

Este objeto será el que realice las peticiones asíncronas y el que nos permita obtener los resultados.

Y todas estas cosas se hacen en la siguiente función: _actualizarCiudades. Mención especial a dos detalles: por una parte, fijaos en que a esta función la acompaña una variable global ajx. Por otra, fijaos en que el nombre de esta función empieza con un underscore. En este script, las funciones que empiezan con underscore son “teóricamente” privadas, o dicho de otra forma; son funciones que en teoría no deberían ser usadas desde fuera del script.

var ajx = null;
function _actualizarCiudades(pais)
{
	if(ajx != null && ajx.readyState != 4 && ajx.readyState != 0)
	{
		ajx.abort();
	}

	ajx = ajax();
	var url = "ciudades.php?pais=" + pais;

	ajx.open("GET", url);
	ajx.send();

	ajx.onreadystatechange = function()
	{
		if(ajx.readyState == 4 && ajx.status == 200 && ajx.responseXML != null)
		{
			_ciudadesCargadas(ajx.responseXML);
			ajx = null;
		}
	}
}

Veamos, lo primero a comentar de esta función es el primer if, y la razón de que el objeto XMLHTTPRequest se defina sobre una variable global ajx.

La idea es que las peticiones Ajax puedan ser canceladas si se intenta enviar una petición mientras hay otra en curso. Para ello, se basa en el valor de la propiedad readyState. Si el objeto ajx tiene la propiedad readyState en valores distintos a 4 (finalizado) o 0 (sin iniciar); es que existe una petición en curso y debe abortarse antes de que se inicie una nueva. Creo que esto se entenderá mejor con un pequeño diagrama de flujo:

Ahora que estamos seguros de que no hay ninguna petición en curso, creamos un nuevo objeto Ajax.

Y lo que toca ahora, es crear la petición al servidor propiamente dicha. Lo primero, montar la URL a la que se accederá. Fijaos en que en este momento, concatenamos las variables que enviaremos por GET. Si quisiéramos hacer un POST, enviaríamos las variables en el método ajx.send (lo veremos en breve).

Ahora que tenemos la URL, y sabemos cómo enviaremos la información; podemos inicializar dichos valores en el objeto Ajax. Para ello usamos el método ajx.open.

Ahora el objeto XMLHTTPRequest sabe todo lo necesario para realizar una petición: la dirección, los parámetros a enviar, y la forma de enviarlos. Sólo nos queda lanzarla, y lo hacemos con el método ajx.send. Este método podría enviar también las variables POST en un objeto JavaScript. Algo como:

ajx.send({
		var1 : “valor 1”
		, var2 : “valor2”
});

Por último, necesitaremos controlar el estado de la petición para saber cuándo está lista, y actuar en consecuencia. Eso lo hacemos con un controlador de eventos, y el evento en cuestión es: ajx.onreadystatechange.

Este controlador se ejecutará cada vez que el valor de la propiedad ajx.readyState cambie, por lo que necesitaremos realizar una serie de validaciones antes de asumir que la petición ha finalizado:

Por una parte, necesitamos controlar que el valor de ajx.readyState sea 4 (que quiere decir que la petición ha finalizado), y por otra, necesitamos controlar que el valor de ajx.status sea 200 (este es el valor que retorna el servidor y que significa que no ha habido errores al servir la petición). No está de más comprobar que la propiedad ajx.responseXML contenga algún valor, ya que es donde esperamos encontrar el resultado.

Y ahora que sabemos que nuestra petición ha finalizado de forma satisfactoria, debemos analizar el resultado. Esto lo hará la función _ciudadesCargadas.

function _ciudadesCargadas(xml)
{
	var ciudad = document.getElementById("ciudad");	

	var ciudadesDat = _parseaCiudades(xml);

	_actualizarSelectCiudades(ciudad, ciudadesDat);

	ciudad.disabled = false;
}

Y el funcionamiento de esta función es muy simple. Se limita a hacer dos cosas: por una parte, procesa el resultado en la propiedad ajx.responseXML mediante la función _parseaCiudades y obtiene toda la información del xml en un objeto de JavaScript (bastante más manejable que el objeto XML que obtenemos del ajx), y por otra parte, envía el objeto al método _actualizarSelectCiudades, que se encarga de modificar el select de ciudades con los nuevos valores.

Además, una vez que todo el proceso ha terminado; esta función activará el select de ciudad (que se desactivó al lanzar la petición).

Esta sería la función que parsea el XML:

function _parseaCiudades(xml)
{
	var data = {
		pais: null
		, ciudades: []
	};

	var pais = {
		codigo: null
		, nombre: null
	};

	var mainNode = null;

	//buscamos el nodo principal. no podemos asegurar su posición en el objeto xml por razones de crossbrowsing.
	for(var i = 0; i < xml.childNodes.length; i++)
	{
		var node = xml.childNodes[i];
		if (node.nodeName == "pais")
		{
			mainNode = node;
			break;
		}
	}

	//rellenamos la estructura pais y lo añadimos a la estructura data.
	pais.codigo = mainNode.getAttribute("codigo");
	pais.nombre = mainNode.getAttribute("nombre");

	data.pais = pais;

	var ciudades = new Array();
	//creamos un array de estructuras ciudad y lo añadimos a la estructura data.
	for(var i = 0; i < mainNode.childNodes.length; i++)
	{
		var node = mainNode.childNodes[i];

		if(node.nodeName == "ciudad")
		{
			ciudades[ciudades.length] = {
				codigo: node.getAttribute("codigo")
				, nombre: node.firstChild.nodeValue
			};
		}
	}

	data.ciudades = ciudades;

	return data;
}

Lo cierto es que él código que encontramos en esta función merece un tutorial aparte. Os invito a que consideréis el código por vuestra cuenta porque de hecho no es demasiado complejo.

Sólo destacar un par de detalles: el objeto mainNode es el nodo principal del XML. En nuestro caso sería el nodo
, y por razones de crosbrowsing tenemos que hacer una búsqueda para encontrarlo (es decir, no podemos asumir que lo encontraremos en una posición determinada).

Por otra parte, notar que lo que hace el objeto en realidad es montar un objeto JavaScript con toda la información y retornarlo. Un objeto más o menos así:

data = {
	país : {
		codigo : ""
		, nombre : ""
	}
	, ciudades : [
		{
            codigo : ""
			, nombre : ""
		}
		, {
            codigo : ""
			, nombre : ""
		}
		, …
	]
}

Y este objeto llegará a la función _actualizarSelectCiudades, que cambiará la información que contiene el select de ciudades:

function _actualizarSelectCiudades(ciudad, data)
{
	var isIe = '\v' == 'v'; //true si estamos en internet explorer

	//vaciamos el option
	var i = 0;
	while(ciudad.options.length > 0)
	{
		ciudad.options[0] = null;
	}

	//añadimos los nuevos elementos
	for(var i = 0; i < data.ciudades.length; i++)
	{
		var el = document.createElement("option");
		el.value = data.ciudades[i].codigo;
		el.text = data.ciudades[i].nombre;

		if(!isIe)
		{
			ciudad.add(el, null);
		}
		else
		{
			ciudad.add(el);
		}
	}
}

Lo que se hace en esta función, es HTML Dom puro y duro. Es decir, modificar los elementos HTML mediante JavaScript. Primero vacía todo lo que hay en el select, y después añade los nuevos valores. Fijaos en la variable isIe: Detecta la funcionalidad del navegador para saber si estamos en Internet Explorer. Necesitamos saberlo por motivos de crossbrowsing, ya que los option se añaden de forma diferente en Internet Explorer y en el resto de navegadores.

¡Hemos terminado!

Después de este ejemplo, ya deberíamos tener más o menos claro como funciona una aplicación basada en Ajax. Hay que tener en cuenta que esto se puede complicar o simplificar tanto como uno quiera. Nuestro ejemplo ha sido muy sencillo, pero Ajax tiene mucha más potencia que esto si se usa bien.

Por otra parte, frameworks como JQuery o Mootools pueden llegar a simplificar muchísimo el trabajo con Ajax. Si realmente te interesa programar basado en Ajax, es obligatorio que les dediques unos minutos.

Manual básico de Ajax (Parte 1)

Juanma — Fri, 05 Feb 2010 13:49:55 +0000

Aún hoy en día, varios años después de la salida de Gmail o google maps y la consiguiente popularización de Ajax, muchos desarrolladores no tienen claro de qué va esto y cómo funciona.

En este artículo pretendo aclarar todo lo que se necesita saber para empezar a hacer pequeñas cosas con Ajax, y aportar una base para poder ampliar conocimientos sobre el tema con la idea de poder afrontar aplicaciones basadas en Ajax más complejas.

Inicialmente, este artículo iba a publicarse completo, pero como es algo extenso, lo dividiré en dos partes: primero, entenderemos qué es Ajax y cómo funciona. En la segunda parte, programaremos un sencillo ejemplo basado en Ajax.

Conviene avisar de que para poder entender algo de lo que se comenta en este artículo, se deben tener conocimientos medios de Java Script y PHP, y conocimientos básicos de HTML.

¿Qué es Ajax?

La mejor forma de comprender qué es Ajax, es averiguar de dónde salen las siglas A.J.A.X.

Ajax significa “Asynchronous Java script And XML”. O en nuestra lengua: “Java script asíncrono y XML”.

De toda la definición, quizás lo más importante sea el concepto “asíncrono”, porque es la clave de todo: al fin y al cabo, lo que nos va a permitir el objeto Ajax es realizar una petición http asíncrona al servidor y procesar su resultado.

Que sea una petición http asíncrona, quiere decir que todo ocurrirá en segundo plano, sin que el usuario se dé cuenta de lo que está pasando.

Típicamente, la petición al servidor generará un resultado XML, aunque no tiene por qué (de ahí que XML se incluya en la definición de Ajax). Y no sólo eso, si no que dicho resultado vendrá en forma de objeto DOM y será fácilmente procesado mediante JavaScript.

Sin embargo, el resultado de una petición Ajax también puede obtenerse como texto plano o como HTML.

Resumiendo, Ajax:

Es un objeto JavaScript que aportará el propio navegador.
Permitirá realizar peticiones asíncronas al servidor.
Aportará un resultado procesado como XML, HTML o, simplemente, un texto plano.

Un poco de arquitectura Web básica

No podemos entender cómo trabaja Ajax, o cómo programar con Ajax; si no tenemos una idea clara de cómo es la arquitectura web básica.

Ajax trabaja como intermediario entre el cliente y el servidor, de ahí que es importante saber de forma básica cómo actúan ambos al realizar una petición http.

Antes que nada, el cliente (que supondremos que es un navegador) realiza una petición al servidor. Básicamente, solicitará un archivo.

El servidor escucha la petición y la resuelve. Esto, puede implicar muchas cosas. Puede ser simplemente localizar un archivo .html y enviarlo al cliente, o puede ser localizar un archivo .php, interpretarlo, acceder a base de datos, etc; para luego generar un nuevo código .html y enviarlo al cliente. Ésta es la parte más importante de nuestra aplicación web, ya que la parte de la aplicación que trabaja en el servidor será la única que no estará limitada por las funcionalidades del cliente. Por ejemplo, no podríamos acceder a base de datos con una tecnología de navegador como JavaScript.

Por lo tanto, hay cosas que nuestra aplicación sólo puede hacer en el lado del servidor. Y para obtener un resultado del servidor, necesitamos generar una nueva petición desde el navegador. Hablando en términos más sencillos: necesitamos recargar la página.

En este punto es donde entra en juego Ajax. Con Ajax, podremos generar esa petición en segundo plano. A base de JavaScript, podemos lanzar la petición, esperar el resultado del servidor, y mostrarlo en pantalla sin que nada de esto interrumpa la ejecución de la aplicación principal.

Algunos ejemplos

Para entender bien qué implica la posibilidad de realizar una petición al servidor en segundo plano, veamos algunos ejemplos.

Caso Gmail

Cuando Google lanzó Gmail, los servicios de Web mail estaban muertos. Nadie confiaba en ellos y siempre era preferible usar un cliente de correo de escritorio. Lo que hace de Gmail un cliente de Web mail tan especial, es que precisamente funciona exactamente igual que un cliente de correo de escritorio; esto se debe a que Gmail fue la primera aplicación web basada en Ajax.

Todo se basa en un detalle: Gmail es capaz de revisar periódicamente los correos entrantes, y mostrar los nuevos resultados en pantalla sin que ello implique un refresco de página. De forma que el usuario puede ver cómo llegan nuevos correos mientras está redactando uno, o mientras está leyendo. Dicho en otras palabras: Gmail es capaz de notificar la existencia de nuevos correos mediante peticiones al servidor que se realizan en segundo plano.

Caso Google Maps

No hay duda de que Google Maps es una de las aplicaciones más espectaculares de los últimos años. Y sin embargo, su funcionamiento es realmente simple. Sin Ajax, un Google Maps no sería posible, o al menos no sin Flash o otras tecnologías externas al navegador.

En realidad, Google Maps simplemente se dedica a analizar en qué posición del mapamundi estamos y que zoom estamos usando. Una vez concretados estos parámetros, se lanza una petición al servidor mediante Ajax, y el servidor notificará al cliente qué imágenes debe cargar, y en qué posición del mapa debe colocarlas. Sobra decir que sólo cargamos las imágenes del mapamundi que se están viendo en ese momento en la pantalla.

Por lo tanto, una vez más vuelve a ocurrir: se han obtenido resultados calculados por el servidor sin que ello haya implicado un refresco de página.

Es todo por hoy

Ahora ya sabemos lo básico de Ajax: sabemos cómo funciona y para qué sirve. En la segunda parte de este artículo, veremos un ejemplo que nos ayudará a comprender mejor cómo funciona la programación basada en Ajax.

Barra estilo facebook con CSS

Juanma — Fri, 05 Feb 2010 10:24:51 +0000

Hoy he entrado en facebook y me he llevado una sorpresa y una decepción. La sorpresa era que me han aplicado el nuevo diseño, ahora parece aún más simple. La decepción era que el nuevo diseño implicaba la desaparición de la barra inferior. Esa barra que tantos tutoriales ha inspirado, esa barra que parecía inmune al scroll del ratón. De ella sólo queda ya una sombra de lo que fue, una pequeña caja de chat en la esquina inferior derecha.

En homenaje a ella, hoy comentaré cómo podemos hacer nosotros la nuestra (demo).

Conociendo el problema

La técnica que se usa para este tipo de posicionamiento, no es JavaScript como muchos pueden pensar; eso es de principios de la década pasada. Con CSS2 llegaron nuevos tipos de posicionamiento para los elementos que nos permitirán crear el efecto.

El posicionamiento que a nosotros nos ocupa es “position: fixed”. Este tipo de posicionamiento coloca el elemento respecto a la ventana del navegador, y podemos especificar las coordenadas con las propiedades “top”, “right”, “bottom” y “left”.

Programamos la barra

Lo que haremos será aplicar estilos CSS a una capa con el id “facebookBar”. Esta clase determinará el posicionamiento a la capa, además de otros aspectos gráficos como color, borde, etc.

Una página para probar

Para que el efecto se aprecie bien, vamos a crear una página con bastante contenido y que nos permita hacer scroll.

facebookBar.html

Como veis, nada del otro mundo. La última capa en el archivo, es a la que se aplicará el efecto de posicionamiento. Sólo destacar el Doctype. Es muy importante para que los navegadores apliquen correctamente los CSS.

El CSS

Os habréis fijado que en el HTML hay un link al CSS. Lo que contendrá ese archivo será un poco de maquetación básica para el contenido de la página, y un par de reglas CSS para aplicar el posicionamiento a la barra de facebook.

facebookBar.css

Comentemos un poco el código.

La clase más importante, es #facebookBar:

#facebookBar
{
	position: fixed; /* Posicionamiento */
	bottom: 0px;
	left: 20px;
	right: 20px;

	border: solid 1px #666666; /* Los bordes de la barra */
	border-bottom: none;

	background-color: #cccccc; /* Un color de fondo */

	height: 25px; /* Altura que tomará la barra. 25 (height) + 4 (padding) + 1 (borde superior) = 30 */
	padding: 2px;
}

Por una parte, está el código de posicionamiento. Como hemos comentado, tiene el position en fixed. También tiene bottom en 0px para que la capa quede pegada al borde inferior de la ventana, y left y right a 20px para dejar 20 píxeles de margen a cada lado.

Aparte de eso, poca cosa más. Un poco de bordes y de color de fondo para dejarla bonita.

Lo último que queda por comentar, es la clase #contenido. Es muy importante, porque hace un pequeño ajuste que evitará que nuestra barra de facebook pise parte del texto al llegar al final de la página.

#contenido
{
	margin-bottom: 50px; /* Evitará que nos quede contenido oculto al llegar al final de la página */
}

El ajuste en cuestión consiste en añadir un margen inferior. Como la barra mide 30 píxeles de alto, y el margen es de 50 píxeles; al llegar al final de la página quedará una separación entre el contenido y la barra de 20 píxeles.

¡Hemos acabado!

Y con sólo estas dos clases CSS tenemos acabada nuestra barra de facebook. El position fixed colocará la capa por encima de cualquier elemento que no tenga un z-index superior, así que modificando las reglas top, right, bottom, left, width y height de #facebookBar podemos adaptarla para muchos tipos de usos. Te invito a que experimentes.

De nuevo activo

Juanma — Thu, 04 Feb 2010 21:45:20 +0000

Hoy, mientras arreglaba un poco el blog que estaba muy abandonado y desmantelado; me he dado cuenta de que hacía cerca de un año que no publicaba nada decente.

Llevaba mucho tiempo queriendo retomar el blog con un aire más profesional / académico, pero no encontraba el rato y las ganas de hacer la reforma que he hecho hoy.

Se ha limpiado casi el 90% del blog, y solo han sobrevivido las pocas entradas sobre desarrollo de software que tenía. Irónico si tenemos en cuenta que dedico el 90% de la jornada a desarrollar software.

Bueno, confío en que todo sea mucho mejor apartir de ahora. En breve un tutotial de Ajax con JavaScript nativo que tengo por ahí pendiente de publicación, y un manual de introducción al desarrollo para microsoft surface (que no verá la luz hasta que se haya publicado en otro lugar).

Olor de código

Juanma — Fri, 05 Dec 2008 00:02:30 +0000

Los programadores solemos cometer dos errores:

El primero, pensar que con echar un simple vistazo a un código podemos determinar si es o no es un buen código.

El segundo, pensar que lo anterior es un error.

En realidad, la primera impresión de un código es bastante válida. Cuando un código no nos convence a primera vista, es por que despide un “olor” poco convincente. Lo que vengo a decir, es que esto del olor de código existe y está mas o menos documentado. Sin embargo, no he encontrado nada en español sobre el tema, así que vamos allá:

¿Qué cosas provocan mal olor en nuestro código y como solucionarlas?

Código duplicado. A primera vista ya podemos ver trozos de código demasiado parecidos. Probablemente deberíamos encontrar una forma de compartir ese código para no repetirlo por todo nuestro programa.
Métodos demasiado largos. Cuando un método es demasiado largo, lo más seguro es que debamos dividirlo en más métodos más básicos. Eso hará nuestro código más comprensible y más sencillo de arreglar cuando falle (porque creeme, fallará).
Clases demasiado largas. Un poco en la misma linea que lo anterior, es posible que necesites abstraer un poco más tu código, y dividir una clase en varias clases pequeñas.
Envidia de características. Lo mismo te digo una cosa que te digo otra. Si notamos que una de nuestras clases usa excesívamente los métodos de otra, merece la pena cosiderar si realmente esas dos clases deberían estar separadas.
Intimidad inapropiada. Una clase no debería depender de otras clases en según que aspectos de implementación críticos. Las clases deberían ser reutilizables y independientes. En estas situaciones tambien deberíamos plantearnos la fusión de las dos clases.
Rechazo del legado. Una clase que sobreescribe un método heredado debería respetar el propósito inicial del método. Con esto quiero decir que no es lógico ni aceptable que un método que calcule raízes cuadradas se sobreescriba con un método que elimine acentos en una cadena de texto. No tienen nada que ver el uno con el otro. La pregunta que deberíamos hacernos ahora es: ¿realmente esta clase debería tener este padre y no otro?. Recordemos que la composición siempre es una solución válida.
Clases perezosas. Hemos hablado de clases demasiado largas, pero ¿y las clases demasiado cortas?. Puede que debamos integrar su funcionalidad en otra clase.
Métodos duplicados. ¿Realmente necesitamos ese método para elevar al cubo teniendo este que eleva al cuadrado?. Mucho mejor si hacemos un método capaz de elevar a n. Debemos evitar tener varios métodos con funcionalidades parecidas y buscar más métodos configurables con parámetros.
Complejidad artificial. ¿Estamos ante un problema complicado o nosotros lo hemos vuelto complicado?. No tiene sentido forzar, por ejemplo, el uso de complejos patrones de diseño en problemas que realmente son tan sencillos que no los requieren.

Estas son algunas fuentes potenciales de problemas que podemos llegar a tener y que son fáciles de ver con un vistazo simple al código. El código puede, y debe; ser bonito.

Google sitemaps, plugin para wordpress

Juanma — Tue, 11 Sep 2007 22:21:38 +0000

Hacía tiempo que quería comentar esto. Los sitemaps son archivos XML con una sintaxis específica, que aporta una información a los buscadores que les es de mucha utilidad para indexar nuestro sitio. No importa decir que a los webmasters nos es de mucha utilidad que a los buscadores algo de nuestro sitio les resulte de utilidad. Vaya gilipollez xD.

Bueno, Google sitemaps es un sistema de sitemaps creado por Google para indexar sitios en dicho buscador.

Sobre sitemaps hay mucha información en la web, pero siempre algo incompleta. En estos asuntos de posicionamiento siempre hay cierto halo de misterio: el secretismo que guardan los buscadores con la intención de ser los mejores provoca que la gente especule mucho y nadie hable con seguridad sobre como posicionar una web.

En fin, lo que nos ocupa es este plugin para wordpress, que automatiza todo el mantenimiento del sitemap de tu blog.

http://www.arnebrachhold.de/2005/06/05/google-sitemaps-generator-v2-final

Fácil de instalar y de configurar, lo único que se le pide a un buen plugin. A mi inicialmente no me funcionaba, pero creo que el servidor tenial algún problema extraño. Sin venir a cuento ahora me ha empezado a ir bien… en fin, prefiero no preguntar, el servidor nunca ha ido demasiado fino… pero eso es otra historia xD.

HeidiSQL

Juanma — Mon, 16 Jul 2007 13:07:16 +0000

Con este curioso nombre se me presenta hace un par de dias una aplicación de escritorio bastante interesante para trabajar sobre bases de datos. La historia es algo así:

Un programador que en ocasiones trabaja con nosotros, me habló de que él no suele usar phpMyAdmin para trabajar en las bases de datos, él usa mysql-front; que viene siendo lo mismo pero como aplicación de escritorio. Las ventajas de gestionar una base de datos desde una aplicación de escritorio en vez de desde la web es obvia. Ganas comodidad y velocidad. Así que me pongo a informarme sobre el programa.

Lo primero que me llevo es una gran desilusión, parece ser que la aplicación es de pago. Nisiquiera me molesto en bajar el trial de 30 días. Claro, podria hacer algún truco, pero el problema no era ese, sinó que la verdad, me repugna bastante el software de pago, mi intención es llegar a prescindir de el.

Total, que pasa el tiempo y el otro dia me decido a buscar algo así de código abierto. Y cual es mi sorpresa al encontrarme con HeidiSQL, que no solo es un programa con la misma funcionalidad que mysql-front, sino que es el propio mysql-front antes de que este se hiciese de pago. Parece ser que el autor lo vendió a quien fuese que lo hizo de pago y posteriormente liberó el código original bajo este nuevo nombre.

En fin, no he tenido tiempo de probarlo demasiado, pero parece que esta bastante bien. Quizas le falta un editor gráfico para la base de datos (algo que te permita construir la estructura en vista de diagrama), pero por lo demás tiene buena pinta.

HeidiSQL