web2.0 (10)


Google I/O 2011: HTML5 Showcase for Web Developers: The Wow and the How

So Freunde,
ich habe mir am Mittwoch Teile der Google I/O Keynote vom 2. Tag angeschaut.
Echt Wahnsinn, was die Jungs da gezeigt haben.
Nur so am Rande: Am ersten Tag haben die Jungs allen Teilnehmern ein Samsung Galaxy Tab 10.1 geschenkt.
Am zweiten Tag, haben die Google-Typen jedem Teilnehmer ein Chromebook versprochen.

Was ich aber mal richtig gut fand, war die Präsentation der
HTML5 File-API ab 16:34:




What’s your Ninja name

Seitdem ich Christian Heilmann auf der BOA2009 erlebt habe, lässt mich YQL (Yahoo Query Language) nicht mehr los.

Kurz zu YQL: YQL ist eine an SQL angelehnte Abfragesprache für sämtliche Daten im Web.

So liesse sich beispielsweise meine Blog-Startseite mit folgender Abfrage abholen:

select * from html where url="http://blog.cmff.de"

Das Ergebnis kann entweder als XML oder als JSON weiterverarbeitet werden.

Inspiriert durch das Internet-Meme

(gefunden auf Blame it on the voices) habe ich mal eine kleine Fingerübung durchgeführt.

Christian Heilmann, der noch bis zum 1.12.2010 Yahoo! Senior Developer Evangelist ist, hat für YQL einen so genannten OpenTable geschrieben.
So kann man relativ leicht in der YQL-Console seinen echten Namen in einen Ninja-Namen übersetzen lassen.

Da aber die meisten User (die keine Entwickler-Gene in sich tragen) vermutlich mit der Konsole überfordert sind, habe ich mal ein kleines Frontend dafür gebaut:

Einfach in das Textfeld den eigenen Namen eingeben und schon purzelt der Ninja-Name heraus.
Meiner lautet: lutamoshikikato

Wie lautet Euer Ninja-Name?




Greasemonkey-Script: Last.fm Now Playing TweetButton

Manchmal würde ich gerne der Welt draussen via Twitter mitteilen, was ich gerade für Musik höre.
Meistens habe ich aber gerade dann keine Lust den Künstler und Titel des Songs irgendwo in einen Twitter Client zu hacken.

Also habe ich mir ein Greasemonkey-Script geschrieben, was den offiziellen TwitterButton in meine Last.fm Profilseite hackt.

Funktioniert natürlich nur, wenn gerade Musik läuft.
Andernfalls würde ja auch die Bezeichnung „Now Playing“ nur begrenzt Sinn ergeben.

Wenn Ihr Greasemonkey installiert habt, dann könnt ihr das entsprechende Script auf userscripts.org herunterladen.
Achja: Den Sourcecode dazu gibt es auf GitHub




HTC Desire

Vorgestern klingelte um 11.00 Uhr der DHL-Mann bei mir.
Er war gekommen um mir mein neues Handy Smartphone zu liefern. Seit knapp zwei Jahren habe ich ein Nokia N78 besessen.
Ist ein super Handy, aber twittern, Facebook Status updaten und surfen ist echt nicht angenehm mit dem Ding. Ebenso umständlich ist es mal eben einen Schnappschuss auf Twitpic oder Flickr zu posten.
Nach langer Recherche und abwägen von Preisen/Tarifen und dem Lesen von Testberichten war (fast) schon klar, dass bald ein vollwertiges Smartphone her muss.
Nach einigen Testberichten und Tweets von Freunden oder Twitter-Bekanntschaften kristallisierte sich heraus, dass das HTC Desire das Gerät meiner Wahl ist.
Letztes Wochenende hatte ich das Vergnügen, ein HTC Desire in meinen Händen zu halten und einige Dinge auszuprobieren.
Ab da war für mich klar, dass ich das Teil haben muss.

HTC Desire

Zu den technischen Daten von dem HTC Desire schweige ich mich mal aus.
Das könnt ihr auf Myriaden von Websites nachlesen…

Hier mal ein kleiner Erfahrungsbericht nach 2 Test-Tagen:
In der kleinen hübschen Verpackung befinden sich das HTC Desire, Akku, USB-Kabel (ist gleichzeitig auch das Ladekabel), Schnellstartanlleitung und Headset/Kopfhörer.
Nach dem Einsetzen von Sim-Karte und Akku ab an die Steckdose und nach drei Stunden ist das Ding vollständig geladen.

Beim ersten Einschalten wird man ein wenig an die Benutzung des Touchscreens herangeführt.
Danach kann man Wahlweise seinen WLAN-Access Point benutzen oder per APN loslegen.
Anschliessend die Daten des Google-Kontos eingeben und los geht’s.

Zuerst habe ich mich darum gekümmert, den Wust an Kontaktdaten zu ordnen und ggf. Kontaktdaten zu verknüpfen.
Klappt recht gut über das Telefon selbst, bequemer ist es jedoch die Daten im Google-Konto zu pflegen.
Ein schönes Feature ist zum Beispiel, dass man Kontakte aus sozialen Netzwerken abrufen kann und mit den Kontakten im Telefon verknüpfen kann.
So braucht man sich nicht um Geburtstage, Adressen, Profilbilder etc. kümmern. Ausserdem sieht man in der Kontaktliste direkt das letzte Twitter-Update oder den aktuellen Facebook-Status.

Ein wesentlicher Vorteil (für manche auch ein Nachteil) von Smartphones ist die Fülle an Apps, die einem zur Verfügung stehen.
Um neue Apps zu installieren kann man die Android Market App verwenden oder den Online-Dienst Appbrain.
Bei Appbrain kann man übrigens die Login-Daten des Google-Kontos verwenden (openId). Dort kann man die gewünschten Apps in eine Liste packen und mit der Appbrain-App bequem aufs Telefon syncen. Danach kann man die Apps (oder Widgets) auf sieben individuell anpassbaren Home-Screens platzieren.
Nützliche Apps sind zum Beispiel Quick Settings, NetCounter und der EStrongs File Explorer.

Das HTC Desire ist zwar deutlich schwerer als mein Nokia N78, liegt aber echt gut in der Hand und fühlt sich wertig an.
Die Bedienung mag vielleicht nicht ganz so intuitiv wie beim Iphone sein, macht aber riesig spass und ist ziemlich flink.
Dabei ist es egal ob man Fotos durchschaut, auf Webseiten surft oder durch RSS-Feeds navigiert.
Selbst das Tippen auf der virtuellen Tastatur geht nach einer kurzen Eingewöhnung superschnell.

Permanentes online sein per WLAN und ständiges rumspielen mit dem Gerät führt natürlich dazu, dass der Akku einigermaßen fix am Ende ist.
Bereits nach 24 Stunden war der Akku fast leer.
Mal sehen wie es sich verhält, wenn ich das HTC Desire komplett nach meinen Wünschen eingerichtet habe.

Heute Abend werde ich es nochmal ein wenig pimpen und mit einer Schutzfolie ausstatten.
Häufiges Fingerwischen und Pinch-to-zoomen macht nämlich aus dem Schminkspiegel schnell ein schmieriges Irgendwas…

Hier sind mal ein paar Bilder von meinem neuen Spielzeug

GalleryBild














Google Wave – Mein Eindruck

Der erste Post für dieses Jahr.
Von Google Wave haben einige von Euch bereits gehört, vielleicht sogar mal ausprobiert.

Wie viele Andere die sich bereits zu Google Wave geäussert haben, war auch ich anfangs überhaupt nicht davon überzeugt.
Zugegeben, im Moment bin im Moment immer noch nicht ganz überzeugt.
Zumindest sehe ich Google Wave definitiv noch nicht als vollständigen E-Mail Ersatz an.

Es gibt allerdings ein (für mich) großes „aber“.
Nämlich dann, wann immer man sich mit 2 bis n Personen für einen Termin, ein Event etc. absprechen möchte.

Ein paar Freunde und ich planen beispielsweise eine kleine LAN-Party im Februar.
Dafür müssen natürlich einige Dinge organisiert werden.
Essen, Spiele, Location, Teilnehmer etc. können über Google Wave prima geplant werden.
Man kann ganz easy Bezug auf diverse Aussagen nehmen und alle Beteiligten sind sofort auf dem gleichen Stand.

So muss man nicht im E-Mail Client nach der Nachricht mit dem Betreff „Re: Re: Re: Aw: Re: LAN-Party“ suchen.
Man öffnet die Wave in Google Wave und hat alle relevanten Infos sofort zur Hand.
Mit anderen Google Services wie dem Kalender oder Maps hat so Google Wave auf jeden Fall die Nase vorn.

Finde ich für solche Zwecke echt knorke.
Auch wenn ich mich jetzt wiederhole. Als Ersatz für die E-Mail-Kommunikation sehe ich es noch nicht.




Spiegel Online Design-Relaunch

Woran merkt man das man älter wird?
Man fängt an sich für Politik, Nachrichten etc. zu interessieren.
Seit drei oder vier Jahren konsultiere ich regelmäßig Websites, die Nachrichten aus aller Welt und aus dem Rheinland veröffentlichen.
Das Nachrichtenportal Nummer eins für mich ist hier Spiegel Online.
Spiegel Online bietet sachliche Nachrichten, twittert, facebookt und hat einen eigenen Youtube Channel

Jetzt hat Spiegel das Design der Website geändert.
Für mich ist das neben dem Content natürlich auch als Web Developer interessant.
Das grobe Layout ist ziemlich gleich geblieben.
Trotzdem wirkt die Seite auf mich schlicht, übersichtlich, aber frischer als zuvor.
Jede Rubrik ist klar abgegrenzt vom restlichen Inhalt.

Schön sind auch die AJAX oder Web 2.0 Elemente, die man betrachten kann, wenn man sich für weitere Inhalte der einzelnen Rubriken interessiert.

Damit verteidigt Spiegel Online aus meiner Sicht die Anlaufstelle Nummer eins für Nachrichten im Netz. Zumindest für mich…




Social-Networking mit Last.fm

Ich wurde letztens Angesprochen, was denn dieses Last.fm genau sei und wie man diesen HTML-Klotz, den ich hier unten rechts im Blog habe auf seine Seite einbindet.

Nun Last.fm ist ein soziales Netz mit dem Schwerpunkt auf Musik.
Man verbindet sich quasi durch die Künstler, Musikrichtung etc. die man hört. So lernt man ständig neue Bands und Leute kennen.
Um sich zu vernetzen muss man sich natürlich erstmal bei Last.fm registrieren.

Die meisten Last.fm User, präsentieren die Musik die sie hören in ihrem Profil mittels eines Scrobbler-Plugins für Ihren Media-Player.
Ich tue das zum Beispiel mit Winamp und dem audioscrobbler-Plugin. Ebenso kann man mit iTunes, Amarok, Songbird und vielen anderen Playern scrobblen.
Im Build-Bereich von Last.fm gibt es mannigfaltige Tools zum scrobblen oder um die letzten Tracks von Freunden, Bekannten auf dem Desktop anzuzeigen.

Hat man nun das passende Plugin für den eigenen Player gefunden, kann man fröhlich drauf los scrobblen. Will man nun seine zuletzt abgespielten Songs auf einem Blog publizieren, so kann man sich entweder ein Widget erstellen und den Code an der gewünschten Stelle im Blog (oder sonstwo) einfügen.
Alternativ kann man natürlich schauen, ob die Blog-Software, die man benutzt ein entsprechendes Plugin bereitstellt.

Wer ein wenig mit der großen Menge an Künstlerdaten, Albuminformationen usw. eine eigene musikaffine Anwendung programmieren möchte, dem sei die recht gut dokumentierte API ans Herz gelegt.




Firefox Plugin: Ubiquity

In den Mozilla Labs gibt es seit einiger Zeit das Ubiquity-Plugin.
Das Plugin versucht einen neuen Ansatz der Benutzerführung.
So bietet es über einen frei wählbaren Shortcut seine Dienste an.
Nach der Installation kann man bequem bei Google, Yahoo, Wikipedia, IMDB, Amazon suchen. Teilweise werden einem die Ergebnisse direkt im Plugin-Fenster angezeigt.

Weitere Funktionen sind u.a. das Interagieren mit markierten Textstellen. Diese lassen sich schnell per GoogleMail verschicken. Einzelne Wörter können markiert werden und per „define $wort“ spuckt Ubiquity die entsprechende Definition aus.
Wetter und Google Maps gehören ebenso zum Standard-Repertoir des Plugins.

Fazit:
Auf jeden Fall einen Blick wert. Erste Schritte werden im MozillaWiki erläutert.




Twittern – Eine Seuche

Tja, in letzter Zeit hört man viel über Twitter.
Twitter ist ein Microblogging-Dienst, der ähnlich wie SMS funktioniert.
Man hat gerade einmal 140 Zeichen um sich mitzuteilen.

Derzeit bin ich dabei, den richtigen Dienst für mich ausfindig zu machen.
Twitter.com ist ganz nett Identi.ca ist aber auch nicht verkehrt.
Vor allem, weil man bei Identi.ca bequem über Jabber (z.B. Gajim) die Twitter-Nachrichten posten kann.

Danke an el*loco der mir Identi.ca empfohlen hat.

Populärstes Twitter Opfer: AIRBUS-UNGLÃœCK AUF TWITTER




jQuery Tutorial – Teil 1 – Tabelle dynamisch erweitern

Ich bin vor kurzem auf folgendes Problem gestossen:
Es existiert eine ganz normale HTML-Tabelle mit Daten.
Dort soll nun per jQuery das Ergebnis aus einem HTML-Fragment sozusagen injiziert werden.

Wir haben also folgende Beispiel-Tabelle:

<table width="50%" class="jquery_table">
<tr class="expand_region">
<td class="plus_minus">+</td>
<td> 01</td>
        <td> 02</td>
        <td> 03</td>
        <td> 04</td>
        <td> 05</td>                                        
    </tr>
    <tr>
        <td> 10</td>
        <td> 11</td>
        <td> 12</td>
        <td> 13</td>
        <td> 14</td>
        <td> 15</td>                                        
    </tr>    
  </table>  

Um diese mit dem Ergebnis aus dem Fragment zu befüllen (und zwar zwischen den beiden bestehenden TRs) kommt folgender kurzer Code zum Einsatz.
Als erstes das jQuery-Framework einbinden:
[geshi lang=javascript][/geshi]
Hier ist der eigentliche Code:

$(document).ready(function() {
    $(".plus_minus").click(function() {
    if($(".plus_minus").text() == "+"){
        $(".plus_minus").text("-");
        $.get("append.html", "html", function(data){ 
        $(".expand_region").after(data);
        });    
    } else {
        $(".plus_minus").text("+");
        $(".dynamic").remove();
    }
    });
});

Was genau passiert hier?
Zunächst einmal wird gewartet, bis das komplette HTML-Document gerendert wurde.
Anschliessend wird dem Element mit der Klasse „plus_minus“ ein click-Ereignis hinzugefügt.
Wenn der Text dieses Elements „+“ lautet, dann wird der Text zunächst in ein „-“ umgewandelt.
Per GET-Methode wird das HTML aus der Datei „append.html“ geholt und die Callback-Methode mit den Daten aufgerufen.
Dem Element mit der Klasse „expand_region“ (hier die erste TR) wird mit der Methode after() der Inhalt von „append.html“ an die TR angehängt.

Ansonsten, wenn also die Daten bereits anhängen und aus dem „+“ ein „-“ wurde, dann wird das Element mit der Klasse „dynamic“ (hier: die TR, die in append.html steht) mit der Methode remove() entfernt.
Hinweis: Wenn man das mit mehreren Fragmenten implementiert, so würden mit diesem Code alle injizierten Elemente entfernt.

Wenn man also nur ein bestimmtes injiziertes Fragment entfernen möchte, so müsste man auf IDs setzen oder entsprechende Klassen definieren. Je nach Zweck und belieben.

Um noch ein besseres gefühl für das hier beschriebene zu geben, noch 2 Links:
Online Demo
Beispiel im ZIP-Archiv