Jugando con los códigos UnicodePlaying with Unicode characters

En los años sesenta se creó  la codificación ASCII para representar texto en los ordenadores. La codificación se basaba en  7  bits lo que permitía configurar hasta 127 caracteres: los números, las letras mayúsculas y minúsculas y un pequeño conjunto de símbolos especiales. Nunca con tan pocos caracteres se hizo tanto. Además de su uso en los ordenadores dio lugar al arte ASCII con el que se han hecho y se hacen maravillas. Pero la codificación ASCII se quedó corta cuando empezaron a cobrar importancia las interfaces gráficas en distintos idiomas y múltiples alfabetos. Una de las soluciones a esta escasez de códigos  fue el standard Unicode que está muy extendido y es capaz de representar cualquier tipo de alfabeto salvo el Klingon:-).

La codificación Unicode proporciona más símbolos  y por tanto más posibilidades para diseñar imágenes,  pero curiosamente se ha desarrollado sobre  todo en Twitter, con el desafío de realizar gráficos en 140 caracteres.  Si se busca el hashtag #art140 se puede comprobar hasta donde llega la imaginación y el dominio del diseño con códigos Unicode.

Pero  además del arte, los Unicode pueden tener un uso práctico para representar información gráfica en un tweet. El primer caso que he conocido ha sido el de @Resultados20N de la factoría Data’n’Press de los Martín-Borregón Brothers que publicaron en tiempo real los resultados de las elecciones del 20N en este modo gráfico:

██████████PP──44.6%→186 ██████────PSOE─28.7%→110 ███─21.9%→IU=11_UPyD=5_CiU=16_AMR=7_PNV=5_ERC=3_BNG=2_CC=2_CQ=1_FAC=1_GBAI=1 #20N 100%Esc

— resultados20N (@resultados20N) November 21, 2011

Esta manera tan ingeniosa como práctica de mostrar gráficos me inspiró para crear el bot @t_hoarder que muestra los resultados del barómetro social de esta forma:

Barómetro.social.día 12-08-2012: personas_tuiteando_de ████Rescate→7655     ██▒▒Recortes→3005    █▒▒▒Urdangarin→2032  █▒▒▒Bankia→1887      

— t-hoarder (@t_hoarder) August 12, 2012

Dándole vueltas a la cabeza se me ocurrió que también podría representar un timeline del número de personas que tuiteaban cada hora de los distintos temas, de forma que se pudiera apreciar el perfil temporal de publicación. Esta es la manera que he encontrado de hacerlo:

12-08-2012:twiteando Recortes/hora █▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ █▒▒▒▒▒▒▒▒▒▒▒▒██████▒████ ██▒▒▒▒▒▒▒▒██████████████ 0▀▀▀▀▀▀▀▀▀▀▀12▀▀▀▀▀▀▀▀▀23

— t-hoarder (@t_hoarder) August 12, 2012

Gracias al post Twitter Art Layouts y a los buenos consejos de  @emartinborregon (jugar con el wide space y agrupar en bloques de 21 caracteres) he sido capaz de realizar estos diseños.  Salvo algún problema de alineamiento en Explorer o una falta en Android  del caracter  ▀ (UPPER HALF BLOCK) se pueden ver con claridad las gráficas. Me han sido de mucha utilidad esta tabla de caracteres Unicode, sobre todo la parte de los bloques y esta tabla interactiva.

Os animo a que generéis gráficas con caracteres Unicode, es una manera rápida de hacer llegar la información vía Twitter.In the sixties the ASCII code was created to represent text in computers. The code was based on 7 bit sets which allowed up to 127 characters: numbers, uppercase and lowercase letters and a small set of special symbols. So few characters have never made so much. In addition to their utilization in computers, the ASCII codes were used to make ASCII art creating beautiful designs. But the ASCII codes are only able to represent Latin alphabets and English language, so are not enough for other languages. One solution to this lack of codes was the Unicode standard that is capable of representing any type of alphabets except Klingon :-).

The Unicode provides more symbols and therefore more possibilities to design images, but curiously it has been especially developed on Twitter, with the challenge of making graphics in 140 characters. Searching for the hashtag #art140 is apparent as far as the imagination and mastery of design with Unicode codes.

But besides the art, Unicode can have a practical use to represent graphic information in a tweet. The first case I’ve ever found was the bot @Resultados20N from the Data’n’Press factory of Martin-Borregón Brothers. It published in real time the election results of 20N in this graphic:

██████████PP──44.6%→186 ██████────PSOE─28.7%→110 ███─21.9%→IU=11_UPyD=5_CiU=16_AMR=7_PNV=5_ERC=3_BNG=2_CC=2_CQ=1_FAC=1_GBAI=1 #20N 100%Esc

— resultados20N (@resultados20N) November 21, 2011

This wit and practical way of displaying graphics inspired me to create the bot @t_hoarder showing the results of the social barometer like this:

Barómetro.social.día 12-08-2012: personas_tuiteando_de ████Rescate→7655     ██▒▒Recortes→3005    █▒▒▒Urdangarin→2032  █▒▒▒Bankia→1887      

— t-hoarder (@t_hoarder) August 12, 2012

I thought to represent a timeline of the number of people every hour twittered different topics, so that you could appreciate the time profile of publication. This is the way I found to do this:

12-08-2012:twiteando Recortes/hora █▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ █▒▒▒▒▒▒▒▒▒▒▒▒██████▒████ ██▒▒▒▒▒▒▒▒██████████████ 0▀▀▀▀▀▀▀▀▀▀▀12▀▀▀▀▀▀▀▀▀23

— t-hoarder (@t_hoarder) August 12, 2012

Thanks to Twitter Art Layouts post and some good advice from @emartinborregon (playing with the wide space and grouped into blocks of 21 characters) I have been able to make these designs. Barring any alignment problem in Explorer or a lack of character in Android ▀ (UPPER HALF BLOCK) you can clearly see the graphs. This table of Unicode characters has been very useful for me, especially the blocks and this interactive table.

I encourage you to create graphs with Unicode characters, it is a quick way of getting information via Twitter