COMPUTER CREATIEF

Hans Frederiks is journalist en fotograaf en hoofdredacteur van blog.computercreatief.nl. Hij schrijft over ontwikkelingen op het gebied van computers, van vormgeving op het web en print, en fotografeert al zijn hele leven lang. Zijn specialisaties zijn panorama’s, landschappen en podiumfotografie. Zijn blog vind je HIER, zijn boeken vind je HIER.

14 februari 2023 Gerard Rathenau Een reactie plaatsen

SEO / SEA, Uit het boek, Web- & UX-design, Webdesign

Overstappen naar Google Analytics 4: wat heb je nodig?

Website-KPI’s en machinelearningtoepassingen in Google Analytics 4

Over 4 maanden moet je definitief overstappen naar Google Analytics 4. Dat zal wennen zijn voor jou en mij omdat we de afgelopen 10 jaar met Universal Analytics hebben gewerkt. Is het een ramp? Nee, zeker niet. Analytics blijft Analytics. Daarnaast maakt Google je het leven wat makkelijker om de cijfers te gebruiken die je nodig hebt om het effect van je marketing te bepalen. Daarom heb ik in mijn boek Verbeter je online marketing met Google Analytics een volledig hoofdstuk gereserveerd over hoe je goede inzichten haalt uit deze nieuwe versie. Op dit moment is Google Analytics 4 nog geen volwassen Analytics oplossing, omdat slechts 30 procent van je huidige Analytics erin zit, maar ik verwacht dat er over een paar jaar er veel meer oplossingen inzitten dat je nu gewend bent.

Wat zijn de voordelen van Google Analytics 4?

Je kunt veel beter het effect van je content gaan bepalen. Je kunt ‘echte’ attributie toepassen zodat je weet wat je marketing echt oplevert. Het belangrijkste voordeel van Google Analytics 4 is de volledige aandacht op machine learning. Of het nu gaat om goede meldingen over je website resultaten, het goed meten van de resultaten voor je belangrijkste doelgroepen en voorspellingen over je omzet of gebruikers die nooit meer op je website terugkeren. De focus op machine learning gaat ervoor zorgen dat je steeds minder rapporten nodig hebt en specifiekere antwoorden krijgt op je belangrijkste vragen. Kortom: Je hoeft minder naar de cijfers te zoeken, maar dat deze cijfers je helpen om betere beslissingen te nemen zodat je marketingresultaten beter worden.

In dit artikel bespreek ik met je de basisbeginselen die je nodig hebt om goed te kunnen werken met Google Analytics 4:

Lees verder →

Gerard Rathenau

Gerard Rathenau is Digital analist & strateeg. Hij is ruim tien jaar actief in de online marketing, eerst als campagnemanager en nu als marketinganalist en -strateeg.

Hij schrijft twee keer per maand een nieuwsbrief over Digital Analytics & strategie. Heb je aanvullende vragen over onderwerpen in zijn boek? Stel gerust je vraag via gerard@ganalytics.nl of via LinkedIn.

ganalytics.nl

Interviews, SEO / SEA, Web Development, Webdesign

Joost de Valk van Yoast SEO: ‘SEO is gewoon veel werk!’

2 maart 2022 Hans Frederiks 1 reactie

Hoe mooi, informatief, actueel, relevant of spannend je website ook is, als hij niet gevonden wordt door internetgebruikers, bestaat hij niet. Yoast SEO is een tool die je kan helpen bij het vindbaar maken van jouw website in Google, met afstand de populairste zoekmachine in Nederland en wereldwijd. Het boek Zo werkt Yoast SEO laat je stap voor stap zien hoe je zoekmachineoptimalisatie het beste aanpakt zodat ook jouw website hoger scoort. We spraken met Joost de Valk, chief product officer bij Yoast, over het belang van zoekmachineoptimalisatie, over leesbare webteksten en gevonden worden door Google. Een interview met Joost de Valk over Yoast SEO.

Joost de Valk,chief product officer van Yoast SEO. (Foto ©Rob Voss)

Wat is je achtergrond?
Joost de Valk: ‘Ik studeerde een blauwe maandag theologie en stopte daarmee in 2002 om in de informatica te gaan werken. Ik werkte als sales/marketingmanager, maar ik was ook al een beetje aan het programmeren. Op een gegeven moment zochten mijn vrouw en ik een baan wat dichter bij huis. We vonden een vacature bij een bureau in Arnhem voor zoekmachinemarketing en dat zat precies op het snijvlak van wat ik leuk vind. Bij dat bureau leerde ik hoe zoekmachineoptimalisatie werkte. In 2010 ben ik voor mezelf begonnen. Ik had toen een hobbyprojectje en dat was een SEO-plug-in, Yoast dus. En het gebruik van Yoast nam explosief toe, met als resultaat dit bedrijf met 150 werknemers.’ Lees verder Joost de Valk van Yoast SEO: ‘SEO is gewoon veel werk!’ →

20 mei 2021 Peter Doolaard Een reactie plaatsen

CSS, Web Development, Webdesign

Het boxmodel van CSS

Alles wat je op een webpagina ziet is een box. Het boxmodel van CSS regelt de opbouw van boxen en de interactie tussen boxen. Weten hoe het boxmodel werk is onmisbare CSS-basiskennis.

Lees verder Het boxmodel van CSS →

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.

6 mei 2021 Peter Doolaard Een reactie plaatsen

CSS, HTML, JavaScript, Web Development, Webdesign

Maak een schakelaar met CSS en HTML

Maak een schakelaar met CSS en HTML die er niet alleen als een schakelaar uitzien, maar die ook daadwerkelijk iets doet. Zo’n aan-uitschakelaar (toggle of switch) gebruik je bijvoorbeeld om je webformulier op te fruiten. Of je laat bezoekers van de website kiezen tussen een licht en een donker thema. Met een klein beetje JavaScript maak je een werkende themawisselaar van je schakelaar.

Het mooie is dat de basis van de schakelaar gewoon in je HTML-gereedschapskist zit: het element <input type="checkbox">. Het principe is dat je de in- en uitgeschakelde toestand van dit selectievakje gebruikt om de opmaak van de zelfgebouwde schakelaar te veranderen en om JavaScript-code te activeren. Het selectievakje zelf maak je onzichtbaar.

Het is een eenvoudig project en toch maak je kennis met een berg CSS-mogelijkheden. Op CodePen staat het resultaat en daarmee kun je vrijuit experimenteren.

See the Pen schakelaar by Peter Doolaard (@dool) on CodePen.dark

Lees verder Maak een schakelaar met CSS en HTML →

28 april 2021 Peter Doolaard Een reactie plaatsen

CSS, Web Development, Webdesign

Specificiteit in CSS, zo werkt het

Specificiteit in CSS is een belangrijke oorzaak van selectors die niet doen wat jij wilt. Specificiteit gaat over hoe zwaar een selector telt en of een concurrerende selector sterk genoeg is om hem te overschrijven. De oplossing begint met begrijpen hoe specificiteit werkt. Een goede tweede is: houd de specificiteit van je selectors zo laag als kan en zo hoog als nodig is.

Lees verder Specificiteit in CSS, zo werkt het →

28 april 2021 Peter Doolaard Een reactie plaatsen

CSS, Web Development, Webdesign

Leer werken met nieuwe pseudoklassen van CSS

Het assortiment selectors van CSS is uitgebreid. Leer werken met de nieuwe pseudoklassen :is(), :where() en :not(), maak kennis met :has() en controleer je focus met :focus-within en :focus-visible.

Voor een goed begrip van dit artikel is het handig als je weet wat specificiteit is. Kan je kennis een opfrisser gebruiken, lees dan ook het artikel Specificiteit in CSS, zo werkt het.

De pseudoklassen in het kort

Behalve :has() worden alle nieuwe pseudoklassen ondersteund door de belangrijke browser.

Tussen de haakjes van :is() en :where() zet je een lijst van selectors. Elke selector die overeenkomt met een element wordt opgemaakt. Alle soorten selectors en combinators zijn toegestaan. Foute selectors worden genegeerd, maar maken niet de complete selector ongeldig. Bij :is() is de specificiteit gelijk aan de selector met de hoogste specificiteit. Bij :where() is de specificiteit altijd 0.

Ook :not() krijgt een selectorlijst. Elementen die overeenkomen met een selector in de lijst worden juist niet opgemaakt. De specificiteit is gelijk aan de selector met de hoogste specificiteit.

:has() werkt als een ‘parent selector’. De selectorlijst is een voorwaarde, geen opmaakdoel. Het is erg onzeker of :has() daadwerkelijk wordt toegevoegd aan de specificatie.

:focus-within maakt het mogelijk om een voorouder op te maken van een element dat de focus kan krijgen.

:focus-visible laat de browser bepalen of het nodig is om de focusopmaak te tonen. Wel bij toetsenbordnavigatie, niet bij muisgebruik.

Lees verder Leer werken met nieuwe pseudoklassen van CSS →

24 april 2021 Peter Doolaard Een reactie plaatsen

HTML, Web Development, Webdesign

Emoji als favicon

Sinds kort ondersteunen alle moderne browsers SVG als bestandsformaat voor favicons. Een bijwerking is dat je nu ook emoji’s als SVG-favicon kunt gebruiken. (Opfrisser: een favicon is het pictogram in een browsertab of op het homescreen van je telefoon.) Nou is een emoji in de browsertab niet een heel serieuze toepassing. De echte winst is dat je met SVG eenvoudiger mooie favicons kunt maken.

De emoji als favicon in Firefox op Windows.

Lees verder Emoji als favicon →

18 maart 2021 Peter Kassenaar Een reactie plaatsen

Web Development, Webdesign

Vue.js – lichtgewicht framework voor moderne websites

De tijd dat een website op een regenachtige zondagmiddag met HTML, CSS en JavaScript in elkaar werd gezet is voorbij. Moderne websites worden tegenwoordig vaak gemaakt met behulp van een framework. Vue.js (of kortweg ‘Vue’) is zo’n lichtgewicht framework voor moderne websites!

Evenals de meer bekende varianten React en Angular, is Vue een framework dat voorziet in alle eisen waaraan een moderne webapplicatie moet voldoen. Denk aan zaken als webcomponenten, databinding, routing, state management en communicatie met het database via http. Het voordeel van Vue is echter dat het een veel eenvoudiger syntaxis en structuur kent dan de andere frameworks. Het is daarom sneller te leren. De Vue-leercurve is een stuk minder steil dan bij Angular of React. Al in enkele dagen kun je als programmeur het raamwerk van een complete, complexe applicatie in elkaar zetten. De Vue-praktijk sluit nauw aan bij wat webdevelopers gewend zijn, maar is eveneens eenvoudig te leren voor ervaren Java- of C#-programmeurs.

Websites in Vue bestaan niet meer uit losse pagina’s, maar uit kleine, gespecialiseerde componenten die tezamen de applicatie vormen. Elke component heeft dezelfde, eenvoudig te begrijpen structuur. Lees verder Vue.js – lichtgewicht framework voor moderne websites →

Peter Kassenaar

Peter Kassenaar is auteur van vele boeken over algemeen pc-gebruik, programmeertalen en internettechnieken. Hij is gespecialiseerd in frond-endtools, -frameworks en -toepassingen. Via zijn eigen bedrijf verzorgt hij trainingen op deze gebieden voor bedrijven en organisaties. De boeken van Peter vind je hier.

CSS, HTML, Web Development, Webdesign

Toveren met CSS Grid Layout

25 juni 2020 Peter Doolaard Een reactie plaatsen

CSS is de opmaaktaal voor websites en -apps. Met de bundel van drie boeken uit de Web Development Library over die onderwerp leer je alle mogelijkheden, waardoor je veel betere websites ontwerpt. In het boek CSS 3 van Doolaard en Kassenaar leer je werken met CSS-selectors, maateenheden, het box-model, kleurmodellen en meer. De vele oefeningen maken het tot een perfect (zelf-)studieboek. Ben je de basis voorbij? In CSS Flexbox & Grid Layout helpt Peter Doolaard je met het maken van lay-outs voor webpagina’s met Flexible Box Layout en CSS Grid Layout. Deze technieken zijn bedoeld om op een intuïtieve manier complete webpagina’s, apps en onderdelen van de gebruikersinterface in te delen. Met het boek Bootstrap 4 van Peter Kassenaar kunnen niet-designers hun websites snel op consistente en eenvoudige manier opmaken, terwijl ‘echte’ designers hun hart kunnen ophalen aan de vele mogelijkheden die het framework biedt om het naar eigen wens in te stellen. Vergroot je CSS-expertise en bestel deze drie boeken samen voor een voordelige prijs. Hieronder vind je een voorbeeld over het werken met CSS: Toveren met CSS Grid layout van de hand van Peter Doolaard.(H.F.)

Toveren met CSS Grid layout

Hoe bouw je met dezelfde HTML-codebasis een website met vier gezichten? Je leest het in dit artikel waarin we de website rollingstone.com namaken. De lay-out van deze website varieert van één tot vier kolommen waarbij de inhoud steeds net even anders wordt gepresenteerd. CSS Grid Layout en de nieuwe optie subgrid zorgen voor de magie.

Lees verder Toveren met CSS Grid Layout →

22 mei 2020 Peter Kassenaar 1 reactie

Web Development, Webdesign

Handboek JavaScript en jQuery

Het zal niemand in de webdevelopment wereld zijn ontgaan. JavaScript is de laatste jaren in sneltreinvaart geëvolueerd. Lange tijd was het een programmeertaal waarmee je klokjes in de statusbalk van de browser kon tonen of eenvoudige animaties in de pagina plaatste. Maar sinds de komst van jQuery in 2006 werd alles anders.

Voor het eerst werden complexe, cross-browser compatible handelingen mogelijk zoals het selecteren van elementen en er allerlei handelingen mee uitvoeren. Het is niet overdreven om jQuery ‘de redding van JavaScript’ te noemen. jQuery is een bibliotheek die in aanvulling op JavaScript wordt gebruikt.

Populariteit

Ook met de populariteit van frameworks zoals React, Angular en Vue is de rol van ‘gewoon’ JavaScript en jQuery nog lang niet uitgespeeld. JQuery wordt meegeleverd met de standaardinstallaties van WordPress (35% van álle honderden miljoenen websites ter wereld draait op WordPress), andere content management systemen, wordt aanwezig veronderstelt in de populaire CSS-bibliotheek Bootstrap en wordt in het onderwijs gebruikt om snel interactiviteit aan webpagina’s toe te voegen. JQuery is meegegroeid met deze ontwikkelingen. Oude opdrachten verdwenen uit de bibliotheek, nieuwe opdrachten zijn toegevoegd.

De laatste jaren zijn er echter ook wijzigingen doorgevoerd in de taal JavaScript zelf. De manier om variabelen te declareren met var werd vervangen door const en let. Er zijn nieuwe manieren om functies te definiëren en bijvoorbeeld communicatie met een achterliggende API en database zijn nu rechtstreeks vanuit JavaScript mogelijk met de opdracht .fetch().
Lees verder Handboek JavaScript en jQuery →

Peter Kassenaar

Web Development, Webdesign

Maak zelf een HSL-kleurkiezer met HTML, CSS en JS (4)

4 december 2019 Peter Doolaard 1 reactie

Het boek van de maand oktober 2019 was Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Die maand bespreken we het boek en gaven we op dit blog wat voorproefjes uit het boek. Dit is deel 4 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 1 vind je HIER, deel 2 vind je HIER en deel 3 HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Er bestaan allerlei hulpmiddelen om de CSS-code van een RGB- of HSL-kleur te bepalen, maar zelf iets bouwen is een perfect oefenproject. In een serie korte artikelen lees je hoe je zelf een kleurkiezer voor HSL maakt met HTML, CSS en een beetje JavaScript. Dit is deel 4: de helpfunctie.
Met de kleurkiezer kun je sinds aflevering 3 van de serie een kleur instellen en de CSS-code daarvan kopiëren en plakken in je code-editor. Een ding ontbreekt nog: de helpfunctie. Leer hoe je een overlay en een dialoogvenster maakt met HTML, CSS en Javascript.
Begin gemist? Lees dan eerst deel 1. Lees verder Maak zelf een HSL-kleurkiezer met HTML, CSS en JS (4) →

22 oktober 2019 Peter Villevoye Een reactie plaatsen

Boekbesprekingen, Web Development, Webdesign

De pijlers van het digitale web – HTML5 en CSS3 – op papier

Als je serieus aan de slag wilt gaan met het technisch bouwen van websites, dan is kennis van HTML5 en CSS3 en JavaScript onontbeerlijk.

Nu kan je de technieken voor HTML en CSS op heel veel digitale manieren leren; er zijn zát online tutorials en trainingen ! Maar het gros daarvan is in het Engels. Voor velen is dat misschien geen groot probleem (web-technieken zijn immers volledig Engelstalig georiënteerd). Maar er zijn ook veel mensen die het wel zo prettig vinden als een en ander op zijn minst in het Nederlands wordt beschreven en uitgelegd !

De 5^eeditie van het boek “HTML5 en CSS3” van Peter Doolaard voorziet daar uitstekend in. Lees die éérst, dan kan je daarna alles gaan nakijken en uitdiepen in allerlei handige online overzichten en hulpmiddelen.

Even wat achtergrond-informatie: anno 2019 bestaat het web 30 jaar. De eerste tien jaren waren woest en wild. Als gevolg daarvan heerste in het tweede decennium vooral moedeloosheid bij de grondleggers. Maar dankzij een hoognodige grondige ommezwaai (HTML5) is het web uit een diep dal gekrabbeld en floreert het nu als nooit tevoren. Lees verder De pijlers van het digitale web – HTML5 en CSS3 – op papier →

Informatica, Webdesign

Maak zelf een HSL-kleurkiezer in HTML en CSS (2)

21 oktober 2019 Peter Doolaard Een reactie plaatsen

Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 2 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. De site die bij het boek hoort vind je HIER. (H.F.)

In deel 1 van deze serie is het raamwerk van de HSL-kleurkiezer gebouwd. Dit deel gaat over het maken van de regelaars voor de componenten van een HSL-kleur. Dat blijkt nog een mooie uitdaging.

De kleurwaarden

Eerst moeten we bedenken hoe we alle kleuren kunnen weergeven. Een HSL-kleur bestaat uit drie componenten: hue (tint), saturation (verzadiging) en lightness (helderheid). HSL is gebaseerd op de RGB-kleuren. Het model ziet eruit als een dubbele kegel, met de kleuren in een cirkel en zwart en wit op de toppen. Rood staat op 0/360 graden, groen op 120 en blauw op 240 graden. In CSS wordt bijvoorbeeld de volle kleur groen weergegeven als hsl(120, 100%, 50%). Hierbij is 120 de tint, 100% de verzadiging en 50% de helderheid. Met de hoofdkleuren van RGB maken we een kleurverloop waarin alle tinten voorkomen. CSS heeft daarvoor de eigenschap linear-gradient. Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (2) →

7 oktober 2019 Peter Doolaard Een reactie plaatsen

Informatica, Webdesign

Maak zelf een HSL-kleurkiezer in HTML en CSS (1)

Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 1 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 2 uit deze serie vind je HIER, deel 3 HIER en deel 4 HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Lees verder Maak zelf een HSL-kleurkiezer in HTML en CSS (1) →

Terzijde 1 oktober 2019 Hans Frederiks Een reactie plaatsen

Boek van de maand, Webdesign

Handboek HTML5 en CSS3

Handboek HTML5 en CSS3

Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard.
Van alle technieken voor het maken van webpagina’s en webapps zijn HTML en CSS de belangrijkste. Zonder HTML geen webpagina’s en zonder CSS blijft het een kale boel. In deze vijfde, bijgewerkte editie van dit handboek leer je omgaan met beide webtalen. Je leert eerst hoe je de content markeert met HTML zodat de paginastructuur klopt. Daarna maak je de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek en praten we met Peter Doolaard over de ontwikkelingen van HTML5 en CSS3.

12 september 2019 Wammes Witkop 6 reacties

Column, Webdesign

Webformulier

Ooit, lang geleden, dacht ik dat de computers ons mensen zouden bevrijden van allerlei domme routineklussen. Met een beetje slim programmeren kon je werkelijk van alles bereiken en echte programmeurs waren nog veel beter dan ik, verdwaalde biologiestudent, was. Dat was de tijd dat ik programmaredacteur werd van MSX Computer Magazine – en voor wie van na die tijd is, MSX was één van de homecomputers waarop de eerste golf computeraars het allemaal geleerd heeft.

Voor de pc verscheen, lang voordat Internet in beeld kwam maakten we acht keer per jaar een blaadje dat voor zowat een derde vol stond met zogenaamde listings. Basic programma’s om zelf in te tikken. En wie dat te veel werk vond kon bij ons de cassettes bestellen met daarop die programmaatjes. Inderdaad, audiocassettes, met daarop in hoorbare tonen die listings gecodeerd. Diskettes kwamen pas later. Lees verder Webformulier →

Boek van de maand, Webdesign

WordPress: Gutenberg of de Klassieke Editor?

30 juli 2019 Hans Frederiks 5 reacties

Sinds WordPress 5 is het de bedoeling dat je aan de gang gaat met de visuele editor Gutenberg. Hier – bij Computer Creatief – gebruiken we nog steeds de Klassieke Editor. Ik heb Gutenberg uitgezet en de plug-in voor de Klassieke Editor geïnstalleerd en geactiveerd. Als jarenlange WordPress-gebruiker vind ik Gutenberg op dit moment een storende factor in de workflow van het blog. Wat moet je in WordPress gebruiken: Gutenberg of de Klassieke Editor?

Via Google Docs

Gutenberg of de Klassieke editor — Naar WordPress sturen vanuit Google Docs via WordPress.com for Google Docs.

De werkwijze bij het blog (bij mij en bij de stukken van andere auteurs die aan mij aanleveren via Word) is alsvolgt. Ik bereid de blogposts voor in Google Docs. Ik schrijf zelf in Google Docs en deel de tekst altijd met mijn vrouw die de tekst naleest op onbegrijpelijke onzin, dubbele woorden enzovoort. De Word-bestanden van andere auteurs, de voorbeelden uit boeken die we plaatsen, kopieer ik ook naar Google Docs-documenten. In Google Docs gebruik ik een Add-on, een uitbreiding, waarmee ik rechtstreeks naar het blog kan publiceren: WordPress.com for Google Docs. Als de tekst, inclusief, titel, tussenkoppen en dergelijke klaar is, kies ik voor de Add-on, voeg nog steeds in Google Docs de WordPress-categorieën en tags toe, en kies voor Save. Lees verder WordPress: Gutenberg of de Klassieke Editor? →