| Nivel | Herramienta y Web | Descripción y Funcionalidades | Ejemplo (Codigo) |
| Sencillo |
Wordwall |
Qué ofrece: Creación de actividades gamificadas basadas en plantillas (ruletas, concursos, cartas). Exportar: Muy fácil de incrustar vía iframe No requiere código. Exporta resultados a Excel si eres docente. Formato: HTML5 responsive. |
<iframe style="max-width:100%" src="https://wordwall.net/embed/play/123/456" width="500" height="380" frameborder="0" allowfullscreen></iframe> |
| Sencillo |
Padlet |
Qué ofrece: Muros colaborativos, líneas de tiempo y mapas interactivos donde los usuarios pueden colgar contenido. Exportar: Permite exportar a PDF, CSV, Imagen y Excel. Se incrusta fácilmente. Edición: "Drag & Drop" (arrastrar y soltar) muy intuitivo. |
<div class="padlet-embed" style="border:1px solid rgba(0,0,0,0.1);..."><iframe src="..." ...></iframe></div> |
| Medio |
Flourish |
Qué ofrece: Visualización de datos interactiva (gráficos animados, mapas, "bar chart races"). Exportar: Se pueden subir datos desde Excel/CSV. Exporta en HTML, Imagen o vía Script JS. Uso: Muy usado en periodismo de datos. |
<div class="flourish-embed flourish-bar-chart-race" data-src="visualisation/123456"><script src="https://public.flourish.studio/resources/embed.js"></script></div> |
| Medio |
canva |
Qué ofrece: Más allá del diseño estático, permite crear sitios web "one-page" y presentaciones con enlaces y animaciones. Exportar: Exporta a MP4, GIF, PDF, PPTX y "Sitio Web" (HTML alojado por ellos). Edición: Editor visual muy potente. |
<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;..."><iframe loading="lazy" ... src="https://www.canva.com/design/..." ...></iframe></div> |
| Avanzado |
Chart.js |
Qué ofrece: Librería de JavaScript open-source para crear gráficos de datos totalmente controlables y animados en el <canvas>. Exportar: Todo es código JS. Acepta datos JSON. Requisito: Es necesario saber programar en JS. |
new Chart(ctx, { type: 'bar', data: { labels: ['Rojo', 'Azul'], datasets: [{ label: '# votos', data: [12, 19] }] } }); |
| Avanzado |
A-Frame |
Qué ofrece: Framework web para crear Realidad Virtual (VR) directamente en el navegador usando etiquetas HTML personalizadas. Exportar: Es un archivo .html con la librería importada. No necesita instalar nada. Potencial: Compatible con gafas VR y móviles. |
<a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sky color="#ECECEC"></a-sky> </a-scene> |
2. ¿Qué necesitamos en el navegador?
He estado probando las herramientas y, para que funcionen bien (sobre todo las más potentes como Flourish o A-Frame), he visto que hay que tener en cuenta un par de cosas básicas en el navegador:
-
JavaScript siempre activado: Esto es lo más básico. Sin JavaScript no hay interactividad, así que si usamos bloqueadores tipo "NoScript", ninguna de estas herramientas cargará.
-
Aceleración gráfica (WebGL): Para las herramientas que mueven 3D (como A-Frame) o muchos datos animados, el navegador necesita "tirar" de la tarjeta gráfica del ordenador. Si notas que va lento o no carga el 3D, suele ser porque la aceleración por hardware está desactivada en la configuración.
-
Cuidado con bloquear cookies: Me he dado cuenta de que herramientas como Wordwall, al ponerlas dentro de otra web (iframe), a veces fallan en navegadores muy privados como Brave o Safari porque bloquean las cookies de terceros. A veces hay que dar permiso para que se guarden los puntos o carguen los estilos.
-
Móvil vs Ordenador: La mayoría se adaptan solas al tamaño de pantalla (responsive), pero en el caso de la Realidad Virtual (A-Frame) la experiencia cambia: en el PC te mueves arrastrando el ratón y en el móvil puedes usar el giroscopio moviendo el teléfono físicamente.
3. Ejemplo práctico (Gráfico con Chart.js)
Para el ejemplo final he elegido Chart.js porque quería probar algo útil de verdad para una web. He simulado una gráfica sobre el uso semanal de redes sociales.
Lo mejor es que no es una imagen fija (JPG): como veis en la captura, al pasar el ratón por encima de las barras (en este caso la azul de Instagram), te sale una etiqueta con el dato exacto (19 horas). Es mucho más visual que poner una tabla de números.
Para hacerlo, simplemente he cargado la librería en un HTML básico y he configurado los nombres (TikTok, Instagram...) y los colores de cada barra.
