• jQuery – A library whose elegance vastly exceeds anything else on the market to the extent it has redefined the Javascript landscape, has excellent performance, came on the scene with superb documentation.

• Firebug – The tool that increased my web programming productivity by a factor of 3.

• Web Developer Toolbar – Before Firebug, there was Web Developer Toolbar, an excellent way to inspect the page state that is still useful at times.

• The Ajax Design Pattern – Yes, JJG didn’t come up with anything new and people were doing it before, but this was a “right time, right place” case where the name immediately spawned a massive community of people sharing ideas and experiences.

• Firefox – Browser + Detailed Settings + Tabs (credit Opera) + Plugin Mechanism = developer’s best friend.

• View Source – The ability to look under the covers, responsible for rapid accumulation of knowledge in web apps.

• StackOverflow – Increasingly becoming the no-brainer search result for programming problems and a vast improvement over the cruddy SEOtastic train wrecks that went before it.

Und hier noch die fehlenden Links in der Aufzählung: jQuery, Firebug, Web Developer Toolbar, The Ajax Design Pattern, Firefox Browser, View Source (Strg-U im Firefox ;), StackOverflow.

Variante B:

Der Unterschied zwischen Variante A und Variante B ist hauptsächlich der Screenshot von dem eigentlichen Tool in Variante A und ein Link für den Download von Picasa. Variante B zeigt lediglich einen Button für den Download.
Ich habe geschätzt, dass Variante A die bessere ist, weil man das Produkt direkt sehen und sich somit etwas darunter vorstellen kann. Gewonnen hat allerdings Variante B. Es wurden 30% mehr Downloads verzeichnet als Variante B online war.

Google empfiehlt verschiedene Varianten des Layouts auszuprobieren und zu messen. Es gibt entsprechende Tools dafür. Als kleine allgemeine Vorgabe geben sie vier Tipps:

• Tip #1: Pass the 8 second test: Der Besucher muss innerhalb von Sekunden die Aussage der Webseite erkennen müssen.
• Tip #2: Tell them what’s in it for them: Was bekommt der Besucher wenn er sich darauf einlässt?
• Tip #3: Use compelling images: Verwende z.B. ein Produktfoto anstatt einem allgemeinen Werbefoto oder einen Button anstatt einen Link.
• Tip #4: Close the sale: Gib einen klaren nächsten Schritt an, so dass der Besucher nicht lange suchen muss.

Aber Google weißt noch darauf hin, dass die Vorschläge auf jede Seite individuell angepasst werden müssen. Jede Seite ist anders und hat andere Ziele. Am besten ist man untersucht die verschiedenen Varianten und verwendet am Ende einfach die erfolgreichste ;).

Hier noch einmal der Link zu dem Artikel auf dem Google Blog.

Die deutsche Picasa Startseite sieht übrigens dem Artikel und den Tips entsprechend so aus:

Eine wirklich sehr schöne Anleitung wie man eine Präsentation gestaltet und strukturiert wird in der Präsentation “Death by PowerPoint” sehr gut dargestellt:

Passend dazu wurde bei Slideshare schon vor einiger Zeit die beste Präsentation 2008 gekürt und gewonnen hat die folgende Präsentation “THIRST” (Durst):

Eine Präsentation richtig gut zu gestalten ist schon mal der erste Schritt in Richtung perfekte Präsentation. Leider liegt da immer noch das eigentliche Präsentieren vor einem und muss auch erst einmal gemeistert werden ;).

Aber an den beiden obigen Präsentationen kann man schon mal sehr gut sehen wie eine perfekte Präsentation in Form der Folien aussehen kann.

Mit diesem ist es einfach möglich sein mp3 Dateien direkt im Browser abspielen zu können ohne das zusätzliche Software nötig ist. Dazu muss lediglich ein HTML Link direkt auf die Audio Datei zeigen und das Media Player JavaScript eingebunden werden.

Link zu den Audio Files:

<a href="example1.mp3">My first song</a>
<a href="example2.mp3">My second song</a>

Media Player JavaScript einbinden

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Neben den Links erscheint nach dem erfolgreichen initialisieren ein Play Button in Form einer Grafik. Klickt man diesen an erscheint der Yahoo! Media Player.

Eine Demo wie das ganze live aussieht kann hier gefunden werden. Man kann dort zwar kaum was lesen (jedenfalls ich) aber man sieht den Link, den Play Button und nach dem klick darauf auch den Media Player. Das ganze sieht sehr vielversprechend aus.

Auf dem Yahoo! Developer Blog ist ein Artikel erschienen der noch eine Features des neuen Players erläutert. Die wichtigste Frage ist wohl ob Flash verwendet wird oder nicht. Die Antwort ist, dass der Player selbst nur JavaScript und HTML besteht. Die Brücke zu dem Abspielen eines Audio Files muss aber immer noch mit Flash erledigt werden. Der ursprüngliche Media Player war eine reine Flash Version und somit hat sich die grundlegende Technik nicht weiter verändert. Für diesen Flash Player besteht auch eine einfach Konfigurationsschnittstelle und kann auch sehr einfach eingebunden werden:

Mit der neuen Version ist das einbinden ebenfalls sehr einfach, wenn nicht sogar einfacher, und man muss kaum etwas tun um diesen Player zu nutzen. Zudem hat er nicht das typische Flash Layout.

Das man Musik oder sonstige Audio Files auch rein mit Flash sehr einfach abspielen kann wurde auch schon ausführlich auf O’Reilly digital media beschrieben.

Nun steht also nichts mehr im Wege seine selbst komponierten Musikstücke der Welt auf der eigenen Webseite darzubieten.

Vor gut 1,5 Jahren habe ich selbst angefangen eine kleine Anwendung zu schreiben welche diesen ersten Schritt vereinfachen sollte, aber das Tool leider nie online gestellt. Dann kam Google selbst und hat einen Google Maps Wizzard veröffentlicht, mit dem an sich das Grundgerüst generieren lassen konnte. Seit ein paar Tagen allerdings hat Google das Einbetten einer ausgewählten Karte noch sehr viel vereinfacht. So ist es jetzt möglich mit zwei Schritten den Code für eine Karte erstellen zu lassen um ihn anschließend ganz ohne das bisher notwendige Erstellen eines Google Maps API Keys auf der eigenen Seite zu verwenden.

1. Schritt: Den gewünschten Ort/Punkt auf bei Google Maps heraussuchen und “URL zu dieser Seite” anklicken:

Diese URL kann dann auch gleich noch ein wenig verfeinert werden. Dazu einfach den Link “Eingebettete Karte anpassen und Vorschau anzeigen” anklicken. Es öffnet sich ein Popup mit Vorschau in dem man noch die Größe einstellen kann:

2. Schritt den erstellen Source Code in die eigene Seite einbetten. Die besonderheit hier ist, dass man für diesen Source Code keinen Google Maps Key mehr erstellen muss. Folgender Source Code wurde bei mir erstellt:

<iframe width="500" height="350" frameborder="no" scrolling="no"
  marginheight="0" marginwidth="0"
  src="http://maps.google.com/maps?f=q&hl=de&geocode=&q=mainz,+deutschland&...">
</iframe>
<br/>
<a href="http://maps.google.com/maps?f=q&hl=de&geocode=&q=mainz,+deutschland&..."
  style="color:#0000FF;text-align:left;font-size:small">
  Größere Kartenansicht
</a>

Und so sieht dann das eingebettete Ergebnis aus:

Allerdings sie noch erwähnt, dass man einiges mehr mit Google Maps und der dazugehörigen Google Maps API machen kann. Dazu reicht auch schon ein kleiner Blick in die Google Maps API Dokumentation.

Für die einzelnen Arten bestehen schon viele Lösungen, wie zum Beispiel bei der Yahoo User Interface Library die TabView Komponente oder für jQuery das Tabs Plugin. Ein weiteres sehr schönes Beispiel für die Implementierung von Tabs und deren Daten direkt auf der Seite liefert uns die JavaScript Bibliothek Control.Tabs, welche wiederum auf Prototype basiert. Im folgenden der Screenshot wie das fertige Tabs Beispiel aussieht, wobei das Layout natürlich von jedem selbst definierbar ist.

Das schöne an dieser Bibliothek ist der wenige Aufwand der betrieben werden muss um solche Tabs zu erstellen. Im folgenden Bild ist Source Code um die Tabs des eben gezeigten Beispiels darzustellen zu sehen und man merkt, dass sehr klein und übersichtlich ist:

Wenn man diese Art Tabs zu erstellen mit anderen vergleicht so ist das doch eine sehr schnelle und einfach Lösung ohne viel dafür tun zu müssen – außer natürlich die Bibliothek einzubinden. Diese kann man direkt hier herunterladen oder einfach die Seite der Bibliothek besuchen. Dort können diese Beispiele auch noch einmal live begutachtet werden.

Insgesamt eine wie ich finde sehr schöne und simple Lösung Tabs zu erstellen.

(Vielen Dank an Jörg Zintel für diese Info)

Zu bemerken ist, dass sich der Internet Explorer 7 ein wenig anders verhält als noch in der Version 6. So kann es sein, dass Effekte ausbleiben oder das Design leicht verschoben ist. Zum ersten mal auf das Problem gestoßen bin ich, als ich in einem Projekt erstaunt bemerken musste, dass JavaScript Code, der schon für den IE angepasst wurde, im IE7 nicht lief. Aber was tun für diese Fälle, denn installiert man sich den Internet Explorer 7 ist die Vorgängerversion verschwunden und man kann nun nur noch für den IE7 schauen ob der entwickelte Code läuft.

Das Problem liegt darin, dass alle Internet Explorer immer auf die gleichen Registry Einträge verweisen und einen gleichen Pfad für die dll’s verwenden. Installiert man also einen aktuellen IE, so übernimmt der neue Browser exakt den Platz des alten und überschreibt Registry Einträge sowie dll’s – einen Uninstallier gibt es nicht.

Im Internet bestehen einige Anleitungen wie man sich den IE7 standalone installieren kann, was ich auch zuerst versucht habe. Leider musste ich feststellen, dass mit der einzigen Anleitung mit der es bei mir funktioniert hat man bei der standalone Version des IE7 auf einige Funktionen verzichten muss. So bleibt das Hauptmenü verschwunden und man hat kein Contextmenü. Das ist natürlich auch in der Anleitung vermerkt. Andere Installationsanweisungen entpuppten sich als übelst kompliziert und am Ende hat es nicht funktioniert.
Die Lösung dieses Dilemmas und für mich bisher funktionierende Verwendung ist den Internet Explorer 7 ordentlich zu installieren und somit erst einmal den IE6 zu “verlieren” und anschließend sich die älteren Versionen zum testen als Standalone Versionen zu installieren. Einen sehr schönen Installer für alle Internet Explorer Versionen von 3.0 bis 6.0, bei dem man selbst kaum etwas beachten muss, ist auf TredoSoft zu finden, wo auch die Anleitung für die Standalone Version des IE7 zu finden war.

Mit diesem Installer (hier der Direktdownload – 10.6 MB) ist es sehr einfach sich mehrere Internet Explorer zu installieren.

Hier noch einmal im Kurzdurchlauf die Schritte:

1. Internet Explorer 7 installieren
2. Internet Explorer All Versions Installer herunterladen
3. Installer ausführen und Browser selektieren, welche standalone installiert werden sollen

Da diese Art beide Browser zu installieren eigentlich in einer Minute zu erledigen ist, ich aber deutlich mehr benötigt habe um das herauszufinden, dachte ich mir ich schreibe das kurz hier nieder.

Also viel Spass mit tabbed Browsing im IE und dem Ausführen beider Internet Explorer parallel und vor allem beim gerade Rücken der HTML, CSS und JavaScript Angaben für einen weiteren Browser…