Celar – Freelance flash/front-end ontwikkelaar

In opdracht van IJsfontein hebben we bij Siyou Internet Solutions de technische realisatie verzorgt voor de GM Collector. Dit omvat een webapplicatie plus een mobiele variant hiervan.

Groninger Museum Collector
Wat houd de GMcollector in? Bezoeker van het Groninger Museum kunnen door middel van een pasje (GMcolletor) kunstwerken uit een tentoonstelling taggen. De getagde objecten zijn later thuis te bekijken via de GMCollector of via de mobiele site. Op deze pagina zie je je getagde collectie per bezoek en kun je per kunstwerk meer informatie vinden over bijvoorbeeld het werk, de kunstenaar en de stroming waartoe deze behoort.

Associatie wolk
De applicatie biedt de mogelijkheid om trefwoorden die van toepassing zijn op het werk toe te kennen. Samen met anderen die dit ook hebben gedaan ontstaat een associatie wolk van trefwoorden bij het kunstwerk.

Delen
Kunstwerken kun je ook doorsturen naar een vriend of kennis. Met de tell-a-friend-tool stuur je jouw getagde kunstwerk door. Deze is ook op de mobiele website te bekijken.

Bij Siyou heb ik gewerkt aan de demo pagina voor mobiel bankieren bij ABN-AMRO. Op deze pagina wordt door middel van video’s uitgelegd wat je allemaal kan doen met de mobiel banieren app.

HTML5
Wanneer je binnen komt op de pagina verschijnt er een iPhone in beeld. Deze blijft vervolgens staan en beweegt langzaam heen en weer. Als je op één van de menu items klikt verschijnt een filmpje die daar mee te maken heeft. Er is niet te zien dat dit een ander filmpje is maar de bewegende iPhone vloeit over naar het nieuwe filmpje.
Met javascript (jQuery) en het HTML5 video object wordt deze overgang gemaakt. Als alternatief voor browsers die geen html5 ondersteunen wordt een Flash video aangeboden.

iPad
Er is een klein verschil tussen hoe een desktop browser en een mobiele browser omgaat met html5 video. Mobiele apparaten spelen html5 video’s fullscreen af in hun eigen videospeler. Bij iOS apparaten is ook nog een het automatisch afspelen van video’s uitgeschakeld. De gebruiker moet deze initialiseren. Een work-around met javascript is helaas dichtgetimmerd door Apple. Je kan dus niet met javascript net doen alsof je op de video hebt geklikt.
(zie: iOSReference)

Bekijk de ABN-AMRO mobiel bankieren demo

Bij Siyou heb ik in opdracht van Sanoma Media voor het Voorlichtingsbureau Brood de ontbijcheck ‘Wat voor ontbijtmama ben jij?’ ontwikkeld in Flash. Deze check is ontworpen en geillustreerd door Yellowish.
De test bestaat uit een aantal vragen. Na het beantwoorden van deze vragen ontvangt de moeder een uitslag waarin beschreven staat wat voor ontbijttype ze is, tips, een aantal leuke broodweetjes en een ontbijtrecept.

De test kan gedaan worden op:

• http://www.volgensmama.nl/watvoorontbijtmamabenjij/
• http://www.schoolontbijt.nl/

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