Ron Valstar

Mijn naam is Ron Valstar ~~en ik maak dope shit~~ en ik ontwikkel applicaties voor digitale media. Noem mij een front-end specialist.
Dat is vrij breed: eerst maak ik een interactie ontwerp, dan ga ik het vormgeven en als laatste zorg ik ervoor dat het werkt. Vlekkeloos!
Hier gingen wel een grafische opleiding, een HBO opleiding interaction design en tien jaar werkervaring aan vooraf.

Ja, ik ben zo'n jongen die dit soort dingen ook voor zijn lol doet. Dat is mijn manier om me altijd te blijven ontwikkelen en de nieuwste technieken uit te proberen. Wat ik nuttig acht geef ik vrij als open-source.

Heb je iemand nodig zoals ik? Mail mij met je vraag en je krijgt snel antwoord.

expertise

Het liefst schrijf ik toepassingen in Javascript (pure of met een framework), dit doe ik zelfs langer dan ik met Flash werk (sinds versie drie in 1998). Daarnaast zou ik me geen front-end specialist durven noemen als ik niet een hoop af wist van: DOM, XHTML, HTML5, XML, CSS (LESS, SASS), PHP (Wordpress, Codeigniter, Laravel, Drupal), Air en af en toe ook XSLT, Java, Processing en zelfs Lingo (Director, weet je nog?!).

Ik heb veel ervaring met fotografie en video in combinatie (realtime) 3D omgevingen. Dit zowel in Flash als Javascript (en CSS3 en Java/Processing en Director)

In de loop der tijd heb ik met de volgende partijen gewerkt: Novartis, Thieme Meulenhoff, BNN, Pool Worldwide, Tribal DDB, Lukkien, Nationale Nederlanden, Freedomlab, Kennisnet, Lost Boys, Centraal Museum, Ome Willem, Shapers.

Budlight - Sensation

uri:	http://budlight.ca/
werkzaamheden:	Javascript, HTML, CSS
opdrachtgever:	Resn

Voor de Canadese Budlight site moest het Sensation event worden toegevoegd. Veel animatie, parallax effecten en een gedeelte waar je op je favoriete DJ kan stemmen. Met natuurlijk mobiele- en tablet varianten.

Yoleo game

uri:	http://yoleo.nl/
werkzaamheden:	Javascript, HTML, CSS
opdrachtgever:	Shapers

Dit spel is onderdeel van een website over lezen voor kinderen. Om levels te unlocken moet je op de website boeken lezen. De grote uitdaging bij het maken van dit spel lag hem in de randvoorwaarden: van IE8 tot iPad.

Hans Reinerie Photography

uri:	http://hansreineriephotography.nl/
werkzaamheden:	Grafisch ontwerp, Javascript, HTML5, CSS3

Een site waarbij de foto's centraal staan. Een mooie oplossing voor liggend en staande foto's is dat de liggende foto's fullscreen zijn verschaald en de staande foto's on-the-fly worden voorzien van een geblurde achtergrond.

Karijn Kakebeeke Photography

uri:	http://hansreineriephotography.nl/
werkzaamheden:	Grafisch ontwerp, Javascript, HTML5, CSS3

Smorenburg

werkzaamheden:	Javascript, HTML5, CSS3
grapisch ontwerp:	Cinographic

Tatarataa!

uri:	http://tatarataa.com/
opdrachtgever:	Tatarataa!
werkzaamheden:	Javascript, HTML5, CSS3
grapisch ontwerp:	Ibrahim Farah

Tatarataa! bedenkt, ontwikkelt en organiseert evenementen voor merken of bedrijven. Met dit redesign (de vorige was ook samen met Ibrahim Farah ontwikkeld) is ook meteen een CMS geimplementeerd.

Novartis

uri:	http://www.novartis.com/campus
opdrachtgever:	Novartis
fotografie:	Iwan Baan
grapisch ontwerp:	2x4
werkzaamheden:	frontend XML/XHTML/CSS, Javascript

Novartis is een Zwitsers farmacuetisch bedrijf. Het hoofdkantoor in Basel bestaat uit een aantal gebouwen waarvan sommige er wat betreft architectuur uitspringen. Samen met de Nelderlandse architectuur fotograaf Iwan Baan en 2x4 uit New York maakte ik een prototype voor een virtuele tour van deze campus. Door middel van drie dimensionale panorama foto's kan men door de campus heen lopen en verschillende soorten content bekijken.

Dustin Kershaw

uri:	http://www.dustinkershaw.com/
werkzaamheden:	HTML5, PHP, Javascript
grapisch ontwerp:	Judith van der Velden

Seattle iPad

opdrachtgever:	Iwan Baan
werkzaamheden:	Flash Actionscript 3, XML/XSLT

Pixelfabrics

uri:	http://www.pixelfabrics.com/
opdrachtgever:	StillsnMotion
werkzaamheden:	Adobe Air Actionscript 3, Javascript

Bij StillsnMotion worden robotarmen verkocht die heel nauwkeurig om objecten heen kunnen draaien. Voor StillsnMotion ontwikkelde ik een crossplatform Air applicatie waarbij deze beelden worden omgezet naar een crossbrowser en crossdevice HTML5 applicatie.
De Air applicatie is voorzien van een gebruikers en licentie sleutel. Deze versleuteling is ook doorgevoerd in de uiteindelijke HTML5 applicatie waardoor deze door derden zeer moeilijk te stelen is.

JuridaII

uri:	http://test.ronvalstar.nl/jurida/
opdrachtgever:	Lea Jurida
werkzaamheden:	grafisch ontwerp, Flash Actionscript 3

Dit redesign is jammer genoeg nooit verder gekomen dan een prototype met 3D blokjes.

deepRED

uri:	http://deepred.tv/
opdrachtgever:	deepRED
werkzaamheden:	Javascript, HTML5, CSS3

Vroeger was een Flash plugin de enige manier om video te tonen. Met de komst van HTML5 wordt dat allemaal volledig geïntegreerd zodat deze site ook zonder problemen op een iPad draait.

Soundcircus

uri:	http://www.soundcircus.nl/
opdrachtgever:	Pool worldwide
(post-)production:	DPPLR
werkzaamheden:	front- en backend mbv XHTML/CSS, jQuery, Flash Actionscript 3, PHP

De opvolger van de Kees Kroot website is interactief gezien mischien minder spectaculair dan haar voorganger, qua sfeer wordt het zeker geëvenaard. Ook deze keer is de site weer beloond met een FWASOTD en heeft het een zilveren ADCN Lamp gewonnen in de categorie 'interactief' en ook nog een Webby.

Chocolátl

uri:	http://chocolatl.nl/
techniek:	Javascript, HTML5, CSS3, PHP, Wordpress
grapisch ontwerp:	Ibrahim Farah

Er is een nieuwe winkel in de Jordaan: Chocolátl. Als je nog niet verslaafd was aan chocola wordt je dat wel na een bezoek aan deze winkel. Samen met grafisch ontwerper en fotograaf Ibrahim Farah maakte ik de website voor Chocolátl, simpel en strak.

Green Today

uri:	http://greentoday.nl/
opdrachtgever:	GMG
techniek:	Javascript, HTML5, CSS3, PHP, Wordpress

Green Today is een beurs over groen. Geen geitenwollen sokken groen, maar high tech groen. De site is een Wordpress CMS met speciaal ontwikkelde HTML5 templates en plugins, met veel Javascript animatie en canvas.

Allerhande

uri:	http://allerhande.ah.nl/
opdrachtgever:	Lukkien
werkzaamheden:	Flash Actionscript 3
samenwerking:	Sanne Wijbenga Anna Offermans Patrick Sanwikarja Thomas Moes Marlène Soulier Yuri van der Meer Orne Brocaar Erik van Nieuwburg Koen van Esterik Stijn de Ryck Paul van der Loos

Allerhande is het gratis blad van Neerlands grootste supermarktketen Albert Heijn. De focus van deze Flash site ligt op recepten; vooral met betrekking tot thema en sociale netwerken. Waarbij dat laatste een implentatie is van het bestaande kookschrift op ah.nl. En ander mooi voordeel van digitaal is dat je nu ook de artikelen uit eerdere Allerhandes kan raadplegen.
Ook al kwam ik halverwege dit project binnen, ik zat er al snel in dankzij Scrum. En natuurlijk had ik al eerder met het op PureMVC gebaseerde framework gewerkt. Dankzij een goed team is het resultaat heel koel geworden.

Allerhande.nl heeft de Publieksprijs Lancering Customer Medium van het Jaar 2010 gewonnen.

illustratie

3D panoramas

opdrachtgever:	Iwan Baan
werkzaamheden:	Flash Actionscript 3, XML/XSLT

Iwan Baan is fotograaf. Hij fotografeert onder andere objecten voor architecten met behulp van een fish-eye lens. Het resultaat toonde hij eerder altijd met behulp van Director, maar de Shockwave-plugin die daarvoor nodig is, wordt sinds de komst van Flash eigenlijk niet meer zoveel gebruikt.
Ik heb aan de Flash-panorama's een aantal kleine dingen toegevoegd. De laadtijden zijn kleiner geworden omdat de panorama's nu worden gecached (zover het geheugen dat toelaat). De hele applicatie is nu liquid, wat wil zeggen dat het op elke willekeurige resolutie te bekijken is en meeschaalt wanneer de browser wordt vergroot. Er zitten nu tevens kleine scherm overgangen in, wat de illusie van beweging geeft.

Kees Kroot

uri:	http://www.soundcircus.nl/
opdrachtgever:	Pool worldwide
werkzaamheden:	front- en backend mbv XHTML/CSS, jQuery, Flash Actionscript 3, PHP
fotografie:	Krijn van Noordwijk

Deze Flash site gunt je een blik in het hoofd van Kees Kroot. Naast de portfolio kun je ook zien wat Kees zoal inspireert. Als je Kees een berichtje stuurt verschijnt het onmiddelijk in zijn hoofd.

FC Walvisch

uri:	http://www.fcwalvisch.nl/
opdrachtgever:	FC Walvisch
werkzaamheden:	concept, grafisch ontwerp, productie
techniek:	XHTML/CSS, jQuery, PHP, Flash Actionscript 3

FC Walvisch is een geluidsstudio met een voetballiefhebber aan het roer.
Na zes jaar was het voor FC Walvisch tijd voor een nieuwe site, in een jaren 70 technicolor voetbalstijl, serieus met een knipoog (of andersom).

Vacansoleil

uri:	http://www.vacansoleil.nl/
opdrachtgever:	Lukkien
werkzaamheden:	Flash Actionscript 3, Javascript, CSS

Een Europees marktleider in kampeervakanties krijgt natuurlijk niet zomaar een site, maar eentje waarin het lijkt alsof je al op vakantie bent. Bij Lukkien ging de lead developer zelf op vakantie dus ik werd gevraagd een maand in te komen vallen.

New Colt minisite

uri:	http://newcolt.com/
opdrachtgever:	Lukkien
werkzaamheden:	Flash Actionscript 3
grapisch ontwerp:	Olaf Gremie

De Mitsubishi Colt heeft een restyle ondergaan. De minisite hiervoor was onderdeel van een crossmedia campagne voor deze auto. Technisch is de site vrij zwaar; een compromis tussen kwaliteit en kwantiteit. De site bevat een drietal interactieve 360° panorama's met hotspots naar specifieke onderdelen. De panorama's vloeien naadloos in elkaar over en bevatten verschillende achtergrondgeluiden die meedraaien met de auto's.

Blauwe Planeet

opdrachtgever:	Thieme Meulenhoff via Shapers
werkzaamheden:	Flash Actionscript 3

Shapers ontwikkelde voor ThiemeMeulenhoff een serie topografie cd-roms voor groep 7, 8 en 9. De cd-roms bieden een complete, leuke en effectieve manier om topografie te leren. Ze maken deel uit van de methode 'de Blauwe Planeet'. Onlangs is een deel hiervan omgeschreven naar Flash zodat het ook online te leren is. We hebben meteen van de gelegenheid gebruikgemaakt het interactief en grafisch te verbeteren.

Kosmonaut

opdrachtgever:	Kosmonaut & Pool
werkzaamheden:	Flash Actionscript 2, XHTML/CSS

Kosmonaut maakt muziekvideos. Hun site moest vooral simpel zijn. Ik kreeg foto's aangeleverd van hun eigen bureau, en wat post-its, en daar moest ik het mee doen.
Het navigeren gebeurt door middel van het bewegen van de camera over het bureaublad. De bitmap van het hout wordt bij verandering van schermgrootte opnieuw berekend. In verband met rotatie zijn de breedte en hoogte gelijk aan de diagonaal van het scherm. Doordat grote bitmaps op sommige computerprocessors intensief zijn, zal een kleiner scherm soepeler lopen.
Op dezelfde manier als de site van Lea Jurida wordt de content ingeladen in de vorm van de eigen XHTML pagina, en in dit geval wordt ook de CSS file gebruikt.

SFBrowser

uri:	http://sfbrowser.sjeiti.com/
werkzaamheden:	XHTML/CSS/jQuery/PHP

Als onderdeel van websites maak ik vaak een afgeschermd deel waar men teksten kan aanpassen en afbeeldingen uploaden. Voor het uploaden van bestanden heb ik SFBrowser geschreven. Hiermee kan je bestanden uploaden, downloaden, verwijderen, aanpassen en selecteren voor gebruik. In ruil voor wat karma heb ik het open-source gemaakt. Daarnaast is open-source natuurlijk een goede manier om testers en feedback te krijgen.

TinySort

uri:	http://tinysort.sjeiti.com/
werkzaamheden:	Javascript / jQuery

Omdat ik iets nodig had om HTML nodes te sorteren heb ik een jQuery plugin geschreven.

TinySort is een kleine, eenvoudige jQuery plugin die elk nodetype kan sorteren door op tekst- of attribuut waarde, of door dat van een van de kind-nodes.

Ome Willem

uri:	http://www.omewillem.nl/
opdrachtgever:	Ome Willem
werkzaamheden:	illustratie, grafisch ontwerp, productie

Bij deze site stond de bekende Show van Ome Willem centraal. Je ziet het decor van Ome Willem als interface, met deur en al. De knoppen naar de verschillende pagina's zijn vellen papier die aan de wand achter het Ome Willem-figuurtje hangen. Wanneer je op een knop drukt, gebeuren en allerlei dingen die met die pagina te maken hebben. In de winkel kun je bijvoorbeeld aan de waslijn met petten en t-shirts trekken. De content pagina's heeft een knip-en-plak gevoel gekregen door de titels echt uit te knippen en in te kleuren met wasco en viltstift.
Naast een guestbook is er ook een verjaardagskalender die bezoekers kunnen invullen. Op hun verjaardag krijgen ze dan een heus sms'je met felicitaties van Ome Willem.

Lea Jurida

uri:	http://www.jurida.com/
opdrachtgever:	Lea Jurida
werkzaamheden:	illustratie, grafisch ontwerp, productie
werkzaamheden:	XHTML, Flash Actionscript 3

Lea Jurida is een sound designer. Bij haar site moest de nadruk natuurlijk liggen op geluid. Een interesante techniek die ik voor deze site bedacht, is de manier van content inladen. Normaal gesproken kunnen zoekmachines de content van een Flash site niet indexeren. Maar in dit geval laadt de Flash site xhtml content, wat gewoon de index.html is.

Kleuren speuren

uri:	http://kleurenspeuren.shapers.nl/
opdrachtgever:	Centraal Museum via Sikkens Foundation
werkzaamheden:	concept, illustratie, programmeren (Macromedia Director)

Met deze cd-rom leren basisschoolleerlingen van verschillende leeftijden leuke dingen over kleurenleer. Het is een speelbare leeromgeving die op een avontuurlijke manier toegang geeft tot een schat aan informatie. Door de actieve houding die wordt opgewekt, zijn leerlingen intensief bezig. Het overkoepelende spelelement zorgt voor de extra uitdaging de gehele cd-rom te doorlopen. Kleuren Speuren werd in 2004 genomineerd voor de Gouden Apenstaart.

Frogs from space

uri:	original game
uri:	prototype remake
sound design:	Lea Jurida
werkzaamheden:	Flash Actionscript 2, PHP/MySQL (amfphp)

Als ik aan schapen denk, denk ik aan ontvoeringen door buitenaardse wezens (maar misschien ben ik de enige). Dit spel heb ik gemaakt om te kijken in hoeverre het mogelijk is dynamisch levels te genereren. De levels worden nu met XML ingeladen. Naast de grafische presentatie van een level staan hier ook uiteenlopende condities in beschreven die nodig zijn om een level te halen. Toch is de XML-structuur redelijk simpel gebleven.

Ron Valstar :: freelancer :: digitale media