| Nivell | Eina i Web | Que permet fet? | Exemple |
| Senzill |
Learning Apps |
Què ofereix: Creació de fitxes senzilles basades en plantilles fixes. Exp/Imp: Permet incrustar via iFrame i generar codis QR. Es pot baixar com a paquet SCORM o iBooks Author. |
Aquest és el codi que et dona l'eina per posar l'activitat en un blog:
|
| Senzill |
Educaplay |
Què ofereix: Generador d'activitats gamificades al núvol. Exp/Imp: S'integra amb Google Classroom i Teams. Exporta com a LTI o SCORM (amb limitacions a la versió free). |
Codi per integrar l'activitat sense sortir de la pàgina:
|
| Mitjà |
Genially |
Què ofereix: Disseny de presentacions i contingut visual interactiu. Exp/Imp: La versió gratis només permet compartir enllaç o codi Embed. L'exportació a HTML5, PDF o JPG és de pagament. Permet importar PPTs. |
Genially sol utilitzar un script per mantenir les animacions fluides:
|
| Mitjà |
H5P |
Què ofereix: Creació de contingut HTML5 estàndard i compatible. Exp/Imp: És el més flexible. Exporta un fitxer .html únic (tot en un) que funciona sense internet, o fitxers .h5p per importar a Moodle o WordPress. |
Si l'uses fora de Moodle, es veu així:
|
| Avançat |
Twine |
Què ofereix: Eina de narrativa hipertextual (històries no lineals). Exp/Imp: Exporta directament un fitxer .html autònom molt lleuger. Permet importar formats d'història (Twee). |
Codi intern per fer una condicional (si tens la clau, passes; si no, no):
|
| Avançat |
p5.js |
Què ofereix: Llibreria de JavaScript per a gràfics i interacció. Exp/Imp: No exporta un format tancat; el resultat és codi .js que s'executa dins d'un llenç (canvas) en un navegador. Pots programar que guardi imatges (PNG/JPG) del que dibuixes. |
Codi per dibuixar un cercle que segueix el ratolí:
|
2. Què necessitem al navegador?
Perquè aquestes eines funcionin bé a Chrome, Firefox o Edge, cal tindre:
-
JavaScript Activat: Imprescindible. Sense això, no funciona cap interactivitat (botons, jocs, lògica).
-
Cookies i LocalStorage: Moltes eines guarden el progrés o la sessió aquí. Si es bloquegen, el joc es reinicia.
-
WebGL / Acceleració per maquinari: Per a coses visuals com p5.js o transicions 3D, el navegador ha de poder fer servir la targeta gràfica de l'ordinador.
-
Mòbil vs PC:
-
Genially i H5P s'adapten sols (responsive).
-
Si ho programem nosaltres (p5.js), hem de vigilar el
viewportperquè es vegi bé al mòbil.
-
3. Exemple
