Offline-Nutzung der Apps


Die selbst programmierten interaktiven Physik-Apps könnten offline, also ohne eine aktive Internetverbindung genutzt werden. Jedoch gibt es auf dieser Seite kein Download-Angebot für die Offline-Nutzung. Mit Hilfe folgender Anleitung könnten Sie selbst eine App herunterladen und für die Offline-Nutzung vorbereiten.

Ein mögliches Verfahren wird am Beispiel der App "Stabmagentfeld" beschrieben. Für andere Apps könnten Sie analog vorgehen. Ich empfehle die Verwendung des Chrome-Browsers, da mit dem Firefox-Browser nicht immer alle benötigten Dateien zum Herunterladen angeboten werden.

Schritt 1
  • Klicken Sie auf der Übersichtsseite "Physik interaktiv" auf "Magnete, Strom, Licht", dann auf die App "Stabmagnet".

  • Klicken Sie unterhalb der App "Stabmagnet" auf den Link bei "In einem neuen Fenster starten: Magnetfeld eines Stabmagneten".

  • Sobald die App vollständig geladen ist, drücken Sie die Taste F12.


Schritt 2
  • Klicken Sie im Chrome-Browser in den Chrome DevTools auf den Tab "Sources" und drücken Sie die Taste F5 um sicherzustellen, dass alle benötigten Dateien heruntergeladen werden.

  • Öffnen Sie jeweils durch einen Doppelklick auf den Ordernamen die vorhandenen Ordner.

  • Klicken Sie mit der rechten Maustaste auf einen Dateinamen und dann auf "Save as...".

  • Speichern sie alle vorhandenen Dateien in einem gemeinsamen Ordner


Schritt 3
  • Öffnen Sie die Datei "index.html" mit einem Texteditor. Bei anderen Apps kann der Dateiname abweichen, es muss jedoch die Datei mit der Endung ".html" sein.

  • Entfernen Sie alle Eintragungen des relativen Dateipfads ../../../lib/, so dass die geänderte Datei wie folgt aussieht:

  • Speichern Sie die geänderte Datei. Die App findet jetzt alle benötigten Dateien in dem Ordner in welchem sich alle Dateien befinden.

  • Doppelklicken Sie auf die Datei mit der Endung ".html", also hier die Datei "index.html". Die App wird in einem Browserfenster geöffnet und kann ohne aktive Internetverbindung gestartet werden. In der Adressleiste des Browsers ist die lokale Adresse der App zu sehen.

Falls sich beim Doppelklick ein Editor öffnet, dann ziehen Sie die Datei mit der Maus in ein geöffnetes Browserfenster.


Schritt 4
  • Kopieren Sie den Ordner mit den heruntergeladenen Dateien und der geänderten HTML-Datei z.B. auf einen USB-Stick.

Die App kann jetzt vom USB-Stick aus ohne Verbindung zum Internet geöffnet werden, indem man die HTML-Datei in einem Browser öffnet.


App an den eigenen Unterricht anpassen

Sie können Änderungen an der App vornehmen, indem Sie die Datei "stabmagnet.js" bearbeiten.


In manchen interaktiven Physik-Apps werden Bilder geladen, die in der App dann angezeigt werden. Die Sicherheitseinstellungen der JavaScript-Sandbox in modernen Browsern verhindern, dass ein lokal gestarteter JavaScript-Code auf den lokalen Rechner zugreifen darf, um Dateien zu laden.

Deswegen muss eine App, in welcher z.B. Bilder geladen werden mit einem laufenden lokalen Web-Server gestartet werden. In der folgenden Anleitung wird gezeigt, wie Sie die notwendigen Dateien herunterladen können und mit Hilfe eines lokalen Web-Servers zum Laufen bringen.

Schritt 1
  • Klicken Sie auf der Übersichtsseite "Physik interaktiv" auf "Quantenphysik", dann auf die App "Photoeffekt".

  • Klicken Sie unterhalb der App "Photoeffekt" auf den Link bei "In einem neuen Fenster starten: "Photoeffekt 01".

  • Sobald die App vollständig geladen ist, drücken Sie die Taste F12.


Schritt 2
  • Klicken Sie im Chrome-Browser in den Chrome DevTools auf den Tab "Sources" und drücken Sie die Taste F5 um sicherzustellen, dass alle benötigten Dateien heruntergeladen werden.

  • Öffnen Sie jeweils durch einen Doppelklick auf den Ordernamen die vorhandenen Ordner.

  • Klicken Sie mit der rechten Maustaste auf einen Dateinamen und dann auf "Save as...".

  • Speichern sie alle vorhandenen Dateien in einem gemeinsamen Ordner

  • Um die Grafik zu speichern klicken Sie auf das Vorschaubild und dann auf "Save image as...".

Schritt 3
  • Öffnen Sie die Datei "photoeffekt01.html" mit einem Texteditor. Bei anderen Apps kann der Dateiname abweichen, es muss jedoch die Datei mit der Endung ".html" sein.

  • Entfernen Sie alle Eintragungen des relativen Dateipfads ../../../lib/, so dass die geänderte Datei wie folgt aussieht:

  • Speichern Sie die geänderte Datei. Die App findet jetzt alle benötigten Dateien in dem Ordner in welchem sich alle Dateien befinden.

  • Doppelklicken Sie auf die Datei mit der Endung ".html", also hier die Datei "photoeffekt01.html". Die App wird in einem Browserfenster geöffnet. In der Adressleiste des Browsers ist die lokale Adresse der App zu sehen.

Falls sich beim Doppelklick ein Editor öffnet, dann ziehen Sie die Datei mit der Maus in ein geöffnetes Browserfenster.

Die App wird nicht gestartet, sondern es wird eine Fehlermeldung ausgegeben, die sichtbar wird wenn man F12 drückt. Die Sicherheitseinstellungen der JavaScript-Sandbox verhindern, dass das Bild direkt geladen werden darf.


Schritt 4

Um das Bild laden zu können muss die App mit einem laufenden lokalen Web-Server gestartet werden. Es kann jeder beliebige lokale Web-Server genutzt werden: (XAMPP, Python, PHP, node.js,...)

Als einfachste Möglichkeit kann man eine Erweiterung für den Chrome-Browser nutzen: Web Server for Chrome

  • Öffnen Sie folgende Seite: Web Server for Chrome und klicken Sie auf "Hinzufügen" und dann auf "App hinzufügen".

  • Öffnen Sie im Chrome-Browser die Seite "chrome://apps/" und klicken Sie dort auf "Web Server":

  • Klicken Sie auf "Choose Folder" und wählen Sie den Ordner, in welchem die heruntergeladenen Dateien liegen. In diesem Beispiel ist das der Ordner "c:\tmp".

  • Neben der Schaltfläche "Choose Folder" wird der gewählte Ordner angezeigt. Klicken Sie dann auf die angegebene Web Server URL: http://127.0.0.1:8887

  • Es öffnet sich die Übersicht der vorhandenen Dateien. Klicken Sie auf die Datei "photoeffekt01.html":

  • Die App wird im lokalen Web-Server gestartet:

Diese Schritte müssten auf jedem Rechner ausgeführt werden, auf welchem die App offline in einem lokalen Web Server laufen soll. Sobald die Dateien heruntergeladen sind und der lokale Web Server läuft, kann die App ausgeführt werden, ohne dass eine aktive Internet-Verbindung besteht.