Lightboxen im Überblick – oder Popup´s im Web 2.0

Anfangs noch Trend und neu, heute weitverbreitet und fast jeder User hat sie schon mal gesehen, Lightboxen. Die netten kleinen Javascript gesteuerten Widgets zum betrachten von Bildern, Filmen, Flash-Dateien oder ganzen Seiten.

In diesem Post will ich versuchen euch einen möglichst großen Überblick über die Lightbox, welche auf den gängigen Javascript-Frameworks aufbauen, und ihrer Ableger zu verschaffen.
Momentan sind mal die ersten 15 Lightboxen eingetragen. Der Post wird jedoch in den nächsten Tagen und Wochen ständig wachsen. so, keep watching.

QFocuser – AJAX widgets mit der Tastatur ansteuern

Das Navigieren durch Applikationen mittles der Tastatur ist ein wichtiger Bestandteil in allen Bereichen der useability und accessibility.
Daniel Steigerwald hat sich der Problematik angenommen, welche entsteht sobald mehr als ein AJAX widget auf einer Seite vorhanden sind und eine kleine eigenständige Bibliothek namens QFocuser geschrieben.

Momentan liegt QFocuser in der Version 0.95 vor und läuft auf IE6/7, FF2/3, Safari, Webkit, Opera und Chorme.

Die wichtigsten Features von QFocuser im Überlick:

• erlaubt es dem Widget key events abzufangen wenn es den focus bekommt
• Der Fokus kann für jedes Element aktiviert werden
• löst focus und blur events aus (so das z.b. eine Tabellenzeile nicht länger gehighlighted bleibt wenn man ausserhalb der Tabelle klickt)
• Ermöglicht es das Widget über Tab anzusteuern

Eine Demo des ganzen findet man hier.

Beispielcode:

1
2
3
4
5
6
7
8

  var focuser = new QFocuser(widgetContainer, {
                onFocus: function(focusedEl) { .. add highlighted class or whatever }
                onBlur: function(focusedEl) { .. remove highlighted class or whatever }
        });
        // attach your own keys listeners
        $(focuser.getKeyListener()).addEvent('keydown', e.g. handleArrows);
        // when your widget decided to set the focus (and then receive key events)
        focuser.focus(tableRowForExample);

zu finden ist das gesamte Projekt bei Google Code.

Mozilla Bespin – webbasierter Code-Editor

Es regt sich was in den Mozilla Labs, dem zu hause für experimentelle Projekte bei Mozilla. Dort stellt Mozilla Bespin vor. Einen freien, in JavaScript geschriebenen, Code-Editor welcher im Browser bedient werden kann.
Das schöne an Bespin ist, dass jeder Anwender den Editor weitestgehend seinen Bedürfnissen anpassen kann.

Die Köpfe hinter dem Projekt sind, unter anderem, die beiden Ajaxian.com Gründer Ben Galbraith und Dion Almaer.
Mit der Entwicklung von Bespin geht Mozilla den nächsten logischen Schritt in Richtung SaaS (Software as a Service) und macht somit eine Entwicklungsumgebung
für derartige Webandwendungen online verfügbar.
Viele Vorteile des Saas-Modells sind natürlich auch für Webentwickler interessant. Schneller Zugriff auf alle Projekte von Überall, problemlose Zusammenarbeit mit anderen Entwicklern und vieles mehr.

Bespin liegt momentan, als früher experimenteller Prototyp,  in der Version 0.1 vor und ist nur ein Anfang. Ziel von Bespin soll es sein ein offenes, erweiterbares und webbasiertes Framework zum erstellen von Code zu werden, welches die Produktivität von Entwicklern erhöht.

Die wesentlichen Features im Überblick:

• Echtzeit-Collaboration:
  Live-Coding zusammen mit Kollegen soll einfach und unkompliziert möglich sein.
• Integrierte Kommandozeile:
  Tools wie vi oder Emacs haben es vorgemacht und auch Bespin will diese Stärke nutzen.
• Erweiterbar und Self-Hosted:
  Sowohl das Interface als auch die Fähigkeiten sollen über einfache Befehle (wie bei Ubiquity) oder über die Plug-In API erweiterbar sein.
• Schnelligkeit:
  Auch die Bearbeitung von sehr großen Dateien soll sehr schnell werden.
• Zugriff von überall:
  Die Entwickler sollen von jedem Ort und jedem Gerät über einen modernen Browser Zugriff erhalten.
• Einfache Benutzung:
  Die Nutzer sollen sich schnell zurechtfinden und mit dem Coden beginnen können.

Weiterführende Links zum Thema:
http://labs.mozilla.com/2009/02/introducing-bespin/
https://bespin.mozilla.com/

Cufón – Eine Javascript alternative zu sIFR

Wer sich mit Webdesign beschäftigt stößt zwangsläufig immer wieder auf das Problem der Standard Webfonts.
Gerne würde so mancher Kunde eine Schrift nutzen die im Web von Haus aus nicht zur Verfügung steht. Will man jedoch, den Suchmaschinen zu liebe, nicht Flash oder Bilder nutzen gibt es die Möglichkeit das mittlerweile recht bekannte und weitverbreitete sIFR zu nutzen. Der Nachteil an sIFR war bisher das es den FlashPlayer benötigt bzw. sonst den Font ohne Modifikation darstellt.

Mit cufón kommt jetzt eine rein auf Javascript basierende Lösung für die Entwicklergemeinde. Und diese unterscheidet sich zu den bisherigen.
Bei cufón muss zuerst ein Font auf einen web-basierten Generator geladen werden, dieser wandelt den Font schließlich in SVG um und erstellt automatisch das VML.

Ist dieser Schritt einmalig vollzogen, muss man nur noch das generierte .js-File in seine Seite einbinden.

Am Rande noch ein kleiner Überblick:

• sIFR lite
• FLIR
• typface.js
• cufón