En la clase anterior, habíamos aprendido a cómo crear títulos alternativos para las escenas (## [escena]("Título alternativo")), como crear escenas sin títulos (## [escena]("")) y como crear escenas condicionales (## [libro](?condición&condición "Título alternativo")).

No dejamos tarea pendiente, porque el fin de esta unidad es hacer consciente al autor de algunas ayudas con las que cuenta. Vamos a ver en esta clase como crear enlaces tradicionales (los de toda la vida), como añadir imágenes, animaciones y vídeos, de una forma simple y sin complicaciones.

Cómo crear enlaces

En realidad las anclas son una forma de enlaces pero que solo funcionan dentro de la historia con el mecanismo de Ficdown. Para poder añadir un enlace a una página web externa al proyecto, debemos recurrir a una etiqueta HTML (si no sabes que es, no te preocupes, más adelante analizaremos más a detalle estas etiquetas, por ahora confórmate con saber que las etiquetas HTML son las piezas internas con las que se construye una página web).

Una etiqueta HTML se escribe entre los símbolos mayor y menor (<etiqueta>). La etiqueta para crear un enlace es <a>, y se usa de la siguiente manera:

<a href="https://google.com">Haz click aquí</a>

Esto es un enlace un enlace a la web de google, y lo que verá el lector es: Haz click aquí. Fíjate que al final se usa una etiqueta de cierre que indica donde termina el enlace (</a>).

Puedes usar etiquetas HTML en cualquier parte del documento, solamente debes seguir esta regla de oro:

Nunca envuelvas un texto que contenga anclas o marcado de Markdown (más adelante lo veremos a detalle) en un etiqueta HTML que necesite una etiqueta de cierre. Ficdown ignora todo el contenido encerrado en HTML y lo pasa al documento tal cual y lo escribiste.

Pongamos un ejemplo con la etiqueta párrafo (<p>):

<p> Esto es un párrafo que contiene un [ancla](/objetivo)</p>

Esto aparecerá como un párrafo, pero el ancla aparecerá tal cual la escribiste. Siempre recuerda, Ficdown ignora sus mecanismos si están encerrados en HTML.

Cómo incluir imágenes y animaciones

La etiqueta HTML para incluir imágenes (<img>) no necesita una etiqueta de cierre. Es tan sencillo como especificar el enlace directo de nuestra imagen en un parámetro llamado src (source del inglés, es decir la fuente de donde procede el archivo), así:

<img src="https://imagenes.org/archivo.png" />

El slash antes de cerrar se coloca para las etiquetas que no tienen cierre. Recuerda subir tu imagen a una web que te permita obtener un enlace directo. Te darás cuenta si al final de la dirección web te muestra el nombre de la imagen y la extensión que tiene (png, jpg, etc). Uno de tantos sitios que te permiten hacer esto es imgbb.com. Cuando subes una imagen a la web, da la opción de obtener un enlace directo:

Igualmente, para añadir imágenes con animación (imágenes GIF) es el mismo proceso. Los gifs se reproducirán automáticamente al cargarse la página. Si se repiten infinitamente o no, es una configuración dentro de la imagen gif y debe ser modificado con algún editor. Este curso no cubre dicho aspecto.

Más adelante veremos cómo usar imágenes que estén almacenadas en nuestro equipo.

Cómo incluir vídeos

Hay muchas maneras para esto, pero aquí veremos la más sencilla. Sólo tienes que subir un vídeo a youtube o usar uno que ya esté subido. Debajo del reproductor verás un botón que dice compartir, y ahí encontrarás una opción que dice incorporar:

Te presenta varias opciones, entre las cuales puedes poner en qué punto quieres que se reproduzca el vídeo y si quieres que se vean o no los controles del reproductor.

Cuando estés listo dale a copiar. Ya solo tendrás que pegar en tu documento de Ficdown el texto, y magia, ya tienes el vídeo incrustado en tu juego.

En la siguiente clase haremos un repaso de toda la sintaxis de Ficdown que hemos visto hasta ahora, porque sí, ya hemos visto todo lo básico sobre este precioso lenguaje para crear Ficción Interactiva en tan solo unas pocas clases.


<<CLASE ANTERIOR
CLASE SIGUIENTE>>


¿Quieres saber más? ¡Déjate atrapar por las redes!

Comparte este artículo: