Na meer dan een jaar zonder een echte website te zitten heb ik eindelijk vandaag de website gemaakt. Zoals bij veel collega’s was ook bij mij mijn eigen website een ondergeschoven kindje.
Aangezien ik geen designer ben heb ik gewoon Notepad++ geopend en begonnen met het coden van de website. Photoshop is hierbij ook niet aangeraakt, eventueel komt er nog is een mooi design online als ik ooit tijd en of geld over heb.
Zoals bij alle projecten wil ik graag een zo licht mogelijke site maken. Weinig tot geen plugins gebruiken en ook qua markup niks meer gebruiken dan nodig is. Aangezien ik vooral de site snel af wilde hebben heb ik ervoor gekozen om een aantal plugins te gebruiken in plaats van alles zelf te coden. Ik heb eerst nog overwogen om een theme te kopen op themeforest, maar de themes die ik tegenkwam waren allemaal veel te uitgebreid.
De techniek
Voor deze website heb ik, zoals bij veel andere websites die ik maak, WordPress gebruikt. Een super veelzijdig blog/cms systeem waarmee je zo ongeveer alle websites kan maken die je maar wilt. Plus het is opensource!
Als basis voor het WordPress theme heb ik gekozen voor het html5reset theme. Dit is een theme zonder styling en met HTML5 support. Hier heb ik al vaker gebruik van gemaakt en zorgt voor een snelle start in theme ontwikkeling.
Na het strippen van onnodige componenten uit het theme (zijn er gelukkig maar erg weinig) heb ik als eerste een CSS grid toegevoegd aan het theme. Het grid systeem wat zeer bekend is en ikzelf ook vaak heb gebruikt is 960grid. Dit grid is zeer handig in gebruik en is ook aan te passen naar andere breedtes.
Als lightbox heb ik gekozen voor de jQuery lightBox plugin. Redenen voor mij om deze jQuery plugin te gebruiken is het feit dat deze jQuery plugin veelzijdig is, maar tevens redelijk lichtgewicht. Als optie heb ik meegegeven dat alle URL’s die leiden naar een plaatje (*.jpg, *.gif, *.png) geopend worden in de lightbox.
Na de templates in elkaar te hebben gezet heb ik ook nog een tweetal plugins geïnstalleerd. Als eerste Contact From 7, een fijne contact form plugin welke ik al vaker heb gebruikt. De tweede plugin die ik heb gebruikt is Social Media Widget. Deze plugin heb ik voornamelijk gebruikt om snel de social media URL’s in de sidebar te stoppen. Eventueel later zal ik deze vervangen door een eigen widget en eigen CSS. Dit vooral omdat een plugin zoals deze veel extra’s heeft die je niet nodig hebt.
Als laatste heb ik enkele Facebook Social Plugins toegevoegd. Ik wil later ook wat interessante stukjes schrijven over web development en daarbij helpen facebook comments onder andere om mensen laagdrempelig te laten reageren.
Om dat laatste maar te testen, vertel me wat je ervan vindt in de comments 
Prettyprint
// edit added 27-07-2011
function prettify($code = null) {
if (!$code)
$code = "Dit ziet er goed uit!";
return $code;
}
Via net.tutsplus.com kwam ik een simpele syntax highlighter tegen, genaamd Google code prettify. Gelijk er maar opgezet, omdat ik later ook wat code snippets op de site wil zetten. Voorbeeld is hierboven te zien.
Read mode
Nog maar een edit: Kreeg het idee om een soort lees modus te maken. Uiteraard zeer overbodig, maar leek me gewoon leuk om te doen Klik rechtsbovenin op “Toggle read mode on” en zie wat er gebeurt. Fixed met jQuery en wat CSS.
Comments