CelarLog

In opdracht van Youngworks hebben we bij Siyou gewerkt aan een interactieve Google Maps applicatie voor de Provincie Utrecht.
Op deze kaart komen alle Utrechtse landschappen te staan. Middels een legenda navigatie kunnen de bezoekers zogenaamde ‘pointers’ op de kaart oproepen. De pointers zijn gekoppeld aan een specifieke locatie op de kaart. Na het klikken op een pointer komt er meer informatie over de (mini)events van de campagne en de langschappen. Hier kan dan op gereageerd worden en gestemd. Per event zie je een plaatje of een video.

De bezoeker wordt actief betrokken bij deze campagne door ze de mogelijkheid te bieden zelf evenementen toe te voegen.

Techniek

Google Maps
Google Maps biedt 2 API’s. Google V2 & Google V3. V3 is, zoals je al vermoed, op het moment van schrijven de meest recente API. Hierin zitten multi-touch functionaliteiten en deze is voor zowel mobiel- als desktop gebruik.

Gekozen is voor V3 aangezien V2 niet meer ondersteund wordt door Google. Ook biedt versie 3 meer mogelijkheden voor het aanpassen van de vormgeving. Dit was voor dit project belangrijk aangezien er niet gebruikt gemaakt werd van de standaard info ballonnen.

Groeperen
Een extra toevoeging is gedaan op de pointers. Deze groeperen zodra ze elkaar overlappen. Er wordt onderscheidt gemaakt tussen pointers per groep. Hierdoor kun je per groep een cluster icoontje instellen die te zien is zodra er meerderen pointers van die groep elkaar overlappen. Door in en/of uit te zoomen worden de gegroepeerde pointers zichtbaar.

Laden wat er te zien is
In de applicatie worden alleen de pointers geladen die zichtbaar zijn. Hierdoor wordt er niet ingeleverd op prestaties. Hoe meer je uitzoomd hoe meer pointers er dus in beeld kunnen komen. Deze worden echter vervolgens weer gegroepeerd om de snelheid erin te houden.

JQuery
De legenda uitklap menu’s zijn opgebouwd en geanimeerd met JQuery. Dit Javascript raamwerk zorgt voor een juiste afhandeling in de verschillende browsers.

Voor een overzicht van radiostations kijk je op listenlive.eu.
Sla het .pls of .m3u bestand op en open deze met een teksteditor.

Voorbeelden

• Radio 538: http://82.201.100.9:8000/radio538
• QMusic: http://vip2.str.reasonnet.com:80/qmusic.mp3.96

Hoe voeg ik een nieuw radio station toe?

stap 1: klik op ‘Voeg toe’
stap 2: Vul de statio naam in bij ‘Station naam’ (bijv. Radio 538)
stap 3: vul de radio stream in bij ‘Full stream’
stap 4: Sla op.

Geavanceerd

heeft een radiostation zijn beveiliging dicht staan voor Flash/Air dan kun je deze via een andere server die daar geen moeite mee heeft laten lopen. Dit kan bijvoorbeeld via een lokale server (WAMP). Je vult dan bij de geavanceerde settings (het tandwieltje) de externe streamhost (bijv. http://localhost/), filename (bijv. stream.php), portvariabele(bijv. port) en hostvariabele (bijv. host) in. Er wordt dan een url opgebouwd die er als volgt uitziet: http://localhost/stream.php?host=[RADIOHOST]&port=[RADIOPORT]

RADIOHOST vul je vervolgens in als je een station gaat toevoegen en RADIOPORT ook.
Een voorbeeld van een php bestand die de stream doorgeeft is hier te downloaden.

In opdracht van Yourzine heb ik bij Siyou gewerkt aan Style your window van Luxaflex®.

Op de site kunnen bezoekers een foto van hun woonkamer of een ander vertrek uploaden en daar dan Luxaflex producten in hangen. Deze worden aan de hand van een paar vragen gekozen. De keuze is direct zichbaar in het resultaat (de geuploade foto). Bij elke actie van de gebruiker wordt gekeken welk product er aan zijn criteria voldoen.

Communicatie back-end
Ik heb alle Flash zaken voor deze website ontwikkeld en gekoppeld aan de back-end code. De ontwikkeling hiervan ging soepel aangezien we gebruik maakte van een webservice achtige omgeving. Hierdoor kon ik direct functies uit de back-end aanroepen.

Meertaligheid
De hele applicatie is meertalig. Alle tekten die erin staan komen uit een database. Zelfs de keuzemogelijkheden worden bepaald in de back-end. Hierdoor is de applicatie erg flexibel wat betreft inhoud.

Bekijk website

Luxaflex Home

Luxaflex inspire

Luxaflex Inspire confirm

Luxaflex be inspired

Luxaflex Be inspired zoom

Luxaflex dealers

Luxaflex Location Dealer

Praktijk-jong.nl is de website van Suzan Jong. Suzan is gediplomeerd voetreflexzonetherapeut met een praktijk aan huis. Op de website is te vinden welke behandelingen ze verzorgt. Ook extra informatie over de behandeling en kosten zijn er terug te vinden.

Wordpress
Als content management systeem is gekozen voor WordPress. Door deze opensource blog applicatie zodanig aan te passen kan hij gebruikt worden voor websites zonder blog functionaliteit. De flexibiliteit van Wordpress maakt deze website goed onderhoudbaar en uit te breiden.

Thema
Er is een thema gemaakt waarin de vormgeving is gezet. Ook de functionaliteit van het uitklapmenu is hierin gebouwd.

Bekijk website

ClubMed kwam met de vraag of wij (NR6) een spel konden bedenken die aansloot bij de ‘Drie Dwaze Dagen’ van de Bijenkorf. Na verschillende spelconcepten te hebben bekeken heeft de strategie afdeling een concept bedacht.
Het is een krasspel geworden in een memory achtige vorm. Hierbij moet je 6 kaarten omdraaien (‘krassen’) en bij 3 dezelfde heb je de prijs die op die kaart staat.

Een basis design was hier al voor opgezet welke ik vervolgens heb uitgewerkt en vertaald naar een Flash applicatie. Vervolgens heb ik de achterliggende logica (php & mysql) ontwikkeld om het tot een geheel te maken.

 Speel het spel

Tassenbol.nl is een initiatief van Caroli Buitenhuis waarbij plastic tassen die je in de supermarkt en andere winkels krijgt te hergebruiken. Hiervoor heeft zij het idee bedacht om de plastic tassen die iedereen krijgt bij deze winkels niet thuis weg te gooien maar in een doorzichte bol te deponeren die in de winkels staat. Een volgende klant kan dan weer die tas hergebruiken. 

Voor tassenbol.nl heb ik een aantal grafische ontwerpen gemaakt waaruit er één gekozen is. Deze heb ik vervolgens uitgewerkt en omgezet naar html templates.

Bekijk website

 

Voor Beemsterkaas heb ik een bestel formulier in Flash ontwikkeld. Dit formulier wordt gebruik voor de actie ‘Beemsterkaas kookboek’. Tijdens de actieperiode kan het kookboek met korting besteld worden. De korting krijg je als je 3 streepjes codes hebt of ‘Smaakcard’ houder bent. Ook kan je als je geen van beide hebt het boek bestellen zonder korting.
Afhankelijk van de keuze verschijnen een aantal schermen met vragen die nodig zijn om de bestelling te plaatsen.

Bekijk website