Celar – Freelance flash/front-end ontwikkelaar

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.

Mobiel framework comparison chart

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

Wow is wat er direct bij me opkomt. Adobe is druk bezig met HTML5 en CSS. De nieuwste hoogstandjes daarvan zijn te zien op de Adobe Developer Connection website.

De nieuwe CSS shaders zijn voorgesteld aan de W3C task force om opgenomen te worden in de CSS standaard. Met deze toevoeging krijg je direct een grote bak met extra functionaliteiten tot je beschikking. Je kan ze gebruiken met CSS animaties en CSS overgangen (transitions).

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 »

Binnenkort komt er een tool beschikbaar via Adobe Labs, codenaam Edge. Dit is een HTML5 animatie tool. PM Doug Winnie heeft een korte introductie film gemaakt van de features die deze tool heeft.

Deze tool maakt animeren een stuk makkerlijker voor HTML5. De broncode bestaat uiteindelijk uit HTML/HTML5, Javascript en CSS. Met een tijdlijn waar je bewegingen en transities beheert maak je de animaties.

Adobe staat niet stil en ziet ook de opkomst van HTML5. Als antwoord daarop hebben ze de experimentele tool “Wallaby” ontwikkeld. Met deze tool is het mogelijk om Flash content te exporteren naar HTML5 code. Hierdoor zijn animaties ook te zien op non-flash apparaten zoals de iPad/iPhone/iPod.

Voorlopig is de tool gericht op Webkit gebaseerde browser zoals Safari & Chrome.

“De focus van de eerste versie van Wallaby is om de best mogelijke conversie te doen voor typische banner ads naar HTML5. Wallay kan dan ook goed grafische elementen converteren samen met complexe, tijdslijn gebaseerde animaties naar HTML5 die bekeken kunnen worden met browser die gebruik maken van de Webkit render engine. Ondersteunde Webkit browser zijn Chrome en Safari op OSX, Windows, en iOS (iPad, iPhone, iPod).”

Na een test kwam ik tot de conclusie dat vooralsnog alleen CS5 Fla bestanden geconverteerd kunnen worden.

Adobe werkt aan een programma waarmee je flash-animatie naar html5 kunt converteren.

Rick Cabanier, ontwikkelaar bij Adobe, demonstreerd dat het mogelijk is om flash elementen om te zetten naar html5.

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.