“Het Magneet Festival is een evenement waarbij bezoekers via een co-creatie-internetplatform eigen creatieve ideeën kunnen lanceren en daarmee de mogelijkheid creëren om zelf inhoud aan het festival te geven. “

“Second Sight is een platform voor trends en trendwatching. Met de blog, database (met ruim 8500 artikelen over trends sinds 1997), magazines, boeken, events en Trend Academy geven we inzicht in de belangrijkste trends en ontwikkelingen én bieden we inspiratie om te innoveren.”

Het werk voor Second Sight bestond uit twee delen. Één deel bestond uit een migratie van MediaMetic software naar WordPress software. Het andere deel bestond uit de implementatie van het nieuwe design in een WordPress theme.

Samen met Seb Stam is deze klus aangenomen. Seb Stam heeft de strategie voor Second Sight uitgedacht en heeft ook het concept van de website ontwikkeld.

Migratie

Second Sight wilde een flexibel platform gebruiken voor de nieuwe website. Hiervoor was de keuze op WordPress gevallen. Aangezien er meer dan 7000 artikelen in de database stonden was een migratie van het oude systeem noodzakelijk. Na een export te hebben gekregen van de laatste database is er een XML file gegenereerd via een custom script om zodoende een import file voor WordPress te genereren. Dit script downloadde alle files, zoals plaatjes en documenten, naar de server. Een XML file van ongeveer 400.000 regels werd gegenereerd en meer dan één gigabyte aan files werd gedownload.

Design

Het design voor Second Sight is gerealiseerd door Barlock. Er is gekozen voor een modern minimalistisch design gefocust op de content.

Techniek

Zoals eerder vermeld is er gebruik gemaakt van WordPress. In samenwerking met Buddypress, voor het members gedeelte, is er een theme ontwikkeld.

Omdat Second Sight een grote hoeveelheid aan content had en ook in de toekomst veel artikelen gaat publiceren is ervoor gekozen om de back-end zo eenvoudig, maar toch functioneel mogelijk te maken. Zo is de content opgedeeld in verschillende custom post-types. Zo zijn er de gebruikelijke posts, maar ook agenda, event, academy en issue post-types aanwezig. Om toch alle verschillende post-types overal op de site te kunnen gebruiken is er een custom taxonomy gemaakt welke de plaatsing van het artikel aangeeft. Zo kan behalve een agenda item ook een blog artikel of een ander item in de agenda worden gezet.

Voor de front-page zijn 3 verschillende templates gemaakt. Zo kan er gewisseld worden tussen een campagne front-page bestaande uit 1 artikel met een plaatje ter grootte van de hele pagina, een overzichtspagina met artikelen die op de front-page worden geplaatst en een variant daarvan met één featured artikel.

Vanwege het feit dat Sustainmobile een opstartend bedrijf was en er snel een site online moest komen is er gekozen om gebruik te maken van een theme op themeforest. Er is gekozen voor het theme RT-Theme 6 omdat deze alle benodigde pagina’s in zich had en ook qua design bij de klant aansloot.

Om toch een persoonlijke tint aan de site te geven heeft Coen Vermeer de site geredesigned. Bij dit redesign lag de focus op het recyclen van mobiele telefoons en het integreren van het logo. Tevens zijn er door middel van kleur accenten focus gelegd op belangrijke componenten. Als laatste is er een “Our program” pagina gedesigned om de verschillende producten mooi en overzichtelijk te etaleren. De verschillende graphics op de site zijn ook door Coen Vermeer aangekocht en geïntegreerd in het design.

Behalve kleine veranderingen aan de code is ook de plugin qTranslate geïntegreerd. Zodoende kon de site direct gemaakt worden in zowel Engels als Duits. Er kan via de back-end heel makkelijk een extra taal worden toegevoegd.

In 2010 is de ezwim site op de schop gegaan. Zowel ezwim.com als ezwim.nl hebben daarbij een nieuw design gekregen en een nieuwe back-end. Het design is gemaakt door Andrea Hulskamp en Coen Vermeer heeft dit design waar nodig geoptimaliseerd.

Techniek

De site is gemaakt via een custom theme voor WordPress. Ezwim had al ervaring met het gebruik van WordPress zodat de overgang naar de nieuwe versie snel en goed kon verlopen. De website structuur is zo ontworpen dat alles via de back-end is aan te passen en of uit te breiden. Bijvoorbeeld de menu’s kunnen worden aangepast in de back-end en ook de tabs die men kan zien op de frontpage kunnen worden aangepast en uitgebreid.

Op de frontpage is een simpele slider te zien die is gemaakt met jQuery. De plaatjes komen uit de media library van de frontpage. Zo kunnen er makkelijk plaatjes worden toegevoegd of worden verwijdert. Op alle andere pagina’s is er één header image te zien. Deze is aanpasbaar per pagina via een featured image. Met een paar klikken in de back-end is hiermee de header van een pagina aan te passen.

Verder zijn er nog een aantal andere jQuery toevoegingen aanwezig. Zo is er op de frontpage een tabbed interface waar informatie over Ezwim’s producten wordt getoond. In de back-end is deze informatie makkelijk aan te passen via een custom post type. Bij Ezwim’s klanten is een carrousel te zien met de verschillende logo’s van de klanten. In de back-end kunnen klanten worden toegevoegd en op volgorde gezet.

Demo

Ook de Ezwim demo heeft een grondige update gekregen. De demo is in Adobe Flash gemaakt helemaal specifiek voor Ezwim. Alle graphics (gemaakt door Coen Vermeer) zijn verandert en ook alle demo plaatjes zijn aangepast aan de nieuwe Ezwim software. Voor de rest zijn er nog enkele updates aan het script gedaan zodat alles beter en mooier loopt.

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.