Ganz abgesehen von Optimierungen in den Datenbank-Abfragen, einsetzen von File- und Ram-Caches ging es auch um das setzen von Cache-Direktiven für statische Dateien sowie eine Subdomain zur Auslieferung dieser und der damit verbundenen Erhöhung der parallelen Anfragen durch den Browser.

Wir haben zur Analyse Tools wie YSlow! von Yahoo oder Page Speed von Google genommen (wir berichteten), um damit Dinge zu finden, die es zu verbessern gab.

Schritt 1: Fasse zusammen und komprimiere

Als ersten Schritt haben wurden dazu die Stylesheets und Javascript-Dateien zusammengefasst und anschließend komprimiert (Entfernen von Kommentaren, Zeilenumbrüchen, doppelten Leerzeichen etc.). Dieser Vorgang geschieht komplett automatisiert, die dadurch erzeugten Dateien werden gecached und mit einer versionierten URL ausgegeben (z.B. http://becks.de/media/201104/js/…). Diese URL ändert sich, je nachdem wann eine der eingebundenen Dateien das letzte mal verändert wurden ist, selbstständig.

Schritt 2: Komprimiere erneut. Bitte was? Ja, nochmal!

Ein weiterer Schritt war die erneute Kompression der Inhalte. Das mag jetzt erstmal verwirrend sein, hat aber seinen Grund. Zwar haben wir im vorhergehenden Schritt bereits die Dateien komprimiert, wir haben die jedoch nur von unnötigen Zeichen entfernt. In diesem Schritt jedoch komprimieren wir Dateien selbst mittels dem gzip-Verfahren. Dadurch können wir die Dateigrößen teils bis zu 80% verkleinern, was dazu führt, dass der Server (Traffic) und der Browser (Ladezeiten) weniger Daten übertragen müssen. Jedoch ist dabei zu beachten, dass nicht alle Daten komprimiert übertragen werden dürfen. PDF’s, Filme, Flashdateien – um nur mal drei zu nennen – dürfen beispielsweise nicht komprimiert werden, da die Datei ansonsten nicht mehr korrekt gelesen werden können. Unproblematisch ist das Komprimieren hingegen bei der Ausgabe von HTML, bei Bildern, Stylesheets, Javascript, XML, JSON und und und. Kurzum, bei eigentlich allen Dokumenten die als Textform übertragen werden. Diese komprimierten Daten werden vom Browser anschließend wieder dekomprimiert und verwendet.

Schritt 3: Ablauf-Datum in Zukunft und Vergangenheit

Dieser Schritt befasst sich mit den Expires- und Last-Modified-Headern von statischen Dateien. Diese werden verwendet um den Browser zu sagen, wann eine Datei verändert wurde oder abläuft. Anders formuliert, wann eine Datei vom Browser neu geladen muss. Diese Header-Angaben kann man sich zu nutze machen um den Browser somit Direktiven zu vermitteln, damit dieser statische Inhalte länger im Cache behält und die Seite beim erneuten Besuch um ein vielfachen schneller lädt. Beispielsweise wurden auf der Startseite von becks.de, mit leerem Browser-Cache, Daten in der Größe von 1.3 MB geladen. Mit gefüllten Cache, also bei erneutem Besuch, wurden nur noch Daten von 43 KB geladen. Diese 43 KB waren lediglich das HTML selbst, dem wir als Ablaufs-Datum ein Datum aus der Vergangenheit gegeben haben. Damit suggerieren wir dem Browser, dass diese Datei längst überfällig ist und er sie erneut laden soll und gehen damit auf Nummer sicher, dass alle Änderungen auf der (dynamischen) Startseite auch so beim User dargestellt werden.

Schritt 4: die Andere

Zu guter Letzt haben wir unser Ausgabe-System so angepasst, dass alle Bilder von einer Subdomain (http://static.becks.de) ausgegeben werden. Damit ermöglichen wir dem Browser, mehr parallel ablaufende Anfragen durchzuführen als er es bei nur einer Domain könnte und können somit den Seitenaufbau beim User nochmal etwas beschleunigen.

Damit dieser Artikel nicht arg so theoretisch ist, haben wir euch hier unsere .htaccess als Beispiel eingefügt.

# rewrites
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteCond %{HTTP_HOST} !www.becks.de [NC]
    RewriteCond %{HTTP_HOST} !static.becks.de [NC]
    RewriteRule ^(.*)$ http://www.becks.de/$1 [L,R=301]

    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    RewriteRule ^media/([0-9]+)/(.*)$ /application/cache/$2 [L]

    RewriteRule ^sitemap_becks.xml$ /searches/sitemap [L]

    RewriteRule ^index.php/(.*)$ /$1 [R=301,L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

# media caching
# +++++++++++++++++++++++++++++++++++++++++++++++++

Header unset ETag
FileETag None
<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
    Header set Last-Modified "Fri, 11 Mar 2022 10:10:36 GMT"
    Header set Cache-Control "public, no-transform"
</FilesMatch>

# expires header
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_expires.c>
    # turn on the module for this directory
    ExpiresActive on

    # set default - not active due caching of pages
    #ExpiresDefault "access plus 24 hours"

    # cache common graphics
    ExpiresByType image/jpg "access plus 1 months"
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/png "access plus 1 months"

    # cache CSS
    ExpiresByType text/css "access plus 1 months"

    # cache other filetypes
    ExpiresByType text/javascript "access plus 1 months"
    ExpiresByType application/javascript "access plus 1 months"
    ExpiresByType application/x-shockwave-flash "access plus 1 months"
</IfModule>

# compressing header
# +++++++++++++++++++++++++++++++++++++++++++++++++

<IfModule mod_deflate.c>

    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml

</IfModule>

Wer mehr zu diesem Thema wissen möchte dem sei die Seite askapache.com empfohlen, welche sehr ausführliche Artikel, Anleitungen und Beispiele enthält und auch uns als Hilfe diente.

Um dieses Problem zu beheben und euch an der Lösung teilhaben zu lassen, beschreiben wir, wir ihr das Layout selt in wenigen Schritten ändern könnt.

Schritt 1:
Als erstes öffnet bitte die index.php im Order typo3conf/ext/templavoila/mod1.

Schritt 2:
Geht dann zu Zeile 1408. Dort ersetzt ihr folgenden Inhalt:

foreach ($cells as $cell) {
	$headerCells[] = vsprintf('<td width="%4$d%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell);
	$contentCells[] = vsprintf('<td %2$s width="%4$d%%" class="tpm-content-cell">%5$s</td>', $cell);
}

$output = '
<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
	<tr>' . (count($headerCells) ? implode('', $headerCells) : '<td>&nbsp;</td>') . '</tr>
	<tr>' . (count($contentCells) ? implode('', $contentCells) : '<td>&nbsp;</td>') . '</tr>
</table>
';

durch diesen hier:

foreach ($cells as $cell) {
	//$headerCells[] = vsprintf('<td width="%4$d%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell);
	//$contentCells[] = vsprintf('<td %2$s width="%4$d%%" class="tpm-content-cell">%5$s</td>', $cell);
	$contentCells[] = '<tr>' . vsprintf('<td width="100%%" class="bgColor6 tpm-title-cell">%3$s</td>', $cell) . '</tr>'; // header cell
	$contentCells[] = '<tr>' . vsprintf('<td %2$s width="100%%" class="tpm-content-cell">%5$s</td>', $cell) . '</tr>'; // content cell
}

//$output = '
//	<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
//		<tr>' . (count($headerCells) ? implode('', $headerCells) : '<td>&nbsp;</td>') . '</tr>
//		<tr>' . (count($contentCells) ? implode('', $contentCells) : '<td>&nbsp;</td>') . '</tr>
//	</table>
//';

$output = '
	<table border="0" cellpadding="2" cellspacing="2" width="100%" class="tpm-subelement-table">
		' . (count($contentCells) ? implode('', $contentCells) : '<tr><td>&nbsp;</td></tr>') . '
	</table>
';

Schritt 3:
Fertig! Nun braucht ihr nur noch die entsprechende Seite im Backend anschauen und euch davon zu überzeugen

Ihren Browser individuell anpassen? Das hat Firefox mit “Personas” möglich gemacht. Auf der Seite getpersonas.com kann man mit der Maus über ein kleines Vorschaubild navigieren und Firefox verkleidet sich in ein komplett neues Design. Mit einem Klick auf “Wear It” ist dieses Design dauerhaft auf deinem Firefox installiert.

Eine klasse Idee und extrem einfach. Deshalb hat sich coma Gedanken gemacht, wie man ein “Persona” auf der eigenen Seite integrieren kann. Mit dieser Methode können Seiten über den definierten Anzeigebereich hinauswachsen und mit dem Design des Browsers verschmelzen, was  zu einem ganz neuen Surf-Erlebnis führen würde.
Dieser Blogeintrag hat ein “Persona” integriert, das man, wenn sie man der Maus über das obige Bild des Eintrags fährt, angezeigt bekommt.

Dazu sollte die Seite, die man dafür nutzen möchte, als “vertrauenswürdig” im Browser gekennzeichnet sein. Das muss jeder Seitenbesucher selbst einstellen.

Hier eine kurze Anleitung:

• Navigieren Sie im Browsermenü auf “Extras” und anschließend auf “Einstellungen…”.
• Makieren Sie den Reiter “Sicherheit” und klicken Sie auf den Button “Ausnahmen”.
• Geben Sie hier eine Seite an, die ein Persona anbietet (hier “www.comander.de”) und bestätigen Sie dies mit dem Button “Erlauben”.
• Klicken Sie im Anschluss auf “Schließen” und bei den Einstellungen auf “OK”.
• Wenn Sie mit der Maus über das obige Bild fahren, sollten Sie das “Persona” sehen können.

Wer selber ein Persona auf seiner Seite nutzen möchte, schaut sich am besten diesen Artikel an: Personas Previewing Code

Viel Spaß beim Programmieren.

Es gibt aber trotzdem ein Problem: Es ist die Bahn! Und wie bei der Bahn so üblich stimmt der Zeitpunkt einfach nicht. Wenn diese Aktion Gegenwind zu denen im Netz beheimateten Stuttgart 21 Gegnern sein soll, werden die Befürworter der Bahn nicht ausreichen, um dem jetzt schon auf der Wall stattfindenden Parolenwettstreit gegen den Neubau des Bahnhofes irgendeine Form von Gegengewicht zu geben.

Gerade noch stand die Bahn in der Kritik angeblich über diverse Agenturen Stimmen und Posts in Social Media für ihren viralen Pro-Stuttgart-21-Kampf eingekauft zu haben, nun wagt sie sich in einem kaum zensierbaren Medium mit lustigen Spielen an die Öffentlichkeit.

Bisher werden die massive Kritik an Stuttgart 21 und die vielen negativen Posts zu Pünktlichkeit und Preisen noch höflich ignoriert. Anfragen zum Ablauf der Gewinnspiele werden aber sehr reizend beantwortet. Das ist leider keine wirkliche Strategie, wahrscheinlich aber die einzige Möglichkeit der Flut herzuwerden.

Die Bahn ist wieder zu spät. Die Macht von Social Media wurde in der „Kommunikation“ – so man das so nennen kann – zu Stuttgart 21 völlig verkannt, da ist es jetzt ein Fehler ein neues Forum zu bieten und in diesem zu schweigen. Wer den Fans eine Plattform bieten will, muss auch eine für Kritiker bereithalten.

Passend zur Einführung des neuen Smartphones HTC Wildfires startet eine Kampagne, bei der jeder Facebook User seine Idee, für einen gemeinsamen Tag mit seinen Facebook “Freunden” abgeben kann. Am Ende der Aktion wird die beste Idee verwirklicht.
Eigentlich eine nette Idee. Aber möchte man wirklich alle Facebook “Freunde” an einem Ort treffen? Den Ex-Freund, den man eingentlich nie wieder sehen, aber weiterhin den Beziehungssatus auf Facebook überprüfen will, oder die alte Grundschulfreundin, mit der man nur aus Höflichkeit befreundet ist?!

Warum eigentlich nicht?! Die größte Sandburg der Welt zu bauen oder zusammen am Brandenburger Tor ein großes Picknick zu machen klingt ja gar nicht schlecht…

Lange Zeit schien München das Mekka für alle Mülltrennfeinde aus dem trennungsgeplagten Umland zu sein, in dem die verschiedenen Müllsorten quasi manuell auf eigens eingerichtete, euphemistisch als „Wertstoffsammelsstellen“ bezeichnete Lager getragen werden müssen.

Warum trennen was zusammen gehört, war die hauptstädtische Devise und so wurde der komplette Hausmüll schön in die neu gebaute Verbrennungsanlage gekarrt. Inzwischen findet auch hier ein Umdenken statt und letztlich ist auch die Mehrheit der coma Mitarbeiter davon überzeugt, dass Mülltrennung erstmal der richtige Weg ist (solange es keine  vollautomatische Trennung gibt).

Maßgeblich für den Sinneswandel in der Redaktion verantwortlich ist natürlich die Kampagne des Abfallwirschaftsbetriebs München. In dieser wird schön veranschaulicht, welche semantischen Katastrophen durch die unsachgemäße Trennung zusammengesetzter Nomen entstehen können. Pfui!

10 / GUI – User Interface von Clayton Miller

Bei der Flashconference 2010 hat Clayton Miller seine bemerkenswerte Vision eines neuartigen Bedienkonzeptes für die Nutzung von Desktop PC´s vorgestellt. Das 10/GUI funktioniert durch Multitouchinteraktion mit beiden Händen und bis zu zehn Fingern. So ist es dem Benutzer möglich mehrere interaktionen gleichzeitig auszuführen.

10 / GUI VIDEO

ERGONOMIE

Bei Touchscreens ist – wie der Name schon sagt – der Screen und das Touchpad zusammengefasst. Das ist schön und gut, aber für längere Arbeiten nicht geeignet, da entweder der Nacken oder der Touch-Arm belastet wird.

Das 10/GUI ist vom Screen getrennt und ermöglicht dadurch dem User die Hände bequem auf dem Tisch in einer Ruhehaltung abzulegen. So wie wir es bei der Mouse kennen.

SOFTWARE

Da es in den gängigen Betriebssystemen noch schwierig ist mit einem Touchpad zu navigieren hat sich Miller auch Gedanken über eine benutzerfreundliche Benutzeroberfläche gemacht die auf das 10/GUI abgestimmt ist. “Con10uum” genannt. Dabei gestaltet er das Windowverhalten von Desktopapplikationen um.

Fenster werden nicht mehr unordentlich übereinander, sondern horizontal nebeneinander angeordnet. Die fenster nehmen sich Kontextabhängig ihren Raum und verdrängen andere Fenster nach links und rechts.

Die Fenster lassen sich dann mit drei Fingern verschieben und skalieren. Mit vier Fingern kann man durch alle Anwendungen scrollen und aus der Reihe der Anwendungen herauszoomen und hineinzoomen. Natürlich ist es dann auch möglich mit beiden händen gleichzeitig zu arbeiten. Also z.B. mit der einen Hand aus allen Anwendungen rauszoomen und gleichzeitig Fenster verschieben oder skalieren.

Zoomt man aus den Anwendungen komplett heraus, bekommt man eine Thumbnailansicht aller Anwendungen.

Für den Aufruf des Startmenüs und des Menüs der aktiven Anwendung dienen zwei Tasten, die seitlich neben dem Touchpad angebracht sind.

Das Konzept ist noch nicht ganz ausgereift und fraglich ob es in der Form je auf den Markt kommt.

Ich bin ja mal gespannt

Quellen:

http://www.10gui.com

Auf der Suche nach einem geeigneten Tool war es uns nicht nur wichtig, dass dieses einfach zu bedienen sein sollte, es sollte weitere Kriterien erfüllen:

Das Ergebnis sollte klickbar sein, für den Kunden sollte es möglichst einfach sein, sein Feedback abzugeben, das Tool sollte bestenfalls automatisch einen Strukturbaum generieren, auch mal umfassenden Inhalten auf einer Seite Platz bieten und Textformatierung ermöglichen.

Die Fülle an Programmen und Tools machte es uns nicht leicht. Wir pickten uns einige Tools heraus, die wir genauer unter die Lupe nehmen wollten.

Bei einem ersten Praxistest fielen dabei gleich einige raus, entweder, weil sie wie Adobe Fireworks zu komplex für unsere Zwecke waren, oder wie Balsamiq Mockups für umfangreichere Projekte und Websites dann doch zu wenig Funktionalitäten bieten und nicht professionell genug wirken.

Vier Favoriten haben wir nach der Vorauswahl genauer getestet:

Hier schon mal ein kleiner Überblick:

Und jeweils mehr zum “Testergebnis”:

PIDOCO

Dabei hat sich Pidoco leider nicht bewährt. Wirkte es zwar erst vielversprechend, so stellte sich beim Testen heraus, dass es gar nicht so selbsterklärend funktioniert. Das zugrundeliegende Ebenen-/Layer-Prinzip erschwert unserer Ansicht nach die Erstellung von Wireframes. Zwar kann man das Ergebnis nicht nur als html exportieren, sondern auch als Word-Datei, aber hierbei listet das Programm  auch alle Metainformationen mit auf. Das macht das Dokument als Grundlage für die Abstimmung eher unbrauchbar. Dies und die Tatsache, dass das Arbeiten damit keinen Spaß macht, ließ Pidoco für uns ausscheiden.

Beispiel: Pidoco im Test

FLAIRBUILDER

Die Desktopanwendung FlairBuilder gefiel uns eigentlich auch auf den ersten Blick sehr gut. Intuitive Bedienung, einfache und klare Benutzeroberfläche, ein schlichtes und nicht zu skizzenhaftes Design – ein Tool, mit dem es wirklich Spaß macht, Wireframes zu erstellen. Großer Wehrmutstropfen: Die Abstimmung mit dem Kunden wird einem hier nicht leicht gemacht. Zwar gibt es schon die Option, sich das Ergebnis mit einem Online-Viewer anzusehen, ohne sich FlairBuilder auf dem Rechner zu installieren. Aber wir sahen keine anständige Möglichkeit für Kunden oder auch unsere Kollegen, die Wireframes zu kommentieren. Auch wenn das Tool an sich viele Funktionen bietet und gut zu bedienen ist, ist es somit für uns keine Option.

Beispiel: FlairBuilder im Test

iPLOTZ

Ob webbasiert oder als Desktopanwendungen, iPlotz hat es ganz weit nach vorne in unserem Test geschafft. Das Tool bietet so ziemlich alles, was wir uns wünschten: Intuitive Bedienung, Abbildung der Sitemap, Masterfunktion, flexible Seitengröße, verschiedene Designs, Export als html und pdf und vieles mehr. Auch für die interne Abstimmung eignet sich das Tool dank seiner Kommentarfunktion gut. Schwierig wurde es erst, als wir unser Testprojekt exportierten: Die Navigation war verschoben, Seiten mit viel Content wurden nicht vollständig angezeigt (weder im pdf- noch html-Export). Und auch hier wieder: als problematisch stellt sich die Frage nach der Abstimmung mit Kunden heraus. Denn auch das exportierte pdf kann nur unter bestimmten Voraussetzungen und mit neueren Versionen des Acrobat Readers kommentiert werden. Also auch wenn iPlotz wirklich gut abgeschnitten hat, was Bedienbarkeit und Fuktionalität angeht, leider hat es sich auch in Sachen Abstimmung mit Kunden nicht bewährt.

Beispiel: iPLOTZ im Test

PROTOSHARE

Schon das Demo-Video von ProtoShare wirkt sehr überzeugend. Wie der Name ProtoShare schon impliziert, bietet die webbasierte Anwendung wirklich alles, was zur Erstellung von Prototypen, zur internen und externen Abstimmung nötig ist. Das Tool kann eigentlich sogar noch mehr, als wir uns gewünscht hatten. Denn auch die Entwicklung des Projekts von einfachen Wireframes hin zu Designentwürfen lässt sich hier nachzeichnen.

Bei der Erstellung der Wireframes hat uns gut gefallen, dass sich sowohl das Menü als auch der Strukturbaum automatisch generieren lassen. Neben der Masterfunktion können auch Elemente, sogenannte Clippings erstellt und global verwendet werden. Auf diese „Library“ kann man auch bei folgenden Projekten wieder zugreifen. Auch Metatags für die Suchmaschinenoptimierung können direkt abgespeichert werden.

Zudem lassen sich mit ProtoShare ganz leicht interaktive Elemente wie Pop-Ups usw. erstellen. Auch die Abstimmung lässt sich mit ProtoShare gut regeln. Ob Kollegen oder Kunden, man kann entsprechende Accounts anlegen und Benutzerrechte vergeben. So können alle Beteiligten ihr Feedback abgeben und Themen diskutieren. Zusätzlich kann auch ein Word-Dokument exportiert werden. Hier kann man selektieren, was darin enthalten sein soll (Bereiche, Metatext, Notizen usw.)

ProtoShare hat uns soweit überzeugt, dass wir damit ein Projekt erstellen werden und hoffen, dass es sich auch in der Praxis bewährt!

Beispiel: Protoshare im Test

Beispiel: Protoshare Review Modus

Japan + Social = Mobile

Social Games

Arten von Social Games

Ein paar Grundtypen von SGs sind auszumachen, wobei gerade bei extrem verrückten japanischen Games die Grenzen oft verfließen:

• RPGs (Rollenspiele)
• Sportspiele (Fussballmanager, Tanzspiele… )
• Dekorations-/Shopping-/Bau-spiele  (Farm, Garten, Planet, Aquarium, Laden… etc)
• Kasino/Glücksspiel
• Reine Spass-Spiele wie z.B. “Hirntrainer”

Interaktionen

Social Games basieren auf Interaktionen zwischen Spielern. Viele verschiedene Arten der Interaktion sind denkbar und existieren in Spielen;

• Freundliche Interaktionen:  Schenken eines Gegenstandes, Einladen, Anwerben von Freunden
• Nachrichten; persönliche oder Wall-Posts über Spiel-Ereignisse, Spiel-Fortschritt
• Feindliche Interaktionen: Angreifen, Zerstören etc… (Beispiel: Jemandem einen Hai ins Aquarium setzen)

Diese Interaktionen finden wie erwähnt offline statt. D.h. der andere Spieler muss nicht gerade eingeloggt sein damit ich mit ihm interagieren kann. Dies ist entspricht dem Prinzip, dass man an einem Social Game eher ein- bis mehrmals am Tag für 5 Minuten spielt, statt am Stück 2 Stunden.  So reagiert man auf Ereignisse und Interaktionen anderer Spieler, z.B. wenn man durch eine Nachricht darauf aufmerksam gemacht wird und man gerade Zeit hat, sich kurz einzuloggen.

Technik

Die vorgestellten Games waren alle in Flash(Lite) entwickelt, warum mir auch dieses Thema am Herzen liegt und was es interessant für mich macht. FlashLite wird von vielen Handys unterstützt, “richtiges Flash” (was nicht unbedingt benötigt wird für einfache Spiele) wird ab Version 2.2 von Android unterstützt. Android Handys gibt es im Augenblick nur zwei in Deutschland, diese Zahl wird sich aber im Lauf des Jahres vervielfachen.

Monetarisierung

Wie in der Einleitung erwähnt, ist (auf jeden Fall in Japan) hier Goldgräberstimmung und es werden zweistellige Millionenumsätze gemacht. Im Prinzip haben Spieler der Games die Möglichkeit, mit kleinen Beträgen zusätzliche Gegenstände zu Kaufen. Diese sind entweder dekorativer Natur oder bringen bei einem Entsprechenden Spielprinzip Vorteile, bessere Fähigkeiten für Spieler. Nachdem in Japan eben die Social Networks überwiegend von mobilen Geräten bedient werden, ist hier eine Bezahlung via Handy extrem unkompliziert. Manche Plattformen bieten  eine eigene virtuelle Währung, soz. ein Konto, das man mittels Handy aufladen kann; in einem Game kann der User dann mit dieser spielübergreifenden Währung einkaufen.

Fazit

Auch wenn bei uns der Hype noch nicht komplett ausgebrochen ist, geht auf jeden Fall langsam immer mehr im mobilem Internet. Die nicht-ganz-so-technophilen-wie -die-Japaner Bürger der westlichen Welt fangen langsam an zu verstehen, dass das Internet viel mehr Sinn macht wenn man mobil ist. Dann machen auch soziale Spiele mehr (Un-)Sinn. Und weil Facebook ja nun echt jeder hat, kann man dort im Augenblick schon seine Spielideen testen.

Florian Mühlegg und Stefan Kolbe, zwei Studenten Interaktiver Medien der Filmakademie Baden-Württemberg haben diese Installation auf der FMX 2010 in Stuttgart vorgestellt:

“THE GAP ist ein Augmented Virtuality Adventure Game. In einer interaktiven Rauminszenierung verbindet das Spiel real erfahrbare Objekte mit einem virtuellen Raumerlebnis.
Dabei schlüpft der Spieler in die Rolle eines Forschers, der auf der Suche nach dem magischen Schatz der Xiong-Indianer ein gefährliches Hindernis überwinden muss.”

Das Hindernis, von dem die Rede ist, ist eine 5m lange Hängebrücke, über die es zu balancieren gilt.

Klingt einfach, ist es aber nicht!

Der Spieler trägt eine VR-Brille mit einer Webcam, welche das Sichtfleld des Spielers erfasst und in den Computer einspeist. Dieser ersetzt dann das grün in der Greenbox durch ein 3D-Szenario. Alles, was nicht grün ist, wird nicht ersetzt. Die Position und Blickrichtung des Spielers wird anhand eines Helms mit Infrarot-LEDs und einer Wii-Sensorik erfasst und damit das 3D-Szenario gesteuert.

Somit kann sich der Spieler in dem 3D-Szenario umschauen und seine Sinne werden genial manipuliert.

“Realraum und virtuelle Elemente verschmelzen zu einer “Realität” und schaffen dadurch ein ganz neues Raumempfinden, das auch auf der auditiven Ebene durch ein interaktives Sounddesign spürbar wird – eine neue, immersive Welt entsteht.

Mit einem Head-Mounted-Display, in dem Livebild mit Echtzeit-3D-Bildern kombiniert werden, wird das Abenteuer hautnah erlebbar. Durch das Display kann man die realen Objekte und die virtuelle Umgebung als Einheit wahrnehmen.”

Ich bekam bei dem Anblick jedenfalls ganz schön Höhenangst.