BRIEF

¿Qué es STORYTELLERS?

STORYTELLERS son proyectos que buscan contar historias culturales locales a través de narrativas que incluyen cuentos, datos, y relatos, ayudando a conectar con la cultura de cada lugar. En este caso, lo hacen mediante recorridos por estaciones dentro de la ciudad, accedidas a través de códigos QR. El objetivo del proyecto es desarrollar una plataforma llamada STORYTELLERS que permita alojar múltiples narrativas. La plataforma estará basada en Strapi JS (API) y tendrá dos interfaces principales:

1. Interfaz general de STORYTELLERS: mostrará la organización y el servicio, además de una lista de proyectos con una página simple para cada uno.
2. Interfaz de cada narrativa: se adaptará al diseño específico de cada proyecto, reflejando la identidad y contenido particular de cada narrativa.

Interfaz general de STORYTELLERS

Es un sitio simple con páginas como:

• ABOUT: Información sobre el servicio.
• CREAR: Opción para crear una narrativa.
• CONTACT FORM: Formulario de contacto.
• POLÍTICAS: Información sobre términos y condiciones. El objetivo principal es guiar a los usuarios hacia las narrativas, permitirles crear una en su ciudad y contactarnos.

Interfaz de la narrativa

Cada narrativa tendrá su propia interfaz, adaptada a su lógica y diseño. En el caso de Montevideo, la narrativa se llama MURALLA, ubicada en la Ciudad Vieja. Cuenta con 9 puntos de interés y se destaca por incluir un plano en 3D, además de contenidos multimedia como videos, imágenes, gifs y audios. Ambas interfaces estarán unificadas por un diseño de cabecera, que cambia sutilmente en color y transiciones entre logotipos. Las plataformas estarán disponibles en tres idiomas: ES, PT y EN.

Tecnologías a utilizar

• Strapi JS + Plugin QR
• React JS
• Node JS
• Tailwind CSS
• GitHub

Flujo de Usuario (User Flow)

Interfaz de narrativa

• Desde el teléfono: El usuario escanea un código QR y accede al contenido asociado. El audio se reproduce automáticamente y el texto se despliega junto a imágenes y otros recursos. El usuario puede usar el mapa para dirigirse a otros puntos del recorrido.
• Desde la computadora: El usuario navega por un mapa principal con los contenidos georreferenciados y accede al mismo contenido disponible en dispositivos móviles.

Arquitectura de información

A continuación, se describen los campos de cada contenido, divididos en lo que corresponde al proyecto general y lo que es particular de una narrativa.

Contenidos generales de STORYTELLERS

1. About
   1. Párrafo
   2. Imagen
2. Crear
   1. Párrafo
   2. Imagen
   3. Botón de contacto
3. Contact Form
   1. Nombre
   2. Correo electrónico
   3. Mensaje
   4. País
   5. Ciudad
4. Políticas
   1. Párrafo

Recorrido o Narrativa

1. Menú Recorrido / Narrativas
   1. Sinopsis: Párrafo (Requerido)
   2. Autores: La Mano Estudio (Requerido)
   3. Carátula: Imagen para fondo (Requerido)
   4. Créditos
      1. Lista de nombres + función (Requerido)
      2. Logos de apoyo (SVG o vector) (Opcional)
   5. Contacto: Correo electrónico (Requerido)
      1. Nombre (Requerido)
      2. Correo (Requerido)
      3. Mensaje (Requerido)
   6. Accesibilidad
      1. Párrafo
2. Intro Recorrido / Narrativa (Requerido)
   1. Título
   2. Logo (SVG o vector)
   3. Paleta de colores (Requerido)
      1. Color 1: #
      2. Color 2: #
      3. Color 3: #
   4. Texto de introducción de la narrativa: Párrafo
   5. Audio (texto en el punto 3)
   6. Carátula: Imagen de fondo
   7. Mapa / 3D
3. Estación
   1. Título de la estación (Requerido)
   2. Fecha de la anécdota (Requerido)
   3. Ubicación: Coordenadas (Requerido)
   4. Anécdota
      1. Intro:
         1. Párrafo 1 (Requerido)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
         2. Párrafo 2 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
         3. Párrafo 3 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
      2. Desarrollo:
         1. Párrafo 1 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
         2. Párrafo 2 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
         3. Párrafo 3 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
      3. Conclusión:
         1. Párrafo 1 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
         2. Párrafo 2 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
         3. Párrafo 3 (Opcional)
            1. Párrafo
            2. Imagen
            3. 3D
            4. Video
4. Contenidos adicionales (Opcionales)
   1. Título
   2. Párrafo
   3. Audio (asociado al párrafo del punto 2)
   4. Imagen
   5. Video o GIF Las maquetas están disponibles en Figma.

English Version

What is STORYTELLERS?

STORYTELLERS are projects that aim to tell local cultural stories through narratives, including tales, facts, and accounts, helping people connect with and learn more about the local culture. In this case, these stories are told through city-based stations accessed via QR codes. The project's goal is to develop a platform called STORYTELLERS that can host multiple narratives. The platform will be based on Strapi JS (API) and will feature two main interfaces:

1. STORYTELLERS General Interface: This will display the organization, the service, and a list of projects, each with a simple page.
2. Narrative Interface: This interface will adapt to the specific design of each project, reflecting its unique identity and content.

STORYTELLERS General Interface

This is a simple site with pages such as:

• ABOUT: Information about the service.
• CREATE: Option to create a narrative.
• CONTACT FORM: Contact form.
• POLICIES: Terms and conditions. The main goal is to guide users to enter the narratives, create one in their own city, and contact us.

Narrative Interface

Each narrative will have its own interface, adapted to its unique logic and design. For example, the Montevideo narrative, called MURALLA, is located in the Ciudad Vieja. It features 9 points of interest and includes a 3D map, along with multimedia content like videos, images, GIFs, and audio. Both interfaces will be unified by a header design that subtly changes in color and logo transitions. The platform will be available in three languages: ES, PT, and EN.

Technologies to Use

• Strapi JS + QR Plugin
• React JS
• Node JS
• Tailwind CSS
• GitHub

User Flow

Narrative Interface

• From the phone: The user scans a QR code and accesses the associated content. The audio plays automatically, and the text unfolds along with images and other media. The user can use the map to navigate to other points of the tour.
• From the computer: The user navigates through a main map with geo-referenced content and accesses the same content as on mobile devices.

Information Architecture

Below is a breakdown of the content fields, divided into those related to the overall project and those specific to each narrative.

General Storytellers Content

1. About
   1. Paragraph
   2. Image
2. Create
   1. Paragraph
   2. Image
   3. Contact button
3. Contact Form
   1. Name
   2. Email
   3. Message
   4. Country
   5. City
4. Policies
   1. Paragraph

Tour or Narrative

1. Tour Menu / Narratives
   1. Synopsis: Paragraph (Required)
   2. Authors: La Mano Estudio (Required)
   3. Cover Image: Background image (Required)
   4. Credits
      1. List of names + role (Required)
      2. Support logos (SVG or vector) (Optional)
   5. Contact: Email (Required)
      1. Name (Required)
      2. Email (Required)
      3. Message (Required)
   6. Accessibility
      1. Paragraph
2. Tour Intro / Narrative (Required)
   1. Title
   2. Logo (SVG or vector)
   3. Color Palette (Required)
      1. Color 1: #
      2. Color 2: #
      3. Color 3: #
   4. Introduction text: Paragraph
   5. Audio (text from point 3)
   6. Cover image: Background image
   7. Map / 3D
3. Station
   1. Station title (Required)
   2. Date of the anecdote (Required)
   3. Location: Coordinates (Required)
   4. Anecdote
      1. Introduction:
         1. Paragraph 1 (Required)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
         2. Paragraph 2 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
         3. Paragraph 3 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
      2. Development:
         1. Paragraph 1 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
         2. Paragraph 2 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
         3. Paragraph 3 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
      3. Conclusion:
         1. Paragraph 1 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
         2. Paragraph 2 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
         3. Paragraph 3 (Optional)
            1. Paragraph
            2. Image
            3. 3D
            4. Video
4. Additional Content (Optional)
   1. Title
   2. Paragraph
   3. Audio (related to the paragraph from point 2)
   4. Image
   5. Video or GIF The wireframes can be found on Figma.

Version Française

Qu'est-ce que STORYTELLERS ?

STORYTELLERS sont des projets visant à raconter des histoires culturelles locales à travers des récits, incluant des contes, des faits et des anecdotes, pour aider les gens à se connecter et à mieux comprendre la culture locale. Dans ce cas, ces récits sont diffusés via des stations dans la ville, accessibles grâce à des codes QR. Le but du projet est de développer une plateforme appelée STORYTELLERS, qui pourra héberger plusieurs récits. La plateforme sera basée sur Strapi JS (API) et comprendra deux interfaces principales :

1. Interface générale de STORYTELLERS : Elle présentera l'organisation, le service, ainsi qu'une liste de projets, chacun avec une page simple.
2. Interface de la narration : Cette interface sera adaptée au design spécifique de chaque projet, reflétant son identité et son contenu particulier.

Interface générale de STORYTELLERS

C'est un site simple avec des pages telles que :

• À PROPOS : Informations sur le service.
• CRÉER : Option pour créer un récit.
• FORMULAIRE DE CONTACT : Formulaire de contact.
• POLITIQUES : Informations sur les conditions générales. Le principal objectif est de guider les utilisateurs vers les récits, leur permettre de créer un récit dans leur ville et de nous contacter.

Interface de la narration

Chaque narration aura sa propre interface, adaptée à sa logique et à son design unique. Par exemple, le récit de Montevideo, appelé MURALLA, est situé dans la Ciudad Vieja. Il comporte 9 points d'intérêt et inclut une carte en 3D, ainsi que du contenu multimédia comme des vidéos, des images, des GIFs et des audios. Les deux interfaces seront unifiées par un design d'en-tête qui change subtilement en termes de couleur et de transitions de logo. Les plateformes seront disponibles en trois langues : ES, PT et EN.

Technologies à utiliser

• Strapi JS + Plugin QR
• React JS
• Node JS
• Tailwind CSS
• GitHub

Parcours Utilisateur (User Flow)

Interface de la narration

• Depuis le téléphone : L'utilisateur scanne un code QR et accède au contenu associé. L'audio se lance automatiquement, et le texte s'affiche avec des images et d'autres médias. L'utilisateur peut utiliser la carte pour se rendre à d'autres points de la visite.
• Depuis l'ordinateur : L'utilisateur navigue sur une carte principale avec du contenu géoréférencé et accède aux mêmes informations que sur les appareils mobiles.

Architecture de l'information

Ci-dessous sont décrits les champs de chaque contenu, divisés en ce qui est propre au projet général et à chaque narration spécifique.

Contenus généraux de STORYTELLERS

1. À propos
   1. Paragraphe
   2. Image
2. Créer
   1. Paragraphe
   2. Image
   3. Bouton de contact
3. Formulaire de contact
   1. Nom
   2. Email
   3. Message
   4. Pays
4. Ville
5. Politiques
   1. Paragraphe

Parcours ou Narration

1. Menu du parcours / Narrations
   1. Synopsis : Paragraphe (Requis)
   2. Auteurs : La Mano Estudio (Requis)
   3. Couverture : Image d’arrière-plan (Requis)
   4. Crédits
      1. Liste des noms + rôle (Requis)
      2. Logos de soutien (SVG ou vectoriel) (Optionnel)
   5. Contact : Email (Requis)
      1. Nom (Requis)
      2. Email (Requis)
      3. Message (Requis)
   6. Accessibilité
      1. Paragraphe
2. Intro du parcours / Narration (Requis)
   1. Titre
   2. Logo (SVG ou vectoriel)
   3. Palette de couleurs (Requis)
      1. Couleur 1 : #
      2. Couleur 2 : #
      3. Couleur 3 : #
   4. Texte d'introduction du récit : Paragraphe
   5. Audio (texte du point 3)
   6. Image de couverture : Image d'arrière-plan
   7. Carte / 3D
3. Station
   1. Titre de la station (Requis)
   2. Date de l'anecdote (Requis)
   3. Emplacement : Coordonnées (Requis)
   4. Anecdote
      1. Introduction :
         1. Paragraphe 1 (Requis)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
         2. Paragraphe 2 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
         3. Paragraphe 3 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
      2. Développement :
         1. Paragraphe 1 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
         2. Paragraphe 2 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
         3. Paragraphe 3 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
      3. Conclusion :
         1. Paragraphe 1 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
         2. Paragraphe 2 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
         3. Paragraphe 3 (Optionnel)
            1. Paragraphe
            2. Image
            3. 3D
            4. Vidéo
4. Contenus additionnels (Optionnels)
   1. Titre
   2. Paragraphe
   3. Audio (lié au paragraphe du point 2)
   4. Image
   5. Vidéo ou GIF Les maquettes sont disponibles sur Figma.