… Was dafür notwendig ist, und wie wir das erreichen, wollen wir in einem kurzen Image-Film zeigen, der ab sofort hier und auch auf unserer Webseite zur Verfügung steht.
Archiv: Kategorie Webdesign
Wir erschaffen interaktive Erlebnisse
08.11.2009Genetische Algorithmen Mandalaa.com
08.07.2009Mit mandalaa.com haben wir ein Projekt für einen unserer Kunden verwirklicht, dass den Benutzer Blumen generieren lässt. Er kann die Form, Farbe und Maserung dieser durch mutieren und kreuzen beeinflussen. Die Blumen entwickeln sich dadurch weiter und können dann gespeichert und weiterversandt werden.
Ein Video des entwickelten Prototyps gibts hier:
Mandalaa - Webproject from Guave Studios, Zürich on Vimeo.
Parameter Haufen
Die Daten der Blumen selbst bestehen aus einem Parameterhaufen, der die verschiedenen Eigenschaften beschreibt. Die Vielfalt der Blumen zeigt, dass mit Hilfe relativ weniger Parameter extrem viele verschiedene Möglichkeiten bestehen. Es gibt auch Beziehungen zwischen Parametern, die für die Mutation und die Kreuzungen wichtig sind.
Genetische Algorithmen
Hinter der Applikation verbergen sich einige genetische Algorithmen. Jedoch fehlt ein entscheidender Schritt zur Genetik. Der Einfachheit halber haben wir auf Deathrules (Regeln für das Sterben einer genetischen Linie) verzichtet und den Blumen konkrete Regeln vorgegeben. Dies hat einen entscheidenden Vorteil, da wir die somit nicht darstellbaren Formen von vornherein ausschliessen.
Reproduzierbare Zufälle
Da wir zu viele Parameter bräuchten um alles zu beschreiben, brauchten wir Zufälle. Diese mussten aber reproduzierbar sein, sonst würde eine vom Nutzer zuvor gespeicherte Blume bei jedemProgrammaufruf ein bisschen anders ausschauen. Dies umgingen wir mit einem “Pseudo-Random-Generator” mit Offset. Was hat das Ganze dann aber noch mit Genetik zu tun? Der Offset ist sowas wie die Genetik. Sie bestimmt bei jeder Blume ihre Charakteristiken.
Erweiterbarkeit
Da wir davon ausgehen, dass sich dieses Projekt weiterentwickelt, war die Erweiterbarkeit ein wichtiger Punkt. Was dabei problematisch ist, sind die bisher generierten Blumen. Denn sobald Darstellungsalgorithmen geändert oder erweitert werden müssen, könnte dies fatale Folgen für die bereits gespeicherten Blumen haben. Deswegen ist die Generation, Beschreibung und Darstellung völlig getrennt, austausch- und erweiterbar.
PPMCity.com - Surf Through
01.07.2009Ich habe mir jetzt doch mal die Zeit genommen, eine kurze Vorstellung eines unserer grössten Projekte, nämlich die für den schweizer Star-DJ Sir Colin umgesetzte virtuelle Stadt “PPMCity.com” zu machen. Das erspart euch langes Probieren und Rumsurfen in der virtuellen Stadt. Ich empfehle trotzdem jedem, der gerne moderne Kommunikationstechinken nutzt, gerne Poker spielt oder eine eigene virtuelle Wohnung einrichtet und knifflige Spiele mag, sich in PPMCity umzusehen.
Für jeden interessierten Webdesigner und Flasher lohnt sich der Besuch auf jeden Fall.
Einige erste Eindrücke nun hier im Video:
PPMCity - a surf through from PPMCity on Vimeo.
fCon Flash Deployment Console
18.06.2009
Die Flash Deployment Console ist für das Deployment in einem Game oder in einer Webseite gedacht, die während der Laufzeit direkten administrativen Eingriff in die Applikation oder Ablauf brauchen. Vergleichbar ist die fCon mit einer Development Console in einem Spiel. (Vielfach mit ^ aufrufbar).
Applikationskontrolle
Die fCon hat in der Console eine Eingabemöglichkeit (Kommandozeile). So ist es möglich Commands zu registrieren die beispielsweise den Benutzer in ein gewisses Level setzen.
Modifikation von Variablen
Die fCon bietet Möglichkeiten für das setzen von Variablen. Sie bietet vorallem mit Vervollständigung eine Navigation durch alle DisplayObjects.
Deployment Logging
Gerade bei Flash Online Applikationen befinden sich die Logs einer Applikation auf der Nutzerseite. Somit kann die Laufzeit der Applikation nicht überwacht werden. Natürlich kann man die Logstufen FATAL und ERROR per Reports an den Server übermitteln, aber bei DEBUG und INFO wäre das mengenmässig ein absolutes Problem. Somit kann man als Entwickler direkt vor Ort in das Geschehen der Applikation Einblick nehmen und den aktuellen Fehler in den Logs suchen.
History
Die fCon bietet eine History mit UP and DOWN keys an. Diese kann mit einer Einstellung Lokal automatisch gespeichert werden. Weiteres kann man mit PAGE_UP oder PAGE_DOWN im Logviewer gescrolled werden. Drückt man zusätzlich SHIFT kann man nach ganz oben oder nach ganz unten.
Scripts und Variablen
Zusätzlich ist ein einfaches Scripting und Variablendeffinitionen möglich.
Sicherheit
Da wir nicht jedem auf einer Webseite den Zugriff auf die Console bieten wollen kann mit dem Lockmanager ein Passwort gesetzt werden. Das ganze funktioniert versteckt und ohne Visuelles Feedback. Somit ist es in einer gewissen Weise “geheim” das diese Applikation eine Console bietet. Das Passwort ist selbstverständlich gehashed und somit auch nicht auslesbar.
Ein paar kleine Beispiele
Einfaches Setup
package { import com.guavestudios.fcon.ConsoleImpl; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.text.TextField; import flash.text.TextFieldAutoSize; /** * fCon Sample * @author maze | guavestudios.com */ public class Main extends Sprite { public var txt:TextField; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; ConsoleImpl; //reference the console var config:XML= <![CDATA[crtl+Char.<]]></setting> <setting id="Console.trace">false</setting> <setting id="AutoCompletion.Key"><![CDATA[Char.<]]> true true ; Console.setStage(stage, config); //initialize console Console.trace("Hello World"); //sample trace //create a sample textfield txt = new TextField(); txt.autoSize = TextFieldAutoSize.LEFT; txt.text = "Open with 'CRTL + <' and completion with '<'"; addChild(txt); //register an sample command with textField Console.execute(["loadCommand",new SampleCommand(txt)]); } /** * sample function * @return testString */ public function getString():String { return "this is a test String"; } } }
Um die Console aufzurufen muss man zuerst das Flash aktivieren und CRTL + < drücken. Dieser Shortcut ist frei definierbar mit der Config.
Das kleine Tutorial zeigt einige Funktionen die die Console im jetztigen Status kann. Die ganzen Kommandos können nach der Reihe ausgeführt werden.
Die Console ist gleich darunter eingebettet und ist noch zugeklappt:
Console
This movie requires Flash Player 9
- Ist die Console offen und das Eingabe Feld aktiviert kann man mit < alle verfügbaren Commandos anzeigen.
- mit pr und < vervollständigt die Console zu print Leertaste. Danach Hello World eingeben und Enter drücken
- align help eingeben um eine hilfe über den Align Command darzustellen
- align bottom eingeben um die Console ganz untem im Flash zu positionieren
- Wir befinden uns derzeit auf der Stage
- print $stage.@ und mit < vervollständigen um die verfügbaren Childs der Stage anzuzeigen (nummeriert)
- weiter schreiben mit 1. und vervollständigen mit <. Wir befinden uns jetzt in der Applikation und sehen die Eigenschaften.
- Die ganze Zeile kann jetzt weitergeschrieben werden auf print $stage.@0.txt.text und mit Enter ausführen
- Da wir das Textfeld nocheinmal brauchen können wir es in eine Variable speichern.
- set textField $stage.@0.txt
- Wir können jetzt eine Variable modifiziern mit modify $textField.name ‘myTextField’
- Die Vervollständigung kann auch auf Element Namen reagieren.
- print $stage.@0.# und mit < vervollständigen. Jetzt wird myTextField als benanntes Item angezeigt. (Listet alle DisplayObjects mit Namen auf)
- Fertigschreiben print $stage.@0.#myTextField.text
- Wir können das Textfeld umpositionieren mit modify $textField.y 50
- Wir haben bei der Initialisierung die Console um “SampleCommand” erweitert. Der Command ist sampleCommand
- sampleCommand $textField.x $textField.y
Wir haben die Flash Deployment Console mit unseren Applikationen weiterentwickelt und jetzt online verfügbar gemacht.
Im Trunk befinden sich derzeit noch mehr Plugins und Commands die ich bei Zeit vorstellen werde.
Das ganze ist OpenSoure und unter MIT Lizenz. Wer mitentwickeln möchte kann sich gerne bei uns melden.
Flash&Usability - Nutzerfreundliche Flashprojekte
16.06.2009Flash ermöglicht Designern und Entwicklern multimedial aufbereitete Inhalte weitgehend browserunabhängig bereitzustellen. Man kann Animationen erstellen, mehr Interaktivität produzieren und damit beeindruckende Interfaces erstellen. Mit AS3 besitzt Flash mittlerweile eine Scriptsprache, mit der sich alle wichtigen Prinzipien der Objektorientierung umsetzen lassen. Damit kann man mit Flash als Entwicklungsumgebung auch grosse Projekte umsetzen.
Leider gibt es durch diese Möglichkeiten auch immer wieder Ausbrüche von „Flash-Euphorie“, die dazu führen, das diese tolle Technologie relativ unvorteilhaft für Nutzer und damit auch für die Betreiber eingesetzt wird.
Ich möchte an dieser Stelle aber nicht darüber philosophieren, wann und wo Flash eingesetzt werden soll, sondern ein paar Techniken vorstellen, die dazu verwendet werden können, speziell Flash-Webseiten und Applikationen so aufzubereiten, dass sie möglichst „usable“ werden.
Flash und der Browser
Auch wenn der Flash-Player heutzutage eine hohe Verbreitung geniesst, ist er ein Browser-Plugin. Die Verwendung von Browserplugins im WWW ist aus mehreren Gründen nicht ganz unproblematisch. Eine Sache ist, dass die damit ausgeführten Programme als Elemente einer einzigen Seite implementiert sind und dadurch nicht über mehrere Seiten einer Webseite weiterlaufen können. Dies ist vor allem problematisch wenn komplette Webseiten mit Flash realisiert werden. Daraus ergeben sich einige Probleme.
Flash Einbetten
Schon beim Implementieren des Flash-Objektes in die HTML Struktur kann man einiges herausholen. Beispielsweise kann mit der Angabe des Parameters „Accesskey“ beim Flash-Objekt der Focus per Tastatur geregelt werden.
Weiterhin empfiehlt es sich heute, die <embeds> und <objects> für die SWFS per Javascript zu schreiben (beispielsweise FlashObject), da so die ActiveX -Element -Sperre von Microsoft-Browsern umgangen werden kann und das Flash sofort den Fokus erhält. (sonst muss man das Flash eventuell mit einem zusätzlichen Klick aktivieren)
Hier ist aber zu beachten, im <noscript> - Bereich eine Alternative bereitzustellen.
Generell sollte für Flash-Elemente auch einen alternativen Inhalt bereitgestellt werden, der immer dann geladen wird, wenn kein FlashPlayer vorhanden ist (FlashObject z.B. hat die Möglichkeit das zu Prüfen bereits implementiert). Das Minimum sollte sein, dass eine Meldung ausgegeben wird, das kein Flash -Player vorhanden ist und ein Download-Link zum Plugin. Auch sollte auf die FlashVersion abgeprüft werden, und gegebenenfalls eine Alternative, oder besser, ein Update auf die neueste Version des Players gestartet werden können.
Zurück – Vorwärts – Reload ?
Viele Benutzer navigieren oft mit den Browserbuttons für „Vor“ und „Zurück“ sowie „Aktualisieren“. Eine einheitliche Bedienung (don’t make users think) und gewohnt funktionale Bedienelemente sind in der Usability sehr wichtig. Deshalb sollten für reine Flash-Webseiten oder Apps Tricks angewandt werden um diese Funktionalität wieder zu ermöglichen. Eine verbreitete Möglichkeit ist, mit dem Tool „SWFAdress“ zu arbeiten, das im Grunde eine Library ist, die es ermöglicht, für Flash-Dateien „virtuelle URLs“ anzulegen, die dann in Flash aufgelöst werden. Dadurch wird es wieder möglich, die Seite zu aktualisieren, in der Chronik vor- und zurückzublättern, oder direkte Links zu Unterseiten der Flash-Webseite (z.B. per E-Mail) zu versenden.
Als Beispiel erwähne ich an dieser Stelle eines unserer älteren Projekte, die virtuelle Stadt ppmcity.com, wo wir auch die Positionen in den Blätterscripts, etc. in der URL mitübergeben. (Um die Stadt ohne registrieren zu Betreten, könnt ihr unter der Login-Maske “als Gast einloggen” anklicken.)
Suchmaschinenoptimierte Flashs
Adobe Flash hat sich als populäres Format für interaktive Anwendungen und Internetseiten etabliert. Jedoch besitzen Flash-Webseiten einen entscheidenden Nachteil - publizierte Inhalte können nur teilweise von Suchmaschinen erfasst und verarbeitet werden. Einige Suchmaschinen lesen mittlerweile schon komplette Zeichenfolgen aus den Flash-Dateien aus, auf diesem Gebiet wird geforscht und gearbeitet. Trotzdem ist die Indizierung von HTML - Dateien der Indizierung von Flash Inhalten noch weit voraus.
Der erste Schritt bei der Suchmaschinenoptimierung für Flash-Webseiten ist also im Prinzip der, den es bei HTML nicht in dieser Form braucht, nämlich den Bots der Suchmaschinen, die das Internet durchforsten einen Inhalt zur Verfügung zu stellen, den sie besser und genauer lesen können. Diese Bots können nämlich z.B. keine Flash-MovieClips an sich lesen, sondern lesen im Prinzip eigentlich das, was wir sehen, wenn wir den Quelltext einer Webseite ansehen. Ich möchte mich jetzt nicht allzu tief in diese Problematik vertiefen, aber ich möchte auf ein Beispiel zur Suchmaschinenoptimierung von Flashseiten verlinken. Ich werde im späteren Verlauf bei Interesse noch einen eigenen Post hier hineinstellen. Wichtig ist aber grundsätzlich, dass man sich bewusst ist, dass es bei Flash-Webseiten zusätzlichen Aufwand benötigt, um eine akzeptable On-Page optimierung zu bekommen.
Das Flashprojekt ansich
Ladezeiten
Flash verleitet natürlich gerade aufgrund der Möglichkeiten im Streamingbereich dazu, Projekte mit grosser Datenmenge zu realiseren. Trotzdem gilt auch für Flash-Elemente „Don’t squander users’ patience“ - stelle die Geduld der Nutzer nicht auf die Probe! Zu lange Ladezeiten (z.B. > 15 Sek. bei durchschnittlicher Breitbandverbindung) sollten vor allem bei Flash-Webseiten vermieden werden. Bei Onlinespielen und Videos sind Nutzer meiner Erfahrung nach meist gewillt, längere Ladezeiten in Kauf zu nehmen. Sinnvoll ist es auf jeden Fall einen „Preloader“ darzustellen, um dem Nutzer den Fortschritt zu veranschaulichen. Bei grösseren Projekten empfehle ich, dass ihr euch auch eine prebuffering – Strategie ausdenkt.
Funktionalitäten und Design der UI - Elemente
Flash bietet die tolle Möglichkeit, jegliches Bedienelement auf der Webseite individuell zu gestalten. Hier ist die Gefahr also besonders gross, dass Unübersichtlichkeit und damit „Unbedienbarkeit“ vorherrscht.
Achtet also darauf, dass das Aussehen von Bedienelementen mit gleicher Funktionalität (z.B. alle Dropdowns) auch möglichst gleich ist. Das Links und Backlinks, Menüelemente, oder Formulare und Bedienelemente ein durchgängiges Design haben und dass das Aussehen und die Funktion nicht zu extrem von gewohnten Normen abweichen. Ein zu starkes Abweichen der Normen hat hier fast immer zur Folge, dass sich der Nutzer intensiver mit dem Element auseinandersetzen muss und das Gefühl verliert, die Applikation unter Kontrolle zu haben bzw. zu wissen was passiert, wenn er agiert. Viele sind dazu nicht gewillt. Dies kann bzw. wird sich negativ auf die User Experience auswirken. Es kann aber auch Vorteilhaft sein, wenn man eine spezifische Zielgruppe erreichen möchte oder das Projekt nicht vordergründig der Informationsvermittlung dient („discover“ … Onlinespiele – Rätsel – etc.)
Bei Wii-Fit haben das die Kollegen von FI hinbekommen, wie ich finde.
Loony – loops & Animation
Animationen sieht man mittlerweile oft und überall. Meistens werden Sie bei kommerziellen Webangeboten dazu genutzt, die Aufmerksamkeit des Nutzers (z.B bei Bannerwerbung) auf sich zu ziehen. Mit Animationen klappt das oft sehr gut. Das Problem ist, dass sich das in anderen Einsatzbereichen auch negativ auswirken kann. Wenn ich z.B. diesen Blog Eintrag lesen würde und im Header oder (noch schlimmer) an der Seite läuft eine schnelle und bunte, sich wiederholende 3D-Animation ab, würde das meinen Lesefluss extrem stören :).
Ich rate nicht von Anmiationen ab, aber es ist generell wichtig, sich im vorhinein zu überlegen, wohin man (und z.B. in welcher Reihenfolge) den Fokus des Betrachters lenken möchte. Dies kann man mit ganz wenig typografischen oder layouttechnischen Mitteln erreichen, und eben auch mit Animationen. Diese sollten – vor allem bei vordergründig Informations-vermittelnden Flash-Programmen – eher dazu verwendet werden auch Informationen zu vermitteln oder bei der Vermittlung von Informationen unterstützen (z.B. veranschaulichen) und nicht in der Schleife ablaufen. Natürlich kann man Animationen auch einsetzen um „Athmosphäre“ zu schaffen, ich empfehle euch dann jedoch, vorallem wenn ihr noch Lesematerial anzeigt, das vorsichtig zu tun. Wenn man Animationen richtig verwendet, sind sie ein mächtiges Werkzeug. Bei Spielen haben Anis noch zusätzliche wichtige Aufgaben, deshalb gilt dieser Punkt eher für Webseiten und Anwendungen.
In diesem Beispiel wird der Fokus des Nutzers sofort auf die wichtigen Stellen
(Beschreibung und Funktionalitäten der Webseite) fallen.
Accessibility-Klasse
Um die zugänglichkeit von mit Flash bereitgestellten Informationen zu erhöhen, könnt ihr die Accessibility – Klasse (seit AS2 meines Wissens nach) einsetzen.
Die Accessibility-Klasse verwaltet die Kommunikation mit Bildschirmleseprogrammen. Bildschirmleseprogramme sind eine Art unterstützende Technologie für Sehbehinderte, die auf diese Weise eine akustische Umsetzung des Bildschirminhalts erhalten. Man kann abprüfen, ob ein Computersystem Eingabehilfen unterstützt und dann die vorzulesenden Inhalte den verschiedenen Objekten hinzufügen. Es gibt Projekte, wo sehr zugänglich sein müssen und solche Massnahmen ziemlich wichtig sind.
Sounds
Sounds sind natürlich ein tolles und im Web oft vernachlässigtes Feature, mit dem man viel Athmosphäre schaffen kann um Eindrücke zu vermitteln und damit eine positive User Experience zu schaffen. Generell ist es aber in der Usability ziemlich wichtig, dem Benutzer immer das Gefühl zu geben, alles kontrollieren zu können : ).
Deshalb finde ich es im Bezug auf Sounds sehr wichtig, immer eine Control anzubieten, mit der der Benutzer den Sound aus- und einschalten kann. Ich selber speichere bei unseren Projekten die Auswahl des Nutzers („aus“ oder „ein“) immer in ein local-shared-object oder ein cookie um die Auswahl auch dann speichern zu können, wenn der Nutzer das nächste mal die Seite besucht.
Ein Beispiel wäre hier die Seite des Hochzeitsfotografen David Dolder.
Flash und Usability ist kein Gegensatz. Wenn man mit Flash arbeitet, heisst das nicht, dass Usability komplett ignoriert werden kann. Und Usability wiederrum heisst in meinen Augen nicht, auf alle Vorzüge von Flash verzichten zu müssen.
Viele haben Spass mit Flash und ignorieren jegliche Usability Richtlinien. Das ist OK, wenn das einzige Ziel des Projektes ist, damit Spass zu haben. Allen die auch Projekte mit zusätzlichem Zweck realisieren, rate ich dazu, es mal auszuprobieren ; )
