1. Recerca d’eines gratuïtes per a la creació de contingut interactiu
Taula resum d’eines
|
Nivell |
Eina |
Enllaç |
Descripció breu |
Exemple |
Requisits de navegador/dispositiu |
|
Senzill |
H5P |
Plataforma per crear contingut interactiu educatiu (qüestionaris, presentacions, vídeos interactius). Permet importar/exportar contingut H5P, integrar-se amb LMS (Moodle, WordPress) i exportar incrustacions HTML. |
Exemple: qüestionari de preguntes amb feedback automàtic. |
Chrome, Firefox i Edge actualitzats. Funciona en PC i mòbil. Cal JavaScript activat. |
|
|
Senzill |
Genially (free) |
Eina web per crear presentacions, infografies i imatges interactives. Exportació via enllaç o iframe. Edició visual amb plantilles. |
Exemple: presentació amb botons interactius. |
Chrome recomanat; Firefox i Edge compatibles. PC i mòbil (visualització). JavaScript i cookies activades. |
|
|
Intermedi |
Scratch |
Entorn visual de programació per crear històries, jocs i animacions interactives. Exporta projectes compartibles via web. |
Exemple: mini joc interactiu amb personatges. |
Chrome, Firefox, Edge. PC recomanat (edició). JavaScript i WebGL activats. |
|
|
Intermedi |
Twine |
Creació d’històries interactives no lineals. Exporta a HTML autònom. Permet codi HTML, CSS i JavaScript. |
Exemple: història amb opcions i enllaços. |
Funciona en qualsevol navegador modern. PC i mòbil. JavaScript activat. |
|
|
Avançat |
p5.js Editor |
Llibreria JavaScript per crear gràfics i interacció avançada. Exportable a HTML/JS. Permet interacció amb ratolí, teclat i so. |
Exemple: animació interactiva amb el ratolí. |
Chrome, Firefox, Edge moderns. PC recomanat. JavaScript i canvas HTML5. |
|
|
Avançat |
A-Frame |
Framework web per crear experiències 3D i VR amb HTML. Exportable com a web interactiva. |
Exemple: escena 3D navegable. |
Chrome i Edge recomanats. PC i mòbil compatibles. WebGL activat; per VR, dispositiu compatible. |
2. Descripcions detallades, exemples i requisits
-
H5P: permet crear activitats interactives sense programar. Suporta vídeos preguntes, línies de temps i presentacions. exemple: captura d’un qüestionari incrustat en un LMS.
-
Genially: orientat a contingut visual interactiu. Exemple: infografia amb hotspots clicables.
-
Scratch: ideal per a jocs i animacions educatives. Exemple: joc senzill controlat amb el teclat.
-
Twine: molt útil per narrativa interactiva. Exemple: fitxer HTML exportat amb decisions múltiples.
-
p5.js: permet crear interaccions avançades amb codi. Exemple: sketch que reacciona al moviment del ratolí.
- A-Frame: enfocada a entorns 3D i VR. Exemple: escena amb objectes 3D navegables.
3. Creació de contingut interactiu (eina triada: Twine)
he creat una història interactiva senzilla amb twinwi y despres s’ha exportat com a HTML.
HTML bàsic amb contingut interactiu
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Història interactiva amb Twine</title>
</head>
<body>
<h1>Benvingut a la història interactiva</h1>
<p>Aquesta és una història senzilla creada amb Twine.</p>
<!-- Contingut interactiu incrustat -->
<iframe src="historia_twine.html" width="100%" height="500"></iframe>
</body>
</html>
Explicació : He triat l'eina Twine per crear una història interactiva. El contingut ha sigut exportat en format htmlni posteriorment incrustat en un fitxer HTML bàsic mitjançant un iframe. El contingut és funcional i permet la interacció de lusuari a través de diferents decisions.
