Credit image

Recibe las actualizaciones de Emezeta.com en tu correo:
¡O sígueme en Twitter!

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

Dreaming Sarah: Guía de curiosidades y teorías

Dreaming Sarah es un videojuego indie que consigue unir pixel art, música y el extraño y surrealista mundo de los sueños. ¿Qué crees que le ocurrió a Sarah?

Dreaming Sarah es un videojuego indie creado por Andre Yin, de Asteristic Game Studio, que consigue unir con gran maestría el pixel art, la música (de Anthony Septim) y el extraño y surrealista mundo de los sueños. A parte de ser un amante de los tres puntos citados anteriormente, Dreaming Sarah es un título que creo que merece muchísimo la pena cuando te das cuenta del mimo, cariño y la dedicación que tiene detrás.

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).

[...]

Queda el 61% del artículo
Leer artículo completo

Alternativas minimalistas a Bootstrap: Frameworks CSS (III)

¿Quieres una alternativa ligera y rápida a Bootstrap? En esta tercera entrega encontrarás varios frameworks CSS para crear diseños web minimalistas.

En otras entregas de esta serie de artículos, hemos hablado de frameworks CSS a diferentes niveles. En la primera parte, mencionamos alternativas a Bootstrap que siguen su mismo objetivo: ser una colección gigante de componentes y código prediseñado, listo para utilizar y realizar los mínimos cambios posibles.

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.

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.

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.

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.

[...]

Queda el 62% del artículo
Leer artículo completo

Alternativas ligeras a Bootstrap: Frameworks CSS (II)

¿Buscas alternativas ligeras y rápidas a Bootstrap? Esta segunda entrega incluye una colección de frameworks CSS alternativos para nuestro sitio web.

En el último artículo, hablamos de alternativas a Bootstrap, para aquellos que querían conocer ciertos frameworks diferentes pero del mismo estilo que Twitter Bootstrap, como por ejemplo, Materialize CSS o Semantic UI.

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.

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.

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.

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.

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.

[...]

Queda el 74% del artículo
Leer artículo completo

Alternativas a Bootstrap: Frameworks CSS (I)

¿Buscas alternativas a Bootstrap para el diseño de una web? En este primer artículo encontrarás varios frameworks CSS diferentes para utilizar en tu web.

Hoy en día, cuando llevamos a cabo desarrollos o diseños web, y nos estamos enfocando en el aspecto visual de una página, solemos decantarnos por la utilización de un framework CSS que nos quite trabajo de encima y nos permita ir mucho más rápido al lograr nuestros objetivos. Además de un conocimiento profundo de HTML5 y CSS3, y unas nociones (mínimas, aunque sea) de Javascript, sería ideal tener conocimiento del panorama general en cuánto a frameworks CSS existentes.

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.

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.

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.

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.

[...]

Queda el 53% del artículo
Leer artículo completo

1 2 3 4 ... 393 #