Folgende Situation. Bei jedem Spiel des FV 08 Unterkochen schießen Fans Fotos vom Spiel. Nach jedem Spiel wird ein ausführlicher Spielbericht auf der Website des FV08 veröffentlicht. Da der Mensch ein Augentier ist, soll der Spielbericht durch die Fan-Fotos aufgelockert werden.

Damals, als es Graph API noch nicht gab, habe ich mir die Fotos per Mail schicken lassen, musste die Fotos erst fürs Web formatieren und konnte sie dann auf den Server laden. Das war bei ca. 50 Fotos pro Spieltag doch etwas Arbeit. Doch dann kam Graph API, da viele Spieler und Fans auf Facebook angemeldet sind, sollte der FV08 eine eigene Facebook-Fan-Seite bekommen. Eine solche Fan-Seite zu erstellen ist kinderleicht, nach ein paar Klicks hatte der FV08 also seine eignen Facebook-Seite.

Jetzt müssen keine Mails mehr geschickt werden, sondern die Fotos können direkt auf die Facebook-Seite hochgeladen werden und werden sofort formatiert. Der Aufwand ist also deutlich geringen und somit sind die Fotos auch schneller verfügbar. Insgesamt wurden so über 1000 Fotos hochgeladen. Das geschaffene Angebot wurde auch überraschend gut angenommen. Besonders tolle Szenen oder auch lustige Geschehnisse neben dem Platz werden diskutiert und kommentiert. Wie man auch an den Zugriffsstatistiken erkennen kann sind die FV08-Fans auch auf Facebook sehr aktiv. Die FV08-Website verzeichnet ebenfalls einen Zuwachs an Zugriffen.

Dennoch muss auch an diejenigen gedacht werden, die keinen Facebook-Account haben und auch keinen möchten. Ihnen sollen die Bilder nicht vorenthalten werden. Hier kommt Graph API ins Spiel. Per Graph API kann ich die einzelnen Alben abrufen und die Fotos so auf der FV08-Website anzeigen lassen. Unter der URL graph.facebook.com/128155523865372/photos werden zum Beispiel alle Fotos des Albums „TSG Schnaitheim - FV 08 Unterkochen I“ (ID: 128155523865372) ausgegeben. Die Ausgabe erfolgt als JSON object, dass von einem PHP-Skript verarbeitet wird. Dazu noch ein bisschen HTML und CSS und fertig ist der Spielbericht mit einer Fotogalerie, die von Facebook gefüttert wird: Bezirksliga 27. Spieltag TSG Schnaitheim - FV 08 Unterkochen 1:1

Safari bietet zahlreiche Funktionen um solche tollen Animationen auch ins Web zu bringen. Deshalb dachte ich mir, dass es auch möglich ist vergleichbare Animationen zu erstellen. Ich wollte schließlich die iPhoto-App so gut es möglich ist nachzubauen.

Vorweg das Ergebnis

Leider braucht man den neusten WebKit-Browser, damit alles hundertprozentig dargestellt wird. Mit dem normalen Safari oder mit Chrome funktioniert nicht alles, aber man kann’s damit auch anschauen.

Eine kleine Erklärung

Ich möchte nicht alles im Detail erklären, wenn man möchte kann man sich die CSS- und JavaScript-Datei anschauen. Die 164 Zeilen sind leicht zu überschaubar.

Die größte Herausforderung war die unterschiedliche Größe der Fotos. Das vertikale Zentrieren ist mir nicht gelungen. Auch musste ich max-width und max-height verwenden, was der Safari in Verbindung mit -webkit-transform noch nicht unterstützt. Deshalb sieht das etwas abgehackt aus. Die Stacks sind alle absolut positioniert. Besser wäre es natürlich, wenn sich alles unabhängig von der Auflösung verhält, so habe ich es auf die Breit und Höhe des iPad-Displays angepasst.

Solltet ihr Fragen haben, meldet euch bitte in den Kommentaren.

Lange habe ich darauf gewartet und lange habe ich um einen Google-Wave-Account gekämpft. Seit zwei Monaten bin ich nun stolzer Besitzer eines Wave-Accounts. Und nun? Irgendwie nix los!

Google Wave gescheitert!?

Es wurde von Google aber insbesondere auch von der Community zu dem neuen Web-Trend hochgespielt. Es soll das Kommunikationsmittel der Zukunft werden und Twitter, Facebook und alle anderen sozialen Netzwerke in den Schatten stellen.

Aber aus irgendwelchen Gründen ist nichts los. Ich habe das Gefühl, dass niemand Google Wave benutzen möchte, es scheint als wüssten die Leute nichts damit anzufangen. Dabei war das Verlangen nach einer solchen Kommunikationsplattform bei der Vorstellung sehr groß. Aus allen Ecken war zu hören, dass Google Wave genau das ist, was wir in Zukunft alle benutzen werden. Dennoch wird Google Wave nicht im dem Maße benutzt,

Problem: Geschlossenheit

Ich glaube das größte Problem ist die Geschlossenheit des Systems, also die fehlende Vernetzung. Ganz im Gegensatz zum Erfolgsmodell Twitter ist Google Wave sehr geschlossen. Damit meine ich zum Einem, dass man nur durch eine Einladung eines anderen Wave-Benutzers Zugang erhält. Zum Anderen sehe ich auch ein großes Problem darin, dass man Leute ganz explizit zu einer Wave hinzufügen muss und nicht wie bei Twitter seine Nachrichten bzw. Probleme in die Welt hinaus brüllen kann. Es gibt zwar die Möglichkeit Public-Waves zu erstellen, aber davon wird wohl eher selten Gebrauch gemacht, da diese auch nur schwer auffindbar sind.

Lösung: Offenheit

DIe Lösung liegt auf der Hand. Google Wave muss offener werden. Eine Möglichkeit ist es Google Wave mit anderen Systemen zu vernetzten. Fast jeder neue Webdienst und jede neuere Community bietet eine Möglichkeit sich mit Facebook zu verbinden. Zum Einem um bestehende Freunde einzuladen, zum Anderen um Aktionen, die auf der einen Seite getätigt werden auch auf der anderen Seite zu zeigen. Soll heißen, wenn ich bei Google Wave eine neue Wave starte könnte das auch in meinem Facebook-Profil bekannt gemacht werden. Das selbe bei Twitter. Das ganze natürlich mit einer entsprechenden Nachhaltigkeit, nicht dass der Twitter-Stream nur noch aus Wave-Meldungen besteht.
Durch eine solche Vernetzung würde die Aufmerksamkeit auf Google Wave stark steigen und das Ganze zum Leben erwecken.

Google Wave für Blog-Kommentare

Der nächste Schritt wäre das einbinden von Google Wave auf anderen Webseiten. Als ich zum ersten Mal von Google Wave hörte, dachte ich sofort daran, dass Google Wave ideal für die Kommentarfunktion von Weblogs wäre. Diskussionen wie sie häufig bei strittigen Artikel entstehen wären in einer Wave viel übersichtlicher und die Diskussion kann somit auch viel intensiver und ordentlicher geführt werden. Leider gibt es noch keine mir bekannte Möglichkeit wie sich so was am besten umsetzten lässt.

Internet und so.

Die Killer-App sollte der Browser sein, denn ich möchte mit dem Tablet ins Internet. Wann und wo ich will. Das beinhaltet leider auch, dass man ein Telekommunikationsunternehmen um einen Vertrag bitten muss. Wenn man ihn sich selber aussuchen kann. Denn die Vergangenheit hat uns gelehrt das sowohl iPhone als auch Netbooks nur mit einem 2jährigen Vertrag zu erwerben sind.

Über das Internet möchte ich dann schön aufbereitet News-Artikel abrufen können, auch gerne für einen kleinen Unkostenbeitrag. Ebenso will ich Musik und Filme laden können - sprich iTunes oder eine äquivalente Windows-Anwendung.

Mit der eingebauten Kamera und Bluetooth-Headset möchte ich Skype-Anrufe entgegennehmen können und dabei gleichzeitig im Web surfen.

Einen Platz für Photoshop oder ähnliches sehe ich nicht.

Dimensionen

Welche Dimensionen das Tablet annhemen wird weiß niemand. Ich würde mir sowas um die 12˝ wünschen. Es sollte eben groß genug sein um Websites anzuschauen, oder PDFs, oder Filme, oder so. Dafür sind 12˝ groß genug. Aber trotzdem noch klein genug um es schnell mal die die Tasche zu schmeißen legen.

Tech-Stuff

Der Akku sollte eine längere Zugfahrt inklusive DB-Verspätung überdauern - ich sag mal 7 Stunden. Grandios wäre eine eingebaute Solarzelle, am besten unter dem Display, aber so weit ist die Technik leider noch nicht.

Ein CD/DVD-Laufwerk braucht kein Mensch, sonder nur unnötigen Platz. Einen Nutzen für USB-Slots fällt mir spontan nicht ein, wobei man ja vorsichtshalber einen einbauen kann. Viel wichtiger finde ich einen SD-Karten-Slot um die Fotos von der Digital-Kamera auf das Tablet zu übertragen.

Die eingebaute SSD-Festplatte sollte 120 GB Daten aufnehmen können, das sollte für die digitale Musik- und Film-Sammlung locker reichen. Ansonsten braucht man den Festplatten-Platz nur für ein paar Spiele und das Betriebssystem.

Das Display sollte gut genug sein um auch längere Texte ohne größere Anstrengungen lesen zu können, aber dennoch energiesparend sein. Möglicherweise bietet OLED die Lösung dafür. Habe ich schon Multi-Touch erwähnt? Ich denke es versteht sich von selbst, dass das Gerät mit den Fingern bedient werden wird.

Man darf gespannt sein …

… wie die jeweiligen Ausführungen von HP und Apple aussehen werden und wie viel meiner Wünsche Realitiät werden

Update

HP Slate.

Okay, nachdem Microsoft das HP Slate vorgestellt hat, ist mir noch klarer geworden was ich will, bzw. was ich nicht will. Das Gerät ist mir zu klein. Auf dem Bildschirm lässt sich wohl kaum eine Standard-Tastatur abbilden und gleichzeitig ein Teil des eigentlichen User-Interfaces. Ich denke auch nicht, dass man Windows 7 mit Multi Touch bedienen kann. Ein angepasstes Betriebssystem wäre doch sehr wünschenswert.

Außerdem ist das Teil zu dick, dass muss auch dünner gehen.
Das einzige Positive, das ich aufschnappen konnte, ist die versprochene „lange Akkulaufzeit“.

Design

Startseite von Jung von Matt

Die Gestaltung von Websites wird sich weiterentwickeln. Ganz neue und ausgefallene Designideen werden das Internet prägen. Das liegt zu einem an der immer bessern Unterstützung von CSS3 und HTML5 mit Canvas und ähnlichem, aber auch daran, dass immer mehr Designer sich vom Print-Bereich hin zum Webdesign bewegen und natürlich kreative Ideen mitbringen werden. Ein gutes Beispiel dafür ist die Website von Jung von Matt.

Websites werden für verschieden Endgeräte programmiert werden. Neben dem Smartphones und den Netbooks wird sich noch ein weiteres neues Endgerät geben; das Tablet. Das Tablet, dass wird nach Navigationen verlangen, die groß genug gestaltet sind, damit man sie mit dem Finger bedienen kann.

Social Communities

Soziale Netzwerke werden natürlich weiter wachsen. Ein Großteil der Kommunikation wird über das Web, vermutlich über Facebook laufen, klassische Chats wie ICQ oder MSN verlieren an Bedeutung, da auf Facebook genau so gut gechattet werden kann und warum sollte man eine andere Plattform benutzen, wenn man eh schon auf Facebook eingeloggt ist.

Die Jugendlichen werden langsam verstanden haben, dass man nicht jedes Partyfoto hochladen sollte. Es wird sich ein Verhaltenskodex für Soziale Netzwerke entwickeln. Dazu wird auch gehören, dass man zuerst fragt ob man ein Foto von einer anderen Person hochladen darf.

Was sehr wünschenswert wäre und ich auch für realistisch halte, da es schon ähnliche Projekte gibt, wenn die Netzgemeinschaft wirklich sozial - im Sinne des Wortes - werden würde. Ich denke da an Communitys die eine Möglichkeit entwickeln, wie man Menschen, denen es schlecht geht, helfen zu können. Das müssen keine Spendenaktionen sein. Ich bin überzeugt, dass irgendein schlauer Kopf für dieses Problem eine clevere Idee haben wird.

Verbindung zur Datenbank erstellen

Erste Schritt ist die Herstellung einer Verbindung zur Datenbank. Die Datenbank muss nicht existieren, sie wird quasi selbst hergestellt.

var name = "Quiz";  // Name der Datenbank
var version = "1.0"; // Version
var mydb = openDatabase(name, version); // Herstellung der Verbindung, wichtig als Variable!

Blendet man jetzt die Webinformationen ein sieht man unter dem Reiter Storage, dass eine neue Datenbank angelegt wurde.

Tabelle anlegen

Als nächsten schritt legt man eine Tabelle an.

mydb.transaction( 
	function (transaction) { 
		transaction.executeSql("CREATE TABLE Fragen (id INTEGER, bundesland TEXT, frage TEXT, antwort1 TEXT, antwort2 TEXT, antwort3 TEXT)");
	}
)

Die Variable mydb wurde im ersten Schritt definiert. Danach folgt der Befehl transaction und eine Funktion. In dieser Funktion wird die Tabelle erstellt. Der Befehl lautet executeSql. Darin gibt man den SQL-Befehl ein, das sind im übrigen die gleichen Befehle, die Du möglicherweise aus MySQL kennst. Man hat jetzt also einen Tabelle in der Datenbank erstellt. Im Webinspektor sieht das so aus.

Tabelle mit Inhalt füllen

Die Tabelle muss jetzt noch mit Inhalt gefüllt werden. Das macht man wieder mit einem SQL-Befehl.

mydb.transaction( 
	function (transaction) { 
		transaction.executeSql("INSERT INTO Fragen VALUES (1, 'Nordrhein-Westfalen', 'Wie heißt die Landes­hauptstadt von Nordrhein-Westfalen?', 'Düsseldorf', 'Essen', 'Dortmund')");
	}
)

Noch ein Tipp

Im Safari-Webinspektor kann man auch SQL-Befehle eingeben. Das ist eine super Hilfe, wenn man Befehle testen möchte oder zum Beispiel die aktuelle Tabelle löschen muss. Der SQL-Befehl dazu lautet DROP TABLE. Dieser Editor bietet sogar eine Autovervollständigung.

Daten ausgeben

Die Tabelle ist jetzt gefüllt, als nächster Schritt folgt die Ausgabe der Daten. Dazu braucht man zuerst den transaction-Befehl.

mydb.transaction(
	function (transaction) {
		transaction.executeSql("SELECT * from Fragen where id='1';", [], dataHandler, errorHandler);
	}
);

Dann braucht man eine Funktion (hier dataHandler), die diese Ausgabe verarbeitet. Man bringt die ausgegebene Tabelle erst einmal in ein Array, mit dem man weiter arbeiten kann.

function dataHandler(transaction, results)
{
	var row = results.rows.item(0); // Erstellt ein Array
	var Bundesland = row['bundesland']; // Gibt Bundesland aus
	alert(Bundesland);
}

Ich hoffe Du hast hier einen kleinen Überblick über Offline SQL-Datenbanken bekommen. Was ich mit der Datenbank gemacht habe kannst Du unter dev.augentier.info/landeshauptstaedte/safari/ anschauen.

Den Weblog hatte ich schon länger abonniert, auf die Sendungen bin ich erst später aufmerksam geworden. Die Rede ist vom Trendpiraten Blog. Im Trenpiraten Blog erfährt man als Erstes von den neusten Trends rund ums Internet. Außerdem werden interessante Themen angesprochen. Zum Beispiel hat sich ein Autor die Frage gestellt, ob Twitter die neue Suchmaschine sein wird.

Sendungen

Aber auf was ich eigentlich aufmerksam machen möchte sind die Sendungen. Von ihnen gibt es zwar erste zwei, diese aber in herausragender Qualität. Das liegt nicht nur an der HD-Auflösung sondern vielmehr an der charmanten Moderatorin - ich fühlte mich gleich an Katrin Bauerfeind erinnerte. Weiter trägt die interessante Kameraführung zur Qualität bei. Dazu untermalen noch großartige Grafiken die Sendung.

Und wo bleibt der Inhalt? Na der ist auch großartig ausgewählt und ausgearbeitet. Episode 2 erklärt beispielsweise „Cloud Computing”. Ein sehr spannendes Thema, was wohl unseren Alltag in Zukunft sehr beeinflussen wird. Eine freundliche Männerstimme erklärt „Cloud Computing” zuerst und stellt das kontroverse Thema dann in Frage.

Alles in allem eine grandiose Sendung, die es zu hundert Prozent verdient hat angeschaut zu werden. Also trendpiraten.tv ansurfen und Episode 1 und 2 genießen. Und Podcast abonnieren, um keine Episode zu verpassen.

Runde Ecken & Schatten

Mit CSS2.1 war es sehr kompliziert einem Element einen runde Ecke zu verpassen. Mit border-radius wird das in Zukunft ein Kinderspiel. Ich denke, dass viele Webdesigner sich auf diese Methode stürzen werden und dazu noch dem Elementen einen leichten Schatten hinzufügen werden. Das sind sicherlich kleine Details die einem Webauftritt das gewisse Etwas verpassen können.

Mehrere Hintergründe

Mit der Möglichkeit einem Element mehrere Hintergründe zuzuweisen wird möglicherweise der einfache Webdesigner überfordert sein. Auf der Durchschnitts-Firmenwebsite werden wir diese Methode also nicht sehen. Allerdings bietet das Feature tolle Möglichkeiten, die nach meiner Theorie die kreativen Webdesigner ausgiebig ausprobieren werden und auch tolle Ergebnisse zu Stande bringen werden. Ich freue mich auf bunte private Webseiten mit transparenten PNGs und übereinander gestapelten Hintergründen, die zur Krönung auch noch skaliert werden können.

Mehrere Spalten

Mit CSS3 wird es möglich sein einen längeren Text in mehrere Spalten aufzuteilen. Das sollte besonders die News-Seiten ansprechen. Aber vielleicht findet diese Methode auch in Blogs Einzug, was sicherlich auch interessant werden könnte.

Neue Schriften

Möglicherweise wird endlich das @font-face Einzug erhalten. Diese Eigenschaft gibt es zwar schon CSS2, allerdings schaffte sie nie richtig den Durchbruch. Alle handelsüblichen Browser werden in Zukunft mit der Eigenschaft umgehen und auch einige Schriften, die verwendet werden dürfen gibt es bereits. Deshalb halte ich es durchaus für wahrscheinlich, dass wir in Zukunft weg von Arial und Verdana kommen und neue, abwechslungsreiche Schriften im Web sehen werden.