Pasamos gran parte de nuestro tiempo delante de una terminal y debemos aprender los comandos más interesantes que nos ayuden a realizar las tareas más rápida y cómodamente, detectando en que gastamos más tiempo (o en que tareas tardamos más), para buscar formas de simplificar y aprovechar nuestro tiempo.

• 10 comandos de terminal que quizás no conocías (I)
• 10 comandos de terminal que quizás no conocías (II)
• 10 comandos de terminal que quizás no conocías (III)

En este artículo (que pretende ser una serie de ellos), comentaremos comandos interesantes para simplificar nuestra vida en terminales de sistemas GNU/Linux, también aplicables a WSL (Subsistema Linux de Windows), donde podemos tener una terminal nativa de Linux en sistemas Windows 10.

1. Autojump: Salta por carpetas más eficientemente

Con autojump podemos mejorar la clásica forma de acceder a directorios con cd. Habitualmente, acostumbramos a escribir las carpetas o directorios en forma de ruta relativas por las que vamos accediendo, o incluso las rutas absolutas cuando queremos "saltar" a una carpeta específica.

Esto se vuelve algo tedioso cuando tenemos que estar moviéndonos por varias carpetas de forma intermitente. Con los comandos pushd y popd, podemos utilizar una pila donde almacenar o recuperar las carpetas más usadas, pero autojump gestiona esto de una forma aún más inteligente, ya que sólo tenemos que escribir parte del nombre de la carpeta a la que queremos acceder y se basará en las carpetas en las que más hemos estado, ya que mantiene una base de datos interna con esta información.

Para instalarlo, solo tenemos que hacer un sudo apt-get install autojump y ejecutar la siguiente orden . /usr/share/autojump/autojump.sh, que activará un alias j para utilizar autojump.

• GitHub | Autojump

2. tmux: Multiplexador de terminales

Tmux es un multiplexador de terminales, o lo que es lo mismo, una herramienta que permite dividir una terminal de modo texto, en varias terminales diferentes. Tmux ofrece dos ventajas principales por las que ya merece la pena trabajar con él: aprovechar mejor el espacio y recuperar sesiones perdidas.

La primera es la más obvia, ya que al poder dividir en varias terminales, se puede aprovechar mejor el espacio y trabajar a la vez que ves información de otro comando. La segunda, es muy interesante. Muchas veces las conexiones remotas por SSH se interrumpen por problemas de conexión, microcortes, cierres repentinos o errores similares. Si tenemos una conexión abierta con tmux y se interrumpe, sólo tenemos que volver a conectar y escribir tmux attach para recuperar la sesión tal y como estaba.

Una vez abierta una sesión con tmux, pulsamos CTRL+B y luego % para dividir horizontalmente la terminal o CTRL+B y luego " para dividir verticalmente la terminal. De la misma forma, se puede seguir dividiendo las terminales divididas.

Más detalles interesantes:

• CTRL+B y ?: Se mueve a la terminal de la izquierda. Idem con el resto de cursores para otras direcciones: arriba, derecha o abajo.
• CTRL+B y ALT+?: Amplia o reduce la terminal actual hacia la dirección indicada.
• CTRL+B y CTRL+O: Rota las terminales de sitio.
• CTRL+D: Cierra la terminal actual.

Si tmux no te agrada, puedes probar Oh My Tmux!, una configuración especial para hacerlo más bonito y cómodo, u otros gestores alternativos similares como byobu o dvtm.

• GitHub | tmux

3. micro: Editor de texto intuitivo

Uno de los puntos más traumáticos al comenzar a utilizar las terminales de Linux, son los editores de texto que más se utilizan. VIM es uno de los más versátiles y potentes, pero también uno de los más temidos.

Muchas veces, se comienza a utilizar nano, un editor mucho más sencillo que vim, pero también mucho más simple. Una alternativa a estos dos es micro, un editor de texto muy intuitivo que incluso conserva de serie las combinaciones de teclas habituales que usamos como CTRL+S para guardar, CTRL+Q para salir, CTRL+U deshacer, CTRL+C para copiar y CTRL+V para pegar.

Además, también lo podemos utilizar mediante pipes para enviar la salida de un comando directamente al editor, cambiar esquemas de colores, y muchos otros detalles interesantes.

Para instalarlo, solo tenemos que escribir lo siguiente:

curl https://getmic.ro | bash
sudo mv micro /usr/local/bin

Si quieres buscar algunas alternativas más, tienes el artículo editores de texto basados en terminal, donde encontrarás otros editores interesantes como mcedit, jed, setedit, fte u otros.

• URL | Micro Editor
• GitHub | Micro

4. vnstat: Estadísticas de consumo de red

En muchos casos nos interesa saber cuanto ancho de banda hemos consumido en nuestro equipo (o el equipo que usamos como servidor) durante un periodo de tiempo específico. Vnstat es una excelente herramienta que nos muestra eso mismo: cuanto ancho de banda hemos consumido durante un tiempo determinado.

Podemos ver la transferencia de ancho de banda por horas, días, semanas, meses o incluso en vivo, entre otras opciones.

• URL | vnStat
• GitHub | vnStat

5. dtrx: Extractor automático de archivos comprimidos

Otro de los problemas habituales a la hora de tratar con archivos comprimidos es que, dependiendo del formato hay que utilizar una herramienta diferentes o unos parámetros específicos. Especial mención en el caso de tar, como bien nos cuenta el grandioso XKCD en 1168: Tar, aunque en las últimas versiones se ha intentado solventar en cierta forma.

La herramienta dtrx pretende solventar este problema, dándonos un sistema unificado para extraer cualquier tipo de archivo: tar, zip, cpio, deb, rpm, gem, 7z, cab, lzh, rar, gz, bz2, lzma, xz e incluso algunos archivos exe autoextraíbles.

Con el parámetro -l podemos listar y ver el contenido del archivo comprimido antes de extraerlo.

• URL | Dtrx
• GitHub | Dtrx

6. Exa: ls mejorado

Exa se define como un reemplazo moderno de ls. Se trata de un comando creado con Rust que hace un poco más sencilla la lectura de los listados de archivos en linux, visualizando con colores y añadiendo algunas funcionalidades extra como el estado git de una carpeta o ver carpetas en formato de árbol.

Para la instalación automática, se requiere tener instalado Rust y su instalador cargo. En caso de no tenerlo, siempre se puede descargar el binario e instalarlo en nuestro sistema:

wget https://github.com/ogham/exa/releases/download/v0.8.0/exa-linux-x86_64-0.8.0.zip
unzip exa-linux-x86_64-0.8.0.zip
sudo mv exa-linux-x86_64 /usr/local/bin/exa

• URL | Exa
• GitHub | Exa

7. Googler / ddgr: Buscando desde terminal

Googler y ddgr son dos herramientas para realizar búsquedas en buscadores como Google o DuckDuckGo desde una terminal. Utilizando el parámetro -n X puedes especificar el número de resultados, si sólo quieres buscar algo concreto, o con -j abre el primer resultado en un navegador. También se puede navegar por los resultados de forma interactiva con las teclas n y p o devolver información en formato JSON con el parámetro --json.

Googler viene en el repositorio de apt de Debian 9 Stretch, pero ddgr no lo está, por lo que si quieres instalarlo, sigue estos sencillos pasos:

wget https://github.com/jarun/ddgr/releases/download/v1.4/ddgr_1.4-1_debian9.amd64.deb
sudo dpkg -i ddgr_1.4-1_debian9.amd64.deb

• Googler GitHub | googler
• DuckDuckGo GitHub | ddgr

8. htop: top mejorado

Un comando muy famoso y conocido es top en GNU/Linux. Se trata de un gestor de procesos de linux, que muestra el top de procesos que más recursos consumen (memoria, CPU, etc...). Htop es una conocida herramienta que mejora sustancialmente el clásico top de Linux, añadiendo una sintaxis de colores muy bien conseguida, y una serie de opciones y parámetros de personalización muy extensa.

Entre sus opciones, se encuentra la posibilidad de realizar búsquedas o filtrar, mostrar un esquema de colores avanzado que da más información del consumo actual del sistema, ordenar por columnas específicas o colapsar los nombres de procesos repetidos, entre múltiples opciones más.

• URL | htop
• GitHub | htop

9. TIV: Terminal Image Viewer

En múltiples ocasiones, estamos conectados a través de una conexión SSH donde no tenemos un entorno gráfico o sólo tenemos acceso a una terminal de texto. Utilizando tiv (Terminal Image Viewer) podemos «ver» imágenes o gráficos desde la terminal sin necesidad de tener que descargarlos a otro equipo o arrancar un entorno gráfico. TIV interpreta la imagen especificada en una versión de baja resolución en modo texto, donde podemos hacernos una idea de que como es la imagen.

También se puede establecer un *.jpg para que muestre una galería de las imágenes a visualizar. TIV incorpora algunas opciones o parámetros interesantes, como por ejemplo:

• -256: Reduce el número de colores a 256. Útil en casos en los que los colores se muestran incorrectamente.
• -w: Establece el ancho máximo de carácteres de la imagen.
• -h: Establece el alto máximo de líneas de la imagen.

Si TerminalImageViewer (TIV) no nos convence, podemos intentarlo con timg o terminal-image, este último disponible en NodeJS.

• GitHub | TerminalImageViewer

10. Fuck: «Mierda, me he equivocado»

Por último, un gran comando con el que te será muy difícil seguir viviendo a partir de ahora: fuck. Este comando (un alias de thefuck), nos permite que cuando escribamos un comando en la terminal y tengamos una errata, simplemente, escribiendo fuck, intentará corregir el comando anterior a su versión sin errores.

Al escribir fuck nos aparecerá una linea donde nos van dando las coincidencias más probables y podemos movernos arriba y abajo, o pulsar ENTER para enviar la sugerencia o CTRL+C para cancelarla.

De forma alternativa, tener en cuenta que si escribimos !! en una terminal, se vuelve a enviar el comando anterior. Muchas veces, al olvidarnos el sudo en un comando, es suficiente con escribir sudo !!.

• GitHub | thefuck

Si conoces comandos interesantes, puedes dejarlos en los comentarios. Si por otra parte, te has quedado con ganas de más, puedes echar un vistazo a este artículo titulado La gran guía de supervivencia de la terminal de GNU/Linux donde encontrarás máscomandos similares.

De la misma forma, Codevember (Code + november) también es un reto creativo donde el participante debe crear una demo sobre un concepto diario, sólo que esta vez lo tiene que hacer utilizando tecnologías web, como por ejemplo, HTML5, CSS3 y/o Javascript.

En mi repositorio de GitHub Codevember2017 se pueden encontrar y visualizar las demos que publiqué en cada día del mes, con información sobre ellas y enlaces a CodePen/GitHub.

Concepto del día: «Pen»

En este artículo me gustaría explicar un poco, a modo de tutorial, el «cómo se hizo» de la demo correspondiente al Día 28: «Pen», explicado paso a paso.

Como su propia palabra indica, la idea original con «pen» era precisamente hacer una demo relacionada con bolígrafos, plumas, estilográficas o algo similar, pero preferí aprovechar el doble sentido de la palabra «pen» en este contexto, que es el nombre que se le da a las demos de la Plataforma Codepen. De esta forma, me pareció más original un navegador que mostrase un pen en blanco de Codepen.

Si además, lo caricaturizamos un poco añadiéndole algunos extras, eso podría quedar bien. ¡Y todo ello sin una línea de Javascript! ¡Vamos a ponernos a ello!

1. Análisis y estructura

Lo primero es tener la estructura a crear bien clara y definida. Si entramos a un pen en blanco en Codepen veremos perfectamente como es esta pantalla y los elementos que la componen. Tenemos que simplificar esa apariencia y convertirla en algo muy básico pero que tenga la misma esencia.

Así pues, definimos la estructura general de Codepen: lo dividiremos en varias secciones, una parte superior .top que incluirá el titular y los botones, una parte central .mid que contendrá las ventanas de HTML, CSS y JS, una parte inferior .preview donde se previsualizan los contenidos y finalmente, una capa .bottom como barra inferior.

Todo ello estará en el interior de una capa .body, que a su vez estará en el interior de una capa .codepen que utilizaremos para separar los pies del cuerpo más adelante. De momento, simplemente colocamos un comentario que más adelante sustituiremos:

<div class="codepen">
  <div class="body">
    <div class="top"></div>
    <div class="mid"></div>
    <div class="preview"></div>
    <div class="bottom"></div>
  </div>
  <!-- feet -->
</div>

Pero todo esto es inútil si no le damos estilo. Para empezar, añadiremos algunas líneas para utilizar un color de fondo en toda la página (un gradiente, que siempre queda más atractivo) y precargamos la tipografía Lato que usaremos más adelante:

@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Lato');

html {
  background:linear-gradient(100deg, #444, #777);
}

También le daremos estilo a la estructura del modelo que hemos planificado antes. Básicamente, tamaños de ancho y/o alto, márgenes y colores de fondo para que sea bien visible la parte principal:

.body {
  width:600px;
  margin:2em auto;    /* Para centrarlo todo */
  box-shadow:0 0 15px #333;
}

.top {
  height:40px;
  background:#000;
}

.mid {
  width:100%;
  background:#343436;
  min-height:165px;
}

.preview {
  background:#FFF;
  min-height:150px;
}

.bottom {
  height:15px;
  background:#343436;
}

Una vez hecho, tendremos el cuerpo de la ventana del navegador. No olvidar el box-shadow del .body para darle un buen aspecto de suavidad y profundidad con una sombra (o varias si es necesario).

2. Ventanas HTML/CSS/JS

Para que empiece a tomar forma, es necesario colocar las tres ventanas A, B y C donde se escribe el código HTML, CSS y JS en Codepen. Les aplicaremos una clase .tab común a las tres, para darle los estilos que deben tener todas. Posteriormente, si lo necesitaramos podríamos usar las otras clases para hacer referencia a una ventana específica. Todo ello, por supuesto, en el interior de la clase .mid:

<div class="mid">
  <div class="tab html"></div>
  <div class="tab css"></div>
  <div class="tab js"></div>
</div>

Con un border-top simulamos el título de cada ventana como si fuera una sombra, un efecto bastante bonito en nuestro ejemplo. Sin embargo, al ser elementos block cada ventana se colocará una debaja de otra. Para solucionar esto, establecemos la clase .mid como un contenedor de elementos flexbox con display:flex:

/* Sería más eficiente usar .tab, pero así se ve mejor */
.mid .tab {
  width:100%;
  height:125px;
  margin:10px;
  background:#1e1f21;
  border-top:20px solid #111;
}

.mid {
  /* ... */
  display:flex;
}

Ya se va pareciendo más a Codepen. ¡Sigamos!

3. Franja superior

Otro de los detalles importantes de la página de Codepen que le da el aspecto reconocible son los botones de la parte superior-derecha, así como el título y el logo. Vamos a ponernos con ello, en el interior del elemento con clase .top.

Si nos fijamos bien, establecemos dos capas iniciales: una contendrá el logotipo y el titular de la página, y la otra los botones y la foto de perfil del usuario, en este caso, la de mi perfil de CodePen :-P

Algo similar al boceto de la siguiente imagen:

Varios detalles:

• De momento, dentro de .logo no colocamos ningún logotipo. Más adelante veremos como colocar el logo con SVG, ahorrándonos imágenes externas y utilizando un SVG, que es más versátil.
• En el interior de .title irá el título del pen de Codepen. Aprovecharemos y colocamos el atributo contentEditable, para que el usuario pueda cambiar el texto si lo desea.
• Finalmente, en .buttons colocamos tres botones y un enlace que será la foto de perfil (avatar) del usuario. En esto profundizaremos más adelante.

<div class="top">
  <div>
    <div class="logo"></div>
    <div class="title" contentEditable>Untitled</div>
  </div>
  <div class="buttons">
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
    <a class="avatar" href="https://codepen.io/manz/"></a>
  </div>
</div>

Ahora lo necesario es darle forma y colocarlo todo, por lo que toca centrarse en el CSS. Por defecto, sólo haciendo los cambios de HTML ocurren varias cosas que hay que tener claras. Al establecer dos capas dentro de .top, estas se colocan una debajo de otra, ya que son elementos de tipo block. Esto se puede ver fácilmente, si ponemos temporalmente un .top>div { background:fuchsia } que cambia el color de fondo del elemento. Para evitar este comportamiento de colocación, haremos uso de nuevo de Flexbox:

.top {
  /* ... */
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 15px;
}

.top > div {
  display:flex;
}

Con flexbox, los hijos se comportan como elementos flexibles que se colocan en horizontal «automágicamente» y haciendo uso de justify-content:space-between ya conseguimos lo que buscamos en el boceto previo.

Además, también habría que usar flexbox en las capas hijas de .top, para colocar sus elementos hijos de la misma forma. De resto, sólo quedaría ir retocando el diseño en los demás elementos y puliendo detalles menores de diseño que veremos a continuación.

4. Titulo de la página

CodePen muestra el título de la página en la parte superior izquierda, seguido del icono de un lápiz. Para simular esta apariencia, podemos establecer una tipografía, color y otros como separarlo del borde (espaciado) u ocultar ese borde azul de los elementos interactivos (outline):

.top .title {
  color:#FFF;
  padding-left:15px;
  font-family:Lato;
  outline:0;
}

Podríamos dejar esta parte aquí, pero por hacerlo un poco más fiel a CodePen, podemos utilizar el emoji Right Upper Pencil para colocarlo a la derecha del texto de título. Para ello realizamos varios pasos:

• Al elemento .title le asignamos una posición relativa. De este modo, todo lo que esté en su interior con posicionamiento absoluto, tomará este elemento como marco de referencia.

• Creamos un pseudoelemento ::after que es el que contendrá el emoji del lápiz. Asignándole posicionamiento absoluto, podemos colocarlo justo después del texto. Si usamos el scale de transform, también podremos darle la vuelta (en el eje X y en el eje Y) para que aparezca igual que en CodePen:

.top .title {
  /* ... */
  position:relative;
}

.top .title::after {
  position:absolute;
  right:-20px;
  top:1px;
  content:"?";
  color:#FFF;
  transform:scale(-1);
}

5. Botones de Codepen

En la zona superior derecha, tenemos una parte donde hay que colocar varios botones. Para ello lo principal será darle estilo a estos botones, con la clase .button:

• Le damos el mismo color que usan en Codepen.
• Redondeamos ligeramente las esquinas.
• Cambiamos tamaños y márgenes.
• Damos estilos diferentes al primer y segundo botón con :nth-child.

Nos quedaríamos con algo parecido a esto:

.buttons .button {
  background:#343436;
  width:70px;
  height:23px;
  margin:0 5px;
  border-radius:4px;
  border-top:2px solid #343436;
}

/* Primer botón: SAVE */
.button:nth-child(1) {
  width:50px;
  border-top-color:#fedd31;
}
/* Segundo botón: Settings */
.button:nth-child(2) {
  width:60px;
}

Por último, hay que establecer el avatar del perfil del usuario que CodePen muestra en la parte superior derecha. Esto es muy sencillo. Simplemente le damos estilo a la etiqueta <a> con clase .avatar, asignándole un tamaño de 30x25 píxels y le establecemos nuestra imagen de fondo con background:

.buttons .avatar {
  width:30px;
  height:25px;
  border-radius:3px;
  margin:0 5px;
  background:#FFF url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/154065/profile/profile-80.jpg);
  background-size:cover;
}

¡Esto ya tiene mejor pinta! Pero aún falta darle algo de personalidad... Vamos a antropomorfizar nuestra ventana del navegador de Codepen y a darle un aspecto más humano.

6. ¡Antropomorfosis!

En primer lugar, vamos a dibujarle unos ojitos y una boca. Insertar etiquetas HTML sobre lo que ya tenemos no sería una solución muy limpia, ya que estaríamos «ensuciando» lo que hemos hecho hasta ahora, así que vamos a utilizar pseudoelementos y posicionamiento para este fin.

En primer lugar, con ayuda de la posición absoluta, calc() y las unidades de viewport, colocamos a nuestro personaje en la parte baja de nuestra página. Hacemos esto porque, posteriormente, necesitaremos que aparezca justo «encima» del pie de ventana del navegador.

.codepen {
  position:absolute;
  left:calc(50vw - 300px);
  bottom:32px;
  height:472px;
}

Una vez hecho esto, vamos a crear los ojos. Para ello, utilizaremos el pseudoelemento ::before para el ojo izquierdo y el pseudoelemento ::after para el ojo derecho. Ambos sobre la zona central de clase .mid. Lo interesante de este sistema es que utilizaremos la generación de contenido previamente no existente con CSS.

Con la propiedad content generamos un espacio en blanco al que le damos cierto estilo: unas dimensiones de ancho, alto, redondeamos las esquinas y coloreamos el fondo. Utilizamos un gradiente circular de negro (exterior) a blanco (interior) con cambio brusco (de golpe) sin difuminar, con lo que conseguimos mostrar un aparente circulo blanco dentro de un circulo negro, que simula ser un ojo negro con brillo blanco.

Por último, con posicionamiento absoluto, colocamos el ojo entre las ventanas B y C. En este momento, ambos ojos (::after y ::before) están situados en el mismo sitio con las mismas características, ya que comparten las mismas propiedades CSS. Por eso, establecemos un posicionamiento diferente en el .mid::before, colocando el ojo entre la ventana A y B.

Además, con un transform:scale(-1,1) hacemos el efecto espejo con el ojo, eliminando la sensación de estar clonado y haciendo que no mire hacia el mismo lado, sino en dirección opuesta.

/* Fijamos como marco de referencia: Los ojos se colocarán en base a este */
.mid {
  position:relative;
}

/* Características comunes del ojo */
.mid::before,
.mid::after {
  content:" ";
  width:30px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(20px at 13px 10px, #FFF 20%, #000 30%);
  /* Colocación */
  position:absolute;
  right:200px;
  top:100px;
}

.mid::before {
  left:200px;
  right:none;
  transform:scale(-1, 1);
}

Nos quedaría realizar una acción muy parecida para crear la boca del personaje. En este caso, creamos un rectángulo o cuadrado negro donde redondearemos las esquinas inferior izquierda e inferior derecha, obteniendo medio círculo que hará de boca del personaje.

.preview::after {
  content:" ";
  width:50px;
  height:30px;
  border-bottom-left-radius:50px;
  border-bottom-right-radius:50px;
  background:#000;
  /* Colocación */
  position:absolute;
  left:calc(50% - 25px);
  bottom:105px;
}

Por último, remarcar que la estamos colocando en base al elemento .mid, ya que hemos establecido un posicionamiento absoluto.

7. Logo Codepen

Habíamos pospuesto la colocación del logo de Codepen en la página, teniendo una capa .logo vacía, sin ningún contenido. En lugar de una imagen, vamos a colocar la siguiente etiqueta SVG en línea, donde tenemos el logotipo vectorial de Codepen:

<div class="logo">
  <svg id="codepen-box" viewBox="0 0 100 100" width="100%" height="100%">
    <path d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"/>
  </svg>
</div>

Inicialmente, el logotipo aparecerá en negro y con unas dimensiones muy grandes, pero aprovecharemos las características de SVG para solucionarlo con las 3 líneas de CSS siguientes.

Le aplicamos estilo al contenedor del elemento SVG, el elemento con clase .logo, donde se le indica que tenga unas dimensiones de 20x20 píxels y que utilizaremos la propiedad fill para rellenar de blanco los elementos SVG que se encuentren dentro de la etiqueta HTML con clase .logo:

.logo {
  width:20px;
  height:20px;
  fill:#FFF;
}

De esta forma, el logotipo de Codepen ahora si tiene un tamaño aceptable y se coloca perfectamente en nuestra demo. ¡Además al ser vectorial es mucho más versátil si en algún momento tenemos que cambiar tamaños!

8. Let's go dancing!

Si algo aprendí en codevember es que todo lo que baile, siempre gusta más. Así que, nos falta convertir a nuestro navegador en un excelente bailarín. Y si tiene piernas, pues mucho mejor.

Mediante Inkscape diseño unas patitas, que guardamos en SVG, y mediante SVGO o su versión gráfica online, SVGOMG, optimizamos la imagen al máximo para que ocupe lo menos posible.

Una vez la tengamos lista, reemplazamos la etiqueta <svg> en cuestión por el comentario <!-- feet --> que colocamos en el primer punto de esta guía, justo tras cerrar la capa .body:

<svg class="feet" viewBox="0 0 50 40">
  <path d="m 33.865999,2.4621617 c 5.91069,24.0121503 -1.10825,35.4641003 -1.10825,35.4641003 h 11.08253"/>
  <path d="M 12.778709,2.4621617 C 6.8680187,26.474312 13.886959,37.926262 13.886959,37.926262 H 2.8044287"/>
</svg>

Aunque se podría indicar el CSS en la propia etiqueta HTML, mediante un atributo style, he preferido separarlo y tenerlo de forma independiente, para que el código sea más modular y limpio, aplicando las propiedades CSS para SVG necesarias desde el estilo CSS:

.feet {
  width:200px;
  position:relative;
  left:205px;
  top:-90px;
  z-index:-1;
}

.feet path {
  fill:none;
  stroke:#111;
  stroke-width:4px;
  stroke-linecap:round;
}

Propiedades como fill, stroke, stroke-width o stroke-linecap son estilos CSS para SVG que se aplican a la imagen SVG contenida en el elemento de clase .feet.

¡Listo! ¡Ya tenemos las patitas! Sólo nos quedan dos cosas más para terminar.

9. Animación de baile

¡Nuestro personaje ya tiene piernas pero aún no baila! ¡Devuélveme mi dinero! Vamos a crear una animación CSS que simplemente se mueva de un lado a otro simulando que baile. Al tener cara de alegría y todo el cuerpo (salvo las patas) fuera del .body, no tenemos más que aplicar la animación a dicha capa.

La animación en cuestión será un simple movimiento de izquierda a derecha y viceversa, utilizando la función de transformación skew (muchas veces traducida como sesgar) y moviendo ligeramente hacia arriba y abajo. Bien coordinada, el efecto visual es bastante llamativo:

html {
  /* ... */
  overflow:hidden; /* Ocultamos barra de desplazamiento */
}

.body {
  /* ... */
  animation:dancing .75s ease 2s infinite;
}

@keyframes dancing {
  25% {
    transform:translateY(20px) skew(-2deg);
  }
  0%, 50%, 100% {
    transform:translateY(0) skew(0);
  }
  75% {
    transform:translateY(20px) skew(2deg);
  }
}

Le aplicamos dicha animación al .body, estableciendo una duración de 0,75 segundos de forma infinita (no termina nunca). El retardo inicial de 2 segundos es porque la demo original no muestra las patitas y ojos inicialmente, sino que deja pasar unos segundos antes de mostrarlos mientras muestra el cartel superior de Codevember. En este tutorial actual no haría falta ya que no estamos realizando esa acción.

¡Ya lo tenemos casi listo, como se puede ver en la siguiente imagen!

Si analizamos los keyframes, la animación alterna siempre en el estado normal del personaje (al principio, a la mitad y al final de la animación), moviéndose hacia arriba y hacia uno de los dos lados al 25% y al 75% de la animación. Esto hará que la animación sea fluida y no experimente cortes o movimientos bruscos.

10. ¿Y la música?

Bueno, pues sólo nos queda ponerle una canción en bucle que se escuche mientras el personaje baila. ¿Qué mejor que utilizar Bonetrousle, de Toby Fox, el tema del personaje Papyrus en el gran videojuego Undertale?

Podemos hacerlo utilizando la etiqueta <audio> de HTML5, utilizando los formatos MP3 y OGG para hacer compatible el audio en cualquier tipo de navegador y sistema operativo:

<audio autoplay loop>
  <source src="https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/bonetrousle-tobyfox-by-bulby.mp3"/>
  <source src="https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/bonetrousle-tobyfox-by-bulby.ogg"/>
</audio>

¡Listo! ¡Ya tenemos nuestro ejemplo terminado y funcionando! Puedes verlo en el siguiente enlace de Codepen: Codevember2017 - Day 28: Pen o en el siguiente widget:

¡Espero que les haya gustado y se animen a hacer algún personaje parecido y compartirlo en los comentarios! En mi GitHub de Codevember2017 tienen una lista de todas las demos que presenté y publiqué durante el mes de noviembre con algunas anotaciones. Animo a los lectores a preguntar cualquier duda en los comentarios, así como de otra demo de la lista.

A partir de Chrome 66, Google ha cambiado la política de autoreproducción multimedia y no permite reproducir automáticamente los archivos de audio o video si no hay antes interacción del usuario. Así pues, no podremos utilizar el autoplay en HTML5 a partir de ahora. He creado un pequeño fix de este ejemplo para Chrome 66+, en el que empieza a bailar cuando el usuario hace click o tap sobre el personaje.

Otras consolas como la NES (Nintendo) o Master System (Sega) también pertenecieron a este grupo generacional, sin embargo, la GameBoy fue la más popular debido a muchos factores: su naturaleza portátil, la larga duración de su batería (su rival, la Sega Game Gear duraba mucho menos), el amplio catálogo de juegos, etc.

Tuve la suerte de ser el poseedor de una GameBoy de primera generación, la edición de 1989 (un ladrillo bastante pesado), que se comercializó con una caja similar a la reproducción de la imagen superior, que es un remake del arte de la caja original, creado por https://rollingtombstone.deviantart.com/art/Nintendo-Game-Boy-297797945.

Dicha caja incluía, a parte de la consola, varios manuales, unos auriculares, un cable GameLink para conectar dos consolas en modo multijugador, un cartucho del juego Tetris y un flyer con varios juegos populares de la época y accesorios para la consola.

Recuerda que si quieres construirte una miniconsola al estilo de la NES Classic Mini o la SNES Classic Mini puedes seguir este tutorial paso a paso para construir una mini consola con Raspberry Pi.

En este artículo, quiero hacer mención de algunos de los juegos que más me marcaron y con los que más horas pasé pegado a la pantalla de esta mini consola. Quiero alejarme de mencionar juegos muy populares como Super Mario, Zelda o Kirby y centrarme en otros juegos que, al menos, después de mucho tiempo, casi ni recordaba y pasé muy buenos ratos con ellos.

Como siempre, agradezco los comentarios y aportaciones con los juegos que más les gustaron a cada uno y así recordar muchos de los que no he mencionado por aquí, y saber si interesa hacer una segunda parte con varios juegos más.

1. Terminator 2: Judgment Day

Uno de mis juegos preferidos de la época de GameBoy fue Terminator II: The Judgment Day (El día del juicio final). Una verdadera obra maestra que cubría a la perfección muchos aspectos: jugabilidad, música, gráficos, dificultad, etc. En primer lugar, era muy fiel a la película, ya que cada nivel del juego cubría perfectamente (y de forma cronológica) tramas importantes de la película de Arnold Schwarzenegger, con sus características.

En cada nivel, el juego cambiaba de mecánica (e incluso de estilo y jugabilidad) por lo que no se hacía pesado y te animaba a continuar jugando. Empiezas manejando a Sarah Connor y terminas jugando con el T-800. Mención especial al nivel de la moto y el camión, o el último nivel del juego donde luchamos contra el T-1000 (sobre todo si eres fan de la película).

Mencionar también la banda sonora utilizada en el juego, que personalmente me parece una de las que mejor aprovechan las características sonoras de la GameBoy, como se puede ver en el video:

2. Serpent

Si hay un juego con el que gasté horas en GameBoy, fue con Serpent. En el futuro, hay un deporte llamado Serpent donde dos luchadores conducen serpientes robóticas con las que deben intentar vencer al rival. Hay dos formas de vencerlo: rodear a la otra completamente con tu propia cola de serpiente, o intentar bloquear al rival para que no pueda realizar ningún movimiento y explote su vehículo.

El juego es una variación del clásico juego de la serpiente (Snake) y Tron, con varias modificaciones y añadidos muy interesantes. En primer lugar, el movimiento de la serpiente se hace con flechas y botones, para que no sea tan sencillo mover la serpiente.

Al hacer círculos con nuestra propia cola, aparecen ítems con los que podemos variar la longitud de nuestra serpiente, la velocidad a la que se mueve o incluso utilizar cohetes para modificar dichas características de nuestro rival. Todo ello puede jugar tanto a nuestro favor, como en nuestra contra.

Además, el sistema de niveles de dificultad de juego es super interesante, ya que introduce una serie de cambios que hacen verdaderamente más difícil el juego: no sólo modificar la velocidad, sino la forma de actuar del rival, evitando la muerte o incluso apareciendo unas pequeñas serpientes si estás mucho tiempo quieto, evitando ganar por la vía fácil.

El apartado de la banda sonora también merece una mención especial, ya que son bastante carismáticas y pegadizas.

3. Motocross Maniacs

Otro juego bastante famoso para GameBoy era el Motocross Maniacs. Se trata de un juego donde conducimos una moto y debemos realizar piruetas y mejorar nuestros tiempos en cada carrera, jugando solos, contra la propia máquina o contra otros jugadores mediante el cable GameLink.

El juego destacaba en que, más allá de la simple dificultad de llegar primero en la carrera, tenía una serie de ítems recolectables que hacían mucho más entretenido el juego: turbo o nitro, jet para «volar», piruetas para conseguir pequeñas motos extra que nos acompañaban, etc...

También añadir que la animación y sonido de caída es bastante característica y podía llegar a hacer que el jugador se frustrara y lo animara a volver a intentarlo, ya que un pequeño error podía dar como resultado que la carrera se perdiera y fuera imposible remontar.

En definitiva, un juego que se hizo bastante popular debido a lo entretenido que resultaba competir, tanto para jugadores inexpertos como para expertos.

4. GhostBusters II (Cazafantasmas 2)

Al igual que el primer juego del que hablamos (Terminator 2), muchos de los juegos aprovechaban el tirón que tenía la película para intentar maximizar las ventas. Algunos juegos eran buenos, otro no tanto. Otro juego bastante entretenido era el GhostBusters II, donde tenemos que ir por varias plantas de un edificio buscando fantasmas y capturándolos, la pura esencia de ser un cazafantasmas.

Destacar que el juego te permite elegir a dos de los cuatro personajes: Peter Venkman, Ray Stantz, Egon Spengler y Winston Zeddemore. Con el primero de ellos, lanzas un rayo para aturdir a los fantasmas y con el segundo personaje puedes capturarlos (siempre que estén aturdidos). Este mecanismo, junto al hecho de que sólo manejas al primer personaje (el segundo simplemente sigue al primero y debes encaminarlo de forma pasiva) hacen que la mecánica sea entretenida, ya que cada persona tiene vidas individuales y debes ir controlando a los dos.

El juego va variando a lo largo de niveles con ítems especificos (cambiar rayos, romper paredes, etc...), ir alternando entre distintos personajes o, en el caso de que tardes mucho, los fantasmas se convierten en el logo de CazaFantasmas, que es algo más agresivo.

5. Othello

En GameBoy también existían juegos de puzzles o tablero. Uno de mis preferidos, al margen del ultraconocido Tetris u otros como KlaX, estaba Othello, también conocido como Yang o Reversi.

Se trata de un juego de tablero, similar a las damas, donde se colocan 4 fichas iniciales en cruz y en cada turno el jugador debe mover ficha para convertir a su color el mayor número de fichas posibles. Este juego permitía jugar tanto multijugador (con cable GameLink) como contra la propia máquina, con varios niveles de dificultad.

Se trata de un juego de estrategia y observación en el que uno de los puntos más importantes es intentar conseguir las fichas de los extremos (lados) del tablero, pero sobre todo, de las esquinas, las cuales son las únicas fichas que no se pueden volver cambiar.

Aunque esto no garantiza que ganes el juego, es más fácil si consigues esas posiciones estratégicas.

6. Penguin Land

La historia de Penguin Land es muy curiosa, ya que siempre me llamó la atención que en el juego pusiera SEGA, siendo un juego para una consola de Nintendo. El juego original se llama Doki Doki Penguin Land (1987) y fue desarrollado para Master System. Posteriormente, fue adaptado para GameBoy.

En el juego, somos un carismático pingüino que tiene que ir arrastrando un huevo a lo largo de un nivel vertical, esquivando obstáculos (piedras, hielo desquebrajado, etc...), enemigos (osos, buitres...) y vigilando que el huevo no se caiga desde grandes alturas o que nos caigamos sobre él y lo rompamos.

Finalmente, si conseguimos llegar al final del nivel, llegaremos al hogar donde el huevo estará a salvo.

7. Tennis

Otro título donde, probablemente, muchos pasaron varias horas jugando, fue con Tennis. En este juego de deporte, el título no engaña. Es una partida de Tenis, ni más ni menos. Pero lo poco que hace, lo hace muy bien. La jugabilidad está muy bien equilibrada para que, aún dominando el juego y teniendo soltura, ganar partidas es un reto y no es completamente fácil.

Destacar también la posibilidad de jugar con cable GameLink contra otros jugadores, lo que hace que se vuelva aún más entretenido, si los jugadores tienen soltura en el juego. El juego tiene varios modos de dificultad y como curiosidad, Mario no aparece como jugador, sino en un puesto más pasivo: como juez del partido, sentado en una silla.

8. Who framed Roger Rabbit (¿Quién engañó a Roger Rabbit?)

Uno de los títulos a los que le tengo más cariño es a Who framed Roger Rabbit? (¿Quién engañó a Roger Rabbit?), ya que siempre lo vi como una primera aproximación a las aventuras gráficas, en una GameBoy, con cierta apariencia de RPG (pero sin combates ni ataques). El juego tiene la historia como hilo principal en lo que gira todo, y tenemos que ir investigando y resolviendo misterios por toda la ciudad.

Uno de sus puntos fuertes es que, aún siendo un título de GameBoy (con sus limitaciones), el mundo donde se mueve Roger Rabbit era relativamente abierto, y nosotros debíamos ir buscando cuál sería nuestro siguiente paso, hablando con distintos personajes para conseguir información y evitando los enemigos que nos aparecen por ciertos puntos del mapa.

9. Beetlejuice (Horrific Hijinx from the Neitherworld!)

Otro título que se basó en una obra audiovisual fue Beetlejuice (Horrific Hijinx from the Neitherworld!), aunque en lugar de estar basado en la película de Tim Burton, se basó más concretamente en la serie de animación de Beetlejuice, junto a todo su universo de personajes.

Como fan de la serie en esos tiempos, también tuve el juego, y he de decir que sus últimas fases tienen tal endiablado nivel de dificultad, que nunca hubiera superado su último nivel si no llega a ser porque lo volví a jugar hace un par de años en un emulador que permitía guardar partidas (y así no tener que volver a empezar desde el principio del juego).

El juego es bastante fiel a la serie de animación, ya que aparecen todos sus personajes (desde amigos de Beetlejuice hasta enemigos de la serie) y va alternando entre varios niveles que también van cambiando sus mecánicas de juego, mezclando con humor y lo hacen muy entretenido.

Por ejemplo, el primer nivel va alternando entre fases de acción: un fantasma que secuestra el cuarto de hacer la colada, un juez que te lanza comida desde la cocina, etc. o fases de puzzles o estrategia: el clásico Pipe Manía para arreglar las tuberías del cuarto de baño, asustar a un fantasma utilizando combinaciones de botones o jugar al escondite con un fantasma y averiguar donde se ha escondido, entre muchos otros alocados niveles con enemigos que hay que entenderlos, derrotarlos o utilizarlos de una forma concreta.

10. Double Dragon II

No quiero terminar este artículo, sin mencionar uno de los pesos pesados de títulos de GameBoy: Double Dragon II. Este juego se basaba en el género Beat 'em up que tan popular se hizo en esa época con sagas como Street of Rage, Final Fight, el mencionado Double Dragon o ya con otra temática pero misma idea, el clásico Golden Axe.

El juego permitía tanto jugar de forma individual contra los enemigos, como de forma cooperativa con otro jugador aliado, intentando aunar fuerzas para derrotar a los enemigos entre los dos.

El estilo, básicamente, eran peleas callejeras en un scroll horizontal donde teníamos que enfrentarnos con múltiples enemigos, pudiendo realizar varios tipos de ataques (puño, patada), combinables entre sí para conseguir diferentes golpes o combos (agarrar y golpear, gancho, patada en el aire...). En muchas ocasiones también podemos robar armas a los enemigos que podríamos utilizar durante un tiempo hasta que se rompan o gasten.

Generalmente, al final de cada nivel, hay que derrotar a un jefe (con un nivel de dificultad más elevado) para desbloquear el paso y poder continuar nuestro camino en el juego.

Y esta ha sido mi pequeña aportación. No son una lista de los mejores juegos (ni siquiera están en orden de mejor a peor), simplemente he hecho una lista de los que más me llamaron la atención por alguna u otra razón, jugué durante mucho tiempo y quise recordarlos por aquí.

¿Recuerdas algún juego con el que pasaras mucho tiempo frente a tu GameBoy? ¡Cuéntalo en los comentarios!

Se podría decir que el juego tiene un género de plataformas mezclado con aventuras y metroidvania, aunque una de las características que más me gustan es que se centra en su desenlace, pero deja su historia deliberadamente abierta, para que podamos tirar del cable e intentar reconstruir los hechos según nuestra propia interpretación, uno de mis juegos preferidos. El juego está desarrollado con Construct2 y utiliza tecnologías resultantes como HTML5, Javascript (canvas) y NW.js.

El apartado visual del juego es maravilloso. Si eres de los nostálgicos a los que le gustan el buen pixel art, clásico pero combinado con técnicas modernas (niebla, lluvia, efectos, etc...), te encantará. Pero no queda ahí la cosa. Otro de los detalles que impresiona es la ambientación que consigue al unir diseño, música e historia. Todo esto, unido a que el juego cada vez se va volviendo más extraño, hace que el juego consiga una experiencia estupenda.

Quizás, como aspectos negativos mencionar que se trata de un juego de corta duración (2-3 horas) y con puzzles extremadamentes sencillos. A muchos usuarios les parecerá simple (no tiene enemigos, ni partes de acción), sin embargo, pienso que el juego valora más la experiencia exploradora y la curiosidad del jugador que el clásico divertimento de géneros parecidos, algo del estilo de juegos como To the moon o similares. El autor comenta que el juego está inspirado en Yume Nikki, un famoso RPG indie que también aborda el mundo de los sueños.

Como puede parecer lógico, este artículo contiene spoilers de su historia. Te aconsejo comprarlo y jugarlo antes de leerlo, de esta forma tendrás la oportunidad de disfrutarlo al 100%.

Disclaimer: Muchos de los comentarios de este artículo son mis interpretaciones personales del juego o su historia, y es muy posible que no sean más que eso, interpretaciones personales que no se ajustan a la idea original de su creador. Te invito a publicar un comentario con la interpretación que tienes de la historia del juego y/o detalles que posiblemente no haya tenido en cuenta. Quizás sería una buena idea publicarlo antes de leer el artículo, para intentar que mis ideas no afecten a tu versión de los hechos.

1. Sarah, la protagonista

En el juego controlamos a Sarah, una joven chica que, como dice el título del juego, está sumida en un profundo sueño. Debemos explorar el mundo en el que estamos para descubrir que ocurre o como conseguir despertar.

A lo largo del juego iremos encontrando objetos, que nos darán acceso a otras partes del juego o nos dotarán de habilidades especiales. Esto, como suele ser habitual en los metroidvania, hace posible volver atrás en el juego y realizar acciones que antes no eran posibles o llegar a lugares que antes eran inaccesibles.

Sólo iniciar la partida, ya se nos da una idea de la ambientación de la que disfrutaremos durante el juego. Comenzamos con la canción Strange World (un mundo extraño), de la estupenda banda sonora de Anthony Septim, mostrando a Sarah tendida en el suelo, inmóvil, esperando a la reacción del usuario para detener la música de introducción y comenzar la aventura.

En la web de los creadores de Dreaming Sarah, se cuenta la historia de la evolución de Sarah durante las fases de desarrollo del videojuego, hasta llegar al aspecto que luce hoy en día. Las animaciones actuales del personaje son estupendas y denotan un gran cariño hasta en los más pequeños detalles.

2. El paraguas del bosque (Forest dimension)

El primer nivel del juego transcurre en el bosque. Mostrado como un lugar en calma y con una música tranquila, su título It was here (Fue aquí) nos indica que ocurrió algo en ese lugar. Durante los primeros minutos de juego, exploraremos el bosque y nos encontraremos con un extraño ser que ha perdido su paraguas, ítem que encontraremos más adelante y que nos permitirá caer lentamente desde las alturas.

Posteriormente en el juego, nos volveremos a topar con este ser en el exterior de una mina. Nos contará que finalmente encontró su paraguas, haciendo referencia a la hoja de una planta, no a lo que creíamos.

Entre otras cosas de las que ya hablaremos, como un leñador o unos artefactos de color azul, amarillo y naranja, también veremos una extraña planta azul que al quedarnos inmóviles observándola, girará cada vez más rápido (y que más adelante, una chica rubia la observará de cerca).

2. La dimensión del ojo (Eye dimension)

Probablemente, el segundo lugar al que llegaremos será un extraño edificio con un ascensor. Si subimos en él, nos daremos cuenta que hemos llegado al punto más alto de una torre rosa y púrpura, donde hay múltiples ojos observándonos. La canción que suena en esta parte se titula SlowMotion (cámara lenta).

Este lugar podría representar el temor o la presión de Sarah por sentirse incómoda, observada o controlada por otras personas.

Si avanzamos por esta dimensión, nos encontraremos una solitaria gorra de béisbol azul vieja (similar a la que tiene Dipper en Gravity Falls) bajo un gigantesco ojo que nos mira. Parece pertenecer a un niño que descubriremos más adelante, en una zona con columpios de un parque infantil, llorando porque sus padres se enfadarán con él por haberla perdido.

Al devolverle su gorra, dejará de llorar y con una expresión de felicidad, desaparecerá y se abrirá un portal hacia un desierto. Como curiosidad, en los archivos del juego ese niño se llama Walmyr, supongo que en referencia a uno de los amigos del creador.

Dato: Más adelante, cuando ya tengamos la lupa, podremos utilizarla frente al ojo gigante, haciéndonos más pequeños y consiguiendo el primer logro secreto del juego «Shrink the eye» (1/5), que podría simbolizar el escapar de la atención de una persona que ejerce presión sobre ti.

3. El marinero del desierto (Desert dimension)

Al atravesar el portal, llegamos a una zona desértica donde sólo escucharemos el ruido del viento. Si avanzamos, recorreremos un camino vacío hasta encontrar una brújula, que nos servirá para indicarnos en que dirección hay cosas interesantes. Si seguimos sus indicaciones, llegaremos a un pozo por donde podemos entrar y acceder al siguiente nivel: la mina.

Sin embargo, si no le hacemos caso y vamos hacia el lado contrario, terminaremos llegando a una isla desierta donde hay un marinero que se ríe de nosotros por habernos perdido, ya que si intentamos ir hacia otro lugar, acabaremos siempre en la misma isla con él.

Este lugar y sus elementos (brújula, marinero burlándose, llegando al mismo sitio si se va en la misma dirección...) parecen girar en torno a la desorientación o a la sensación de sentirse perdido. Más adelante hablaremos de otro misterioso detalle relacionado con este lugar, pero de momento, vamos a ceñirnos al siguiente nivel: la mina.

Dato: Una vez avancemos en el juego, veremos que hay más referencias al mar y a las anclas, por lo que puede que el rol del marinero en la historia real de Sarah sea más que una coincidencia. O puede que no...

4. La mina (Mine dimension)

Al caer por el pozo, llegamos a la mina, un lugar lleno de lava, humo y viejos materiales de excavación. Un trabajador de la mina nos avisa que no ha encontrado nada de valor, pero que aún así lo sigue intentando. Buscando un poco, llegaremos hasta dos objetos interesantes:

• Una lupa, que nos permitirá alternar entre tener un tamaño grande y pequeño, algo que nos dará la posibilidad de entrar por huecos y lugares antes inaccesibles.

• Un bote de pintura, que nos dará la habilidad de cambiar los colores de la ropa que tenemos. Según parece, esta habilidad no tiene ninguna finalidad, a parte de la estética o visual (o al menos, yo no la he descubierto).

Tras dar vueltas por la mina, esquivar lava y llegar a lugares recónditos, descubriremos que la mina tiene dos posibles salidas: una hacia la izquierda, dando al exterior de la mina, el bosque de donde venimos. Y otra salida más, hacia arriba a la derecha, que lleva a una vieja mansión a través de un extraño símbolo.

La estupenda canción que suena en esta dimensión es una de mis preferidas y se titula Madness (locura), por lo que podría representar la pérdida de control o la sensación de volverse loco.

5. Los dueños de la mansión (Mansion dimension)

Tras recorrer una oscura zona del bosque, se alzará ante nosotros la imponente entrada a una mansión. Si la bordeamos antes de entrar, veremos que el dueño de la misma posee un coche azul. Uno de los cubos de basura parece tener la marca de un zarpazo (aunque quizás sólo sean marcas de suciedad).

En el interior de la mansión, entre sofás, plantas, luces de bombillas y estanterías repletas de libros, hay un cuadro con la silueta de una mujer de pelo azul y ropa roja, lo que podría indicar que es la madre de Sarah, ya que parece algo mayor.

Si nos adentramos un poco en la mansión, veremos a un fantasma sentado tomando café y afirmando estar muerto, por lo que no debería preocuparse por llegar tarde al trabajo. Como parece tratarse de la casa de los padres de Sarah y hay cintas policiales que impiden el paso a algunas zonas, sería lógico pensar que en esa casa hubo algún crimen y el padre resultó muerto. Además, los archivos internos del juego nombran ghostdad al fantasma, lo que reafirma esta teoría.

La canción que suena en el exterior de la mansión se titula Blue night (noche azul), mientras que en el interior de la mansión suena una versión más tenebrosa llamada Stroll (paseo). El lugar podría hacer referencia a unos tristes recuerdos del pasado de Sarah.

Con ayuda de la brújula, encontraremos unas gafas que permitirán a Sarah ver cosas que antes no era capaz de ver, como por ejemplo, unas estanterías flotantes por las que puede ir saltando hasta llegar a una psicodélica habitación llena de libros, con una misteriosa y silenciosa mujer con un gato. En este lugar conseguiremos un carnet de identificación con la foto borrosa. La canción que suena en esta zona se titula bad dream (mal sueño).

6. El sótano de la mansión (Dead cat)

Si somos observadores, en una de las puertas donde antes había una cinta policial, ahora no hay nada, por lo que tenemos vía libre para bajar a investigar al sótano de la mansión. A lo largo de todo el camino, recopilaremos 8 chispas que nos ayudarán a iluminar el camino hasta llegar al final.

Las paredes rebosan de una especie de sustancia verde por todo el sótano. Un personaje llamado Zeblob (según los archivos internos del juego) nos mira al final del camino, y parece creer que nos conoce. Si tenemos la lupa y continuamos avanzando, nos encontraremos con una escena perturbadora: un gato gigante muerto, con varios arañazos, decapitado y con su cerebro por fuera. Es otro de los logros secretos del juego: «Find the dead cat» (3/5).

No se me ocurre que tipo de relación o significado puede tener el gato con la historia de Sarah (si la tiene), si tendrá que ver con el gato que tiene la mujer de la habitación de los libros o si será una representación menos hiriente para la mente de Sarah ante una terrible muerte de su padre, junto al cambio a color verde de la sangre de la escena.

En cualquier caso, junto a las chispas anteriores, obtuvimos también una llave roja con forma de corazón. Dicha llave abre una puerta roja del exterior de la mansión, que conecta directamente con la cabaña del leñador que nos ayudó al principio del juego.

7. El leñador (Lumberjack)

No habíamos hablado aún de un personaje que aparece al principio del juego, ayudándonos y ofreciéndonos unas semillas que, junto al paraguas nos permitirán acceder a algunas zonas antes inaccesibles.

Desconocemos la relación que tiene este leñador con Sarah, pero en múltiples ocasiones se da a entender que es una figura cercana o de protección: nos ayuda con las semillas, la llave y la puerta de la cabaña tiene un corazón, la cabaña conecta con la mansión de Sarah, etc...

Sin embargo, este personaje parece deprimido por alguna razón. Muestra un comportamiento triste y solitario y parece tener problemas para conseguir trabajo, como veremos más adelante cuando nos lo volvamos a encontrar. Los archivos internos del juego se refieren a este personaje como Pierrot.

8. La píldora (Pill dimension)

Al volver al bosque, veremos un bloque de hielo derritiéndose sobre un seto. Si accedemos a él, llegaremos a un nuevo y silencioso lugar completamente cubierto de nieve. Allí conseguiremos una caja de píldoras, que Sarah podrá tomar para volver rápidamente al lugar donde empezó la aventura.

Esto, junto a las píldoras gigantes de fondo, y los tres fantasmas que suplican a Sarah que no lo haga, dan a entender que Sarah está tomando algún tipo de medicación (no sabemos si por enfermedad u otra razón).

Como dato curioso, si mantenemos a Sarah inmóvil, comenzará a tiritar de frío. Por otro lado, al saltar al vacío (en cualquiera de los dos extremos), Sarah aparecerá nuevamente en el desierto junto al marinero.

9. Los aliens antiguos (Desert dimension)

Antes de volver al bosque, con las gafas equipadas, podemos volver a la zona vacía donde encontramos la brújula, encontrándonos con una sorpresa. El lugar está plagado de estatuas antiguas de aliens, que sin las gafas no podíamos ver. Otro de los logros secretos: «Discover the ancient aliens» (4/5).

De la misma forma, cuando estamos en la mansión (cerca de las estanterías flotantes), una de las ventanas muestra la silueta de una especie de planta con cabeza triangular y varias ramas, detalle del que hablaremos más adelante y puede ser bastante importante en la historia de Sarah (y que tampoco podemos ver si no llevamos las gafas puestas).

10. La televisión (Underground dimension)

Una vez en el bosque, nos habremos dado cuenta que si colocamos los artefactos en la posición que vemos en el cartel del exterior de la mina, se abrirá la barrera y nos permitirá acceder al subsuelo.

Una vez dentro, nos encontraremos en una estancia en la que toda la atención se la lleva un televisor con patas, que muestra interferencias en su pantalla.

Al acceder a él, caminaremos por un lugar de plataformas naranjas donde no hay mucho que hacer salvo encontrar dos cosas interesantes que están bien escondidas fuera de pantalla:

• Un peluche con una etiqueta «Blockhead», que desbloqueará el nivel del reloj y el tiempo, accesible desde el bosque.

• Un cohete amarillo que nos trasladará a un lugar lejos de ahí.

Como curiosidad, destacar el triángulo naranja con un hueco en el centro y la punta superior de color amarillo. Aunque es sólo decoración, puede ser que tenga (o más bien, tuviera) un papel importante en la historia de Sarah, como veremos en uno de los últimos puntos de este artículo.

11. La luna rosa (Moon dimension)

Al llegar a la luna rosa, una sensación de paz y tranquilidad nos invade mientras suena la canción It's all over (Todo terminó), lo que también nos da que pensar. Nos encontraremos una chica de pelo púrpura, muy espiritual, un cubo de basura que sigue las leyes de la gravedad o incluso una bandera de Brasil (país de origen del autor del juego) que sólo podremos ver si tenemos las gafas puestas.

Si nos fijamos bien, hay un pequeño conejo con escafandra saltando por algún rincón de la luna. Si lo tocamos, conseguiremos el segundo logro secreto: «Touch the moon bunny» (2/5).

En la zona inferior del planeta, hay un bar al que podemos entrar. En su interior, destacan dos personajes: un pianista (del que hablaré posteriormente) y un barman.

Si le pedimos una copa al barman, nos dirá que necesita ver una identificación (Sarah debe ser muy joven). Si anteriormente conseguimos la tarjeta de identificación en la sala de los libros de la mansión, aunque no le convence demasiado, nos servirá la copa, la cuál no nos sentará muy bien, y terminaremos desmayándonos.

12. El accidente (Accident dimension)

Sarah despierta en una carretera donde llueve y se ve una señal de prioridad. Si avanzamos un poco por ella, nos encontraremos con tres esqueletos (¿de pájaro?) caminando, seguido de otro esqueleto más que intenta alcanzarlos (si nos fijamos, son los que aparecen en la señal).

Si continuamos avanzando llegaremos a la escena más descriptiva del juego: el accidente. Un coche rojo con el cristal de la parte frontal del conductor quebrada, la parte del capó del conductor hundido (del golpe) y la puerta del conductor abierta con el cristal roto y fragmentos en el suelo. A un par de metros, Sarah tendida en el suelo tal y cuál nos despertamos al principio del juego.

Aunque muchas de estas cosas podrían ser simplemente alucinaciones (por los efectos del alcohol), pienso que se trata de un recuerdo abstracto del accidente que tuvo Sarah, donde fue atropellada, quedando en coma.

La canción que suena durante esta parte se titula Madrigale (Madrigal). Los esqueletos podrían representar la muerte y la familia, o quizás el origen del accidente.

Más adelante, Sarah encontrará una bala, y posteriormente una estatua gris (similar a un tótem) con una especie de balanza dibujada en ella (¿equilibro entre vida y muerte?) por donde puede volver al bosque.

13. La pianista suicida (Moon dimension)

Habiamos dicho que en el bar de la luna rosa había un (o una) pianista. No se ve claramente, sólo se intuye una silueta que toca un piano de cola, con una larga capa negra y cabello largo. Sobre el piano hay una pistola.

Al entrar al bar, escuchamos a este pianista tocar una canción. Si nos acercarnos y le entregamos la bala que encontramos, interrumpirá bruscamente la canción y se quedará inmóvil. Al salir y volver al bar, la encontraremos llena de sangre y con unas cintas policiales. Es el último logro secreto del juego: «Help the pianist» (5/5).

La canción de piano que suena en esta parte del juego se titula Suicidal pianist (El pianista suicida).

14. El reloj y el tiempo (Clock dimension)

Volviendo al bosque, comprobaremos que ahora aparece un antiguo reloj roto. Si accedemos por él, entramos en una dimensión relacionada con el tiempo, ya que observaremos que allí el reloj está intacto, como era antes. Esto podría indicar que estamos viajando al pasado de Sarah.

Si nos dirigimos hacia la izquierda, encontraremos un inflador de globos, donde uno de los globos (el de color azul) tiene una cara malvada y nos dirá que no es su problema si nos hemos perdido.

La canción que suena en este nivel se titula Solitude (Soledad). El lugar tiene dos salidas y de difícil acceso (abajo a la derecha): una entrada con forma de diente (que dejaremos para el final) y un hueco que da a una zona acuática. Accedemos primero a esta última.

15. El mar (Sea dimension)

Nada más acceder a este nivel, nos encontraremos un colgante con una concha junto a un esqueleto en la orilla del mar. Este colgante permitirá a Sarah convertirse en pez y poder moverse por el agua. Un detalle curioso es que si utilizamos el bote de pintura y luego el colgante, Sarah en forma de pez también cambia de color.

Como pez, podremos surcar el mar a ritmo de Sweet Solitude (dulce soledad), una atmosférica canción que nos acompaña en esta parte. El lugar tiene dos salidas:

• Un ancla, que conecta con el bosque, concretamente en la zona de agua del puente roto.
• Un váter, por el que podremos entrar, y que conecta con los baños del interior de un club.

Además, también hay una zona donde podemos ver a una persona ahogada, con aparentes manchas de sangre en la cara. Si nos acercamos a él, el mar se teñirá de rojo, aunque aparentemente no ocurre nada más.

Sin embargo, aunque aún no podemos acceder (ya que necesitamos el reloj que aún no tenemos), al tenerlo más adelante, podremos ralentizar el tiempo y acceder a una zona tras un muro en movimiento. Allí descansan un torpedo hundido, una roca que hace chistes y una vieja estatua rota de una mujer, por donde podremos volver al bosque.

16. El Club (Club dimension)

A través del retrete llegamos a los baños de un club. Mientras examinamos su interior, en este lugar suena otra de mis canciones preferidas del juego: The blue fairy (El hada azul). Observaremos nuestro reflejo en el espejo del baño y llegaremos a la sala principal, donde hay tres personajes (hipsters, según los archivos internos del juego): una chica azul, una chica rosa y un chico marrón.

Estos personajes muestran aires de superioridad con sus comentarios, ambiente y personajes que parecen creados para representar inseguridades de Sarah.

Con poco más que hacer por dentro, salimos del club y observamos el exterior. Nuestro amigo el leñador ahora es un guardia de seguridad que viste de etiqueta con gafas de sol. Parece ser que ha encontrado trabajo como portero del club.

Por la parte trasera del club, hay una extraña criatura muy egocéntrica con forma de huevo que no quiere que dejes de mirarla.

17. El incidente del Club

Si nos dirigimos a la izquierda, nos encontraremos con una extraña chica azul-verdosa. Nos cuenta que el guardia de seguridad no le deja entrar al club, por lo que si hablamos posteriormente con él, y lo despistamos, la chica aprovechará para entrar.

Al volver a hablar con nuestro amigo, nos confiesa que es el primer trabajo que ha disfrutado en mucho tiempo y no quiere estropearlo. Mientras que la criatura con forma de huevo nos dice que ha visto lo que hicimos.

En este punto, el juego consigue que sintamos culpabilidad, antes incluso de entrar al club y comprobar que la inocente chica se ha cargado a todo el que se ha encontrado por delante. Al volver al baño hay una tarjeta que podremos utilizar en la parada del exterior del club para volver al bosque.

18. El Hospital

Finalmente, volvemos al nivel del reloj y accedemos a la puerta del diente. Llegaremos a lo que parece ser el interior de una boca (quizás haciendo referencia al clásico miedo al dentista). Tras darle el zumo desagradable a un bulto rojo que nos impedía el paso, llegaremos al interior del hospital.

Cada vez que pasamos por la puerta, el letrero superior mostrará un dibujo diferente (un esqueleto, un oso, tres puntos y un pato). Al hablar con la recepcionista (muy creepy, por cierto) nos comentará que el doctor no ha llegado aún, que le ayudemos a buscarlo.

Tras buscar un poco, lo encontraremos avergonzado y atascado en el interior de la máquina de refrescos de la sala de la derecha. Tras hablar con él, iremos a verlo a la consulta, donde nos dará un reloj con el que podremos ralentizar el tiempo y sortear los obstáculos de la zona inferior del hospital.

Curiosidad: Si entramos y salimos de la consulta del doctor, nos contará un chiste aleatorio cada vez. Auténticas pato-chadas. Entre ellas, destacar uno de los diálogos en el que el pato le pregunta a Sarah si tiene 35 años.

La canción que suena en esta parte es The violet sky (el cielo violeta).

19. Dreaming Sarah ending

Al atravesar la última puerta, pasamos de las paredes blancas del hospital a un atardecer. Un globo surca lentamente los aires mientras nosotros avanzamos por un puente. Al llegar a la mitad del mismo, nos espera una anciana con gorro rojo y con bastón y suero en el brazo izquierdo. Nos pregunta si estamos seguros de que esto es lo que queremos, y finalmente, nos desea suerte.

Dato: En el caso de llegar a este punto sin haber completado alguna de las partes importantes, nos dirá otra frase diferente.

Si avanzamos un poco más encontraremos que el puente tiene una pequeña parte rota, por donde podemos saltar, iniciando así la secuencia del final del juego, donde los objetos que utilizamos giran alrededor de Sarah. Mientras tanto, suena la canción Memories fragments (fragmentos de recuerdos), que parece que evoca a la vida, la muerte y a la fragilidad del paso del tiempo.

Al finalizar el juego se nos muestra una imagen donde se ve a Sarah despertando del coma, pero no siempre se muestra la misma imagen, hay dos finales alternativos, con algunas diferencias:

• El reloj sólo aparece marcando la hora en el segundo final.
• Sarah tiene una exclamación y cara de sorpresa en el segundo final.
• Alguien le ha enviado un ramo de flores azules y una tarjeta a Sarah en el segundo final.

Aunque son sutiles, las diferencias pueden marcar el significado de forma tajante. No es lo mismo un final en el que alguien está pendiente de ti (ramo de flores) que en el que no lo están, al igual que la ausencia de reloj podría indicar que realmente no hemos despertado del coma (en los sueños no se suelen reflejar las horas de forma lógica).

Dato: El logro del final del juego tiene una imagen de una rosa azul del ramo que está sobre la mesa.

20. Recursos escondidos (no utilizados)

Uno de los tests que siempre me gusta realizar a los juegos que analizo es la prueba del «data mining», donde busco recursos escondidos, no utilizados u ocultos. Dreaming Sarah no es una excepción y tiene varios gráficos que no aparecen en el juego, posiblemente porque no fueron utilizados en la versión final:

• La mansión originalmente tenía una vidriera junto a una escalera. En ella se puede ver un humanoide, quizás relacionado con los aliens antiguos que aparecen en el desierto.

• El triángulo que aparece en la dimensión del televisor, parece que también tenía un personaje escondido (m0alien) que finalmente no se llegó a utilizar.

• El colgante de Sarah, parece que antes de convertir en un pez, la idea era convertirla en una mariposa.

• El ser pescador del paraguas (umbrellaguy) parece que tuvo una versión anterior púrpura con gafas blancas y un flequillo muy llamativo.

• Algunos personajes finalmente no aparecen en la aventura, como sleepyhead (personaje durmiente), firex (un extintor de incendios), o unos curiosos personajes púrpura.

21. Banda sonora (Anthony Septim)

Por si no lo he mencionado lo suficiente, la estupenda banda sonora del juego es de Anthony Septim y puedes acceder a ella a través del siguiente enlace de Bandcamp: Music from Dreaming Sarah. ¡Por si fuera poco, también tienes una edición especial a piano: Dreaming Sarah: The piano collection!

¡Y esto es todo! Espero que te haya gustado el análisis y que, a cambio, inviertas un poco de tu tiempo en escribir un comentario y contarme tu opinión. Si has jugado a Dreaming Sarah me gustaría mucho saber tu interpretación de la historia y que crees que ocurrió realmente para que Sarah entrara en coma, o la historia que hay detrás.

En la segunda parte, alternativas ligeras a Bootstrap presentamos un conjunto algo más numeroso, de frameworks CSS alternativos, donde no hay presente tanta carga de Javascript y el tamaño del mismo suele ser notablemente menor.

• Parte I: Alternativas a Bootstrap: Frameworks CSS
• Parte II: Alternativas a Bootstrap: Frameworks CSS ligeros
• Parte III: Alternativas a Bootstrap: Frameworks CSS ultraligeros
• Parte IV: Alternativas a Bootstrap: Frameworks para Grid
• Parte V: Alternativas a Bootstrap: Componentes web

En esta tercera parte, hablaremos de alternativas a Bootstrap minimalistas, la mayoría de ellos con un tamaño menor de 10KB, siendo ideales para pequeños proyectos donde se busca la simplicidad, se quiere un sitio ligero y rápido, o no se quiere arrastrar con componentes o código prediseñado que nunca se va a utilizar.

1. Milligram

Milligram es un estupendo framework CSS muy sencillo que apenas ocupa 9KB. Está especialmente diseñado para tener un buen rendimiento y acelerar lo máximo posible un desarrollo visual.

Se trata de un framework minimalista que viene ya con tamaños de tipografías utilizando unidades rem (relativas a la fuente inicial) utilizando la tipografía Roboto por defecto, tiene definidos estilos visuales para citas, botones, listas, campos de formularios, tablas y códigos (sin resaltado de sintaxis). Utiliza grids con un tamaño máximo de 112rem y usando Flexbox, que hace que el código sea más simple y cómodo.

Milligram también provee documentación con algunos trucos y técnicas a la hora de utilizarlo, como por ejemplo, utilizar la estrategia Mobile First (que minimiza el código CSS sin utilizar) o extender herencia.

• URL | Milligram | Docs
• CDNJS | Milligram en CDNJS
• Tamaño aprox | ~9KB

2. Wing

Wing CSS es un framework minimalista muy similar a Milligram, que está orientado para diseños intuitivos, ligeros y bonitos. Es aún más ligero que el anterior, ocupando apenas 5KB. Aún así, incorpora multitud de facilidades: tamaños de encabezados, sistema de grid de 12 columnas (mínimo 960px), botones, campos de formulario, menús de navegación y algunos componentes como tarjetas (cards) o utilidades para centrar o justificar, así como ocultar secciones en tablets o dispositivos móviles.

• URL | Wing | Guía
• CDNJS | Wing CSS en CDNJS
• Tamaño aprox | ~5KB

3. Skeleton

Skeleton es ideal para comenzar pequeños proyectos en los que quieres partir de una base. Más que un framework CSS, se podría hablar de Skeleton como de un boilerplate+framework muy, muy simple. Skeleton nos ofrece no sólo un código HTML organizado y comentado para utilizar de base, sino también un código CSS organizado y comentado, con ciertas facilidades como un sistema grid de 12 columnas (con un máximo de 960px) responsive y listo para utilizar en diferentes dispositivos, utiliza la tipografía Raleway por defecto, tiene un interfaz de botones muy visual y legible, así como formularios, listas, tablas y otras utilidades.

Otro proyecto similar muy interesante es awsm.css (Awesome CSS). Se trata de una librería CSS para «embellecer» HTML semántico, sin necesidad de utilizar clases o atributos.

• URL | Skeleton | Demo
• CDNJS | en CDNJS
• Tamaño aprox | ~6KB

4. Cutestrap

Cutestrap se plantea como una alternativa a Bootstrap y Foundation, pero intentando mantener la simplicidad siempre en mente. Formularios, tipografías (usando rems), sistema de grids y columnas así como utilidades para justificación o cambio de tamaño de textos. El código fuente está disponible en Sass y se utiliza la metodología BEM.

• URL | Cutestrap | GitHub
• CDNJS | Cutestrap en CDNJS
• Tamaño aprox | ~8KB

5. Primitive

Al igual que Skeleton, Primitive engloba una plantilla inicial con la que podemos empezar a trabajar en nuestro pequeño proyecto. Primitive incorpora una plantilla HTML5 donde nos recomienda empezar estableciendo el idioma por defecto, definir el ancho del viewport y opcionalmente otros detalles. La plantilla incorpora jQuery para manipular el DOM y utiliza el último modo de renderizado de IE.

Una vez dominado este punto, podemos comenzar a utilizar el framework CSS. Incluye múltiples elementos como contenedores con tamaño (útiles para el responsive), sistema de grid personalizado y flexible, tipografías, botones, formularios, tablas, etc... Como todos estos frameworks minimalistas, incluye algunas utilidades de ayuda para centrar elementos o textos o hacer responsive las imágenes. Primitive está disponible en formato CSS y en formato Sass, por si se quieren modificar las variables internas. Como curiosidad, su página oficial tiene un modo de visualización de «los 80's».

• URL | Primitive | Demo
• CDNJS | Primitive en GitHub/RawGit
• Tamaño aprox | ~12KB

6. BassCSS

BassCSS se define como una herramienta de CSS a bajo nivel para desarrolladores web. Entre las diferentes características que busca este framework, se destacan las siguientes: código humano (entendible y sin inflar), sin efectos secundarios (evitar problemas comunes de especificidad), reutilizable (muy escalable), ideal para diseño y responsive por defecto.

BassCSS se basa en el diseño atómico de CSS: Encabezados y tipografías (con posibilidad de aumentar tamaño visual pero correctamente de forma semántica), listas, tablas y formularios, multitudes de utilidades para crear diseños y colocar elementos en un layout, sistema potente de grids, utilidades flexbox e incluso la posibilidad de utilizar addons para extender su funcionalidad.

Otro framework interesante para utilizar como punto de partida podría ser BareKit, con apenas unos 11KB de tamaño.

• URL | Bass CSS
• CDNJS | Bass CSS en CDNJS
• Tamaño aprox | ~10KB

7. Papier

Papier es un framework CSS ultraminimalista que pretende adoptar la idea de diseño del Material Design de Google, con un tamaño máximo de 11KB. Se trata de un framework para crear diseños responsive, minimalistas y cuidando especialmente la semántica del HTML, con los elementos habituales: botones, cards, paginación, sistema de grids por columnas, tablas, formularios y pestañas, entre otros detalles.

Remarcar también un framework minimalista muy similar, llamado Furtive.

• URL | Papier
• CDNJS | Papier en CDNJS
• Tamaño aprox | ~11KB

8. Bijou

Si lo que estás buscando es un framework excesivamente simple, dudo que encuentre uno más pequeño que Bijou. Con tan solo 2KB, es uno de los frameworks más pequeños, que permite crear más elementos en tu diseño: Sistema de grids (12 columnas), encabezados y tipografías, tablas legibles, botones y bloques de alertas.

También puede ser interesante para el aprendizaje, puesto que no hay excesivos componentes y se centra en un código limpio y claro, bastante consiso. Otros frameworks parecidos que pueden interesarte son ?css y minCSS, muy ligeros y simples, aunque no tanto como Bijou.

• URL | Bijou
• CDNJS | en CDNJS
• Tamaño aprox | ~3KB

9. Siimple

Como su propio nombre indica, Siimple intenta centrarse en la creación de diseños simples y claros, teniendo en mente la tendencia de diseño Flat design (Diseños lisos).

En su página de documentación, podemos observar que se centran en una metodología muy parecida a BEM (siimple-elemento--atributo), permitiendo la creación de código muy legible. Incorpora los clásicos elementos como botones, campos de formulario, encabezados y tipografías, sistema grid de 12 columnas, etc.

Además, también incorpora un módulo de colores de forma adicional, llamado siimple-colors, con el que puedes cambiar rapidamente el esquema de colores de la interfaz de usuario.

• URL | Siimple
• CDNJS | Siimple en JSDelivr
• Tamaño aprox | ~8KB

10. Chocolate

Chocolate CSS es un framework ultra minimalista que está tanto disponible para diseños oscuros como para diseños claros. Llama la atención lo vistosos que son sus elementos, a pesar del minimalismo.

Chocolate CSS se basa en un sistema grid de los más habituales (12 columnas) incluyendo componentes como botones (con diferentes tamaños y estilos alternativos), estilos y efectos prediseñados para imágenes, tablas, listas e iconos. Todos ellos preparados para cambiar en cualquier momento de un diseño claro a un diseño oscuro, o viceversa.

Otros frameworks ultraminimalistas que te podrían interesar serían Lotus.css o MisType, este último orientado a un diseño ultraminimalista sin estilo visual, ideal para añadirle finalmente una capa extra de diseño gráfico.

• URL | Chocolate CSS
• CDNJS | Chocolate en GitHub/RawGit
• Tamaño aprox | ~5KB

Y con esto terminamos el bloque de frameworks CSS generalistas. ¿Conoces algún framework que no haya sido citado en estos tres artículos (1, 2, 3)? En el próximo artículo de esta serie hablaremos de frameworks CSS específicos para Grid.

Estos frameworks, a grandes rasgos, son grandes alternativas, complejas, que suelen englobar una gran cantidad de componentes (agrupaciones de código para crear estructuras de interfaz de usuario más o menos comunes) en el panorama del diseño web.

• Parte I: Alternativas a Bootstrap: Frameworks CSS
• Parte II: Alternativas a Bootstrap: Frameworks CSS ligeros
• Parte III: Alternativas a Bootstrap: Frameworks CSS minimalistas
• Parte IV: Alternativas a Bootstrap: Frameworks para Grid
• Parte V: Alternativas a Bootstrap: Componentes web

En esta segunda entrega, mi intención es agrupar una colección (algo más diversa) de frameworks alternativos a Bootstrap, pero esta vez centrándonos en alternativas menos pesadas y complejas, que en general, ni siquiera requieran Javascript.

1. Pure CSS

Pure CSS es un estupendo framework desarrollado por Yahoo! especialmente orientado en la simplicidad y legibilidad. El gráfico multicolor que muestra en su página principal ya da una idea de lo simple que es, puesto que sumando cada una de las partes específicas (Base, Grids, Forms, Buttons, Tables y Menus), apenas llega a 16KB en total.

Permite personalizar el framework y quedarte sólo con las partes que quieres utilizar (por si sólo vas a usar el grid o los botones, por ejemplo), incluso pudiendo utilizar un CDN como jsDelivr.

• URL | PureCSS | Docs
• CDNJS | PureCSS en CDNJS
• Tamaño aprox | ~16KB

2. Bulma

Bulma es un framework CSS orientado para el desarrollo de páginas webs muy legibles y agradables, tanto para el visitante, como para el desarrollador. Tiene una documentación muy detallada y digna de alabanza, ya que están todas sus características muy bien documentadas, empezando por sus características más básicas y elementales, hasta llegar a las más complejas o las que incorporan mayor cantidad de código.

Además, se trata de un framework bastante moderno, que incorpora características interesantes como Flexbox, sistema en el que está basado.

• URL | Bulma | Templates
• CDNJS | Bulma en CDNJS
• Tamaño aprox | ~112KB

3. Picnic CSS

El objetivo de Picnic es poner a nuestra disposición una alternativa a Bootstrap ligera, sólo con CSS, y lo más visualmente agradable posible. Y lo consigue bastante bien. Echando un vistazo a su documentación, vemos que tiene un gran número de elementos para utilizar con este framework que ocupa apenas 38KB.

A pesar de que el framework no contiene Javascript, a lo largo de la documentación te pone algunas líneas de código en javascript que puedes incluir para mejorar la experiencia de usuario, de forma opcional.

• URL | Picnic CSS | Demo
• CDNJS | Picnic CSS en CDNJS
• Tamaño aprox | ~38KB

4. Primer CSS

Primer no es sólo un framework, sino una guía de estilo y un conjunto de herramientas para crear páginas con el «look and feel» de GitHub. Desde recomendaciones HTML hasta fragmentos de código, pasando por componentes al estilo de los que existen en Bootstrap, siempre manteniendo la misma apariencia de la famosa plataforma de repositorios de código.

• URL | Primer | Docs
• CDNJS | Primer CSS en CDNJS
• Tamaño aprox | ~113KB

5. Amazium CSS

Amazium es un framework minimalista (que ocupa aproximadamente 40KB), con el que se pueden construir diseños web a partir de prototipos, de una forma relativamente sencilla. Su documentación es bastante clara, y está dividida en los conceptos necesarios para tal fin en orden de necesidad. Por ejemplo, comenzamos por la estructura (donde puedes utilizar grid o columnas), luego conceptos de estilo (tipografías, colores y componentes) y finalizando con elementos de un formulario (campos, mensajes de error, botones, etc...).

• URL | Amazium
• Tamaño aprox | ~41KB

6. Blaze CSS

Blaze CSS incorpora un gran número de componentes como botones, acordeones, burbujas, listas, paginaciones, menús, etc... precedidas de otros detalles interesantes como objetos genéricos (contenedores, grids, paneles, ventanas modales, etc...) o utilidades para gestionar alineaciones, tamaños o colores.

Como curiosidad, Blaze CSS sigue una arquitectura de triángulo invertido de CSS (ITCSS) junto a BEM, convenciones bastante modernas e interesantes a la hora de trabajar con el código. Por otra parte, si quieres modularidad disponible directamente, puedes encontrar componentes por separados en el CDN unPkg.

• URL | BlazeCSS | Demo | Examples
• CDNJS | BlazeCSS en CDNJS
• Tamaño aprox | ~69KB

7. Pavilion

Pavilion es un framework ligero que se centra en tener lo justo y necesario para construir una página legible y agradable sin necesidad de «inflarlo». Este framework es estupendo para utilizarse de primer punto de partida y obtener una web minimalista, vistosa y muy legible, o para utilizar de base e ir ampliando su diseño con más características.

Otro framework del mismo tamaño, y muy similar en filosofía e intenciones, es Yeti.CSS.

• URL | Pavilion | Docs
• CDNJS | Pavilion en CDNJS
• Tamaño aprox | ~26KB

8. Baseguide

Continuando con los frameworks ligeros para partir de base y ampliar, tenemos Baseguide. Se trata de un framework muy simple, responsive, con componentes escalables, grids con flexbox y media queries (breakpoints) extensibles. Muy aconsejable para aquellos que trabajan con SASS.

Si no te convence, y buscas algo más parecido a un boilerplate, echa un vistazo a Fictoan.

• URL | Baseguide
• CDNJS | Baseguide en CDNJS
• Tamaño aprox | ~21KB

9. Tachyons

Tachyons se define como un conjunto modular de CSS para construir interfaces de usuario rápidamente, sin necesidad de escribir CSS. Simplemente utilizas el CSS que necesites. Los principios del framework son que todo debe ser responsive, legible y rápido, hacer cambios de diseño y reutilizar código debe ser fácil y el CSS no debe impedir el funcionamiento base del HTML.

En el apartado de componentes puedes echar un vistazo a como construir ciertas estructuras o conjuntos de componentes. Se trata de un framework menos guiado que otras alternativas citadas.

• URL | Tachyons | Demos
• CDNJS | Tachyons en CDNJS
• Tamaño aprox | ~86KB

10. Concise CSS

Y con Concise CSS, como su propio nombre indica, continuamos con los frameworks simples y concretos, ideales para tomar de base y ampliar a una interfaz con un diseño específico y de nuestra elección. El eslogan de este framework es «Renuncia a frameworks inflados. Olvídate de tropezar con las clases de tu framework. Sé conciso.». Y al echar un vistazo a la documentación entendemos por qué.

Concise CSS es justo eso, un framework muy específico. Utiliza un estilo de codificación llamado RSCSS (Sistema razonable de CSS) que no es más que un conjunto de convenciones para que el código sea claro y lógico. Una vez clara esta primera parte, nos presenta un core con las características más solicitadas en un framework, así como addons útiles o componentes de UI.

• URL | Concise CSS | Docs
• Tamaño aprox | ~13KB

11. Bloom CSS

Bloom llama la atención por ser un framework excesivamente sencillo y minimalista, con el que podremos realizar interfaces simples en apenas unos segundos, ya que la documentación muestra todo lo que podemos hacer en una sola página, dándonos una idea de la interfaz que conseguiríamos con este framework. A su vez, utiliza otros frameworks (o partes de ellos) como Normalize.css, Font Awesome u otros.

• URL | Bloom CSS
• Tamaño aprox | ~78KB

12. Furatto

Furatto es un framework orientado a crear estructuras de interfaz de usuario de una forma clara y rápida. Un vistazo rápido a la documentación nos divide las estructuras de esqueleto de una página (media queries, grids, responsive, etc...), los elementos de navegación (navbar, sidebars, tabs, paginación...), así como elementos comunes de una página. Además, indica claramente los elementos que requieren Javascript adicional para funcionar desde el menú de documentación del framework.

Otro framework similar es Spectre CSS, que provee una serie de elementos y componentes de interfaz de usuario para crear diseños similares a los resultantes con Furatto.

• URL | Furatto | Docs
• Tamaño aprox | ~54KB

13. Outline CSS

Outline CSS es un framework simple que permite crear diseños claros, grandes y muy simples. Incorpora la mayoría de elementos de un framework del tipo de Bootstrap (tipografías, botones, formularios, paginación, tablas...), además de, por ejemplo, Susy, un plugin Sass para crear grids.

Otro framework del mismo estilo, con formato simple y básico, es Shine CSS.

• URL | Outline CSS | Get Started
• Tamaño aprox | ~13KB

14. Beauter

Beauter se enfoca en permitir crear diseños intuitivos y claros de una forma muy sencilla. Utiliza una metodología de código llamada bol{;} (base, -objeto _capa), similar a BEM. Además de los componentes típicos que incorpora la mayoría de frameworks, Beauter también incorpora elementos como componentes parallax (muy sencillos, eso sí).

• URL | Beauter | Docs
• Tamaño aprox | ~17KB

15. Thimble CSS

Thimble CSS hace referencia a la construcción de un sitio a medida, en base a las necesidades de cada proyecto. Se trata de un framework moderno (utiliza estructuras con flexbox) que permite crear diseños de forma ágil. Remarcar que es un framework muy, muy ligero, ya que apenas ocupa 14KB.

Utiliza una guía de estilo bastante atractiva, y al igual que otros frameworks tiene una serie de componentes como grids, justificación rápida, tipografías, botones, tarjetas u otros, que llaman la atención por la simpleza del código.

• URL | Thimble CSS | Docs | Style Guide
• Tamaño aprox | ~14KB

16. Cardinal

Muchos de los frameworks citados en esta lista, a pesar de autocatalogarse como frameworks, realmente son herramientas de interfaz de usuario (incluyen componentes prediseñados con una carga alta de diseño visual). Cardinal intenta huir de ese aspecto y mantenerse como un framework puro, independiente del aspecto visual final que se le quiera dar al sitio.

Cardinal CSS te ayuda a organizar la estructura del sitio facilmente, mantener el responsive design y facilitar en la medida de lo posible el escalar a diseños más complejos sin tener que hacer demasiados cambios en el código. Utiliza el preprocesador LESS.

• URL | Cardinal CSS
• Tamaño aprox | ~90KB

17. Mini CSS

Continuamos con otro framework que también permanece al margen del diseño visual, intentando enfocarse en la estructura del sitio, en lugar de los aspectos de diseño, que se podrán añadir posteriormente o personalizar a medida y en base al estilo elegido.

Con miniCSS lo que hacemos es organizar la estructura del sitio y crear de forma sencilla interfaces de usuario sin estética visual. La documentación está repleta de ejemplos en Codepen que podemos observar, modificar o utilizar de base.

• URL | MiniCSS | Quick Ref
• CDNJS | MiniCSS en CDNJS
• Tamaño aprox | ~35KB

18. Penguin

Por último, Penguin es un framework de componentes de interfaz de usuario desarrollado por BQ donde tenemos a nuestra disposición un amplio catálogo de código prediseñado listo para utilizar: alertas, botones, formularios, grids, ventanas modales, spinners, pestañas, entre otras. También permite la utilización de temas para modificar la apariencia visual.

Otro framework similar digno de mención podría ser Caramel (~46KB), el cuál incorpora un Showcase donde se puede ver la interfaz de los componentes del framework.

• URL | Penguin | Demo
• Tamaño aprox | ~22KB

Con esto, y tras la primera parte de este artículo, terminamos la segunda parte de Alternativas a Bootstrap. En el siguiente artículo nos centraremos en frameworks minimalistas y ultraligeros.

Un Framework CSS es un conjunto de conceptos, prácticas, consejos y/o herramientas, para realizar tareas muy comunes y habituales de diseño web, de la forma más rápida y cómoda posible. Quizás, el framework CSS más popular con diferencia es Bootstrap, de Twitter.

• Parte I: Alternativas a Bootstrap: Frameworks CSS
• Parte II: Alternativas a Bootstrap: Frameworks CSS ligeros
• Parte III: Alternativas a Bootstrap: Frameworks CSS minimalistas
• Parte IV: Alternativas a Bootstrap: Frameworks para Grid
• Parte V: Alternativas a Bootstrap: Componentes web

Este artículo será el primero de varias partes, donde hablaremos de Frameworks CSS: Alternativas a Bootstrap. En esta primera parte me he centrado en los frameworks más populares, que incorporan no sólo código CSS, sino además componentes que requieren Javascript para su funcionamiento.

En la segunda y tercera parte hablaremos de frameworks más ligeros y simples (ideales para diseños rápidos y minimalistas) muchos de ellos que ni siquiera necesitan Javascript. En la cuarta parte veremos algunos frameworks para creación de cuadrículas o «grids» (mientras crece y crece el soporte para nuestros queridos Grids CSS nativos) y en la última parte veremos frameworks relacionados con componentes web.

1. Bootstrap

Probablemente, el framework más popular de la lista es Bootstrap. Se trata de un framework desarrollado por la gente de Twitter. Actualmente es uno de los más utilizados y que más se utilizan en el mercado.

Recuerda que Bootstrap consta de una librería CSS, una librería Javascript opcional (para algunos componentes que la requieren) y se le puede añadir un tema para proporcionarle una interfaz más personalizada o llamativa. Algunos temas interesantes podrían ser Material Kit, BMD o MDB (Material Design para Bootstrap), M8tro o Metro (Interfaz Metro de Microsoft), o la popular colección de temas simples Bootswatch.

• URL | Bootstrap | Demo
• CDNJS | Twitter Bootstrap en CDNJS
• Tamaño aprox | ~200KB

2. Foundation

Foundation es casi con toda seguridad, el segundo framework más utilizado. Está orientado a la estrategia Mobile First, donde primero diseñas la interfaz para dispositivos móviles de una web, y luego vas adaptando las versiones más grandes como tablets o escritorio.

• URL | Foundation | Demo
• CDNJS | Foundation en CDNJS
• Tamaño aprox | ~200KB

3. Semantic UI

Como su propio nombre indica, Semantic UI hace un énfasis bastante grande en la semántica del código HTML. Uno de los grandes problemas de Bootstrap, es que muchas veces debes añadir clases y código adicional para realizar cosas que ya se pueden hacer con código HTML directamente, siendo menos coherente y empeorando la calidad del código. Este framework intenta evitar precisamente este punto, manteniendo un equilibrio entre calidad de código y apariencia visual.

• URL | Semantic UI | Demo
• CDNJS | Semantic UI en CDNJS
• Tamaño aprox | ~800KB

4. Materialize CSS

Otro framework muy utilizado últimamente es Materialize CSS. Se trata de un framework muy similar a Bootstrap, que aplica los conceptos y bases del Material Design, las normas de diseño aplicadas en las últimas interfaces de usuario de Google. Materialize es uno de los frameworks de Material Design más sencillos de utilizar y es una muy buena alternativa a Bootstrap.

• URL | Materialize | Demo
• CDNJS | Materialize en CDNJS
• Tamaño aprox | ~200KB

5. Metro UI

Si eres de los que prefiere las interfaces de usuario de Microsoft, probablemente te guste más Metro UI, un framework orientado a construir diseños similares a la interfaz Metro de Microsoft. Este es uno de los frameworks más conocidos con esta apariencia, pero si lo prefieres, también tienes a tu disposición WinStrap o Bootmetro.

• URL | Metro UI | Demo
• CDNJS | Metro UI en CDNJS
• Tamaño aprox | ~400KB

6. MUI

MUI es un framework bastante ligero (apenas ocupa 50KB) que sigue las normas básicas del Material Design, intentando hacer la interfaz lo menos sobrecargada posible, sin dependencias, manteniendo una línea general minimalista y orientandose a la optimización de velocidad de carga.

• URL | MUI CSS | Demo
• CDNJS | MUI en CDNJS
• Tamaño aprox | ~50KB

7. Ink

Un framework quizás bastante desconocido es Ink. Su objetivo principal es acelerar la creación de interfaces de usuario lo más rápido posible de una forma bastante eficiente. Tiene una documentación bastante detallada y hace un especial énfasis en los componentes de interfaz de usuario y la referencia Javascript.

• URL | Ink | Demos
• CDNJS | Ink en CDNJS
• Tamaño aprox | ~400KB

8. Material Design Lite

Si no quedaste contento con el framework Materialize CSS y MUI te pareció demasiado simple, siempre puedes optar por utilizar Material Design Lite (MDL). Se trata de un framework oficial de Google para crear interfaces basadas en Material Design. La curva de aprendizaje, probablemente, sea más compleja que la de los frameworks anteriormente mencionados, pero cabe resaltar que es el que utiliza Google en webs como por ejemplo Google Wallet o Google Developers.

• URL | Material Design Lite | Demo
• CDNJS | MDL en CDNJS
• Tamaño aprox | ~200KB

9. UI Kit

El objetivo de UI Kit es tener una serie de componentes ampliamente utilizados (y documentados de una forma muy legible y clara) que se puedan crear de una forma muy sencilla y rápida. La interfaz es muy legible y clara, y es muy sencillo de aprender y utilizar.

• URL | UI Kit | Docs
• CDNJS | UI Kit en CDNJS
• Tamaño aprox | ~200KB

10. Kube

Por último, Kube es un framework creado por el mismo autor del editor WYSIWYG Redactor, que es desde mi punto de vista, uno de editores visuales más cuidados en prácticamente todos los aspectos. Kube se orienta en la simplicidad y el aspecto visual claro, limpio y agradable, ya que con este framework es muy sencillo crear interfaces sencillos y limpios, muy fáciles de leer y navegar por ellos.

• URL | Kube | Docs
• CDNJS | Kube en CDNJS
• Tamaño aprox | ~50KB

¡Y esto es todo por esta primera parte! En el segundo artículo veremos Frameworks CSS: Alternativas ligeras a Bootstrap.

Aunque Undertale está en inglés, Toby Fox permite la localización del mismo siempre y cuando se cumplan dos requisitos: «que no haya ánimo de lucro y que se respeten los chistes malos». El equipo de Undertale Spanish creó una traducción muy cuidada y elaborada, que puedes descargar de forma gratuita desde Undertale Spanish.

A título personal, creo que Undertale es un juego que mezcla lo bueno de un RPG, modificando con maestría y humor las partes que hacen más aburridas y pesadas un juego de este tipo, añadiendo un toque de «elige tu propia aventura» para eliminar la linealidad (muchos detalles son difíciles de ver durante una sola partida) e introduciendo originales mecánicas de batalla, rompiendo en muchos casos la llamada cuarta pared o los «conocidos habituales».

Todo ello sin olvidar las características que, para mi son las responsables del éxito del juego: la historia, carisma y profundidad de sus personajes y la impresionante banda sonora (creada también por Toby Fox).

Lejos de querer escribir una guía, (ya hay muchas por Internet), en este artículo voy hacer un homenaje a este magnífico juego, centrándome en curiosidades particulares, personajes, secretos o teorías que pueden haber pasado desapercibidas a ojos del jugador, al estilo de otros artículos que he escrito como 42 curiosidades y teorías de Portal.

Intentaré centrarme en los hechos oficiales del juego (canon) aunque en algunas partes mencionaría posibles teorías. Obviamente, este artículo está lleno de spoilers y recomiendo leerlo sólo si ya has jugado (o no te importan los spoilers). En caso contrario te desvelaré partes importantes del mismo.

1. La historia de Undertale

Al comenzar el juego se habla brevemente de la guerra que hubo entre las dos razas principales: humanos y monstruos. En dicha guerra, acabaron venciendo los humanos, desterrando a los monstruos en el subsuelo, creando una barrera mágica que les impidiera salir.

También se nos muestra como una pequeña niña (o niño, en el juego siempre se mantiene indeterminado el sexo del personaje) llega al monte Ebott, tropieza y cae, llegando a las ruinas del subsuelo, territorio de los monstruos, donde comenzamos a jugar nuestra partida.

Aunque durante la mayor parte de la partida, se hará referencia al jugador por el nombre elegido, más adelante descubrimos que el nombre real del humano es Frisk.

2. Pantalla de selección de nombre del jugador

Antes de comenzar a jugar, se le da la oportunidad al jugador de indicar el nombre al humano caído, con el que jugará durante toda la partida. Al margen del nombre que hayamos decidido escoger, hay ciertas opciones que no se pueden elegir o muestran un mensaje gracioso al escribirlas (generalmente de personajes con el mismo nombre):

Además de estas, hay varias opciones más, como por ejemplo, nombres como aaaaaa (¿No eres muy creativo...?), Papyru (sin s, que nos permite usarlo), Chara (que muestra el llamativo mensaje «El nombre verdadero»), tEmmiE o Woshua, entre muchos otros.

Dato curioso: Si estableces Frisk como nombre, activarás el modo difícil del juego, donde será más complicado vencer a los enemigos en las batallas o encontrarás menos ítems consumibles de vida. Sin embargo, este modo difícil sólo dura hasta llegar al final de las ruinas.

3. Frisk y Chara: Ruta pacifista y ruta genocida

Una de las características más interesantes de Undertale es la no-linealidad. Además de que el juego tiene múltiples eventos que suceden por acciones previas tomadas por el jugador, muchas otras ocurren por puro azar o por visitar un lugar en el momento oportuno, lo que hace muy fácil perderse partes o que no encuentres todo lo que esconde este maravilloso juego en una sola partida.

La descripción de Undertale en Steam es «El juego RPG en el que no tienes que destruir a nadie.». Aunque no es obligatorio que sea así, si es un buen consejo de como debería jugarse por primera vez. Según las acciones del jugador, se pueden tomar varios caminos:

• La ruta neutral: Es el camino más habitual que seguiría el jugador en su aventura, intentando no matar a ningún personaje, eligiendo siempre la opción de perdonar.

• La ruta pacifista: Una vez terminada la ruta neutral, dependiendo de las acciones del jugador, podemos llegar a esta ruta, donde ayudaremos a Undyne y Alphys, descubriendo el laboratorio original del subsuelo, donde se puede aprender más sobre lo que ocurrió en el subsuelo en el pasado. Además, esta ruta puede desembocar en otra denominada ruta pacifista verdadera, donde descubres el verdadero final de la historia, del que hablaremos más adelante.

• La ruta genocida: Otra de las opciones que brinda el juego es el ir contracorriente e intentar matar a todos los personajes, escogiendo siempre la opción luchar. Esta ruta es aconsejable realizarla como última opción, una vez conozcas la historia y a los diferentes personajes del juego, y así disfrutarla más.

Las imágenes de Frisk y Chara son autoría de Ashiael.

Si escogemos la ruta pacifista, realmente estamos jugando en nombre de Frisk, el último humano caído al subsuelo, que es la representación de la bondad y la piedad. Por otro lado, si realizamos la ruta genocida, descubriremos que somos (o más bien, nos vamos convirtiendo) en Chara, el primer humano caído al subsuelo hace ya bastantes años, símbolo de la muerte y la maldad.

Una de las cronologías de Undertale que más me ha gustado es Undertale Timeline, donde se intenta simplificar los caminos que puede realizar el jugador y tener una idea clara de lo ocurrido (y lo que puede ocurrir). Si, por otro lado, te interesa más conocer la historia y los eventos previos a Undertale, echa un vistazo a esta otra: Pre-Undertale Timeline.

Por otro lado, Higurashi Karly ha creado varios mapas de las diferentes áreas del juego, entre las que se incluyen Las ruinas, Snowdin y alrededores, Waterfall, Hotland, el Hotel MTT Resort, el Núcleo y el Laboratorio original. Si buscas algo más simple y general, tienes Map of the Underground.

4. Los hermanos Sans y Papyrus

Tras comenzar el juego, conocer a Flowey (al cuál se le puede pillar siguiéndonos) y a Toriel, y finalmente abandonar las ruinas, llegamos al área de los alrededores de Snowdin, el pueblo nevado de Undertale.

A los primeros que conoceremos serán a Sans y Papyrus, dos divertidos esqueletos hermanos que deben su nombre a dos tipografías con mala reputación por su sobreuso: Comic Sans y Papyrus). El primero de ellos, Sans, es un esqueleto tranquilo y amigable que ayudará al jugador y se mantendrá en segundo plano la mayor parte del tiempo (actuando sólo para contar chistes malos), y el segundo, Papyrus, comienza siendo nuestro enemigo, ya que quiere capturar a un humano para demostrar su valía e ingresar en la Guardia Real, pero sus numerosas e ineficaces trampas, así como su inocente visión del mundo hace que nos encariñemos enseguida con él y dejemos de verlo como un enemigo.

Aunque la mayoría de los intentos de Papyrus por vencer al jugador son bastante divertidos, uno de mis preferidos es el puzzle de las baldosas multicolores:

5. Las misteriosas llamadas de teléfono

En algunas partidas, el jugador puede recibir una misteriosa llamada de teléfono equivocada, dependiendo del lugar por donde haya pasado. En ella, el interlocutor se da cuenta de su error al marcar el número, por lo que la termina la llamada de una forma inesperada:

La llamada parece ir dirigida a alguien cuyo nombre comienza por G... pero de eso hablaremos más adelante. Existen otras llamadas telefónicas equivocadas que puedes recibir, como por ejemplo un pedido de pizza de Alphys o una llamada de Sans preguntando si tu nevera aún sigue funcionando.

6. El ratón con determinación

A lo largo del juego, así como cuando perdemos en alguna batalla, se nos habla de la determinación, esa fuerza del alma del jugador que hace que continue en su aventura y no se rinda. En el juego, hay varios puntos de guardado donde aparece una mesa con comida y se nos anima a continuar con el juego, sólo con la idea de que el ratón consiga su objetivo.

A medida que avanzamos, se le complica un poco más la tarea al ratón, pero siempre estaremos llenos de determinación. I don't draw humans realiza unas excelentes ilustraciones donde podemos ver al ratón lleno de determinación (al menos, casi todas las veces).

7. Ice Wolf, el lobo que tira hielo

En el pueblo de Snowdin (y sus alrededores) podemos descubrir multitud de personajes, pero algunos que llaman mucho la atención, ya que suelen tener historia detrás que se puede descubrir investigando.

Ice Wolf es un misterioso lobo que aparece levantando bloques de hielo que salen de una torre y lanzándolas al río una detrás de otra. A medida que avanzamos en el juego, nos vamos cruzando con pantallas donde se ve el hielo flotando por el agua.

Algo más adelante, cerca del núcleo, nos encontraremos que el bloque de hielo cae en una zona y se funde en el agua. Si la llamamos al teléfono en el sitio oportuno, Undyne nos aclara que Alphys le dijo que es el sistema de refrigeración del núcleo.

La imagen de la derecha es autoría de Ratty Arts.

Finalmente, si lo visitamos al finalizar nuestra aventura y haber destruido la barrera, veremos que ha dejado de lanzar bloques de hielo y nos dice que ya no tiene que hacerlo, que por fin puede tomarse un descanso e ir a comprarse unos pantalones.

8. Otras curiosidades de Snowdin

A lo largo del área de Snowdin puedes encontrar multitud de personajes y curiosidades, como por ejemplo, algunos jefes-perro, entre los que se encuentra Lesser Dog, un perro que cuanto más lo acaricies, más contento se pondrá y más figuras de nieve hará.

También encontrarás un muñeco de nieve que quiere ver mundo y te puede dar un copo suyo, que si lo llevas en el inventario, Sans te dirá al final del juego que has hecho a un muñeco de nieve muy feliz. Por otro lado, en la ruta genocida puedes acabar con el.

Algunos otros detalles hacen genial la zona de Snowdin, como por ejemplo, la lámpara de forma conveniente o la zona en la que al deslizarse por el hielo, saldremos de una cueva con nieve en la cabeza. Si volvemos a entrar y salir repetidas veces por esta zona, veremos que tendremos una figura de nieve diferente en la cabeza de forma aleatoria: una casa, un pájaro, un sombrero e incluso el Annoying Dog. También algunos consejos de click baiting en la «Bibilioteca» (sic).

9. La venganza de Grillby

Grillby es el camarero del bar de Snowdin, una especie de monstruo de fuego silencioso que permanece en el bar durante la aventura. Aunque no hay relación directa de forma canónica, muchos fans han establecido que hay tres personajes que están relacionados de alguna forma: Grillby, Fukufire (la monstruo de fuego verde) y Heats Flamesman, el pequeño monstruo de fuego que se queda totalmente asombrado tanto si recuerdas su nombre (¡siempre recordaré que lo recordaste!) como si lo olvidas (¡nunca olvidaré que lo olvidaste!).

Aunque en el juego, el papel de este personaje es casi anecdótico, un fan ha recreado lo que cree que debería haber sido la batalla con Grillby (ruta genocida) en un programa llamado Create your Frisk (antiguo Unitale), que permite crear batallas con la mecánica de juego de Undertale utilizando LUA.

Puedes ver el hilo completo con los detalles en este enlace de Imgur.

10. La puerta misteriosa (la habitación del programador)

Existe una zona del juego, con una puerta cerrada, que es posible que hayas visitado pero no hayas conseguido entrar. Esta zona no tiene especial relevancia para la historia, pero se puede acceder en una segunda partida si el jugador esquiva todos los nombres de los agradecimientos en la escena de créditos del juego.

Si es así, la puerta estará abierta y dentro nos encontraremos con la habitación del creador del juego, Anoying Dog, un perro con el que Toby Fox se suele representar y que incluso lo utiliza para mostrar cuando el jugador intenta manipular las partidas guardadas.

En la habitación encontramos la cuerda con la que Papyrus ató al perro en su trampa mortal, varias piezas de un puzzle, un ordenador y el supuesto juego Undertale (ambos utilizados mediante un conversor ladrido-texto), residuos de perro y el propio perro, el cuál hace referencia a la dura tarea de corregir bugs de un juego.

11. Glyde: Jefe oculto

Aún así, si llegamos a esta zona con la misteriosa puerta cerrada y aún no hemos perdonado o vencido a Papyrus, hay algo que podemos hacer ahí. Existe un jefe oculto llamado Glyde, que aparecerá si nos mantenemos durante 3 minutos caminando por fuera de la cabaña de la puerta misteriosa:

Glyde es un jefe oculto que busca la atención del jugador y que se puede vencer simplemente aplaudiéndole dos veces y luego no hacer nada durante el resto de la batalla (literalmente, elegir la opción «Actuar / Nada»).

12. Los viajes por Waterfall

Al pasar de Snowdin a Waterfall, entramos en un mundo mágico lleno de cascadas, luces y rincones brillantes. Uno de los misteriosos personajes que más suelen llamar la atención es el llamado El hombre del río (Riverman), un enigmático encapuchado (similar a la representación de una parca) que mientras canta Tra la la y nos dice frases con consejos, nos lleva rápidamente en una barca (que se convierte en animal en algunas ocasiones) a un punto de Snowdin, Waterfall o Hotland. En la comunidad de Undertale se bromea hasta con la posibilidad de que realmente es Annoying Dog subido a un taburete.

Otro personaje curioso es Ferry, el cuál también te transporta de un lugar a otro, advirtiéndote de que el viaje son 3 de oro (asumiendo que es el precio que te cobra), descubriendo más tarde que realmente te paga él y te da las gracias por pisarle la cara. Otro momento fantástico del juego, que me recordó ligeramente a Cave Story, es el viaje con Monster Kid (ilustración de fetalstar), antes de llegar al castillo de Asgore.

13. El pájaro con determinación

Habiendo mencionado a Riverman y Ferry, existe un personaje más (uno de mis preferidos) que te transporta de un lugar a otro, pero en este caso a una velocidad tan lenta, haciendo un esfuerzo tan desproporcionadamente grande respecto a la distancia que recorre que resulta totalmente cómico, a la par que absurdo cuando vives el momento por primera vez.

Toby Fox, lejos de utilizar un recurso fácil como hubiera sido un puente, una puerta o algo similar, utilizó a este pequeño amigo (¡lleno de determinación!), que aunque no parece poder levantar ni su propio peso, consigue transportarte a traves de ese hueco:

Cabe mencionar que el juego tiene un sprite no utilizado del pajarito donde se le ve llorando. Me gusta pensar en la idea de que posiblemente era para utilizar cuando se realiza la llamada telefónica a Papyrus, donde te pide que le pases el teléfono mientras hace unas horribles imitaciones de pájaro (según Papyrus: «unos píos bastante buenos»).

La imagen es de cloveochai.

Dato curioso: El título de esta canción, de la banda sonora de Undertale, es literalmente «Bird that carries you over a disproportionately small gap».

14. La estatua y el paraguas

Uno de los momentos más emotivos de Undertale ocurre cuando el protagonista encuentra una misteriosa estatua, algo rota por el paso del tiempo, a la cuál le caen algunas gotas desde la parte superior de la galería. El jugador, puede acceder a la zona de la derecha, coger un paraguas y ponerselo a la estatua para que no se moje.

Al hacer esto, comenzará a sonar una cajita de música dentro de la estatua, con la melodía Memory, mientras se ven los símbolos para resolver el puzzle del piano que está en la zona de la izquierda.

De forma oficial no se sabe mucho sobre la estatua, puesto que Undyne afirma que siempre la ha visto ahí, y Papyrus no sabe nada al respecto. La teoría que veo más probable es que sea la estatua que se construyó en memoria de Asriel y Chara (la caja de música reproduce una versión de la canción que se asocia a Asriel en otros momentos del juego). La estatua muestra la silueta de un personaje con cuernos (probablemente, Asriel en forma adulta), junto a unos fragmentos rotos en el suelo. Es posible que la estatua original mostrara a Asriel sosteniendo a Chara para llevarla al campo de flores doradas.

Otras teorías afirman que podría ser la estatua que estuvo en la fuente del Hotel MTT Resort (Fuente en memoria Real), como indíca la inscripción de su placa, antes de que Mettaton la quitara de la fuente y añadiera su propia estatua.

15. El puzzle del piano y el artefacto legendario

Con los símbolos que aparecen en la parte superior de la estatua, podemos tocar la melodía en el piano que aparece en el mismo área de Waterfall. Con ello se abrirá una puerta que da a una habitación que tiene un artefacto legendario, en forma de bolita roja.

Si intentamos cogerla, nos dirá que tenemos demasiados perros en el inventario, por lo que nos sugiere que la solución es tirar el Perro molesto (nuevamente, el Annoying Dog) para poder coger el artefacto, momento en el cuál el perro que acabamos de soltar, se lleva la pelota y nos deja como al principio:

16. El fantasma Napstablook

Uno de los primeros personajes que nos encontramos en el juego es Napstablook, un introvertido fantasma que finge estar durmiendo sobre unas hojas rojas. Más adelante, encontraremos su casa en Waterfall y descubrimos que le encanta la música, pudiendo escuchar los CDs que tiene en el suelo (y espantando a los monstruos cercanos a su casa).

Si intentas abrir la nevera, después de un intento fallido de comer un sandwich fantasma, Napstablook te preguntará si quieres unirte a una tradición familiar (tumbarse en el suelo y sentirse como basura). Si lo haces durante suficiente tiempo (unos 10 segundos) sin moverte, entrarás en un estado de relajación... hasta que vuelvas a moverte:

Undyne nos cuenta en alguna ocasión que Napstablook también tiene una granja de caracoles (junto a una especie de hipódromo de caracoles llamado Thundersnail) que heredó de su familia y llevaba junto a su primo, antes de que desapareciera.

17. La familia de Napstablook

En el juego existen cuatro fantasmas (se dice que son primos todos ellos): Napstablook, su primo desaparecido Happstablook (que vivía en la casa rosa de enfrente, y ahora vive Mettaton EX -del que hablaremos más adelante-), Madstablook (el que posee el maniquí loco del vertedero) y Blankblook (el que vivía dentro del maniquí que encontramos en el inicio del juego, con Toriel). Aunque todos ellos se mencionan en el juego, los nombres de estos dos últimos no son canon, sino que han sido bautizados así por los fans.

La imagen de Mad Dummy es de Gigapolosatik, mientras que la de los fantasmas es de Mettaton Moment.

La casa de Happstablook está cerrada con llave (la podemos comprar a Bratty y Catty más adelante, la llave misteriosa). Si entramos, comprobaremos que es la casa de Mettaton EX, y a través de sus diarios descubrimos que Mettaton EX es realmente Happstablook, con un cuerpo que le fabricó Alphys donde podría por fin «sentirse él mismo».

18. Las flores de eco y Flowey

A lo largo del juego, si somos observadores o volvemos sobre nuestros pasos, nos encontraremos con un Flowey que estaba cerca de nosotros, espiándonos y se esconde rapidamente. Esto ocurre, por ejemplo, cuando Toriel nos deja solos en el tutorial del principio, en diferentes áreas de las flores de eco.

La estupenda imagen de la izquierda es de Longest Distance, mientras que Flowey es una animación de SovanJedi.

De hecho, algo también interesante ocurre si volvemos sobre nuestros pasos al haber escuchado todas las flores de eco de un área, y escuchamos a la segunda flor de esa misma pantalla. Escucharemos una conversación de Toriel y Flowey:

En alguna ocasión del juego, un personaje nos dice que alguien con una sonrisa rara (creepy smile) está detrás nuestro, pero si miramos alrededor no veremos a nadie.

19. Mysteryman (¿Gaster?)

Quizás, el misterio más grande de Undertale es aquel que rodea a Gaster. En el juego, se menciona a un personaje llamado el Doctor W.D. Gaster, que era el científico real antes de que Alphys ocupara su puesto. No se sabe demasiado sobre él, pero hay varias teorías que conectan a Gaster con Mysteryman, un personaje que puede aparecer en el juego si se accede en un momento oportuno entre las pantallas del ratón y el queso místico y el telescopio de Sans, en Waterfall.

La imagen de Gaster de la izquierda es de Ayraa, mientras que la de la derecha es de Shei Kreet.

Si así lo hacemos, nos aparecerá un pasillo que puede contener (con una probabilidad muy baja, de un 10%) una puerta gris. Al abrirla, dicha puerta nos lleva a una habitación vacía donde sólo hay un personaje fantasmal, que al interactuar con él, sonríe y desaparece:

Realmente, en el juego no hay ninguna referencia clara que asocie Mysteryman con Gaster, pero en la comunidad se ha tomado como una verdad absoluta y hay múltiples teorías alrededor de este misterioso personaje, como el de asociarlo con la tipografía Windings, que trataremos más adelante.

20. Los seguidores de Gaster

Si accedemos a ciertas zonas de Hotland en momentos concretos, nos podemos encontrar con unos extraños personajes que antes no estaban en esa zona, conocidos como los seguidores de Gaster debido a que en los archivos del juego se llaman g_followers. Personalmente, creo que la g puede simbolizar gone, al igual que aparece en otro personaje gris similar a Monster Kid, concluyendo algo así como «los seguidores caídos».

Estos personajes nos hablan del doctor Gaster, creador del núcleo y antiguo científico real, que experimentó un problema con su propia creación y se «hizo pedazos a través del tiempo y el espacio», por lo que conectan a Gaster con algún tipo de habilidad para moverse en el espacio-tiempo:

Uno de ellos nos dice que no sabe como puede estar hablando mal de él, si se encuentra sujetando un pedazo de él (lo que parece una cara), desapareciendo al instante, mientras se escucha el mismo sonido que cuando desaparece Mysteryman en la habitación que mencionamos en el punto anterior.

Si intentamos realizar llamadas telefónicas mientras estamos en una pantalla con alguno de estos personajes, nos dirá que el teléfono no se enciende, mensaje que no aparece en ninguna otra parte del juego, por lo que puede tener relación.

Por último, también tenemos al denominado Goner Kid (niño caído, niño que se fue). Tras contestarnos con algunos mensajes profundos, quizás podría haber relación con la estatua y el paraguas (¿Quizás Asriel mientras estaba en el «otro mundo»?)

Cabe resaltar que dicho personaje, nos muestra una conversación diferente si sostenemos un paraguas o no, a la vez que también muestra un curioso mensaje si hemos dejado el paraguas y volvemos con él: «¡Ey! Tú también eres un ???, ¿verdad?».

21. La villa Temmie (Temmie Village)

Cuando atravesamos el área de luces en Waterfall, es posible llegar a la villa Temmie, un pequeño poblado con unos curiosos personajes llamados temmies, que se caracterizan por hablar de una forma extraña y cómica, sImiLar a cOmo lO hAcEN aLGuNoS aDoLeScENtEs en iNtErNeT.

En dicha aldea encontramos a muchos temmies, y entre ellos, a uno llamado Bob, que habla correctamente. También hay un un hongo bailarín llamado Ragel, que no puede moverse del suelo.

La ilustración es de DatteBayo34, una representación del cuadro colgado al fondo de la aldea.

La tienda de Temmie (Tem Shop, juego de palabras con Item Shop) es la única tienda del juego que permite vender objetos. Se pueden comprar cereales Temmie e incluso ayudar a Temmie a graduarse en la universidad.

Dato curioso: Si intentamos guardar la partida en esta zona, nos dirá que en esta aldea estamos llenos de detemmienación.

Dato curioso (II): El remix de Tem Shop de GameChops merece la pena ser escuchado. Nunca un hOI!!! (oLi!!) fue tan bien utilizado musicalmente.

22. Papyrus y Undyne

Si has jugado a Undertale y has pasado por alto utilizar la función de llamadas telefónicas a Undyne y Papyrus (cuando te haces amigo de Undyne), deberías volver a jugar, ya que las conversaciones son divertidísimas y las discusiones entre Undyne y Papyrus (dos grandes personajes del juego) son geniales.

Un gran momento del juego es cuando Papyrus intenta que te hagas amigo de Undyne, hasta ahora tu mayor enemiga, con un gran carácter competitivo y agresivo. En ese momento, vas de visita con Papyrus a la casa de Undyne, donde te «obligará» a ser su amigo, te contará algunas cosas sobre Asgore y podrás preparar comida al estilo Undyne:

23. Hotland, el lugar más cálido de Undertale

La siguiente parada tras Waterfall es Hotland, una zona caliente y cálida llena de puzzles. En ella terminaremos encontrando a Muffet, una araña vendedora (a precios muy altos) ofendida por lo mal que tratas a las de su especie.

El flyer de la araña es de FanGamer, mientras que los posters son autoría de Zenami Arts.

Dato curioso: La banda sonora de Muffet, Spider Dance tiene un remix alucinante de Mykah, de GameChops que merece la pena escuchar, al igual que la mayoría de remixes de GameChops.

24. El club de Arte secreto (So Sorry: Jefe oculto)

Al igual que Glyde, existe otro jefe oculto en Hotland, llamado So Sorry. Se puede desbloquear si subimos hacia arriba en el área donde encontramos el delantal manchado. Aparecerán unas baldosas mágicas de cristal que nos llevarán a una localización secreta con un cartel que nos indica que se trata del Club de Arte.

En el cartel de dicha ubicación, se nos indica que la próxima reunión del club será el 10 de octubre a las 8. Si cambiamos la hora del sistema a esa fecha concreta y volvemos a acceder a la zona del Club de Arte, aparecerá el jefe oculto, So Sorry, llegando tarde:

Dato curioso: Es especialmente cómico como Toby Fox explica que usa las baldosas mágicas de cristal como parche para arreglar cualquier desperfecto del juego.

25. Las cámaras ocultas de Alphys

Más adelante, llegaremos al laboratorio y conoceremos a Alphys, la científica real actual y una fanática apasionada por el Anime (más concretamente por Mew Mew Kissy Cutie, una posible referencia a Mew Mew Power). Nada más entrar en el laboratorio, nos encontraremos con un monitor gigante que espía nuestros movimientos:

La imagen de Alphys es autoría de Kaaos Kuutti.

Es posible encontrar las cámaras secretas de Alphys si vamos buscando por todo el juego, ya que existen en múltiples ubicaciones y en los lugares más insospechados.

26. Mettaton (MTT), el robot de Alphys

Otro de los grandes momentos del juego es cuando conocemos a Mettaton, un robot construido por Alphys originalmente para cazar humanos, pero que en el fondo lo que ansía es audiencia y fans que lo adoren. De hecho, un detalle curioso es que, si nos fijamos, cuando comienza la escena del musical de Mettaton, la ventana de título del juego cambia de Undertale a UNDERTALE el Musical.

El poster de Mettaton se puede conseguir en FanGamer, mientras que la imagen isométrica es autoría de Xamag.

Si investigamos un poco, descubriremos que Mettaton EX, la transformación rosa de Mettaton, es un cuerpo fabricado por Alphys donde habita el fantasma Happstablook (lo menciona en los diarios de su casa y los planos de su construcción se pueden ver en la habitación de Alphys).

Dato curioso: La gente de Gooseworx tienen un genial remix de Metal Crusher, el tema principal de Mettaton.

27. La reserva en el hotel MTT Resort

Hay un momento que muchas veces se suele pasar por alto, debido al elevado precio de la reserva de la habitación del hotel MTT Resort. Sin embargo, si hacemos una reserva, podremos movernos por la cama del hotel al ritmo de la frenética música que nos acompaña:

Otro momento divertido ocurre en la posada de Snowdin si intentamos reservar una habitación. Sólo que, en este caso, no perderemos el dinero, ya que nos lo devuelven porque finalmente no podemos pasar más de dos minutos en dicha habitación.

28. La habitación de Sans

Hasta ahora hemos pasado (intencionadamente) muy por encima del personaje Sans, cuya importancia en el juego es muy determinante. Hasta el momento solamente nos hemos cruzado con él para múltiples bromas (29 perritos calientes sobre la cabeza), chistes malos, una cita en el bar de Grillby's y otra en el restaurante del Hotel MTT Resort, donde nos abre un poco el corazón y nos cuenta que mantiene una profunda amistad con alguien (Toriel, aunque no lo sabe) a quien también le encantan los chistes malos y al que le prometió que siempre protegería a los humanos caídos.

Sin embargo, antes de luchar contra Asgore, llegamos a una sala amarilla, con grandes ventanales. Es la sala donde Sans nos juzga y da un repaso a todas nuestras acciones en el juego. En esta parte es donde se comprende que el papel de Sans va más allá de un simple personaje, ya que tiene algunas habilidades que no se pueden intuir a simple vista y hay que ahondar algo más en el personaje y su pasado.

La imagen de Sans y Toriel es de Cassio Yoshiyaki.

Si al llegar a esta parte del juego, volvemos a cargarlo y a volver a presenciar la escena, veremos que Sans se da cuenta de que lo has hecho (has viajado en el tiempo y ya sabías lo que iba a decir), por lo que te da un código secreto varias veces para que vuelvas a «viajar en el tiempo» y se lo digas, y así sepa que tu también eres un viaje del tiempo:

Si lo haces correctamente, obtendrás la llave de la habitación de Sans, en la que encontrarás bromas, y más bromas, y una llave plateada que te da acceso al taller de Sans, que está en la parte trasera de su casa de Snowdin.

29. El taller de Sans

Con la llave plateada podemos acceder al taller secreto de Sans, donde nos encontramos unos planos (con símbolos extraños o mala caligrafía) y una extraña máquina rota. En los cajones del taller podemos encontrar un emblema y varias fotografías. Existen muchísimas teorías sobre lo ocurrido, y aunque no son oficiales, las más plausibles argumentan que Sans está relacionado con la construcción de esa misteriosa máquina, con Gaster (quién podría ser el padre de Sans y Papyrus) e incluso con los seguidores de Gaster (posibles compañeros de Gaster).

Uno de los interesantes aspectos del juego, es que si volvemos a jugar una partida, intentando realizar ahora la ruta genocida (y conociendo a los personajes), el ambiente se vuelve más tétrico junto a los personajes que parecen más alegres e inocentes, dando la impresión de que realmente estás poseído por Chara y su maldad, hasta el punto de que realmente te de pena tener que matar a los diferentes personajes. Las teorías que antes comentabamos sobre Sans se hacen notablemente más fuertes al comprobar que, en dicha ruta genocida, Sans tiene un arma en el juego llamada Gaster Blaster, lo que indica una posible relación con Gaster.

La imagen del Gaster Blaster es autoría de Elimate98, mientras que la imagen de la izquierda es de Nuria Velasco. La representación del posible plano del Gaster Blaster es de TheMeekWarrior.

Otro detalle particularmente interesante y digno de mención es la posibilidad de encontrarse durante la partida con un personaje llamado Clamgirl (Mujer almeja). Si nos lo encontramos demasiado tarde, nos dirá que la oportunidad ha pasado de largo, pero si la encontramos en el momento apropiado nos hablará de un desconocido personaje llamado Suzy, de la misma edad que el protagonista:

Dependiendo de si sabemos de la existencia de Suzy o no, más tarde, en el taller de Sans, podrían ocurrir varias cosas al abrir el cajón:

• Encontrar un álbum de fotografías en donde aparece Sans con varias personas que desconocemos (¿quizás los seguidores?). Menciona que Sans parece feliz. (Si no encontramos a ClamGirl, y no conocemos a Suzy)
• Encontrar dicho álbum, además de una tarjeta con un dibujo de tres personas sonrientes y el texto «No olvidar». (Si encontramos a ClamGirl y nos habla de Suzy)

Debido a que estos sucesos son muy abiertos, hay múltitud de teorías al respecto, la mayoría relacionando a Sans con Gaster, con viajes en el tiempo o incluyéndolo en lo ocurrido en el laboratorio original (ver siguiente punto).

Dato curioso: Existe un excelente remix de Cement City del tema de la batalla de Sans Megalovania en la ruta genocida.

30. Asgore, el rey de la familia Dreemurr

Hemos escuchado mucho sobre Asgore, conocemos su historia, e incluso Undyne nos contó como le entrenó y le recordamos a él, ya que su estrategia también era negarse a contraatacar. Pero antes de llegar a la sala del castillo donde está Asgore y la barrera del subsuelo, mientras pasemos por el castillo (nuevo hogar), a la vez que descubrimos detalles sobre el hogar de Asgore, los monstruos del subsuelo nos cuentan un poco más sobre la historia de Asriel, el hijo de Asgore y Toriel:

En dicha historia se nos cuenta como Asriel encontró a Chara, el primer humano caído al subsuelo, y como Asgore y Toriel lo adoptaron en su familia hasta que un día cayó enfermo y murió. Asriel lleno de dolor, absorbió el alma del humano, traspasó la barrera y llevó su cuerpo a la aldea de los humanos donde le había dicho que quería ir antes de morir. Allí, los humanos creyeron que Asriel lo había matado, por lo que lo atacaron, y aunque Asriel podía haberlos destruído, no contraatacó, sino que volvió al castillo y se desplomó en el jardín. Desde entonces Asgore declaró que mataría a cualquier humano que encontrase hasta reunir las almas necesarias para romper definitivamente la barrera y subir a la superficie.

La imagen de Asgore es autoría de Leda456.

Al comenzar a luchar contra Asgore descubrimos un detalle que nos rompe todos los planes aprendidos hasta ahora en el juego. Asgore destruye con su tridente la opción Piedad de nuestro mecanismo de batalla, obligándonos a luchar.

Dato curioso: La alucinante banda sonora de la batalla de Asgore se titula con su mismo nombre, pero viene precedida de un preludio llamado Bergentrückung (Rey bajo la montaña). Como siempre, si te gustan los remixes, recomiendo una de las versiones que han hecho en GameChops.

31. El laboratorio original y los Amalgamas

Si continuamos jugando a Undertale tras la batalla con Asgore, y no hemos matado a nadie, es posible retroceder y hacerle un favor a Undyne, llevándole una carta a Alphys. Si se realiza correctamente, habilitamos la ruta pacifista verdadera donde podemos acceder al laboratorio original de Gaster, en el que nos encontraremos multitud de terminales con entradas sobre los experimentos que se llevaron a cabo por Alphys para conseguir romper la barrera.

En dichos experimentos se intentan usar las ALMAs de los monstruos caídos, pero sin éxito, hasta que se descubre la determinación. Utilizando la Máquina de extracción de determinación (que recuerda a la cabeza del Omega Flowey) para inyectar determinación a los monstruos, se observa que los cuerpos se descomponen y se fusionan entre sí, creando los amalgamas (los fantasmas que aparecen en el laboratorio original, mezclas de varios monstruos).

La imagen de la izquierda es autoría de Cubu3, mientras que la de la derecha es de Setamonaka. La del centro no encuentro a su autor, ¿alguien conoce su autoría?

Aunque la entrada número 17 no se puede ver en el laboratorio, existe una habitación oculta sin usar en el juego, inaccesible desde la propia aventura, donde se muestra la lectura de una de las terminales con una tipografía llamada Windings. La entrada describe lo que parece una anotación del científico anterior, Gaster, donde habla de un nuevo experimento (quizás relacionado con los viajes en el tiempo) y finalmente pregunta «¿Qué opináis vosotros dos?»:

Es por esta razón que, aunque no aparece de forma oficial en el juego, se suele teorizar con que Gaster es también un esqueleto (Sans y Papyrus son fuentes, W.D. Gaster podría ser de WinDings) que habla con una tipografía diferente.

También se especula mucho sobre quienes son esas otras dos personas (¿Alphys y Sans? ¿Sans y Papyrus? ¿Dos de los seguidores de Gaster?), aunque no hay demasiadas pistas sobre ello.

32. Watchingman, el amalgama misterioso

Existe un misterioso personaje que aparece dos veces en el laboratorio original y que los sprites internos del juego denominan Watchingman (el hombre que mira). Una primera vez en el cuarto de la bañera (al más puro estilo de las películas de terror), y una segunda vez en la habitación de las camas, si nos tumbamos en ella y esperamos lo suficiente:

Sin embargo, se desconoce la identidad de este personaje o si simplemente es una mera aparición cómica sin relevancia.

33. Recursos de prueba o no utilizados

Algo que siempre es curioso en un juego, es indagar en los archivos internos, donde puedes encontrar recursos no utilizados (sprites, música, etc...) o utilizar la información encontrada para unir piezas. En los archivos de Undertale, hay ocultos ciertos bocetos iniciales de algunas habitaciones, junto a las imágenes que se utilizan en el juego.

De la misma forma, algunos personajes no se utilizaron finalmente en el juego final, como por ejemplo, algunos sprites de robots, lo que parece lava cayendo (probablemente planeada colocar en el núcleo en Hotland), una opción de conjuros o un recipiente con caramelos (una posible versión temprana de la habitación de las ruinas). También existe una versión tétrica de Frisk/Chara, que se rumorea que se puede ver reflejado en el charco de Waterfall en la ruta genocida (no lo he comprobado).

Así mismo, también existen algunas habitaciones inaccesibles en Undertale, con posibles versiones tempranas no finalizadas, ni incluídas en el juego terminado: posible conversación con Ragel (el hongo de la aldea Temmie), una versión temprana de la zona de caramelos de las ruinas, una escena con vertidos de lava caminantes y la más interesante de todas: una posible primera versión de la habitación de Misteryman, el posible Gaster.

Esta última habitación encadena con una posible prueba de sonido que no se llegó a terminar ni incluir en el juego final.

34. Asriel Dreemurr y Asriel HyperDeath

Si realizamos la ruta pacifista verdadera, a estas alturas ya habremos averiguado que Flowey es una flor dorada (del jardín de Asgore, donde estaban los restos de Asriel) a la que se le inyectó determinación pero no poseía un ALMA, volviéndose totalmente malvada e impredecible.

En dicha ruta, si intentamos luchar de nuevo contra Asgore, finalmente nos encontraremos con que Flowey toma su forma evolucionada: Asriel Dreemurr, que un poco más tarde intentando alcanzar su máximo poder con todas sus almas absorbidas, se convertirá en Asriel HyperDeath.

La estupenda imagen de Asriel de la derecha es autoría de LeoKatana.

Finalmente, el climax del juego llega cuando luchamos contra Asriel HyperDeath y hemos salvado todas las almas de nuestros amigos. Los ataques de Asriel se vuelven inútiles contra nosotros o no nos afectan, como por ejemplo, las bolas de fuego evitan el corazón del ALMA del jugador o el indicador de vida tras un ataque potente de Asriel siempre tiene algún valor aunque sean décimas de vida, dando a entender que parte Asriel realmente no quiere hacer daño al jugador, a la vez que la banda sonora toma fuerza y se mezcla con el verdadero final de la historia de Undertale:

Si te gusta la fantástica canción de Undertale, te recomiendo este remix de His Theme, la canción de la banda sonora y este magnífico cover a piano de His Theme.

Dato curioso: Una de las armas de Asriel se llama Hyper Goner, y tiene bastante similitudes con el Gaster Blaster de Sans.

35. La última conversación con Asriel

Al terminar el juego, podemos retroceder hasta la primera pantalla del mismo, sobre las flores doradas en las que despierta el jugador y encontraremos una última vez a Asriel en su forma infantil, cuidando de las flores donde murió:

Ahí nos contará algunos detalles interesantes de la historia, como por ejemplo, la naturaleza malvada de Chara o la idea de como realmente el jugador empieza jugando como Chara (el nombre verdadero), pero a medida que avanza en la historia, se va convirtiendo poco a poco en Frisk, un personaje más noble y de sentimientos más puros, el que realmente Asriel siempre vió en el primer humano caído.

Extra: Actualización en Undertale 1.05A

En la actualización a la versión 1.05A de Undertale, Toby Fox ha añadido Dog Shrine (El santuario del perro), en el fregadero de la cocina de Papyrus y Sans. Al parecer es un añadido con motivo del lanzamiento de la versión para PS4.

Recuerda que tienes otros artículos similares con este mismo enfoque en 42 curiosidades y teorías de Portal, o en películas de animación como Rompe Ralph: Referencias que quizás no viste o Zootrópolis: Curiosidades que quizás no viste. Con este «pequeño» artículo he querido hacer mi particular tributo a este magnífico juego llamado Undertale y espero que leerlo os haya llenado de determinación.

He creado un pequeño listado con 10 juegos Indie gratuitos de estilo pixel art y que me han llamado la atención por alguna u otra razón que citaré en su respectiva descripción. Disclaimer: No se trata de un listado de los mejores juegos de la historia, ni están ordenados de mejor a peor.

Nota: Si conoces algún juego digno de mención que no está en esta lista, por favor, ¡compártelo en los comentarios para conocerlo!

• 10 grandes videojuegos españoles
• Apogee y sus videojuegos de los 90
• 15 remakes retro (demakes) de videojuegos
• 30 grandes shooters de la década de los 90

1. Cave story (Doukutsu Monogatari)

Si no conoces Cave Story, deberías hacerlo, ya que es una auténtica obra maestra. Es un juego gratuito que llama la atención por estar desarrollado por una sola persona: Daisuke Amaya (Studio Pixel), que estuvo trabajando en el juego durante 5 años de forma ininterrumpida hasta publicarlo (2004). Basta jugar durante un par de minutos para darse cuenta de que el trabajo que tiene detrás es inmenso y está muy bien ambientado. Además, el juego tiene una historia que permite jugar de forma no lineal, así como llegar a varios finales diferentes.

En el juego, eres un robot que despierta en una cueva sin recordar absolutamente nada. Cuando sale de ella, se encuentra con unos simpáticos seres, parecidos a conejos, llamados Mimigas que últimamente están siendo secuestrados. A partir de entonces, irás profundizando en la historia y descubriendo que es lo que ha pasado, así como conociendo más detalles sobre ti, tu historia y tu pasado.

La jugabilidad, la curva de dificultad progresiva así como la evolución de la historia hacen que el juego sea una auténtica delicia. Inicialmente fue creado para Windows/PC, pero con el paso del tiempo ha sido portado a múltiples plataformas como por ejemplo: Mac, Linux, XBOX, PSP o NDS entre otras. ¡Incluso puedes jugarla si te has montado una consola con Raspberry Pi al estilo de la Mini NES Classic!

Recuerda que aunque el juego está en inglés, en la sección «Downloads» de su web puedes descargarte un parche oficial para traducir al español todos los diálogos del juego. Por otro lado, y aunque no son gratuitos, el autor de Cave Story tiene en Steam una versión mejorada llamada Cave Story+, además de otro juego con el nombre de Kero Blaster.

Curiosidad: En la carpeta del juego, hay tres archivos ejecutables: Doukutsu.exe (el propio juego), DoConfig.exe (configuración del juego, para personalizar teclas y otros detalles) y OrgView.exe, un curioso reproductor musical donde puedes escuchar la banda sonora íntegra del juego.

• Estilo | Metroidvania
• Cualidades | Historia, jugabilidad, música, nivel de detalle...
• URL | Cave Story

2. Treasure Adventure Game

Si Cave Story es una delicia, Treasure Adventure Game (TAG) no se queda atrás. Si tuviera que escoger un juego que esté a la altura del anterior, sería este sin lugar a dudas. Su autor, Stephen Orlando, desarrolló este juego gratuito durante poco más de 2 años, centrándose particularmente en la jugabilidad, historia y diseño, y cuidando hasta el más mínimo detalle.

En el juego, se cuenta la historia de un niño que tiene un accidente cuando acompañaba a su padre y su amigo arqueólogo en busca de los secretos de un templo. Al pasar los años, decides ir en busca de las reliquias que buscaba tu padre e irás descubriendo la historia que hay detrás de ella, junto a lo que ocurrió en ese templo hace ya bastantes años.

La banda sonora de Treasure Adventure Game es una auténtica maravilla y es uno de los apartados que merece mención especial. El alto mimo en los detalles del juego, junto a la ambientación, gráficos, trama, jugabilidad y su larga duración, lo convierten en un juego obligatorio para cualquiera.

Recuerda que aunque tienes Treasure Adventure Game en GOG.com, el juego está en inglés y necesitarás descargarte desde su página oficial la traducción del juego traduciendo así sus múltiples diálogos y conversaciones.

Mencionar también que el autor está desarrollando Treasure Adventure World por crowdfunding, un remake en HD de este juego.

Curiosidad: Si nos descargamos la versión de GOG, Treasure Adventure Game viene con Karma, una versión temprana de lo que finalmente se convirtió en TAG. Aunque no está terminado, los primeros tres niveles son completamente jugables y sirve como curiosidad, para ver como evolucionó el juego durante su desarrollo final.

• Estilo | Metroidvania
• Cualidades | Historia, jugabilidad, música, nivel de detalle...
• URL | Treasure Adventure Game

3. Maldita Castilla

Quizás los anteriores títulos no son muy conocidos en España, pero si hay uno que se ha popularizado desde su lanzamiento en 2012 es Maldita Castilla. Se trata de un juego de plataformas al estilo del conocido Ghosts 'n Goblins, pero utilizando la mitología medieval española y europea.

En el juego, controlas a Don Ramiro Quesada, que siguiendo las órdenes del Rey Alfonso VI, intentarás liberar las tierras de Tolomera del Rey de zombies, demonios y muchas otras criaturas. El apartado sonoro está creado por Gryzor87, que ha compuesto una banda sonora brutal, al estilo de los «chiptunes» (concretamente, Yamaha YM2203), emulando aún más el espíritu clásico de estos juegos.

En la página del desarrollador, conocido bajo el seudónimo de Locomalito, tienes a tu disposición varios juegos gratuitos listos para descargar y jugar, además de que por YoyoGames tienes la versión de Maldita Castilla para Raspberry Pi. Por otro lado, en Steam tienes disponible Maldita Castilla EX, la versión extendida de Maldita Castilla.

Curiosidad: En su página oficial, tienes algunos documentos interesantes con consejos de como dibujar sprites al estilo pixel art, el manual del juego ambientado en la época (¡muy trabajado!) o incluso el boceto para hacer la cabina de una máquina recreativa.

• Estilo | Plataformas
• Cualidades | Look and feel, música y estilo retro
• URL | Maldita Castilla

4. Super Mario War

A lo largo del tiempo han existido múltiples clones o versiones no oficiales de Super Mario, pero pocos pueden llegar a ser tan divertidos como Super Mario War para echar unas partidas con varios amigos.

El juego se basa en una pequeña pantalla, al estilo del clásico Mario Bros original de 1983, pero pudiendo jugar simultáneamente 4 jugadores y permitiendo escoger el tipo de juego: modo clásico, hasta un número de muertes, cuenta atrás, coleccionar monedas, modo jaula, captura la bandera y muchos otros. Además, también puedes cambiar de mapa o incluso elegir entre varios personajes, desde Super Mario, Luigi, Toad, Yoshi, los dragones de Bubble Bobble, Link, Pikachu, Kirby, Pacman, Chocobos y muchos más.

Por si fuera poco, el juego tiene un editor de niveles (Leveleditor.exe) y un editor de mundos (Worldeditor.exe), donde se puede configurar el lugar donde jugamos. El juego está disponible para Windows, Mac, Linux o Wii, entre otros sistemas como por ejemplo las consolas creadas con Raspberry Pi, donde podemos conectar hasta 4 mandos USB. Incluso es posible crear partidas de un solo jugador donde el resto de jugadores sea la CPU, aunque la dificultad es endiablada.

Curiosidad: En la sección Super Mario War de RetroPie tienes información abundante sobre el funcionamiento del juego y todas sus características.

• Estilo | Batalla contra rivales
• Cualidades | Divertido, multijugador, todos contra todos o por equipo.
• URL | Super Mario War
• Descarga | Descarga del juego (foro)

5. F(L)AIL

Si te gustan los juegos de puzzles, F(L)AIL (de FAIL) te encantará. Se trata de un juego donde debes ir descubriendo la mecánica de cada nivel e ir resolviendo los puzzles jugando con los ítems, la gravedad, los saltos, la inercia, etc. y llegar a la zona roja donde asciendes al siguiente nivel.

F(L)AIL es un juego muy sencillo pero terriblemente adictivo, que una vez empezado, incita a seguir jugando hasta completar sus 8 niveles (que incluye 10 fases cada uno).

El juego permite el modo multijugador, por lo que le da un plus de competitividad, donde cada uno puede jugar de forma simultánea para intentar ganar primero el nivel. También influye el tiempo en la cantidad de puntos obtenidos, por lo que siempre es un reto intentar conseguir mejor puntuación.

En la página de Matt Thorson, su autor, puedes encontrar varios otros juegos indie gratuitos del autor, algunos de ellos muy curiosos.

Curiosidad: El juego tiene varios elementos desbloqueables a medida que vas avanzando los niveles. También es posible que un tercer jugador maneje el ratón como enemigo y vaya colocando bombas para hacer más complicado el juego a los jugadores.

• Estilo | Puzzle
• Cualidades | Adictivo
• URL | MattMakesGames

6. Knytt

Knytt es un juego que sorprende en prácticamente todos los aspectos. Se trata de un juego con una interfaz ultraminimalista, que nada más arrancar el juego nos muestra una serie de opciones (un tutorial del juego, varios slots para guardar nuestro juego y los créditos del juego).

La interfaz del juego es muy simple y pequeña, y en ella somos un pequeño ser parecido a un mono, que se aleja de su poblado y es abducido por otro ser que conduce un OVNI. En el viaje, tiene un problema con algunos asteroides que dañan su nave y le fuerzan a aterrizar. La misión de Knytt es buscar varias piezas necesarias para reparar el OVNI que están desperdigadas a lo largo de las pantallas del juego.

Lo que más llama la atención sin duda de este juego es la buena jugabilidad que tiene y la impresionante ambientación. A medida que vamos avanzando las pantallas, veremos que los personajes secundarios (con la mayoría no podemos interactuar) realizan acciones al margen del juego, algunas muy curiosas. La mezcla de música de ambientación y los efectos de sonido, crean una curiosa atmósfera de juego que lo hace bastante interesante.

Curiosidad: Si el juego te gusta, también existe Knytt Stories, con una gran cantidad de niveles e incluso un editor de niveles para crearte los tuyos propios. Por otro lado, en Steam tienes Knytt Underground, una última versión del juego, muy mejorada en diferentes aspectos.

• Estilo | Puzzle
• Cualidades | Ambientación, jugabilidad
• URL | Knytt

7. Lyle in Cube Sector

Lyle in Cube Sector es un juego en el que asumimos el rol del protagonista (Lyle), al que le roban su gato mientras dormía. El objetivo del juego es recuperarlo avanzando por las diferentes pantallas de «Cube Sector». El juego tiene unos filtros gráficos que emulan las antiguas TV (modo entrelazado) y una música estilo «chiptune» que te retrotraerá al estilo de juegos de la época.

El juego no tiene una dirección lineal y a medida que vas avanzando en el mismo podrás ir realizando más acciones, como por ejemplo ver el mapa o lanzar cubos a los enemigos.

Curiosidad: La página web del juego tiene un estilo retro muy característico, así como algunos otros juegos, comics y enlaces interesantes.

• Estilo | Aventura
• Cualidades | Música, Gráficos
• URL | Lyle in Cube Sector

8. Broken Cave Robot

El autor de F(L)AIL también tiene otro juego curioso, llamado Broken Cave Robot. Se trata de un pequeño y estropeado robot que cae en una cueva y al que le quedan 5 minutos para quedarse sin batería. Entonces, restringe sus funcionalidades al mínimo y comienza tu aventura.

Tu objetivo es ir descubriendo los parajes de la cueva, encontrando ítems para mejorar las capacidades del robot y evitar que el robot se dañe por completo. EL juego tiene una característica muy curiosa, y es que el sistema de mapa del juego del robot está dañado, por lo que puedes utilizarlo, pero tienes que ir dibujando el mapa manualmente, en una especie de «paint» rústico que integra.

Curiosidad: El juego surgió de una Ludum Dare, competición de creación de videojuegos en menos de 48h.

• Estilo | Puzzle
• Cualidades | Originalidad
• URL | MattMakesGames
• Descarga | Broken Cave Robot

9. Spelunky

En este juego eres un espeleólogo, muy al estilo de Indiana Jones, que se encarga de explorar una serie de cuevas y cavernas, buscando tesoros, gemas, ítems con poderes sobrenaturales sin olvidarse de esquivar trampas, matar enemigos y salvar a damiselas en apuros. La primera versión (2008) es gratuita, y está disponible para Windows (con algunos ports no oficiales para Mac).

El juego tiene un remake en Steam con el mismo nombre, Spelunky, pero con gráficos y otros detalles mejorados, aunque en su propia página puedes encontrar y descargar la versión original, junto a su código fuente.

Curiosidad: Spelunky tiene una clara influencia de clásicos como La-Mulana, Rick Dangerous o lo que parece su influencia más clara, Spelunker.

• Estilo | Acción, Aventura
• Cualidades | Gráficos, Acción
• URL | Spelunky

10. You have to win the game

Por último, tenemos You have to win the game, un original título para un cuidado remake del You have to win the game de Commodore 64 que sacó el desarrollador el 28 de diciembre de 2012. Finalmente, lo adaptó para Windows/PC y podemos disfrutarlo en equipos actuales, utilizando los maravillosos filtros de que dispone el juego en sus opciones y de los que hablaré más adelante.

En este juego, eres un niño que debe recorrer todas las pantallas del juego (cada una de ellas tienen su propio nombre) y aumentar el contador (porcentaje que se ve en un lado de la pantalla) para llegar a 100%, ya que ese es el objetivo del juego. La idea principal es conseguir los 4 orbes que existen para desbloquear los ladrillos que originalmente son invisibles, y por el camino ir consiguiendo todo el dinero posible. El juego tiene una dificultad considerable y está hecho para que la duración del mismo sea también elevada, aunque a priori pueda parecer un juego corto.

Uno de los aspectos geniales del juego es el apartado de filtros en sus opciones. Por defecto viene con un filtro CGA de 4 colores (negro, blanco, magenta y cyan), aunque se puede desactivar y activar la paleta de 16 colores. También tiene otra serie de filtros para conseguir una imagen entrelazada, emular la curvatura de un monitor de TV antiguo, así como otras opciones interesantes. El juego está también disponible para descargar e instalar de forma gratuita bajo el título You have to win the game, en Steam.

Curiosidad: El juego viene con un DLC en el que eres un gato, con una dificultad más alta y el eslogan «Eres un gato y tienes 7 vidas».

• Estilo | Plataformas
• Cualidades | Ambientación retro, filtros
• URL | You have to win the game

Espero que los juegos mencionados os gusten. Invito a opinar a todo el que quiera dejar un comentario en este artículo para recomendar algún otro juego indie de estilo pixelado y gratuito, así como dejar sus opiniones sobre los juegos de la lista.

En algunos casos, simplemente utilizamos el navegador que viene instalado en el sistema, y por comodidad, no nos preocupamos de cambiarlo. En algunos otros casos, utilizamos un navegador que por desconocimiento, no sabemos que carece de las funcionalidades perfectas para nosotros, y que se incorporan en otros navegadores.

En este artículo voy a contar las principales características de los navegadores web más actualizados, para que cada uno pueda descargarlos, revisarlos, conocer nuevos navegadores y elegir en base a sus prioridades u objetivos principales.

1. Chromium

Quizás no lo conozcas, pero Chromium es, probablemente, el navegador más utilizado en la actualidad. Con ciertos matices. El proyecto Chromium es un navegador de código abierto que funciona como base de múltiples navegadores web, como por ejemplo, Google Chrome u Opera. La idea del proyecto es que sea lo más rápido, simple y eficiente posible, permitiendo que otros desarrolladores lo tomen como base, añadiendo nuevas funcionalidades "encima".

Una de las principales preguntas sobre Chromium suele ser ¿Qué diferencias tienen Chromium y Google Chrome?. Una de las principales diferencias las vemos respecto a sus codecs de audio/video. Por defecto, Chromium sólo soporta codecs como Opus, Theora, Vorbis, VP8, VP9 y WAV, que no están sujetos a patentes ni pagos en concepto de regalías (royalties).

Por ejemplo, Google Chrome toma la base de codecs de Chromium y le añade soporte AAC, MP3 y MP4 (H.264), los cuales no están soportados por Chromium de serie (aunque pueden ser añadidos). Otras diferencias entre estos dos navegadores, suelen estar relacionadas con el envío de información (métricas), plugins u otras cuestiones que puedes leer en Chromium vs Google Chrome.

Chromium (y todos los navegadores basados en Chromium) utiliza el motor de renderizado de páginas webs Blink, que a su vez está basado en el antiguo motor Webkit, y es prácticamente uno de los mejores motores de renderizado de la actualidad.

El proyecto tiene su código fuente para que cualquier desarrollador pueda compilarlo o utilizarlo, sin embargo, en Chromium Woolyss tienen el programa ya compilado listo para utilizar y descargar para plataformas Windows, Mac o GNU/Linux. Dispone de versiones de 32 y 64 bits, versiones instalables y portables e incluso versiones que ya incluyen codecs extras.

URL | Chromium Project

2. Google Chrome

Tras hablar de Chromium, ahora debemos que hablar de Google Chrome. El navegador de Google se basa en el núcleo de Chromium, incluyendo mejoras adicionales de la compañía del buscador (codecs, características de envío de métricas, etc...). Este navegador está disponible para Windows, Mac, GNU/Linux, Android e iOS.

Es el navegador más utilizado en la actualidad, y uno de los navegadores (si no el que más) que implementa con mayor rapidez las últimas novedades tecnológicas dentro de campos como CSS3, HTML5 o Javascript, entre otros. También es bastante criticado por el alto consumo de recursos, sobre todo en cuanto a memoria RAM, que en equipos con pocos recursos puede ser bastante molesto.

También disponemos de Chrome beta una versión con características que aún no se han implementado en la versión oficial, y que podemos utilizar antes de que estén disponibles para todos los usuarios.

URL | Google Chrome

3. Mozilla Firefox

Mozilla Firefox suele ser el segundo navegador preferido de los usuarios, por debajo de Google Chrome. Firefox ha cambiado mucho a lo largo de su historia. Nace de un navegador llamado Mozilla (de ahí la primera parte de su nombre, también nombre de la compañía), que a su vez era el resurgir del antiguo navegador Netscape.

En el artículo Browser Wars: La historia de la guerra de navegadores cuento un poco la historia de Mozilla y Netscape, de Internet Explorer y todo lo que ocurrió para llegar a ser lo que es hoy en día, comparándola con Star Wars.

Intentaré que no se note demasiado mi apoyo a la filosofía del software libre, pero creo que el papel de Mozilla a lo largo de estos años ha sido encomiable. Se trata de una organización que promueve el uso del software libre y que intenta, en un mercado lleno de compañías privadas (con intereses privados), que el usuario salga beneficiado, promoviendo tecnologías libres e intentando salvaguardar la privacidad del usuario.

Antiguamente, cuando Chrome aún no existía, Firefox iba camino de ser el navegador más utilizado, pero su alto uso de memoria RAM lo hizo bajar de los laureles. Actualmente, las críticas lo sitúan como un navegador que gestiona mejor la memoria RAM que Google Chrome. Firefox utiliza un motor de renderizado llamado Gecko, aunque ha anunciado que en el futuro utilizará el nuevo motor que están preparando: Servo.

Firefox tiene algunas otras versiones disponibles, como la llamada Firefox Nightly, que es una versión alfa con las últimas novedades de Firefox (útil para quien quiera probar lo último de lo último). Por otro lado, de la misma forma que Chrome, Mozilla también ofrece un Firefox versión beta, que puede descargarse e instalarse para disfrutar de las características que aún no existen en la versión oficial de Firefox, pero son más estables que en la versión Nightly.

URL | Mozilla Firefox

4. Microsoft Internet Explorer (IE)

Internet Explorer era el navegador de Microsoft. Y lo sigue siendo. Sin embargo, digo «era» porque este navegador está ya condenado a desaparecer. Microsoft está trabajando actualmente en un nuevo navegador en el que centra sus esfuerzos, y la mayoría de las nuevas características se implementan sólo en dicho navegador: Microsoft Edge, dejando a Internet Explorer como un navegador web de transición, para irse pasando poco a poco al nuevo.

Internet Explorer tiene una triste historia, siendo un navegador que en el pasado fue el más utilizado, pero que hizo bastante daño a la web debido a una serie de decisiones intencionadas de Microsoft que perjudicaban a la competencia (y favorecían a Microsoft). El motor de renderizado que usa IE se llama Trident.

Aunque en su pasado, Internet Explorer fue un navegador horrible que no funcionaba como debería, su versión actual no es tan horrible como lo fue antiguamente, pero aún sigue sin soportar muchas características que no implementará nunca, si Microsoft finalmente apuesta al 100% por su nuevo Edge.

URL | Microsoft Internet Explorer

5. Microsoft Edge

La llegada de Microsoft Edge, el nuevo navegador de Microsoft, fue una de las mejores cosas que nos pudo pasar en el desarrollo web. Aunque bajo mi particular visión, el navegador Edge aún está un poco verde, en temas de rendimiento suele funcionar bastante bien y existe un salto gigantesco en comparación al antiguo Internet Explorer. No se trata de una modernización de Internet Explorer, sino un navegador creado desde cero, intentando solucionar los múltiples problemas del navegador de Microsoft.

Una de las características que menos gusta a los usuarios es que aún no dispone de un sistema de extensiones tan amplio como del que disfrutan los usuarios de Chrome o Firefox. Eso unido a que su interfaz es demasiado minimalista (casi simplista), echa un poco hacia atrás. Sin embargo, en temas de rendimiento, es bastante rápido y muy eficiente. Utiliza el motor EdgeHTML, que se basa en su antiguo motor Trident, pero con una fuerte y profunda modernización y reescritura de su código.

De momento, Edge sólo puede instalarse en Windows 10, lo que hace que su cuota de mercado sea extremadamente reducida. Habrá que ver como varía esto en el futuro y que pasos da Microsoft para solucionarlo.

URL | Microsoft Edge

6. Apple Safari

Safari es el navegador que viene incluido en los sistemas de Apple. Aunque se trata de un navegador muy bonito y con una apariencia simple pero eficiente, en cuanto a características y tecnología, va siempre muy por detrás del resto de navegadores.

Los desarrolladores suelen denominarlo «el nuevo Internet Explorer» (de hecho, en la imagen de título del artículo he usado una especial), ya que en cuestión de nuevas características, Apple no suele implementar las más novedosas y suele ser bastante conservador en cuanto a las actualizaciones de tecnologías webs, a pesar de utilizar el motor Webkit, que ya incorpora bastantes características interesantes.

Aunque antiguamente existió una versión para Windows, actualmente está disponible sólo para iOS, en sistemas Apple como iPhones, iPads o Mac OS.

URL | Apple Safari

7. Opera

Suelo contar que Opera siempre ha sido el eterno olvidado en cuanto a navegadores webs. De todos los anteriores, siempre es el que tiene menor cuota de mercado, sin embargo, en cuanto a características está muy bien, se basa en Chromium, por lo que se aprovecha de todas las ventajas del motor Blink.

Opera siempre ha sido un navegador innovador. De hecho, fue uno de los primeros que implementó un sistema de compresión de datos para ahorrar tráfico y consumo en dispositivos móviles, tecnología que posteriormente Google Chrome también añadía en su navegador. Quizás por esto, Opera Mini es uno de los navegadores que si son más conocidos entre los usuarios, por su rapidez y ahorro de tráfico de datos en móviles.

Antiguamente, Opera utilizaba un motor llamado Presto, pero con el tiempo se actualizó y comenzó a basarse en Chromium, utilizando Webkit y posteriormente Blink, el motor actual de Chromium. También dispone de una versión beta, en la que encontramos características más novedosas que en su versión oficial, así como una versión portable o una versión para desarrolladores.

URL | Opera

8. Canary Chrome

Los usuarios que sean desarrolladores o diseñadores web, tienen una estupenda versión derivada de Google Chrome llamada Canary Chrome. Se trata de una versión «alfa», aún con características más novedosas que en la versión beta de Chrome, que está orientada para diseñadores web.

Con esta versión de Chrome, que se puede instalar independientemente (al margen de Google Chrome), podemos utilizarlo para tener nuestras extensiones de desarrollo, utilizando el Google Chrome para nuestro uso diario habitual.

Obviamente, Canary Chrome está basado en Chromium, y siempre va una versión por delante de Chrome Beta y dos versiones por delante de Google Chrome, volviéndolo un navegador algo más inestable y no recomendado para el uso común de navegación de usuario.

URL | Canary Chrome

9. Firefox Developer Edition

Y si Google tiene su versión para desarrolladores, Firefox no iba a ser menos. Firefox Developer Edition es el antiguo Firefox Aurora, un navegador orientado a los desarrolladores web, que incluye multitud de herramientas integradas para la manipulación de código, comprobación de apariencia en dispositivos móviles y muchas otras características similares orientadas al desarrollo web.

Firefox Developer Edition incluye una extensión inédita llamada Valence, que facilita bastante la vida del desarrollador, permitiendo acciones muy interesantes para el desarrollador web.

URL | Firefox Developer Edition

10. Tor Browser

El navegador Tor es un navegador basado en Firefox que integra un sistema que permite la navegación utilizando la red Tor, la cuál permite salvaguardar la privacidad del usuario y que cuando navegamos por una página, seamos un poco más anónimos de lo que solemos ser con el resto de navegadores.

El tema de la anonimicidad de Tor ha sido bastante debatido y es un tema muy amplio del que hablar. La idea básica detrás de Tor es que cuando abrimos el navegador y conectamos a la red Tor, nos vamos interconectando en una serie de nodos, haciendo que la IP que recibe la página no sea realmente la nuestra y en cierta forma, sea más complejo identificar al usuario.

No obstante, el propio navegador Tor lo avisa al arrancar el navegador. Para ser realmente anónimos, no basta con utilizar el navegador, sino habituarse a una serie de costumbres que harán que tu navegación sea más difícil de rastrear y pueda ser anónima. Obviamente, al tener que conectar a una red, la navegación y conexión se hace un poco más lenta de lo habitual, aunque depende de varios factores.

URL | Navegador Tor

11. Opera Neon

Recientemente, Opera lanzó un experimento llamado Opera Neon. Se trata de un navegador que muestra una serie de características novedosas que pueden llegar a implementarse en el navegador oficial de Opera. Es algo así como un navegador con pruebas de concepto, que van testeando para decidir si implementarlas o no en el navegador definitivo.

Como curiosidad, Opera Neon tuvo bastante aceptación y su rendimiento es bastante bueno, aunque no queda muy claro el futuro de este navegador, ya que desde Opera comentan que se trata sólo de un experimento y que no lo desarrollarán como un navegador independiente (al menos de momento).

URL | Opera Neon

12. Maxthon Nitro

Maxthon Nitro es un navegador con un objetivo principal: ser ultrarápido. Y lo consigue. Carece de extensiones y de las pretensiones de un navegador más grande y complejo, pero para usuarios que tienen un sistema muy antiguo o necesitan un navegador simple, moderno y muy, muy rápido, es perfecto.

Dispone de pestañas, borrado de caché y cookies, favoritos, búsqueda, zoom, imprimir y guardar páginas. Las características más importantes que suelen utilizarse en un navegador. Prescindiendo del resto, se consigue un navegador muy veloz que puede ser útil cuando los recursos del sistema son muy escasos.

URL | Maxthon Nitro

13. Vivaldi

Otro navegador interesante surgido en los últimos años es Vivaldi, creado por el cofundador de Opera. Este navegador surge por el descontento de la evolución de Opera cuando se adaptó para cambiar su motor de renderizado Presto al motor actual Blink (fork de Webkit). En dicho cambio, se eliminaron y perdieron muchas características que demandaban los usuarios, y descontentos por este cambio, hubo una división de la cuál surgió Vivaldi.

El navegador es conocido por tener una interfaz característica y agradable, que es altamente personalizable y que obviamente, recuerda vagamente a la esencia de las versiones anteriores de Opera, pero con un interfaz renovado. Desde la compañía, indican que el navegador está dirigido a los «early adopters», un público tecnológicamente actualizado, que disfruta utilizando lo último de lo último.

URL | Vivaldi

14. Brave

Brave es un navegador open source, basado en Chromium (y por lo tanto, usando el motor Blink), creado por el cofundador de Mozilla. El objetivo principal del desarrollo de este navegador es enfocarse en proteger la privacidad del usuario eliminando y bloqueando los famosos «trackers» (o códigos de seguimiento) o los anuncios intrusivos que puedes encontrar en múltiples páginas y sitios web.

Brave está disponible para Windows, Mac, GNU/Linux, Android e iOS y ha disfrutado de críticas positivas durante su lanzamiento y primeros meses de vida.

URL | Brave

15. Blisk

Blisk es un navegador basado en Chromium, que está enfocado a los desarrolladores y diseñadores web, con la intención de que puedan mejorar la productividad y calidad de código, utilizando las herramientas integradas en el propio navegador.

La interfaz del mismo es prácticamente un clon de Chromium/Chrome, observando muy pocas diferencias. Sin embargo, al utilizarlo vemos que existen una serie de características como, por ejemplo, la emulación de dispositivos como móviles y tablets, auto-actualización de una web cuando escribimos o modificamos código sin necesitar pulsar F5 para actualizar u otras características similares.

URL | Blisk

16. Maxthon

Maxthon es el padre de Maxthon Nitro. Nació como un navegador hibrido llamado MyIE que implementaba dos motores de renderizado de páginas: Trident (el usado por Internet Explorer) y Webkit (el usado por Chrome). De esta forma, el navegador permitía mostrar todas las páginas correctamente, independientemente de que estuvieran diseñadas para Internet Explorer o no.

Con la caída del Internet Explorer en los últimos años, Maxthon se ha visto obligado a reinventarse, convirtiéndose en un navegador que, como característica principal, se enfoca en el usuario principiante, integrando un completo panel con multitud de opciones avanzadas y sencillas de utilizar: gestión de cuentas de servicios externos, contraseñas, notas, correo, etc...

URL | Maxthon MX5

17. SeaMonkey

SeaMonkey es el nombre con el que se conoce a un conjunto de aplicaciones entre las que se encuentran un navegador web, un gestor de correo (similar y alternativo al clásico Outlook Express), una libreta de contactos y un editor de páginas webs.

El objetivo de SeaMonkey fue coger el testigo de la suite de Mozilla, proporcionando una alternativa a los usuarios que la utilizaron en su momento, o que utilizaban aplicaciones como Firefox (en su rama de versiones 2.x) o aplicaciones como el gestor de correos ThunderBird. SeaMonkey coge el testigo de esa interfaz y experiencia de uso y no la modifica para que se pueda seguir utilizando actualmente, pero con un núcleo renovado.

SeaMonkey está disponible para descargar en sistemas Windows, Mac o GNU/Linux y está siendo desarrollado por la comunidad, a través de la entidad The SeaMonkey Council, apoyada por Mozilla.

URL | SeaMonkey

18. Pale Moon

Aunque no está directamente relacionado con el anterior, cabe remarcar la existencia de Pale Moon, un navegador que parte del motor de renderizado Gecko, utilizado por Firefox desde sus primeras versiones, transformándose en uno nuevo llamado Goanna.

Pale Moon pretende mantener la interfaz sencilla que tenía Firefox antes del cambio al navegador que es hoy en día, haciendo su utilización lo más sencilla y fácil posible.

URL | Pale Moon

19. Iridum Browser

Iridum Browser es un navegador libre, de código abierto, basado en Chromium, que pone la privacidad como principal característica a cuidar. Aspectos como la transmisión de consultas parciales, palabras claves o métricas a un servidor sólo ocurren si el usuario da su consentimiento, lo cuál aumenta considerablemente la privacidad del usuario al navegar por Internet.

En lo relacionado al aspecto visual, es prácticamente un clon de Chrome/Chromium, ya que utiliza la misma interfaz. Sus diferencias principales pasan en lo que se refiere al envío de información a Google, así como en los temas de envío de información (DNS, Safe Browsing, cookies, etc...). Está disponible para Windows, Mac o GNU/Linux.

URL | Iridium Browser

20. Midori

Midori nace con el objetivo de convertirse en un navegador simple y ligero, orientado a usuarios que no requieren de características avanzadas, incluídas ya por defecto en muchos navegadores, convirtiéndolos en programas pesados y lentos.

Este navegador viene incluido en multitud de distribuciones de GNU/Linux, donde, personalmente, tiene una interfaz mucho más conseguida y acabada que la que tiene en su versión para Windows. Midori viene instalado por defecto en Elementary OS y es bastante ligero y rápido.

URL | Midori

21. Yandex Browser

Yandex es un buscador ruso que, aunque no lo creas, tiene más cuota de mercado que Google en su país. Yandex tiene su propio navegador, que se basa en Chromium y tiene integrada la tecnología antivirus de Kaspersky. Además, también utiliza la tecnología Opera Turbo para acelerar la velocidad de conexiones lentas.

El navegador está disponible para Windows, Mac, GNU/Linux e iOS.

URL | Yandex Browser

22. QuteBrowser

Si eres un admirador del editor Vim, probablemente QuteBrowser te encantará. Se trata de un navegador web orientado a personas que prefieren (o acostumbran) utilizar el teclado sobre el ratón, aumentando la productividad y evitando el tiempo que pierdes en el cambio de manos de teclado a ratón.

El navegador está desarrollado con la tecnología Qt y nos permite realizar cualquier tipo de tareas escribiendo al estilo VIM. Por ejemplo, si pulsamos ESC y luego escribimos :open www.emezeta.com, se nos abrirá esta página, con :history-clear nos borrará el historial y con :hint nos mostrará las teclas que hay que pulsar para acceder a los diferentes campos o secciones de una página.

URL | QuteBrowser

23. Lynx

Por último, aprovechando que ya introducimos QuteBrowser, Lynx es un navegador de terminal de texto útil para los administradores de sistemas o, incluso, para los desarrolladores web que quieren observar como ve Google una página web. Al igual que otros navegadores como w3m o links, Lynx permite navegar por una página web desde una terminal de texto, descargar archivos o incluso procesar el HTML o contenido de una web para pasarla posteriormente por un script y procesar sus datos.

Si te interesan este tipo de aplicaciones basadas en comandos, probablemente te interese el artículo 20 curiosidades geeks para terminales GNU/Linux

URL | Lynx

¡Y hasta aquí el listado de navegadores web! Existen muchos más, pero he intentando indicar los más fiables y actualizados hasta la fecha. Si hay alguno que crees que merece la pena recomendar y falta en esta lista, puedes añadirlo en los comentarios y decirnos cuales son las características que más te gustan de él.