Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

23oktober

Kennismaken met Svelte

svelte-logoNu in coronatijden mijn ZZP-agenda maar heel mager is gevuld, heb ik besloten om van de nood een deugd te maken. Ik ga twee nieuwe frameworks onderzoeken waarvoor het mij tot op dit moment aan de tijd ontbrak om me er meer in te verdiepen. Dat zijn:

In dit artikel kijk ik naar Svelte (spreek uit 'Svelt'). Afgelopen week heb ik kennisgemaakt met Svelte, de documentatie gelezen, online tutorial(s) gevolgd en verder rondgesnuffeld naar Svelte-informatie op de voor de hand liggende plekken als Stack Overflow, Medium en Dev.to.

Disclaimer - ik ben frontend developer. Ik ken frameworks als Angular, Vue en React op mijn duimpje. Hiermee heb ik veel applicaties gemaakt. Mijn beleving en beschrijving van Svelte komt dan ook vanuit dit perspectief. Ik maak regelmatig de vergelijking me zaken die ik ken. Dat hoeft voor jou natuurlijk niet zo te zijn! Toch probeer ik het zo eenvoudig mogelijk te houden en een voor iedereen duidelijke beginners/intro te schrijven over Svelte.

Download dit artikel als PDF (11 pagina’s, 1,1 MB)

Vragen

In dit artikel beantwoord ik de volgende vragen:

  1. Wat is Svelte?
  2. Waar wordt het voor gebruikt?
  3. Hoe gaat lokale Installatie en Ontwikkeling?
  4. Hoe maak ik een eerste applicatie?
  5. Hoe maak ik een niet-triviale proof-of-concept applicatie: een app die op basis van een zoekvraag van een gebruiker communiceert met een backend en de resultaten in de UI toont.

Omdat ik een absolute beginner ben in Svelte heb ik ongetwijfeld zaken gemist of heb ik dingen omslachtig gedaan (omdat ik die nu eenmaal ken uit Angular, React of Vue) die in Svelte veel eenvoudiger kunnen. Aarzel in dat geval niet om het mij te laten weten!

1. Wat is Svelte?

Svelte is een framework voor het ontwikkelen van webapplicaties. Het is daarmee vergelijkbaar met Angular, React en Vue. Het is niet vergelijkbaar met de vorige generatie webdevelopment tools zoals jQuery, AngularJS of Backbone. Svelte is een modern framework, gebouwd op Node.js, ES6, componenten en JavaScript-bundlers. Het is een alternatief voor Angular, React of Vue. Of zo je wilt: een concurrent. Je gebruikt het een of het ander. Niet tegelijk.

Svelte is gemaakt door Rich Harris, de ontwikkelaar die ook de bundler rollup.js heeft gemaakt. Het is dan ook geen verrassing dat rollup de standaard bundler is in Svelte. Je kunt eventueel ook WebPack instellen als bundler, maar dat moet je zelf doen.

Het belangrijkste verschil tussen Angular, React en Vue is dat Svelte-applicaties in hun geheel op de server worden gecompileerd. Alles wordt vertaald naar JavaScript en kant-en-klaar naar de browser gestuurd. Svelte is daarom razendsnel. Bedenk, in andere frameworks wordt ook het framework zélf meegestuurd naar de browser. De browser moet vervolgens de code parsen en uitvoeren. Die stap wordt bij Svelte overgeslagen. Svelte kent geen virtual dom of shadow dom.

Lees er meer over op https://svelte.dev/blog/virtual-dom-is-pure-overhead.

2. Waar wordt Svelte voor gebruikt?

Svelte wordt gebruikt voor het ontwikkelen van grotere webapplicaties. Natuurlijk kun je er ook een website voor “de bakker op de hoek” mee maken, maar daar is het framework in principe niet voor bedoeld. Denk voor typische toepassingen aan:

  • E-commerceapplicaties
  • Dashboards
  • CRUD-Frontends voor databaseapplicaties
  • Een overzicht van websites en -applicaties die zijn gemaakt met Svelte is beschikbaar op https://madewithsvelte.com/

made-with-svelte

3. Hoe gaat lokale ontwikkeling en installatie?

Svelte heeft naar goed gebruik een CLI-omgeving (net zoals Angular, React en Vue). Deze wordt echter niet lokaal geïnstalleerd. Rich Harris heeft een kleine tool geschreven (degit) die een Github-repository ophaalt zonder de .git-info. Daardoor is ook deze tool razendsnel. Je geeft aan degit een sjabloonlocatie mee en op basis daarvan wordt een lokaal project gemaakt. Dit stel je in met npm install, waarna je vervolgens de eenvoudige startapplicatie (Hello World) kunt draaien.

De opdrachten om een Svelte-project te maken zien er daarmee uit als:

Je applicatie wordt gestart op http://localhost:5000.

Daarna kun je het project svelte-hello-world openen in je favoriete editor (Visual Studio Code of JetBrains WebStorm) en er verder in werken.

svelte-hello-world

4. Hoe maak ik een eerste applicatie?

Nadat je de applicatie hebt geïnitialiseerd en gestart, kun je componenten toevoegen of bestaande componenten aanpassen. Net als in de andere frameworks zijn componenten de basis bouwstenen van een applicatie. Je maakt dus geen webpagina's meer, maar componenten die tezamen de lay-out van de pagina vormen.

De basisapplicatie ziet er uit als in de volgende afbeelding. Wanneer je eerder hebt gewerkt met frameworks als Angular, Vue of React ziet dit er vertrouwd uit. Heb je hier nog geen kennis van, dan is de structuur niet erg lastig.

  • In de map \public staat je index.html en plaats je andere statische bestanden (css, afbeeldingen, pdf's enzovoort).
  • In de map \src staan je componenten en overige logica. De applicatie wordt gestart via main.js (meestal zul je hier nooit iets in wijzigen), de startcomponent is App.svelte.
  • Op het rootniveau (\) staan configuratiebestanden als package.json, readme.md en rollup.config.js. Ook hier zul je maar heel zelden handmatig wijzigingen in hoeven aan te brengen.
  • Het meeste zul je aan het werk zijn in de map \src. Maak hierin een bijvoorbeeld een map \components en verdeel dit eventueel verder onder in modules, afhankelijk van de requirements van je project.

svelte-structure

Plug-ins voor Svelte-ontwikkeling

Componenten worden in svelte opgeslagen als .svelte-bestanden. Deze worden door de meeste editors standaard niet herkend. Toch wil je zaken als kleurcodering, automatisch aanvullen en meer. Hiervoor hebben de meeste IDE's gelukkig plug-ins of extensions beschikbaar. Installeer bijvoorbeeld:

Componenten in Svelte

Componenten bestaan in Svelte uit drie delen.

  • Een <script>-blok waarin alle logica van de component staat.
  • Een HTML-blok waarin de template/user interface van de component staat.
  • Een <style>-blok waarin eventuele CSS-stijlen van de component worden genoemd. Stijlen hebben standaard component scope (net zoals in Angular en Vue). Svelte kent geen CSS-as-JavaScript, zoals React.

Alle onderdelen zijn optioneel. Je mag dus ook een component maken die uit een leeg bestand bestaat(!) Niet dat dit nuttig is, maar het toont de flexibiliteit van Svelte. Het framework gaat uit van Single File Components, net zoals React en Vue (en anders dan Angular). Alle logica en lay-out wordt dus ingekapseld in een enkel bestand. Er is geen separation of concerns by file types. In de component importeer je eventueel andere componenten die je vervolgens als HTML-element kunt aanspreken. Bijvoorbeeld op deze wijze:

Svelte syntaxis

Componenten schrijf je in een typische Svelte-syntaxis. Het is feitelijk een mix van Angular en Vue aan de ene kant (omdat je veel HTML-schrijft die wordt uitgebreid met Svelte-specifieke directives), maar aan de andere kant lijkt het ook op React, omdat je in Svelte-componenten rechtstreeks JavaScript-expressies tussen enkele accolades mag schrijven. Zoals in <h1>Hello {name}</h1>. De syntaxis is daarmee tamelijk beknopt (er zijn handige shortcuts), maar wel even wennen.

Daarbij zijn er veel Svelte-specifieke uitbreidingen zoals:

{#if …} … {/if}

{#each …} … {/each} en

{#await …}

Dit zorgt naar mijn mening soms voor rommelige opmaak van de HTML-code. Het is zeker helderder en duidelijker dan React JSX, maar bepaald niet zo compact als *ngFor van Angular of v-for van Vue. Ik wéét waarom het op deze manier gedaan is, maar het is…wennen. Laten we het daar maar op houden.

Svelte kent vergelijkbare bindings als Vue en Angular. Dit zijn onder meer

  • Simple data binding met {…} zoals je al zag.
  • Event binding met on:, zoals in on:click={<someHandler>} of on:mouseover={…}.
  • Attribute binding waarbij je een variabele rechtstreeks kunt binden aan de waarde van een attribuut zoals in <img src={src}>. Als de naam en de waarde van het attribuut aan elkaar gelijk zijn (zoals hier), mag je dit ook afkorten als <img {src}>. Supercompact en erg elegant. Properties mag je daarnaast met de spread-operator aan een element toekennen, zoals in <MyElement {…props} />. Je hoeft ze dan niet apart te benoemen. Mooi gedaan.
  • Two-way binding met bind:. Je kunt bijvoorbeeld een variabele toekennen aan een tekstinvoerveld en de waarde hiervan direct uitlezen door <input type="text" bind:value={<someVariable>}> te gebruiken. De directive bind: is daarnaast voor tal van andere zaken te gebruiken. Ook dit gaat erg intuïtief als je er aan gewend bent. Hier toont Svelte zich een beetje een combinatie van Vue en React naar mijn idee.

Alle overige mogelijkheden en syntaxis wordt uitstekend beschreven in de Svelte documentatie op https://svelte.dev/docs. Dit is maar weer eens het bewijs dat de kwaliteit en gebruikersvriendelijkheid van een framework vaak valt of staat met de documentatie die er voor beschikbaar is. Die van Svelte is uitstekend in orde. Ik heb maar zelden een beroep hoeven doen op Stack Overflow of andere bronnen om Svelte te leren.

svelte-docs

Tutorial

Bij het leren van Svelte heb ik veel gehad aan de interactieve tutorial, beschikbaar op https://svelte.dev/tutorial/basics. De schatting van de makers dat je “in ongeveer anderhalf uur wel door de tutorial heen bent” is evenwel een schromelijke overschatting. Reken op ruim een dag, als je alles goed wilt uitproberen en zo nu en dan een zijstap wilt maken. Of ik ben niet zo snel. Dat kan ook natuurlijk.

5. Hoe maak ik een Proof-of-concept applicatie?

Met alle kennis uit de tutorial was ik na een paar uurtjes echter al in staat om een applicatie als onderstaande te maken. De requirements zijn tamelijk eenvoudig, maar laten toch het complete stappenplan van een real-life applicatie, inclusief communicatie met een backend zien.

  • Toon een eenvoudige user interface waar de bezoeker kan zoeken op (deel van) de naam van een land.
  • Communiceer met een backend - ik gebruik hiervoor de REST Countries API, beschikbaar op https://restcountries.eu/ - om een serie landen op te halen die voldoen aan het trefwoord van de bezoeker.
  • Toon een lijstje met landen die aan het trefwoord voldoen in de user interface.
  • Bij klikken op een land worden details van het betreffende land getoond in een nieuwe component.

svelte-country-demo-app

Je kunt deze applicatie zelf bekijken op github, op https://github.com/PeterKassenaar/svelte-demo-countries. Voel je vrij om de applicatie te downloaden, er een npm install voor uit te voeren en te kijken hoe de data flow door de applicatie en de componenten is. Vervolgens kun je hem verder zelf uitbreiden. Mocht je aanpassingen of verbeteringen hebben, dan houd ik me natuurlijk aanbevolen voor PR's!

Dit is een tamelijk eenvoudige applicatie, nog zonder error handling, routing of een state management-oplossing. Dit zou echter wel relatief eenvoudig toe te voegen zijn. Svelte heeft hiervoor mogelijkheden aan boord, maar met het oog op de tijd en het leerproces heb ik die niet toegepast. Dat zou de code een stuk complexer maken dan nodig is.

Conclusie

Svelte is een framework dat zich qua functionaliteit zeker kan meten met de meer bekende oplossingen als Angular, Vue en React. Het heeft superveel potentie en brengt eigenlijk het beste uit alle frameworks samen in een nieuwe omgeving. Doordat de browser geen overhead heeft maar kant-en-klare JavaScriptcode krijgt, is Svelte in potentie het snelste van alle frameworks verwacht ik. Hierbij moet ik wel aantekenen dat ik geen audit heb gedaan alle varianten heb vergeleken qua snelheid, footprint en andere performance-metrics.

De state management-oplossing die Svelte standaard aan boord heeft (met stores) behoort zelfs tot de beste die ik ooit heb gezien. Zoveel eenvoudiger dan Angular met Ngrx en React met Redux, en zelfs beter schaalbaar (denk ik) dan in Vue met Vuex. Dit is wat state management in de andere frameworks eigenlijk had moeten zijn!

Met Sapper (https://sapper.svelte.dev/) is er bovendien een applicatieframework beschikbaar dat draait 'bovenop' Svelte. Sapper is bedoeld voor het maken van applicaties en lijkt daarmee op Nuxt (Vue) of Next (React).

Toch is Svelte naar mijn mening nog niet klaar voor het 'grote werk'.

Dit komt niet door de mogelijkheden van het framework zelf, maar waarschijnlijk puur door de leeftijd ervan. Svelte is nog jong en onvolwassen. Ik miste bijvoorbeeld:

  • Een aangewezen oplossing voor routing. Onontbeerlijk voor grotere webapplicaties. Er zijn wel tal van 3rd-party mogelijkheden waar door de makers naar verwezen wordt, maar een aanbevolen, officieel ondersteunde oplossing is naar mijn idee noodzaak.
  • Nog weinig user interface-libraries. Het is geen probleem om standaard Bootstrap of een andere library te implementeren en er zijn bijvoorbeeld Svelte-implementaties van Bootstrap (SvelteStrap) en Material Design (Svelte Material UI), maar het is allemaal nog erg mager.
  • Testing. Evenmin als voor routing is er momenteel een goede unit testing-oplossing beschikbaar. Je kunt zelf aan de slag met Cypress, maar er is geen officiële ondersteuning voor. Dat komt natuurlijk mede doordat Svelte al op de server wordt gecompileerd en er geen framework in de browser draait. Daardoor zijn framworks als Jasmine, Jest of Karma niet bruikbaar. Hopelijk wordt hier in de toekomst aan gewerkt.
  • Beperkte ondersteuning voor TypeScript. TypeScript is een technologie die steeds bredere ondersteuning krijgt in het frontend. Hoewel er standaard een script setupTypeScript.js aanwezig is in nieuwe projecten, kent Svelte geen out-of-the-box ondersteuning voor TypeScript. Er zijn flink wat scherpe randjes en je moet er nog heel wat moeite voor doen. Ook bij Vue en React is TypeScript een opt-in keuze, maar je ziet dat deze frameworks al jaren langer de tijd hebben gehad om zich hierop aan te passen. Ook dit zal - hopelijk - een kwestie van tijd zijn.

Al met al denk ik genoeg redenen om Svelte zeker uit te proberen en te bekijken of het een oplossing is in jouw situatie. Mijn indruk is dat voor serieuze enterprise-toepassingen nog iets te vroeg is. Maar houd Svelte zeker op je radar voor toekomstige projecten. En natuurlijk laat ik mij graag terechtwijzen! Kom maar op met je projecten waarin je het tegendeel bewijst.

Peter Kassenaar
--23 oktober 2020.

08juli

Drie manieren om broncode in je webpagina of blog te tonen

Als je regelmatig technische artikelen of blogs schrijft, is het ongetwijfeld vaak voorgekomen dat je programmacode in de pagina wilt tonen. Dit kan natuurlijk van alle zijn. HTML, JavaScript, C++, Python en zo verder.

Om er voor te zorgen dat de lezer je broncode zo makkelijk mogelijk kan begrijpen, heb ik drie manieren op een rijtje gezet. Ze hebben allemaal hun eigen voor- en nadelen. Er is niet één ‘beste’ manier om het te doen, denk ik.

1. Copy/Paste

De eenvoudigste manier is natuurlijk om rechtstreeks vanuit je editor te kopiëren-en-plakken. Dit is snel, eenvoudig en zorgt meestal voor een goed resultaat. Nadeel kan zijn dat de opmaak verloren gaat, dat regelovergangen niet goed overkomen en dat speciale tekens mogelijk automatisch worden omgezet door je editor (berucht voorbeeld: het HTML-commentaar <!—en --> wordt door veel editor automatisch omgezet naar een lang liggend streepje – of een pijl).

Een eenvoudige React-component ziet er dan bijvoorbeeld als volgt uit:

// App.js
import React from 'react';
// Child components
import Counter from "./Counter/Counter";
import DisplayCounter from "./DisplayCounter/DisplayCounter";
// Our parent component - it holds the state for the child components
function App() {
const [counter, setCounter] = React.useState(0);
const incrementCounter = (val) => setCounter(counter + val);
return (
<div className="container">
<h2>Hello React</h2>
{/*We are now passing the value and functionality for*/}
{/*the counter down to child components. */}
<Counter increment={incrementCounter} val={30} />
<DisplayCounter counter={counter}/>
</div>
);
}
export default App;

Door het lettertype aan te passen naar Courier of een ander monospaced font kun je wat betere resultaten bereiken:

// App.js
import React from 'react';

// Child components
import Counter from "./Counter/Counter";
import DisplayCounter from "./DisplayCounter/DisplayCounter";

// Our parent component - it holds the state for the child components
function App() {
const [counter, setCounter] = React.useState(0);

const incrementCounter = (val) => setCounter(counter + val);

return (
<div className="container">
<h2>Hello React</h2>
{/*We are now passing the value and functionality for*/}
{/*the counter down to child components. */}
<Counter increment={incrementCounter} val={30} />
<DisplayCounter counter={counter}/>
</div>
);
}

export default App;

2. Github Gists

Bij Github kun je veel meer hosten dan alleen complete repositories. Je kunt ook individuele snippets broncode plaatsen en hier bijvoorbeeld commentaar op vragen. Een geïsoleerd stuk code zonder omliggende structuur of project heet een gist.

En het mooie is: van Github krijg je een embed-code die je in je webpagina of blog kunt plakken. Dezelfde React-component ziet er dan opeens als volgt uit:

Het werken met Gists is superpraktisch als je broncode wilt delen, de lezer de mogelijkheid wilt geven de code eenvoudig te kopiëren, commentaar wilt verzamelen op je gist (via Github) en meer. Het is echt een sociale manier om met code om te gaan.

In populaire editors kun je van broncode rechtstreeks een gist maken:

    Webstorm

    • Selecteer een stuk code, klik met de rechtermuisknop en kies Create Gist.

    webstorm-gist

      Visual Studio Code

      Installeer de extension Gist van Ken Howard (https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist). Voordat je de extensie kunt gebruiken, moet je wel eerst zelf een Github Access Token voor Gists aanmaken. Hoe dat gaat, lees je hier: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token.

      Daarna kun je via Ctrl+Shift+P, Create New Gist een nieuwe gist maken.

      vs-code-gist

        3. Carbon

        Tot slot kun je een mooie afbeelding van je broncode laten maken via de online dienst Carbon (https://carbon.now.sh/).

        Hier kun je je broncode kopieren/plakken en er een .png- of .svg-afbeelding van laten maken. Je hebt keuze uit tal van kleurenschema’s, achtergrondkleur en taalschema’s (HTML, JavaScript, CSS, C#, JSX en talloze andere).

        Onze React-component ziet er dan op deze manier uit:

        carbon

        Conclusie

        Je hebt drie manieren gezien om broncode te delen via je webpagina. De eenvoudigste manier is het rechtstreeks kopiëren/plakken vanuit je editor. Als je de broncode via een online platform wilt delen, is Github Gists een goede manier. Wil je een fraaie screenshot van je code distribueren (zonder dat deze rechtstreeks te kopieren is), gebruik dan de online dienst Carbon.

        Ken jij nog andere alternatieven? Laat het weten. Ik ben benieuwd naar de manier waarop jij broncode deelt via je blog of website.

        Peter Kassenaar

        -- 8 juli 2020

        01mei

        Windows 10 tip : afbeelding over meerdere monitors

        Een leuke feature van mobiele telefoons is dat het tegenwoordig zo eenvoudig is om makkelijk panoramafoto’s te maken. Tegelijkertijd hebben veel computergebruikers (in ieder geval programmeurs, waar ik dagelijks mee werk) vaak twee of zelfs drie monitoren.

        De standaardinstelling van Windows is dat een gekozen achtergrondafbeelding voor het bureaublad wordt herhaald op elke monitor. In mijn geval ziet dat er dan op deze manier uit:

        wallpaper-fit

        Dat is niet slecht, maar het kan beter. Ik heb immers niet voor niks een panoramafoto gemaakt.

        Dit is wat we willen:

        wallpaper-span

        Het is niet lastig om dit in te stellen, maar je moet even weten waar het zit:

        1. Klik met de rechtermuisknop een leeg deel van het bureaublad en kies Personaliseren (Personalize).
        2. In het venster Achtergrond (Background) kun je een afbeelding kiezen en de manier waarop deze over de monitors verdeeld wordt.
        3. Kies de optie Verdelen (Span) in het venster dat is verschenen. Met de overige opties kun je direct testen hoe je achtergrond er bij de andere instellingen uitziet. Je hoeft het venster hiervoor niet te sluiten, of op Opslaan te klikken.

        background

        Meer informatie

        Wil je meer lezen over Windows 10 en alle instellingsmogelijkheden? Kies dan bijvoorbeeld een van onderstaande boeken.

        Peter Kassenaar
        -- 1 mei 2020

        23april

        Outlook tip: afspraak maken van e-mail

        Ik gebruik Outlook als belangrijkste communicatietool. Regelmatig krijg ik een mailtje met daarin details en een datum voor een afspraak, zoals bijvoorbeeld onderstaande.

        image

        Maar dan moet je er nog zelf aan denken om de Agenda te openen, de juiste datum op te zoeken en hier handmatig een nieuwe afspraak te plannen.

        Snelle stappen

        Gelukkig kan dat in moderne versies van Outlook automatiseren, door een Snelle stap (Quick Step) aan te maken. Dan kun je in het vervolg met één muisklik (nou ja, misschien twee of drie, maar in ieder geval een stuk sneller) een e-mailbericht naar de agenda sturen. Bijkomend voordeel is dat je in de betreffende afspraak dan ook direct de tekst en eventuele links uit het mailbericht bij de hand hebt.

        Het maken van een Snelle stap gaat als volgt:

        1. Open het e-mailbericht waarvan je een afspraak wilt maken.
        2. Klik op Nieuwe maken (Create New) het kader Snelle stappen.
        3. Typ een naam voor de actie. Ik koos E-mail naar afspraak.
        4. Kies een actie uit de lijst. Scroll naar beneden om Een afspraak met de tekst van het bericht maken te kiezen. Zoals je ziet kun je nog tal van andere handelingen automatiseren.

        image

        1. Klik op de knop Actie Toevoegen (Add Action).
        2. Eventueel kun je nog aanvullende acties toevoegen op dezelfde manier, een sneltoets kiezen, of een eigen tooltip schrijven. Maar voor mijn doeleinden is deze stap voldoende.
        3. Klik op Voltooien (Finish).

        De snelle stap is nu verschenen in het kader Snelle stappen. Je kunt hem direct gebruiken.

        Snelle stap activeren

        1. Open een mailtje waarvoor je een afspraak wilt maken (of, realistischer, je leest een mail en ziet dat hiervoor een afspraak in de agenda gepland moet worden).
        2. Klik in het kader Snelle stappen op de stap E-mail naar afspraak.
        3. Er wordt direct een nieuw Afsprakenvenster geopend, waarin je de titel van de afspraak, de tijd en de locatie op de gebruikelijke manier kunt aanpassen.
        4. Stel de afspraak in en kies Opslaan en sluiten (Save & Close).

        image

        De afspraak staat direct in je agenda. Hier kun je hem verder aanpassen zoals gebruikelijk. Er is geen koppeling aanwezig tussen het oorspronkelijke mailtje en de afspraak. De mail kun je dus verplaatsen, verwijderen, enzovoort. Dit heeft geen invloed op de afspraak.

        Stappen beheren

        Je kunt probleemloos wat experimenteren met deze tool. Via de optie en het venster Snelle stappen beheren (Manage Quick Steps) kun je stappen bewerken, dupliceren of weer verwijderen.

        Eventueel kun je ook vanuit dit venster een nieuwe Snelle stap maken – maar ik vind het makkelijker om dit rechtstreeks vanuit Outlook te doen, omdat je dan ziet waar je mee bezig bent.

        snelle-stap-1

        Handigheidje in Outlook. Doe er je voordeel mee!

        Handboek Outlook 2019

        P.S. Wil je meer weten over Outlook, lees dan ook mijn Handboek Outlook 2019. Hierin staan meer tips over het gebruik van E-mail, Afspraken en Contactpersonen.

        Peter Kassenaar
        -- 23 april 2020

        22januari

        Windows 10 en Microsoft HoloLens – de toekomst

        Op de langverwachte persbijeenkomst die Microsoft op 21 januari 2015 organiseerde was het grote nieuws niet Windows 10 zelf met al zijn nieuwe snufjes en verbeteringen, maar het konijn dat Microsoft aan het einde uit de grote hoed toverde: Microsoft HoloLens. De kaken van de aanwezigen in de zaal vielen collectief omlaag.
        - “Holograms?” 
        - “Yes. Holograms”.

        HoloLens projecteert hologrammen in de wereld waarin je je op dat moment bevindt

        Als je mijn Twitter feed die avond toevallig hebt gevolgd, dan heb je gezien dat ik er behoorlijk enthousiast over ben. Voor als je het nog niet hebt gezien: HoloLens projecteert real time hologrammen in de wereld waarin je op dat moment aanwezig bent. Je kunt met diverse apps interacteren met die projecties en zo games spelen, met anderen converseren, afstandsonderwijs volgen en meer. Bekijk hier de introductievideo. Nog korter:

        “Hololens is voor mij de meest opwindende introductie sinds de aankondiging van de iPhone in 2007.”

        Ja, lach maar. Ik wacht wel even. Misschien moet ik zelf over vijf jaar ook smakelijk lachen om deze uitspraak, maar op dit moment durf ik de stelling wel aan dat Microsoft hiermee een winnaar in handen heeft. Dit is de toekomst van gaming, design, voorraadbeheer, medische handelingen, praktijkonderwijs, apparaatonderhoud en wie weet wat nog meer als de API’s voor het hologramprogrammeren eenmaal in handen van de community komen.

        Ik ga hier niet alle kenmerken herhalen die ook al in de artikelen op de diverse nieuwssites worden genoemd. Lees zelf bijvoorbeeld:

        • Tweakers – inleidend artikel met commentaren
        • The Verge – Hands on ervaringen met HoloLens
        • Engadget – Artikel met speculaties over de technische specificaties.

        Waarom HoloLens een succes kan worden

        Belangrijke redenen die volgens mij doorslaggevend kunnen zijn waarom Hololens wel een succes wordt, terwijl bijvoorbeeld Google Glass dat niet zijn geworden en Oculus Rift nog lang niet de verspreidingsgraad heeft die de makers voor ogen hadden:

        • Hololens heeft geen front-side camera, zoals bijvoorbeeld Google Glass wel had. Met alle privacy-issues van dien. Met Hololens kun je je weliswaar samen in een virtuele wereld begeven, maar er is geen gevaar dat nietsvermoedende omstanders ongemerkt worden gefilmd en buiten hun medeweten op Facebook belanden, of erger. Goede keuze van Microsoft. [zie ook update, hieronder].
        • Hololens kent een view-throughmechanisme. Dat betekent dat je niet afgesloten wordt van de buitenwereld, maar dat hologrammen aan jouw bestaande wereld worden toegevoegd. Je kunt door de donkere lens gewoon anderen blijven zien, met anderen spreken en interacteren. Je bent niet asociaal in je eigen VR-wereld opgesloten, maar communicatie blijft mogelijk. Essentieel.
        • Door dat view-throughmechanisme hoeft Hololens niet de wereld opnieuw te berekenen en te creëren.  Het hoeft ‘alleen maar’ hologrammen op de al bestaande wereld te projecteren. Dat is nog voldoende uitdaging voor de rekenkracht van de processor (in HoloLens HPU, Hologram Processing Unit genoemd), maar maakt het een stuk eenvoudiger dan bij Oculus Rift, die de complete wereld moet berekenen, inclusief jouw interactie ermee. Dit voorkomt dat je projecten op grofkorrelige tafeltjes in een pixelige omgeving moet manipuleren. Alle rekenkracht kan worden aangewend voor de hologrammen. Heel slim.
        • Je hoeft HoloLens niet continu te dragen. Waar bij Google Glass werd verwacht dat je het geeky object de hele dag op je neus droeg, zal dat bij HoloLens niet het geval zijn. Net zoals je nu op de bank gaat zitten met je tablet of in je stoel neerploft om tv te kijken, zo zul je straks op de bank gaan zitten en zet je dan HoloLens op om informatie op te zoeken of er mee te interacteren. Of ga je voor je Xbox staan - als dat nog nodig is - om een HoloGame te starten (dat laatste woord heb ik zelf verzonnen ;-). Oftewel: HoloLens is een specifiek apparaat, waar Google Glass een generiek doel had. En mede daarom is mislukt.

        MineCraft live in je eigen huiskamer. Opslaan en de volgende dag doorspelen!

        Nogmaals, de geschiedenis zal uitwijzen of HoloLens het succes wordt waar Microsoft op hoopt, maar ik geef ze een goede, heel goede kans.

        Update – 23 januari 2015. Ik werd er via Twitter door @GerjanOnline op gewezen dat de HoloLens wel degelijk frontside camera’s heeft. Dit is uiteraard juist. Zonder frontside camera’s zou het apparaat immers totaal geen beeld van de omgeving kunnen opnemen om de hologrammen te kunnen projecteren. Het artikel op Engadget spreekt van “at least four cameras or sensors on the front”. Ik blijf er wel bij dat het doel van HoloLens in dit opzicht anders is dan bij Google Glass. De camera’s worden niet gebruikt voor opnamen of filmbeelden, maar alleen om te berekenen waar de lens zich bevind en hoe de hologramwereld moet worden opgebouwd. Het zijn rekendevices. Geen registratiedevices. Ik verwacht ook dat Microsoft niet zal toestaan dat apps de camera’s hiervoor gaan gebruiken. Maar de toekomst zal dit moeten uitwijzen.

        Houd de website http://www.microsoft.com/microsoft-hololens/en-us in de gaten voor het laatste nieuws, en volg https://twitter.com/hololens voor Twitter-updates. Het is de toekomst.

         

        Peter Kassenaar
        -- 22 januari 2015

        19november

        Unboxing iPad Air 2

        Mijn eerste iPad stamt uit april 2010 en is daarmee ruim 4,5 jaar oud. Ik denk dat het een van de oudste iPads in Nederland is, omdat ik hem in de Verenigde Staten kocht toen hij officieel nog niet in Europa gelanceerd was.

        Maar de levensduur van de iPad Classic is door Apple beëindigd. Technisch is het apparaat nog prima, maar er worden geen updates van iOS meer uitgegeven voor deze versie. iOS 5.1.1 is de maximale versie. Tegelijkertijd heeft Apple het app-makers verplicht gesteld om nieuw apps minimaal tegen iOS 6 te compileren. Apps voor iOS 5 worden niet meer geaccepteerd in de Store, met xCode kun je ze zelfs niet eens meer maken. Waarmee de originele iPad effectief om zeep is geholpen.

        En: daar kwam ik achter toen ik juist in een app-training bezig was (training PhoneGap). Ik dacht slim te zijn door de avond tevoren ‘nog snel even xCode te updaten’. Waardoor je per saldo de volgende dag met een tablet die dan plotsklaps de functionaliteit van een baksteen heeft, op stap gaat. Tja.

        Nu dus maar nóg slimmer geweest en tijdig een nieuwe iPad aangeschaft.

        Ik maakte onderstaand filmpje over het unboxing- en activeringsproces van de iPad Air 2.

        P.S. Ik kan me de storm van kritiek die op Microsoft nederdaalde nog goed herinneren, toen bleek dat van de beloofde 32GB op de Surface tablet slechts 16GB beschikbaar was voor het installeren van apps (november 2012). Apple fanboys riepen huilend van verontwaardiging de hulp van advocaten en class action-specialisten in om alle ‘benadeelden’ te compenseren.

        Bij toeval wierp ik nu echter even een blik op de hoeveelheid ruimte die op mijn ‘16GB’ iPad Air beschikbaar is, direct na installatie. Wat blijkt? Slechts ruim 5 GB (!) vrije ruimte. Op een totaal van 11,7?

        Dat betekent dus dat minder dan 35% van de geadverteerde ruimte ook daadwerkelijk gebruikt kan worden. Help me even herinneren; waar heb ik ook al weer al die verontwaardigde blogposts hierover gelezen?……crickets……

        iPad_air_storage

        Maar verder is het een mooi ding.

        -- Peter Kassenaar
        19 november 2014

        07oktober

        Overstappen naar Windows Phone

        Van iOS naar Windows Phone 8

        Mijn mobiele telefoon was naar de huidige maatstaven hoogbejaard (het is een iPhone 3GS uit het voorjaar van 2009). Ruim vierenhalf jaar heb ik er met veel plezier gebruik van gemaakt. Maar toen duidelijk werd dat dit model bij het uitbrengen van iOS7 enkele weken geleden, buiten de boot zou vallen, ben ik eens om me heen gaan kijken.

        Een nieuwe iPhone? Mwaa, meer van hetzelfde. En iOS7 met de nieuwste serie iPhones (5S en de 5C) zijn naar mijn idee nou niet bepaald het meest revolutionaire producten die Apple de laatste jaren heeft gelanceerd.

        In plaats daarvan besloot ik me te richten op het platform waar ik nog geen ervaring mee had, maar wat de laatste maanden wel een gestage groei liet zien: Windows Phone 8. Voor mij is dit een verrijking. Op deze manier heb ik namelijk voor de drie grote mobiele platforms (iOS, Android en Window Phone) apparaten in huis en kan ik hiervoor apps ontwikkelen en testen op de hardware zelf. En dat is altijd beter dan op een software-emulator.

        En nu Windows Phone eindelijk een beetje in de lift lijkt te zitten en – in Europa althans – in de grootste markten (Duitsland, Engeland, Frankrijk, Italie en Spanje) bijna in de dubbele cijfers is beland qua marktaandeel en bovendien mijn oude liefde Nokia een serie meer dan fatsoenlijke toestellen op de markt heeft gebracht, was de keuze duidelijk. Vandaar dat vorige week een simlockvrije Lumia 1020 op mijn kantoor werd afgeleverd.

        lumia01

        Elders op het web lees je meer dan complete reviews van de Nokia Lumia telefoons (bijvoorbeeld bij EngadgetTweakers.net of bij Techzine) en op YouTube zijn allerlei vergelijkende videoreviews te vinden – vaak wordt hierin de camera als uitgangspunt genomen.

        Ik deel in dit artikel zoals gebruikelijk mijn persoonlijke ervaringen. Die zullen soms naïef en simpel lijken voor doorgewinterde Windows Phone-gebruikers, maar er zullen ongetwijfeld lezers zijn die ook de overstap willen maken vanaf het ene mobiele platform naar het andere. En de kans dat Windows Phone deel uitmaakt van die afweging wordt langzamerhand steeds groter. Daarom, zonder verder oponthoud mijn eerste stappen op Windows Phone 8-gebied.

        Hardware

        • De Lumia 1020 is een prachtig toestel. Verbijsterend gewoon wat voor supercomputer ze in zo’n kleine behuizing hebben weten te plaatsen. Als je de markt een beetje hebt gevolgd, dan weet je dat de 41-megapixel camera het selling point van deze telefoon is. Maar minstens zo indrukwekkend vind ik de overige hardware daar omheen. Het toestel is even groot als de huidige generatie nieuwe Samsungs, LG’s of Sony Experia-toestellen en weeg ruwweg even veel (of weinig), ca 150 gram. Dat is minder dan de directe voorganger de Luma 920 (die ik met 185 gram net wat aan de zware kant vond), terwijl de overige hardware er alleen maar op vooruit is gegaan. Het scherm is 1280x768 pixels, kraakhelder, de kunststof behuizing is niet te glad en ligt prettig in de hand.
        • In de meeste telefoonwinkels is de Lumia 1020 op dit moment (begin oktober 2013) nog niet leverbaar of niet op voorraad. Maar online bij Bol.com of Coolblue kun je het toestel binnen 24 uur in huis hebben.
        • Ja, de telefoon heeft een ‘bobbel’ aan de achterkant, waar de camera uitsteekt. Hij is echter veel minder prominent aanwezig dan ik op basis van de foto’s had verwacht. Het is maar enkele millimeters en valt weinig op. Sterker nog, ik vind het zelfs wel prettig. Die camera-uitstulping geeft je vingers juist houvast tijdens het bedienen en je voelt direct hoe de oriëntatie is als je hem uit je broekzak haalt (bron foto:http://tweakers.net/productreview/84382/nokia-lumia-1020-zwart.html).
        • http://tweakers.net/ext/f/ttBNb6N3dRItEMcdp1z68Y1b/full.jpg
        • Ik mis in vergelijking met mijn iPhone een schuifknop om de telefoon met één handeling op ‘stil’ te zetten. Die gebruik ik veel tijdens trainingen en presentaties. Het lijkt er op dat dit op de Lumia alleen met minimaal drie extra handelingen kan via het menu Instellingen.
        • De luidspreker is voldoende luid als hij gewoon in je zak zit en je wordt gebeld. Er is een groot verschil aanwezig in volume bij gewoon gebruik en met een koptelefoon. Bij gebruik met oortjes moet je het volume echt terugschakelen om niet doof te worden. Maar je moet niet vergeten het weer op te schroeven als je de oortjes uitdoet, anders hoor je de telefoon niet meer. Die balans is niet goed, naar mijn mening.
        • In de Lumia 1020 gaat een Micro SIM-kaartje. In mijn iPhone 3GS zat een standaard SIM-kaart. Dat past niet. Gelukkig kunnen ze bij elke telecomwinkel je SIM-kaart op maat knippen, zodanig dat het wel past. Het personeel van de Hi-winkel in Zutphen regelde dit kosteloos voor mij.

        Software

        Apple verdient alle credits voor het creëren van de smartphone-revolutie, dat kan niet genoeg benadrukt worden. Maar jaren na dato is het gebruik, de acceptatie en het verwachtingspatroon natuurlijk volkomen anders dan ten tijde van de introductie in 2007. Een grid met pictogrammen zoals iOS en ook Android bieden (al biedt die laatste wat meer vrijheid in de vormgeving met widgets) is wat mij betreft wel uitgeëvolueerd. Weer een reden om teleurgesteld te zijn in de vernieuwingen die iOS7 bracht.

        De tegelinterface die Windows Phone 8 biedt is in het begin wennen, maar uiteindelijk veel flexibeler en moderner dan iOS en Android bij elkaar. Onderdelen sluiten beter op elkaar aan en apps leven niet uitsluitend in hun eigen sandbox. De integratie van systemen, apps en sociale netwerken is veel beter. Ik heb nu twee dagen met Windows Phone 8 gewerkt en het is verrassend hoe verouderd en omslachtig iOS (maar ook Android) aanvoelt als ik nog eens mijn iPhone of Samsung er bijpak.

        Het is echter niet allemaal goud wat er blinkt op softwaregebied op een Windows Phone. Het is een Dr. Jekyll en Mr. Hyde-situatie wat mij betreft. Laat me dat toelichten:

        Sterke punt: de apps

        Nokia plaatst op elke Windows Phone-telefoon een serie eigen apps van verbluffende kwaliteit. TomTom? Niet meer nodig, want elke telefoon wordt geleverd met Nokia Here en Nokia Drive. Gratis turn-by-turn navigatie met gratis live verkeersupdates én alle OV-dienstregelingen van Nederland via Nokia Transit. Het TomTom HD-traffic abonnement kan dus ook de deur uit. Evenals het Spotify-abonnement, want Nokia Music laat je gratis muziek streamen. Je kunt eigen genre-mixen maken en pinnen op je startscherm. Zelfs offline beluisteren is mogelijk. Alleen als je hogere kwaliteit wilt of meer wilt opslaan hoef je een abonnement (EUR 4,-/maand) af te sluiten.

        De foto-apps zijn geweldig. In het begin lijkt het overkill, want wat is het verschil tussen bijvoorbeeld Nokia Pro Cam en Nokia Smart Cam? Maar als je de apps eenmaal opstart wordt je dit in een korte introductie duidelijk gemaakt. Daarnaast zijn nog apps aanwezig voor het projecten van je foto’s op devices van andere (via de clouddienst photobeamer.com), voor het maken van panorama’s en zijn er bewerkingsprogramma’s Nokia Cinemagraph, Nokia Video Trimmer en Nokia Creative Studio. Keuze te over.

        Zo goed als alle populaire apps uit de top-100 zijn inmiddels ook als Windows Phone-variant verkrijgbaar: Twitter, Facebook, Nu.nl, Tv-gids, Buienradar, Adobe Reader, Dropbox, Netflix, internetbankieren en treininformatie stonden in een mum van tijd op mijn telefoon. Ook de sectie games (als je daar van houdt op je telefoon) is inmiddels ruim gevuld. De Windows Store is zijn achterstand op de Apple App Store en Google Play in ieder geval op kwalitatief niveau in hoog tempo aan het inlopen, is mijn indruk. Een goede YouTube-app ontbreekt nog, door het conflict tussen Google en Microsoft, maar dit zal een kwestie van tijd zijn.

        Het enige waar ik nog geen goede Windows Phone-variant van heb gevonden zijn de GPS-apps Runkeeper en Strava. Deze lijken voorlopig alleen beschikbaar voor Android en iOS.

        screenshots

        Links: enkele veelgebruikte apps op het startscherm van mijn telefoon. Rechts: Office voor Mobile ondersteunt alle standaard Office-documenten.

        Op elke Windows Phone wordt bovendien een versie van Office voor Mobile meegeleverd die rechtstreeks overweg kan met je .docx en .xlsx-bestanden. Erg handig.

        Integratie met Windows

        Zodra je een Windows Phone aansluit op een pc, wordt hij herkend en is hij gewoon als map aanwezig in Windows Verkenner. Wat een verademing. Geen gezeur meer met iTunes (dat is het allereerste programma dat ik nu van mijn computer ga verwijderen!), drivers installeren of met synchronisatie-issue. Mac-gebruikers kunnen zonder problemen de Windows Phone-app voor Mac installeren en ook Nokia heeft bijvoorbeeld Nokia photo transfer for Mac, mocht je deze liever gebruiken.

        lumia-windows_01

         

        SNAGHTML6799fe99

        Windows Phone in Windows Verkenner: je kunt gewoon foto’s, muziek en documenten uitwisselen met je computer. Handig.

        Zwakke punt – de ontbrekende apps

        Maar dan: het viel mij in negatief opzicht op dat er in vergelijking met iOS en Android weinig standaardapps worden meegeleverd, waarvan je er tegenwoordig toch wel van uit mag gaan dat ze aanwezig zullen zijn.

        Een rekenmachine en een eenvoudige alarmklok? Check. Maar verder? Geen apps voor weer, timer, countdown, beurskoersen of wereldklok. Geen kompas, dictafoon, batterijstatus, nieuws of zelfs maar een notitieblokje. Dat was toch even een WTF?-momentje. Jazeker, ze zijn via de Store wel te installeren – en vaak ook gratis – maar dat had ik toch anders verwacht. Nu moet je eerst ontdekken dat

        • a) de app die je zoekt kennelijk niet aanwezig is, terwijl het toch om basisdingen gaat die al sinds Android 2.x en iOS 3.x gesneden koek zijn. Vervolgens:
        • b) de store openen en zelf op zoek naar een alternatief.
        • c) zoeken uit veel varianten welke je het beste kunt proberen (gratis? betaald?) en moet je weer recensies lezen, apps installeren, uitproberen en weer weggooien enzovoort. En dan weer opnieuw beginnen bij A.

        Een tegenvaller.

        Ook kent Windows Phone geen centraal notificatiecentrum voor nieuwe berichten, pushnotifications en statusupdates. Ik ben hier zeker geen grootgebruiker van, maar nu het er niet is (zoals op iPhone en Android), mis ik het toch. Ik hoop dat dit in de toekomst nog toegevoegd zal worden aan Windows Phone.

        Tot slot – show off

        Ik kan het natuurlijk niet laten, en moet ook even de obligate kijk-eens-wat-mijn-nieuwe-speeltje-kan zaken toevoegen. De 41 Megapixel-camera is geweldig. Inzoomen achteraf is werkelijk een uitvinding, zeker als het zo goed uitgewerkt is. Kijk bijvoorbeeld eens deze opname van de IJssel tussen Dieren en Doesburg.

        ijssel

        Had je die vogel gezien op dat markeringsbord voor de vaargeul aan de overkant? Welke vogel? Nou, deze:

        vogel

        (foto’s verder niet bewerkt voor kleur of helderheid, en online verkleind in resolutie voor sneller downloaden). Je kunt heel eenvoudig panorama’s schieten, met vrijwel vergelijkbare resolutie.

        panorama

        Nokia Smart Cam

        Met Nokia Smart Cam kun je actie-opnames maken. Je schiet een serie foto’s (of liever: dat doet de app voor je) en naderhand bepaal je welke opname je wilt gebruiken. Er zijn allerlei kunstzinnige effecten mogelijk. Wil je bijvoorbeeld een standaardfoto?

        winkel1

        Of wil je liever een serie actie-shots?

        winkel2

        Of liever met een vervaagde achtergrond om beweging te suggereren?

        winkel3

        Of wil je liever alle bewegende onderdelen weglaten? Ook dat kan:

        winkel4

        Alle bovenstaande foto’s zijn dus gemaakt op basis van één opname. Je kiest achteraf welke je wilt gebruiken en hoe je hem eventueel verder bewerkt (opnieuw met dank aan personeel Hi-winkel Zutphen). Behalve bovenstaande kun je bijvoorbeeld ook een groepsportret schieten en uit een serie van zes of zeven opnames voor iedereen het ‘beste gezicht’ kiezen, dat er vervolgens ingemonteerd wordt. Erg leuk.

        muziek

        Links: Gratis muziek streamen en mixen maken op basis van genre of artiest met Nokia Music. Ook concerten bij jou in de buurt worden getoond. Rechts: gratis routenavigatie met live verkeersupdates via Nokia Drive+.

        Conclusie

        Mijn kennismaking met Windows Phone 8 smaakt naar meer. Het is verfrissend en uitdagend ten opzichte van iOS en Android. De hardware is uitstekend, de software van Nokia en de door Microsoft meegeleverde apps zijn van hoge kwaliteit. Wat tegenvalt is dat voor veel standaardhandelingen (notities maken, weer, beurskoersen, klok en timer instellen enzovoort) geen apps aanwezig zijn en je hiervoor zelf op zoek moet. Dit doet een beetje onvolledig aan. Integratie van apps met online diensten en sociale media is meer dan uitstekend en moderner dan wat andere mobiele platforms bieden.

        Wil je zelf meer weten over Windows Phone, kijk dan eens op deze introductiepagina’s van Microsoft en Nokia. Ik heb er de afgelopen dagen veel aan gehad.

        Ben ik belangrijke dingen vergeten of heb ik ze verkeerd beschreven? Laat het weten!

        Peter Kassenaar
        -- 7 oktober 2013.

        19augustus

        E-mail nieuwsbrieven met MailChimp

        mailchimp_logo1

        Bij het redesign van mijn website heb ik er voor gekozen ook regelmatig een nieuwsbrief te gaan verzenden.

        Nu kun je natuurlijk zelf een nieuwsbrievensysteem programmeren, zoals ik bijvoorbeeld heb gedaan voor Yindo. Maar voor een website die geen eigen gebruikersdatabase heeft – zoals dit blog - is het veel sneller en eenvoudiger om gebruik te maken van een bestaande dienst. Ik heb gekozen voor MailChimp.

        MailChimp

        MailChimp bestaat al ruim 10 jaar en is uitgegroeid tot een van de grootste e-mailverzenders ter wereld. Alles werkt via je browser, je hoeft dus geen aparte software te installeren.

        Je kunt verschillende abonnementen afsluiten. Je kiest dan bijvoorbeeld voor het verzenden van een x-aantal berichten per maand, of je koopt juist vooraf mailtegoed. Hiermee kun je bijvoorbeeld op voorhand 10.000 mailberichten inkopen, die je naar wens kunt gebruiken. De prijs per e-mailbericht varieert dan van 0,5 tot 3 cent per mailtje.

        Voor kleinere gebruikers zoals particulieren, verenigingen, kleine bedrijven en organisaties is er ook een gratis optie. Hiermee kun je maandelijks 12.000 berichten verzenden naar maximaal 2.000 ontvangers. Dit is de optie die ik voor deze website heb gekozen.

        MailChimp is niet alleen geschikt voor nieuwsbrieven, maar ook voor e-mail rondzendlijsten van verenigingen, teams binnen bedrijven en organisaties, of als communicatiemedium voor belangengroeperingen. Eigenlijk in alle situaties waarin meerdere personen tegelijk een mailbericht moeten ontvangen en je niet alle adressen in het (B)CC-veld wilt opnemen.

        Stappenplan

        Het instellen van een e-maillijst via MailChimp is erg eenvoudig en bestaat uit verschillende stappen.

        1. Meld je aan voor een MailChimp-account.
        2. Stel een lijst met ontvangers in. Je kunt bestaande e-mailadressen importeren, of een hyperlink op je website plaatsen die verwijst naar een aanmeldformulier.
        3. Maak een mailbericht (dit wordt door MailChimp een campaign genoemd) die je verstuurt naar ontvangers op de lijst.
        4. Verstuur je bericht.
        5. Bekijk de MailChimp-rapportages. Je kunt heel nauwkeurig zien hoeveel personen (en welk percentage van de ontvangers) je mailbericht hebben geopend en gelezen, op welke links is geklikt en nog tientallen andere variabelen bekijken.

        1. Aanmelden

        • Ga naar http://mailchimp.com en klik op de rode knop Sign Up Free.
        • Vul je gegevens in en kies Create My Account.
        • Na het bevestigen van je account kun je inloggen op de MailChimp-site om je eerste lijst te maken.

          Aanmelden voor een MailChimp-account

          Klik in het MailChimp Dashboard op je eigen naam om je accountinstellingen aan te passen. Hier kun je bijvoorbeeld je profiel aanpassen, een mobiel telefoonnummer opgeven voor extra verificaties, je abonnementtype veranderen en meer.

          Je eigen accountgegevens beheren bij MailChimp

           

          2. Een lijst maken

          Elke campagne wordt verzonden naar een lijst met ontvangers. Deze lijst kun je zelf invullen (let op: je moet toestemming hebben van de ontvangers, anders ben je in overtreding. MailChimp kan daarop besluiten je account te blokkeren, als ze er te veel klachten over krijgen) of importeren vanuit bijvoorbeeld een Excel-bestand.

          Het MailChimp Dashboard voor het maken van nieuwe lijsten en campagnes

          • Kies in het menu aan de linkerkant de optie Lists en daarna de knop Create List.
          • Vul een aantal standaardgegevens in, zoals de naam van de lijst, wie standaard als afzender wordt opgegeven (deze naam zien de ontvangers in hun mailtoepassing) en wat het standaard antwoordadres is.
          • Je kunt hier ook een herinnering invullen voor ontvangers van de mail (zoiets als ‘u ontvangt dit mailbericht omdat u zich via onze website hebt opgegeven voor de nieuwsbrief (…)’)

          Als je de lijst hebt opgeslagen, kun je contacten importeren en/of je aanmeldformulier samenstellen. Je kunt dit probleemloos met elkaar combineren, dus bijvoorbeeld eerst een lijst met bestaande contacten importeren en vervolgens ook de webformulieren maken voor iedereen die zich nieuw aanmeldt bij de lijst.

          Contacten importeren of aanmeldformulier maken

          Behalve contacten importeren uit kommagescheiden bestanden (.CSV-bestanden) of Excel, kent MailChimp nog talloze andere manieren om contacten aan je lijst toe te voegen:

          Contacten importeren in MailChimp

          Aanmeldformulier maken

          MailChimp kan ook het complete proces van aanmelden, bevestigen en eventueel weer verwijderen van contacten voor zijn rekening nemen. Nieuwe personen kunnen zich dan aanmelden via het web. Deze optie is niet verplicht, als je zelf het gebruikersbeheer volledig in eigen hand wilt houden, kun je de lijsten desgewenst handmatig bijhouden en contacten toevoegen of verwijderen.

          Maar als je MailChimp dit voor je wilt laten doen (zoals ik heb gekozen voor het aanmelden voor de nieuwsbrief via www.kassenaar.com), kies dan de optie Signup Forms in de detailpagina voor een bepaalde lijst.

          MailChimp maakt verschillende soorten aanmeldformulieren voor je

          Bij het aanmeldformulier wordt een verkorte hyperlink getoond. Dit is de unieke URL van jouw aanmeldformulier. Deze kun je in je eigen website gebruiken om te verwijzen naar aanmelden voor je nieuwsbrief of rondzendlijst.

          Merk verder op dat het aanmeldformulier bestaat uit drie tabbladen: Build it, Design it en Translate it. Met name Translate it is interessant voor Nederlandse sites, want hier kun je er voor kiezen de standaardvelden automatisch te laten vertalen in het Nederlands. Je hoeft dit dan niet handmatig in te stellen. Veder kun je teksten en afbeeldingen invoegen en lettertypen en kleuren en dergelijke kiezen. Zo kun je het aanmeldformulier prima laten aansluiten bij de rest van je site.

          Verschillende opties voor het instellen van aanmeldformulieren

          Tot slot zie je boven het vak met de URL nog een uitklapmenu (al is het niet direct duidelijk dat het een dropdown is). Hiermee kun je elk van de formulieren in het aanmeldproces vormgeven: het bevestigingsformulier, het opzegformulier en nog veel meer.

          De diverse formulieren in het aanmeld- en opzegproces

          Je hoeft je wijzigingen amper zelf op te slaan. MailChimp bewaart elke twintig seconden automatisch de laatste aanpassingen. Mocht het toch nodig zijn, klik dan op een knop als Save of Save & exit.

          3. Nieuwe Campaign maken

          Zodra je een lijst met ontvangers hebt gemaakt (er hoeven nog geen personen op te staan, maar de lijstnaam moet in ieder geval bestaan) kun je een nieuwe campagne gaan maken.

          Kies uit het hoofdmenu aan de linkerkant de optie Campaigns en vervolgens rechtsboven de knop Create Campaign om een eerste mailbericht op te stellen. Dit mag uiteraard een testbericht zijn, maar het is een goed idee om alvast na te denken over de uiteindelijke format van mailberichten die je wilt gaan verzenden. Enkele keuzes die je kunt maken zijn bijvoorbeeld:

          • Wil je een opmaak in 1 of 2 kolommen gaan gebruiken, of nog anders?
          • Moeten je mailberichten of nieuwsbrieven een vaste afbeelding als header krijgen?
          • Welke voettekst wil je onder een e-mailbericht invoegen? Standaard komen hier opties te staan om ontvangers zich te laten uitschrijven en je adresgegevens (volgens diverse anti-spamwetgeving moet bij elk mailbericht een optie staan waarmee de ontvanger zich kan uitschrijven en moet duidelijk zijn wie de mail heeft verzonden. Deze gegevens stelt MailChimp dan ook verplicht).

           

          Geef aan naar welke lijst deze campagne wordt verstuurd

          Het totale proces bestaat ook weer uit vijf stappen: eerst geef je aan naar welke lijst met ontvangers dit mailbericht verzonden wordt, daarna ontwerp je het mailbericht en tot slot bevestig je je keuzes. Kies onderin telkens Next om naar de volgende stap te gaan.

          Kies uit de meegeleverde sjablonen of programmeer zelf een lay-out

          BIj de keuze voor een lay-out kun je het beste beginnen met de Drag & Drop Editor (helemaal links), of kiezen voor een standaardsjabloon (Predesigned), al zullen de voorbeelden voor veel bedrijven te Amerikaans aandoen (met onderwerpen als football, met Amerikaanse vlaggen en meer). Maar ja, misschien zit er voor jouw situatie juist een goed sjabloon bij. Dan ben je helemaal snel klaar.

          Voorbeeldsjablonen in tientallen soorten en maten.

          De Drag & Drop Editor is een heel fraai staaltje programmeerkunst (kan de developer in mij niet nalaten te signaleren) en stelt je in staat om binnen de browser de lay-out van je bericht volledig aan te passen met tekstblokken, afbeeldingen, componenten voor sociale media en meer.

          Advies: neem de tijd om deze editor goed te leren kennen. In 95% van de gevallen zal hij voldoende opties bieden om je nieuwsbrief of mailbericht op te maken.

          Door het slepen van inhoudsblokken stel je de nieuwsbrief samen

          Tot slot kun je in de sectie Confirm diverse problemen oplossen, of instellingen nog wijzigen. Helemaal onderin is de knop Send Now beschikbaar als je je mailbericht direct wilt versturen, maar uiteraard kun je ook een concept opslaan, of een tijdstip instellen waarop je mailbericht wordt verzonden.

          Alles gereed? Verzenden maar!

          4. Rapportages

          Zodra je mailbericht is verzonden, kun je na enige tijd de rapportages bekijken. Hierin zijn tientallen variabelen beschikbaar. Je kunt bijvoorbeeld zien hoeveel procent van de ontvangers het mailbericht heeft geopend en hoeveel procent heeft doorgeklikt naar een e-mailadres in het bericht. MailChimp vervangt hyperlinks die je in je mailbericht hebt ingevoegd door eigen hyperlinks, en stuurt ze daarna pas door naar de eindbestemming. Alleen dan is goed te meten hoe vaak wordt geklikt. Een voorbeeldrapportage ziet er als volgt uit (afbeelding van mailchimp.com).

           

          Voorbeeldrapportage van MailChimp

          Conclusie

          Voor kleine bedrijven en organisaties biedt het gratis plan van MailChimp waarschijnlijk al meer dan je ooit zult kunnen gebruiken. In dit artikel is zelfs maar een klein deel van alle mogelijkheden genoemd. Andere opties zijn onder meer:

          • MailChimp-mailings combineren met (je eigen) Google Analytics-code, zodat mailingresultaten ook in je Google Dashboard verschijnen.
          • MailChimp-mailings automatisch ook publiceren op sociale media als Twitter en Facebook.
          • Archieffuncties voor campagnes (‘lees hier onze eerdere nieuwsbrieven’).
          • Lijsten verdelen in segmenten, zodat nieuwe mailberichten maar naar een gespecificeerd deel van de ontvangers wordt verzonden.
          • Het uitvoeren van A/B-testen met mailings.
          • Integratie met de MailChimp-API, zodat je vanuit je eigen apps mail kunt verzenden via MailChimp.
          • …en nog veel meer. Lees bijvoorbeeld http://blog.mailchimp.com/ of kies de knop More op de homepage voor een overzicht.

          Meer mogelijkheden met het MailChimp-platform

          Ben je benieuwd wat MailChimp allemaal kan, meld je dan zelf aan voor een account.

          Of beter nog, neem een abonnement op mijn nieuwsbrief. Dan ervaar je de werking van MailChimp in de praktijk. Het is de bedoeling dat ik ongeveer 1 x per maand een nieuwsbrief ga verzenden met daarin (een samenvatting van) artikelen die ik heb geschreven, handige tips & trucs die ik op het web ben tegengekomen en (trainings-)aanbiedingen.

          Peter Kassenaar
          -- 19 augustus 2013