Nuevo gestor de uploads en Flickr

Flickr es una de las aplicaciones que desde el principio han marcado tendencias. Desde que se abrió hemos visto en ella tanto el uso intensivo de javascript, javascript asíncrono + XML (Ajax) y mucho Flash.La última mejora, consiste en usar el gestor de subidas que flash trae desde su versión 8 ( gestionado con la clase FileReference) y que permite mostrar el progreso de subida de los archivos.Flickr file uploader 

Hemos visto muchas otras soluciones de esto mismo, usando Ajax, pero si hay que elegir, sin duda me quedo con la implementación de Flash. Aún no funciona en algunas plataformas, por ejemplo si estás en Linux, te mostrará el antiguo sistema de subida. Aunque si tienes alguna versión “debug” y muy nueva del plugin, puedes probarlo usando la url http://www.flickr.com/photos/upload/?nocheck para que no haga la comprobación.

Guardar imagenes en mysql

Me ha vuelto a llegar de nuevo la pregunta de si es más interesante guardar las imágenes dentro de la base de datos o en el sistema de ficheros del Servidor.

Para todos aquellos que tengais dudas de cómo almacenar imagenes en MySQL, hace bastante tiempo escribí un artículo que os puede resultar interesante.

En general, mi experiencia sobre el tema me lleva a recomendar que se use el sistema de ficheros del servidor antes que guardar la imagen directamente dentro de la base de datos.

Algunos de los inconvenientes que me he encontrado:

  • lentitud en las consultas a la tabla que contiene las imágenes.
  • dificultad a la hora de recuperar las imágenes.
  • dificultad a la hora de exportar la información de la base de datos e importarla en otro servidor / base de datos.
  • sobrecarga del servidor (más pasos e instrucciones para conseguir algo que puede ser muy simple).
  • etc.

Además, el tener disponibles las imágenes en carpetas del servidor os permitirá usar de forma sencilla herramientas de redimensionado y retoque como la biblioteca GD o las de imagemagick.

Por lo tanto,  mi recomendación es – siempre que sea posible – evitar guardar las imágenes directamente en la base de datos.

Codigos postales de España

Desde que escribí el artículo de Provincias y localidades de España / Códigos postales, me ha sorprendido que se haya convertido en uno de los más leidos del blog. Me alegro, porque eso significa que es útil y esa era la finalidad con la que lo escribí.

Veo también en las estadísticas que el tema de buscar un codigo postal es un problema muy común, por eso he escrito una pequeña utilidad para encontrar cualquier codigo postal de España.

Aún está un poco verde, por lo que puede tener fallos. Espero que la probeis y que si no os ayuda a encontrar el código postal que buscais, me lo comenteis para ir mejorándola.

Es muy sencilla, simplemente eliges la provincia y la localidad y escribes la calle y el número. En caso de que haya varias coincidencias para una calle determinada, el sistema mostrará la lista completa.

Click2map herramienta para crear mapas de Google online

Desde que Google lanzara su API para interactuar con Google maps, somos muchos los programadores que lo hemos usado para nuestros proyectos. La potencia y facilidad de uso que nos dá su interfaz, unido a lo sencillo que es programarla, hacen que esta herramienta sea la número uno para insertar mapas en la web.

Pero lo complicado o entretenido viene cuando debes señalar varios puntos en el mapa, vete aquí, pincha allí, apunta las coordenadas… y mientras más puntos sean, claro, más entretenido.

Para ayudarnos en esta tarea, nace ahora la herramieta click2map, que nos permite editar nuestro mapa online y luego exportar o publicar el código resultante.

click2map

Aunque aún esta en una fase beta (bastante beta), ya es usable y muestra bastante de su potencial. Es muy cómoda de usar y muy completa y han pensado en todos los detalles para hacer fácil y entretenido, lo que antes era un  poco engorroso. Se ha basado en Bindows, el entorno Ajax de .NET.

Una de las pegas que le pongo es que no esté completamente abierta, al menos en su fase beta (tienes que registrarte como usuario) y que es bastante lenta (al menos en mi Firefox).

Más información: http://www.click2map.com/
Vía: ajaxian

Herramientas para el desarrollador avanzado

Os paso una lista que encontré hace tiempo y que tras ir probando me ha resultado muy útil. Todas son herramientas para hacer más fácil la vida del desarrollador web (en el caso de que esto fuera posible ;) ).

Validación

Javascript

Sitios web

ASP.NET

Proxies y herramientas relacionadas

Muchas de ellas ya os serán familiares pero seguro que descubrís alguna nueva que os facilita la tarea.

vía Web Development Tools for the Power Developer.

Documentando nuestro codigo javascript

Hasta ahora, conocía bastantes utilidades para documentar el código PHP, Java, C++… pero no conocía muchas para javascript.
Como cada día este lenguaje va tomando importancia en nuestras aplicaciones y empezamos a escribir clases y librerías completas, creo que es importante contar con una de estas herramientas.
En concreto me refiero a Natural Docs.

Con esta herramienta y 10 o 15 minutos dedicados a formatear un poco nuestros comentarios, conseguiremos disponer de documentación clara y estructurada en html.
Además incluye tooltips y una utilidad de búsqueda.

Podes ver un ejemplo de como queda en: http://people.apache.org/~jkuhnert/

Usando el widget dojo ComboBox

Uno de los controles de interfaz que siempre he echado en falta en HTML ha sido el control ComboBox (o caja combinada), que une la funcionalidad de un campo de texto simple con una lista de elementos. El equipo de dojo ha desarrollado su equivalente usando javascript y el DOM y dándole funcionalidad AJAX. Además se han preocupado de que funcione en los principales navegadores (IE, Mozilla, KHTML/Safari y Opera).
A pesar de llevar ya un tiempo y disponer de una comunidad que va rápidamente en aumento, uno de los problemas del Toolkit Dojo es su carencia de buena documentación y ejemplos de uso. Ésta es la razón por la que me gustaría contribuir con este artículo a dar un ejemplo de uso real de este “widget”. En el ejemplo me voy a centrar exclusivamente en el lado cliente (XHTML + CSS + AJAX).

Durante el desarrollo de Casarus, estoy poniendo en práctica muchas de las novedades de la programación en lado cliente, ya que creo que contribuyen a mejorar la experiencia del usuario y ayudan a que consiga lo que quiere de forma más fácil y más rápida. En este caso, he usado el control ComboBox para ayudar en la introducción de la población en un formulario de búsqueda, de forma que una vez elegida la provincia, al ir escribiendo en el cuadro de la población se va autocompletando el nombre de la misma desde la lista de poblaciones de la provincia elegida. Una imagen vale más que mil palabras:

Dojo ComboBox

Lo que queremos conseguir es que cuando el usuario seleccione una provincia, el control comboBox se llene con las poblaciones de esa provincia, de forma que ayuden al usuario a autocompletar el nombre que busca.
Lo primero que tendríamos que tener es una base de datos donde se relaciona las poblaciones con su provincia correspondiente y un script que dada una provincia genere una respuesta JSON (es el único tipo de datos que acepta el dojo ComboBox por el momento). En nuestro caso ese script es http://www.casarus.es/ajax/poblaciones/json/29. Donde el 29 del final indica el código de la provincia elegida (en este caso Málaga). Esto generaría una salida como:

[
  ["Albaicin","24343"],
  ["Alcaucin","24344"],
  ["Alcorrin","24345"],
  ["Alfarnate","24346"],
  ["Alfarnatejo","24347"],
  ["Algarrobo","24348"],
  .
  .
  .
]

Como veis se trata de un array javascript que en cada posición contiene otro array con dos campos: el nombre que aparecerá en la lista, y el valor que tiene ese nombre para el sistema (seria el equivalente a lo que va entre las etiquetas “option” y lo que va dentro del “value” de la misma “option”).

Crear el control ComBoBox es bastante sencillo. Incluimos dojo:

<script type="text/javascript" src="public/js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require('dojo.widget.ComboBox');
</script>

Creamos el control en el lugar adecuado (dentro de nuestro form) como si se tratara de un control de tipo input normal:

<input dojoType="ComboBox"
  dataUrl="http://www.casarus.es/ajax/poblaciones/json/1" 
   style="width: 300px;" autoComplete="true" name="poblacion" id="comboPoblaciones" />

Esta sentencia, creará el control ComboBox y lo llenará con los valores obtenidos desde la dirección que hemos especificado en la propiedad “dataUrl” (las poblaciones de Ávila). Y automágicamente nuestro control ComboBox ya estará funcionando.

Lo siguiente es conseguir que cuando se cambie la provincia, el control combobox se actualice con las poblaciones de esta nueva provincia. Supongamos que la lista de provincias es:

<select name="provincia" id="provincia" onchange="actualizaPoblaciones (this.value);">
	<option value="1" selected>Alava</option>
	<option value="2">Albacete</option>
               .
               .
               .
<select>

Hemos capturado el evento “onchange” para que se llame a nuestra funcion javascript “actualizaPoblaciones” pasándole el valor de nuestra elección en la lista. El código de esta función sería:

function actualizaPoblaciones (prov)
{
	var url = 'http://www.casarus.es/ajax/poblaciones/json/' + prov;
        var combo = dojo.widget.byId('comboPoblaciones');
	dojo.io.bind({ 
			url: url, 
			load: function(type, data, evt) { 
				combo.dataProvider.setData(data)
			},
        		mimetype: "text/json"
    	});
}

En resumen, lo que hace la funcion es crear un evento AJAX que carga los datos de la nueva URL y se los pasa al ComboBox para que se actualice. Aquí se nos presenta un problema común a todas las aplicaciones AJAX que es el de las múltiples llamadas casi concurrentes, pero os dejo a vosotros el encontrar una solución.

Os dejo un ejemplo simple del uso del dojo ComboBox.

Otra interesante lista de ejemplos.