Immer mehr Leute nutzen statt ihrem Computer lieber ihr Smartphone um im Internet Informationen zu finden. Je zugänglicher diese Informationen für den Besucher sind, desto höher ist die Chance, dass er die Seite nicht sofort wieder verlässt. Dazu gehört auch, dass er nicht erst den Text per pinch und zoom vergrößern muss, sondern dass dieser sich an das Display anpasst. Eine mögliche Lösung dafür ist ein Design, dass sich der gewünschten Breite des Geräts anpasst: responsive web design.

Responsive Web Design in Aktion

Media Queries

Wenn man mit einem modernen Browser auf MarcTV surft und man die Größe des Browserfensters verändert, dann ordnen sich die Elemente bezüglich ihrer Größe und Position neu an. Dies funktioniert grundsätzlich über die CSS3 media queries. Diese erlauben das Schreiben von Bedingungen für das Erkennen der Pixelbreite des Browserfensters direkt im CSS Code:

@media screen and (max-width: 320px) {
  #wrapper{
    width: 320px;
  }
}

Media Queries haben den Vorteil, dass man sie direkt im Stylesheet einsetzen kann und dass sie nicht mal Javascript benötigen. Und sie werden von allen modernen und vor allem von iOS und Android Browser voll unterstützt. Apple empfiehlt den Einsatz von Conditional CSS sogar explizit in ihrer Dokumentation.

Code to standards, not devices

via Anne van Kesteren

Mobile Geräte und selbst Personal Computer entwickeln sich permanent bezüglich ihrer technischen Parameter wie Auflösung und Pixeldichte weiter. Dazu kommen noch Geräte wie der Amazon Kindle oder die Boxee Box, die bezüglicher dieser Eigenschaften über ihre eigenen speziellen Parameter verfügen. Sie haben aber eine Sache gemein: Die Bildschirmauflösung.

Das ist zwar kein Web Standard aber immerhin benutzt man dabei nicht User Agent um das Gerät zu identifizieren.

Welche Auflösungen?

Dazu muss man wissen, dass z.B. ein iPhone im vertikalen Portraitmodus 320px Breite ausgibt und im horizontalen Landscapemodus 480px. Das liegt an der hohen Pixeldichte des iPhone und vergleichbaren Geräten. Deswegen wird einfach die reale Pixelbreite halbiert.

Bezogen auf Android, iOS und MacOS bin ich auf folgende media queries gekommen. Diese funktionieren auch für die von mir getesteten Androidtelefone sehr gut.

@media screen and (max-width: 479px) {
  /* iPhone Portrait width: 320px */
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  /* iPhone Landscape width: 480px */
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* iPad Portrait */
}
@media screen and (max-width: 1024px) {
  /* < iPad Portrait */
}
@media screen and (min-width: 1260px) {
  /* big screens */
}

Wie man sieht, definiert dies Blöcke von CSS Anweisungen für verschiedenen Auflösungen. Darin kann man dann jeweils seine Styles für die entsprechende Auflösung anpassen. Nehmen wir an, ein Wrapper Element wäre vorher so definiert gewesen:

#wrapper{
  width: 960px;
}

Dann könnte man es so für die jeweilige Auflösung anpassen, in dem man den Style für Geräte mit einer Auflösung von max. 479px überschreibt:

@media screen and (max-width: 479px) {
  html #wrapper{
    width: 320px;
  }
}

CSS vereinfachen

Wenn man so an die Sache heran geht, dann merkt man schnell, dass man am Ende redundanten Code vor sich hat. Für mein Theme habe ich einen ähnlichen Ansatz gewählt, wie bei meiner Inspirationsquelle informationarchitects.ch: Man arbeitet so weit es geht ohne explizite  Pixelangaben für alle Elemente, die man verändern will sondern nutzt den Wrapper, an dem sich dann alle Elemente ausrichten.

Dafür muss aber leider die im IMG Tag angegeben Pixelbreiten entfernt werden, damit man die Bilder mit CSS mit 100% in der Breite entsprechend justieren kann. Das habe ich über ein einfaches jQuery Script gelöst. Die vollständige CSS Datei mit den css media queries ist deswegen recht überschaubar. Leider gibt es noch einige Sonderfälle durch Plugins weswegen ich dort teilweise Dinge per ! important überschreiben musste.

Gleiches HTML für alle

Man sollte sich auch bewusst machen, dass das  HTML der Webseite immer gleich bleibt und nur die CSS Styles die Elemente beeinflussen. Dies steht im harten Kontrast zu einer eigenen HTML Version, die über den User Agent ausgeliefert wird. Deswegen sollte man sehr viel Zeit darauf verwenden, das HTML zu optimieren und sich gut überlegen, was man über die Template Engine in das DOM reinläd.

Definition des Viewports

<meta
name="viewport"
content="user-scalable=0, width=device-width, initial-scale=1, maximum-scale=1">
</meta>

Der viewport Tag mit den entsprechenden Attributen gehört in den head-Bereich der Webseite. Er steuert wie Geräte wie das iPhone und Android die Webseite initial darstellen. Bei allen anderen Browsern zeigt er keine Wirkung weswegen ich ihn permanent im Template einsetze.

• user-scalable=0
  Der Benutzer kann nicht mehr Zoomen
• width=device-width
  Die Breite des Viewports wird auf die interne Auflösung des Gerätes eingestellt. Dies muss nicht zwangsläufig die native Auflösung des Displays sein.
• initial-scale=1
  Der Zoom wird auf den Standardwert gesetzt.
• maximum-scale=1
  Der höchstmögliche Zoom wird auf den Standardwert gesetzt.

Schriftgröße in Prozentangaben

font-size: 100% ist nicht zu groß sondern entspricht egal auf welcher Plattform der Schriftgröße, die er Browser als normalgroß ansieht. Dies ist auf einem Mobiltelefon oder E-Reader unter Umständen in Pixel umgerechnet etwas völlig anderes als auf einem PC. Die Schriftgröße liegt hier im Blog ist je nach Auflösung sogar über 100% und wird bei über 1240px sogar auf 120% angehoben. So kann man auf auch großen PC Monitoren oder der Boxee Box die Texte angenehm lesen.

Linearisierung

Auf meinen Übersichtsseiten sind die Artikelbilder gekachelt in einem Raster angeordnet. Auf einem kleinen Display funktioniert das natürlich nicht mehr. Deswegen habe ich dort und an vielen anderen Stellen das Layout linearisiert. Alle Elemente laufen auf den schmalen Versionen deswegen untereinander. Das gilt auch für Label für z.B. das Kommentarformular und die Artikeltools unter den Artikeln. Meistens musste ich nur ein float: right gegen ein float: none: austauschen.

Javascript

Manche Javascript-Features machen auf der kleinen Versionen keinen Sinn. Dazu gehören u.a. Scripte wie colorbox, für die ich eine Ausnahme einbauen musste:

if($(window).width() > 1023){
/* load colorbox(); and so stuff for non-mobile devices */
}

Fazit

Während man bei einer echten mobilen Ansicht in den Templates kleinere Bilder laden kann, so ist dies über den Ansatz über CSS nicht möglich. Im Blog werden immer die 960px breiten Teaserbilder geladen. Egal ob sie auf dem iPhone auf 320px skaliert werden oder nicht. Dadurch müssen deutlich mehr Daten übertragen werden als nötig. Eine Alternative für WordPress ist WP Touch, dass eine komplett eigene Oberfläche für Gesten von Touchdisplays läd.

Dafür ist die Technik ist verhältnismäßig einfach umzusetzen und zu pflegen. Bevor man eine eigene mobile Version der Seite mit eigenem Template erstellt, kann man diesen Task recht bequem im Frontend erledigen. Außerdem muss man so keine zwei Templates oder gar Plattformen pflegen. Es kommt natürlich auch stark auf die Größe und Anforderungen an die Website an. Gleichzeitig bleibt das Look-and-Feel der Webseite erhalten.

Der Hauptgrund für die Implementierung hier im Blog war aber, dass ich mittlerweile selber mehr auf dem iPhone surfe als auf einem normalen PC. Das mag vielleicht zuerst absurd klingen aber in meiner Freizeit habe ich eher die Zeit und ein iPhone bei mir um schnell Dinge auf Wikipeda nachzugucken oder auch mal einen Artikel aus meinem Feedreader oder Social Networks zu lesen. Und je mehr ich mit dem Mobiltelefon surfe, desto wohler fühle ich mich auf Seiten, die für mobile Geräte angepasst sind. Besonders bei Elementen, die eine Interaktion von mir erwarten wie Formulare. Deswegen musste eine konsistente mobile Version her. Deswegen konnte ich mir nichts einfacheres Vorstellen, als per CSS ein paar Media Queries dafür zu benutzen.

• Mehr Media Queries Beispiele – mediaqueri.es
• CSS3 media queries – webdesignerwall.com
• Responsive Web Design – A List Apart
• Kritische Auseinandersetzung mit den media queries – codecandies.de

While I was refactoring my MarcTV Theme from scratch I realized that many features of my theme are a too heavy to be put into the functions.php. So I removed the code from there and packed them into stand-alone wp plugins. Now I release them to the public for everyone to use.

MarcTV Reply Button

Adds a reply button after every 2nd level thread with jQuery.

• Download MarcTV Reply Button – wordpress.org

MarcTV XBOX 360 Voice Blog

Displays the latest entries of your 360 voice gamerdna blog either as a widget for your sidebar or as a customizable function. The xml data from 360voice is being pulled twice daily with wp_cron.

• Download MarcTV XBOX 360 Voice Blog – wordpress.org

MarcTV Comment Quicktags

Displays a bold, italic, add link and quote button on top of the comment form.

• Download MarcTV Comment Quicktags – wordpress.org

MarcTV jQuery Video Embed

Embed youtube, vimeo and google videos by just adding a css class to a link which points to the url of a video page.

• Download MarcTV jQuery Video Embed – wordpress.org

MarcTV Art Directed Blogging

Adds the ability to add a custom field with a reference to a css file and generates a css namespace with the class ‘.artdirected’. This plugin also adds a jquery switch to the top right corner to deactivate and activate the custom styles.

• Download MarcTV Art Directed Blogging – wordpress.org

MarcTV Achievement Unlocked!

Displays a graphical achievement message at the bottom of an article with a custom field “achievement” set.

• Download MarcTV Achievement Unlocked! – wordpress.org

MarcTV Flickr Bar

Displays a list of images of a flickr account.

• Download MarcTV Flickr Bar – wordpress.org

MarcTV YouTube Bar

Displays a list of videos of a youtube account.

• Download MarcTV YouTube Bar – wordpress.org

MarcTV jQuery Colorbox

Loads the jquery colorbox plugin http://colorpowered.com/colorbox/ and the marctv colorbox skin.

• Download MarcTV jQuery Colorbox – wordpress.org

All my plugins are being used in my blog and thus are compatible with WP Minify and WP Cache. They are developed under GPL2 using NetBeans and MAMP and deployed with svn.wp-plugins.org. You are able to update them from within wordpress itself whenever there will be a new version available.

This procedure makes it quite easy for me to maintain my own blog and keep everything up-to-date. I am able to de-activate these feature if I don’t need them anymore. But the most important reason to degenerate functionality from the theme was that I am now able to change my theme and keep these feature.

Stay tuned for more marctv wp plugins and theme releases to come.

MarcTV WordPress Plugins – wordpress.org

Sprachen und Programmiersprachen sind meiner Meinung nach Grundverschieden. Sprachen sind dazu da mit Menschen zu kommunizieren während Programmiersprachen vom Menschen geschaffen wurden, zum mit Maschinen zu kommunizieren. Beides verfügt über ein eine gewisse Anzahl von Konzepten wie Grammatik, Vokabeln und Regeln. Ich behaupte: Sprachen sind durch unsere Sozialisierung einfacher zu lernen als Programmiersprachen. Dafür verfügen Programmiersprachen über weniger Konzepte. Deswegen sind Programmiersprachen zwar easy to learn – but hard to master.

Schach - Einfaches Set von Regeln aber es ist schwer damit ein Spiel zu gewinnen

Auch wenn ich nicht gerade der Programmiergott 3000 bin, bilde ich mir ein, dass ich ein gewisses Verständnis der Programmierungsprachen besitze. Viele Sprachen wie php, Javascript, Java und ActionScript haben diverse Konzepte gemeinsam: Variablen, Objekte, Arrays, Schleifen, Typzuweisungen usw. Nach meinem Verständnis ist das so wie bei einem Schachspiel: Die Regeln, nach denen die Figuren gezogen werden dürfen sind schnell erklärt: Der Bauer darf immer nur ein Feld nach vorne oder bei der Eröffnung zwei Felder nach vorne bewegt werden – außer er wirft eine Figur. Dann wirft er diese auf der diagonalen und besetzt den Platz der geschlagenen Figur. Bei einem Springer gelten wiederum andere Regeln als bei der Figur der Dame usw. Deswegen unterscheiden sich Sprachen stark von Programmiersprachen. Bei Englisch, Deutsch, Japanisch oder Latein sind die Regeln wesentlich komplexer und die Vokabeln sorgen dafür, dass man sich versteht – und nicht die Regeln wie man diese Vokabeln beknüpft. Bei der Programmierung kommt es darauf an die Regeln und Konzepte zu beherrschen. Die Vokabeln sind dabei sekundär während bei der menschlichen Sprache die Vokabeln das primäre Merkmal sind.

Oder etwa nicht?

Die GoogleMail-Nutzer unter euch haben es sicherlich schon vor längerer Zeit gemerkt: GoogleMail hat  Themes. Leider sind diese alle samt ziemlich hässlich. Aber der lustige Fuchs des Teahouse-Themes auf der iGoogle-Startseite ist zurück. Man bekommt über die GoogleMail-Themes nun einen Einblick in das Leben in seinem kleinen Haus. Und hier kommt meine verrückte Idee und ein kleiner einfacher Wettbewerb ins Spiel.

Hässlich, ich bin so hässlich. So gräßlich hässlich. Ich bin der Hass!

Da das letzte Gewinnspiel mit der Gausschen Summenformel wirklich Spaß gemacht hat und dazu noch für erstaunliche Ergebnisse gesorgt hat habe ich schon die ganze Zeit überlegt was ich als nächstes machen kann. Diesmal sollte es nichts mit Programmieren zu tun haben sondern Kreativität erfordern und für jeden umsetzbar sein. Ich habe mich schon immer gefragt, was der kleine Fuchs wohl den ganzen Tag lang denkt, wenn er mit dem Boot raus auf den See fährt. Die Worte könnt ihr ihm nun in den Mund legen.

Der interaktive Flash-Comic.

Aufgabe

Beginnt den Kommentar wie ich es unten vorgemacht habe einfach mit Er sagt: und schon taucht dies als Text in der Sprechblase Denkblase im Comic auf. Der geistreichste und/oder witzigste Kommentar gewinnt!

Zu gewinnen gibt es ein T-Shirt vom diesjährigen Barcamp, das von Johannes gesponsert wurde und einen original (!) Oblivion-Anhänger des gleichnamigen Spiels The Elderscrolls 4 – Oblivion. Und nun: Auf zu den Kommentaren! Stichtag ist der 18. Dezember um 10 Uhr. Dann gibt es auch den Sourcecode des Comics für alle.

Falls er zu lange “nachdenkt”, einfach Seite neuladen und hoffen. Ich hatte keine Zeit und Lust noch Fehlermeldungen einzubauen. Und für alle Freunde von iGoogle gibt es natürlich noch das schöne iGoogle MarcTV Gadget. Wie versprochen gibt es hier nun die FLA und AS-Datei zum Webcomic:

• wpCommentXMLComicParser.zip (1 MB)
• WPcomments.as – Als phps-File für Syntaxhighlighting

Das Video der Siegerehrung
Und natürlich hat Jan, der Gewinner des Oblivion-Anhängers, noch ein Video mit samt seinem Gewinn veröffentlicht. Schön, dass er so eine schöne Verwendung dafür gefunden hat.

Das Gewinnervideo des Oblivion-Anhängers

In der letzten Zeit habe ich gefallen an einer speziellen Form des Bloggens gefunden: Moblogging. Ich finde die Idee dahinter wirklich genial immer und überall seine Eindrücke per Foto mit dem Handy im Internet zu publizieren. Das Prinzip ist einfach: Vom Mobiltelefon wird eine eMail an meine Webseite geschickt. Die Betreffzeile der Mail wird zum Titel und das Foto wird passend zugeschnitten und in die Seite entsprechend integriert. So entsteht langsam eine kleine visuelle Repräsentation meines Lebens.

Das neue Moblog-Widget unten auf der Startseite

Nette Leute wie Fabian oder Attila haben seit jeher nur Fotos in ihren Blogs gepostet. Dank Internet-Tarifen für Mobiltelefone ist diese Art des Publizierens auch erschwinglich geworden und dank entsprechenden Plugins für WordPress bzw. webbasierten Diensten auch für jedermann technisch nutzbar. Das Moblog ersetzt natürlich in keinster Form vollständige Blogeinträge aber ist grundsätzlich eine nette Ergänzung.

Nachdem es hier bei meiner aktuellen Arbeitsstelle immer abgedrehter wird und manche Leute sich schon freiwillig mit Dingen wie Haskell am Wochenende beschäftigen. Anstatt sich mit der frisch gekauften PlayStation Portable aufs Sofa zu setzen wird dann erstmal eine Randgruppen-Programmiersprache trainiert. Nun wurde aber eine neue Dimension erreicht: Wir sind bei der Gaußschen Summenformel angelangt. Damit es diesmal aber nicht langweilig wird verpacke ich das ganze in ein Gewinnspiel bei dem auch meine Leser wirklich etwas gewinnen können.

Hurra, Hurra. Der Ron ist da.

Der Ron hat wieder zugeschlagen. Diesmal stellt er in dem Video am Ende dieses Artikels eine Frage die es zu beantworten gilt. Der Gewinner bekommt nichts anderes als eine original Requisite von meiner Praktikumszeit bei Game One: Den echten Captain N-Gürtel aus der Sendung. Das schicke Ding würde mir bei eBay zwar tausende von Euros einbringen aber was macht man nicht alles für seine treuen Leser. Der Gewinner wird von mir benachrichtigt und bekommt das modische Accessoires frei Haus von mir zugeschickt. Noch ein Hinweis an meine Kollegen die sich vielleicht wundern werden, warum ich so viel aus dem Video raus geschnitten habe. Ich glaube, dass im Netz kein Video länger sein darf als 60 Sekunden. Ansonsten wird es schnell langweilig und viele gucken so etwas nicht zu Ende. Deswegen diese absolut kurze und knackige Version. Viel Spaß beim mitmachen.

Gewinnspiel: Gaußsche Summenformel

Hinweis: Damit nicht jeder einfach auf Wikipedia surft und schlicht die Formel kopiert, lasse ich hier die kreativste und am schönsten ausgeschmückteste Antwort gewinnen. Diese wird von Ron selber am Freitag, dem 10.10. 2008 gekürt.

Weiterführende Links

• Haskell bei ZEIT Online
• Gaußsche Summenformel in Wikipedia

In meinem Medieninformatik BA-Studium durften wir uns in einer Vorlesung namens Algorithmen und Datenstrukturen durch die funktionale Programmiersprache Haskell quälen. Das macht man einmal und dann nie wieder. Haskell ist praktisch der Nerd unter den ohnehin schon uncoolen Programmiersprachen. Was Lynx unter den Browsern ist, das ist Haskell unter den Programmiersprachen. Und ich habe eine erschreckende Feststellung gemacht: Haskell ist nicht tot – Es lebt.

Meine Haskell-Lernunterlagen während meiner Lernphase in der Uni

Ich gebe zu, ich habe mir selber gerade Lynx für den Mac installiert. Tipp: Unbedingt UTF-8 einschalten in den Optionen. Aber das guckt man sich dann drei Minuten und schließt das Terminal dann wieder. Aber man beschäftigt sich nicht zum Spaß am Wochenende damit anstatt ein Videospiel zu spielen oder ein Buch zu lesen. Das machen wohl nur Menschen, deren Hirn wohl permanent durch die “trivialen” Programmiersprachen wie Java und PHP unterfordert ist. Und er sitzt nur ein Büro weiter. Viel Spaß mit dem nun folgenden Video. Zu sehen sind insgesamt drei Leute von denen eine Person mit allen Mitteln nicht in das Video möchte. Man sieht in trotzdem kurz. Deswegen besondere Aufmerksam bitte.

Skandalvideo: Haskell am Wochenende

Weiterführende Links

• Hugs 98 – Der Haskell Interpreter für endlosen Spaß

AJAX ist ein Universalreiniger und gleichzeitig eine Abkürzung für eine Webtechnologie namens Asynchronous JavaScript and XML. Damit ist es möglich angezeigte Inhalte dynamisch auf Webseiten zu verändern ohne die komplette Seite neu laden zu müssen. Das Ergebnis ist wie die AJAX-Oberfläche von GoogleMail eine Webseite die mehr wie eine Applikation als eine klassische Webseite reagiert. Damit habe ich mich privat im Kleinen etwas beschäftigt und dabei ist der MarcTV Browser entstanden.

Der MarcTV Browser™

Es hat mich immer geärgert, dass ich in meinem eigenen Blog nicht bequem durch die mittlerweile beachtliche Zahl an Beiträgen surfen kann. Ein Versuch dies etwas komfortabler zu gestalten war die neue Zeitreisen-Funktion in Flash die rechts unter dem Suchfeld zu finden ist. Der Stöbern-Button beherbergt seit heute jedoch den neuen in AJAX, XML und OO-PHP5 programmierte MarcTV Browser™.

Ein kleines Flowchart

Ich wollte unbedingt mal selber ohne irgendwelche Frameworks oder APIs etwas mit AJAX programmieren. Deswegen habe ich mir gedacht, ich experimentiere mal etwas damit herum. Heraus gekommen ist der Browser, den ich wahrscheinlich vornehmlich selber nutzen werde denn dafür war er ursprünglich gedacht: Für mich ganz allein. Ich habe auf jeden Fall allerhand gelernt. Sicherlich ist es nicht gerade ein Paradebeispiel für eine AJAX-Anwendung aber irgendetwas musste ich ja schließlich machen um rein zukommen. Wozu ich keine Lust mehr hatte war ein Fallback für den Internet Explorer 6.0. Es wären nur ein paar CSS-Weichen gewesen aber dafür sollte alles im Internet Explorer 7.0 wunderbar funktionieren. Leute mit MacOS X und dem Safari könnten mir vielleicht berichten ob es dort auch funktioniert. Vielen Dank an Joern für den eMail-Support in Sachen AJAX und auch an Christian Mücke für die Inspiration für den Hover-Effekt auf den Bildern.

White & Nerdy von “Weird Al” Yankovic

Manchmal habe ich solche Programmier-Schübe. Ich setzte mich dann einen kompletten Tag von morgens bis abends mit einer Jogging-Pause vor den Rechner und programmiere solche Dinge. Es ist wie eine Sucht und macht mir Spaß ohne Ende. Spätestens jetzt passt leider das Image des Typen White & Nerdy von “Weird Al” Yankovic Song zu mir. Seufz

Weiterführende Links:

• Simple AJAX Example
• Back-Button in AJAX
• Drop-Down-Menü mit CSS und (fast) ohne Javascript
• Idee für den Hover-Effekt geklaut von der Top-Navigation von coldheat.de
• AJAX Loading Gif Generator
• White & Nerdy von “Weird Al” Yankovic

Letztes Jahr zu Weihnachten gab es für alle treuen Leser ein MarcTV-Gadget für iGoogle und ein MarcTV-Gadget für Netvibes . Diesmal verschenke ich in diesem Jahr etwas schönes, dass sehr wahrscheinlich nur für ein paar freakige Blogschreiber und Webdesigner interessant sein könnte.

Testbilder in der Lil’Gal 2

Ich wurde schon öfters gefragt, ob ich nicht mal die Flash-Bildergalerie veröffentliche. Ich habe immer gesagt, dass es von mir zu schlecht programmiert ist, als dass ich das öffentlich im Netz sehen möchte. Seit meinem Aufenthalt im Hamburg habe ich es aber nochmal von Grund auf neu programmiert und benötigt kaum CPU-Zeit mehr und hat einen viel schöneren und übersichtlichen Actionscript-Code der endlich die Tweenklasse aus Flash 8 benutzt.

Nicht AS3 OO aber immerhin ohne "enterFrame" und solche Dinge

Weiterhin verfügt Lil’Gal 2 über ein php-Counterscript, welches die Zugriffe auf die Bilder mitschreibt und interaktiv in der Galerie anzeigen kann. Viel Spaß damit und vielleicht hilft es jemandem. Ich würde mich bei Einbindung in eure Webseiten über einen Link und Nennung der Domain www.marctv.de freuen. Für Probleme bei der Installation stehe ich gerne zu Verfügung. Frohe Weihnachten euch allen.

Weiterführende Links:

• lilgal.zip
• MarcTV-Google-Gadget
• Netvibes-Gadget