¿Quieres ofrecer experiencias más profundas y enriquecedoras a tus alumnos? Crea proyectos basados en código directamente en Rise 360 con el bloque de código. Desarrolla herramientas interactivas y demostraciones con un editor de código integrado en la aplicación o carga tus propios proyectos terminados. ¿No sabes por dónde empezar? Consulta este curso para inspirarte o sigue leyendo para probarlo tú mismo.

1. Inserta un bloque de código
2. Modifique la configuración del bloque
3. Accesibilidad y problemas conocidos

Nota: Los bloques de código solo pueden usar los recursos disponibles en el propio bloque, y lo que está escrito solo afecta al entorno de ese bloque. El código escrito en HTML, CSS y JavaScript funciona mejor para bloques de código personalizados.

Paso 1: Inserta un bloque de código

1. Abre un curso de Rise 360 y, a continuación, edita una lección existente o crea una nueva.
2. Selecciona Todos los bloques en la barra de atajos de bloques. O bien, haga clic en el icono de inserción de bloques (+) que aparece al pasar el ratón por encima de un límite entre bloques.
3. En la barra lateral, selecciona la categoría Código.
4. Selecciona una opción en función de cómo hayas compilado tu proyecto de código.
   • Haz clic en Añadir código para introducir y editar el código directamente. Los cambios que realices se reflejan en tiempo real.
   • Haz clic en Cargar proyecto para cargar un archivo ZIP que cumpla los siguientes criterios:
     • Incluye un archivo de proyecto principal denominado index.html que contiene el código del proyecto. No se le puede dar ningún otro nombre. Este archivo no puede estar en una carpeta y debe estar en el nivel raíz del archivo
     • Incluye todos los recursos para su proyecto, incluidos los archivos fuente, como las imágenes
     • No supera los 5 GB
5. Cuando aparezca el bloque, haz clic en el botón de acción o coloca el cursor sobre el bloque para acceder a la barra de herramientas de diseño de la izquierda. A continuación, haz clic en el icono de Contenido. En la barra lateral, agrega tu código o carga tu proyecto comprimido.
   • En el bloque Añadir código, usa los íconos de buscar/reemplazar, copiar y eliminar para realizar cambios rápidamente en todo el bloque de código.
   • En el bloque Cargar proyecto, usa el icono de borrar para borrar el archivo ZIP cargado actualmente.

Tu proyecto se ejecutará inmediatamente una vez que lo agregues a Rise 360.

Nota: Los bloques de código incluidos en la formación publicada para LMS o exportación web no se pueden previsualizar localmente, pero se mostrarán como se espera cuando se carguen en el anfitrión de la formación.

Parámetros de finalización

Para garantizar que los alumnos completen una actividad de bloque de código antes de continuar, establece los parámetros de finalización de tu bloque de código. Una vez completados los siguientes pasos, los bloques continuos reconocen cuándo los alumnos han completado la actividad del bloque.

1. Puede editar el contenido de un bloque de código existente o agregar un bloque nuevo.
2. Activa la opción Establecer requisitos de finalización.
3. Copia el fragmento de código que aparece: window.parent.postMessage ({type: 'complete'}, '*');
4. Pegue el código en la ventana de códigos o en su proyecto existente. En el caso de los bloques de subida de proyectos existentes, tendrás que volver a importar el proyecto después de añadir el fragmento de código de finalización.

¡Eso es todo! Ahora los bloques continuos de Rise 360 reconocerán cuando se haya completado la actividad de bloqueo de código.

Nota: Al activar la opción de finalización e incluir un bloque de continuación basado en la finalización sin incluir el fragmento de código en el proyecto, los alumnos no podrán continuar con la formación.

Galería de inspiración

Ambos bloques tienen acceso con un solo clic a nuestro curso tutorial con proyectos de muestra. Eche un vistazo y vea lo que es posible, ¡luego cree el suyo propio basándose en el código y los recursos proporcionados! Simplemente haz clic en el enlace ¿Necesitas ayuda para empezar? botón para echarle un vistazo.

Codificación Vibe

Si utilizas un LLM de terceros para generar código (también conocido como «vibe coding»), utiliza lo siguiente como plantilla de indicaciones para garantizar una compatibilidad mejorada con Rise 360. Sustituye el texto entre corchetes por tu propio contenido.

1. Crea un archivo `index.html` que pueda contener HTML, CSS y JavaScript y que no incluya solicitudes web externas

2. <iframe>Este archivo `index.html` se usará dentro de un ``

3. En el archivo `index.html`, crea [describe tu proyecto] y ponle un fondo transparente

4. Codifíquelo una vez [describa los parámetros de finalización], la aplicación debería llamar a `window.parent.postMessage ({type: 'complete'}, '*'); `para que la ventana principal sepa que la interacción se ha completado

Paso 2: Modificar la configuración del bloque

Modifica el aspecto de tu contenido en la pantalla pasando el ratón sobre un bloque existente para acceder a la barra de herramientas de diseño situada a la izquierda. Haz clic en el icono de estilo para acceder a las opciones de fondo del bloque. El menú Formato ofrece opciones para cambiar el relleno del bloque, el ancho del contenido y la altura máxima del bloque.

Accesibilidad y problemas conocidos

Accesibilidad

La accesibilidad del bloque de código viene determinada por la accesibilidad del código HTML que contiene. Consulta estos consejos para hacer que tu bloque de código sea accesible:

• Escribe código que esté alineado con los estándares WCAG 2.2.
• Utilice HTML semántico siempre que sea posible. Proporciona accesibilidad integrada y reduce la necesidad de código personalizado.
• Utilice lectores de pantalla, navegación por teclado y funciones de zoom para probar su curso. Comprueba que los alumnos puedan seguir las actualizaciones y tengan tiempo suficiente para responder o explorar el contenido.

Usa un complemento de verificación de accesibilidad, como axe DevTools, proporcionado por Deque, o el verificador de accesibilidad Wave, para verificar tu código.

¿Buscas más consejos de diseño de accesibilidad? Consulta los siguientes recursos:

• Rise 360: Cómo diseñar un curso accesible
• Índice de accesibilidad

Problemas conocidos

En la actualidad, los bloques de código presentan los siguientes problemas conocidos:

• La publicación de la formación en PDF no produce una reproducción individual del contenido del bloque de código.
• En este momento, Articulate Localization no es compatible con los bloques de código. Los bloques de código tampoco se pueden traducir mediante la traducción manual a XLIFF. Para traducir los bloques de código, debes insertar manualmente los bloques de código específicos del idioma después de la traducción.