1) Recerca de dues eines de cada per a la creació de contingut interactiu (senzill, intermedi i avançat). Format taula.
| Nom i enllaç | descripció | Exemple de codi per HTML | |
| Senzill | Canva | Permet crear presentacions, infografies i vídeos amb elements interactius bàsics com enllaços i botons. | <div style="position: relative; width: 100%; height: 0; padding-top: 56.25%;"><iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none;" src="https://www.canva.com/design/DAFxxx/view?embed" allowfullscreen="true"></iframe></div> |
| Senzill | Genially | Ofereix, finestres emergents i gamificació senzilla mitjançant plantilles predefinides. | <div style="width: 100%;"><div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0;"><iframe frameborder="0" width="1200px" height="675px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://view.genial.ly/645xxxxxx" type="text/html" allowscriptaccess="always" allowfullscreen="true"></iframe></div></div> |
| Intermedi | H5P | Permet crear vídeos interactius amb preguntes a mig vídeo. | Time: 00:30 -> Question: "Cert o Fals?" |
| Intermedi | Lumaps | Eina per a la creació de mapes interactius i visualització de dades geogràfiques. | <iframe src="https://h5p.org/h5p/embed/123456" width="1090" height="600" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script> |
| Avançat | Articulate Storyline 360 | Permet programar variables, activadors (triggers) complexos i simulacions de programari molt detallades. | var player = GetPlayer(); var score = player.GetVar("PuntsUsuari"); // Codi per comunicar-se amb el navegador alert("Has acabat el curs amb: " + score + " punts."); |
| Avançat | Adobe Animate | Permet crear animacions i contingut interactiu per a web |
// Atura l'animació al principi // Al fer clic al botó amb nom d'instància 'btn_play' |
2) Característiques específiques de configuració del navegador web
- Canva: Requereix un navegador actualitzat i connexió constant per carregar els recursos del núvol.
- Genially: Necessita JavaScript actiu per executar les capes d'interactivitat i les animacions.
- H5P: Cal activar el suport d'iFrames i l'auto-reproducció de mitjans (àudio/vídeo) al navegador.
- Lumaps: Requereix permisos de geolocalització i càrrega de scripts externs per mostrar els mapes.
- Articulate Storyline 360: Necessita suport per a HTML5 i que el navegador no bloquegi les finestres emergents (pop-ups).
- Adobe Animate: Imprescindible l'acceleració per maquinari activa per renderitzar el contingut del canvas de forma fluida.
3) Crea un contingut interactiu