Docs Documentación

Inicio rápido

Telar es un marco de computación mínima para crear narrativas visuales interactivas. Entreteje imágenes de alta resolución, texto narrativo e información contextual en capas para crear experiencias de scrollytelling, alojadas de forma gratuita en GitHub Pages.

Este tutorial te guía paso a paso por la creación de tu primera exhibición en cuatro pasos:

  1. Configura tu sitio — Configura tu repositorio en GitHub, hoja de cálculo de Google y archivo de configuración
  2. Planea tu narrativa — Aprende cómo se conectan las historias, los pasos y los paneles
  3. Agrega tu contenido — Sube imágenes, llena tu hoja de cálculo y crea tu primera historia
  4. Revisa y perfecciona — Establece las coordenadas de las imágenes, revisa tu sitio y dale los toques finales

Una exhibición en Telar se compone de historias — narrativas visuales paso a paso construidas alrededor de imágenes de alta resolución. Cada historia se desarrolla a través de una serie de pasos. Cada paso hace zoom en una región de una imagen y presenta una pregunta con una respuesta breve. Quienes quieran más pueden abrir paneles en capas — secciones expandibles con texto más extenso, medios incrustados o widgets interactivos. Vamos a ver esto con más detalle cuando lleguemos al Paso 2: Planea tu narrativa. Pero primero, necesitamos configurar lo básico.

Configura tu sitio

En este primer paso vas a configurar tres cosas: un repositorio en GitHub para tu sitio, una hoja de cálculo en Google Sheets para tu contenido y un archivo de configuración para conectarlos. A medida que avanzas, vas a ingresar algunos datos — tu nombre de usuario de GitHub, el enlace de tu hoja de cálculo, un título para tu sitio. Al final de esta página, vas a descargar un archivo de configuración listo para usar.

Vas a necesitar:

¿Ya conoces GitHub Pages y YAML? Puedes configurar todo manualmente con la guía de configuración manual.

La configuración puede parecer muchos pasos, pero solo tienes que hacerla una vez. Después de eso, todo se maneja desde tu hoja de cálculo de Google Sheets.

Crea tu repositorio

Un repositorio es el espacio de tu proyecto en GitHub — allí se guardan tu archivo de configuración y tus imágenes.

  1. Visita la plantilla de Telar
  2. Haz clic en el botón verde Use this template
  3. Elige Create a new repository
  4. Dale un nombre a tu repositorio — usa solo letras minúsculas y guiones (ej., mi-exhibicion) — este nombre será parte de la dirección web de tu sitio
  5. Asegúrate de que Public esté seleccionado
  6. Haz clic en Create repository

Captura de GitHub: botón Use this template

Mantén tu repositorio público. Los repositorios privados no funcionan con GitHub Pages a menos que tengas un plan de pago en GitHub.

Ingresa tus datos de GitHub a continuación. Se usan para construir la dirección web de tu sitio y para generar tu archivo de configuración al final.

Tus datos de GitHub
Tu sitio estará en:
https://usuario.github.io/mi-exhibicion

Activa GitHub Pages

GitHub Pages convierte tu repositorio en un sitio web en vivo, de forma gratuita.

  1. En tu repositorio, ve a Settings → Pages
  2. En Source, selecciona GitHub Actions
  3. Haz clic en Save

Configuración de GitHub Pages con GitHub Actions

Duplica la plantilla de Google Sheets

Tu hoja de cálculo de Google Sheets es donde manejas todo tu contenido — objetos, historias y textos.

  1. Abre https://bit.ly/telar-template
  2. Haz clic en Archivo → Hacer una copia
  3. Guárdala en tu Google Drive con un nombre que recuerdes (ej., “Mi exhibición Telar”)

Comparte y publica tu hoja de cálculo

Tu hoja de cálculo necesita dos tipos de acceso para que Telar pueda leer tu contenido.

Comparte tu hoja de cálculo:

  1. Haz clic en el botón Compartir en Google Sheets
  2. Configura el acceso como “Cualquier persona con el enlace” con permisos de Lector
  3. Copia la URL compartida y pégala a continuación

Publica tu hoja de cálculo:

  1. Ve a Archivo → Compartir → Publicar en la Web
  2. Haz clic en Publicar
  3. Copia la URL publicada y pégala a continuación
Tus URLs de Google Sheets
La URL del cuadro de diálogo Compartir (acceso de Lector)
Desde Archivo → Compartir → Publicar en la Web. Es una URL diferente a la anterior.

Genera tu configuración

Completa los datos restantes y esta página creará tu archivo de configuración.

Datos del sitio
El nombre de tu sitio, visible en la pestaña del navegador y en el encabezado
Se usa para metadatos de motores de búsqueda y vistas previas en redes sociales
Controla la paleta de colores y el estilo visual de tu sitio

Tu _config.yml

Una vez generado:

  1. En tu repositorio de GitHub, navega a _config.yml y haz clic en el ícono de lápiz para editar
  2. Selecciona todo el contenido existente y reemplázalo con lo que copiaste o descargaste
  3. Haz clic en Commit changes para guardar

Verifica tu configuración

Después de guardar, GitHub Actions construirá y publicará tu sitio automáticamente. Esto toma entre 2 y 5 minutos.

  1. Haz clic en la pestaña Actions para ver el progreso de la construcción
  2. Cuando termine, visita tu sitio en la URL que aparece en la vista previa arriba
  3. Deberías ver un sitio Telar con tu título y el contenido de demostración predeterminado

Página de inicio de Telar con título y menú de navegación

¿Problemas con la construcción? Los errores más comunes son URLs de Google Sheets que no coinciden (necesitas tanto la URL compartida como la URL publicada — son diferentes). Si tu sitio no aparece, revisa la pestaña Actions para ver los detalles del error. También puedes pegar tu _config.yml en el Validador de configuración de Telar para verificar errores.

Próximos pasos

Tu sitio Telar ya está funcionando. Sigue este tutorial para aprender cómo funcionan las historias de Telar y agregar tu propio contenido, o salta a la sección que quieras: