ID.nl logo
Online documentatie maken
© PXimport
Huis

Online documentatie maken

De een vindt het een leuke bezigheid, de ander noodzakelijk kwaad, maar als creatieveling ontkom je er zelden aan: het bijhouden van documentatie. Voor jezelf, maar zeker ook voor anderen, is het erg praktisch bij te houden wat je hebt gedaan en die informatie online te zetten. Er zijn diverse tools die je daar bij helpen. In deze masterclass lichten we er enkele uit, en laten zien hoe je ze installeert en gebruikt.

In dit artikel leggen we uit hoe je online documentatie kunt maken en bijheiden. We kijken naar verschillende mogelijkheden, gaan aan de slag met de tools Docsify en BookStack.

Ook interessant voor jou: Website zonder database bouwen met flat-file CMS

Als je een server met allerlei toepassingen of lastige configuraties beheert, websites bouwt, knutselt met elektronica of programma’s schrijft, is het nuttig je stappen te documenteren. Als je netjes op papier zet hoe je dingen hebt aangepakt, dan kun je er zelfs na een langere pauze weer sneller mee verder. En ook anderen begrijpen wat je hebt gedaan en kunnen er eventueel mee verder. Met ‘op papier’ bedoelen we in dit geval natuurlijk digitaal. Bij het programmeren kun je uiteraard commentaar tussen de code zelf zetten, maar dat is niet altijd genoeg. Voor het documenteren kun je simpelweg een Word-document maken, maar er zijn ook praktische tools voor zoals Evernote en Joplin. Beide kun je via een applicatie op je pc gebruiken. Ze synchroniseren gegevens met de cloud. 

 

Deze tools zijn vooral praktisch als je de documentatie vooral voor jezelf schrijft. Maar als je wil dat meer mensen er eenvoudig toegang toe hebben, is het veel praktischer om documentatie online te zetten. In deze masterclass zullen we twee tools bespreken die dat mogelijk maken: Docsify en BookStack. Beide oplossingen zijn snel en eenvoudig in gebruik te nemen. Docsify werkt eventueel zonder server, BookStack heeft wél een server nodig, maar dat hoeft geen zwaar systeem te zijn. 

 

🟢Markdown als universele opmaaktaal

Als je documentatie gaat schrijven, is het handig om dat meteen in het Markdown-formaat te doen. Deze versimpelde opmaaktaal leent zich uitstekend voor gebruik in platte tekstbestanden, die meestal de extensie .md hebben. Vrijwel elke tool gaat uit van deze opmaaktaal. Omdat het een universele taal is, kun je documentatie altijd overzetten naar een ander systeem. De tool zelf zal Markdown naar html converteren voor weergave via een browser. Markdown biedt eenvoudige opmaakmogelijkheden, die meestal toereikend zijn. Zo kun je tekst bijvoorbeeld vet of cursief maken, koppen maken op diverse niveaus, en afbeeldingen of verwijzingen (links) invoegen. Veel tools gebruiken die voor navigatie-elementen. Markdown is soms wat te beperkt. Diverse tools breiden de syntax daarom uit met niet-standaard elementen. 

Markdown is een versimpelde opmaaktaal voor in platte bestanden.  Voor alle plaatjes geldt: klik op de afbeelding voor een grotere weergave.

Meerdere mogelijkheden 

Er zijn diverse handige tools voor het maken van online documentatie. Veel van deze tools werken met een of meerdere statische html-bestanden, die ze soms automatisch genereren. Zo’n statische site biedt diverse praktische voordelen. Zo’n site is om te beginnen razendsnel, omdat er geen server nodig is om gegevens te verwerken. Je kunt je documentatie bovendien eenvoudig met een browser bekijken en ook heel voordelig hosten. Dat laatste kan natuurlijk via een eigen server of hostingprovider, maar tevens op bijvoorbeeld Amazon S3 of op GitHub Pages. We gaan in deze masterclass een statische documentatiesite maken op basis van Docsify

 

Uitgebreidere pakketten 

Er bestaan ook uitgebreidere pakketten voor het schrijven van een documentatie-site. Enkele hebben veel weg van een contentbeheersysteem zoals WordPress, zij het toegespitst op het schrijven van documentatie en niet op het maken van een website. Bekende voorbeelden zijn Wiki.js en BookStack. Beide werken op een server met MySQL als database, al geeft Wiki.js de voorkeur aan PostgreSQL. Wiki.js is gemaakt op basis van Node.js, terwijl BookStack de taal php en het Laravel-framework gebruikt. Met die laatste gaan we in paragraaf ‘09 BookStack’ aan de slag. 

Op GitHub Pages kun je statische sites direct vanuit een GitHub-repository hosten. 

 

Statische site 

Bij tools die documentatie maken op basis van statische bestanden vormen een of meerdere html-pagina’s vaak de basis. Documentatie verdeel je doorgaans over verschillende tekstbestanden waarin je meestal met Markdown werkt. Ook bepaalde configuratieparameters en de structuur van je documentatie geef je over het algemeen via aparte bestanden aan. Daarna maak je de documentatie met een commando vanaf de opdrachtregel. Hier heb je dus wel een toepassing voor nodig. Meestal worden automatisch de html-pagina’s weggeschreven. Een bekend voorbeeld is het op Ruby gebaseerde Jekyll. Deze tool wordt vaak in combinatie met GitHub Pages gebruikt. Een alternatief is het in Python gemaakte MkDocs. Hier gaan we met Docsify aan de slag, dat in tegenstelling tot bovenstaande oplossingen geen statische bestanden genereert. De documentatie-site wordt in plaats daarvan automatisch via JavaScript opgebouwd met één enkele html-pagina en setje Markdown-bestanden. Je hebt dus geen server nodig. De documentatie is eenvoudig doorzoekbaar te maken. Ook zijn diverse uitbreidingen beschikbaar en kun je de documentatie eenvoudig voor een GitHub-project gebruiken. 

Docsify verwerkt automatisch je documentatie in Markdown-formaat. 

 

Starten met Docsify 

Docsify heeft zoals gezegd één html-pagina nodig. Je kunt deze eventueel handmatig maken volgens het voorbeeld van Docsify. Dit bestand zal voornamelijk de vereiste JavaScript-bestanden laden en je kunt ook enkele configuratieparameters opgeven. De documentatie zet je in aparte bestanden met de extensie .md. Heb je een server met Linux, dan kun je handig de tool van Docsify gebruiken om de vereiste bestanden te genereren, zodat je meteen een basis hebt om aan verder te werken. Deze tool installeer je via npm (Node Package Manager) met de opdracht: 

npm i docsify-cli -g 

Als je npm nog niet hebt draaien, dan voeg je die onder Ubuntu toe met: 

sudo apt install npm 

We gaan naar de thuismap met en maken een project in de submap ./docs met: 

cd ~  docsify init ./docs 

We kunnen we via een lokale webserver het resultaat bekijken: 

docsify serve ./docs 

Hiervoor ga je op hetzelfde systeem naar http://localhost:3000. Op een ander systeem in hetzelfde netwerk kun je localhost vervangen door het ip-adres. 

Via een eenvoudige opdracht genereren we de basis voor onze documentatie. 

 

Menu toevoegen 

Het toevoegen van extra pagina’s en een menu in de zijbalk voor navigatie is heel eenvoudig. We zorgen eerst dat een menu wordt geladen. Ga daarvoor met cd ~/docs naar de map met documentatie en open index.html met nano index.html. Verander de initialisatie van Docsify door de regel loadSidebar: true toe te voegen. Dit zorgt dat de zijbalk wordt geladen. Voeg optioneel de regel subMaxLevel: 2 toe. Dit zorgt er voor dat in de zijbalk ook automatisch een inhoudsopgave wordt aangemaakt op basis van de headers in de betreffende documenten. Het bestand index.html ziet er dan als volgt uit: 

<script>    window.$docsify = {      loadSidebar: true,      subMaxLevel: 2,      name: '',      repo: ''    }  </script> 

Bewaar de aanpassingen met Ctrl+O en verlaat de editor met Ctrl+X. Maak dan het menu met: 

nano _sidebar.md  

We gaan als voorbeeld één pagina genaamd gids.md toevoegen en zetten de volgende regels in het document: 

* [Home](/)  * [Gids](gids.md) 

Het bestand index.html bevat verwijzingen naar JavaScript en optionele parameters. 

 

Extra pagina’s 

We maken als laatste de extra pagina met: 

nano gids.md 

Eventueel kun je headers toevoegen, zodat de structuur netjes in de inhoudsopgave in de zijbalk worden getoond. Een header maak je in Markdown met # en een onderliggend niveau met ##. Voor uitgebreidere documentatie kun je nog derde niveau gebruiken met ###. Vergelijk het met h1, h2 en h3 bij het coderen van html. Als je de site opent in je browser zie je dat de inhoudsopgave netjes is bijgewerkt. Wil je ook het derde niveau in je inhoudsopgave zichtbaar maken dan kun je de parameter subMaxLevel wijzigen naar 3. Wil je dat een bepaalde header niet zichtbaar is in de inhoudsopgave, dan kun je erachter op dezelfde regel <!-- {docsify-ignore} --> zetten. Afbeeldingen kun je uiteraard ook toevoegen en zet je bij voorkeur in een eigen mapje, bijvoorbeeld met de naam images. In Markdown verwijs je er dan naar met: 

![Beschrijving](./images/naam.png) 

Onze eenvoudige documentatie in de browser met Docsify. 

 

Zoekmogelijkheid toevoegen 

Heel praktisch is dat je met Docsify een zoekmogelijkheid kunt toevoegen zonder dat een server nodig is om zulke verzoeken te verwerken. Het zoeken gebeurt aan de client-kant via JavaScript en niet op de server. Je hoeft alleen wat code aan het scriptblok op de pagina index.html en de plug-in zelf toe te voegen (de plug-in is een extern JavaScript-bestand). Open voor een voorbeeld de website van Docsify en ga via Getting Started naar de documentatie. Onder het kopje Customization kies je de optie List of Plugins. Je ziet dan bovenaan de beschrijving van de plug-in en de toevoegingen die nodig zijn aan het scriptblok. Er zijn een paar kleine aanpassingen nodig: zo geef je aan welke bestanden doorzocht moeten worden. Optioneel kun je de Engelstalige teksten (zoals Type to search) desgewenst veranderen naar het Nederlands. Voeg daarna ook de aanroep naar de externe plug-in toe (search.min.js). In de zijbalk zie je nu direct een vak waar je een zoekwoord kunt invullen, waarna direct de resultaten getoond worden. 

 

Meer uitbreidingen 

Je kunt Docsify op meerdere manieren uitbreiden. Zo zijn er verscheidene thema’s aanwezig die je via het bestand index.html kunt laden. Ook zijn er andere praktische plug-ins beschikbaar. Zo kun je Google Analytics activeren om bezoekersaantallen in te zien. En voor blokken met code kun je via een plug-in een button toevoegen om die code naar het klembord te kopiëren. Verder kun je content verdelen over tabbladen en discussies mogelijk maken via Disqus. Via de community zijn nog talloze andere plug-ins beschikbaar. 

 

Als je het leuk vindt, kun je ook relatief eenvoudig zelf een plug-in maken. Middels zogeheten hooks kun je diverse acties programmeren die ‘inhaken’ op gebeurtenissen in Docsify. Wil je je documentatie koppelen aan je project op GitHub? Voeg dan de hele map docs aan de master-branche van je repository toe. In de instellingen van je repository op GitHub kies je deze map vervolgens als bron voor GitHub Pages. 

Voor Docsify zijn talloze uitbreidingen te verkrijgen. 

BookStack 

BookStack stelt iets hogere eisen aan de server. Het werkt op basis van een (bij voorkeur) recente versie van php met het populaire Laravel-framework. Verder gebruikt BookStack MySQL voor opslag. Bestanden zoals afbeeldingen worden los van de database bewaard. De site van BookStack geeft meer uitleg over de systeemeisen en biedt ook toegang tot een demopagina, waarin je alle features kunt uitproberen. Ook op een lichte server werkt de toepassing overigens heel soepel. 

 

Als je een Linux-server hebt met bijvoorbeeld Ubuntu, dan installeer je het hele pakket heel eenvoudig via een script. Daarna kun je er meteen mee aan de slag. Voor de installatie zijn er overigens ook enkele andere opties. Zo kun je een handmatige installatie uitvoeren waarbij je het project vanaf GitHub ophaalt. Daarna kun je met de tool Composer de vereiste php-componenten installeren. Verder zijn er containers voor Docker beschikbaar. We raden de installatie via het script aan, vooral omdat je daarna altijd nog handmatige aanpassingen kunt maken. 

 

Installatie 

We gebruiken voor deze masterclass het installatiescript. Gebruik het alleen op een nieuw systeem, want het kan een bestaande configuratie van bijvoorbeeld een webserver overschrijven! De instructies voor de installatie vind je via www.kwikr.nl/bookins. Onder het door ons gebruikte Ubuntu 20.04 komt het neer op het downloaden en uitvoerbaar maken van het installatiescript, waarna je het kunt uitvoeren als gebruiker met root-rechten. Er kunnen enkele extra tools nodig zijn die je het best vooraf installeert met: 

sudo apt-get install software-properties-common 

Hierna start je de installatie met: 

wget https://raw.githubusercontent.com/BookStackApp/devops/main/scripts/installation-ubuntu-20.04.sh  chmod a+x installation-ubuntu-20.04.sh  sudo ./installation-ubuntu-20.04.sh 

Voor andere versies van Ubuntu verschilt alleen de naam van het installatiescript. Alle onderdelen worden automatisch geïnstalleerd en geconfigureerd. Als dit is afgerond, zal het script als laatste vragen op welk domein je BookStack gaat hosten. Ga je geen domeinnaam gebruiken, of wil je dit via een reverse proxy oplossen, dan kun je ook gewoon het ip-adres van de bewuste server invoeren. 

BookStack installeer je eenvoudig via een script op een kale server. 

 

Handmatige aanpassingen maken 

De webbestanden van BookStack vind je na de installatie onder /var/www/bookstack. Je kunt hier eventueel handmatig aanpassingen maken. Het bestand .env bevat bijvoorbeeld de gekozen domeinnaam of het ip-adres en ook enkele aanvullende instellingen. Als webserver wordt Apache gebruikt. Deze vind je onder /etc/apache2. De configuratie voor BookStack staan in het mapje sites-available en heet bookstack.conf. Als je het ip-adres of de domeinnaam verandert, adviseren we dat in beide bestanden aan te passen. 

Profiel bewerken 

Na de installatie kun je op de domeinnaam of het ip-adres inloggen met de gebruikersnaam admin@admin.com en het wachtwoord password. Pas deze gegevens direct aan via je profielpagina. Je kunt hier ook je voorkeurstaal wijzigen naar het Nederlands. Optioneel kun je tweestapsverificatie aanzetten. Er is dan een extra code nodig om in te loggen. Hiervoor kun je bijvoorbeeld Google Authenticator op je smartphone gebruiken. Op je profielpagina kun je ook een API-token maken. Je kunt de API gebruiken om via andere systemen toegang tot content te krijgen. Ook kun je zogeheten webhooks toevoegen. Als iemand bijvoorbeeld een boek maakt of bewerkt, kun je automatisch een melding naar andere systemen sturen, bijvoorbeeld een tekstkanaal in een Discord-server. 

Via je profielpagina maak je een API-token voor toegang vanaf andere systemen. 

Gebruikers en rollen 

Standaard moeten gebruikers zijn ingelogd voor toegang tot de inhoud van BookStack. Via Instellingen regel je eventueel openbare toegang. De standaardeditor voor het bewerken van pagina’s kun je aanpassen van wysiwyg naar Markdown. Verder kun je optioneel registratie mogelijk maken. Gebruikers kunnen zich dan als gebruiker aanmelden en krijgen een standaard gebruikersrol toegekend. Handmatig gebruikers toevoegen kan op de pagina Instellingen onder Gebruikers. Je kunt gebruikers een bepaalde rol toekennen. Onder Rollen zie je wat voor elke rol mogelijk is en kun je ook extra rollen toevoegen, waarbij je zelf precies aanvinkt wat er mogelijk is. Dit betreft onder meer de mogelijkheid om boekenplanken, boeken, pagina’s en hoofdstukken te maken, bekijken of bewerken. 

Rollen voor gebruikers kun je flexibel aanpassen of toevoegen. 

Structuur aanbrengen 

Een sterk punt van BookStack is dat je hiermee een heel omvangrijke structuur kunt aanbrengen in je content. Die hiërarchie begint met een of meerdere boekenplanken die je een herkenbare naam geeft. Je geeft ze desgewenst ook een leuke omslagfoto en voegt labels toe. Op zo’n boekenplank zet je boeken die elk verschillende pagina’s kunnen bevatten. En die pagina’s verdeel je optioneel ook weer in hoofdstukken. Dit alles is vooral handig als je het echt nodig hebt. Maar je kun er ook een beetje in verdwalen. Het blijft eenvoudiger door de boekenplanken niet te gebruiken. In dat geval is het handig om via de instellingen de startpagina te veranderen naar een specifiek boek of pagina. De hoofdstukken hoef je ook niet per se te gebruiken. Je kunt beginnen met het schrijven van pagina’s die je later, wanneer het nodig is, in hoofdstukken kunt onderbrengen. 

BookStack werkt met boekenplanken, boeken, hoofdstukken en pagina’s. 

 

Content toevoegen 

Als voorbeeld beginnen we met het maken van een nieuw boek onder Boeken. We geven het een naam en voegen eventueel een omschrijving en omslagfoto toe. Optioneel kun je enkele labels invoeren die helpen de inhoud te categoriseren. Je kunt nu een pagina of hoofdstuk toevoegen. Als je het boek opent, kun je via de optie Sorteer nog steeds de hoofdstukken en de pagina’s die onder dat hoofdstuk vallen flexibel veranderen. Denk aan het verplaatsen van een pagina naar een ander hoofdstuk of het veranderen van de volgorde van pagina’s. 

We voegen een boek toe voor een project dat we gaan documenteren. 

 

Flexibele editor 

Het opmaken van pagina’s is zeer flexibel, zeker als je de wysiwyg-editor gebruikt. Je kunt bijvoorbeeld koppen op verschillende niveaus maken, opmaakstijlen kiezen en onderdelen toevoegen zoals opsommingslijsten, codeblokken of markeringen (feitelijk blokjes die informeren of waarschuwen voor gevaar). Uiteraard kun je ook foto’s toevoegen. Hiervoor is een fotobibliotheek ingebouwd, zodat je foto’s kunt hergebruiken. Deze heeft een uploadfunctie waarmee je foto’s direct kunt slepen vanaf je pc. Er is zelfs een tool ingebouwd om een tekening, schets of diagram te maken en in te voegen. Het werken met tabellen gaat ook heel makkelijk, met nuttige opties om naderhand bijvoorbeeld bepaalde rijen of kolommen in te voegen of te verwijderen. 

BookStack heeft een uitgebreide editor voor het bewerken van je documenten. 

Extra’s 

BookStack heeft nog meer handige features. Zo zie je onder Controlelogboek welke wijzigingen er zijn gemaakt, door welke gebruiker en op welke datum. Ook zie je het ip-adres. Het overzicht filteren je op datum of beperk je tot een specifieke gebruiker. Verder kun je onder Onderhoud ongebruikte afbeeldingen laten verwijderen. Verwijderde boekenplanken, boeken, hoofdstukken en pagina’s belanden eerst in een prullenbak, die je in dit onderdeel kunt openen. Items in de prullenbak kun je herstellen of definitief verwijderen. Zo nu en dan kunnen extra onderhoudstaken nodig zijn, zoals het maken van een back-up (zie kader ‘Onderhoudstaken uitvoeren’). 

Onderhoudstaken uitvoeren 

Bij Docsify is het relatief eenvoudig om je documentatie veilig te stellen in de vorm van een back-up. Alles staat immers in aparte bestanden onder de aangemaakte map. Bij BookStack is het iets meer werk. Je zou een back-up van het hele systeem kunnen maken, als je dat praktisch vindt. Een back-up van je database en de belangrijkste bestanden volstaat ook. Om een back-up van de database te maken kun je een zogenoemde ‘dump’ maken met de opdracht: 

sudo mysqldump -u root bookstack > databasebackup.sql 

Dit sql-bestand bevat de volledige database. Om de configuratie van BookStack en alle uploads zoals bijlagen en afbeeldingen veilig te stellen kun je een tar-opdracht geven. Ga met naar de bewuste map met de bovenste opdracht en geef dan de tweede opdracht:

cd /var/www/bookstack  tar -czvf filesbackup.tar.gz .env public/uploads storage/uploads 

In de documentatie vind je meer tips over nuttige onderhoudstaken. Zo kun je via de opdrachtregel bijvoorbeeld updates installeren of een administratieve gebruiker aanmaken. Ook kun je andere authenticatiemethoden toevoegen zoals LDAP, SAML 2.0 of OpenID Connect. Gebruikers kunnen zich dan ook via die systemen aanmelden. Dat is vooral in bedrijfsomgevingen nuttig. 

 

In de documentatie vind je tips voor verschillende onderhoudstaken. 

 

 

▼ Volgende artikel
Van scherm naar papier: de beste manier om webpagina’s te printen
© ZHURAVLEV ANDREY
Huis

Van scherm naar papier: de beste manier om webpagina’s te printen

Webpagina’s bekijken op een computer, tablet of telefoon gaat meestal prima, maar zodra je een pagina wilt afdrukken, kan dat lastiger zijn. Vaak komen er advertenties, vreemde lay-outs of overbodige elementen mee. Met deze tips sla je webpagina’s netjes op als pdf en print je ze zonder rommel, zodat je alleen de essentie overhoudt.

In dit artikel laten we zien hoe je webpagina’s kunt afdrukken zonder advertenties en onnodige elementen:

  • Gebruik de ingebouwde pdf-afdrukfunctie in je browser
  • Activeer de leesmodus om alleen de essentiële tekst te behouden
  • Maak een scrolbare schermafdruk
  • Gebruik PrintFriendly om advertenties en overbodige content te verwijderen

Lees ook: Mobiel printen vanaf je smartphone of tablet: zo werkt het

Webpagina’s per definitie gemaakt om op computerschermen te bekijken. De tekst is verdeeld in allerlei frames en er staan op veel plekken ook nog eens reclame. Heb je een printje nodig, dan zijn er verschillende oplossingen om de inhoud papier- en inktzuinig af te drukken. Je kunt de tekst uiteraard kopiëren en plakken in een tekstverwerker, maar deze tussenstap is omslachtig. Helaas voorzien slechts weinig websitebouwers hun webpagina’s van een knop waarmee er een printvriendelijke weergave mogelijk is. En ook zijn er sites die hun inhoud zelfs beschermen en het heel lastig maken om content over te nemen, laat staan dat je die kunt afdrukken. In dit artikel bieden we hier oplossingen voor.

Print to pdf

Op elk besturingssysteem heeft de browser tegenwoordig een ingebouwde pdf-afdrukfunctie. Selecteer de optie Afdrukken in het menu van de browser en kies Opslaan als PDF. Op de moderne versies van Windows is het sowieso mogelijk om af te drukken naar pdf vanuit iedere applicatie met een virtuele printer. Geef de opdracht Afdrukken en daarna selecteer je als printapparaat de optie Microsoft Print to pdf. Net als bij elke gewone printer geef je in deze virtuele printer de pagina’s aan die je wilt vastleggen. Ook kun je kiezen of je de pdf in kleur of zwart-wit wilt afdrukken/opslaan.

Bepaal of je een pdf-afdruk in kleur of zwart-wit wilt.

Leesmodus

Wanneer je een webpagina afdrukt, staan de advertenties, afbeeldingen, banners en soms zelfs filmpjes in de weg. Probeer in dat geval de Readermodus of Leesmodus. Dit geldt zowel voor een afdruk op papier als een afdruk naar pdf. Deze weergave stript de webpagina van alles wat de inhoud verstoort.

Deze Leesmodus activeer je eenvoudig in Mozilla Firefox, Microsoft Edge, Brave, Safari en vele andere browsers. In Edge klik je bijvoorbeeld op de documentvormige knop die aan de rechterkant van de adresbalk verschijnt wanneer je een online artikel leest.

Google Chrome maakt het iets lastiger. Daar moet je rechtsboven op de drie puntjes klikken, dat is de menuknop. Daarna kies je Meer hulpprogramma’s / Leesmodus. Deze leesweergave verschijnt in een zijbalk en daar kun je de achtergrond, de regelafstand en zelfs het lettertype en lettergrootte aanpassen. Als je rechtstreeks vanuit de leesmodus in Chrome wilt afdrukken, dan heb je de extensie Reader View uit de Chrome Webstore nodig. Wanneer je deze activeert als je een webpagina bekijkt, verschijnt er een schoongemaakte tekst met een verticale knoppenbalk waar ook de afdrukknop bij staat.

Met de Reader View-extensie pas je het lettertype, de lettergrootte en de achtergrondkleur aan.

Scrolbare schermafdrukken

Zo’n afdruk vanuit de leesmodus is een prima oplossing als het je alleen om de tekst te doen is. Je kunt ook een afbeelding van de webpagina opslaan die er precies uitziet zoals in de browser. Hiervoor druk je op Windows-toets+Shift+S of op de PrintScreen-toets. Het is zelfs mogelijk een schermafdruk te maken van de volledige pagina, inclusief het gedeelte dat je niet kunt zien op je scherm. We noemen dit een scrolbare afbeelding.

In Edge druk je hiervoor op Ctrl+Shift+S, waarmee een overlay verschijnt met enkele screenshotopties. Kies voor Volledige pagina vastleggen. Daarmee krijg je een nieuw scrolvenster dat de volledige pagina omvat. Bovenaan staan enkele tools om zaken op de afbeelding te markeren.

In Firefox moet je de knop nog aan de knoppenbalk toevoegen. Klik rechtsboven op de drieregelige menupictogram en kies Meer hulpmiddelen en dan Werkbalk aanpassen.

Zoek in de beschikbare knoppen het pictogram Schermafbeelding en sleep dit naar de Firefox-werkbalk. Als je op deze knop klikt, heb je de keuze tussen Volledige pagina opslaan en Zichtbaar gebied opslaan.

In Google Chrome klik je op het menu met de drie stippen rechtsboven en kies je voor Meer hulpprogramma’s / Hulpprogramma’s voor ontwikkelaars. Klik in de console op de drie stippen naast het tandwieltje en selecteer in de vervolgkeuzelijst Run command. Typ het woord Screenshot in de regel bovenaan in de console. Dan verschijnen er vier opties; kies voor Capture full size screenshot.

In Edge heb je de keuze tussen Gebied vastleggen en Volledige pagina vastleggen .

PrintFriendly

Websitestripper

Een uitstekende websitestripper is PrintFriendly. Je spreekt deze tool aan via een website of via een browserextensie. Op de eerste manier kopieer je het internetadres van de webpagina die je op papier wil hebben. Daarna bezoek je www.printfriendly.com. Daar plak je het adres in het witte adresvak. Je kunt ook een pdf-bestand in het upload-vak slepen. Vervolgens klik je op Preview. Je zult zien dat de online tool de webpagina optimaliseert om af te drukken. Advertenties en banners worden automatisch verwijderd.

Je kunt het geoptimaliseerde document nog verder afslanken. Wanneer je met de muisaanwijzer over een alinea of een afbeelding gaat, wordt dit onderdeel automatisch geselecteerd en verschijnt een knop in de vorm vuilnisbakje. Als je op dit pictogram klikt, verdwijnt de selectie. Bovenaan de voorvertoning staat ook nog de knop Undo. Daarmee kun je steeds een aantal stappen terug. Op deze manier beslis je zelf welke inhoud je wilt overhouden. Met enkele knoppen druk je het resultaat af, bewaar je het als pdf, of verstuur je het als bijlage in een mail.

Met PrintFriendly kun je zowel afbeeldingen als alinea’s verwijderen. 

Veel te printen?

Vergeet het printpapier niet!

Installeren

Om het nog gemakkelijker te maken, vind je op www.printfriendly.com onder het menu Website Tools de extensie die je kunt installeren in Chrome , Firefox en Edge. Voor Safari, de browser van Apple, is er een bookmarklet die deze browser snel naar de webpagina van deze dienst brengt. In de drie andere browsers voeg je de PrintFriendly-knop toe aan de werkbalk. Wanneer je erop klikt, opent er een nieuw venster waarin je kunt aangeven welke onderdelen verwijderd mogen worden, zodat alleen de gewenste inhoud overblijft voor het afdrukken.

Op de website van PrintFriendly vind je de extensies om in browsers te installeren.

Geen kop- en voettekst meer

Bij het afdrukken van webpagina’s wordt in de kop- en voettekst allerlei informatie geplaatst, zoals de titel van de pagina, de url, de datum en de tijd. Deze gegevens maken de afdruk rommelig. Je kunt er ook voor zorgen dat deze informatie niet meer in je afdrukken verschijnt.

In Edge en Chrome klik je hiervoor op de knop met de drie puntjes rechtsboven. Kies dan voor Afdrukken, of gebruik de toetscombinatie Ctrl+P. Onderaan het dialoogvenster Afdrukken kies je de optie Meer instellingen en daarna scrol je naar beneden waar je het vinkje bij Kop- en voetteksten weghaalt.

In Firefox druk je eerst de Alt-toets in, zodat het menu bovenaan in beeld komt. Dan kies je voor Bestand / Afdrukken. In de zijbalk Afdrukken scrol je helemaal naar beneden. Daar zet je bij de Opties de Kop- en voetteksten uit.

In Safari op de Mac kies je voor Archief / Druk af. Dan zie je de optie Druk kop- en voetteksten af in het printdialoogvenster staan. Deze kun je uitschakelen.

Je kunt de kop- en voetteksten weglaten in de afdruk.

Beschermde webpagina’s

Je wilt een plan schrijven en daarvoor gebruik je uiteraard webbronnen. Helaas staat het artikel dat je nodig hebt op een beveiligde website. Je kunt de tekst niet afdrukken en ook niet kopiëren. Toch zijn er drie manieren waarmee je deze beveiliging kunt omzeilen.

De eerste: Je schakelt JavaScript uit. De beveiliging is namelijk meestal ingesteld met behulp van JavaScript. We leggen uit hoe je dit doet in Chrome, in andere browsers is de methode vergelijkbaar.

Ga via de drie puntjes rechtsboven naar Instellingen / Privacy en beveiliging. Kies dan voor Site-instellingen aan de rechterkant. Scrol naar beneden op deze pagina en klik op JavaScript. Bij Geen toestemming om JavaScript te gebruiken, klik je op de knop Toevoegen om het gebruik van JavaScript door de website te blokkeren. In het pop-upvenster typ je de url van de website waarvan je JavaScript wilt uitschakelen en bevestig je met de knop Toevoegen. Ga nu terug naar de website waarvan je de tekst wilt kopiëren en vernieuw de pagina. Probeer de tekst opnieuw te kopiëren. Nu kun je de inhoud in een tekstverwerker plakken.

De tweede manier: Je activeert de leesmodus van de webpagina, zodat je alleen de tekst ziet. Meestal kun je daar de tekst toch kopiëren om die daarna te plakken en af te drukken.

Tot slot is er nog een derde manier: Je typt of plakt het internetadres in de html-to-text-converter, zoals https://txtify.it. Je klikt vervolgens op Convert. De broncode van de website wordt omgezet tot alleen maar tekst die je gemakkelijk kunt kopiëren en afdrukken.

Voeg de websites toe waarvoor JavaScript moet worden uitgeschakeld.

▼ Volgende artikel
Review Samsung Galaxy A56 – Weer een hit
© Rens Blom
Huis

Review Samsung Galaxy A56 – Weer een hit

De Galaxy A-serie levert Samsung al jaren verkoopknallers op, en grote kans dat ook de nieuwe Galaxy A56 een hit wordt. Dit toestel biedt namelijk een uitstekende prijs-kwaliteitverhouding en krijgt zes jaar updates. Lees alles over de smartphone in onze uitgebreide Samsung Galaxy A56 review.

Uitstekend
Conclusie

De Samsung Galaxy A56 is een typische smartphone voor het grote publiek. Hij laat geen steken vallen en blinkt eigenlijk ook nergens echt in uit. Het is gewoon een fijne smartphone met een goed scherm, lange accuduur en zes jaar updategarantie. Gelet op de straatprijs van circa 380 euro is de Galaxy A56 daarom een toestel met een uitstekende prijs-kwaliteitverhouding.

Plus- en minpunten
  • Functioneel, luxe ontwerp
  • Mooi scherm
  • Lange accuduur
  • Zes jaar updates
  • Geen microSD-kaartslot voor uitbreiding opslag
  • Macrocamera voegt weinig toe
  • Te veel nadruk op aanmaken Samsung-account

De Galaxy A-reeks van 2025 bestaat op moment van schrijven uit de A26, A36 en A56. Hoe hoger het getal, hoe completer en duurder het toestel. De adviesprijs van de A56 bedraagt 480 euro, maar na de release medio maart is de straatprijs van de smartphone eind april al gezakt naar 380 euro. Een veel vriendelijkere prijs. Ook de versie met meer opslagcapaciteit (256 GB in plaats van 128 GB) is al tientallen euro's in prijs gezakt.

©Rens Blom

Premium ontwerp

Kijk je naar de A56, dan kijk je zonder twijfel naar een moderne Samsung-smartphone. De A56 past precies in Samsungs straatje en dat vinden we helemaal prima, want het ontwerp komt luxe over en de smartphone houdt prettig vast. Ook fijn is dat de A56 waterdicht is en wat minder weegt dan zijn voorganger, de A55. Met 198 gram is het gewicht nu gangbaar voor een toestel met 6,7 inch-scherm. Door zijn afmetingen is de A56 wel lastig met één hand te bedienen. Daar staat tegenover dat het grote scherm zich goed leent voor het bekijken van filmpjes, het typen met twee handen en het spelen van games.

©Rens Blom

Het scherm bevalt ons sowieso erg goed. Het oledscherm heeft een Full-HD-resolutie, soepele 120Hz-verversingssnelheid en kan erg fel. De zomers aanvoelende dagen medio en eind april brachten een krachtig zonnetje met zich mee, maar we konden het scherm van de Galaxy A56 buiten goed aflezen.

Complete specificaties

Zoals we gewend zijn van de Galaxy A-serie, biedt ook de A56 een mooi totaalpakket aan functies voor een sympathieke prijs. Dat begint bij de processor. De nieuwe, door Samsung zelf ontwikkelde processor, is lekker snel en werkt samen met 8 GB werkgeheugen. Er zijn wat toestellen die beter omgaan met zware games, maar voor de meeste toepassingen is de A56 goed uitgerust.

©Rens Blom

De A56 heeft daarnaast ondersteuning voor e-sim (een digitale simkaart), lekker duidelijke luidsprekers en keuze uit 128 GB of 256 GB opslagcapaciteit. Omdat het prijsverschil tussen de twee opslagversies slechts enkele tientjes bedraagt, raden wij de meeste mensen aan om de 256GB-variant te kiezen. Waarom? Die heeft veel meer ruimte voor je apps, foto's, filmpjes en andere bestanden en niet te vergeten: updates die jarenlang beschikbaar komen. Omdat de smartphone geen microSD-kaartslot heeft, moet je het doen met de ingebouwde opslagcapaciteit. Als je de A56 jaren wilt gebruiken, lijkt het ons verstandig om eenmalig iets meer te betalen voor veel meer opslagruimte.

©Rens Blom

Snel opladen, voor Samsungs doen

Dan de accuduur, een punt waarop Galaxy A-smartphones al jaren (meer dan) prima scoren. De A56 zet die traditie voort. Hoewel de accucapaciteit met 5000 mAh zeker niet groter is dan gebruikelijk en het scherm met 6,7 inch van gangbare grootte is, weet de A56 toch een lange accuduur te realiseren. Wij hebben in de testperiode nooit moeite gehad om een lange dag door te komen, ook niet als we het toestel een uur als hotspot gebruikten om op onze laptop te kunnen internetten in de trein. Dat soort zaken trekken de smartphone-accu sneller leeg, maar de A56 is lekker zuinig.

Het opladen kan helaas niet draadloos, maar dat is een logische bezuiniging in een betaalbare smartphone. Opladen via de usb-c-kabel dus, die in de doos zit. De adapter dien je zelf te regelen. Het loont om een adapter te pakken of kopen die via het juiste protocol 45 watt of meer aan stroom levert. De Galaxy A45 kan namelijk laden met maximaal 45 watt. Dat is veel sneller dan de meeste andere Samsung-smartphones, waardoor de accu sneller vol is. In vergelijking met de concurrentie is 45 watt prima, maar niet bijzonder. Er zijn genoeg smartphones die 65 tot 100 watt aankunnen.

©Rens Blom

Camera's

Met de Galaxy A56 kun je mooie foto's schieten, vooral met de hoofdcamera van 50 megapixel. Die staat echt zijn mannetje. De groothoekcamera van 12 megapixel is minder goed, maar volstaat ook en legt een lekker wijd deel van de situatie vast. De macrocamera van 5 megapixel voegt naar onze mening weinig toe, maar zit ook niet in de weg. De A56 kan zoomen via de hoofdcamera, maar dan holt de kwaliteit wel achteruit.

De selfiecamera vinden we opvallend goed, wat een opsteker is voor wie graag selfies neemt of videogesprekken voert met zijn telefoon.

©Rens Blom

Van boven naar beneden: de hoofdcamera, groothoekcamera en een paar keer zoom.

Zes jaar updates

Een prettige gedachte bij de Galaxy A56 is dat Samsung zes jaar complete updates belooft. Je krijgt dus de komende jaren verschillende Android-upgrades en kunt ook zes jaar lang beveiligingsupdates verwachten. Erg netjes, gelet op de prijs van de telefoon.

©Rens Blom

Samsungs OneUI-softwareschil over Android heen is wat druk en wil héél graag dat je een Samsung-account aanmaakt. Dat is echter niet verplicht. OneUI biedt allerlei handigheidjes, waarvan een deel leunt op kunstmatige intelligentie (AI). Er valt veel te proberen.

Conclusie: Samsung Galaxy A56 kopen?

De Samsung Galaxy A56 is een typische smartphone voor het grote publiek. Hij laat geen steken vallen en blinkt eigenlijk ook nergens echt in uit. Het is gewoon een fijne smartphone met een goed scherm, lange accuduur en zes jaar updategarantie. Gelet op de straatprijs van circa 380 euro is de Galaxy A56 daarom een toestel met een uitstekende prijs-kwaliteitverhouding.