Artículos sobre: Comienza con Bloom

Documentación Bloom (Cheatsheet)

En esta guía podrás encontrar la descripción de todos los componentes de Bloom, que puedes combinar para construir contenido mixto (expositivo, evaluativo y social con Learning Analytics) para tus cursos en línea.

Un contenido Bloom está compuesto de dos archivos principalmente: config.yaml y pages.yaml. Dentro de la sección de pages.yaml es posible crear múltiples páginas de contenido, que a su vez se construyen con diferentes bloques que llamamos "Átomos".

Para leer esta guía de componentes es importante tener en cuenta la siguiente nomenclatura:

Todos los componentes de Bloom inician con mayúscula, y utilizan necesariamente un guión medio y espacio al inicio, y dos puntos al final, como otras etiquetas dentro de Bloom. Ejemplo: - Audio:
Cuando un atributo o componente tiene como valor text, este valor corresponde a un texto (en muchos casos puede incluir etiquetas HTML).
Los atributos con valores number pueden tomar un valor numérico
Los atributos con valor layout incluyen una estructura de componentes de Bloom. De esta manera es posible construir componentes mixtos y más complejos.
Cuando se utilizan varias opciones dentro de un atributo, estas se separan con el caractér |, como por ejemplo opción 1 | opción 2 o true | false

Consulta los nuevos planes y precios disponibles para activar tu suscripción a Bloom.
¿Te interesa una capacitación in-company de Bloom? Contacta al Soporte de Yeira en: hola@yeira.training

Listado de Componentes:

Audio
Board
Button
Chat
Collapse
CycleThrough
Embed
Flush
Image
Label
Matrix
Modal
Note
Numeric
Outcomes
Question
Rating
Realtime
Results
Slides
Social
Sort
Steps
Survey
Table
Tabs
WordCloud
Youtube

Audio

Permite reproducir un archivo de audio mp3.

- Audio: audio.mp3

El archivo debe ubicarse en el folder /assets dentro del paquete de contenido Bloom.

Board

Es un componente social que permite mostrar un tablero con tarjetas de cada usuario.

- Board:
    id: B1
    singlePost: true | false
    previewPosts: true | false
    anonymous: true | false
    submitted: layout

El atributo id es requerido para poder registrar en el LRS los datos de cada interacción.

singlePost determina si los usuarios sólo pueden enviar un comentario true o varios false.

previewPosts permite a los usuarios comenzar a ver los resultados en el board antes de enviar un primer comentario true o bien sólo después de enviar su propio comentario false

anonymous esconde los nombres de cada usuario true o muestra quienes son los autores de cada comentario false.

Finalmente se puede agregar también un mensaje al final del tablero, agregando un layout dentro del atributo submitted.

Button

El componente Button permite crear un botón con diferentes acciones configurables.

- Button:
    src: file.ext
    action: first | prev | next | last
    action: Page ID
    action: https://URL.ext
    style: "CSS inline style"
    class: "Bulma Class"

El atributo src determina un archivo asociado al botón, lo que permite configurar la descarga de este archivo al dar clic en el botón.

El atributo action puede configurarse de tres maneras:

Utilizando las palabras clave first, prev, next y last para integrar una navegación de página en página dentro de contenidos Bloom.

Identificando directamente el id de una página de contenido de Bloom para saltar directamente a ella. Esta funcionalidad es útil para generar secuencias de contenido no lineales, como aprendizaje basado en escenarios.

Incluyendo una dirección web o URL completa, lo que permite que el botón se enlace a un contenido externo, en una pestaña adicional.

Adicionalmente a los atributos anteriores, el componente Button incluye como atributos style y class que permiten incluir CSS dedicado inline así como clases de la librería de CSS Bulma disponibles dentro de Bloom.

Chat

Un componente social de chat, que registra cada mensaje en el Learning Record Store (LRS) de Bloom, desde el mismo contenido.

- Chat:
    id: ID
    order: top

El atributo id registra un identificador único para relacionar los datos del chat en el LRS.

El atributo order permite modificar el formato del chat para admitir mensajes desde la parte superior con el valor top, en cuyo caso el chat funciona como foro o componente de comentarios. En caso de que se omita el atributo, o se configure con el valor bottom, el componente funcionará como un chat en el que los mensajes más recientes se ingresan y aparecen abajo de la ventana principal.

Collapse

Un elemento interactivo para desplegar contenido colapsado.

- Collapse:
    header: layout
    content: layout

Los atributos header y content se refieren a las secciones de contenido desplegado y oculto respectivamente, y pueden contener cualquier estructura de layout y componentes de Bloom.

CycleThrough

Este es un componente especial de tipo evaluativo, que permite que el usuario seleccione opciones dentro de una frase dando clic, o bien complete el texto en un campo libre, para construir un reactivo tipo fill the blanks.

- CycleThrough:

    id: ID
    points: number
    submitted: layout
    template: Frase con {} placeholders {}.

    options:

    - display:
      - text: option 1
      - text: option 2
      feedback:
        right: layout
        wrong: layout

    - display:
      - text: respuesta fill-the-blanks
      feedback:
        right: layout
        wrong: layout

Como todos los tipos de pregunta cuenta con atributos como id, y points, para almacenar las respuestas y asignar un puntaje dentro de un cuestionario. Adicionalmente cuenta con un atributo submitted, que permite incluir cualquier tipo de contenido a desplegar una vez que el usuario ha contestado la pregunta.

El atributo template contiene un patrón de frase con espacios marcados por llaves { } (llamados placeholders) que representan las secciones de la frase a responder.

Las opciones dentro del atributo options deben contener un número idéntico a los placeholders del patrón indicado en template.

Para usar el tipo de reactivo CycleThrough el cual ofrece al usuario una selección de opciones, se deben incluir dos o mas elementos dentro del contenido dentro del atributo - display: en cada opción. El primer elemento representa siempre la respuesta correcta.

En el caso de reactivos tipo Fill the blanks, en el cual se utiliza una caja de texto para que el usuario ingrese libremente la respuesta, sólo se marca un elemento dentro de - display:, que corresponde a la respuesta correcta dentro del reactivo. En este caso la respuesta es insensible a mayúsculas o minúsculas.

Para respuestas sin retroalimentación se puede omitir en cada opción el atributo feedback. Los atributos right y wrong permiten insertar un layout de contenido con cualquier tipo de elemento (como botones, otras preguntas o videos).

Embed

Este componente permite insertar elementos tipo embed provenientes de sitios externos.

- Embed: |
      <iframe></iframe>

En este componente se pueden insertar los iframes de contenido de herramientas externas. El componente se encarga de envolver en un elemento de HTML responsivo el iframe inserto. Es importante notar que la mejor forma de insertarlos es haciendo uso de un texto de múltiples líneas en YAML, que consiste en utilizar el caracter | para indicar que el siguiente segmento ocupa varios renglones.

Flush

Se trata de un componente de utilidad para borrar todos los eventos del LRS de un contenido, principalmente para hacer pruebas con contenidos mixtos. Sólo es visible por el administrador o autores en la plataforma, en la forma de un botón de acción.

- Flush:

Image

Permite la inserción de una imagen a tamaño completo. Dependiendo del tamaño de la pantalla, la imagen se dimensionará a su resolución máxima o menor, para que pueda visualizarse completamente en el dispositivo. El archivo de imagen debe ubicarse en el folder /assets dentro del paquete de contenido Bloom.

- Image: image.png

Label

Permite colocar un contenido content en una posición relativa. Es un componente utilizado dentro de contenidos mixtos por ejemplo para producir infografías interactivas.

- Label:
    position:
      x: [0 - 1]
      y: [0 - 1]
    content: layout

Las coordenadas de la posición position refieren la esquina superior izquierda como la coordenada (0, 0). Los valores dentro de este atributo, x y y establecen estas coordenadas con valores entre 0 y 1.

Matrix

Este componente de tipo evaluativo concentra varias preguntas de opción múltiple en un formato de tabla. En la dimensión de las columnas se muestran varios valores de respuesta, y en la de los renglones los diferentes reactivos.

- Matrix:

    id: ID
    points: number
    submitted: layout
    random: true | false
    ratio: is-1 ... is-11
    feedback: layout

    options:
    - value: text
      display: layout

    values:
    - value: text
      display: layout

Como todos los tipos de pregunta cuenta con atributos como id, y points, para almacenar las respuestas y asignar un puntaje dentro de un cuestionario. Adicionalmente cuenta con un atributo submitted, que permite incluir cualquier tipo de contenido a desplegar una vez que el usuario ha contestado la pregunta.

El atributo random cuando tiene el valor true permite mezclar los renglones de respuesta del reactivo.

El atributo ratio toma un valor entre is-1 y is-11 para repartir el área disponible entre la sección de reactivos o renglones, y las opciones de respuesta. Estos valores corresponden a los nombres de clases de la librería de CSS Bulma, que establecen el ancho de las columnas dentro del reactivo.

El atributo options contiene una lista de valores value y layouts a desplegar display, que corresponden a las preguntas o enunciados de cada renglón.

El atributo values contiene una lista de valores value y layouts a desplegar display, y corresponden a las opciones de respuesta de cada columna.

En los atributos anteriores, la diferencia entre value y display es que el primer atributo almacena en los datos de respuesta del usuario, mientras que display se utiliza para definir lo que se mostrará al usuario en el reactivo.

Un componente interactivo para desplegar contenido dentro de una vista a pantalla completa. Los modales interrumpen el resto de contenidos para mostrar un contenido con una capa de transparencia obscura como overlay.

- Modal:
    header: layout
    content: layout
    sync:
      id: ID

El atributo header contiene un layout de contenido, y representa un elemento visible para accionar el Modal.

El atributo content contiene un layout de contenido oculto inicialmente que se despliega.

El atributo sync hace que el modal sea un contenido sincronizado, es decir, el autor o admin puede activar el modal, y los usuarios ya no tienen control individual del mismo.

Dentro de sync es necesario colocar un atributo id para registro de eventos de sincronía, el cual puede también ser utilizado de forma descriptiva para saber qué contenido despliega el modal, pues su valor se muestra al admin al acceder desde el contenido.

Note

Permite crear notas con contenido de texto simple por parte de los usuarios, ya sea para guardar información o notas personales o bien para compartir con el administrador o autor texto.

- Note:
    id: ID
    placeholder: Title

El atributo id registra la información en el LRS, mientras que el atributo placeholder permite configurar el texto que se muestra antes de capturar la información del usuario.

Numeric

Es un reactivo que permite ingresar un valor numérico como respuesta a una pregunta. Como el resto de preguntas cuenta con atributos como id, para almacenar los datos respectivos en el LRS y points, para asignar un puntaje individual a la pregunta.

- Numeric:

    id: ID
    points: number
    submitted: layout

    value: number
    fullCredit: number
    halfCredit: number
    feedback:
      isWrong: layout
      fullCredit: layout
      halfCredit: layout

Outcomes

Es un elemento que inserta la funcionalidad de insignias y resultados tanto para administradores como para usuarios, de utilidad en contenidos evaluativos o procesos de certificación.

En el caso de usuarios, es el elemento que muestra la insignia obtenida y se puede ubicar en cualquier lugar de un contenido Bloom, aunque se recomienda integrarlo en la primera página y en la última.

Esta vista también permite acceder a la liga pública (en caso de que esté configurada desde config.yaml así), para que el usuario pueda compartir su insignia en sus redes sociales y otros sitios.

Este componente requiere agregar los siguientes elementos en los archivos pages.yaml y config.yaml de un paquete Bloom.

en pages.yaml

Para agregar en cualquier lugar de un contenido Bloom, se debe incluir el siguiente componente:

- Outcomes:

En el caso de administradores y autores, este elemento muestra una tabla que contiene el resumen de logros de todos los participantes que concluyen este contenido de acuerdo a los criterios de aceptación (calificación mínima), y desde la que se puede acceder a las insignias públicas. En el caso de usuarios, este es el elemento que despliega la insignia, y permite acceder a una vista pública (si está configurada) para ver más detalles o compartir la liga en redes sociales o carteras de logros.

en config.yaml

Para configurar la funcionalidad de insignias debe incluirse lo siguiente:

badge:
  name: text
  description: text
  img:
    private: image (assets)
    public: image (assets)
  expiration: number
  public: true | false
  skills:
  - skillName1: text
  - skillName2: text
  - skillName3: text
  issuer:
    name: text
    description: text
    email: text
    URL: text

Dentro de la configuración de insignia se tienen los siguientes atributos:

name es el nombre de la insignia

description contiene un texto más extenso descriptivo de la insignia

img contiene dos alternativas para mostrar una imagen de la insignia en la vista dentro del contenido private así como en la vista pública public. Ambos archivos deben estar ubicados en el folder /assets.

expiration contiene un número entero que representa el número de días de vigencia de la insignia.

public permite configurar si la insignia se puede compartir públicamente (con el valor true) o bien sólo de despliega dentro del contenido.

skills contiene una lista de las habilidades que se desean desplegar dentro de la insignia, logradas por los usuarios al obtenerla.

issuer contiene el detalle con los datos de quien emite la insignia, nombre, descripción, email y la URL de su sitio web o del sitio Yeira donde se obtuvo la insignia

Question

Es un componente evaluativo que permite responder una pregunta de opción o selección múltiple como respuesta a una pregunta.

- Question:

    id: ID
    points: number
    submitted: number
    random: true | false
    display: grid

    options:

    - value: text
      display: layout
      credit: number
      feedback: layout

    - value: text
      display: layout
      credit: number
      feedback: layout

Como todos los tipos de pregunta cuenta con atributos como id, y points, para almacenar las respuestas y asignar un puntaje dentro de un cuestionario. Adicionalmente cuenta con un atributo submitted, que permite incluir cualquier tipo de contenido a desplegar una vez que el usuario ha contestado la pregunta.

El atributo random cuando tiene el valor true permite mezclar las opciones de respuesta del reactivo.

El atributo display se puede configurar con el valor grid una estructura horizontal de reactivos. Si se omite, se presentan las opciones en formato vertical.

Dentro del atributo options se incluyen elementos con los siguientes atributos:

value indica el valor de la opción,
display, que es lo que se muestra al usuario y puede contener un layout inclusive con imágenes como opciones,
credit que indica si esta pregunta debe marcarse (con un valor 1) o es equivocada (0), y
feedback que permite incluir una retroalimentación con un layout que puede incluir todo tipo de contenidos.

Cuando varias opciones tienen simultáneamente un valor en credit de 1, el reactivo se configura automáticamente como selección múltiple, con checkboxes (cuadrados) en lugar de radio buttons (círculos).

Rating

Este componente permite crear un elemento de interacción social para calificar con estrellas. Este contenido puede incluirse al final de una página o en cualquier sección de contenido.

- Rating:
    id: ID

Realtime

El componente Realtime introduce mensajes para los administradores que notifican sobre los eventos en tiempo real generados por los usuarios en un contenido. Los mensajes sólo son visibles para perfiles de admin o autor.

- Realtime:

Results

El componente Results es un complemento a los cuestionarios formativos o sumativos, para dar información al usuario de su resultado, y mensajes específicos en relación con su desempeño. La configuración de cuestionarios para determinar el puntaje, valores de aprobación y otros elementos se realiza en el archivo config.yaml.

en pages.yaml

- Results:
    pending: layout
    passed: layout
    failed: layout
    completed: layout

en config.yaml

defaults:
  passingGrade: 8
  pointScale: 10

Dentro del atributo defaults, es posible incluir una calificación de corte passingGrade así como una escala de puntaje pointScale. Cuando el usuario obtiene un valor menor que la calificación de corte, el resultado de la evaluación genera un evento failed, que activará en el componente Results, el mensaje configurado en el atributo failed. De igual manera, al obtener una calificación igual o mayor al valor de corte, se desplegará el layout dentro del atributo passed.

Cuando no se tiene una calificación asignada de aprobación, es decir, se omite el atributo passingGrade, results mostrará a los usuarios al finalizar el cuestionario el contenido dentro del atributo completed.

El atributo pending se utiliza para desplegar un texto antes de terminar el cuestionario, por ejemplo "Asegurate de contestar todas las preguntas para obtener tu resultado".

Slides

El componente Slides permite integrar una presentación con varias láminas que pueden ser diferentes tipos de contenido o componentes de Bloom.

- Slides:
    sync:  ID
    content:
    - layout_1: layout
    - layout_2: layout

El atributo sync permite utilizar la funcionalidad de sincronización de contenido para el componente Slides. Se debe agregar un ID único dentro de este atributo para poder almacenar el estado del componente Slides en el LRS.

Con esta función, el admin o autor puede control de lo que una presentación debe mostrar en un momento dado, por ejemplo para ir mostrando diferentes elementos o controlar las interacciones con preguntas o encuestas, en tiempo real.

El atributo content incluye una lista de elementos de layout que pueden contener cualquier otro elemento de contenido o componente de Bloom.

Este componente permite incorporar elementos de interacción social asociados con conceptos formativos.

- Social:
    id: ID

Los descriptores de estas reacciones están asociados a conceptos educativos, de tal forma que no únicamente reflejan una emoción respecto al contenido, sino el efecto en términos didácticos, como por ejemplo: ¡Útil, ¡Interesante!, ¡Me gusta! y ¡Confuso!

Sort

Es un componente evaluativo que produce una lista ordenada, la cual debe ser ordenada correctamente por el usuario.

- Sort:
    id: ID
    points: number
    submitted: number

    options:
    - layout1: layout
    - layout2: layout
    feedback: layout

Steps

Este componente es muy parecido a los componentes como Slides o Tabs que muestran secciones de contenido en secuencia, excepto que tiene un estilo más adecuado para poder indicar una secuencia de pasos ordenados.

- Steps:

  - header:  step1
    content:  layout

  - header:  step2
    content:  layout

Cada paso dentro del componente tiene un encabezado de texto header y un contenido content que puede ser cualquier otro layout o componente de Bloom.

Survey

El componente Survey permite realizar una encuesta a los participantes. La encuesta se puede responder sólo una vez, y no muestra los resultados a los usuarios que aún no la han enviado.

- Survey:
    id: ID

    options:
    - subtitle: text
    - subtitle: text

Para generar las opciones de respuesta, es posible insertar dentro del atributo options cualquier listado con clases de la librería CSS de Bulma.

Table

El componente Table permite crear tablas nativas con la librería CSS Bulma.

- Table:

    header:
    - row:
      - layout:  layout
      - layout:  layout

    body:
    - row:
      - layout:  layout
      - layout:  layout
                       
    footer:
    - row:
      - layout:  layout
      - layout:  layout
   
    type: class

Cuenta con atributos como header, body y footer que estilizan los encabezados, cuerpo y pie de la tabla respectivamente. Dentro de cada uno de estos atributos, se agregan tantos renglones (row) como sean necesarios, cada uno conteniendo internamente tantos elementos como columnas se deseen en la tabla.

El atributo type contiene clases de Bulma nativas para cambiar algunas características de visualización de la tabla.

Tabs

El componente Tabs permite mostrar contenido dentro de pestañas

- Tabs:

  - header:  tab1
    content:  layout

  - header:  tab2
    content:  layout

Cada pestaña se configura mediante una lista que tiene encabezados de texto header y contenidos content que puede ser cualquier otro layout o componente de Bloom.

WordCloud

Es un componente social que permite mostrar una nube de palabras (word cloud) de mensajes enviados por todos los usuarios.

- WordCloud:
    id: B1
    singlePost: true | false
    previewPosts: true | false
    submitted: layout

El atributo id es requerido para poder registrar en el LRS los datos de cada interacción.

singlePost determina si los usuarios sólo pueden enviar un comentario true o varios false.

previewPosts permite a los usuarios comenzar a ver los resultados en la nube de palabras antes de enviar un primer comentario true o bien sólo después de enviar su propio comentario false

Finalmente se puede agregar también un mensaje al final del tablero, agregando un layout dentro del atributo submitted.

Youtube

El componente Youtube permite insertar un video proveniente de esta plataforma, incluyendo en el atributo id únicamente el ID de 11 caracteres del video.

- Youtube:
    id:  YouTubeID
    noVideo:  true | false

El atributo noVideo ofrece una función de ocultar el video, y de esta forma evitar la distracción de una transmisión. Este atributo es útil para transmisiones en vivo en donde se requiere que los participantes estén atentos al contenido.

Consulta el tutorial Cómo escribir un contenido Bloom desde cero

¿Quieres aprender paso a paso? Inscríbete al curso gratuito "Introducción a Bloom" de Yeira Academy
¿Necesitas ayuda? Contacta al Soporte de Yeira en: soporte@yeira.training
¿Aún no tienes cuenta en Yeira? Crea una gratis ahora aquí.

Actualizado el: 09/08/2021

¿Este artículo te resultó útil?

¡Gracias!