Initializr: Een template generator op basis van HTML5 Boilerplate

Deze keer publiceer ik een “niet-voor-leken” artikel. Wellicht komt het van pas voor een van de studenten die ik regelmatig ondersteun tijdens inloop-uren van Learning Centre op NHL Hogeschool.

De oorspronkelijke (franstalige) versie van dit artikel is te vinden op  http://www.html5-css3.fr/html5/initializr-generateur-template-html5-boilerplate en is met goedkeuring van de auteur vertaald naar het Nederlands.

Met Initializr kun je een sjabloon genereren op basis van HTML5 Boilerplate die ervoor zorgt dat je een ontwerp van HTML5 werkend hebt in enkele seconden. Je kunt bepaalde zaken weglaten uit je sjabloon om te voorkomen dat de boel te onoverzichtelijk wordt, of bijvoorbeeld wanneer je geen jQuery maar Prototype/Scripty2 gebruikt. De diverse opties waaruit je kunt kiezen worden in dit artikel uitgelegd.

Dit artikel is geschreven voor mensen die al enige ervaring met HTML5 hebben. Ben je geen ervaren webdesigner/-developer, dan zal het moeilijk zijn om dit artikel volledig te volgen.

Ook belangrijk om te weten is dat Initializr volledig leunt op de technologie van de HTML5 Boilerplate template.

HTML5 Boilerplate

HTML5 Boilerplate is een krachtig en betrouwbaar template gemaakt en onderhouden door Paul Irish, Google en Divya Manian. Boilerplate bestaat uit een set van HTML-bestanden, CSS en JavaScript, die worden gebruikt om een project goed te beginnen in HTML5. Het bevat ook handige tools, zoals Modernizr, jQuery en een CSS reset.

Voor mij is HTML5 Boilerplate ietwat een te complex pakket om mee te werken. Daarnaast gebruik ik nooit jQuery. Het template dat je met Initializr kunt maken, bevat alleen de vereiste delen van HTML5 Boilerplate (althans, voor mij).

Initializr – Een lichte en aanpasbare Boilerplate

Het idee van Initializr is om snel een Boilerplate template op te stellen met de hulpmiddelen die jíj nodig hebt. De code die wordt gegenereerd door Initializr is geheel gebaseerd op Boilerplate, waarvan de kracht niet valt te ontkennen. Initializer biedt verschillende opties voor het aanpassen van het te maken sjabloon. Hieronder de details:

HTML/CSS

Standaard biedt Boilerplate je een blanco template. Initializr biedt aan om de template te voorzien van voorbeeld-inhoud, zodat je sneller aan de slag kunt. De voorbeeld-inhoud bestaat uit een structuur met een klassieke header, footer, navigatiemenu en sidebar, net zoals je die vaak bij weblogs tegen komt.

Javascript

Boilerplate omvat het Javascript framework jQuery. Initializr biedt dan ook de mogelijkheid om je template uit te rusten met jQuery (al of niet gzipped). Initializr biedt echter ook de mogelijkheid om jQuery weg te laten of Javascript geheel weg te laten uit de te maken template. Javascript helemaal weglaten brengt echter met zich mee dat de template ook niet met Modernizr of html5shiv wordt uitgerust, waardoor de compatibiliteit met verschillende browsers niet kan worden gewaarborgd door de template.

Compatibiliteit

HTML5shiv

Moderne browsers kunnen al goed overweg met HTML5. Echter, versies van Internet Explorer 8 en eerder hebben hulp nodig om nieuwe tags, die standaard niet worden herkend, te stylen. Deze hulp wordt geboden in de vorm van HTML5shiv. HTML5shiv is een klein Javascript-bestand waarmee Internet Explorer toch leert de codes te herkennen.

HTML5shiv wordt in de template nadrukkelijk in de <head> tag geplaatst, omdat bij het renderen van de pagina wordt gekeken welke elementen wel en niet wat hulp nodig hebben. De rest van de Javascript wordt in de template net voor de sluitende <body> tag geplaatst. Dit wordt over het algemeen aanbevolen.

Modernizr

Modernizr is een detector voor ondersteuning van HTML5 en CSS3 functionaliteit, waaronder HTML5shiv. Modernizr is een Javascript file dat een object creëert waarin voor elke functie/eigenschap/ondersteuning wordt aangegeven of het werkt of niet in je browser.

Modernizr voegt daarnaast automatisch css-klassen toe aan de <html> tag zodat je makkelijk alternatieve styling kunt toepassen als bepaalde CSS3 eigenschappen niet worden ondersteund.

Modernizr is vooral een goed hulpmiddel voor het opsporen van HTML5 en CSS 3 ondersteuning. Het lost echter niet het ontbreken van bepaalde ondersteuning op! Hiervoor kun je weer het beste HTML5shiv gebruiken.

Server configuratie

Ten slotte biedt initializr ook aan om het server-configuratie bestand van Boilerplate (.htaccess) toe te voegen aan de template. Dit server-configuratie bestand bevat bijvoorbeeld instructies zodat “www” automatisch wordt weggelaten als je website wordt bezocht. Dit om kortere URL’s te genereren.

Klik op de belangrijkste knop!!!

Zodra je klaar bent met het maken van de keuzes, klik je op de (zeer) grote knop “Download!” om de gepersonaliseerde template te downloaden.

De standaardconfiguratie komt ongeveer overeen met het volgende screenshot:

Todo.txt

Todo.txt zal je ongetwijfeld opvallen hierboven. In todo.txt staat welke taken je nog moet doen om je project te starten. Daarnaast bevat het tips over het gebruik van sommige html5 trukjes in HTML5 Boilerplate. Een voorbeeld van een punt dat je niet zou moeten vergeten is het aanmaken van een 404.html voor als de bezoeker een pagina probeert te bezoeken die niet bestaat.

Credits!

Ik vond het belangrijk een nederlandstalige versie van dit artikel te publiceren, aangezien Initializr mij een ontzettend handige tool lijkt voor het snel opzetten van een nieuw project. Hieronder echter credits aan enkele gewaardeerde personen:

  1. Paul Irish en Divya Manian, ontwikkelaars van HTML5 Boilerplate
  2. Jonathan Verrecchia (@jverrecchia), ontwikkelaar van Initializr

Gerelateerde artikelen:

5 Comments

  • lol @ “Paul Ierse”. GoogleTranslate much? ;)

  • Hehe, thanks for your sharp eye ;-). Its updated

  • Modernizr is vooral een goed hulpmiddel voor het opsporen van HTML5 en CSS 3 ondersteuning. Het lost echter niet het ontbreken van bepaalde ondersteuning op! Hiervoor kun je weer het beste HTML5shiv gebruiken.

    Modernizr wordt inclusief HTML5shiv/HTML5shim geleverd, dus die ondersteuning vind je ook in Modernizr.

  • [...] Dutch version on jaapvdveen.nl [...]

  • [...] la sua guida di utilizzo. Qui la potete trovare in Francese (ufficiale), Inglese, Russo, Croato, Tedesco e [...]