HTML versus WordPress

Allereerst statistieken

Percentage websites gemaakt in WordPress: 27,3%.
Percentage websites gemaakt in HTML: 72,6%.
(bron: https://w3techs.com).
Volgens de laatste statistieken, ten tijde van schrijven, groeit het percentage HTML(5) iets harder dan WordPress.


Conventies:

Met HTML(5) bedoel ik websites gecodeerd (geprogrammeerd) in HTML(5), CSS(3), JavaScript en/of jQuery, en eventueel gebruikmakend van andere technieken zoals Bootstrap en Modernizr. Om een HTML5 website te bouwen zul je moeten kunnen coderen. Dit vereist het nodige van de ontwerper. Coderen in HTML5 leer je niet in een dag. Je zult flink moeten investeren in tijd en energie.
Met WordPress bedoel ik een zeer populair content management systeem (CMS) wat gebruik maakt van PHP en MySQL. Je hebt geen kennis nodig van programmeertalen om websites te maken. Je maakt gebruik van het WordPress Dashboard. Met behulp van dit Dashboard kies je thema’s en maak je pagina’s aan met tekst, afbeeldingen, etc.


Voor en nadelen HTML5

Voordelen:

Een simpele HTML5 site draait op elk webhosting systeem. En dat kan schelen in de kosten. HTML5 stelt simpelweg minder eisen aan webhosting omdat er geen database nodig is. De mogelijkheden van HTML5 zijn ongelooflijk uitgebreid, verzin het en het is goed mogelijk dat het kan. HTML5 is nog steeds in ontwikkeling en de mogelijkheden worden steeds uitgebreider. Afhankelijk van hoe een HTML5 website gecodeerd is kan deze sneller laden dan een site gemaakt in WordPress.

Nadelen:

Je zult moeten kunnen coderen. Kun je dit niet dan zul je het bouwen van je website moeten uitbesteden en dat brengt kosten met zich mee. Datzelfde geldt voor het maken van regelmatige aanpassingen aan je site.


Voor en nadelen WordPress

Voordelen:

Iedereen die een beetje handig is kan in twee dagen leren een simpele website te bouwen met WordPress. WordPress is veel makkelijker, je hebt geen kennis nodig van welke programmeertaal dan ook. Wil je dat je site regelmatig wordt aangepast (aanbiedingen, artikelen, blog)? Je kunt dit zelf. En dat kan een aardige besparing opleveren.

Nadelen:

WordPress biedt een aantal gratis templates/thema’s, echter voor de meeste (vaak de betere) zul je moeten betalen. Datzelfde geldt voor de betere plug‑ins. WordPress sites kunnen een langere laadtijd nodig hebben.

Addendum:

Als je ‘t web opgaat en een zoektocht begint vindt je nog veel meer voor en nadelen. Sommige zijn waar en sommige regelrechte onzin. Een voorbeeld: jarenlang ging het gerucht dat WordPress sites slecht scoren in zoekmachines zoals Google en Bing. Deze bewering gaat bij mij regelrecht de vuilnisbak in. Zolang je weet wat je doet, voldoende kennis hebt van SEO (Search engine optimization) maakt het niet uit.


Diploma’s en certificering

Ga je naar school en volg je een opleiding zoals bijvoorbeeld “MBO 4 Multimedia en vormgeving” of “HBO Communicatie en Multimedia Design” dan leer je coderen. Afhankelijk van de gekozen richting heb je na afstuderen een bewijs in de vorm van een diploma dat je HTML5 websites kunt coderen. Voor wat betreft coderen in HTML5 is de waarde van een dergelijk diploma onbetwistbaar. Ik heb nooit vernomen dat dergelijke opleidingen zich ook in WordPress verdiepen. Certificatie is ook mogelijk. Via bijvoorbeeld w3schools.com. Na flinke (zelf)studie en een examen is het mogelijk certificaten op het gebied van HTML5, CSS, JavaScript, jQuery, PHP, Bootstrap en XML te halen. Ook deze certificaten hebben waarde en kunnen je carrière voor wat betreft webdesign een flinke boost geven. Het geeft aan dat je (heel) veel tijd, energie en geld gestoken hebt in kennis en vaardigheden nodig om websites te coderen. Met dergelijke diploma’s en certificaten op zak kun je mij ongetwijfeld nog ‘t een en ander leren.

Op het gebied van WordPress kun je cursussen volgen en (niet erkende) certificaten halen (beginner, gevorderde, etc.). Deze cursussen vind ik ronduit discutabel. Je leert hoe om te gaan met de diverse aspecten van WordPress zoals, bestaande thema's aanpassen, beveiliging van de WordPress website, e-mail integratie, enzovoort. Vaak dure cursussen, niet erkend en na deelname ontvang je een certificaat. In de IT noemde we dergelijke cursussen vroeger “kunstjes leren” en “leren knopjes drukken”. Na het behalen van een dergelijk certificaat ben je ongetwijfeld in staat een redelijk website te bouwen met behulp van WordPress maar daar houdt het mee op. Deze WordPress certificaten hebben in het bedrijfsleven geen enkele waarde.


HTML(5) editors

Voor het coderen van HTML, CSS, Javascript e.d. kun je gebruik maken van een HTML editor. Deze programma’s maken coderen een stuk makkelijker en zorgen ervoor dat je sneller kunt coderen. Aptana, Bluefish en Brackets zijn de editors die wij gebruiken. Mocht je geïnteresseerd zijn, hieronder de links naar deze professionele applicaties.

bluefish | brackets | aptana studio

Elke editor heeft zijn eigen voor- en nadelen. Bluefish is de editor die ik gebruik. Er zijn mensen die, gebruikmakend van een hoge typesnelheid, in zeer simpele algemene teksteditors zoals notepad of vi editor gecompliceerde websites coderen. Ik maak een buiging voor jullie, ik kan het niet. Veel codeerders maken gebruik van een “boilerplate”. Een boilerplate is een basis, iets wat er voor zorgt dat het prille begin van de HTML5 website alvast gemaakt is. Je kunt dit een beetje vergelijken met de programmeur die gebruikt maakt van het .NET framework, Java of Ruby on Rails. Het betekend simpelweg dat je het wiel niet opnieuw hoeft uit te vinden.

Link naar de site die ik gebruik voor het downloaden van Boilerplates:
https://html5boilerplate.com
Github:
https://github.com/h5bp/html5-boilerplate

Wil je goedkoper werken dan kun je, in overleg met de klant, kiezen voor één van de duizenden templates, gratis of betaald, te vinden op het web. Deze templates nemen al snel 50 procent van het werk uit de hand. Nadelen? Jawel. De website is niet meer uniek. Voordat je met een template aan het werk gaat is het zaak goed te kijken hoe de template is opgebouwd. Templates kunnen gecompliceerd zijn en onverwachte fouten bevatten die ervoor zorgen dat je een stuk langer bezig bent dan geprognosticeerd. Vooral op het gebied van responsive design (een website geschikt gemaakt voor mobiel, tablet en Pc/laptop) vertonen templates nogal eens kuren.


HTML5 wysiwyg editors

Voor het ontwerpen van een HTML5 website kun je ook gebruik maken van een wysiwyg (what you see is what you get) editor zoals Dreamweaver en Bluegriffon. Vergelijk het met een wordprosessor (MS Word, LibreOffice Writer, etc.). Je typt tekst en past stylen toe, importeert afbeeldingen en zet alles op z’n plek. De code generator van een dergelijk programma zorgt voor de rest. Je hoeft dus niet te kunnen coderen om met een wysiwyg editor te kunnen werken. Of.. toch wel? Programma’s zoals Dreamweaver en Bluegriffon kunnen fouten maken. Als dat gebeurd is er meestal maar een mogelijkheid. De code bekijken en fouten handmatig corrigeren. Draemweaver biedt veel mogelijkheden op HTML5 en ander gebied maar niet alle. Op het moment dat je iets wilt wat het programma niet biedt zul je moeten coderen. Een programma zoals Dreamweaver is gecompliceerd. De eerste keer dat ik Dreamweaver opstartte om een website aan te passen kreeg ik een vervelende verrassing. Dreamweaver leek op niets wat ik ooit eerder gebruikt had. Je zult moeten investeren in tijd en energie voordat je efficiënt met het programma kunt werken. Toch werken veel ervaren codeerders met Dreamweaver. Een van de redenen is snelheid. Zelf heb afscheid genomen van wysiwyg HTML5 editors. Ik codeer alles met de hand.


Het belang van testen

Een voorbeeld. Een ontwerper maakt een website met behulp van zijn MacBook Pro (Apple). Coderen gebeurd met behulp van Bluefish en het resultaat wordt bekeken in de standaard geïnstalleerde webbrowser Safari. De ontwerper test het responsieve gedeelte van de website door simpelweg de browser te verkleinen naar tablet en mobiel formaat. Alles ziet er goed uit en de website wordt online gezet. De ontwerper belt de klant met de mededeling dat website af is en online staat. Tien minuten later krijgt de ontwerper een telefoontje van de klant. Sommige tekst staat gevaarlijk dicht tegen een van de afbeeldingen en een paragraaf is in het ongelukkige bezit van een wees. Ook op de smartphone van de klant ziet een en ander er niet uit zoals verwacht. Hoe kan dit? Bij de ontwerper ziet alles er perfect uit. Navraag leert dat klant de website bekeken heeft in de Edge browser van Windows 10 en een op Android gebaseerde mobiele telefoon. En hier komt het. Ieder platform en iedere browser geeft jouw website weer net even iets ander weer. Voordat je een definitieve versie online zet zul je uitgebreid moeten testen om er zeker van te zijn dat jouw website goed wordt weergeven op de meest gangbare platformen en webbrowsers. En hoe doe je dat? Je kunt niet verwachten dat een ontwerper in het bezit is van drie of meer machines met verschillende besturingssystemen en browsers. Je kunt niet verwachten dat een ontwerper in het bezit is van alle gangbare tablets en smartphones. Dit is prijstechnisch gewoon niet haalbaar. Een van de oplossingen voor dit probleem die hier gebruikt wordt is virtualisatie en simulatoren. Virtualisatie betekend meerdere besturingssystemen op één machine. Zogenaamde virtuele machines (VMs). In het geval van onze ontwerper; zijn MacBook Pro voorzien van diverse VMs zoals Windows 7, Windows 10 en misschien nog een ander besturingssysteem. Afhankelijk van de kracht van de gebruikte machine kunnen al deze besturingssystemen tegelijkertijd draaien. Tevens zal elke VM voorzien moeten zijn van meerdere browsers. Een simulator is software wat het gebruik van bijvoorbeeld iOS en Android op een laptop of desktop computer simuleert en je instaat stelt om op een gesimuleerde smartphone je website te inspecteren op fouten en onregelmatigheden. Je begrijpt, het opzetten van een dergelijk systeem vereist de nodige kennis. Er zijn nog meer uitgebreide mogelijkheden en andere mogelijkheden om te testen, dit is slecht een begin. Tot zover deze paragraaf. Ik raad je aan om het internet op te gaan en te zoeken naar alle mogelijkheden om te testen. Je kunt eventueel navraag doen bij ervaren ontwerpers.


Waarom ik geen (zelden) WordPress gebruik

Regelmatig word ik aangevallen (woordelijk) op het feit dat ik alles codeer en zelden WordPress gebruik. Ditzelfde geldt voor het feit dat ik WordPress makkelijk vind, in ieder geval een stuk makkelijker dan coderen. Sommige mensen accepteren mijn mening, anderen helaas niet. (WordPress? Makkelijk!! grrr…. WordPress is hartstikke moeilijk… grrrr.. Je weet niet waar je ‘t over hebt, enz.) (zucht...). Hierbij mijn definitieve antwoord! Allereerst, ik heb niets tegen WordPress. Sterker nog; ik vind WordPress een prachtig medium. WordPress heeft het maken van webpagina's en websites binnen het bereik gelegd van een grote groep mensen. Professional en amateur. Ik codeer in HTML5 omdat ik dat leuker en uitdagender vind. Elke keer als ik Bluefish open, code voor me zie en een pagina ontwerp of aanpas heb ik daar plezier in. Regelmatig neem ik een kijkje op www.w3schools.com om te kijken hoe het een en ander aan te pakken, of, hoe zat dat ook alweer? En regelmatig leer ik weer iets nieuws. Een tweede reden is dat ik mij graag specialiseer in één manier om websites te bouwen. Niet twee, drie of vier (ja, er bestaan nog meer manieren naast WordPress en HTML5). Dus de volgende keer als er weer eens iemand is die mijn mening niet respecteert: lees dit artikel.


WordPress en coderen

WordPress is een krachtig medium, heel krachtig met ontzettend veel mogelijkheden. Wil je de volledige kracht die WordPress biedt in al zijn glorie ontketenen?
Dan zul je moeten kunnen coderen!


Een verhaal uit de praktijk

De kleine banketbakker op de hoek. De banketbakker, een echte keihard werkende vakman. ‘s Morgens om 4:30 uur bemand hij de bakkerij om allerlei lekkernijen voor te bereiden. Om 09:00 uur begint de verkoop en als de winkel ‘s avonds om 18:00 uur sluit begint de voorbereiding voor de volgende dag en administratie. Voor een inkomen niet hoger dan de gemiddelde kantoormedewerker. Maar het is niet alleen het geld, het is de liefde voor het vak waar het om gaat. Het is crisis en de banketbakker heeft het moeilijk. Klandizie loopt terug, de concurrentie van grote supermarkten is moordend. De vakman is niet dom en begrijpt het effect van reclame. Er wordt geadverteerd in het lokale krantje en wekelijks gaat er een folder uit met aanbiedingen. Dit heeft effect maar helaas niet voldoende. De banketbakker informeert in zijn directe omgeving en mensen die er heel, heel veel verstand van hebben (sarcasme..? JA!) adviseren een website om het winkeltje nog meer onder de aandacht te brengen. De banketbakker komt in contact met een ontwerper. ‘s Maandagochtend om 09:00 uur wordt de kopij (logo, afbeeldingen, teksten e.d.) aangeleverd. De vraag: vijf pagina’s, een contactformulier en een gastenboek. Om 10:00 uur begint onze WordPress gigant met het ontwerpen van de website. De nieuwe cappuccino machine draait overuren, het pakje sigaretten steeds leger. En om 18:00 uur dezelfde dag staat er een mooie website. Vijf pagina’s, een contactformulier en een gastenboek.
Kosten van dit alles: 600 euro.
En dat is gewoon niet netjes.