Hvordan laste ned et nettkurs til PC-en din 

Jeg er veldig glad i å lese. Derfor foretrekker jeg kurs i tekst fremfor video, formatet spiller ingen rolle for meg -Word, PDF eller HTML- det gjør det altså ikke.

Jeg er også veldig nøye med opplæringen jeg kjøper. Jeg liker å ha den organisert og i skyen, så jeg kan få tilgang til den hvordan og når jeg vil. Derfor prøver jeg, når et kurs bare finnes online, å laste ned materialet og lagre det på maskinen min.

Slik har jeg en sky i Mega med 37GB opplæring. 

For hvis jeg ikke gjør det slik, må jeg, når jeg vil se et nettkurs jeg kjøpte for noen år siden -kanskje det overrasker deg at jeg fortsatt går tilbake til opplæringer kjøpt for mer enn ti år siden som fortsatt er helt relevante- huske hvem jeg kjøpte det av, URL-en, brukernavn og passord…

I tillegg til å stole på at kurset fortsatt ligger på den serveren og ikke har blitt slettet eller flyttet til et annet domene.

For mange variabler jeg ikke kontrollerer.

Alt i alt føler jeg meg mer komfortabel med materialet på min egen maskin.

Da finnes det flere måter å lagre det på på maskinen din:

• Laste ned HTML side for side.
• Kopiere innholdet i leksjonene og lime det inn i et Word-dokument.
• Med utvidelser som gjør det om til markdown-format.

Og noen flere som jeg forklarer senere.

Det finnes enklere tilfeller og mer komplekse. Derfor forteller jeg deg om flere løsninger og, til slutt, den definitive for det mest kompliserte tilfellet, når:

• Det finnes mange URLs.
• Login kreves.
• Lenkene må peke til det nedlastede innholdet og ikke til den nåværende serveren.

Forresten gjelder dette kurs der hovedinnholdet er tekst og bilder, med lenker. Den endelige løsningen passer ikke for videokurs.

Én ting til: denne løsningen gjelder ikke bare kurs. 

Et relativt nytt bruksområde der jeg gjør det samme, er når jeg vil gi dokumentasjon om hva som helst til en KI som NotebookLM for å stille spørsmål direkte. Det er utrolig mye mer behagelig enn å grave rundt blant URLs selv på jakt etter det du trenger.  

Hvis du har prøvd å navigere i utviklerdokumentasjonen til Google Analytics eller dokumentasjonen til Google Cloud, vet du hva jeg mener.

Hovedproblemene: mange leksjoner, login og lenker

Kurs er vanligvis bygget som en samling nettbaserte leksjoner. Hver leksjon har sin egen URL, omtrent med denne strukturen:

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

Plattformen viser vanligvis en sideindeks med leksjonene, som gjør det mulig å navigere mellom dem.

Målet mitt er å få noe tilsvarende lokalt:

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

Eller, enda bedre, én enkelt HTML med hele kurset, typ curso-local.html.

Med intern indeks, ankerlenker som lar meg navigere enkelt og alt leksjonsinnholdet etter hverandre, som om det var en PDF.

Nedenfor kommer de mulige løsningene.

Alternativer for å lagre kurset på maskinen din

Vi finner flere muligheter, med ulik grad av kompleksitet og rettet mot ulike tilfeller (flere eller færre URLs, behov for login eller ikke, lagre bildene eller beholde lenkene til den nåværende serveren…).

Jeg forklarer dem fra den mest grunnleggende til den mest komplekse.

#1. “Lagre som” fra nettleseren

Den første veien er den mest åpenbare:

Fil > Lagre som > Komplett nettside

Dette laster ned HTML-siden og en mappe med tilhørende ressurser: CSS, bilder, skript, skrifttyper osv.

Problemet er at denne metoden fungerer rimelig bra for enkle sider med få URLs, men ikke for store kurs. For i tillegg til tiden brukt på å laste ned de 80 URL-ene én etter én, oppstår det andre komplikasjoner:

1. Interne lenker peker fortsatt til URL-en online.
2. Hver side lager sin egen ressursmappe.
3. Det virkelig nyttige innholdet er veldig lite sammenlignet med den totale størrelsen på HTML-en.
4. Lokal navigasjon mellom leksjoner er ikke løst (man må ty til senere skript).
5. Det er for mye unødvendig innhold: header, menyer, footer, skript, piksler, stiler, chat, eksterne ressurser osv.

Med andre ord: teknisk sett kunne man lagre “siden”, men dette ga ikke en nyttig versjon av kurset.

Denne metoden passer bedre til å lagre enkle nettsteder enn kurs.

#2. SingleFile

Du kan bruke en utvidelse av typen SingleFile, som lagrer en komplett nettside i én enkelt HTML-fil. I utgangspunktet virker det som en god løsning fordi den unngår den klassiske ressursmappen som nettleseren lager.

Resultatet ser som regel bedre ut, men ofte løser det heller ikke problemet.

Først fordi den genererte filen kan veie flere hundre megabyte fordi innebygde skrifttyper, enorme stiler og mye kode som ikke var en del av kursinnholdet lagres inne i HTML-en.

Dessuten, når innholdet genereres dynamisk (nettside laget med JS-rammeverk som Vue eller React) klarer ikke utvidelsen å hente det.

Og på toppen av det fortsetter de samme grunnproblemene fra forrige løsning:

• Lenkene fortsatte å peke til nettsiden online.
• Det ble lagret en tung kopi av siden.
• Det ble ikke generert en navigerbar lokal struktur.
• Det var ikke praktisk å gjenta dette for 70, 80 eller 90 leksjoner.

Da er det klart at SingleFile fungerer for å lagre en isolert side, men ikke for å gjøre om et helt kurs til en ren lokal versjon.

#3. Bruke en Markdown-utvidelse

Neste alternativ er å bruke en utvidelse av typen MarkDownload, laget for å konvertere en nettside til Markdown.

Tilnærmingen gir mening hvis du vil:

• Hente ut bare teksten.
• Fjerne unødvendig design.
• Generere lette filer.
• For senere å slå dem sammen i et dokument eller i en lokal HTML.

Problemet er at utvidelsen foreløpig ikke er tilgjengelig i Chrome Web Store. 

Det finnes alternative utvidelser, men den jeg har brukt tidligere var denne, så jeg forklarer ideen og lar deg undersøke andre lignende alternativer.

#4. Skript i konsollen

Neste vei er å lage et lite skript fra nettleserkonsollen.

Det finnes to veier; tilnærmingen i den første er:

1. Åpne kursets indeksside.
2. Lese alle lenkene til leksjonene.
3. Gjøre fetch() for hver URL.
4. Hente ut innholdet.
5. Generere én lokal HTML.

Hvis du ikke programmerer, genererer ChatGPT skriptet uten problem for deg.

Det gode er at dette lar deg automatisere prosessen når du først har logget inn, men det er sannsynlig at sidens sikkerhetspolicy forbyr det.

Du kan prøve en annen tilnærming, også fra konsollen:

1. Åpne et nytt vindu.
2. Navigere til hver leksjon slik brukeren ville gjort.
3. Vente til den har lastet.
4. Lese DOM-en i det vinduet.
5. Hente ut innholdet.

Det problemet du kan møte her på dynamiske sider er at nettleseren ikke alltid lar deg kontrollere det vinduet godt, lese innholdet eller oppdage når det faktisk var lastet.  

Ingen av de to metodene er en robust løsning, men jeg forteller om dem fordi jeg har brukt dem i enkelte situasjoner og de kan være nyttige. Selv om jeg vil si at du heller bør gå videre til neste.

#6. Tampermonkey 

I utgangspunktet den mest komplekse, siden den krever:

• Å installere en utvidelse.
• Å generere et skript.
• At det kjøres inne i hver URL.

Men Tampermonkey gjør det ganske mye enklere, siden det lar deg laste inn et eget skript automatisk når du besøker bestemte URLs.

Her går nettleseren selv inn i hver leksjon og skriptet kjøres inne på den lastede siden.

Flyten er:

1. Indeksside.
2. Tampermonkey samler lenker.
3. Navigerer til leksjon 1.
4. Fanger synlig innhold.
5. Lagrer status i localStorage.
6. Navigerer til leksjon 2.
7. Fanger innhold.
8. …
9. Genererer endelig HTML.

Dette har mye større sjanse til å fungere alltid. 

Nøkkelen er å finne den faktiske containeren for kursinnholdet, noe man gjør ved å inspisere URL-en til en leksjon for å finne hvilken HTML-blokk som inneholdt det nyttige innholdet.

Det er vanligvis .main-content eller #lesson-content eller noe lignende. Det avhenger av hvordan kursnettsiden er bygget.

Når du har funnet det, lager du et skript som gjør følgende:

1. Kjører bare på kursets URLs.
2. Legger til et lite flytende panel med knapper (valgfritt).
3. Samler lenkene til leksjonene fra kursindeksen.
4. Lagrer disse lenkene i localStorage.
5. Navigerer automatisk gjennom hver leksjon.
6. Venter til #lesson-content finnes.
7. Kloner den blokken.
8. Rydder skript, stiler, knapper, iframes og unødvendige attributter.
9. Gjør bilder og lenker om til absolutte URLs.
10. Lagrer hver fangede leksjon i localStorage.
11. Til slutt genererer det én nedlastbar HTML-fil.

Resultatet vi var ute etter var en fil som den vi nevnte i introen curso-local.html.

Forresten, du trenger ikke å kunne programmere. Ikke engang HTML. Du ber ChatGPT om skriptet, og den lager det for deg (slik gjorde jeg det).

Det viktige er at du kjenner formelen og forstår hvordan den fungerer i store trekk, men selve koden genererer KI-en for deg.

Trinn for trinn for å lagre et nettkurs på maskinen din

Dette er trinn for trinn forklart.

Trinn 1: installere Tampermonkey

Det første er å installere Tampermonkey.

I Chrome, på grunn av dagens begrensninger, kan det være nødvendig:

1. Å installere utvidelsen.
2. Gå inn på chrome://extensions/.
3. Aktivere utviklermodus (bryteren øverst til høyre).
4. Tillate kjøring av brukerskript.
5. Gi utvidelsen tillatelse til å kjøre på kursnettsiden.

Dette er viktig fordi hvis Tampermonkey ikke har tillatelser, vises ikke panelet selv om skriptet er riktig.

Trinn 2: lage skriptet

I Tampermonkey:

Dashboard > Create a new script

Du sletter det opprinnelige innholdet og lager skriptet ditt.

Her legger jeg igjen skriptet som ChatGPT genererte for meg, i tilfelle du er utvikler og vil ta en titt, tilpasse det eller prøve det i ditt tilfelle. Husk å endre kursets URL:

Trinn 3: åpne indekssiden til nettkurset

Du må gå inn på kursets startside. Hvis den krever login, logg inn først og gå inn på forsiden.

Trinn 4: sjekke at panelet vises

Hvis du bruker skriptet jeg legger igjen her, skal det når kursiden lastes dukke opp et svart panel øverst til høyre med tre knapper:

• Test 3
• Todo
• Borrar estado

Hvis det ikke vises, må du sjekke:

• At Tampermonkey er aktivert.
• At skriptet er aktivert.
• At @match stemmer med kursets URL.
• At utvidelsen har tillatelse til den nettsiden.

Trinn 5: slette status før testing

Før enhver test er det lurt å trykke på knappen Borrar estado.

Dette rydder tidligere fangster lagret i localStorage.

Det er viktig fordi gamle statuser kan bli liggende under testing og generere ufullstendige eller dupliserte filer.

Trinn 5: teste med 3 leksjoner

Etter å ha slettet status trykker du på knappen Test 3.

Det er ikke lurt å starte scraperen for hele kurset med en gang.

Skriptet går gjennom tre leksjoner og laster ned en HTML-fil.

Åpne den og sjekk:

• At indeksen har tre leksjoner.
• At titlene er riktige.
• At innholdet begynner med den virkelige teksten i leksjonen.
• At den ikke fanger footer.
• At det ikke dukker opp tomme blokker.

Trinn 6: kjøre full fangst

Hvis testen fungerer, er alt klart. Du trenger bare å:

1. Åpne den online indekssiden igjen.
2. Trykke Borrar estado.
3. Trykke Todo.
4. La nettleseren navigere alene.
5. Ikke lukke fanen.
6. Vente til den endelige HTML-en lastes ned.

Og da har du fått generert en flott lokal HTML-fil som komprimerer hele kurset til noen få kilobyte.

Men at den veier så lite har en hake. Bildene er nemlig lenket til den opprinnelige serveren, de er ikke lastet ned til PC-en din. Det betyr at URL-en deres en gang kan endres eller de kan bli slettet, med den konsekvensen for deg at du ikke får sett dem.

Du kunne gått én og én og lastet dem ned og endret URL-en i HTML-en, men jeg synes det gir lite mening. Derfor finnes det for meg et neste (valgfritt) trinn.

Trinn 7 (valgfritt): overføre innholdet til Word

Jeg sier Word, men du kan gjøre det i Google Docs hvis du foretrekker det. Et spørsmål om arbeidsflyt.

Uansett er dette trinnet veldig enkelt, siden du bare må:

• Åpne HTML-en med nettleseren.
• Velge alt innholdet (ctrl+a i Windows).
• Kopiere det (ctrl+c).
• Lime det inn (ctrl+v) i en ny Windows-fil. Det kan ta noen sekunder avhengig av kursets størrelse.
• Lagre det.

Nå vil bildene ha blitt limt inn i Word-filen og de er allerede dine.  

Ulempen er at filen ikke lenger vil veie noen få kilobyte, men megabyte. Og kanskje mange: i mitt siste kurs 181MB. Det er 136 sider med flere skjermbilder. Ingen spøk. 

Men det finnes en løsning på dette. Les videre.

Trinn 7 (valgfritt): overføre innholdet til PDF

Denne er enda enklere enn den forrige, men har et triks. Du må:

1. Åpne filen i Word.
2. Trykke på “Lagre som”.
3. Velge PDF.
4. I alternativene som vises, velge “Minste størrelse (publisering på nett)”:

Voila!

Fra 181 går den til 2MB, slett ikke dårlig. 

Ja, bildene mister litt kvalitet, men de oppfyller mer enn nok formålet med opplæringen.

Med dette får vi en PDF som veier veldig lite, med hele kurset, med bilder og lenker på PC-en vår, eller i opplæringsskyen vår hvis vi foretrekker det (og det bør vi foretrekke).

Begrensninger ved denne løsningen

Denne løsningen passer for kurs eller dokumentasjon i HTML der innholdet hovedsakelig er tekst, bilder og lenker.

Den passer ikke til å:

• Laste ned beskyttede videoer.
• Fange innhold levert via DRM.
• Lagre innebygde avspillere.
• Omgå betalinger eller tilgangsbegrensninger.
• Beholde 100% av plattformens opprinnelige design.
• Laste ned vedlegg som krever ekstra tillatelser.

Hvis kurset inneholder innebygde videoer i Cloudflare Stream, Vimeo, Wistia eller andre beskyttede avspillere, kan skriptet beholde plassen eller lenken, men det laster ikke ned videoen. Det er forskjellige ting.

Konklusjon

Hvis du vil eller trenger å lagre et kurs lokalt for alltid å ha det for hånden, eller komplett dokumentasjon for å gi den til en KI og stille spørsmål, har du flere alternativer.

Men hvis kilden krever login og har flere titalls eller hundrevis av URLs, er systemet med Tampermonkey det beste. 

Hvis det er færre enn ti URLs og du ikke vil gjøre det komplisert, kan du prøve de andre løsningene jeg nevner.

Jeg har prøvd mange systemer gjennom livet -automatiske og manuelle- og ingen er så rask og automatisk som dette. 

I hvert fall til KI-agentene gjør det for deg. Gratis, selvfølgelig.

Det skader ikke å spørre.