Jak pobrać kurs online na swój komputer 

Ja bardzo lubię czytać. Dlatego wolę kursy tekstowe niż wideo, format jest mi obojętny -Word, PDF albo HTML- to akurat tak.

Jestem też bardzo zazdrosny o szkolenia, które kupuję. Lubię mieć je uporządkowane i w chmurze, żeby móc dostać się do nich jak i kiedy chcę. Dlatego kiedy kurs jest wyłącznie online, próbuję pobrać materiały i zapisać je na swoim komputerze.

Tak mam w Mega chmurę z 37GB szkoleń. 

Bo gdybym tego nie robił, kiedy chcę obejrzeć kurs online kupiony kilka lat temu -może cię zdziwi, że nadal wracam do szkoleń kupionych ponad dziesięć lat temu, które wciąż są całkowicie aktualne- musiałbym pamiętać, od kogo go kupiłem, URL, użytkownika i hasło…

A do tego ufać, że kurs nadal jest przechowywany na tym serwerze i nie został usunięty ani przeniesiony na inną domenę.

Za dużo zmiennych, których nie kontroluję.

Krótko mówiąc, czuję się spokojniej, mając materiał na swoim komputerze.

Są więc różne sposoby, żeby go zapisać na swoim komputerze:

• Pobierając HTML strona po stronie.
• Kopiując treść lekcji i wklejając ją do Worda.
• Używając rozszerzeń, które przekształcają ją do formatu markdown.

I jeszcze kilka innych, które zaraz wyjaśnię.

Są przypadki prostsze i bardziej złożone. Dlatego opisuję kilka rozwiązań, a na końcu to ostateczne dla najtrudniejszego przypadku, gdy:

• Jest dużo URLs.
• Potrzebny jest login.
• Linki muszą wskazywać na pobraną treść, a nie na aktualny serwer.

Przy okazji, dotyczy to kursów, których główna treść to tekst i obrazy, z linkami. Końcowe rozwiązanie nie nadaje się do kursów wideo.

Jeszcze jedna uwaga: to rozwiązanie dotyczy nie tylko kursów. 

Stosunkowo nowy przypadek użycia, w którym robię to samo, to sytuacja, gdy chcę przekazać dokumentację na dowolny temat AI takiej jak NotebookLM, żeby zadawać jej pytania bezpośrednio. To jest o wiele wygodniejsze niż samodzielne grzebanie w URLs w poszukiwaniu czegokolwiek.  

Jeśli próbowałeś poruszać się po dokumentacji Google Analytics dla deweloperów albo po dokumentacji Google Cloud, wiesz, o czym mówię.

Główne problemy: wiele lekcji, login i linki

Kursy zwykle są zbudowane jako kolekcja lekcji online. Każda lekcja ma własny URL, mniej więcej o takiej strukturze:

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

Platforma zwykle pokazuje boczny indeks z lekcjami, który pozwala się między nimi poruszać.

Moim celem jest uzyskanie czegoś takiego lokalnie:

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

Albo jeszcze lepiej, jednego pliku HTML z całym kursem, w stylu curso-local.html.

Z wewnętrznym indeksem, linkami-kotwicami ułatwiającymi nawigację i całą treścią lekcji jedną po drugiej, jakby to był PDF.

Poniżej możliwe rozwiązania.

Opcje zapisywania kursu na komputerze

Mamy kilka możliwości, o różnym stopniu złożoności i dla różnych sytuacji (mniej lub więcej URLs, potrzeba loginu lub nie, zapisywanie obrazów albo utrzymanie linków do aktualnego serwera…).

Wyjaśnię je od najprostszej do najbardziej złożonej.

#1. “Zapisz jako” z przeglądarki

Pierwsza droga jest najbardziej oczywista:

Plik > Zapisz jako > Kompletna strona internetowa

To pobiera stronę HTML i folder z powiązanymi zasobami: CSS, obrazami, skryptami, fontami itd.

Problem polega na tym, że ta metoda działa w miarę dobrze dla prostych stron z niewieloma URLs, ale nie dla dużych kursów. Bo oprócz czasu poświęconego na pobranie 80 URL-i jeden po drugim, pojawiają się inne komplikacje:

1. Linki wewnętrzne nadal wskazują na URL online.
2. Każda strona tworzy własny folder zasobów.
3. Naprawdę użyteczna treść jest bardzo mała w porównaniu z całkowitym rozmiarem HTML.
4. Lokalna nawigacja między lekcjami nie jest rozwiązana (trzeba później sięgać po skrypty).
5. Jest za dużo niepotrzebnej treści: nagłówek, menu, footer, skrypty, piksele, style, chat, zasoby zewnętrzne itd.

Czyli technicznie dało się zapisać “stronę”, ale nie tworzyło to użytecznej wersji kursu.

Ta droga lepiej służy do zapisywania prostych stron internetowych niż kursów.

#2. SingleFile

Możesz użyć rozszerzenia typu SingleFile, które zapisuje kompletną stronę internetową w jednym pliku HTML. Na pierwszy rzut oka wydaje się dobrym rozwiązaniem, bo unika klasycznego folderu zasobów tworzonego przez przeglądarkę.

Wynik zwykle wygląda lepiej, ale często też nie rozwiązuje problemu.

Po pierwsze dlatego, że wygenerowany plik może ważyć kilkaset megabajtów ponieważ wewnątrz HTML zapisywane są osadzone fonty, ogromne style i dużo kodu, który nie był częścią treści kursu.

Poza tym, gdy treść generuje się dynamicznie (strona zrobiona we frameworkach JS, takich jak Vue albo React) rozszerzenie nie jest w stanie jej zebrać.

A do tego nadal pozostają te same podstawowe problemy z poprzedniego rozwiązania:

• Linki nadal wskazywały na stronę online.
• Zapisywana była ciężka kopia strony.
• Nie powstawała lokalna struktura do nawigacji.
• Nie było praktyczne powtarzanie tego dla 70, 80 albo 90 lekcji.

Wtedy staje się jasne, że SingleFile nadaje się do zapisania pojedynczej strony, ale nie do przekształcenia całego kursu w czystą wersję lokalną.

#3. Użyć rozszerzenia Markdown

Kolejna opcja to użyć rozszerzenia typu MarkDownload, zaprojektowanego do konwertowania strony internetowej na Markdown.

To podejście ma sens, jeśli chcesz:

• Wyciągnąć sam tekst.
• Usunąć niepotrzebny design.
• Wygenerować lekkie pliki.
• Żeby później połączyć je w dokument albo w lokalny HTML.

Problem w tym, że na razie rozszerzenie nie jest dostępne w Chrome Web Store. 

Są alternatywne rozszerzenia, ale to, którego używałem wcześniej, było właśnie tym, więc wyjaśniam ideę i zostawiam tobie poszukanie podobnych opcji.

#4. Skrypt w konsoli

Kolejna droga to stworzenie małego skryptu z konsoli przeglądarki.

Są dwie drogi; założenie pierwszej jest takie:

1. Otworzyć stronę indeksu kursu.
2. Odczytać wszystkie linki do lekcji.
3. Wykonać fetch() dla każdego URL.
4. Wyciągnąć treść.
5. Wygenerować jeden lokalny HTML.

Jeśli nie programujesz, ChatGPT bez problemu wygeneruje ci skrypt.

Dobre jest to, że pozwala to zautomatyzować proces, gdy już się zalogujesz, ale prawdopodobnie polityka bezpieczeństwa strony tego zabroni.

Możesz spróbować innego podejścia, również z konsoli:

1. Otworzyć nowe okno.
2. Przechodzić do każdej lekcji tak, jak zrobiłby to użytkownik.
3. Poczekać, aż się załaduje.
4. Odczytać DOM tego okna.
5. Wyciągnąć treść.

Problem który możesz tu napotkać na stronach dynamicznych polega na tym, że przeglądarka nie zawsze pozwala dobrze kontrolować to okno, czytać jego treść albo wykryć, kiedy rzeczywiście było załadowane.  

Żadna z tych dwóch formuł nie jest solidnym rozwiązaniem, ale opisuję je, bo używałem ich w pewnych momentach i mogą ci się przydać. Chociaż powiedziałbym, że lepiej przejść do następnej.

#6. Tampermonkey 

Na pierwszy rzut oka najbardziej złożone, bo wymaga:

• Zainstalowania rozszerzenia.
• Wygenerowania skryptu.
• Który uruchamia się wewnątrz każdego URL.

Ale Tampermonkey bardzo to ułatwia, bo pozwala automatycznie ładować własny skrypt, gdy odwiedzasz określone URLs.

Tutaj sama przeglądarka wchodzi w każdą lekcję, a skrypt uruchamia się wewnątrz załadowanej strony.

Przebieg jest taki:

1. Strona indeksu.
2. Tampermonkey zbiera linki.
3. Przechodzi do lekcji 1.
4. Przechwytuje widoczną treść.
5. Zapisuje stan w localStorage.
6. Przechodzi do lekcji 2.
7. Przechwytuje treść.
8. …
9. Generuje końcowy HTML.

To ma dużo większe szanse, żeby działać zawsze. 

Kluczem jest znalezienie rzeczywistego kontenera treści kursu, co osiąga się przez sprawdzenie URL lekcji, żeby zlokalizować który blok HTML zawierał użyteczną treść.

Zwykle jest to .main-content albo #lesson-content albo coś podobnego. Zależy od tego, jak złożona jest strona kursu.

Gdy już to wykryjesz, tworzysz skrypt, który robi następujące rzeczy:

1. Uruchamia się tylko na URLs kursu.
2. Dodaje mały pływający panel z przyciskami (opcjonalnie).
3. Zbiera linki do lekcji z indeksu kursu.
4. Zapisuje te linki w localStorage.
5. Automatycznie przechodzi przez każdą lekcję.
6. Czeka, aż istnieje #lesson-content.
7. Klonuje ten blok.
8. Czyści skrypty, style, przyciski, iframe’y i niepotrzebne atrybuty.
9. Zamienia obrazy i linki na absolutne URLs.
10. Zapisuje każdą przechwyconą lekcję w localStorage.
11. Po zakończeniu generuje jeden pobieralny plik HTML.

Szukanym rezultatem był plik taki jak ten, o którym wspominaliśmy we wstępie curso-local.html.

Przy okazji, nie musisz umieć programować. Nawet HTML. Prosisz ChatGPT o skrypt i robi go za ciebie (tak zrobiłem ja).

Ważne jest, żebyś znał formułę i z grubsza rozumiał jej działanie, ale sam kod generuje ci AI.

Krok po kroku, jak zapisać kurs online na komputerze

To jest wyjaśnione krok po kroku.

Krok 1: zainstalować Tampermonkey

Najpierw trzeba zainstalować Tampermonkey.

W Chrome, ze względu na obecne ograniczenia, może być konieczne:

1. Zainstalowanie rozszerzenia.
2. Wejście na chrome://extensions/.
3. Włączenie trybu dewelopera (przełącznik u góry po prawej).
4. Zezwolenie na wykonywanie skryptów użytkownika.
5. Nadanie rozszerzeniu pozwolenia na uruchamianie się na stronie kursu.

To ważne, bo jeśli Tampermonkey nie ma uprawnień, panel się nie pojawi, nawet jeśli skrypt jest poprawny.

Krok 2: stworzyć skrypt

W Tampermonkey:

Dashboard > Create a new script

Usuwasz początkową treść i tworzysz swój skrypt.

Tutaj zostawiam ci skrypt, który wygenerował dla mnie ChatGPT, gdybyś był deweloperem i chciał na niego zerknąć, dostosować go albo przetestować w swoim przypadku. Pamiętaj, żeby zmienić URL kursu:

Krok 3: otworzyć stronę indeksu kursu online

Trzeba wejść na stronę początkową kursu. Jeśli wymaga loginu, najpierw się zaloguj i wejdź na stronę główną.

Krok 4: sprawdzić, czy pojawia się panel

Jeśli używasz skryptu, który tu zostawiam, po załadowaniu strony kursu powinien pojawić się czarny panel w prawym górnym rogu z trzema przyciskami:

• Test 3
• Todo
• Borrar estado

Jeśli się nie pojawia, trzeba sprawdzić:

• Czy Tampermonkey jest aktywny.
• Czy skrypt jest włączony.
• Czy @match zgadza się z URL kursu.
• Czy rozszerzenie ma uprawnienia do tej strony.

Krok 5: wyczyścić stan przed testem

Przed każdym testem warto nacisnąć przycisk Borrar estado.

To czyści wcześniejsze przechwyty zapisane w localStorage.

To ważne, bo podczas testów mogą zostać stare stany, które wygenerują niekompletne albo zdublowane pliki.

Krok 5: przetestować na 3 lekcjach

Po wyczyszczeniu stanu naciśnij przycisk Test 3.

Nie warto uruchamiać scrapera od razu dla całego kursu.

Skrypt przejdzie przez trzy lekcje i pobierze plik HTML.

Otwórz go i sprawdź:

• Czy indeks ma trzy lekcje.
• Czy tytuły są poprawne.
• Czy treść zaczyna się od prawdziwego tekstu lekcji.
• Czy nie przechwytuje footera.
• Czy nie pojawiają się puste bloki.

Krok 6: uruchomić pełne przechwytywanie

Jeśli test działa, wszystko jest gotowe. Wystarczy:

1. Ponownie otworzyć stronę indeksu online.
2. Nacisnąć Borrar estado.
3. Nacisnąć Todo.
4. Pozwolić przeglądarce samej nawigować.
5. Nie zamykać karty.
6. Poczekać, aż pobierze końcowy HTML.

I już wygeneruje się świetny lokalny plik HTML, który kompresuje cały kurs do kilku kilobajtów.

No dobrze, ale to, że waży tak mało, ma haczyk. Obrazy są podlinkowane do oryginalnego serwera, nie zostały pobrane na twój PC. To oznacza, że w pewnym momencie ich URL może się zmienić albo mogą zostać usunięte, a konsekwencją dla ciebie będzie to, że nie będziesz mógł ich zobaczyć.

Mógłbyś pobierać je pojedynczo i zmieniać URL w HTML, ale moim zdaniem ma to niewiele sensu. Dlatego dla mnie istnieje kolejny (opcjonalny) krok.

Krok 7 (opcjonalnie): przenieść treść do Worda

Mówię o Wordzie, ale możesz zrobić to w Google Docs, jeśli wolisz. Kwestia przepływu pracy.

W każdym razie ten krok jest bardzo prosty, bo wystarczy:

• Otworzyć HTML w przeglądarce.
• Zaznaczyć całą treść (ctrl+a w Windows).
• Skopiować ją (ctrl+c).
• Wkleić ją (ctrl+v) do nowego pliku Windows. Możliwe, że zajmie to kilka sekund w zależności od rozmiaru kursu.
• Zapisać.

Teraz obrazy zostaną wklejone do pliku Word i już będą twoje.  

Minusem jest to, że plik nie będzie już ważył kilku kilobajtów, tylko megabajty. I może dużo: w moim ostatnim kursie 181MB. Bo to 136 stron z wieloma zrzutami ekranu. Żarty się skończyły. 

Ale jest na to rozwiązanie. Czytaj dalej.

Krok 7 (opcjonalnie): przenieść treść do PDF

Ten jest jeszcze prostszy niż poprzedni, ale ma trik. Musisz:

1. Otworzyć plik w Wordzie.
2. Kliknąć “Zapisz jako”.
3. Wybrać PDF.
4. W opcjach, które się pojawią, wybrać „Minimalny rozmiar (publikacja online)”:

Voila!

Z 181 schodzi do 2MB, naprawdę bardzo dobrze. 

Tak, obrazy tracą trochę jakości, ale z naddatkiem spełniają cel szkolenia.

W ten sposób mamy PDF ważący bardzo mało, z całym kursem, obrazami i linkami na naszym PC albo w naszej chmurze szkoleniowej, jeśli wolimy (a powinniśmy woleć).

Ograniczenia tego rozwiązania

To rozwiązanie służy do kursów lub dokumentacji w HTML, których treść to głównie tekst, obrazy i linki.

Nie służy do:

• Pobierania chronionych filmów.
• Przechwytywania treści serwowanych przez DRM.
• Zapisywania osadzonych odtwarzaczy.
• Omijania płatności lub ograniczeń dostępu.
• Zachowania w 100% oryginalnego designu platformy.
• Pobierania załączników wymagających dodatkowych uprawnień.

Jeśli kurs zawiera filmy osadzone w Cloudflare Stream, Vimeo, Wistia lub innych chronionych odtwarzaczach, skrypt może zachować miejsce albo link, ale nie pobierze filmu. To różne rzeczy.

Podsumowanie

Jeśli chcesz albo potrzebujesz zapisać kurs lokalnie, żeby mieć go zawsze pod ręką, albo pełną dokumentację, żeby przekazać ją AI i zadawać pytania, masz kilka opcji.

Ale jeśli źródło wymaga loginu i ma kilkadziesiąt albo kilkaset URLs, system z Tampermonkey jest najlepszy. 

Jeśli jest mniej niż dziesięć URLs i nie chcesz sobie komplikować życia, możesz spróbować innych rozwiązań, o których wspominam.

Próbowałem w życiu wielu systemów -automatycznych i ręcznych- i żaden nie jest tak szybki i automatyczny jak ten. 

Przynajmniej dopóki agenci AI nie zrobią tego za ciebie. Za darmo, oczywiście.

Prosić zawsze można.