Credit image

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

20 curiosidades y teorías de Firewatch

Curiosidades, huevos de pascua, secretos y teorías sobre Firewatch, el estupendo juego indie de la desarrolladora Campo Santo.

Firewatch es un juego en primera persona desarrollado por Campo Santo, un pequeño estudio de desarrolladores de videojuegos (11 personas) que previamente han trabajado en títulos como The Walking Dead, Tales of the Monkey Island, Sam & Max, BioShock 2, Brutal Legend o The Cave, lo cuál ya nos da una idea de por donde se mueven.

El juego Firewatch fue lanzado en febrero de 2016 y ha recibido todo tipo de críticas. He de decir, que Firewatch no es un juego típico, por lo que puede no resultar interesante para determinado tipo de público. Hay dos características que hay que tener presentes:

  • No se trata de un juego de acción (no es un shooter, ni un survival, etc...). No esperes disparar armas o cargarte enemigos.
  • Es una mezcla de walking simulator y de narrativa interactiva. Básicamente: Como leer un libro, pero decidiendo a donde ir (o que hacer) en cada momento.

En el juego eres Henry, un hombre que, tras una serie de problemas en su vida, decide trabajar como vigilante de una torre de incendios en Wyoming para huir de la realidad, al menos durante un tiempo y aclarar sus ideas. A partir del primer día, comenzarás a realizar una serie de trabajos forestales y, poco a poco, te verás envuelto en una serie de misteriosos sucesos.

La duración del juego es bastante corta, unas 3-4 horas. Sin embargo, durante mi partida he estado jugando unas 6-7 horas hasta terminarlo por completo. Para encontrar todo lo que esconde el juego, quizás es necesario algo más de tiempo. A pesar de ello, es un buen juego. IGN le da un 9.3/10 de puntuación, mientras que metascore un 81/100.

El juego Firewatch está disponible en Steam en inglés con subtítulos en español, y algo más barato en algunas otras plataformas.

OJO, SPOILERS: ¡Atención! A partir de estas líneas, se va a hablar de la trama del juego. Si no has jugado y lo quieres hacer, los detalles que comento a continuación arruinarán la sorpresa que esconde el juego. En ese caso, te recomiendo que guardes el artículo en favoritos, lo juegues primero, y luego lo leas para descubrir todo lo que te perdiste.

Firewatch: El juego

Como comenté anteriormente, Firewatch no es un juego tradicional. Básicamente, se trata de un juego de narrativa interactiva, en el que vas profundizando en la historia a medida que vas jugando. Algo más parecido a juegos del estilo de The Stanley Parable.

El nivel de detalle y ambientación del juego está muy logrado (la soledad del bosque consigue que entres en la historia desde el primer momento) y este comienza con un drama del calibre del inicio de la película de Disney Up, que si eres muy empático, incluso te puede influir mucho emocionalmente.

Y es que justo ese es uno de los puntos fuertes de Firewatch. Desde mi punto de vista, en el juego se han abordado diferentes características, alejados de juegos convencionales, que han hecho que al público le encante o lo odie, dependiendo del caso. Comento los detalles que considero más importantes:

  • La historia del juego es inmutable y lineal. Esto choca mucho con lo que se espera normalmente de este tipo de juego, donde el jugador va modificando ligeramente la historia con sus acciones. En Firewatch (probablemente por limitación) se esconde esto, pero también se consigue ese agridulce «golpe de realidad» del final del juego.

  • El juego no tiene finales alternativos dependiendo de las acciones del jugador. Otra cosa que suele ser bastante esperada en juegos de este tipo. Sin embargo, si que tiene un final secreto, que comentaré más adelante.

  • El jugador puede cambiar ciertos detalles de la historia: El nombre del perro o la tortuga, la descripción que le da de si mismo a Delilah, las frases de una conversación, etc... Hay cierto rango de posibilidades, aunque notablemente limitadas.

  • Los diálogos y conversaciones son brillantes. Las voces de Henry y Delilah son geniales y los diálogos tienen partes muy divertidas y llamativas. Destacar el papel de Cissy Jones, la voz de Delilah.

  • El juego potencia la imaginación del jugador, puesto que a medida que vas jugando hay sucesos, conversaciones o detalles que se muestran de forma parcial para que cada tipo de jugador se vaya creando su propia versión de los hechos. De esta forma, un jugador puede pensar que ha ocurrido un desastre, mientras que otro piensa que todo va bien, dependiendo de lo que haya imaginado cada jugador. Si tienes imaginación, lo disfrutarás mucho.

En Firewatch hay escondidas muchas historias, detalles o huevos de pascua, que sólo los más avispados podrán encontrar o descubrir. Vamos a contarlos todos en este artículo, y por supuesto, si tienes alguna teoría o huevo de pascua que no se comenta en este artículo, puedes añadirlo en los comentarios.

1. La relación con Delilah

Sin duda, el punto fuerte del juego es la relación con Delilah. Durante todo el juego, la única forma de relacionarte con alguien (salvo algunas excepciones) es a través de un Walkie-talkie con tu jefa, Delilah, que tiene una actitud cuanto menos extraña, al menos para ser tu jefa.

Tras ese amargo inicio del juego, y la actitud de Delilah que te acompaña durante los primeros minutos de Firewatch, cada jugador decide como afrontar las conversaciones con ella: mantener una actitud fría de fidelidad hacia Julia, una actitud de desconfianza hacia Delilah por hacer tantas preguntas o convirtiéndote cada vez más cómplice de Delilah debido a su cercanía. Todo depende del jugador y sucede en su mente, no en el juego.

El juego simula muy bien la soledad a la que se podría enfrentar un vigilante forestal, y hace empatizar al jugador con Delilah hasta considerarla una compañera cercana, a pesar de no conocerla personalmente. Entonces, en un determinado momento del juego, se deja el botón pulsado mientras mantiene lo que parece una extraña conversación con otra persona:

  • D —Hola. Creo que no. ¿Por qué, tú sí?
  • ? —...
  • D —Vale, bien.
  • ? —...
  • D —No, creo que no tiene ni idea.
  • D —Estoy totalmente segura
  • ? —...
  • D —¿Tú crees?
  • ? —...
  • D —Vale. Si pasa algo, te aviso.

En dicha conversación solo escuchamos a Delilah, por lo que el jugador y su imaginación es la que crean el resto del diálogo. Hay jugadores que piensan que Delilah miente, que sabe algo que no te quiere contar y está hablando con alguien sobre ti, y hay jugadores que piensan que es una conversación ajena, donde habla con otra persona de algo sucedido en otro lugar, como por ejemplo, con las adolescentes que encuentras el segundo día.

Esta sencilla parte, hace que el jugador esté condicionado y pueda cambiar su actitud durante el juego y se vaya formando su propia historia en la mente. Más tarde, Delilah le cuenta a Henry que estuvo saliendo con Javier, que fue egoísta con él, que no le apoyó, y le terminó dejando, empatizando algo más con el jugador.

2. Mapas de Firewatch

Durante el juego disponemos de un mapa (y una brújula), y a medida que vamos encontrando cajas de suministros, veremos que hay mapas más detallados que Henry copia en el suyo para saber donde están los puntos importantes.

Si miramos detalladamente esos mapas locales, veremos que las esquinas están firmadas por supuestos vigilantes que pasaron por allí anteriormente, entre dichas firmas nos encontramos nombres como Will Armstrong, P. Surricchio, Sean Vanaman, Jane NG, Nels Anderson, entre otros. Son algunos de los programadores del juego, que podemos ver en el about de CampoSanto.

También está escrita la frase «This world is but a canvas to our imagination», adjudicada a Henry David Thoreau. Podemos encontrar también el nombre Ranger Rick, una de las muchas referencias al juego Gone Home.

3. La historia de Carter «el mapaches»

Una de las historias más divertidas del juego es la de Winthrop Carter, alias «El mapaches». Esta historia nos la cuenta Delilah si vamos a la cabaña vieja quemada de Hawk's Rest y miramos la estufa. En un determinado momento del juego (no siempre ocurre, a veces está vacía), un mapache se mete en la estufa para dormir calentito. Al abrirla, nos ataca y se va ligeramente molesto por haberlo molestado.

Es entonces cuando le contamos a Delilah que nos ha atacado un mapache y ella nos cuenta la terrible historia de Carter el Mapache. Es mejor verla en video, merece la pena:

Además, también es posible encontrarnos al mapache intentando abrir una barrita de frutas. El momento es bastante cómico, puesto que justo cuando te acercas sigilosamente a interactuar con el mapache, Delilah grita la solución de unos crucigramas que está haciendo, ahuyentando al mapache.

Cuando terminamos el juego, al llegar a la torre de Delilah, encima de la mesa hay dos libros de crucigramas.

Si miramos la contraportada de algunos libros, el logo de la editorial es un mapache, así como hay una foto de un mapache en la torre de Two Forks, encima de la puerta.

[...]

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

10 trucos para Google Chrome Developer Tools

Estas son algunas de las características más interesantes de Chrome Developer Tools, la herramienta orientada a diseñadores web e integrada en Google Chrome.

Hoy en día, Chrome es, con diferencia, el navegador web más utilizado. Siempre habrán opiniones y matices sobre si es el mejor navegador, sin embargo, de lo que no hay duda es de que llevan un buen ritmo a la hora de ir implementando mejoras y perfeccionando sus características. De hecho, Chrome Developer Tools, uno de sus pilares, suele ser bastante infrautilizado respecto a su gran cantidad de interesantes características y funciones orientadas a diseñadores web.

En este artículo vamos a dar un repaso por encima a algunas de las funcionalidades de Chrome Developer Tools, algo que recomiendo a cualquier desarrollador o diseñador web.

1. ¡Usa el inspector de elementos!

Pulsando la combinación de teclas CTRL+U en un navegador web como Chrome o Firefox puedes acceder al código fuente de la página para ver sus tripas y como está hecho cierto detalle de la misma. Sin embargo, en muchas ocasiones este sistema no es práctico puesto que la página web tiene el código minificado (condensado, para que ocupe menos).

Para que nos sea más útil tenemos dos alternativas: utilizar el Inspector de elementos de Google Chrome Dev Tools, pulsando CTRL+SHIFT+I y dirigiéndonos a la pestaña Elements. La pestaña Source también nos ofrece la opción de abrir cualquier componente de nuestra web, pudiendo pulsar el botón {} (Pretty Print) para pasar de código minificado a código legible con un sólo clic de ratón.

Además, si optamos por utilizar el Inspector de elementos, podemos simplemente pulsar con botón derecho en el elemento de la página web que queremos investigar y seleccionar la opción Inspeccionar. Así se nos abrirá el inspector justo en la etiqueta HTML deseada.

Pulsando en el botón de la esquina superior-izquierda (CTRL+SHIFT+C) también podemos mover el ratón sobre la página y ver en un sólo vistazo las etiquetas HTML que se resaltan, sus dimensiones o los márgenes y rellenos que se aplican al elemento en cuestión, algo muy útil para evitar problemas con el modelo de cajas de CSS.

2. Modifica el HTML o CSS en tiempo real

Cuando estamos diseñando una página, una característica muy interesante sería la de ir añadiendo características al CSS, o editar el HTML hasta conseguir el resultado deseado. Esto es algo muy sencillo de hacer con Chrome Dev Tools mediante el inspector de elementos.

Por ejemplo, sobre esta tabla periódica interactiva de los elementos HTML5 podemos ir desmarcando propiedades CSS o modificando sus valores, para observar el resultado si se realizaran esos cambios.

Por su parte, el HTML también puede ser modificado. Simplemente pulsamos con botón derecho sobre el elemento HTML en cuestión y elegimos la opción Añadir atributo (para insertar clases o ids, por ejemplo) o la opción Editar HTML, si queremos hacer cambios de forma más libre.

Nota: ¡Recuerda que las tecnologías de front-end nativas del navegador como HTML5, CSS3 o Javascript se ejecutan desde tu sistema! Esto quiere decir que no estás realizando cambios permanentes, sino que sólo haces cambios sobre archivos temporales de tu navegador.

Algunas propiedades CSS tienen gestores más avanzados, como es el caso de los colores CSS, que tienen su propio ColorPicker. Dicho gestor nos permite seleccionar el color y grado de transparencia rápidamente y de forma visual. Además, también nos permite cambiar entre los diferentes esquemas de color (hexadecimal, RGB, HSL), ir guardando los colores más utilizados e incluso utilizar un ColorDropper (cuentagotas) para extraer el color de alguna imagen o componente de la web.

También podemos variar las propiedades CSS que utilicen medidas o unidades simplemente girando la rueda del ratón colocándonos encima, cambiar los valores de las propiedades gracias al autocompletado del cuál dispone, o como vimos anteriormente, desmarcar las casillas de verificación que aparecen a la izquierda de las propiedades CSS para desactivarlas.

Además, podemos pulsar sobre el + de la esquina superior-derecha para añadir nuevas reglas CSS.

Truco: Puedes pulsar SHIFT+Click de ratón sobre un color para cambiar su esquema de hexadecimal a RGB o HSL.

3. Emula los sensores o valores del GPS

En el inspector de elementos de Chrome podemos pulsar en el menú con tres puntos en la esquina superior-derecha y seleccionar la opción Show console (o simplemente pulsar ESC). Con esto aparecerá un nuevo panel inferior, donde podemos mostrar varias pestañas.

La pestaña Sensors nos permite emular en el navegador las coordenadas GPS que podríamos obtener con un dispositivo móvil o la orientación del dispositivo a través de los valores alfa, beta y gamma (ejes X, Y y Z), correspondiente a la posición/orientación en la que está colocado el dispositivo y que obtiene gracias al giroscopio.

4. Prepara tu web con Responsive Design (RWD)

Nuestro Chrome Dev Tools viene preparado para gestionar la apariencia de nuestra web mediante las media queries de CSS de una forma muy agradable y cómoda. Basta con pulsar el segundo icono de la esquina superior-izquierda (Toogle Device Toolbar) o pulsar CTRL+SHIFT+M.

Al hacerlo, activaremos el modo Responsive del navegador, en el cuál tendremos las herramientas necesarias para ver la página como si lo estuvieramos viendo en un dispositivo móvil o tablet, ya que en la zona superior de la página podremos colocar el dispositivo que queremos emular, mostrándonos sus dimensiones de pantalla, el zoom y la orientación actual del móvil (horizontal o vertical).

Truco: Si el móvil que queremos emular no está en la lista, se puede añadir fácilmente desde el menú o pulsando F1 desde el Inspector de elementos, pulsando la pestaña Devices y el botón Add custom device.... Esto nos permitirá añadir nuevos dispositivos a emular, con sus dimensiones de pantalla, tipo, e incluso el User Agent para simular ser un navegador concreto.

Este panel no sólo mostrará la apariencia móvil y aplicará las media queries de nuestra web, sino que también simulará los taps o swipes con nuestro puntero del ratón, así como mostrar otros datos a través del menú superior-derecho.

En dicho menú podremos mostrar una regla visual, capturar pantalla móvil o mostrar una franja visual para ver las media queries disponibles en la página actual.

Para salir de este modo, simplemente volvemos a pulsar en el icono Toggle Device Toolbar o CTRL+SHIFT+M sobre el inspector de elementos.

[...]

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

Browser Wars: La historia de la guerra de navegadores

Browser Wars (La guerra de los navegadores) es una historia que comienza en 1993, con los primeros navegadores web y que dura hasta nuestros días, ¿quieres conocerla?

Hace mucho tiempo, en un ciberespacio muy, muy lejano, se ideó un sistema para que cualquier navegador web (cliente) que sea utilizado para acceder a una página web tuviera una identificación interna denominada User Agent (Agente de usuario). Este Agente de usuario no era más que una cadena de texto establecida por los creadores del navegador para identificar de que aplicación se trata.

Basta con acceder a la consola Javascript del navegador, en el caso de Chrome pulsando CTRL+SHIFT+I, y escribir navigator.userAgent para observar la identificación del navegador en cuestión.

Si te has puesto a curiosear entre los datos que aparecen, te habrás extrañado al comprobar que muestra información confusa. ¿Por qué aparece la palabra "Safari" si se trata de un Google Chrome? ¿Por qué aparece la palabra "Mozilla" si es un Internet Explorer? Son preguntas que suelen surgir mucho en mis cursos de Javascript y que tienen una explicación histórica que muestra el delicado problema de la retrocompatibilidad unido al hecho de tener que depender de los navegadores más utilizados, algo que sufrimos frecuentemente en todo lo relativo a web.

La cadena de texto User Agent es uno de los datos que debe entregar el navegador al acceder a una web para identificarse. De hecho, no tiene porque ser realmente un usuario con un navegador, podría tratarse de un acceso no humano (robot) como GoogleBot, el crawler de Google que se encarga de revisar un sitio web para posteriormente indexarlo en el buscador, o FacebookExternalHit, un robot de Facebook que revisa la URL cada vez que alguien pone un enlace en un mensaje privado a otro usuario en dicha red social. Cada uno de estos robots entrega su propia cadena de texto de identificación al entrar en el sitio web.

Episodio I: El despertar de la fuerza

Alrededor del año 1993, aparecieron los primeros navegadores web gráficos. ViolaWWW fue el primero de ellos, y Mosaic, aunque fue el segundo, se hizo mucho más popular. Incluso hoy en día podemos descargar las diferentes versiones de Mosaic desde la web del NCSA (aunque para funcionar en sistemas actuales debemos tener una máquina virtual o emulador con los sistemas operativos correspondientes).

En este primer navegador, el agente de usuario era muy simple, y su finalidad era identificar el navegador que se utilizaba, junto a su versión. Estos datos eran registrados en los logs de los servidores web, que posteriormente se podrían procesar para realizar análisis estadísticos, como actualmente lo hace Google Analytics y antiguamente se utilizaban aplicaciones de servidor del estilo de AWStats o Webalizer que generaban estadísticas con cierta frecuencia. La identificación del navegador Mosaic era algo similar a esto:

NCSA_Mosaic/1.0

Poco más tarde, se darían cuenta de que los usuarios podían utilizar el navegador desde diferentes plataformas, por lo que sería conveniente identificar otros detalles como el sistema operativo y la versión o características del mismo, algo que nos daría más control sobre la situación del usuario. Para ello, se modificó el user agent para así poder reflejarlas:

NCSA_Mosaic/2.0 (Windows 3.1)
NCSA_Mosaic/2.6 (X11; SunOS 4.1.3 sun4m)

Mientras tanto, cerca de 1994, aparecía Netscape Navigator, un navegador creado desde cero por algunos de los fundadores de Mosaic. Su nombre código nos sonará bastante: Mozilla. El nombre se originó de la unión de «Mosaic» y «killer», además de su sonoridad similar a «Godzilla», ya que el objetivo de Netscape era «destruir» Mosaic, que era el navegador más utilizado del momento. A parte del nombre código de Netscape, Mozilla era la mascota de Netscape, un lagarto originalmente verde y morado (que posteriormente se volvería rojo). Con el tiempo, Netscape acabaría siendo el navegador más utilizado, reemplazando a Mosaic que terminaría por abandonarse su desarrollo.

El User agent de las primeras versiones de Netscape era algo parecido a esto:

Mozilla/3.0 (Macintosh; U; PPC Mac OS X; es-ES)
Mozilla/3.0 (Win95; I)
Mozilla/3.0 (X11; I; AIX 2)
Mozilla/4.0 [es] (Win95; U)

Utilizaba su nombre código para hacer referencia al navegador, el sistema operativo (Macintosh, Win95, AIX...) y algunos datos adicionales como el idioma del navegador o el nivel de cifrado utilizado:

  • N: Sin cifrado
  • I: Cifrado débil (40 bits)
  • U: Cifrado fuerte (128 bits)

Hasta la salida de la versión 6, Netscape introdujo alguna variación, donde colocaba el idioma del navegador entre corchetes en la parte central (como se ve en el último ejemplo), justo antes de indicar el sistema operativo, esquema que abandonaría poco después.

Episodio II: Las guerras clon

Internet Explorer hacía su aparición por esa época, basándose en el código de una versión comercial de Mosaic, perteneciente a una empresa llamada Spyglass, e incluyéndolo de serie en el sistema operativo Windows para intentar competir contra Netscape (y evitar pagar derechos). Es entonces cuando empezaría la era de las guerras entre navegadores, concretamente entre Netscape Navigator e Internet Explorer, sin androides y sables láser, pero con todo tipo de artimañanas para sobresalir por encima del otro.

[...]

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

10 alternativas a PowerPoint: crear presentaciones web

¿Quieres crear presentaciones web en HTML5? Existen varios frameworks Javascript con los que podrás crear sorprendentes diapositivas de forma muy sencilla.

Necesitamos crear varias diapositivas para presentar y explicar un tema o trabajo, pero luego queremos colgarla en Internet. Probablemente, la opción más tradicional es utilizar PowerPoint y hacer alguna presentación con él. O quizás con KeyNote, Google Docs o Prezi.

Aunque siempre está bien tener una versión alternativa, o subir un PDF a SlideShare o SpeakerDeck para ir sobre seguro, mi opción favorita suele ser utilizar un framework Javascript para hacer diapositivas basadas en la tecnología nativa de la web: HTML5, CSS3 y Javascript.

Las razones por las que prefiero las presentaciones web son varias, pero se resumen en una: «la potencia de la web, en mis diapositivas»:

  • Puedo utilizar transiciones CSS y animaciones CSS para hacer diapositivas interactivas.
  • Puedo crear formularios interactivos para demostraciones en vivo.
  • Puedo incluir videos de Youtube, Vimeo o mediante etiquetas <video> de HTML5. Idem con audios de SoundCloud o etiquetas <audio>.
  • Puedo incluir código Javascript para interactuar con diapositivas o páginas.
  • Puedo moverme facilmente entre diapositivas o personalizar su funcionamiento.
  • Puedo editar facilmente las diapositivas o corregir errores desde el código fuente.
  • Puedo preparar varios temas (oscuro y claro) y cambiarlos con un solo click.
  • Cualquier navegador moderno las soporta (algunas incluso se adaptan a móviles).
  • Puedo modificar la presentación (erratas, por ejemplo) facilmente si la tengo subida a Internet.

Pero como desarrollar una presentación desde cero podría ser algo tedioso, existen varios frameworks o «librerías» Javascript que facilitan dicha tarea, simplificándolo considerablemente hasta el punto de sólo necesitar saber HTML (o ni siquiera eso).

1. Impress.js

Este es uno de mis frameworks preferidos para crear presentaciones. Impress.js permite crear llamativas presentaciones pudiendo utilizar efectos 2D/3D para movernos entre diapositivas, simplemente indicando con clases las diferentes diapositivas y utilizando algunas opciones y parámetros para movernos en los diferentes ejes X, Y y Z o utilizar otros efectos de transformaciones.

Aunque estas herramientas limitan bastante las posibilidades del framework, Strut editor permite crear diapositivas de una forma más sencilla y visual, siendo compatible con impress.js y con bespoke.js (ver más adelante).

Algunas presentaciones de ejemplo:

Github | Impress.js

2. Reveal.js

Mi segundo framework preferido para crear presentaciones web se llama Reveal.js. Es muy sencillo y práctico, aunque no es tan potente como el anterior. Reveal.js tiene un flujo de diapositivas muy intuitivo, ya que muestra una cruceta en la esquina inferior-derecha donde puedes ver hacia donde te puedes mover en la presentación.

Por defecto, puedes ir avanzando diapositivas en horizontal (hacia la derecha), pero también permite colocar diapositivas en vertical, y así poder organizar mejor los temas de la presentación.

Algunas presentaciones de ejemplo:

Github | Reveal.js

3. Stack.js

Stack.js es una librería minimalista que permite hacer presentaciones basadas en scroll vertical (o alternativamente, con teclado), pasando entre diapositivas cuando la barra lateral llega a la parte superior. Permite diseños responsive (se adapta al tamaño del navegador), ejecutar eventos cuando una diapositiva está visible, entre otras cosas. Ideal para presentaciones minimalistas y elegantes.

Github | Stack.js

[...]

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

1 2 3 4 ... 390 #