Category: Desarrollo web

Teclas intercambiadas en Ubuntu 11.10 y teclado Mac aluminium

Desde hace algunas semanas uso Ubuntu 11.10 como entorno de trabajo junto con mi apreciado teclado Mac aluminium.

Al ser web developer uso constantemente la tecla </> (mayor que / menor que). Todo funcionaba bien hasta que un día de repente se intercambió con la tecla ºª que está al lado del 1, lo que fue una catástrofe para mi, porque estaba todo el rato equivocándome de tecla y esto entorpecía mucho mi programación.

Total, que empecé a buscar por google si alguien habia tenido el mismo problema y después de probar algunas soluciones propuestas y seguir teniendo el mismo problema decidí combinar un par que encontré ayer mismo. Utilizando el manual de .Xmodmap de Christian Weiske y una solución al problema de Asier Marqués que encontré por la red y que no me funcionó, hice lo siguiente que devolvió cada tecla a su sitio:

En lugar de escribir un .xsession en la raiz de directorio de usuario ( /home/<tu usuario> ) cree un archiv .Xmodmap con el siguiente contenido:

keycode 49 = less greater less greater bar brokenbar bar
keycode 94 = masculine ordfeminine masculine ordfeminine backslash

Una vez creado el archivo, cierras la sesión de usuario y vuelves a entrar, et voilà! Funciona!

Espero que esto sirva para más gente que como yo se ha frustado con el este intercambio de teclas en el teclado Mac aluminium y Ubuntu 11.10.

Abredatos 2011

Este año he participado en el concurso Abredatos junto a tres amigos. Para el que no lo sepa, Abredatos es un concurso de desarrollo exprés que consiste en hacer de 0 una aplicación utilizando datos públicos y hacerlo en 48 horas. El objetivo es fomentar que las administraciones publicas proporcionen datos de forma abierta y accesible a los ciudadanos para que los podamos consultar y reutilizar.

Pues bien, para mí se trataba de la primera vez que participaba en un concurso de este tipo, una maratón de programación y la verdad es que me daba un poco de miedo el hecho de que se hiciera demasiado largo y pesado como para aguantar dos días sentado delante del ordenador. Pero la experiencia ha sido todo lo contrario, si que ha sido cansado pero en nigun momento ha sido pesado y o frustante hasta el punto de plantearse el hecho de abandonar, y en cambio he reído hasta que me ha dolido el estómago, he aprendido mogollón de cosas, he creado y he resuelto desafios, en definitiva, he disfrutado y me he enriquecido (de momento intelectualmente y a nivel de experiencia, ya lo veremos si económicamente), por lo que para mi, participar en este concurso ha sido todo un éxito.

Quizá ha sido porque el grupo de cuatro amigos que hemos formado el equipo teníamos el mismo nivel de motivación y una actitud durante el concurso que ha hecho que el ambiente haya sido estupendo y todo haya ido rodado, como he leido en twitter, si hay buen rollo y implicación, también hay diversión y trabajar así es mucho más agradable.

Pues bien, después de 40 horas sin dormir delante de la pantalla, los cuatro mosqueteros del team #t66 hemos engendrado www.openplaya.com, una especie de listad/buscador de playas de España que además oferece datos meteorológicos, imágenes de webcam si están disponibles y equipamientos cercanos disponibles. También incluye un sistema de alertas al que te puedes suscribir que te avisa cuando tu playa favorita tiene una predicción meteorológica de tiempo ideal para ir a tomar el sol o pegarse un bañito.

Para desarrollar esta aplicación hemos usado datos de la web de la Agencia Estatal de Meteorologia (AEMET) http://www.aemet.es/es/eltiempo/prediccion/playas/ , de la Generalitat de Catalunya http://dadesobertes.gencat.cat/es/dades-obertes/dataset_000026.html y de la Generalitat Valenciana http://www.comunitatvalenciana.com/webcam-comunidad-valenciana entre otros muchos, que tampoco los voy a poner todos.

En el campo más técnico hemos usado PHP para el desarrollo y lo hemos basado en el CMS Drupal, al que hemos incluido varios módulos para facilitarnos la faena asi como el uso de alguas librerias como como jQuery y Google Maps Javascript API. El presupuesto ha sido prácticamente 0, ya que sólo hemos gastado lo poco que vale registrar el dominio www.openplaya.com, la comida y la luz que hemos gastado, para que se vea que con ganas y un poco de conocimiento se pueden hacer bastantes cosas y algunas muy chulas, como podeis ver en la lista de proyectos de abredatos.

La realidad que me he encontrado durante y tras la participación en abredatos y es que hay gran cantidad de talento y motivación en nuestro país, como se puede ver en twitter, y que esto me gusta mucho, por eso desde mi humilde blog, os felicito, os doy las gracias y la enhorabuena a todos los que habeis participado en abredatos y a los que nos habéis apoyado. Un saludo a todos!

Para acabar os dejo el timelapse que hizo Josep Valls durante las 40 horas que duró el desarrollo de openplaya.com y algunas fotos de como lo vivimos.

Hasta pronto!

Non stop coding

Abredatos Team 66

Ver más en flickr

Cancelar llamadas AJAX previas

Hace pocos dias, mientras creaba el típico auto-suggest de los inputs de los formularios (en este caso de lugares – ciudades, calles, etc) vi que al tener que realizar una llamada AJAX al web service de geocoding de Google Maps APIs las llamadas se me solapaban dando lugar a un tiempo de espera mayor. Esto era debido a que la petición la lanzaba tras el evento onKeyUp, por lo que si se escribia muy rápido en el input, se lanzaban muchas peticiones muy seguidas y la experiencia de usuario era bastante mala. El efecto que se conseguia era que al acabar de escribir, las respuestas iban llegando y se iban cargando una detrás de otra e incluso parercía que el navegador llegaba a colapsarse.

Antes de cancelar las llamadas previas, unas se superponian a otras dando lugar a un tiempo de respuesta mayor y a una mala experiencia de usuario

La idea pues fue que al lanzar una nueva petición AJAX, se cancelara la anterior de manera que sólo hubiera solo una activa y por tanto sólo se cargaran datos durante las pausas de escritura en el input, y del mismo modo haciendo que mientras se escribía de forma rápida, no colapsar el servidor con llamadas haciendo todo el proceso de una forma menos trabada.

Cancelando las llamadas anteriores, se consigue que los resultados se muestren de forma más rápida y de forma menos trabada.

Entonces empecé a googlear como hacer esto, y encontré algunas respuestas pero ninguna me funcionó (como la de relanzar la petición para cancelar la anterior) y otras me parecieron muy complicadas para el cometido sencillo que tenia (aplicar un patrón observador). Incluso me encontré con quien decía que era imposible abortar la llamada AJAX desde el cliente (navegador).

Pues bie, gracias a jQuery encontré una solución muy sencilla aprovechando el evento beforeSend. Se trata de crear una variable global, donde guardaremos la conexión HTTPRequest, y en dicho evento beforeSend miraremos si hay alguna conexión, si la hay, abortaremos mediante la función abort() y meteremos la nueva conexión realizada en la variable global. Dando paso encontes al evento success, complete o error sólo con una conexión activa. Nuestra llamada AJAX con jQuery deberia quedar más o menos así, sin olvidar declarar la variable httpR como global:

$.ajax({
    url: 'La URL a llamar'
    beforeSend: function(data2){
    /*httpR es la variable global donde guardamos la conexion*/
    if(httpR){
        /*Si habia alguna conexion anterior, la cancelamos*/
        httpR.abort();
    }
    /*Guardamos la nueva conexion*/
    httpR = data2;
    },
    success: function(data) {
        /*Handler al recibir los datos OK*/
    },
    error: function(e, xhr){
        /*Handler de error en la funcion*/
    }
});

Para ver la mejora que se consigue, he preparado una demo que podéis ver aquí y descargar los archivos para probarlo.
Ver demoDescargar archivos

Lo que hace estar a pocas horas de las vacaciones

Estamos aqui agotando las últimas horas en la oficina antes de marcharnos oficialmente de vacaciones y como se nota que la mente se está adelantando un poco y está pensando en otras cosas cuando lo último que he picado ha sido:

<div class="boxContenido">
Lo que sea aqui
</boxContenido>

La cosa es que el compañero tampoco se queda corto y el tio ha puesto:

<p legend="Su texto aqui"></p>

Vamos, que para lo que queda, casi mejor lo dejamos y nos vamos ya. :D
Ya de paso aprovecho para desearos unas felices vacaciones a todos los que leais el blog! Hasta pronto!

Modificando el estilo de las blockquotes

Hola

Con motivo de la anterior entrada del blog, me animé a cambiar un poco el aspecto que tenian las blockquotes en el blog, así que con un poco de css i dos imágenes de unas comillas lo cambié al aspecto que se puede ver actualmente en el post anterior.

En primer lugar, con photoshop o cualquier otro editor, hay que crear dos imágenes con las comillas. Usaremos preferiblemente los formatos png o gif, para poder poner el fondo transparente y así si en el algun momento queremos cambiar el color de fondo de la blockquote, nos será mucho más facil. Tras 5 minutos de photoshop he aquí las comillas:

Abre comillas
Abre comillas

Una vez tenemos las imágenes, procedemos a escribir el css que dará estilo a la blockquote. Como vemos, fijamos el color nergro como fondo, para seguir con la imagen del blog, y colocamos la apertura de comillas ( background-image:url(images/bq1.png); ) arriba a la izquierda ( background-position:left top; ) y sin repetir ( background-repeat:no-repeat; ). Cambiamos también la fuente de texto y el tamaño para diferenciarlo del texto normal. Finalmente mediante margin, posicionamos el blockquote un poco separado de los márgenes del post, diferenciándolo también del resto del texto y mediante padding:1px 50px; dejamos espacio para que se vean las imágenes de las comillas.

Seguir leyendo

Widerbug

Widerbug

Desde que empecé a trabajar en esto de las webs, hay una herramienta que se me hace indispensable, el Firebug.
Para el que no lo sepa es un plugin para Firefox, con el que puedes editar webs y su CSS en vivo ahorrandote de ir probando, recargar y demás.

El caso es que al abrir Firebug, aparece en la parte de abajo de la pantalla, cortándola en horizontal; así pues, con una pantalla 4:3 como la que tengo mi lugar de trabajo, todo perfecto, pero en casa, hace tiempo que abandoné el formato 4:3 y me pasé al panormámico, con lo que la division horizontal es un pelin más incómoda. Hasta hoy. Gracias a anieto2k he descubierto Widerbug, una alternativa de Firebug para pantallas panorámicas, dividiendo la pantalla en modo vertical, y haciendo el uso de Firebug infinitamente más comodo. Muchas gracias a anieto2k!

Widerbug