So lädst du einen Online-Kurs auf deinen PC herunter 

Ich lese sehr gern. Deshalb bevorzuge ich Kurse in Textform gegenüber Videokursen, egal ob im Format Word, PDF oder HTML — das schon.

Außerdem bin ich sehr pingelig mit den Weiterbildungen, die ich kaufe. Ich habe sie gern geordnet und in der Cloud, damit ich darauf zugreifen kann, wie und wann ich will. Deshalb versuche ich, wenn ein Kurs nur online verfügbar ist, das Material herunterzuladen und auf meinem Rechner zu speichern.

So habe ich in Mega eine Cloud mit 37GB Schulungsmaterial. 

Denn wenn ich es nicht so machen würde und einen Online-Kurs anschauen wollte, den ich vor ein paar Jahren gekauft habe — vielleicht überrascht es dich, dass ich immer noch auf Schulungen zurückgreife, die ich vor über zehn Jahren gekauft habe und die weiterhin völlig aktuell sind — müsste ich mich daran erinnern, bei wem ich ihn gekauft habe, an die URL, den Benutzer und das Passwort…

Und zusätzlich müsste ich darauf vertrauen, dass der Kurs noch auf diesem Server liegt und nicht gelöscht oder auf eine andere Domain migriert wurde.

Zu viele Variablen, die ich nicht kontrolliere.

Kurz gesagt: Ich fühle mich wohler, wenn das Material auf meinem Rechner liegt.

Also gibt es mehrere Möglichkeiten, es zu speichern auf deinem Rechner:

• Das HTML Seite für Seite herunterladen.
• Den Inhalt der Lektionen kopieren und in Word einfügen.
• Mit Erweiterungen, die daraus ein Markdown-Format machen.

Und noch ein paar weitere, die ich dir später erkläre.

Es gibt einfachere Fälle und komplexere. Deshalb stelle ich dir mehrere Lösungen vor und am Ende die endgültige für den kompliziertesten Fall, nämlich wenn:

• Es viele URLs gibt.
• Ein Login erforderlich ist.
• Die Links auf den heruntergeladenen Inhalt zeigen müssen und nicht auf den aktuellen Server.

Übrigens gilt das für Kurse, deren Hauptinhalt aus Text und Bildern mit Links besteht. Die endgültige Lösung ist nicht für Videokurse geeignet.

Noch ein Hinweis: Diese Lösung gilt nicht nur für Kurse. 

Ein relativ neuer Anwendungsfall, bei dem ich dasselbe mache, ist wenn ich Dokumentation zu irgendeinem Thema an eine KI wie NotebookLM übergeben möchte, um ihr direkt Fragen zu stellen. Das ist viel bequemer, als selbst durch URLs zu tauchen und irgendetwas zu suchen.  

Wenn du schon einmal versucht hast, in der Google-Analytics-Dokumentation für Entwickler oder in der Google-Cloud-Dokumentation zu navigieren, weißt du, was ich meine.

Die Hauptprobleme: viele Lektionen, Login und Links

Kurse sind meist als Sammlung von Online-Lektionen aufgebaut. Jede Lektion hat ihre eigene URL, ungefähr mit dieser Struktur:

https://www.ejemplo.com/view/courses/nombre-del-curso/seccion/leccion

Die Plattform zeigt meist einen seitlichen Index mit den Lektionen, über den man zwischen ihnen navigieren kann.

Mein Ziel ist es, etwas Gleiches lokal zu bekommen:

curso/
├ index.html
├ 01-introduccion.html
├ 02-que-es-la-herramienta.html
├ 03-casos-de-uso.html
└ ...

Oder, noch besser, eine einzige HTML-Datei mit dem gesamten Kurs, etwa curso-local.html.

Mit internem Index, Ankerlinks für einfache Navigation und dem gesamten Inhalt der Lektionen nacheinander, als wäre es ein PDF.

Im Folgenden die möglichen Lösungen.

Optionen, um den Kurs auf deinem Rechner zu speichern

Es gibt mehrere Möglichkeiten mit unterschiedlichem Komplexitätsgrad und für verschiedene Fälle (mehr oder weniger URLs, Login nötig oder nicht, Bilder speichern oder die Links zum aktuellen Server beibehalten…).

Ich erkläre sie von der einfachsten bis zur komplexesten.

#1. „Speichern unter“ aus dem Browser

Der erste Weg ist der naheliegendste:

Datei > Speichern unter > Vollständige Webseite

Das lädt die HTML-Seite und einen Ordner mit zugehörigen Ressourcen herunter: CSS, Bilder, Skripte, Schriftarten usw.

Das Problem ist, dass diese Methode bei einfachen Seiten mit wenigen URLs einigermaßen gut funktioniert, aber nicht bei großen Kursen. Denn zusätzlich zur Zeit, die ich damit verbringe, die 80 URLs einzeln herunterzuladen, kommen weitere Komplikationen hinzu:

1. Interne Links zeigen weiterhin auf die Online-URL.
2. Jede Seite erzeugt ihren eigenen Ressourcenordner.
3. Der wirklich nützliche Inhalt ist im Verhältnis zur gesamten HTML-Größe sehr klein.
4. Die lokale Navigation zwischen Lektionen ist nicht gelöst (dafür braucht man spätere Skripte).
5. Es gibt zu viel unnötigen Inhalt: Header, Menüs, Footer, Skripte, Pixel, Styles, Chat, externe Ressourcen usw.

Mit anderen Worten: Technisch konnte man „die Seite“ speichern, aber daraus entstand keine nützliche Version des Kurses.

Dieser Weg eignet sich besser zum Speichern einfacher Websites als von Kursen.

#2. SingleFile

Du kannst eine Erweiterung verwenden wie SingleFile, die eine komplette Webseite in einer einzigen HTML-Datei speichert. Auf den ersten Blick scheint das eine gute Lösung zu sein, weil es den klassischen Ressourcenordner des Browsers vermeidet.

Das Ergebnis sieht oft besser aus, löst das Problem aber häufig ebenfalls nicht.

Erstens, weil die erzeugte Datei mehrere hundert Megabyte wiegen kann weil eingebettete Schriften, riesige Stylesheets und viel Code im HTML gespeichert werden, der gar nicht zum Kursinhalt gehört.

Außerdem, wenn Inhalte dynamisch erzeugt werden (Website mit JS-Frameworks wie VUE oder React) kann die Erweiterung sie nicht erfassen.

Und obendrein bleiben dieselben Grundprobleme der vorherigen Lösung bestehen:

• Die Links zeigten weiterhin auf die Online-Website.
• Es wurde eine schwere Kopie der Seite gespeichert.
• Es wurde keine navigierbare lokale Struktur erzeugt.
• Es war nicht praktisch, das für 70, 80 oder 90 Lektionen zu wiederholen.

Damit ist klar: SingleFile ist nützlich, um eine einzelne Seite zu speichern, aber nicht, um einen ganzen Kurs in eine saubere lokale Version zu verwandeln.

#3. Eine Markdown-Erweiterung verwenden

Die nächste Option ist eine Erweiterung wie MarkDownload, die dafür gedacht ist, eine Webseite in Markdown umzuwandeln.

Der Ansatz ergibt Sinn, wenn du:

• Nur den Text extrahieren willst.
• Unnötiges Design entfernen willst.
• Leichte Dateien erzeugen willst.
• Um sie später in einem Dokument oder in einem lokalen HTML zusammenzuführen.

Das Problem ist, dass die Erweiterung momentan nicht im Chrome Web Store verfügbar ist. 

Es gibt alternative Erweiterungen, aber die, die ich früher verwendet hatte, war diese hier; deshalb erkläre ich dir die Idee und lasse dich ähnliche Optionen selbst recherchieren.

#4. Skript in der Konsole

Der nächste Weg ist, ein kleines Skript aus der Browserkonsole zu erstellen.

Es gibt zwei Wege; der Ansatz des ersten ist:

1. Die Indexseite des Kurses öffnen.
2. Alle Links der Lektionen lesen.
3. Ausführen von fetch() für jede URL.
4. Den Inhalt extrahieren.
5. Eine einzige lokale HTML-Datei erzeugen.

Wenn du nicht programmierst, generiert dir ChatGPT das Skript problemlos.

Das Gute daran ist, dass dies den Prozess automatisieren kann, sobald du eingeloggt bist, aber die Sicherheitsrichtlinie der Seite es wahrscheinlich verbietet.

Du kannst auch einen anderen Ansatz versuchen, ebenfalls aus der Konsole:

1. Ein neues Fenster öffnen.
2. Zu jeder Lektion navigieren, wie es der Nutzer tun würde.
3. Warten, bis sie geladen ist.
4. Das DOM dieses Fensters lesen.
5. Den Inhalt extrahieren.

Das Problem, auf das du hier bei dynamischen Seiten stoßen kannst, ist, dass der Browser nicht immer erlaubt, dieses Fenster gut zu steuern, seinen Inhalt zu lesen oder zu erkennen, wann es wirklich geladen war.  

Keine der beiden Formeln ist eine robuste Lösung, aber ich erzähle sie dir, weil ich sie zu bestimmten Zeiten genutzt habe und sie dir helfen können. Trotzdem würde ich dir eher sagen: geh zur nächsten über.

#6. Tampermonkey 

Auf den ersten Blick die komplexeste, weil sie Folgendes erfordert:

• Eine Erweiterung installieren.
• Ein Skript erzeugen.
• Es innerhalb jeder URL ausführen lassen.

Aber Tampermonkey macht es deutlich einfacher, weil es erlaubt, ein eigenes Skript automatisch zu laden, wenn du bestimmte URLs besuchst.

Hier ruft der Browser selbst jede Lektion auf und das Skript läuft innerhalb der geladenen Seite.

Der Ablauf ist:

1. Indexseite.
2. Tampermonkey sammelt Links.
3. Navigiert zu Lektion 1.
4. Erfasst sichtbaren Inhalt.
5. Speichert den Zustand in localStorage.
6. Navigiert zu Lektion 2.
7. Erfasst Inhalt.
8. …
9. Erzeugt das finale HTML.

Das hat eine viel höhere Chance, immer zu funktionieren. 

Der Schlüssel ist, den echten Container des Kursinhalts zu finden. Das gelingt, indem du die URL einer Lektion inspizierst, um zu lokalisieren, welcher HTML-Block den nützlichen Inhalt enthielt.

Meist ist es .main-content oder #lesson-content oder etwas in der Art. Es hängt davon ab, wie die Kurswebsite aufgebaut ist.

Sobald du ihn erkannt hast, erstellst du ein Skript, das Folgendes tut:

1. Nur auf den Kurs-URLs laufen.
2. Ein kleines schwebendes Panel mit Buttons hinzufügen (optional).
3. Die Links der Lektionen aus dem Kursindex sammeln.
4. Diese Links in localStorage speichern.
5. Automatisch durch jede Lektion navigieren.
6. Warten, bis #lesson-content existiert.
7. Diesen Block klonen.
8. Skripte, Styles, Buttons, iframes und unnötige Attribute bereinigen.
9. Bilder und Links in absolute URLs umwandeln.
10. Jede erfasste Lektion in localStorage speichern.
11. Am Ende eine einzige herunterladbare HTML-Datei erzeugen.

Das angestrebte Ergebnis war eine Datei wie die, die wir in der Einleitung erwähnt haben: curso-local.html.

Übrigens: Du musst nicht programmieren können. Nicht einmal HTML. Du bittest ChatGPT um das Skript und es erledigt es für dich (so habe ich es gemacht).

Wichtig ist, dass du die Formel kennst und grob verstehst, wie sie funktioniert; den Code selbst generiert dir die KI.

Schritt für Schritt einen Online-Kurs auf deinem Rechner speichern

Das ist die Schritt-für-Schritt-Erklärung.

Schritt 1: Tampermonkey installieren

Als Erstes musst du installieren: Tampermonkey.

In Chrome kann es wegen der aktuellen Einschränkungen notwendig sein,:

1. die Erweiterung zu installieren.
2. Gehe zu chrome://extensions/.
3. Aktiviere den Entwicklermodus (Schalter oben rechts).
4. Erlaube die Ausführung von Benutzerskripten.
5. Gib der Erweiterung die Erlaubnis, auf der Kurswebsite zu laufen.

Das ist wichtig, denn wenn Tampermonkey keine Berechtigungen hat, erscheint das Panel nicht, auch wenn das Skript korrekt ist.

Schritt 2: das Skript erstellen

In Tampermonkey:

Dashboard > Create a new script

Der Startinhalt wird gelöscht und du erstellst dein Skript.

Hier lasse ich dir das Skript, das ChatGPT für mich generiert hat, falls du Entwickler bist und einen Blick darauf werfen, es anpassen oder für deinen Fall testen möchtest. Denk daran, die Kurs-URL zu ändern:

Schritt 3: die Indexseite des Online-Kurses öffnen

Du musst die Startseite des Kurses öffnen. Wenn sie einen Login erfordert, melde dich zuerst an und gehe auf die Startseite.

Schritt 4: prüfen, ob das Panel erscheint

Wenn du das Skript verwendest, das ich dir hinterlasse, sollte beim Laden der Kursseite oben rechts ein schwarzes Panel mit drei Buttons erscheinen:

• Test 3
• Todo
• Borrar estado

Wenn es nicht erscheint, musst du prüfen:

• Ob Tampermonkey aktiviert ist.
• Ob das Skript aktiviert ist.
• Ob @match zur Kurs-URL passt.
• Ob die Erweiterung Berechtigungen für diese Website hat.

Schritt 5: Zustand vor dem Test löschen

Vor jedem Test sollte man den Button drücken: Borrar estado.

Das löscht frühere Erfassungen, die gespeichert sind in localStorage.

Das ist wichtig, weil bei Tests alte Zustände übrig bleiben können, die unvollständige oder doppelte Dateien erzeugen.

Schritt 5: mit 3 Lektionen testen

Nach dem Löschen des Zustands drückst du den Button Test 3.

Man sollte den Scraper nicht gleich für den gesamten Kurs starten.

Das Skript durchläuft drei Lektionen und lädt eine HTML-Datei herunter.

Öffne sie und prüfe:

• Dass der Index drei Lektionen enthält.
• Dass die Titel korrekt sind.
• Dass der Inhalt mit dem echten Text der Lektion beginnt.
• Dass kein Footer erfasst wird.
• Dass keine leeren Blöcke erscheinen.

Schritt 6: die vollständige Erfassung ausführen

Wenn der Test funktioniert, ist alles bereit. Du musst nur:

1. Die Online-Indexseite erneut öffnen.
2. Drücken Borrar estado.
3. Drücken Todo.
4. Den Browser allein navigieren lassen.
5. Den Tab nicht schließen.
6. Warten, bis das finale HTML heruntergeladen wird.

Und schon wurde eine großartige lokale HTML-Datei erzeugt, die den ganzen Kurs auf ein paar Kilobyte komprimiert.

Allerdings hat dieses geringe Gewicht einen Haken: Die Bilder sind mit dem ursprünglichen Server verlinkt, sie wurden nicht auf deinen PC heruntergeladen. Das heißt, ihre URL kann irgendwann geändert werden oder sie können gelöscht werden, mit der Folge, dass du sie nicht mehr sehen kannst.

Du könntest sie einzeln herunterladen und die URLs im HTML ändern, aber ich finde, das ergibt wenig Sinn. Deshalb gibt es für mich einen nächsten (optionalen) Schritt.

Schritt 7 (optional): Inhalt nach Word übertragen

Ich spreche von Word, aber du kannst es auch in einem Google Doc machen, wenn du möchtest. Eine Frage des Workflows.

Jedenfalls ist dieser Schritt sehr einfach, denn du musst nur:

• Das HTML im Browser öffnen.
• Den gesamten Inhalt auswählen (ctrl+a unter Windows).
• Ihn kopieren (ctrl+c).
• Ihn in eine neue Word-Datei einfügen (ctrl+v). Je nach Kursgröße kann das ein paar Sekunden dauern.
• Speichern.

Jetzt wurden die Bilder in die Word-Datei eingefügt und sie gehören dir.  

Der Nachteil ist, dass die Datei nicht mehr nur ein paar Kilobyte wiegt, sondern Megabyte. Und vielleicht viele: In meinem letzten Kurs waren es 181MB. Denn es sind 136 Seiten mit mehreren Screenshots. Keine Kleinigkeit. 

Dafür gibt es allerdings eine Lösung. Lies weiter.

Schritt 7 (optional): Inhalt in PDF umwandeln

Das ist noch einfacher als der vorherige Schritt, hat aber einen Trick. Du musst:

1. Die Datei in Word öffnen.
2. Auf „Speichern unter“ klicken.
3. PDF wählen.
4. In den erscheinenden Optionen „Mindestgröße (Onlineveröffentlichung)“ auswählen:

Voilà!

Aus 181MB werden 2MB, wirklich nicht schlecht. 

Ja, die Bilder verlieren etwas an Qualität, aber sie erfüllen den Zweck der Schulung mehr als ausreichend.

Damit haben wir ein sehr leichtes PDF mit dem vollständigen Kurs, mit Bildern und Links auf unserem PC oder in unserer Schulungs-Cloud, wenn wir das vorziehen (und das solltest du).

Grenzen dieser Lösung

Diese Lösung eignet sich für Kurse oder Dokumentation in HTML, deren Inhalt hauptsächlich aus Text, Bildern und Links besteht.

Sie eignet sich nicht für:

• Geschützte Videos herunterladen.
• Per DRM bereitgestellte Inhalte erfassen.
• Eingebettete Player speichern.
• Zahlungen oder Zugriffsbeschränkungen umgehen.
• Das ursprüngliche Design der Plattform zu 100 % bewahren.
• Anhänge herunterladen, die zusätzliche Berechtigungen verlangen.

Wenn der Kurs eingebettete Videos in Cloudflare Stream, Vimeo, Wistia oder anderen geschützten Playern enthält, kann das Skript den Platzhalter oder den Link behalten, aber es lädt das Video nicht herunter. Das sind verschiedene Dinge.

Fazit

Wenn du einen Kurs lokal speichern möchtest oder musst, um ihn immer griffbereit zu haben, oder vollständige Dokumentation an eine KI übergeben und ihr Fragen stellen willst, hast du mehrere Optionen.

Wenn die Quelle aber Login erfordert und mehrere Dutzend oder Hunderte URLs hat, ist das System mit Tampermonkey das beste. 

Wenn es weniger als zehn URLs sind und du es dir nicht kompliziert machen willst, kannst du die anderen Lösungen ausprobieren, die ich erwähne.

Ich habe im Laufe meines Lebens viele Systeme getestet — automatische und manuelle — und keines ist so schnell und automatisch wie dieses. 

Zumindest bis KI-Agenten es für dich erledigen. Kostenlos natürlich.

Man wird ja noch fragen dürfen.