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.
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.
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.
Link of the day: WordPress security
Brad Williams made available a great slide presentation at Wordpress WordCamp 2009 in NYC. It is called WordPress Security, and it’s really complete explaining about certain spam techniques or hacking tips on Wordpress. Of course, those are things that can be avoided and he tells us how.
Not only that, but he provides with different plugins that we can use to test and check our WordPress site security. Those are:
- WP Security Scan: to check for certain aspects of our configuration and make one-click changes in order to make them more secure.
- Exploit Scanner: a way to search in all our files and database data for suspicious pieces of code, often used by hackers or spammers.
- Wordpress file monitor: automatic checking for all files in our WordPress installation. Will send out an email when a change is detected, so we can easily detect weird activity in our WordPress site.
- Login Lockdown: Allows for only a certain number of attempts to login. If all those are failed, it will lock the login for WordPress admin interface and send out a warning to the admin mail address. That will prevent hacking attempts done against the login page. Or, at least, it will slower them down.
Of course, he provides a lot more of information and resources to check out.
I’m a secure little skunk.
Link del día: Tab Candy, innovación en tab navigation
Gracias al blog de Thalskarth’s Maëlstrom (cuándo podré escribir eso sin copy-paste?) me enteré de un proyecto interesante que se está desarrollando. Dicho proyecto se llama TabCandy y hay un video explicativo al respecto que podemos ver aquí: An Introduction to Firefox’s TabCandy.
Recomiendo ver el video completo. Al comenzar a verlo pensé que se trataba de un plugin más que mejoraría el manejo de los tabs, uno más de tantos. Sin embargo, la idea va mucho más allá. Si recuerdan el concepto que mencionábamos hace un tiempo sobre Cómo trabajar con distracciones, de readquisición de contexto, el agrupamiento visual y localización espacial de conjuntos de tabs nos permitiría fácilmente enfocar nuestra navegación en distintas tareas. Por ahora tenemos algo similar si es que utilizamos distintas ventanas y tabs dentro de dichas ventanas (cosa que muy seguramente podamos hacer más fácil en Chrome que en Firefox).
Pero este proyecto va más allá. La posibilidad de crear y etiquetar conjuntos, buscar páginas entre todas o el contenido de las páginas. La posibilidad de compartir, o de que varios usuarios remotamente hagan una misma navegación. La posibilidad de tener conjuntos de conjuntos de tabs, la posibilidad de asignarles colores, u otras personalizaciones propias. La posibilidad de interactuar con otros usuarios, o incluso recomendar otros tabs que podrían sernos útiles basados en nuestra selección actual.
Las posibilidades son muchas, y es un desafío lograr todo esto para que funcione rápidamente y con un bajo consumo de memoria (cosa que ha sido desde siempre el estigma de Firefox).
Soy un zorrinito en tabs.
Link del día: Checkeo XSS automatizado
Una de las tantas herramientas para checkeo de seguridad XSS hoy viene de la mano de los muchachos de Dragonjar. Según ellos lo mencionan, esta herramienta llamada X5S no solamente sirve para revisar si un sitio es seguro contra ataques XSS (cross site scripting), LFI (local file inclusion) y RFI (remote file inclusion). Sin duda algo muy interesante para los aficionados a la seguridad web, podrán probar este software como un plugin de Fiddler.
Como mencionaba, no es la única herramienta, ya que hay otras similares. No he podido probar esta ni tampoco AttackAPI, pero pronto me están esperando ambas para que logre poner mis manos encima de ellas. ¿Alguien que las conozca ha tenido buenos resultados?
Soy un zorrinito seguro.