Het is goed om te weten welke platformen ondersteund worden door een framework. Maar welke moet je nu kiezen? Dit hangt ook af van de specificaties van een project. Markus Falk houdt een vergelijkings tabel up-to-date waarmee je in een oogopslag de verschillende frameworks kunt vergelijken. Er zit ook een wizard bij waarmee je je specificaties van een project al kunt opgeven zodat er vervolgens een lijst uit rolt.
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
Onlangs heb ik bij Siyou 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.
Lees verder »
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.
Net de screencast gezien van Paul Irish over jQuery. Je zult na het bekijken ervan beter begrijpen hoe jQuery in elkaar zit en je voordeel hiermee doen.
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.
Arjan Ceelen is (freelance) Flash- frontend ontwikkelaar van beroep en dagelijks alert op nieuwe ontwikkelingen die te maken hebben met Flash, CSS(3), HTML(5) en Javascript.
