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:

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.

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!

Ver más en flickr

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:

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

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

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

Javascript sounds like it has something to do with Java. It Doesn’t.

In fact, Java is to JavaScript as ham is to hamster.

- De Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip
de Smashing Magazine de Brad Colbow.

P.S: El cómic es interesante, lectura recomendada.

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:

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.

Aquí teneis el css completo del blockquote:

Esto sería un ejemplo de lo conseguido hasta ahora:

Lorem ipsum dolor sit amet.

Como se puede ver, aun falta colocar el cierre de las comillas. Como no podemos poner más de una imagen de fondo, crearemos una clase blockquote del tag html parágrafo p de la forma: p.blockquote, en el cual encerraremos el texto del blockquote y mediante el cual colocaremos el cierre de las comillas.

En el css de esta nueva clase p.blockquote simplemente colocaremos la imagen mediante los atributos background y definirimos un márgen para darle visibilidad mediante padding como ya hicimos anteriormente, quedano el código css de la siguiente manera:

Finalmente, lo unico que tendremos que tener en cuenta es a la hora de escribir una blockquote hacerlo de la siguiente manera:

Y el aspecto final sería:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas, ligula vel vehicula iaculis, est urna posuere augue, vitae cursus.

Con este pequeño tip de css y haciendo volar la imaginación se puede dar vidilla a las blockquotes y que no se vean tan sosas. Espero que os haya servido.

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!