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.

(Read more →)

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.

(Read more →)

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.

(Read more →)

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.

(Read more →)

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.

(Read more →)

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.

(Read more →)

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.

(Read more →)

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:

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.

(Read more →)

Link del día: Patrones de pantallas

En un artículo de Added Bytes me encontré linkeado esta colección de patrones de pantallas, llamada 12 Standard Screen Patterns, del blog de Designing Web Interfaces. Esta gente se dedica a postear información muy interesante sobre cómo hacer más fácil e intuitiva, a la vez de innovadora, la experiencia usuario-máquina a través de distintas visualizaciones, herramientas, técnicas y aproximaciones.

En este caso, se trata de una colección de pantallas que amoldan la información de acuerdo a las acciones que se quieren realizar sobre la misma. Por ejemplo, la disposición de una página de búsqueda no será para nada parecida a la de un formulario (incluso aunque técnicamente, la búsqueda sea un formulario), o de un wizard. Para más información al respecto, aquí tenemos otro listado de patrones de diseño visual.

Para que el mundo mobile tampoco se quede afuera, acá hay un artículo sobre iPhone Application UI Design Patterns, con algunos consejillos sobre cómo diseñar visualmente una aplicación para estos teléfonos.

Por último, la página de Paul Hibbits está llena de recursos sobre usabilidad y diseño de interfaces. Hay una sección en especial sobre los patrones. Muy interesantes y completos para ver.

Soy un zorrinito user-friendly.

(Read more →)

Link del día: Tabla periódica de HTML

De parte de Diego me enteré de esta Tabla Periódica de elementos HTML, que pueden ver funcionando aquí, en donde están presentes los 104 elementos que actualmente forman parte del draft de HTML5. Si fuera un simple listado no pasaría de curiosidad, pero no solamente podemos verlo y hacer click en cada elemento para tener una breve descripción y luego un link a la especificación del mismo… sino que podemos además tomar una página cualquiera y ver qué uso de estos elementos se está haciendo en vivo y en directo para esa página.

De amante de las autoreferencias que soy me pregunté qué pasaría si esa misma página verificara esa misma página. El resultado fue el siguiente: HTML, body, un meta, un title, un label, un form, un input, un button. Luego un par de h1, un par de h2, una tabla, 9 filas y 162 celdas (los elementos). 109 ul y 248 li (epa!), junto con 109 párrafos. 5 scripts, 5 links y… 245 anchors con 338 divs.

Lo curioso es que a partir de un análisis así podría llegar a entenderse más o menos qué funcionalidad tiene esta página. Podemos deducir que tiene una única función (o eso parecería), por tener un sólo form y un solo campo de entrada. Parecería además que por tener una tabla y una cantidad similar de celdas y elementos li/a, podemos pensar que esta página muestra información relacionada con una cantidad de elementos, y los anchors están presentes para cierto tipo de interactividad. Sin duda, una web 2.0, con mucha información pequeña y algo de interactividad.

Soy un zorrinito elemental.

(Read more →)