Fòrum 3: Feu una recerca d'eines per a la creació de contingut interactiu. Marc Estepa

Fòrum 3: Feu una recerca d'eines per a la creació de contingut interactiu. Marc Estepa

par Marc Estepa Pérez,
Nombre de réponses : 0

Eines

Nivell Eina Enllaç Descripció Exemple
Senzill LearningApps https://learningapps.org Eina gratuïta per crear activitats interactives simples, exporta imatges i permet descarregar activitats image.png
Senzill WordWall https://wordwall.net Generador de jocs interactius (anagrames, laberints,quizzes), exporta imatges del joc i permet imprimir image%20%281%29.png
Intermedi H5P https://h5p.org Eina de codi obert per crear activitats interactives, exporta fitxers .h5p i conté JSON real editable The basics | H5P
Intermedi Genially https://genially.com Plataforma per crear presentacions i imatges interactives, exporta imatges del disseny image%20%282%29.png
Avançat Scratch https://scratch.mit.edu Entorn visual per crear jocs i animacions, exporta en projectes JSON image%20%284%29.png
Avançat Google Earth Web https://earth.google.com/web Projectes interactius 3D amb punts, rutes i diapositives  image%20%285%29.png

Descripció detallada de cadascuna de les apps

LearningApps

Que ofereix?

  • Activitats interactives
  • Plantilles predefinides
  • Exportació d'imatges i text

Exemple:

image%20%286%29.png

En aquesta app, podem marcar les paraules de la cançó

Wordwall

Que ofereix?

  • Jocs interactius educatius 
  • Plantilles predefinides
  • Exportació d'imatges del joc

Exemple:

image%20%287%29.png

En aquest exemple, hem fet un joc que crea anagrames de paraules 

H5P

Que ofereix?

  • Activitats interactives
  • Exportació en fomat .h5p
  • Contingut editable en JSON

Exemple:

{
  "text": "Completa: La capital de França és *París*.",
  "overallFeedback": [
    {
      "from": 0,
      "to": 100,
      "feedback": "Ben fet!"
    }
  ]
}

Això és un exemple de codi JSON que genera l'App

Genially

Que ofereix?

  • Presentacions interactives
  • Hotspots, animacions, transicions
  • Exportació d'imatges del disseny

Exemple:

image%20%288%29.png

En aquest exemple podem veure un joc dins de el propi Genially

Scratch

Que ofereix?

  • Programació visual per blocs
  • Jocs, animacions i simulacions
  • Exportació del projecte en JSON 

Exemple:

image%20%289%29.png

En aquest exemple podem veure un joc fet en Scratch amb total interactivitat

Google Earth Web

Que ofereix?

  • Creació de projectes interactius 3D
  • Punts d'interès, rutes, imatges i text
  • Presentacions navegables

Exemple:

Aquí podem veure un exemple d'un mapa interactiu

Navegadors

Eina Chrome Firefox Edge Mòbil Ordinador
LearningApps Funciona perfecte Funciona perfecte Funciona perfecte Compatible Compatible

Wordwall

Funciona perfecte Funciona perfecte Funciona perfecte Compatible (alguns jocs no seran responsius) Compatible
H5P Funciona perfecte Funciona perfecte Funciona perfecte Depèn de l'activitat funciona o no Compatible
Genially Funciona perfecte Funciona perfecte Funciona perfecte Compatible Compatible
Scratch Funciona perfecte Funciona perfecte Funciona perfecte App no disponible en cap SO del mòbil Compatible
Google Earth Web Funciona perfecte Funciona de manera parcial Funciona perfecte No recomenat (funciona molt malament) Compatible (Amb un ordinador potent)

Contingut interactiu 

Aqui deixo el meu codi utilitzant l'eina per a exportar un mapa de Google Maps

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Mapa interactiu creat amb Google Maps</title>
</head>
<body>

<h1>Mapa interactiu (Google Maps)</h1>
<p>
    Aquest és un exemple de contingut interactiu creat utilitzant Google Maps
    i incrustat dins d'un fitxer index.html.
</p>

<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3775.1840461204806!2d1.8894850121882507!3d41.549038885832005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a48b9fe0e810af%3A0x1571d25cf3f709ee!2sINS%20Daniel%20Blanxart!5e1!3m2!1ses!2ses!4v1770238886974!5m2!1ses!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
    width="100%"
    height="600"
    style="border:0;"
    allowfullscreen
    loading="lazy">
</iframe>

</body>
</html>