front-end inburgeren.nl

Tijdens de ontwikkeling van inburgeren.nl heb ik interactieve prototypes geprogrammeerd en de website –op tijd- gepubliceerd. Front- en back-end.

vernieuwing van de website inburgeren.nl

Het ministerie van Sociale Zaken en Werkgelegenheid, kortweg SZW, geeft DUO de opdracht om vóór 1 januari 2015 de website inburgeren.nl te vernieuwen. Ik vervulde de rollen: projectleider, interaction design, en front-end programmeur.

prototyping in de browser

Ik ben een fan van prototyping in de browser. Elke discipline kan de laatste stand van zaken in het geheel beoordelen. En met webtechnologie kan je lekker kneden aan de vorm met de inhoud in de website.

mijn rol

Ik heb de prototypes en de gepubliceerde versie gebouwd. Tot en met HTML. Janita Top heeft CSS geprogrammeerd en toegankelijkheid bewaakt.

werkwijze

We hebben de ontwikkeling uitgevoerd in drie cycli. In elke cyclus deden we veldonderzoek, bedachten we een informatiearchitectuur, interactie- en grafisch ontwerp, schreven we teksten, maakten we een prototype, deden we gebruikstesten met echte gebruikers en voerden we overleg met onze opdrachtgevers.

Binnen deze cycli itereerden we natuurlijk voortdurend om verschillende schaal en onderwerp.

mobile first

Het eerste prototype was gemaakt in PHP. Met een klein object georienteerd framework las ik de structuur van de site uit XML–files en schreef ik HTML. De teksten kopieerde ik uit een Word–document. Dat laatste was natuurlijk niet te doen. Op zoek naar een oplossing.

responsive

Bij het maken van het tweede prototype kwam Janita Top aan boord. We bedachten dat de schrijvers in Markdown teksten zouden aanleveren. Ik verwerkte in een aantal geautomatiseerde stappen de Markdown naar de gewenste HTML. Janita Top zorgde voor CSS, en bewaakte toegankelijkheid. Samen zorgde voor de Javascript-uitbreidingen.

automatisch genereren van website

Ik schreef Shell–scripts om met Ruby/Kramdown de Markdown te verwerken tot HTML. Deze eerste HTML via XSLTPROC/XSLT via een aantal stappen te verwerken naar de uiteindelijk HTML. Janita Top schreef SCSS en gebruikte Compass met extensies als Suzy om CSS te genereren.

git

Voor versiebeheer gebruikten we GIT/Bitbucket via command line of SourceTree van Atlassian.

kramdown

Ik gebruikte Kramdown omdat het de mogelijkheid heeft attributen to te voegen aan de Markdown. Door bijvoorbeeld attributen toe te voegen aan een H2, kon ik een illustratie aan de H2 hangen.

## Dit is een H2–titel
{: class="maak-hem-rood" }

elementen rond H2 plus en bijbehorende tekst

Een echte uitdaging was het om een H2 en bijbehorende tekst elementen te wikkelen. Immers, de bijbehorende tekst is niet een child van de semantische H2–parent. De oplossing bleek Muenchian Grouping.

<xsl:variable name="top-down" select=""/>
<xsl:variable name="bottom-up" select=""/>
<xsl:variable name="node-set" select="$top-down[ count( . | $bottom-up ) = count( $bottom-up ) ]"/>

In de zijlijn heb ik er een recursieve versie van gemaakt om een structuur van semantisch geneste headings en hun bijbehorende de teksten daadwerkelijk genest te maken. Dit ging eigenlijk boven mijn pet. Dus deze zijlijn is niet meer in de master gekomen.

javascript, jquery

Janita en ik hadden beperkte ervaring met Javascript en jQuery. Voor het verbergen en tonen van het menu, hebben we gekozen voor een plugin. De functionaliteit rond scrollen heb ik zelf geprogrammeerd.