Mozilla Developer Evangelist – all things open web, HTML5, writing and working together.

Die Präsentation heute war echt genial und sehr unterhaltsam. Seine Slides kann man auch online auf Slideshare ansehen. Einmal durchklicken lohnt sich denn es sind sehr viele schöne Beispiele rund um HTML 5 zu finden:

HTML 5 bringt wirklich sehr viele wunderbare Dinge in den Browser!

Update: Hier noch die Tonaufnahme der Präsentation:

Und noch der Link auf den entsprechenden Blog Artikel von Christian Heilmann.

Die Scroll Clock wurde für das Chrome Experiments entwickelt und auch dort als Projekt veröffentlicht.

Die Chrome Experiments Seite ist eine von Google ins Leben gerufener JavaScript Schauplatz für Google Chromes JavaScript-Engine V8. Projekte die dort veröffentlicht werden laufen fast ausschließlich mit offenen Standards, wie z.B. HTML 5, Canvas oder SVG laufen. Aus diesem Grund können diese Beispiele auch nur in aktuellen Browsern wie Google Chrome oder Firefox 3.5.

Für alle die einen älteren Browser haben können sich die Projekte auch per YouTube Video ansehen. Wie z.B. auch das ziemlich beeindruckende Chrome Experiment Depth of Field bei dem mit 300 kleinen Bällen eine Fläche, ein Kreis oder ein Quadrat gebildet wird. die Umsetzung dieses Projektes ist auch wieder 100% JavaScript.

Schon sehr erstaunlich was man mittlerweile alles mit JavaScript im Browser machen kann. In ein paar Jahren wird man mit offenen Standards wohl auch viel mehr in die Rich Internet Applications auch ohne Fremdsoftware wie Flash oder Java gehen können.

Man kann es aber auch auf dieser Seite selbst versuchen. Allerdings sieht es wohl so aus als würde der Browser besser Tetris spielen können als ich..:(

Insgesamt ist es schon beeindruckend was man mit JavaScript so machen kann. Wer ein bisschen tiefer in die Umsetzung einsteigen möchte sollte sich diesen dazugehörigen Link mal ansehen. Dort kann man direkt ein wenig im JavaScript Code herumspielen und das Programm austesten.

Neben dem visuell ansprechenden Design ist auch sehr schön, dass das verwendete JavaScript mit jQuery ausführlich in einem Tutorial erläutert wird.

Der Name “Lightbox”, unter dem diese Art Bilder dazustellen wohl den meisten bekannt ist, kommt von der ersten sehr populären Umsetzung dieser Darstellung mit dem Namen “Lightbox“. Mittlerweile ist Lightbox in der Version 2 vorhanden und basiert auf den JavaScript Framework prototype zusammen mit script.aculo.us.

Verwendet man allerdings ein anderes JavaScript Framework in seinem Projekt, wie z.B. jQuery oder Mootools, wäre es sehr unangenehm extra wegen Lightbox ein weiteres Framework hinzuzufügen. Aus diesem Grund haben sich eine ganze Menge an sogenannten Lightbox Clones mit den unterschiedlichsten Namen basierend auf den gängigsten JavaScript Frameworks etabliert.
Um jetzt das passende für sich selbst zu finden empfiehlt sich die Lightbox Clone Matrix, mit der man auch nach den gewünschten Eigenschaften Filtern kann:

Das Ergebnis dieser Matrix sieht dann wie folgt aus:

Insgesamt ist die Übersicht der verschiedenen Umsetzungen doch ganz praktisch und ab und an hilfreich, so dass es einen Bookmark wert ist.

Soll z.B. der String “Sonderzeichen ‘#@_ö’ und hier weiterer Text.” in einem Request mit an einen Server übergeben werden und enkodiert den Text nicht kommt beim Server lediglich “Sonderzeichen ‘” an. Der String wird bei dem ersten reservierten oder unbekannten Sonderzeichen, in diesem Beispiel die Raute (#) abgeschnitten.

Verwendet man dagegen die JavaScript Methode encodeURIComponent() wird der String wie folgt enkodiert: “Sonderzeichen%20′%23%40_%C3%B6′%20und%20hier%20weiterer%20Text.”
Mit dieser Enkodierung kommt der Text wie gewünscht beim Server an.

Wen das interessiert oder auch über das Problem gestolpert ist sollte sich auch noch die entsprechende Doku bei SelfHtml anschauen.

Gerade auf dem letzten Blog, Millionär 7, wird in einem der letzten Beiträge erklärt wie man das erreichen kann: Man definiert einen Betrag mit dem man monatlich über die Runden kommt, multipliziert diesen mit 150 um anschließend mit einer Rendite von 8% davon leben zu können. Dort ist die Rechnung 2000 * 150 = 300000 EUR. Hat er also 300000 Euro angespart kann er nur von den Zinsen allein leben und bräuchte nicht mehr zu arbeiten. Das ist das erklärte Ziel.

Nun kommen wir zum eigentlichen Blog Artikel. Ein Kollege von mir, Peter Trumpp, hat vor einiger Zeit in einem Anflug von Entwicklungs- und Tatendrang ein kleines Utility mit der JavaScript Bibliothek jQuery und der Google Chart API Google Visualization API erstellt welches einem genau das oben erklärte Ziel der finanziellen Unabhängigkeit visuell darstellen soll. Herausgekommen ist ein beeindruckendes kleines Utility mit dem Namen “Vermögensrechner” mit dem man ein wenig herumspielen und herausfinden kann wie lange das eigene angehäufte Barvermögen reichen wird bzw. welches Barvermögen man bräuchte um eine finanzielle Unabhängigkeit zu erreichen.

Das Tool habe ich auf einer extra Seite unter der URL http://webthreads.de/vermoegensrechner online gestellt aber auch gleich hier im folgenden eingebettet damit man direkt ein wenig rumspielen kann:

Die Berechnung der einzelnen Werte für den Chart ist einfach gehalten und wird mit JavaScript durchgeführt. Daher kann es auch zu Rundungsfehlern führen was wiederum den Chart selbst beeinflusst. Dieses Verhalten kann man auch in der folgenden Beispielrechnung erkennen:

Beispielrechnung für eine monatliche Bargeldentnahme von 2000 Euro

In dem Millionär 7 Blog wurde beschrieben, das das gesteckte Ziel ist mit 300000 Euro Gesamtvermögen und 8% Rendiete monatlich 2000 Euro zu erhalten und von diesen ohne weitere Arbeit zu leben. Mit der einfachen Rechnung auf Papier müsste der Betrag von 300000 über die Jahre gleich bleiben und die Rechnung somit aufgehen. Nehmen wir diesen Rundungsfehler in der JavaScript Berechnung als Schwankung in der nicht immer gleichbleibenden Rendite und somit sähe der Chart wie folgt aus:

Insgesamt geht der Chart also nach unten und das Vermögen verkleinert sich – sehr ernüchternd. Mit diesem Betrag kann er also 33 Jahre ohne Arbeit leben – die Inflation ist übrigens noch nicht einberechnet. Da eine solche nach unten zeigende Kurve sehr unschön ist schrauben wir ein wenig an einem Parameter uns erhöhen bei gleichen Konditionen das Startkapital um eine positive Kurve zu erhalten. Man benötigt somit 335000 Euro um die Kurve nach oben zu treiben und ist nach den gleichen 33 Jahren wie oben nun bei ca 429000 Euro:

Das ganze sieht schon wesentlich besser aus. Baut man jetzt allerdings eine Inflation von 2,5% ein schafft man mit dem Gesamtbetrag von 335000 Euro nur noch 23 Jahre bis das Geld aufgebraucht ist:

Somit brauchen wir wieder eine Grundkapitalerhöhung um eine positive Kurve zu erreichen. Diesmal muss auf 465000 Euro aufgestockt werden um eine nicht abfallende Kurve zu erhalten:

Die hier dargestellte Rechnung ist sehr einfach gehalten. Die Inflation ist mit konstanten 2,5% und die Rendite mit 8% berechnet. Beide werde sind sehr positiv. Auch wurde kein extra Betrag berücksichtigt der jährlich für z.B. einen Urlaub entnommen wurde. Aber es ist immerhin ganz erstrebenswert überhaupt mal einen Betrag zu sparen und dafür Zinsen zu erhalten ;)

Nun nochmal kurz zurück zu dem eigentlichen Utility. Der “Vermögensrechner” ist mit Hilfe von jQuery und der Google Chart API erstellt worden. Vor allem die Google Chart API ist sehr beeindruckend. Und das man damit auch sehr schöne Utilities erstellen kann hat Peter Trumpp mit seinem Vermögensrechner gezeigt.

Ein kleiner Hinweis am Ende: Der Vermögensrechner hat keinerlei Anspruch exakte Zahlen und Charts aufzuzeigen. Vielmehr ist er eine Demonstration der verwendeten Technologien.
Der Vermögensrechner ist ab sofort unter der URL http://webthreads.de/vermoegensrechner zu erreichen und rechts im Menü unter “Specials” zu finden.

Es besteht auch die Möglichkeit den Vermögensrechner als Google Widget zu installieren:

(Benötigt allerdings ein größeres Layout oder eine eigene iGoogle Seite)

Nun gibt es ein weiteres sehr jQuery Plugin mit dem Namen “Galleria” welches eine sehr schöne Bildergallerie ohne viel Aufwand ermöglicht. Das Plugin ist gerademal 4kb groß und erstellt die Thumbnails (kleine Vorschaubilder) selbst. Im folgenden der Screenshot der ersten Demo:

Um eine solche Gallerie zu erstellen reicht es aus eine normale ungeordnete Liste zu erstellen:

<ul class="gallery">
  <li><img src="i/i01.jpg" title="A caption 1" alt="Image01"></li>
  <li><img src="i/i02.jpg" title="A caption 2" alt="Image02"></li>
  <li><img src="i/i03.jpg" title="A caption 3" alt="Image03"></li>
</ul>

Das das Design auch noch anders gestaltet werden kann zeigt die zweite Demo:

Insgesamt macht das jQuery Plugin “Galleria” einen sehr guten Eindruck und liefert von Haus aus ohne viel Aufwand eine wirklich schöne Bildergallerie. Man sollte sich die URL meiner Meinung nach bookmarken.

Update: Passend zu dem jQuery Them habe ich eben eine Tutorial Reihe auf IBM DeveloperWorks entdeckt: Working with jQuery, Part 1: Bringing desktop applications to the browser. Dort wird eine Einführung in die JavaScript Bibliothek jQuery gegeben und es werden noch weitere Teile hinzukommen.

Sollte man sich für die kleinen Pausen zwischendurch ruhig bookmarken. Und falls man doch ein wenig mehr tun möchte empfiehlt es sich den JavaScript mal genauer anzusehen..

(via bueltge.de)

Und im geöffneten Zustand:

Das ganze kann man sich natürlich auch in einer Demo live ansehen. Auf der Herstellerseite wird auch mit Codebeispielen kurz erläutert wie man dieses Widget einbaut und man kann es auch von dort direkt herunterladen.

Als Einsatzmöglichkeiten könnte zum Beispiel ein Login zu einer Anwendung oder ein News Panel in Frage kommen.

Das ganze wurde unter anderem mit Prototype und Script.aculo.us erstellt und kann sich wirklich sehen lassen.

Blank web pages are fast. Web pages become slow because you put stuff in them;

Und ich muss ihm absolut recht geben =).

Die Präsentation zu dieser (und anderen) Aussage ist zwar aus dem letzten Jahr, könnte aber immer noch für den ein oder anderen ganz interessant sein. Hier die aufgezeichnete Präsentation aus dem Yahoo! Theater.

(vai Darryl Lyon’s Blog)

Neben den verschiedenen Updates und Neuentwicklungen finde ich vor allem die Upload und die Image Cropper Komponente sehr interessant.

Mit der Upload Komponente ist es möglich mehrere Dateien parallel hochzuladen. Ein solches Feature, wie es zum Beispiel in Google Mail zu finden ist, ist eines der besten Features die man mit Hilfe von Ajax und JavaScript lösen kann. In der YUI Upload Komponente wird jedoch Flash als helfende Engine verwendet und somit benötigt man für dieses Feature Flash ab der Version 9.0.45.

Diese Upload Variante wird aktuell schon bei flickr verwendet.

Die Funktion der Komponente Image Cropper habe ich schon bei ein paar verschiedenen Seiten gesehen. Unter anderem auch wieder bei Google Mail wo man sein User Bild hochladen und anschließend in der richtigen Größe eine Fläche ausschneiden kann.

Wie immer bei den YUI Komponenten sind sie sehr gut beschrieben und es bestehen sogar Cheat Sheets (Cheat Sheet Upload, Cheat Sheet Image Cropper).

Neben den über 270 vorhandenen Einzelbeispielen stehen die verschiedenen Komponenten auch in einer Demoanwendung unter dem Namen YUI Example online zum ausprobieren zur Verfügung.

Insgesamt ist es nach wie vor sehr beeindruckend in welchem Umfang und mit welcher Dokumentation diese Bibliothek von Yahoo! weiterentwickelt wird.

Etwas detaillierter ist er in der Ausformulierung der Überschriften:

More specifically, here is a list of Ajax performance issues:
1. Array performance on all browsers in general
2. HTML DOM performance in general
3. Calculating Computed Box Model and Style
4. FireFox: “eval”, Object Creation and “in” Operation
5. “String” Manipulation Performance on IE
6. Safari: “pop” Operation Performance

Und wenn man sich die Zeiten der DOM Operationen in den drei Browsern anschaut und vergleicht sieht man auch direkt den Unterschied zueinander. Interessanterweise ist der Safari wohl am performantesten.

Als Fazit kann man sagen, dass die JavaScript Performance start von der implementierten JavaScript Engine des Browsers abhängig ist. Vor allem hat wohl der Internet Explorer aufzuholen – nicht zuletzt weil das immer noch der meißtgenutzte Browser weltweit ist.

Eine detaillierte Liste zu allen Tests und deren Ergebnissen ist unter dem Artikel im Anhang zu finden.

(via Ajaxian)

Eine solche Entscheidungshilfe könnte der “JavaScript Bibliotheken Performance Test Roundup” von Brian Klug sein. Er vergleicht dort die JavaScript Bibliotheken Dojo (1.0.1), jQuery (1.2.1), Prototype (1.6.0), YUI (utilities bundle) (2.4.0) undProtoculous (1.0.2) (prototype-1.5.1 + scriptaculous-1.7.1).

Die Frage die hier gestellt wird ist: Wie schnell kann eine Bibliothek geladen werden und wie verhält sie sich im gepackten, minimierten oder normalen Source. Aber auch die Frage wie schnell sind die Bibliotheken in einem Browser oder bringt die gepackte Version der Bibliothek etwas wird hier beantwortet.

Als interessantes Ergebnis hervorzuheben ist wohl, dass das Cachen, Minimieren und Zippen von JavaScript Files einen deutlichen Performance Gewinn gegenüber dem Unterlassen dieser Vorteile bringt – vor allem, dass bei diesem Test die Yahoo! Bibliothek ganz oben steht obwohl sie eine beachtliche Größe mitbringt. Auch interessant ist, dass die gepackte Version der Bibliotheken keinen wirklichen Performance Vorteil bringen.

An diesem Test kann jeder mitmachen und alle Testergebnisse gehen in das veröffentlichte Testergebnis direkt ein. Aktuell sind schon über 130000 Tests durchlaufen worden.

(via Ajaxian)

Um das JavaScript nur für den Internet Explorer einzubinden wird die IE-if Bedingung verwendet und dabei bestehen zwei Versionen. Zum einen können der IE 5 und IE 6 zu einem IE 7 kompatiblen Browser erweitert werden:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]-->

Und zum anderen können die IE 5-7 zu einem IE 8 kompatiblen Browser erweitert werden:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]-->

Das Projekt ist bei Google Code gehostet und kann direkt von dort eingebunden werden. Fragen können in der dazugehörigen Google Group gestellt werden.

Neben den HTML und CSS Problemen, die damit gefixt werden, ist die Lösung um ein transparentes PNG darzustellen wohl die schönste Nachricht. Welche Fixes in den CSS Selektoren, CSS Eigenschaften oder HTML im Detail durchgeführt kann auf der Testseite gesehen und auch getestet werden.

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.

Hier noch die Auflösung wie der BMI Wert zu deuten ist:

(Quelle: Wikipedia)

Zu meinem BMI kann ich erfreulich sagen: ich habe kein Untergewicht =)

Auch in diesem Beispiel ist wieder eine nützliche Verwendung von Slidern zu erkennen um das ganze noch mal von einer anderen Seite zu betrachten ;)

Während das obige Vollbildbeispiel mit Flash realisiert ist, ist das folgende rein mit JavaScript umgesetzt worden.

Natürlich ist das erste Beispiel, was auch noch in Vollbild angezeigt wird beeindruckender aber man darf nicht vergessen, dass dazu auch Flash verwendet wurde. Wie das Vorgehen der JavaScript Umsetzung ist beschreibt er in ein paar wenigen Sätzen auf seinem Blog unter dem Titel “Stupid JavaScript Tricks: 3D Panorama”. Wichtig zu erwähnen ist, dass das ein reines experimentelles Spassprojekt ist und daher auch keine Ansprüche auf professionelle Nutzung legt. Zudem läuft es auch nur im Firefox Browser.

Rund um 3D mit JavaScript bestehen noch einige andere sehr interessante Projekte aber dazu kann mehr in einem älteren Artikel auf webthreads.de gelesen werden.

(via bueltge.de)