Onderwerpen:
- Over de auteur
- Over de website
- Hoe het ooit begon: HTML en Frontpage
- Een kijkje achter de schermen in WordPress
- De server
- Vertaling
Over de auteur:
Mijn naam is Marco van Wijk, 35 jaar oud en woonachtig in de omgeving van Rotterdam. Al mijn hele leven ben ik gek op alles wat met auto’s te maken heeft. Op mijn 16e was ik al in de garage als leerling monteur aan het werk. In de tien jaar die ik als monteur werkzaam was in de VAG- en BMW-garages heb ik de monteursopleidingen tot aan niveau 4 technisch specialist behaald. Sinds 2015 ben ik werkzaam als docent motorvoertuigentechniek. In 2018 heb ik de titel Bachelor of Science behaald aan de HTS Autotechniek in Arnhem na het afronden van de HBO-automotive (deeltijd)opleiding.
Ik koester warme herinneringen aan deze opleiding, met een blijvend gevoel van voldoening.
Naast mijn werkzaamheden als docent en auteur van deze website, houd ik me graag bezig met het schrijven van artikelen in het AMT en vindt u mij als presentator van kennissessies op het AMT-live.
Over de website:
In 2005 begon ik te experimenteren met het maken van websites. De huidige website dateert uit 2009. Sindsdien zijn er talrijke veranderingen geweest, zowel in het ontwerp als in de inhoud. Deze website wordt steeds populairder en zal blijven groeien in termen van onderwerpen en informatie. Op dit moment bevat de website al meer dan 350 pagina’s vol informatie. Gemiddeld ontvangen we tegenwoordig 100.000 unieke paginaweergaven per maand. De website heb ik zelf ontwikkeld en beheer ik volledig. Ik heb het thema ontworpen, alle pagina’s geschreven, veel afbeeldingen zelf gefotografeerd of getekend, en hij draait op mijn eigen server, gevestigd in mijn werkkamer thuis. Op deze pagina wil ik laten zien hoe de website in de afgelopen jaren is gegroeid tot wat hij nu is en wat er op de achtergrond gebeurt.
Het doel van deze website is om mensen die geïnteresseerd zijn in autotechniek inzicht te verschaffen in hoe bepaalde onderdelen en systemen werken. Veel informatie is elders op Google niet te vinden, vaak zonder afbeeldingen en meestal nog niet beschikbaar in het Nederlands. Met deze website wil ik zoveel mogelijk autotechnische informatie online beschikbaar maken. De site is afgestemd op de niveaus 2 tot en met 4 van de MBO-monteursopleidingen. De website is ook geschikt voor studenten die vanaf de HAVO/VWO doorstromen naar het HBO werktuigbouwkunde of automotive engineering.
Bewust heb ik ervoor gekozen geen advertenties te tonen, omdat ik me erger aan websites waar meer reclame staat dan tekst en je van alles moet wegklikken. Het tonen van reclame beschouw ik als vervuiling van mijn website. Daarom zijn er ook geen trackers of cookies vereist, en hoef ik als een van de weinige websites geen cookiemelding te tonen waar elke bezoeker akkoord moet gaan met de voorwaarden.
Bovendien houd ik de website voor iedereen vrij toegankelijk. Ik hanteer geen betaal- of inlogsystemen om toegang tot de website te verkrijgen. Deze site is gewoon volledig gratis en zal dat in de toekomst blijven. Een bijkomend voordeel is dat het voor mij ook makkelijker is om toestemming te krijgen van autofabrikanten om hun afbeeldingen te gebruiken, aangezien ik geen financiële belangen heb en veel fabrikanten het onderwijs ondersteunen.
Mocht u spel- of grammaticale fouten in de tekst ontdekken, dan verzoek ik u om het contactformulier in te vullen. Op die manier kan ik dit snel en eenvoudig corrigeren. Dit geldt natuurlijk ook als u aanvullingen heeft voor een specifiek onderwerp.
Hoe het ooit begon: HTML en Frontpage: Vanaf de allereerste concepten tot aan de website die in maart 2019 werd vervangen door de huidige versie, maakten we gebruik van het programma Microsoft FrontPage 2003.
Met behulp van FrontPage hebben we HTML-pagina’s gemaakt. In het ontwerpvenster kon het resultaat van de HTML-codes worden bekeken. De website bestond uit vier frames:
- Boven (header)
- Links (menu)
- Rechts (woordenboek)
- Midden (de inhoud van de site)
Om de site te openen, werden dus vier afzonderlijke HTML-pagina’s geladen in de frames. Wanneer een bezoeker via een zoekmachine niet op de index.htm-pagina terechtkwam, maar direct op de gezochte pagina, werd alleen dat frame weergegeven. De omliggende menu’s werden niet getoond. In dat geval werd alleen de blauwe pagina over het gehele scherm weergegeven en ontbraken de menu’s met knoppen rondom.
Ook verliep de zoekfunctie middels een complexe (geïntegreerde) methode via Google, en was er geen mobiele support, waardoor een tweede index-pagina was aangemaakt waar automatisch naartoe werd geschakeld wanneer men de site met een telefoon of tablet bezocht. Dit ging vaak goed, maar ook niet altijd. “Vroeger” was een HTML-site met frames populair, maar tegenwoordig zie je dit bijna nergens meer. De kennis die ik met de zelf-samengestelde HTML-codes heb opgedaan, helpen mij tot op de dag van vandaag wel bij het bijwerken van de huidige website.
Een kijkje achter de schermen in WordPress:
De HTML-based website is in maart 2019 volledig omgebouwd in het populaire WordPress CMS. Sommige bezoekers moesten in het begin even wennen aan de nieuwe navigatiestructuur, maar over het algemeen ontving ik positieve reacties.
In de loop der tijd heb ik ook steeds meer veranderingen doorgevoerd die het navigeren makkelijker en overzichtelijker maakt.
Met de site in het moderne WordPress CMS is de site er op een groot aantal punten op vooruit gegaan:
- Interface is strak en geeft een representatief uitstraling;
- Makkelijker om artikelen bij te werken;
- Tablet en mobiel vriendelijk (past zich automatisch aan de schermgrootte aan) dus geen aparte mobiele website;
- Een wijziging in het menu en/of interface van een pagina wordt automatisch op alle pagina’s doorgevoerd;
- SEO- (zoekmachine-) vriendelijk;
- Plugins maken veel handige functies mogelijk: interactieve knoppen, zoekfunctie, back-up en beveiliging, autoscroll, etc.
De volgende afbeelding toont het pagina-overzicht in WordPress. Vanuit dit scherm kunnen alle pagina’s worden opgezocht en veranderd, zonder de webinterface te openen.
Alle pagina’s op de website worden in Elementor gemaakt. Op de volgende afbeelding is het scherm van de Elementor-editor te zien. Links is de tekstbewerker te zien en rechts de live-weergave. Nadat er onderaan op “Bijwerken” wordt klikt, verschijnen de wijzigingen direct online. Men kan er ook voor kiezen om de pagina eerst als concept of privé op te slaan, alvorens deze online te publiceren.
Naast de tekstbewerker, biedt Elementor ook diverse interactieve mogelijkheden. Eén daarvan is de zgn. “Call to Action”. Met deze functie ontstaat er een interactieve knop die we kennen van de homepage en in de categorieën die vanuit de menu’s kunnen worden geopend.
In 2021 ontstonden er steeds meer problemen met de comptabiliteit tussen mijn WordPress thema en de moderne plugins en webbrowsers. Het thema was niet erg populair, dus werd na een paar jaren na release niet meer goed ondersteund of doorontwikkeld. Omdat een thema het uiterlijk van de website bepaalt, is het schakelen naar een ander thema niet eenvoudig en ook ongewenst. Ik heb in januari 2022 geëxperimenteerd met de pagebuilder van Elementor en een kaal thema: “Hello Elementor”. Met dit thema in combinatie met de page builder ben ik verzekerd van updates, in zowel de weergave als beveiliging, en heb ik nog meer mogelijkheden om de interface naar wens in te stellen die in andere thema’s door ontwikkelaars waren vergrendeld. In standaard WordPress-thema’s zijn bepaalde instellingen namelijk niet of nauwelijks te wijzigen. Na een dag experimenteren was ik er van overtuigd: ik verving het oude thema door mijn eigen gemaakte thema. Binnen enkele uren had ik hem online en de dagen daarna heb ik, na feedback van mensen om mij heen, steeds kleine verbeteringen aangebracht.
Met de theme builder van Elementor kun je een eigen thema maken en helemaal naar wens instellen. Ieder hoekje, knop, boxschaduw, kleur, animaties is op talloze manieren af te stemmen op je eigen wensen. De mogelijkheden zijn eindeloos. De onderstaande afbeelding toont de instelmogelijkheden van de kleur van het hoofdmenu. Met deze theme builder kan de weergave van de desktop (en laptop), tablet en mobiele telefoons naar wens worden ingesteld. Op die manier kunnen de meest optimale instellingen voor alle apparaten worden gerealiseerd.
Waar ik mij bij andere sites het meeste aan stoor, zijn in het beeld springende pop-ups, meldingen over nieuwsbrieven en het verzoek om meldingen in te schakelen, welke steeds moeten worden weggeklikt. En niet te vergeten de opzichtige advertenties. Dit heeft mij doen besluiten om zelf te browsen met een adblocker en hier niet aan mee te doen. Mijn website zal ik zo “schoon” mogelijk houden door zo min mogelijk afleidende elementen in te bouwen. Alhoewel er mogelijkheden zijn met weinig moeite de site erg fraai te maken met animaties en kleurrijke pagina’s, kies ik voor veel grijstinten en zo min mogelijk versieringen waar men veelal niet op zit te wachten. De witte pagina’s met aan weerskanten een donker- naar lichtgrijs verlopende achtergrond geeft een mooi contrast en maken het, samen met het gekozen lettertype, fijn lezende teksten. De site is geschikt voor vierkante desktop computerschermen vanaf 17 inch, omdat dit schermformaat anno 2023 nog vaak voorkomt in garages en scholen. Laptops maken gebruik van een hoge resolutie, waardoor de site met een 14 inch laptop te bezoeken is zonder dat o.a. de menubalk overgaat naar een andere modus, waarbij de rechter knoppen door het smalle scherm verspringen naar de tweede rij. Deze interface is tot stand gekomen door veel experimenteren en feedback van bezoekers. Het informatieve karakter met een goed afgestemde navigatie is belangrijker dan een gelikt uiterlijk, wat de meeste bezoekers waarderen.
De server:
Goedkope hostingspartijen met scherp geprijsde webhostingpakketten zitten niet te wachten op websites die veel rekenkracht van de server vragen, omdat je dezelfde SSD / CPU en werkgeheugen met honderden andere klanten deelt. Ook een dataverbruik van 120 tot 130 GB per maand is voor deze website gebruikelijk, wat niet is toegestaan met een standaard pakket van een paar tientjes. Een dergelijke partij kan ervoor kiezen om de prestaties van websites die veel resources gebruiken te reduceren, of je te verplichten om een dure VPS af te laten nemen.
Ik was lang aan het twijfelen om deze website op een VPS onder te brengen, zodat er optimale prestaties konden worden behaald en ik zelf de regie zou hebben over bepaalde instellingen. Een goede VPS is prijzig en ik ben gaan denken naar een alternatief: de site zelf (thuis) hosten.
In het voorjaar van 2020 kocht ik een scherp geprijsde jong gebruikte server. Deze heb ik voorzien van de nodige hardwarematige upgrades, leerde ik omgaan met de instellingen in de bios; deze verschillen erg veel met die van een consumenten pc. Daarnaast heb ik in mijn eigen woning een netwerk aangelegd om de server op aan te sluiten. De snelheid van de glasvezelverbinding is 1 gigabit down- en upload, wat zelfs ruim voldoende is voor het hosten van meerdere drukke websites.
In oktober 2020 heb ik de server geïnstalleerd met als besturingssysteem CentOS (inmiddels vervangen, later meer daarover) en als controlepaneel Cpanel.
Na enkele uren voorbereiding was met één druk op de knop de site verhuisd vanuit de server in het datacenter naar de thuisserver. Dit proces verliep heel soepel. Tot op het moment van schrijven (drie jaar na installatie) zijn er nog geen problemen opgetreden.
De server waarop u zich op dit moment begeeft is in de onderstaande twee afbeeldingen weergegeven.
Afbeeldingen boven: de server is een HP ProLiant ML350p Generation 8. Achter de cover bevindt zich de dvd-speler met daaronder de schakelaar om de server in te schakelen en vier USB-poorten. Onderin zitten vier schijven, te weten: 2x SSD (links) en 2x HDD (rechts). De website wordt vanaf de SSD’s geladen. Op de HDD’s worden iedere nacht backups opgeslagen. De SSD’s en de HDD’s staan in Raid-mirror (RAID 1). Bij een defect aan een harde schijf, kan ik deze wisselen met een reserve exemplaar, zonder dat de server hoeft worden uitgeschakeld. Na het wisselen van een schijf, worden de gegevens automatisch overgeladen.
Afbeelding onder: na het verwijderen van de zijdeksel en de kunststof plaat van de luchtgeleiding zien we vier grote ventilatoren met daarnaast het moederbord.
De server is voorzien van een Xeon E5-2690 CPU (2,9 ghz). Dit is een 8-core processor met 16 threads. Hij draait in de energiebesparingsmodus op een kloksnelheid van iets meer dan 1 Ghz, wat in de prestaties van de website en het serverbeheer niet onderdoet voor de instelling in maximale prestatiemodus, waar de kloksnelheid in deze prestatiemodus tot 2,9 ghz stijgt. Het enige verschil was te merken in de warmteontwikkeling en het energieverbruik. De goede prestaties met lage kloksnelheid zijn mogelijk dankzij de grote hoeveelheid processorcores. Daarnaast zijn de geheugen-banken inmiddels gevuld met in totaal 12x 4 GB ECC-geheugenmodules, wat in totaal 48 gb geheugen in quad-channel geeft. Uiteraard is dit overkill, maar hij is daarmee toekomstbestendig, denk ik dan maar.
In de zomer van 2022 heb ik het besturingssysteem CentOS vervangen door AlmaLinux vanwege de aankondiging dat CentOS binnenkort niet meer wordt gesuppord. Op AlmaLinux is het populaire Cpanel geïnstalleerd: dit is het programma wat de hosting van de website mogelijk maakt. In de onderstaande screenshot is het controlepaneel te zien. Wekelijks check ik beschikbare updates (Cpanel, hulpprogramma’s of kernel) en controleer ik de load.
Vertaling:
Zoals u wellicht is opgevallen, is in de footer (onderaan de website) een kolom met vlaggen opgenomen waar de website in kan worden vertaald. De vertaling is mogelijk gemaakt door een plugin in WordPress, welke met behulp van zogenaamde neurale machinevertaling (NMT) en kunstmatige intelligentie (AI). De relatie tussen neurale machinevertaling en AI ligt in het feit dat NMT een specifieke toepassing is van AI, waarbij machinale intelligentie wordt ingezet om menselijke taal te begrijpen en effectief te vertalen.
De stap om de website te vertalen heb ik gemaakt om de volgende redenen:
- studenten autotechniek met NT2 (Nederlands als tweede taal) vinden het fijn om tijdens het studeren een identiek vertaalde pagina in hun moedertaal te raadplegen. Als ze in hun “eigen” taal de werking van een onderdeel of systeem begrijpen, lukt het ook beter om de uitleg in het Nederlands te leren;
- in sommige landen is het aanbod van autotechnisch lesmateriaal schaars. In bijvoorbeeld IJsland hebben studenten uitsluitend de beschikking over Engelstalige lesstof. Voor zowel docent als student is het fijn om de lesstof in hun eigen taal te kunnen opzoeken. De docent uit IJsland waar ik contact mee heb, vertelt ook: “Ik ben constant de vertaling naar het IJslands aan het uitleggen, omdat in de autowerkplaatsen de onderdelen niet in het Engels, maar in het IJslands worden genoemd en opgeschreven. Het is fijn om een tekst met vaktaal in het IJslands te kunnen lezen”;
- zoals u in de eerste paragraaf heeft kunnen lezen, is het schrijven van artikelen mijn hobby. Met de vertaalmogelijkheid bereik ik een groter publiek.
Ik heb de website in het voorjaar van 2023 vertaald naar het Engels. Dat beviel goed. Met de vraag naar de IJslandse vertaling heb ik naast IJsland ook andere landen toegevoegd. Google indexeert daarmee ook de vertaalde pagina’s. Bijvoorbeeld de pagina: Basis elektronica wordt nu in vijftien talen opgenomen in Google, met in iedere taal een eigen url-vertaling, titel en zoekwoorden. Daarmee stijgen ook de bezoekersstatistieken. Op de afbeelding ziet u de bezoekersaantallen van 4 november tot 1 december 2023, waarin de website nog maar enkele weken vertaald is in andere talen dan het Engels.
De vertaling is van zeer redelijke tot hoge kwaliteit. In paragrafen met vakjargon worden er vertaalfouten gemaakt die soms “te letterlijk” zijn vertaald en daarmee een andere betekenis hebben gekregen. Een voorbeeld hiervan is het Nederlandse “carrosserie”. In het Engels wordt dat vertaald naar “body”. Dat is correct. Echter, in het IJslands wordt het ook vertaald naar iets vergelijkbaars als “body”, maar de vertaling verwijst daar naar de “human body”, oftewel, het “menselijk lichaam”.
Gelukkig bestaat de mogelijkheid om de vertaling aan te passen. In het programma kunnen vertalingen worden gecorrigeerd, welke op de hele website worden veranderd. Maar ook op de losse pagina’s kan per zin de vertaling worden aangepast. In de onderstaande afbeelding staat voor iedere zin een potloodje afgebeeld. Wanneer daar op wordt geklikt, kan de vertaling worden veranderd.
Nadat er op het potloodje is geklikt voor één van de zinnen, komt er een popup in beeld met daarin de originele en vertaalde tekst. Hier kan de vertaling worden gecorrigeerd. De vertaling wordt direct gecorrigeerd, zonder de originele (Nederlandse) tekst te beïnvloeden.
Met de Engelse vertaling kom ik een heel eind. Voor andere talen ondervind ik meer moeite, omdat mijn kennis daar minder ver reikt. Daarom vraag ik bezoekers van mijn website om taal- en vertaalfouten aan mij door te geven. Ik corrigeer deze direct op de betreffende pagina of op de gehele website als het om één woord gaat dat op meerdere pagina’s voorkomt. Wanneer u interesse heeft, zijn de mogelijkheden om toegang te krijgen tot het vertaalprogramma dat hierboven is getoond, bespreekbaar. U kunt contact met mij opnemen via het contactformulier. De docent uit IJsland maakt dankbaar gebruik van de website in zijn lessen, en kan de teksten zelf vertalen. Zowel hij als zijn collega’s en studenten (maar ook ik) hebben daar baat bij. Die mogelijkheid wil ik ook bieden aan gebruikers (bij voorkeur docenten autotechniek, of personen die werkzaam zijn in de automotive en taalkundig goed zijn onderlegd) uit andere landen.
