> ## Documentation Index
> Fetch the complete documentation index at: https://docs.missions.eutika.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Interfaz de diseño visual y centrada en la experiencia de aprendizaje

export const VideoCard = ({videoSrc, title}) => {
  return <div style={{
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    margin: '2rem 0'
  }}>
      <style>{`
        .video-card {
          width: 100%;
          max-width: 84%;
          border-radius: 12px;
          overflow: hidden;
          border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .video-card-header {
          padding: 10px 16px;
          margin: 0;
          text-align: center;
        }

        .video-card-title {
          margin: 0;
          font-size: 13px;
          font-weight: 400;
          color: inherit;
          font-family: inherit;
        }

        .video-card video {
          width: 100%;
          display: block;
          margin: 0;
          aspect-ratio: 16 / 9;
          object-fit: cover;
        }

        /* Modo Oscuro */
        .dark .video-card {
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: #000000;
        }

        .dark .video-card-title {
          color: inherit;
        }
      `}</style>

      <div className="video-card">
        <div className="video-card-video-wrapper">
          <video src={videoSrc} autoPlay loop muted playsInline />
        </div>
        
        {title && <div className="video-card-header">
            <h3 className="video-card-title">{title}</h3>
          </div>}
      </div>
    </div>;
};

En la plataforma de Missions existen **diferentes roles** (en ocasiones un mismo usuario puede asumir varios): **diseñador, acompañador y evaluador, aprendedor y administrador**. En contextos educativos, el profesor juega los roles de diseñador (creando las misiones) y de mentor (acompañando y evaluando al estudiante).

La interfaz de diseño de Missions está enfocada en facilitar la **creación de  experiencias *seamless*, enfocadas al *engagement* y acompañamiento del aprendedor y conectadas directamente con los objetivos de aprendizaje**.

Para lograrlo, la plataforma facilita que **el diseñador siga un journey en que utiliza de forma flexible las diferentes funciones de la plataforma y puede reutilizar y recombinar recursos** (como diseños de perfiles, funciones, misiones o itinerarios) desarrollados previamente por ellos mismos o por otras personas de su organización.

<img className="block dark:hidden mx-auto" src="https://mintcdn.com/eutika/2sI3PKu15RM5-ujn/images/light/20-proceso-de-creacion-de-una-mision-claro.png?fit=max&auto=format&n=2sI3PKu15RM5-ujn&q=85&s=f1f025cce6aee81063512eb068c03175" alt="Journey del diseñador" title={true} width="758" height="388" data-path="images/light/20-proceso-de-creacion-de-una-mision-claro.png" />

<img className="hidden dark:block mx-auto" src="https://mintcdn.com/eutika/wciXDzqVuDWfmhzt/images/dark/20-proceso-de-creacion-de-una-mision-oscuro.png?fit=max&auto=format&n=wciXDzqVuDWfmhzt&q=85&s=35b2d7f893e70b5a22ec3370d50008fb" alt="Journey del diseñador" title={true} width="760" height="388" data-path="images/dark/20-proceso-de-creacion-de-una-mision-oscuro.png" />

La interfaz **está inspirada y ofrece una experiencia similar a la de las plataformas Miro y Notion**. En este sentido, **diseñar se convierte en un proceso visual e interactivo** donde por ejemplo una misión se compone de iconos gráficos que representan las diferentes etapas de la experiencia (inicio, fin, etapa de acción, bifurcación …). 

<VideoCard videoSrc="/videos/canvas-mision.mp4" title="Canvas de edicion de etapas" />

Del mismo modo los menús contextuales **permiten crear y editar contenidos que combinan textos, imágenes y otros recursos de forma flexible**.