• Saltar a la navegación principal
  • Saltar al contenido principal

RODRIGO CARNICERO

  • BLOG

Última edición: 12 septiembre, 2020

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

Contenidos:

  • Origen
  • Mejoras en el juego
  • Solución a la fase 2 [ATENCIÓN SPOILER]
    • 1 – Crear el bookmarklet
    • 2 – Utilizar la consola de Chrome
  • Errores y próximas ediciones

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.

Por este tipo de mensajes merece la pena todas las horas dedicadas al desarrollo de SEORCADO

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?

Publicado el 20 octubre, 2019 por Rodrigo Carnicero

Interacciones con los lectores

Comentarios

  1. Sergio Escriba dice

    20 octubre, 2019 en 10:30

    ¡Encantado de mover este tipo de acciones! Estoy seguro de que para el proximo concurso que hagas va a ser mucho mas exitoso ;)

  2. Rodrigo Carnicero dice

    20 octubre, 2019 en 10:36

    Gracias Sergio!

  3. José dice

    21 octubre, 2019 en 19:50

    Vaya que ha sido bueno. Estuve 2 horas y ya algunas -pocas- palabras me las sabía por perder tanto, pero sí que ha estado muy bueno!

    ¿Habrá SEORCADO 2.0?

  4. Rodrigo Carnicero dice

    22 octubre, 2019 en 19:01

    Gracias José, habrá una segunda versión seguro, viendo que a la gente le ha gustado prepararé algo nuevo para el año que viene. Un saludo!

Copyright © 2022 · Rodrigo Carnicero Ungría · Twitter · LinkedIn.
Políticas de: Cookies · Privacidad

Esta web utiliza cookies para optimizar la experiencia del usuario. ¿Aceptas su utilización?. AjustesAcepto
Política de cookies

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
GUARDAR Y ACEPTAR