SEORCADO: información y solución al juego SEO

El pasado 15 de Octubre publiqué SEORCADO, el típico juego del ahorcado pero con términos SEO. En este post te contaré cómo surgió la idea, los errores que cometí y la solución al mismo.

Si no lo conoces, te invito a que juegues antes de seguir leyendo seorcado.com

Origen

Todo empieza en el 2014… si, ¡cómo lo oyes! Por aquella época empezaba yo a meterme en el mundo del desarrollo web y haciendo un curso de Platzi, hicimos el juego del ahorcado como proyecto del curso.

Era una versión primitiva. Sólo había una palabra a adivinar, no había pistas ni ningún tipo de estilo en CSS.

Así hasta hace unos meses. Estaba en el gimnasio escuchando el podcast de La Máquina del SEO donde Andrés Kloster entrevistaba a Iñaki Huerta. Parte de la entrevista giró entorno al juegoseo.com que había creado Iñaki y un montón de anécdotas sobre el mismo. Fue entonces cuando mi cabeza hizo un clic y pensé en perfeccionar el código del juego del ahorcado que ya tenía.

Mejoras en el juego

Lo primero que pensé es que tenía que conseguir que hubiera un montón de palabras a adivinar, no sólo una. Además, lo suyo es que esa palabra se eligiera aleatoriamente cada vez que se reiniciaba la partida.

Una vez hecho esto, me di cuenta que el juego era complicado de narices, ni yo mismo adivinaba algunas… Asi que decidí incluir la opción de tener un número limitado de pistas ya que algunos términos eran complicados. Términos, que no palabras, ya que algunos son números o una combinación de palabras y números como BASE64 (técnica de encriptación utilizada para hacer link sculping mediante la ofuscación de enlaces).

Ya lo tenía, más o menos, pero me empezó a agobiar la idea de que fuera demasiado sencillo asi que decidí que hubiera una fase 2 para aquellos que no tuvieran problemas con el ahorcado.

Solución a la fase 2 [ATENCIÓN SPOILER]

Aquí es donde mucha gente se atascó, como es lógico ya que lo enrevesé bastante. Hay que aclarar, para los que no han jugado o no han superado la fase 1, que aquí se llega tras conseguir 9 puntos.

En el código fuente hay que mirar las clases. Hay algunas chorras como m.rajoy pero otras dan pistas de cuál es el paso siguiente. Clases como index, noindex pueden sugerir la necesidad de revisar el archivo robots.txt, pero sobre todo la pista clave es allow.

En el archivo robots, las pistas son consola de Chrome y el archivo jquery.js (el único archivo real de los que ahí aparecen).

Al irnos a las consola, podemos ver la siguiente pista, —->line 12. Esto indica que debemos dirigirnos a la línea 12 en el archivo jquery.js (como se indicaba en la pista anterior).

Breve explicación del código:

//
(function(){
/* Creé una variable boton, array con la
* información para ponerse en contacto conmigo
* codificada en Base64
*/
let boton = ["TG8gbG9ncmFzdGUhIEVudmlhbWUgdW4gbWFpbCBhOg==","cw==","aA==","ZQ==","bA==","ZA==","bw==","bg==","Yw==","bw==","bw==","cA==","ZQ==","cg==","QA==","cw==","ZQ==","bw==","cg==","Yw==","YQ==","ZA==","bw==","Lg==","Yw==","bw==","bQ==","QXN1bnRvOiBTRU9SQ0FETyAyMDE5IC0gVHUgbm9tYnJlLiA=","RXNwZXJvIHF1ZSBzZWFzIHVubyBkZSBsb3MgdHJlcyBwcmltZXJvcyBlbiBlbnZpYXJsby4gU2kgbm8sIGFsIG1lbm9zIGVzcGVybyBxdWUgaGF5YXMgcGFzYWRvIHVuIGJ1ZW4gcmF0by4gQ3VhbHF1aWVyIG9ic2VydmFjaW9uLCBlcnJvciwgbWVqb3JhLi4uIHF1ZSBoYXlhcyBkZXRlY3RhZG8gdGUgYWdyYWRlY2VyZSBxdWUgbGEgY29tcGFydGFzIGNvbm1pZ28uIFNhbHVkb3Mh"];

/* Luego creé un bucle for que recorriera
* dicho array, desencriptara el mensaje
* y lo fuera inyectando en el HTML
*/

for (let i = 0; i < 33 ; i++){

var clic = window.atob(boton[i]);

document.getElementById(''+i+'').innerHTML=clic;

}})();
//

Al revisar las clases CSS, supongo que verás unas etiquetas sin contenido. Es ahí donde se inyecta la solución.

Vale, muy bien, ¿y qué narices hago para inyectar la solución ahí?

Como ya te puedes imaginar, que debajo de las instrucciones de la página haya un texto sobre cómo crear un bookmarlet no es casualidad.

Hace tiempo escribí un post sobre los bookmarklets para SEO, qué son y cómo te pueden hacer el día a día más sencillo. Te invito a que le eches un ojo si quieres profundizar en el tema.

No obstante, en este punto hay dos caminos para dar con la solución:

1 – Crear el bookmarklet

Para crearlo solo hay que añadir delante javascript: y pegar justo el chorizo de código detrás.

2 – Utilizar la consola de Chrome

En este caso pegamos el código en la consola y pulsamos ENTER

Con cualquiera de las dos opciones, al final, lo que vemos es la solución en la página:

Errores y próximas ediciones

Es la primera vez que hacía algo por el estilo. Además, tampoco tenía referencias de otros juegos o concursos SEO ya que por unas cosas o por otras no había participado. Por lo que al final, a día de hoy veo claramente algunos errores aunque en líneas generales creo que salió bastante bien:

• Falta de planificación: tanto en el proceso de desarrollo como en el de difusión, en ningún momento me puse a meditar sobre una estrategia. He ido en modo doer al máximo, y es algo que está muy bien, pero también te lleva a no lanzar algo tan perfecto como te gustaría.
• Fallos en el código: si algún developer que se pone a mirar el código me mete un par de collejas seguro. Hay cosas que tengo mal ya que no soy programador, pero otras es por falta de tiempo y/o planificación.
• Fallos en la difusión: si no llega a ser por Publisuites y la ayuda desinteresada Sergio Escriba el juego hubiera llegado a menos gente. Esto de cara a próximas ediciones está claro que tengo que planificarlo bien.
• Dificultad: aquí es complicado atinar. No quería que resultara demasiado fácil, pero tampoco imposible. Me hubiera gustado que más gente llegase hasta el final (sólo 5 personas de unos 250 participantes según Analytics). No sé si es una cuestión de poner más pistas o que sean más claras, o una cuestión de no tirar tanto por la parte técnica.

Seguramente haya más cosas que podría haber hecho de otra forma. Es aquí donde me gustaría saber tu opinión. De cara al año que viene ¿qué cambiarías / mejorarías?, ¿qué te ha gustado más?, ¿qués has echado en falta?, ¿alguna idea?