Cómo comenzar con Bloom

En este tutorial te explicaremos paso a paso cómo comenzar a utilizar Bloom desde tu sitio Yeira.

• Paso 1. Selección y descarga de una plantilla de la librería Bloom
• Paso 2. Modificación de la plantilla Bloom
• Paso 3. Empaquetamiento del contenido Bloom
• Paso 4. Carga y visualización dentro de tu sitio Yeira

Paso 1. Selección y descarga de una plantilla de la librería Bloom

• Para acceder a la librería de plantillas de contenido Bloom, inicia sesión con tu cuenta Admin/Autor en tu sitio Yeira.
• Ve al Panel de Control y desde el menú lateral selecciona la opción "Bloom".

• Dentro de la sección "Bloom" en Yeira, existen 4 tipos de contenidos disponibles, cada uno con plantillas descargables 100% personalizables: Evaluativo, Expositivo, Social y Mixto.
• Selecciona la plantilla/paquete Bloom que deseas utilizar y pulsa en "Descargar" para modificar su contenido.

Paso 2. Modificación de la plantilla Bloom

Una vez descargada la plantilla de Bloom, descomprime el archivo ZIP en tu computadora para acceder a su contenido y poder modificarlo.

Cada archivo ZIP de Bloom contiene lo siguiente:

• Un archivo index.html que no debe modificarse.
• Un folder de assets que contiene imágenes, documentos y otros archivos para mostrar en el contenido.
• Un archivo config.yaml que contiene la configuración básica del paquete.
• Un archivo pages.yaml que contiene la estructura de contenidos y que es el archivo sobre el cual podrás modificar el contenido Bloom.

Para la modificación del contenido es posible abrir los archivos .yaml dentro de cualquier editor de texto (Txt). Sin embargo, los entornos de desarrollo que recomendamos son Visual Studio Code, Atom o Sublime Text, pues facilitan la edición acelerando la producción del contenido, además de permitir su previsualización desde un entorno local.

• Algunas plantillas de la Librería de Bloom cuentan con la opción de editar en web. Pulsa en el botón "Edición ágil" para abrir la pantalla de edición del Markup. Edita el Markup con tu propio contenido y pulsa en "Descargar" para obtener el archivo YAML modificado. Reemplaza el archivo YAML en la carpeta de contenidos descargada previamente.

**¿Eres desarrollador e-learning? **

Estos son los pasos recomendados para crear un entorno de desarrollo local para Bloom:

• Instalar Node.js y NPM (https://nodejs.org/en/download/), de acuerdo al sistema operativo.
• Una vez instalado Node.js, instalar browser-sync con el siguiente comando en una terminal:

npm install -g browser-sync

• Abrir el folder donde está contenido el archivo index.html en una terminal.
• Ejecutar el comando browser-sync para que al realizar cambios en los archivos .yaml se actualice en el navegador la vista.

browser-sync start --server --files *.yaml

Recomendaciones para desarrolladores:

En el editor de código se recomienda instalar algún módulo de Syntax Highlight para YAML, por ejemplo en Visual Studio Code, YAML Language Support por Red Hat.

Shortcuts de Visual Studio Code que aumentan la productividad son:

• Cambio de word wrap (para que los textos en un sólo renglón se vean en el siguiente) con Option + Z
• Selección múltiple para editar simultáneamente un término con Ctrl+D
• Mover un renglón hacia arriba o abajo con Option + CursorUp / CursorDown

Paso 3. Empaquetamiento del contenido Bloom

Una vez, realizadas las modificaciones del contenido Bloom, es necesario volver a empaquetarlo en un archivo ZIP, asegurándose de que el archivo index.html está en el nivel raíz de la carpeta de contenidos.

Forma de empaquetamiento correcto:

• Abre el folder en el navegador de archivos.
• Selecciona todos los archivos y el folder assets (Ctrl+A), luego con el botón derecho selecciona la opción "comprimir en un ZIP".
• ¡Es todo!

Paso 4. Carga y visualización dentro de tu sitio Yeira

Una vez que creado el nuevo paquete ZIP con las modificaciones, podrás cargarlo en tu curso dentro de tu sitio Yeira como cualquier otro Recurso tipo HTML.

• Sigue este tutorial para la carga de contenidos HTML con ZIP en Yeira.
• Para previsualizar el contenido HTML (Bloom), consulta este tutorial.

Actualizado el: 05/02/2022