Voorbeelden van mijn webwerk
Wat is zoals uit de Quirky Stuff / Nullbeta Internet mouw geschud? Voor een indruk van de projecten waaraan ik een bijdrage heb geleverd verwijs ik je graag naar onderstaande lijst.
In mijn portfolio kom je websites van uiteenlopende aard tegen. Van een tamelijk eenvoudige aanwezigheid op het internet met enkele pagina's tot uitgebreide websites met achterliggend serverside scripting maatwerk.
Ook laat ik je graag wat voorbeelden van mijn vectortekeningen zien.
Almere Hout Noord
In Almere Hout Noord is een wijk voor initiatieven. Op de website valt te lezen:
Almere Hout Noord is het stadsdorp waar kleinschaligheid en zelf bouwen en bedenken hand in hand gaan. In het landelijke, ‘ruige’ gebied aan de oostzijde van Almere ontstaat tussen 2012 en 2022 een wijk die gebaseerd is op de ideeën van bewoners, ondernemers en iedereen die ideeën heeft over prettig samenleven.
De Hout Noord website wordt aangedreven door Wordpress. De vormgeving komt uit de hoge hoed van Beaumont Communicatie & Management.
Buiten in Buiten
ERA Contour en Ymere zijn de makers van Buiten in Buiten, een uniek appartementencomplex in Almere Buiten. In dit project nemen een groene omgeving en buitenlucht een belangrijke plaats in.
Buiten in Buiten is een fris ogende microsite en het opstapje naar een enquête. De vormgeving komt van 't Idee.
Wonen in de punt
In Amsterdam West is woningbouwcorporatie Ymere druk met stedelijke vernieuwing: vernieuwbouw. De Punt is zo'n project. Samen met Bouwfonds en het Amsterdamse Stadsdeel Osdorp realiseert Ymere hier de komende jaren een aantal huur- en koopwoningen.
De Wonen in de Punt website is nogal groen. Maar één van de speerpunten in de communicatiecampagne rond Wonen in de Punt is dan ook het dorpse karakter van wonen in Amsterdam West.
Deze website was tamelijk uitdagend en absoluut fun om aan te werken. Mede door de duidelijke vormgeving van 't Idee, het ontwerpbureau dat tekende voor de opzet en de teksten van Wonen in de punt.
Wijkpartners
Ymere is dan op het moment van schrijven wel de grootste woningbouwvereniging van Nederland, maar natuurlijk is Ymere niet de enige speler op woninggebied in Amsterdam. Ter illustrie, Ymere is samen met Stadgenoot, de Key en de Allantie actief in IJburg.
Een gezamelijk project is voor IJburg is Wijkpartners. In dit project zijn alle partijen met woningen in IJburg vertegenwoordigd. De input voor Wijkpartners IJburg bestond slechts uit een tweetal pdf-bestanden. Het resultaat is een platte maar nette html-website die uit drie pagina's bestaat. In een halve dag gecodeerd.
In de buurt projecten
Een mooie mashup waarin de ‘In de buurt’ projecten van Ymere op de kaart zijn gezet. Veel interactie met de gebruiker, een customized vormgegeven infoWindow om detailinformatie te laten zien en integratie van Google Street View beelden. Daarnaast veel logica achter de schermen om de kaart te besturen.
Van hallen naar huizen
Nieuwbouwproject ‘Groenoord, van hallen naar huizen’ wordt ondersteund met een website waarop informatie over het project te vinden is. Het ontwerp van de ‘Hallen naar huizen’ website werd door een extern bureau (Mijnheer) als Photoshopbestand aangeleverd.
De website is straightforward. Het uitdagende deel van deze klus zijn de positionering van sommige html-elementen. De jQuery png fix plugin zorgt voor alphatransparantie in oudere versies van Internet Explorer.
De slak die droomde dat-ie een haas was
Turboslak — over de slak die ervan droomt om een haas te worden. Turboslak is een Wordpress weblog over hardlopen. Veel aandacht heb ik besteed aan het maken van de Turboslak mascotte. Na een aantal schetsen op papier heb ik de mascotte uitgevoerd als vectortekening in Adobe Fireworks. Hierdoor is de mascotte zonder kwaliteitsverlies in grootte aan te passen en zijn er ook tamelijk eenvoudig variaties aan te brengen.
Kinderboerderij Emmelerbos
De website van kinderboerderij Emmelerbos in Emmeloord was toe aan een opfrisbeurt. Net als de vorige keer heeft Quirky Stuff deze klus op zich genomen.
Het opensource CMS Wordpress fungeert als motor van de website van Emmelerbos. Op deze implementatie van Wordpress heb ik wel een aardig stukje maatwerk toegepast om tot het uiteindelijke resultaat te komen.
Wonen in Bloom
Op één van de mooiste plekjes van Bos en Lommer — aan de Rijpgracht — ligt Bloom, een fraai gerenoveerd appartementencomplex dat bestaat uit twee woongebouwen met vier verdiepingen.
Wonen in Bloom is een make-over van een bestaande website van Ymere. Simpel, duidelijk en toegankelijk zijn de uitgangspunten.
Ik heb gebruik gemaakt van het progressive enhancement principe. Dat wil zeggen dat ik voor deze website ben uitgegaan van een toegankelijke basisopzet. Als er aan een aantal randvoorwaarden wordt voldaan, wordt de website opgeleukt met een javascript slideshow, een Google Maps kaartje en @font-face typografie embedding.
Atelier Changer
Atelier Changer is de website van kunstenares Sacha Janzee. Sacha werkt met uiteenlopende materialen. De Atelier Changer website fungeert als een portfolio van haar werk.
Verhuurwebsite de Woudloper
Scouting Emmeloord heeft een nieuw clubhuis gebouwd. Het clubhuis is te huur voor groepen zoals scholen en natuurlijk collega scouts.
Om het clubhuis aan de man te brengen is aanwezigheid op internet eigenlijk onontbeerlijk. Vandaar dat ik een opzetje heb gemaakt voor een eenvoudige maar informatieve website om het verhuurproces te ondersteunen.
Inmiddels heeft het door mij gemaakte concept de vorige verhuurpagina's op het subdomen verhuur.scoutingemmeloord.nl vervangen.
Voetbalvereniging Giessen
Mijn roots liggen in het Noord-Brabantse dorpje Giessen. Echt heel veel was er in een boerendurpke niet te beleven. Samen met je vriendjes werd je dan lid van de voetbalclub. Van 1978 tot ergens halverwege de jaren '90 heb ik daar gevoetbald.
Van de plaatselijke voetbalvereniging kreeg ik de opdracht om de website opnieuw op te tuigen. Bij de start van het seizoen 2008 / 2009 was de nieuwe website in de lucht. De website van de voetbalvereniging Giessen is voorzien van een eigen beheersomgeving om informatie over clubleden, competities en wedstrijden te onderhouden. Aan de voorkant van de website worden deze gegevens o.a. gebruikt om uitslagen en standen te genereren.
Hofmeyr
In Amsterdam-Oost aan de Transvaalkade en de Hofmeyrstraat renoveert Ymere 28 woningen. Het gevelbeeld wordt weer in oude glorie hersteld en ook in de woningen zijn veel authentieke details terug te zien. Er is een gevarieerd woningaanbod met keuze uit een twee-, drie- of vierkamerwoning. De oppervlaktes lopen uiteen van 43 m² tot 106 m². Prijzen vanaf ca € 175.000,– v.o.n.
Qua ontwerp is de Hofmeyr website eenvoudig. Er is gekozen voor de corporate kleuren van Ymere. Clientside code: XHTML en het jQuery framework. Aan de serverkant wordt asp classic ingezet.
Jules Goossens Bliksembeveiliging
De opdracht: de huidige website die bestaat uit een frameset met voornamelijk Adobe GoLive slices omzetten naar echte xhtml. Met behoud van de look and feel van de website. En, voor zover mogelijk, met een 1-op-1 omzetting van de pagina's.
Dat was een arbeidsintensieve klus, maar zeker niet onmogelijk. Kijk maar.
Ymere.nl
voor zoekers en projecten in de buurt
Sinds eind juni 2008 is de nieuwe Corporate website van woningbouwcorporatie Ymere live. Bij deze website heb ik een bijdrage geleverd aan het onderdeel Bijzondere projecten in de buurt (waar Ymere haar participatie in Stedelijke vernieuwing, Groenprojecten, Kunst en Leefbaarheidsprojecten tentoon spreidt). Daarnaast heb ik me bezig gehouden met het tonen van het Ymere vastgoedbezit op de website. Vrije sector huurwoningen, koopwoningen en bedrijfsonroerend goed zijn via ymere.nl te bekijken. Bijna vanzelfsprekend wordt in beide onderdelen gebruik gemaakt van Google Maps technologie, één van de vakgebieden die zich mogen verheugen in mijn warme belangstelling.
Het ontwerp voor deze website werd, net als de rest van de corporate branding van het gefuseerde Ymere, verzorgd door het Amsterdamse Proof.
Op het programma
De Google Maps API is een interessant onderwerp. Bij Ymere kwam ik er voor het eerst mee in aanraking. Voor leuk voor kids bouwde ik vorig jaar al een Google Maps kaart met uitjes. Dit heeft in 2008 een vervolg gekregen in de vorm van Op het programma. Onder het motto van beter, sneller, completer is een spannende website gerealiseerd waarvan een Google Maps applicatie een essentieel onderdeel is.
Het uiteindelijke doel is om van Op het programma een website te maken die bestaat uit allerlei thematische subdomeinen (zoals gezinsuitjes.ophetprogramma.nl, vakantie.ophetprogramma.nl en bios.ophetprogramma.nl). Klein beginnen is echter het devies. Dus initieel beperk ik me tot het gezinsuitjes thema.
Technische details: de website maakt gebruik van PHP en een MySQL database. Natuurlijk wil ik inhoud, vormgeving en actie zoveel mogelijk gescheiden houden. Voor de javascript functionaliteit maak ik o.a. gebruik van de jQuery library.
Bliksem vraagbaak
Een herbouw van de bliksemvraagbaak. Omdat de layout van bliksem.nl niet tot ontevredenheid stemde was het vooral werk aan de achterkant van de website dat verzet moest worden. Dat wil zeggen, de markup up-to-date maken en de website daarnaast voorzien van een content management systeem voor het onderhouden van een aantal van de meer veranderlijke pagina's.
Hoewel er aan de look and feel weinig tot niks verandert, ondergaat de bliksemvraagbaak technisch gezien een behoorlijke facelift.
Leuk voor kids
Mijn website met kleurplaten, knutselideetjes en wallpapers voor kinderen, leukvoorkids.nl, heb ik opnieuw opgezet. Niet alleen de vormgeving is helemaal vers van de pers, ook aan de achterkant is de boel helemaal vernieuwd. Leuk voor Kids wordt nu aangedreven door het Wordpress content management systeem. Op plekken waar de standaard functionaliteit van Wordpress niet toereikend was heb ik deze uitgebreid.
Singel van Noord
Nog een Ymere projectontwikkelingssite:
Wonen aan de Singel van Noord
Dit is de website van een nieuwbouwproject in Amsterdam Noord dat op het punt staat de verkoopfase in te gaan. De look and feel van de Singel van Noord website is gebaseerd op de bij het project horende verkoopbrochure.
Wonen in Batik
Wonen in Batik is een project website die gemaakt is voor Ymere. Het ontwerp is van de hand van ‘tIdee.
Wonen in Batik was een leuke website om te maken. Het stripverhaalachtige ontwerp spreekt me bijzonder aan.
Het Plateel
Een projectmatige website van Ymere Ontwikkeling - Het Plateel. Het Plateel is een nieuwbouw project in Purmerend. Hier zullen in het Wagenweggebied de komende jaren ruim 300 koop- en huurwoningen worden gebouwd. Reden genoeg voor het online brengen van een ondersteunende website.
Het Plateel is een website die bijna geheel in Flash is gemaakt. Zelf ben ik, onder andere vanwege de beperkte toegankelijkheid, niet zo'n enorme fan van Flash. Ondanks de nadelen van een verminderde accessibility en de relatief slechte indexering door zoekmachines is het natuurlijk wel leuk om eens iets meer met Flash te doen dan het bouwen van een banner.
Het ontwerp van Het Plateel is trouwens niet van mijn hand. De website is namelijk gebaseerd op mockups van ontwerpbureau Frisse Wind.
Update januari 2010: inmiddels is de Flashversie van Het Plateel vervangen door een html-website. Gebouwd op basis van de .psd mockups van een extern communicatiebureau.
Thuis in de Confuciusbuurt
In opdracht van het bedrijfsonderdeel Ontwikkeling van de woningbouwcorporatie waarvoor ik actief ben hebben we Thuis in de Confuciusbuurt online gezet. Thuis in de Confuciusbuurt geeft aandacht voor de aanstaande vernieuwing van de Amsterdamse Confuciusbuurt, waar een mix van koopwoningen en - appartementen en sociale huurwoningen gerealiseerd zullen worden. In het project zijn meerde partijen, waaronder het stadsdeel Geuzenveld, actief.
Confuciusbuurt.nl maakt nogal wat gebruik van javascript (DOM scripting), om de website een dynamisch karakter te geven. Het ontwerp is (losjes) gebaseerd op een door Luiting en Mol aangeleverde pdf mockup.
Ukko
Meer kleurplaten. In een tamelijk experimentele vormgeving: een tagcloud en een zoekfunctie trekken de aandacht op de voorpagina en zijn het vertrekpunt om snel een kleurplaat te vinden en te printen. Het jQuery javascript framework en Shadowbox functionaliteit dragen op deze website bij aan een prettige gebruikerservaring.
Lygwela
Engelstalig werk. Lygwela.com is een subset van een van mijn oudere websites: kleurplaten website Leuk voor kids. Een subset in de zin dat ik me beperkt heb tot de kleurplaten die op leukvoorkids.nl te vinden zijn. De wallpapers en knutseltips heb ik vooralsnog buiten beschouwing gelaten. Waarom deze (engelstalige) content op een nieuw domein gezet en niet leuk voor kids omgebouwd? Redenen te over. Zoals:
- Geen geknoei met de functionaliteit van Leuk voor kids
- Even lekker hobby'en met een nieuw ontwerpje
- De mogelijkheid om eens te kijken wat een andere hosting provider te bieden heeft
Zoals gebruikelijk heb ik op de Lygwela website geprobeerd een technisch goede website weg te zetten. Op basis van xhtml, PHP en MySQL. Met door middel van een .htaccess herschreven zoekmachinevriendelijke URLs en een Google sitemap voor een (hopelijk) goede indexering. Op lygewa.com heb ik ook de kans gegrepen eens te stoeien met het CurvyCorners javascript.
Nullbeta. 100% alpha!
Mijn weblog. Xhtml en server- en client side scripting speeltuintje.
Nullbeta.net valideert volgens de xhtml 1.1 specificaties en werkt vanzelfsprekend naar behoren in alle moderne browsers. Waar dit blog in het verleden draaide op een combinatie van mijn eigen php scripts, een MySQL database en wat stukjes javascript is het nu Wordpress dat de motor vormt. De inhoud is zoveel mogelijk losgekoppeld van de vormgeving.