Celar – Freelance flash/front-end ontwikkelaar

Wie is overgestapt naar Google Maps v3 heeft misschien al deze bug opgemerkt. Hij komt alleen voor wanneer er op een Apple met de Safari 4 browser naar een Google Maps applicatie gesurfd wordt. Zit er in deze applicatie een infowindow met Iframe als inhoud, dan blijft de inhoud van deze iframe vast staan en wordt gemaskerd wanneer je de kaart versleept.

Zelf heb ik nog geen oplossing gevonden voor deze bug.

Lees verder »

Deze week is de door ons (Siyou) ontwikkelde Google Maps applicatie live gegaan. De applicatie laat evenementen in de provincie Utrecht zien op een kaart. Bezoekers kunnen hier ook zelf evenementen plaatsen.

Deze applicatie is in opdracht van Youngworks gemaakt.
Lees hier meer over dit project.

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.

Zoals je waarschijnlijk wel hebt gehoord/gelezen laat Apple geen Flash technologie toe op zijn apparaten zoals de Ipad en Iphone. Dit met als argument dat de technologie slecht presteert, onstabiel is en energie verslindend zou zijn (zie Thoughts on Flash).

Als tegenhanger ziet Apple HTML5 en javascript als goede alternatieven voor Flash. Deze technologieën zijn zeker interessant maar nog niet zo ver als ActionScript 3.0 en Flash 10. Allereerst is HTML5 nog niet gestandariseerd en implementeren de verschillende browsers deze standaard niet allemaal hetzelfde. Canvas wordt bijvoorbeeld niet ondersteund door Microsoft Internet Explorer.
Je kan dus wel zeggen dat volledig overstappen op HTML5/Javascript (nog) niet een oplossing is. In de toekomst misschien wel, zodra HTML5 gestandariseerd is en door alle browsers ondersteund wordt.

Smokescreen
Smokescreen is een Flash-speler die geschreven is in Javascript. Dit opensource project zet swf bestanden om naar HTML5 en Javascript. Hierdoor is de swf ook af te spelen op Apple apparaten.
De Javascript speler is langzamer dan de Flash plug-in. Hierdoor is Smokescreen met name geschikt voor advertentiebanners. Wat op dit moment ondersteund wordt is een deel van de animatiemogelijkheden uit flash 8, geluidsstreamen, geluidseffecten, wat input en basale ActionScript. Het is nog in ontwikkeling. In de toekomst moet Flash uitgebreider ondersteund worden en de prestaties omhoog zijn gegaan.
Op de site laten ze een aantal demo’s zien waarin je kan zien dat ze aardig op weg zijn.