¡Twine 2: Donde tus historias cobran vida y tú decides el destino!
TWINE
HISTORIAS INTERACTIVAS
Empezar
Aprende a diseñar historias emocionantes donde tú decides el destino. Con herramientas de programación fáciles de usar, podrás agregar imágenes y efectos sorprendentes.
10
IR
Código de colores
Hola, Aventurero!
Subir imagenes y obtener la url para insertarla en el código
IR
Aquí encontrarás una colección de enlaces increíbles para ayudarte a dominar Twine 2 y crear historias interactivas asombrosas. Estos recursos han sido seleccionados especialmente para ti, para que puedas aprender, explorar y divertirte mientras das vida a tus ideas.
IR
Editor Pixel Art
IR
Buscador de imágenes
CHAT GPT
IA para colaborar
¡Próximo Capítulo!
COPILOT
10
¿Listo para comenzar? ¡Haz clic en el enlace a Twine y deja que la magia comience!
IR A TWINE 2
Importante: No cambies de PC, ya que tus proyectos quedarán guardados en la computadora que estés utilizando.
10
Crear una nueva historia
Menú principal
Crear contenido nuevos pasajes.
¡Dale vida a tus ideas y comienza una nueva aventura interactiva!
Organiza tu historia y crea el menú principal con facilidad.
Expande tu historia añadiendo nuevos caminos y eventos.
Imágenes
Fondos
Videotutoriales
Personaliza tu historia con imágenes envolventes.
Añade imágenes, bordes y fondo sólido.
Domina Twine con estos tutoriales paso a paso.
10
Creamos una nueva Historia
¡Dale vida a tus ideas y comienza una nueva aventura interactiva!
- Clic en "New +"
- Agregar el titulo para nuestra historia.
- Clic en "Create"
10
Clic sobre la imagen para ampliar
Clic sobre la imagen para ampliar
Menu Principal: Primer pasaje
Botones en el menú Principal
Añadimos los botones al Menu Principal. Puedes copiar y pegar este código:
El Menú Principal es el punto de partida de tu aventura. Aquí puedes elegir entre diferentes opciones para comenzar tu viaje
10
Editamos los nuevos pasajes
Sigue estos pasos para dar vida a tu aventura
Haz clic en cualquier pasaje para editar su contenido.
¡Es Hora de Probar tu Creación!
10
Clic sobre la imagen para ampliar
Clic sobre la imagen para ampliar
Añadir imágen de fondo
Personaliza tu historia con imágenes envolventes.
Código
10
Fondo sólido
Tipos de bordes
+info
+info
Borde al cuadro de texto
Fuentes
+info
+info
10
Botón con imagen
Coloca botones
Código
<img src = "link de imagen" width="100" height="30">|
10
BORDES
Los bordes son líneas que se dibujan alrededor de un elemento (como un cuadro de texto o una imagen) para definir su contorno o separarlo de otros elementos. VENTAJAS Estilo y estética: Los bordes no solo ayudan a definir el espacio, sino que también añaden un aspecto visual atractivo a la interfaz. Jerarquía visual: Los bordes ayudan a destacar o separar elementos, mejorando la organización y la navegación.
FUENTES
Las fuentes son uno de los aspectos clave en el diseño de páginas web, ya que afectan la legibilidad, la estética y la experiencia del usuario. Se dividen en fuentes genéricas (como Arial, Tahoma) y fuentes personalizadas (que puedes cargar desde fuentes externas como Google Fonts). Cuando defines una fuente en tu página web, puedes especificar una lista de fuentes en orden de preferencia, donde el navegador usará la primera fuente disponible en el sistema del usuario. Si no está disponible, buscará la siguiente en la lista.
Borde cuadro de texto
Cuando aplicamos bordes al cuadro de texto en el diseño web, estamos añadiendo una línea alrededor del campo de entrada (como un formulario o área de texto) para definir su contorno y mejorar su visibilidad. Los bordes pueden ser simples o personalizados según el estilo que desees darle a la interfaz. GROSOR DEL BORDE
- thin: Borde delgado.
- medium: Borde de grosor medio.
- thick: Borde grueso.
- px: Puedes especificar un grosor en píxeles, como 2px, 5px, etc.
Historias Interactivas en Twine 2
Erica De Pacheco
Created on March 1, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Corporate CV
View
Interactive Onboarding Guide
View
Higher Education Teaching Microsite
View
Modern microsite mobile
View
Basic Shapes Microsite
View
Basic Interactive Microsite
View
Beauty catalog mobile
Explore all templates
Transcript
¡Twine 2: Donde tus historias cobran vida y tú decides el destino!
TWINE
HISTORIAS INTERACTIVAS
Empezar
Aprende a diseñar historias emocionantes donde tú decides el destino. Con herramientas de programación fáciles de usar, podrás agregar imágenes y efectos sorprendentes.
10
IR
Código de colores
Hola, Aventurero!
Subir imagenes y obtener la url para insertarla en el código
IR
Aquí encontrarás una colección de enlaces increíbles para ayudarte a dominar Twine 2 y crear historias interactivas asombrosas. Estos recursos han sido seleccionados especialmente para ti, para que puedas aprender, explorar y divertirte mientras das vida a tus ideas.
IR
Editor Pixel Art
IR
Buscador de imágenes
CHAT GPT
IA para colaborar
¡Próximo Capítulo!
COPILOT
10
¿Listo para comenzar? ¡Haz clic en el enlace a Twine y deja que la magia comience!
IR A TWINE 2
Importante: No cambies de PC, ya que tus proyectos quedarán guardados en la computadora que estés utilizando.
10
Crear una nueva historia
Menú principal
Crear contenido nuevos pasajes.
¡Dale vida a tus ideas y comienza una nueva aventura interactiva!
Organiza tu historia y crea el menú principal con facilidad.
Expande tu historia añadiendo nuevos caminos y eventos.
Imágenes
Fondos
Videotutoriales
Personaliza tu historia con imágenes envolventes.
Añade imágenes, bordes y fondo sólido.
Domina Twine con estos tutoriales paso a paso.
10
Creamos una nueva Historia
¡Dale vida a tus ideas y comienza una nueva aventura interactiva!
10
Clic sobre la imagen para ampliar
Clic sobre la imagen para ampliar
Menu Principal: Primer pasaje
Botones en el menú Principal
Añadimos los botones al Menu Principal. Puedes copiar y pegar este código:
El Menú Principal es el punto de partida de tu aventura. Aquí puedes elegir entre diferentes opciones para comenzar tu viaje
10
Editamos los nuevos pasajes
Sigue estos pasos para dar vida a tu aventura
Haz clic en cualquier pasaje para editar su contenido.
¡Es Hora de Probar tu Creación!
10
Clic sobre la imagen para ampliar
Clic sobre la imagen para ampliar
Añadir imágen de fondo
Personaliza tu historia con imágenes envolventes.
Código
10
Fondo sólido
Tipos de bordes
+info
+info
Borde al cuadro de texto
Fuentes
+info
+info
10
Botón con imagen
Coloca botones
Código
<img src = "link de imagen" width="100" height="30">|
10
BORDES
Los bordes son líneas que se dibujan alrededor de un elemento (como un cuadro de texto o una imagen) para definir su contorno o separarlo de otros elementos. VENTAJAS Estilo y estética: Los bordes no solo ayudan a definir el espacio, sino que también añaden un aspecto visual atractivo a la interfaz. Jerarquía visual: Los bordes ayudan a destacar o separar elementos, mejorando la organización y la navegación.
FUENTES
Las fuentes son uno de los aspectos clave en el diseño de páginas web, ya que afectan la legibilidad, la estética y la experiencia del usuario. Se dividen en fuentes genéricas (como Arial, Tahoma) y fuentes personalizadas (que puedes cargar desde fuentes externas como Google Fonts). Cuando defines una fuente en tu página web, puedes especificar una lista de fuentes en orden de preferencia, donde el navegador usará la primera fuente disponible en el sistema del usuario. Si no está disponible, buscará la siguiente en la lista.
Borde cuadro de texto
Cuando aplicamos bordes al cuadro de texto en el diseño web, estamos añadiendo una línea alrededor del campo de entrada (como un formulario o área de texto) para definir su contorno y mejorar su visibilidad. Los bordes pueden ser simples o personalizados según el estilo que desees darle a la interfaz. GROSOR DEL BORDE