Een online cursus downloaden naar je pc 

Ik ben nogal van het lezen. Daarom geef ik de voorkeur aan tekstcursussen boven videocursussen, het formaat maakt me niet uit -Word, PDF of HTML- dat dan weer wel.

Ik ben ook nogal zuinig op de opleidingen die ik koop. Ik heb ze graag geordend en in de cloud, zodat ik erbij kan wanneer en hoe ik wil. Daarom probeer ik, wanneer een cursus alleen online beschikbaar is, het materiaal te downloaden en op mijn computer te bewaren.

Zo heb ik in Mega een cloud met 37GB aan opleiding. 

Want als ik dat niet zo doe, moet ik, wanneer ik een online cursus wil bekijken die ik jaren geleden kocht -misschien verbaast het je dat ik nog steeds opleidingen herbekijk die ik meer dan tien jaar geleden kocht en die nog altijd helemaal actueel zijn- onthouden van wie ik hem kocht, de URL, de gebruikersnaam en het wachtwoord…

En er maar op vertrouwen dat de cursus nog op die server staat en niet is verwijderd of naar een ander domein is gemigreerd.

Te veel variabelen waar ik geen controle over heb.

Al met al voel ik me comfortabeler met het materiaal op mijn eigen computer.

Dan zijn er verschillende manieren om het te bewaren op je computer:

• De HTML pagina voor pagina downloaden.
• De inhoud van de lessen kopiëren en in een Word-document plakken.
• Met extensies die het omzetten naar markdown-formaat.

En nog wat andere opties die ik je zo uitleg.

Er zijn eenvoudigere gevallen en complexere. Daarom bespreek ik meerdere oplossingen en, aan het einde, de definitieve voor het lastigste geval, wanneer:

• Er veel URLs zijn.
• Inloggen nodig is.
• De links naar de gedownloade inhoud moeten wijzen en niet naar de huidige server.

Trouwens, dit geldt voor cursussen waarvan de hoofdinhoud bestaat uit tekst en afbeeldingen, met links. De eindoplossing is niet geschikt voor videocursussen.

Nog een opmerking: deze oplossing geldt niet alleen voor cursussen. 

Een relatief nieuwe usecase waarbij ik hetzelfde toepas, is wanneer ik documentatie over wat dan ook aan een AI zoals NotebookLM wil geven om er rechtstreeks vragen over te stellen. Dit is veel handiger dan zelf door URLs te moeten duiken op zoek naar wat dan ook.  

Als je ooit door de ontwikkelaarsdocumentatie van Google Analytics of die van Google Cloud hebt geprobeerd te navigeren, weet je wat ik bedoel.

De belangrijkste problemen: veel lessen, login en links

Cursussen zijn vaak opgebouwd als een verzameling online lessen. Elke les heeft zijn eigen URL, ongeveer met deze structuur:

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

Het platform toont meestal een zij-index met de lessen, waarmee je ertussen kunt navigeren.

Mijn doel is om iets vergelijkbaars lokaal te krijgen:

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

Of, nog beter, één enkel HTML-bestand met de hele cursus, zoiets als curso-local.html.

Met een interne index, ankerlinks waarmee ik makkelijk kan navigeren en alle lesinhoud achter elkaar, alsof het een PDF is.

Hierna de mogelijke oplossingen.

Opties om de cursus op je computer te bewaren

We komen verschillende mogelijkheden tegen, met uiteenlopende complexiteit en gericht op verschillende situaties (meer of minder URLs, wel of geen login nodig, afbeeldingen bewaren of links naar de huidige server behouden…).

Ik leg ze uit van de meest eenvoudige tot de meest complexe.

#1. “Opslaan als” vanuit de browser

De eerste manier ligt het meest voor de hand:

Bestand > Opslaan als > Volledige webpagina

Dit downloadt de HTML-pagina en een map met bijbehorende bronnen: CSS, afbeeldingen, scripts, lettertypen, enz.

Het probleem is dat deze methode redelijk goed werkt voor eenvoudige pagina’s met weinig URLs, maar niet voor grote cursussen. Want naast de tijd die ik kwijt ben aan het één voor één downloaden van die 80 URLs, komen er nog andere complicaties bij:

1. Interne links blijven naar de online URL wijzen.
2. Elke pagina genereert zijn eigen map met bronnen.
3. De echt nuttige inhoud is erg klein vergeleken met de totale grootte van de HTML.
4. Lokale navigatie tussen lessen is niet opgelost (daar heb je later scripts voor nodig).
5. Er is te veel onnodige inhoud: header, menu’s, footer, scripts, pixels, stijlen, chat, externe bronnen, enz.

Met andere woorden: technisch gezien kon je “de pagina” opslaan, maar dit leverde geen bruikbare versie van de cursus op.

Deze route is beter om eenvoudige websites te bewaren dan cursussen.

#2. SingleFile

Je kunt een extensie zoals SingleFilegebruiken, die een complete webpagina in één enkel HTML-bestand opslaat. Op papier lijkt dat een goede oplossing, omdat je de klassieke bronnenmap vermijdt die de browser aanmaakt.

Het resultaat ziet er meestal beter uit, maar vaak lost het het probleem ook niet op.

Ten eerste omdat het gegenereerde bestand honderden megabytes kan wegen doordat in de HTML ingesloten fonts, enorme stijlen en veel code worden opgeslagen die geen deel uitmaakten van de cursusinhoud.

Bovendien, wanneer de inhoud dynamisch wordt gegenereerd (een site gemaakt met JS-frameworks zoals Vue of React) kan de extensie die inhoud niet ophalen.

En daarbovenop blijven dezelfde basisproblemen van de vorige oplossing bestaan:

• De links bleven naar de online website wijzen.
• Er werd een zware kopie van de pagina opgeslagen.
• Er werd geen navigeerbare lokale structuur gemaakt.
• Het was niet praktisch om dit te herhalen voor 70, 80 of 90 lessen.

Dan is duidelijk dat SingleFile handig is om één losse pagina te bewaren, maar niet om een hele cursus om te zetten naar een schone lokale versie.

#3. Een Markdown-extensie gebruiken

De volgende optie is een extensie zoals MarkDownloadgebruiken, bedoeld om een webpagina naar Markdown om te zetten.

Deze aanpak heeft zin als je wilt:

• Alleen de tekst extraheren.
• Onnodig ontwerp verwijderen.
• Lichte bestanden genereren.
• Om ze later samen te voegen in een document of in een lokale HTML.

Het probleem is dat de extensie momenteel niet beschikbaar is in de Chrome Web Store. 

Er zijn alternatieve extensies, maar degene die ik eerder heb gebruikt was deze, dus ik vertel je het idee en laat jou vergelijkbare opties onderzoeken.

#4. Script in de console

De volgende manier is een klein script maken vanuit de browserconsole.

Er zijn twee routes; de aanpak van de eerste is:

1. De indexpagina van de cursus openen.
2. Alle links van de lessen lezen.
3. Een fetch() doen voor elke URL.
4. De inhoud extraheren.
5. Één lokale HTML genereren.

Als je niet programmeert, maakt ChatGPT het script zonder probleem voor je.

Het mooie is dat dit het proces kan automatiseren zodra je bent ingelogd, maar waarschijnlijk verbiedt het beveiligingsbeleid van de pagina dit.

Je kunt een andere aanpak proberen, ook vanuit de console:

1. Een nieuw venster openen.
2. Naar elke les navigeren zoals de gebruiker dat zou doen.
3. Wachten tot die geladen is.
4. De DOM van dat venster lezen.
5. De inhoud extraheren.

Het probleem dat je hier bij dynamische pagina’s kunt tegenkomen is dat de browser je niet altijd goed laat controleren over dat venster, de inhoud ervan laat lezen of laat detecteren wanneer het echt geladen was.  

Geen van beide formules is een robuuste oplossing, maar ik noem ze omdat ik ze op bepaalde momenten heb gebruikt en ze je kunnen helpen. Al zou ik zeggen: ga beter door naar de volgende.

#6. Tampermonkey 

Op papier de meest complexe, omdat je moet:

• Een extensie installeren.
• Een script genereren.
• Dat binnen elke URL wordt uitgevoerd.

Maar Tampermonkey maakt dit een stuk makkelijker, omdat je automatisch een eigen script kunt laden wanneer je bepaalde URLs bezoekt.

Hier gaat de browser zelf elke les binnen en draait het script binnen de geladen pagina.

De flow is:

1. Indexpagina.
2. Tampermonkey verzamelt links.
3. Navigeert naar les 1.
4. Legt zichtbare inhoud vast.
5. Slaat de status op in localStorage.
6. Navigeert naar les 2.
7. Legt inhoud vast.
8. …
9. Genereert de uiteindelijke HTML.

Dit heeft veel meer kans om altijd te werken. 

De sleutel is het vinden van de echte container van de cursusinhoud, wat je doet door de URL van een les te inspecteren om te achterhalen welk HTML-blok de nuttige inhoud bevatte.

Meestal is dat .main-content of #lesson-content of iets dergelijks. Het hangt af van hoe de cursuswebsite is opgebouwd.

Zodra je dat hebt gevonden, maak je een script dat het volgende doet:

1. Alleen uitvoeren op de URLs van de cursus.
2. Een klein zwevend paneel met knoppen toevoegen (optioneel).
3. De links van de lessen uit de cursusindex verzamelen.
4. Die links in localStorage bewaren.
5. Automatisch door elke les navigeren.
6. Wachten tot #lesson-content bestaat.
7. Dat blok klonen.
8. Scripts, stijlen, knoppen, iframes en onnodige attributen opschonen.
9. Afbeeldingen en links omzetten naar absolute URLs.
10. Elke vastgelegde les opslaan in localStorage.
11. Aan het einde één downloadbaar HTML-bestand genereren.

Het beoogde resultaat was een bestand zoals het bestand dat we in de intro noemden curso-local.html.

Trouwens, je hoeft niet te kunnen programmeren. Zelfs geen HTML. Je vraagt ChatGPT om het script en het doet het voor je (zo heb ik het gedaan).

Het belangrijkste is dat je de formule kent en globaal begrijpt hoe die werkt; de code zelf laat je door de AI genereren.

Stap voor stap een online cursus op je computer bewaren

Dit is de stap-voor-stap uitleg.

Stap 1: Tampermonkey installeren

Het eerste is het installeren van Tampermonkey.

In Chrome kan het, door de huidige beperkingen, nodig zijn:

1. De extensie installeren.
2. Ga naar chrome://extensions/.
3. De ontwikkelaarsmodus activeren (schakelaar rechtsboven).
4. Het uitvoeren van gebruikersscripts toestaan.
5. De extensie toestemming geven om op de cursuswebsite te draaien.

Dit is belangrijk, want als Tampermonkey geen rechten heeft, verschijnt het paneel niet, ook al is het script goed.

Stap 2: het script maken

In Tampermonkey:

Dashboard > Create a new script

Je verwijdert de oorspronkelijke inhoud en maakt je script.

Hier laat ik je het script zien dat ChatGPT voor mij genereerde, voor het geval je ontwikkelaar bent en ernaar wilt kijken, het wilt aanpassen of het voor jouw geval wilt testen. Vergeet niet de URL van de cursus te wijzigen:

Stap 3: de indexpagina van de online cursus openen

Je moet naar de beginpagina van de cursus gaan. Als login vereist is, log dan eerst in en ga naar de startpagina.

Stap 4: controleren of het paneel verschijnt

Als je het script gebruikt dat ik je hier laat, zou bij het laden van de cursuspagina rechtsboven een zwart paneel met drie knoppen moeten verschijnen:

• Test 3
• Todo
• Borrar estado

Als het niet verschijnt, moet je controleren:

• Dat Tampermonkey geactiveerd is.
• Dat het script ingeschakeld is.
• Dat de @match overeenkomt met de URL van de cursus.
• Dat de extensie rechten heeft voor die website.

Stap 5: status wissen voordat je test

Voor elke test is het verstandig om op de knop Borrar estado.

Dit wist eerdere captures die zijn opgeslagen in localStorage.

Het is belangrijk, want tijdens tests kunnen oude statussen achterblijven die onvolledige of dubbele bestanden genereren.

Stap 5: testen met 3 lessen

Druk na het wissen van de status op de knop Test 3.

Het is niet verstandig om de scraper meteen voor de volledige cursus te starten.

Het script doorloopt drie lessen en downloadt een HTML-bestand.

Open het en controleer:

• Dat de index drie lessen bevat.
• Dat de titels correct zijn.
• Dat de inhoud begint met de echte tekst van de les.
• Dat er geen footer wordt vastgelegd.
• Dat er geen lege blokken verschijnen.

Stap 6: de volledige capture uitvoeren

Als de test werkt, is alles klaar. Je hoeft alleen maar:

1. De online indexpagina opnieuw te openen.
2. Klik op Borrar estado.
3. Klik op Todo.
4. De browser alleen laten navigeren.
5. Het tabblad niet sluiten.
6. Wachten tot de uiteindelijke HTML is gedownload.

En dan is er lokaal een prachtig HTML-bestand gegenereerd dat de hele cursus in een paar kilobytes comprimeert.

Maar goed, dat het zo weinig weegt, heeft een addertje onder het gras. De afbeeldingen zijn namelijk gelinkt aan de oorspronkelijke server; ze zijn niet naar je pc gedownload. Dat betekent dat hun URL op een bepaald moment kan veranderen of dat ze verwijderd kunnen worden, met als gevolg dat jij ze niet meer kunt zien.

Je zou ze één voor één kunnen downloaden en de URL in de HTML aanpassen, maar ik vind dat weinig zinvol. Daarom is er voor mij nog een volgende (optionele) stap.

Stap 7 (optioneel): de inhoud naar Word overzetten

Ik zeg Word, maar je kunt het ook in Google Docs doen als je dat liever hebt. Een kwestie van workflow.

In elk geval is deze stap heel eenvoudig, want je hoeft alleen maar:

• De HTML met de browser te openen.
• Alle inhoud te selecteren (ctrl+a in Windows).
• Te kopiëren (ctrl+c).
• Te plakken (ctrl+v) in een nieuw Windows-bestand. Het kan een paar seconden duren, afhankelijk van de grootte van de cursus.
• Op te slaan.

Nu zijn de afbeeldingen in het Word-bestand geplakt en zijn ze al van jou.  

Het nadeel is dat het bestand dan niet meer een paar kilobytes weegt, maar megabytes. En misschien veel: in mijn laatste cursus 181MB. Want het zijn 136 pagina’s met meerdere screenshots. Niet niks. 

Maar goed, daar is een oplossing voor. Lees verder.

Stap 7 (optioneel): de inhoud naar PDF overzetten

Deze is nog eenvoudiger dan de vorige, maar heeft een trucje. Je moet:

1. Het bestand in Word openen.
2. Op “Opslaan als” klikken.
3. PDF kiezen.
4. In de opties die verschijnen, “Minimale grootte (online publiceren)” selecteren:

Voilà!

Van 181 gaat het naar 2MB, helemaal niet slecht. 

Ja, de afbeeldingen verliezen wat kwaliteit, maar ze voldoen ruimschoots aan het doel van de opleiding.

Hiermee hebben we een PDF die heel weinig weegt, met de volledige cursus, met afbeeldingen en links op onze pc, of in onze opleidingscloud, als we dat liever hebben (en dat zou je moeten willen).

Beperkingen van deze oplossing

Deze oplossing is geschikt voor cursussen of documentatie in HTML waarvan de inhoud vooral uit tekst, afbeeldingen en links bestaat.

Niet geschikt voor:

• Beveiligde video’s downloaden.
• Inhoud vastleggen die via DRM wordt geleverd.
• Ingesloten spelers bewaren.
• Betalingen of toegangsbeperkingen omzeilen.
• Het oorspronkelijke ontwerp van het platform voor 100% behouden.
• Bijlagen downloaden waarvoor extra rechten nodig zijn.

Als de cursus ingesloten video’s bevat in Cloudflare Stream, Vimeo, Wistia of andere beveiligde spelers, kan het script de lege plek of de link behouden, maar het downloadt de video niet. Dat zijn verschillende dingen.

Conclusie

Als je een cursus lokaal wilt of moet bewaren om hem altijd bij de hand te hebben, of volledige documentatie aan een AI wilt geven en er vragen over wilt stellen, heb je meerdere opties.

Maar als de bron login vereist en tientallen of honderden URLs heeft, is het systeem met Tampermonkey het beste. 

Als het minder dan tien URLs zijn en je het jezelf niet moeilijk wilt maken, kun je de andere oplossingen proberen die ik noem.

Ik heb in mijn leven veel systemen geprobeerd -automatische en handmatige- en geen enkel is zo snel en automatisch als dit. 

Tenminste tot AI-agenten het voor je doen. Gratis, natuurlijk.

Vragen staat vrij.