Link del día: Qué recuerdan los usuarios de tu sitio?
Tanto para probar un diseño o como para probar un website o aplicación web, ya hemos hablado de varios sistemas que nos permiten evaluar qué tan eficiente es nuestro diseño (recuerdan el link de Usabilia?). Hoy tenemos dos más muy similares, basados en la prueba de los cincos segundos.
Al usuario que va a efectuar la prueba, se le muestra un screenshot de nuestro website o nuestro diseño, y luego de eso él tiene que escribir las 5 primeras cosas que recuerde haber visto. Por supuesto, nos permitirá identificar fácilmente así qué elementos son los que realmente llaman la atención del visitante al primer momento. Y sabemos que si ganamos la atención en ese primer momento, hemos tenido éxito.
Por un lado tenemos a FiveSecondTest, en sus versiones paga y gratuita. Esta aplicación es de la gente de UsabilityHub, que ya tienen una serie de productos para la medición de la usabilidad de aplicaciones web, incluyendo también a NavFlow y a ClickTest.
Por otro lado está Clue, un servicio gratuito muy similar, en donde solo podremos probar aplicaciones web.
Soy un zorrinito probado.
Link del día: Buscar imágenes desde imágenes
Alguna vez hablé sobre un sistema que nos permitía buscar imágenes que contuvieran ciertos colores. Pasaron los meses y ya se convirtió en algo común que todos podemos hacer a través de Google Image Search. El buscar imágenes similares también es algo que podemos hacer, también desde Google Image search.
Pero cuando tenemos una imagen, cómo la utilizamos sin palabras para buscar en donde se encuentra? O para buscar imágenes similares?
Entonces es cuando queremos hacer image reverse search, es decir, buscar desde imágenes, o buscar imágenes similares.
La web de GazoPa (gracias @baldosin) nos permite hacer esto, subiendo una imagen, linkeando una desde otra web, dibujando, usando la cámara web, o introduciendo palabras clave que creemos están relacionadas.
Eso de dibujar es muy similar al software imgSeek para Linux (también gracias a @baldosin), que nos permite utilizar esta funcionalidad de una forma más personal.
Finalmente, mi preferido es TinEye, que a mi parecer me ha dado mejores resultados y parece que está creciendo.
Soy un zorrinito rastreador.
Link del día: Gráficos para tu web, Flash + HTML5
Gracias a DN pude checkear la web de ZingChart, un producto que nos proporciona la posibilidad de generar gráficos interactivos a través de datos JSON. Toda esta interactividad puede lograrse a través de AJAX, permitiendo una buena experiencia del usuario y una riqueza gráfica interesante.
Más allá de las características del producto (que son muchas), hay dos a destacar. La primera de ellas, es que ahora nos provee la posibilidad de utilizar su versión HTML5 cuando sea posible, permitiéndonos de otra forma volver a Flash. Comparen ustedes mismos y vean las diferencias de velocidad y tamaño.
La segunda característica es que a pesar del precio que tiene este producto (algo caro en mi opinión personal) es que podemos bajar la versión gratuita, totalmente ilimitada en su uso permitido, y la única contra que tiene es un link al sitio original y un textito que dice “Powered by Zing Charts”. Yo creo que vale la pena, no?
Soy un zorrinito gráfico.
Link del día: Hermoso JavaScript!
Si ustedes han estado trabajando en análisis de algún sitio, ya sea por cuestiones de seguridad, curiosidad o investigación, muy seguramente habrán encontrado que analizar el JavaScript luego de que se comprime lo mayormente posible es un dolor. Por supuesto, sabemos que sigue siendo JavaScript válido porque se ejecuta, pero lo que nos falta es una forma de poder leerlo de forma simple.
JavaScript Beautifier se encarga de eso, toma nuestro input y lo convierte en JavaScript fácil de leer. No sólo eso, hay varias sugerencias extras al final de la página, pero si preferimos no hacer caso a ellas, el beautifier funcionará siempre online. Dice también de-obfuscar los crípticos códigos generados por JavaScript Obfuscator.
Soy un zorrinito arregladito.
Link del día: Herramientas .NET
Buscando una herramienta en específica me di cuenta que Microsoft dispone de una sección para todas las herramientas extras para .NET, llamada .NET Framework Tools. Me pareció que había muchas cosas interesantes para los que trabajamos en ese entorno.
Todas estas herramientas ya están incluidas en el entorno de Visual Studio. Por ejemplo el Assembly Binding Log Viewer. Gracias a él sabremos cuando no se encuentra una librería, en donde fue que se buscó. SqlMetal nos permite regenerar los archivos de DataContext de LinQ to SQL. GacUtil nos permite administrar el Global Assembly Cache.
Y hay más, por supuesto, muchas de ellas habrán encontrado su camino dentro del entorno visual, pero nunca está de más conocerlas.
Como extra y no relacionado les dejo una infografía sobre todos los personajes de Hanna Barbera, una curiosa infografía. Con gusto linkearía al Flickr de Juan Pablo Bravo (el autor) pero lo ha hecho privado, junto con otras infografías de ese estilo.
Soy un zorrinito útil.
Link del día: Feedback 2.0
En el momento en que una aplicación web es publicada, es muy importante que podamos tener algún tipo de feedback o resultados de opinión de los usuarios mismos. No solamente nos brindarían información sobre qué fallas han detectado (lo que, por supuesto, esperamos que sean las menos posibles) sino sobre nuevas ideas y posibles caminos que esta aplicación podría comenzar a transitar. Pero el proceso de toma de esa decisión es algo difícil.
¿Por qué no dejarle este trabajo a otra aplicación web 2.0? Estoy hablando de UserVoice, una web de valorización de ideas en donde cada persona puede publica su propia idea y/o votar por ideas de los demás.
Para ver un ejemplo, pueden ver el sistema de UserVoice para HiTask, una web de task-managing de la que hablaré en algún momento.
En este sistema, uno tiene una cantidad de puntos limitados para utilizar, y uno puede cambiar esa valorización siempre que quiera, o recupera sus puntos cuando la idea que los tiene fue implementada o cancelada.
Dropbox tiene una aplicación similar llamada Votebox, aunque desafortunadamente tienen que estar loggeados para poder verlo (siempre pueden registrarse si lo desean). Realmente no sé si es un sistema tercerizado o si lo han hecho ellos mismos.
Soy un zorrinito con feedback.
Link of the day: Procedurally speaking...
Remember that link where I spoke about different algorithms? I made a quick reference to Pixel City. If you had the chance to see it, and furthermore, if you have had the chance to download it and test it yourself, you might have seen that for a really little binary executable we can get really great things.
That’s because of content procedural generation, this means that the data you see is not configured or saved anywhere, it is just created in the moment that it is needed, with a set of rules that make sure that the result is close as expected.
Of course, this isn’t something new, lots of games already make use of this technique and not even that, there are a couple of games made entirely on this fashion. You should check out .kkrieger, a 96k 3D full level FPS game. That’s right. 96k.
You should also check Synth, an almost 100% procedural generated game, where even the music is generated in real time.
There’s also a nice experiment with procedural animation and genetic algorithms called Creepy Crawlies. In this application, you can create a creature with a certain configuration of bones (fixed length), claws (points it can grab on to) and muscles (parts it can expand/collapse), and the genetic algorithms will make it evolve so it grows up to the best locomotion technique. The animation is done procedurally too.
I’m a generated little skunk.
Link del día: Colaboración sin comunicación
En Juegos.MicroSiervos publicaron un pequeño artículo sobre un juego llamado SwarmNation. El juego es realmente simple, pero no por eso fácil. Dejenmé describirlo:
Cada jugador controla un píxel o un cuadradito, sobre un mundo de cuadrícula. En este mundo podemos movernos arriba, abajo, a la izquierda y a la derecha según nuestro antojo, excepto que ya haya alguien más ocupando ese puesto. A cada momento, el juego indica que se debe formar una cierta figura. Esta figura, por supuesto, requiere de más de un pixel.
Aquí lo interesante comienza. Tenemos que coordinarnos con el resto de los jugadores para poder formar esa figura, y en el tiempo limitado que esa figura nos ofrece. Aquellos píxeles que formen parte de la figura formada, sumarán puntos. Aquellos que hayan quedado fuera, restarán puntos.
¿Cómo nos coordinamos entre los distintos jugadores? Bueno, realmente no hay muchas opciones. Dicen en MicroSiervos que no hay comunicación entre los jugadores, pero tenemos una herramienta: si presionamos la barra espaciadora, nuestro píxel se volverá naranja un momentito, como una forma de llamar la atención.
Yo lo estuve jugando un rato y es realmente difícil interpretar sólo desde los movimientos de los jugadores quiénes son los que emprenden nuevas figuras, quiénes prefieren comenzar, quiénes deciden quedarse para acomodar los detalles al final… y lo peor, la gente a veces cambia sus estrategias. Realmente es un juego difícil. Y por si fuera poco, uno mismo tampoco está seguro de cuál es la mejor estrategia para ganar.
La gente de SwarmNation tiene una cuenta en Twitter, en donde cuentan, por un lado, que los servidores están teniendo mucha carga últimamente y por eso puede que el juego no comience para nosotros. Por otro lado, también cuentan que consideran esto un juego interesante y de alguna forma un experimento social. Por si fuera poco, también postean cosas curiosas al respecto, como el caso en donde un píxel se sacrificó por otro, o la primera vez que los píxeles formaron una espiral (posiblemente una de las figuras más difíciles, require mucha coordinación).
En fin, pruebenló y me cuentan cómo se llevan con sus desconocidos cooperadores.
Soy un zorrinito colaborativo.
Link del día: Escribir JavaScript, al estilo Google
Dejando de lado a Google Closure, una herramienta de la que hablamos hace tiempo, hay algo que a muchos otros nos interesa al momento de programar: la forma en la que el código se ve. Por supuesto, más allá de ese extraño gusto por un código artísticamente elaborado, hay ciertas líneas que podemos seguir para que no sólo sea más bonito, sino más fácil de leer, interpretar y más eficaz.
Google vuelve al rescate como más de una vez lo hace, compilando públicamente su manual de estilo para codificación JavaScript. Este manual, llamado Google JavaScript Style Guide, nos provee de información extra sobre cada punto. Por ejemplo, sabían que además de ser más difícil, si una variable no está declarada con var, es puesta en el scope global? [link] Yo no. O cómo utilizar la clausuras de funciones para evitar memory leaks.
Está lleno de información interesante para el programador web.
PD: Como extra, pueden checkear el proyecto en Google Code sobre estilos de Google, para distintos lenguajes.
Soy un zorrinito JavaScript.
Validating for real alphabetic
Validation is an essential part of any application. We need to check that the data entered is in the range of the set of data we can handle. And not only security purposes, but also to make sure that is is into what we can process.
Not so long ago, I had to make a very common validation: Alphabetic Characters. Most of us developers would have just created a regular expression against the set A-Za-z or maybe using another set like \w. Well, this does not always gives us what we really want.
In my case, I had to validate for more than just A-Z. This is, my application should allow for different languages where the alphabet was extended from the basic Latin 26-letters.
Accented vowels
Sure, I could add the accented vowels. á, é, í, ó, ú, á, é, í, ó, ú. Well, that’s the acute accent. We have the grave one: à. We have the circumflex: â. Diaeresis: ä. Oh, wait. They’re even more. Suddenly, too much to remember or to manually write.
Wait, there’s more…
And not only vowels. It seems that consonants can also be accented. ý. ñ. š. ç.
Oh, there are even more letters. In German, for example, the “ss” letter combination evolved to ß. Those are ligatures: œ. þ. æ.
These are all, believe it or not, part of the Extended Latin Alphabet. So, if I wanted Johann Strauß, Kurt Gödel or Maria Skłodowska (later known as Mrs. Curie) to have a user in my application, I needed to allow this type of entrances.
Languages provide a tool for that
Some languages do provide a tool for that. For instance, Perl provides the \X operator. This matches any unicode character. Anyway, this is a little more than we want to actually achieve.
Other tool languages provide is the \p{} and \P{} operators. This goes for Perl and .NET. I think Java also does. More information on these special features can be read at the Unicode section of Regex Tutorial.
However, if you’re trying to have a rich web 2.0 application, then you need to have this working in JavaScript too. Of course, server side validations need to be made, but still, a rich user experience demands that we do not wait to go to the server until we give the user a “Invalid name” message or something alike.
What can we do in JavaScript?
JavaScript does provide support for the \uXXXX operator to match a specific unicode codepoint. Knowing that, I made a quick look trought the Unicode Block Listing, and gathered all those points that where part of the Latin or extended Latin alphabet. Here’s what I found:
- From block: C0 controls and basic Latin (U+0000–007F)
\u0041-\u005A
\u0061-\u007A - From block: Latin-1 Supplement (U+0080–00FF)
\u00C0-\u00F6
\u00F8-\u00FF - From block: Latin extended-A (U+0100–017F), Latin extended-B (U+0180–024F), IPA Extension (U+0250-02AF)
\u0100-\u02AF - From block: Latin extended additional (U+1E00–1EFF)
\u1E00-\u1EFF - From block: Latin Extended-C (U+2C60-2C7F)
\u2C60-\u2C7F
In case you wonder why the range Latin-1 Supplement leaves out the \u00F7 codepoint, it’s because it is a division symbol.
Ok. Making this all one RegExp (I added a space at the end, that is on purpose):
var regex = new RegExp(/^[\u0041-\u005A\u0061-\u007A\u00C0-\u00F6\u00F8-\u00FF\u0100-\u02AF\u1E00-\u1EFF\u2C60-\u2C7F ]+$/);
Let’s simplify it a little bit (\u00FF and \u0100 are consecutives, we can include them in one single range).
var regex = new RegExp(/^[\u0041-\u005A\u0061-\u007A\u00C0-\u00F6\u00F8-\u02AF\u1E00-\u1EFF\u2C60-\u2C7F ]+$/);
And there it is! You can try it out at the JavaScript Regular Expression Tester!
By the way, this expression should work on other languages as well.