Cómo escribir un contenido Bloom desde cero

Los templates disponibles desde tu sitio Yeira son una forma de iniciar muy rápida con Bloom, sin embargo, para contenidos que requieren mayor personalización o características avanzadas, es preferible comenzar desde cero. En este tutorial vamos a iniciar con un template vacío, que únicamente contenga el archivo index.html, y archivos config.yaml y pages.yaml básicos.




Consulta este artículo para saber qué es Bloom.

Los paquetes Bloom son extensibles y pueden admitir contenidos tradicionales provenientes de otros sistemas no sólo como contenidos embed, sino como contenidos maquetados con HTML y CSS.

Bloom utiliza como componentes de estilo la librería de CSS Bulma. Más información de las clases disponibles para estilizar componentes se encuentra en: Bulma CSS Framework

Este tutorial tiene el objetivo de demostrar la estructura base de contenidos de un archivo Bloom, para que podamos ganar familiaridad con el tipo de elementos, indentación y otras características.

Consulta el CheatSheet con la documentación completa de Bloom.

Archivos YAML

Bloom utiliza para la definición de sus contenidos únicamente archivos de tipo YAML.

La documentación detallada de YAML está disponible en este enlace.

YAML ofrece muchas ventajas como lenguaje de configuración, sobre otras soluciones para desarrollo de contenidos como HTML puro.

Mucho más legible que lenguajes de serialización como JSON y XML.
Nomenclatura simple para elementos como objetos (llave: valor) y arreglos (arrays con - ).
Base amplia de documentación y una variedad de apoyos y guías de la comunidad online.

Configuración de config.yaml

El archivo config.yaml contiene algunos atributos generales de todo el contenido del paquete Bloom. Entre otros atributos se tienen los siguientes:

---
title: Marketplace Template
description: Texts Examples
id: MKT-Template-2_1
highlight: '#EF7145'

defaults:
  locale: es
  navigation: false
  prev: "Anterior"
  next: "Siguiente"
  pointScale: 10

title representa un título para el archivo. El valor es únicamente un elemento interno y no afecta la visualización de contenidos.
description es un texto con la descripción general del paquete, e igualmente no se visualiza en sí en el contenido.
id contiene un descriptor único para el paquete Bloom, aunque en la versión actual de Bloom no requiere .
highlight es un atributo que contiene un código de color RGB. Para que el código se reconozca correctamente debe estar dentro de comillas simples o dobles. Este código de color será utilizado a lo largo del paquete de contenido como color principal.

El atributo defaults contiene algunos elementos adicionales.

locale contiene valores de localización/internacionalización, en el caso mostrado para idioma español.
navigation habilita la navegación entre páginas mediante indicadores en la parte superior del contenido.
prev habilita y define el contenido de un botón de navegación inferior para regresar a una página previa.
next habilita y define el contenido de un botón de navegación inferior para avanzar a una página siguiente.
pointScale establece una base de puntos a obtener del paquete Bloom, si este contiene preguntas.

Configuración de pages.yaml

La estructura básica del archivo pages.yaml se muestra a continuación.

- page:
  - category: Marketplace
  - id: P1

Todo el contenido dentro de pages.yaml está dentro de una serie de páginas, que inician con el atributo - page: y cada página debe contener dos parámetros, un atributo - category: que representa cualquier valor de cadena de texto que describa a qué categoría pertenece la pregunta, y un atributo - id: que representa un valor de texto único que permita distinguir la página.

Aunque es posible incluir contenido directamente dentro de page, lo usual es integrar algún elemento de estilo de la librería CSS Bulma como por ejemplo: - block:.

Páginas múltiples en un contenido

Una estructura de múltiples páginas se ve de esta forma:

- page:
  - category: Marketplace
  - id: P1

- page:
  - category: Marketplace
  - id: P2

- page:
  - category: Marketplace
  - id: P3

Contenidos de texto

Un elemento que puede utilizarse de forma genérica y que no representa ninguna clase específica de CSS Bulma es el elemento - text:. Un buen punto de partida es ingresar varios renglones de texto con este atributo dentro de cada página.

- page:
  - category: Marketplace
  - id: P1
  - text: Esta es la página 1

- page:
  - category: Marketplace
  - id: P2
  - text: Esta es la página 2

- page:
  - category: Marketplace
  - id: P3
  - text: Esta es la página 3

El atributo - text: no puede contener internamente ningún otro elemento, aunque sí puede incluir etiquetas HTML.

Jerarquía de contenidos

En general es posible insertar un contenido de texto dentro de cualquier atributo. Por ejemplo el elemento - items: no corresponde a ninguna clase Bulma ni componente Bloom por lo que puede usarse para agrupar varios elementos de texto.

Para jerarquizar contenidos dentro de otros objetos se utilizan tabs o indentación. En Bloom se recomienda que estos tabs se representen con 2 espacios.

- page:
  - category: Marketplace
  - id: P1
  - items:
    - text: Un primer texto
    - text: Un segundo texto

Aplicar clases de Bulma a componentes jerarquizados

El elemento items puede ser modificado por otras clases Bulma para cambiar su formato, como por ejemplo:

- page:
  - category: Marketplace
  - id: P3
  - items has-background-success: 
    - text: un primer texto
    - text: un segundo texto

Lo que esta clase hará es aplicar un fondo de color verde al elemento items, que engloba internamente a los elementos de texto.

Estilos inline con el atributo style:

Todos los elementos de estructura contienen como atributo opcional style:, lo que permite agregar estilos CSS inline en un formato más corto. En este caso es importante notar que el atributo style no se ingresa con el caracter - sino directamente abajo del elemento a modificar.

- page:
  - category: Marketplace
  - id: P3
  - element: Este es un texto estilizado
    style: "color: red;"

Cuando el estilo se aplica a un elemento que no contiene texto, sino una estructura interna de componentes, entonces el atributo style: debe ubicarse por debajo de los elementos de la estructura, de lo contrario el editor señalará un error de sintaxis.

- page:
  - category: Marketplace
  - id: P1
  - items:
    - text: Un primer texto
    - text: Un segundo texto
    style: "border: 2px solid black;"

Aplicar clases con el atributo class:

También es posible combinar como atributos de un elemento tanto estilo como clase de forma combinada.

- page:
  - category: Marketplace
  - id: P1
  - text: Un segundo texto
    class: has-text-success
    style: "border: 2px solid black;"

Definición de estilos con <style>

Es posible usar un elemento arbitrario para definir una clase inline, para después utilizarla dentro del mismo contenido:

- page:
  - category: Marketplace
  - id: P3
  - head: |
      <style>
        .city {
          background-color: tomato;
          color: white;
          border: 2px solid black;
          margin: 20px;
          padding: 20px;
        }
      </style>
  - items city: 
    - text: un primer texto
    - text: un segundo texto

Inserción de HTML

También es posible insertar HTML directamente como un elemento dentro de Bloom. Sólo es importante notar que para que el HTML funcione de manera óptima, es necesario insertarlo dentro de la clase Bulma - content:

En este ejemplo la primera parte se muestra correctamente como una lista con viñetas (bullets), mientras que en el segundo caso no. Es también importante notar la sintaxis para generar un texto multilínea en YAML, iniciando con el caracter |, y asegurándose de indentar correctamente dentro del elemento content el texto.

En el ejemplo se compara el uso de - content: y de - block: con un contenido HTML de listas con viñetas.

- page:
  - category: Marketplace
  - id: P3
  - columns is-centered:
    - column is-narrow:
      - content: |
          <ul>
            <li> Bullet points </li>
            <li> Bullet points </li>
            <li> Bullet points </li>
          </ul>
      - block: |
          <ul>
            <li> Bullet points </li>
            <li> Bullet points </li>
            <li> Bullet points </li>
          </ul>

¿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