ANEXO 1: ¿CÓMO UTILIZAR TWINE? 

 

 
 
 
   

OCTUBRE 2018 
  

INTRODUCCIÓN 
 
 
El  siguiente  documento  presenta  Twine  y  explica  cómo  utilizarla.  A  continuación  se  copia  un 
índice de contenidos para facilitar la búsqueda de material: 
 
¿Qué es Twine? 

¿Y eso qué significa? 

¿Cómo descargo y creo mi primer proyecto? 

¿Qué es un pasaje y cómo lo creo? 

¿Cómo nombro un pasaje y porque necesito ponerle nombre? 

¿Cómo cargo texto y le doy formato? 

¿Cómo conecto dos pasajes? 

¿Cómo exporto un proyecto? 

¿Cómo agrego una imagen? 

¿Cómo agrego un video? 

¿Cómo agrego música o un audio? 

 
 
 

   

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 1 

  

BIENVENIDOS A TWINE 
 
 

¿Qué es Twine? 
Twine​ es una herramienta de código abierto para contar historias interactivas no lineales. 

¿Y eso qué significa? 

Esto  significa  que  con  un  poco  de  tiempo  y  creatividad  uno  puede  crear  desde  cuentos  del  tipo 
Elige  tu  Propia  Aventura  hasta  juegos  complejos  e  inmersivos  (¡aunque  para  eso  vamos  a 
necesitar un poco más de tiempo y creatividad!). 

¿Cómo descargo y creo mi primer proyecto? 

¡Llegó el momento!  
1. ​Descargar​ de la ​página web de Twine​, el instalador del sistema operativo que corresponda: 
 

 
Página web: ​http://www.twinery.org 
 
2. Seguir los pasos de instalación.  
3. Una vez instalado el programa, ​abrirlo​. 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 2 

  

 
4.  Para  ​crear  una  nueva  historia​, seleccionar el botón verde que se encuentra en la zona derecha 
y que contiene el texto “​+ Historia​” 

 
 
5. Elegir un nombre para el proyecto y hacer CLICK en “​+ Añadir​”.  
 

No  es  necesario  que  el  nombre  del  proyecto  sea  el  definitivo.  El  mismo  se  puede  cambiar  en  cualquier 
momento.  Se recomienda no usar signos especiales como los de puntuación, interrogación o incluso tildes 
  ya que el archivo generado lo reemplazará por “_”.  

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 3 

  

 
 
¡Bienvenidos al proyecto! Ahora es el momento de crear la historia. 
 

 
 

¿Qué es un pasaje y cómo lo creo? 

Un  pasaje  sería  el  equivalente  a  una  página  en  un  libro  o  una  web.  Para  crear  un  pasaje  nuevo 

hacer  CLICK  en    que  se  encuentra  en  la  esquina  inferior  derecha.  El  pasaje  creado  se 
podrá visualizar en el cuerpo de la aplicación: 

Para b
​ orrarlo ​hacer CLICK sobre el mismo y selecciónar  
Para que la historia empiece en ese pasaje, seleccionar y elegir “​Start story here​” 
ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 4 
  

Para e
​ ditarlo h
​ acer DOBLE CLICK sobre el mismo:  

¿Cómo nombro un pasaje y porque necesito ponerle nombre? 

Los  pasajes  tienen  nombre  para  que puedan ser identificados. Cuando quiera encontrarlo o crear 
un  link  al  pasaje  usaré  su  nombre.  Para  nombrar  un  pasaje  hacer  DOBLE  CLICK  en  el  mismo  y 
escribir su nombre en la línea superior del recuadro emergente..  
 

Se  recomienda  definir  los  nombres  de  cada  pasaje  previo  a  la  creación  de  los  mismos  para  evitar  la 
  pérdida de tiempo por retrabajos. Es recomendable que el nombre sea representativo y conciso. 

  

¿Cómo cargo texto y le doy formato? 

El pasaje funciona como un editor de texto normal. Al hacer CLICK en el cuerpo del mismo uno 
puede escribir normalmente o copiar y pegar textos.  

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 5 

  

 
Notará que no hay botones para agregar estilos en negrita o cursiva a su texto en Twine, como en 
un  procesador  de  texto. En cambio, los formatos de historia de Twine usan caracteres especiales 
para transmitir información de estilo. A continuación se copian los formatos más comunes: 
 
 
Negrita  **Negrita** 

Cursiva  *Cursiva* 

Subrayado  <u>Subrayado</u> 
Superíndice 
^^superíndice^^ 
 

Resultado: 

 
 

Twine  Harlowe  usa  formato  Markdown  por  lo  que  soporta  todos  los  tipos de formatos 
  incluidos en Markdown. Para acceder a más información hac​er C ​ LICK aquí​. 

¿Cómo conecto dos pasajes? 

A continuación se presenta un diagrama ilustrativo del concepto de conexión entre pasajes: 
 
La  abuela  le  preguntará  a  su  nieto  qué  tipo  de  torta desea para su cumpleaños y el lector deberá 
elegir entre torta de chocolate y frutillas. El diagrama resultante debería verse así: 
 
ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 6 
  

 
 
 
1. Cargar en el pasaje principal el siguiente texto: 
 
La abuela le preguntó al niño qué torta quería para su cumpleaños. El niño respondió: 
 
2. Para crear cada opción utilizar el siguiente código: 
 
[[​Frase que se lee -​>​Nombre del pasaje al que lleva el link​]] 
La ​Frase que se lee​ es aquella que el lector podrá ver en la página. 
El ​Nombre del pasaje al que lleva el link​ es el nombre del pasaje al que dirige el link. 
 
En nuestro caso: 
[[​Torta de chocolate​ ->​Cholate​]] 
[[​Torta de frutillas​ ->​Frutillas​]] 
 
3. Cerrar el pasaje. Se podrá observar que los pasajes de C ​ hocolate​ y ​Frutillas​ se crearon 
automáticamente. 
4. Abrir el pasaje de Chocolate y pegar el siguiente texto: 
 
Abuelita, ¡quiero torta de chocolate! 
 
5. Abrir el pasaje de Frutillas y pegar el siguiente texto: 
 
Abuelita, ¡quiero torta de frutillas! 

6. Probar el cuento interactivo haciendo CLICK en el botón:  

 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 7 

  

 
 

¿Cómo exporto un proyecto? 

Para exportar un proyecto y visualizarlo:  
1. Hacer CLICK en el nombre del proyecto en la zona inferior izquierda. 

 
 
2. Seleccionar la opción “Publicar a archivo”. 
 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 8 

  

 
3. Buscar  la  carpeta en la que hemos guardado todo los recursos (imágenes, videos, audios) 
y seleccionar el botón “Guardar”. 
 

 
 
Para visualizarlo ir a la carpeta y abrir el archivo que lleva el nombre del proyecto. 

 
 
 
 

   

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 9 

  

TWINE NIVEL 2 - ¡LAS COSAS SE PONEN INTERESANTES! 

 
 
¿Ya  probaste  las  funcionalidades  básicas  del  Twine  y  querés  ver  qué  más  se  puede  hacer?  En 
esta sección exploraremos más funcionalidades. 
 

¿Cómo agrego una imagen? 

¿Listos  para  un  poco  de  código?  Para  poder  cargar  una  imagen  en  nuestra  historia  debemos 
copiar la siguiente línea de código en el cuerpo del pasaje.  
 
<​img​​ ​src​=​"la URL de la imagen"​ ​height​=​"300"​>

A continuación se describen los elementos: 

Img​​: ​identifica que estaremos cargando una imagen. 
src​=​"la URL de la imagen"​:  entre  las  comillas  se  debe  pegar  la dirección donde se encuentra 
la imagen.  

● En  caso  de  usarlo  en  una  computadora  con  conexión a internet alcanza con copiar el link 

de la imagen.  
● En caso de usarlo de forma local (sin conexión a internet) seguir los siguientes pasos: 
 
1. Crear una carpeta del proyecto en Mis Documentos.  

2. Descargar  la  imagen  y  guardarla  en  la  carpeta.  Ponerle  un  nombre  simple  y  fácil  de 
recordar. 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 10 

  

3. En la línea de código utilizada en Twine tipear el nombre completo del archivo: 

src​=​"cabina.jpg" 

4. ¡Estamos  listos! Lamentablemente en el caso del trabajo si conexión se deberá exportar el 
proyecto  para  poder  previsualizarlo.  Para  ver  cómo  exportar  ir  a:  ​¿Cómo  exporto  un 
proyecto? 

height​=​"300"

Esta  porción  del  código  permite  especificar  la  altura  de  la  imagen.  A  continuación  se  presentan 
algunas formas de usar: 
 
No  incluirlo:  en  ese  caso  la  imagen  queda  en 
su tamaño original. 
<​img​​ ​src​=​"cabina.jpg"​> 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 11 

  

Incluirlo: le da el tamaño especificado.  

<​img​​ ​src​=​"cabina.jpg"​ ​height​=​"200"​> 

 
 

¿Cómo agrego un video?

En el caso de querer agregar un video de forma local (sin internet): 

1. Guardar el video en la carpeta. 

2. Copiar el siguiente código: 

<video width=​"400" controls> <source src=​"la URL de la imagen" type=​"video/mp4"​>
</video>

A continuación se describen los elementos: 

● src=​"la URL de la imagen"​: escribir entre las comillas el nombre del
archivo. En nuestro caso videoplantas.mp4
● type=​"video/mp4"​: define el formato del video (generalmente es mp4).
● width=​"400"​: determina el tamaño del video.

Como resultado:

<video width=​"400" controls> <source src=​"videoplantas.mp4" type=​"video/mp4"​>

</video>

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 12 

  

En el caso de querer agregar un video de YouTube: 

1. Entrar a YouTube y buscar el video en cuestión: 

 
2. Seleccionar el video y hacer CLICK en “Share” o “Compartir” 

 
3. Seleccionar la opción “Embed” o “Insertar” 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 13 

  

 
4. Copiar el código. 

 
5. Pegarlo  en  el  cuerpo  del  pasaje  y  probar  que  el  mismo  se  haya  cargado  correctamente 
haciendo CLICK en “Reproducir” 
 

 
 
 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 14 

  

¿Cómo agrego música o un audio?

En el caso de querer agregar un audio de forma local (sin internet): 
1. Guardar el audio en la carpeta. 

 
2. Copiar el siguiente código: 
 
<audio controls> <source src=​"nombre del archivo"​ type=​"audio/mpeg"​> </audio>

A continuación se describen los elementos: 

● src=​"nombre del archivo"​: incluir el nombre del archivo. En nuestro caso “musica.mp3” 
● type=​"audio/mpeg"​: en el caso de que sea formato .mp3 
● type=​"audio/wav"​: en el caso de que sea formato .wav 
 
Cómo resultado: 
<audio controls> <source src=​"musica.mp3"​ type=​"audio/mpeg"​> </audio> 

BIBLIOGRAFÍA 
 
 
 
● Página oficial de Twine. ​http://twinery.org/ 
● Wiki de Twine. ​http://twinery.org/wiki/ 
● Introducción a Twine. ​http://twinery.org/wiki/twine2:guide 

ESCRITORES DE CUENTOS INTERACTIVOS - ANEXO 1 | 15