web.develop

Die Sliding Doors-Technik ist inzwischen sehr beliebt bei der ansprechenden grafischen Darstellung von Tabs auf Webseiten. Allerdings ist die Anzahl und Benennung normalerweise statisch und wird bereits serverseitig generiert.

Mr. Havoc zeigt nun in einem Tutorial, wie man mit Hilfe von JavaScript clientseitig neue Tabs hinzufügen und auch wieder entfernen kann. Dabei wird der den Tabs zugeordnete Inhalt dynamisch nachgeladen.

• Easy to implement Dynamic CSS Tabs. The user can add and remove tabs (and content) without refreshing the page.
• The ability to specify default open tabs
• The ability for the website owner to specify which tabs can and cannot be closed after they are opened
• The ability to assign a different color to each tab. This makes it easier to ‘group’ tabs with similar content.
• Ajax Preloading Goodness. When a tab is opened, the contents of the tab’s panel are loaded with ajax. You can open a tab while the user is focused on a different tab. The newly opened tab will preload it’s content in the background and wait for the user to click the new tab when he or she is ready to.
• Tab Events. Each tab can have it’s own javascript code that will be triggered when a certain event happens. Such as Open, Close, Blur and Focus.
• Tested to work with Firefox 1.0, 1.5 and IE 6

(via Jens Grochtdreis)

Einen anderen Ansatz als eine neue Seite zu öffnen, wenn Thumbnails mit Fullsize-Grafiken verlinkt werden sollen, geht das Lightbox-Script von Lokesh Dhakar. Das Bild wird nach einem Klick auf den Thumbnail einfach über der Seite schwebend angezeigt, mit einem netten Rahmen drum herum. Zusätzlich kann der Hintergrund (also die eigentliche Webseite) “abgedimmt” werden. Sogar eine Caption kann dem Bild mitgegeben werden, ein Mausklick auf den “Close”-Button blendet das Bild wieder aus.

Dazu ist das Skript auch noch unobtrusive: wenn JavaScript nicht aktiviert ist, wird stattdessen das große Bild herkömmlich im Browserfenster angezeigt.

Seien wir ehrlich: Wordpress setzt in der Version 2 inzwischen im Adminbereich zwar AJAX-Techniken ein, so zum Beispiel für den Upload von Dateien oder dem Hinzufügen von Kategorien beim Schreiben eines Beitrages. Aber das sind nur kleine Features, insgesamt gesehen ist die Verwaltung noch recht klassisch realisiert.

Da braucht es erst einen 17-jährigen Programmierer, der eine vollständig AJAX-basierte Bloglösung erstellt: logahead, basierend auf PHP, MySQL und eben AJAX.

Für eine ganz neue Anwendung ist der Eindruck äußerst positiv: alle Grundfunktionen eines Blogs sind vorhanden, unter anderem auch Tagging, Themes, RSS Feeds Widgets für die Sidebar. Was es aber besonders von anderer Blogsoftware abhebt: es gibt keinen Admin-Bereich, alles läßt sich direkt auf der Seite verwalten. Neue Artikel schreiben, die Sidebar umsortieren, Theme ändern…

Faszinierend, was ein einzelner talentierter Entwickler mit Web2.0-Techniken realisieren kann. Der Junge hat verstanden, wie es geht.

(via Max Kiesler)

Nachdem ich gestern bereits iRows vorgestellt hatte, folgt nun eine weitere Online-Lösung für Spreadsheets, Numbler.

Der Schwerpunkt von Numbler liegt bei der gemeinsamen Bearbeitung von Tabellen mit anderen Benutzern. Vom Funktionsumfang her wirkt es etwas dünner als iRows, ebenso waren die Reaktionszeiten der Anwendung auf Benutzereingaben beim Test spürbar langsamer. Ein Im- und Export der Daten ist nur per CSV und XML möglich, Excel wird nativ nicht unterstützt. Ein neues Spreadsheet kann ohne Registrierung angelegt werden, wobei ein Name für die Tabelle, ein Benutzername und eine EMail-Adresse angegeben werden müssen. An diese wird dann ein Link auf das Dokument geschickt. Dies ist auch die einzige Möglichkeit, es wieder aufzurufen, eine Liste der eigenen Sheets gibt es nicht. Per EMail können andere Benutzer eingeladen werden, auch ein Chat mit allen gerade aktiven Bearbeitern ist integriert.

Numbler features:

• Full size sheets, 256 x 65536 cells
• Live collaboration with your coworkers
• Formula syntax and behavior similar to Excel

Numbler ist (natürlich) noch in einer Beta-Phase.

Das AJAX-Framework AJAX Agent legt besonderen Wert auf eine sehr einfache Benutzbarkeit für Entwickler. So braucht es in der PHP-Version nur drei Befehle, um einen AJAX-Funktionsaufruf abzusetzen:

 include_once('agent.php');
 $agent->init(); 
 agent.call('url','srv_func', 'client_handle', param1, ...);

Die erste Zeile inkludiert und initialisiert das Framework und instanziiert den serverseitigen Agenten. Die zweite zeile erzeugt den Client-seitigen Agenten und die dritte ruft aus der JavaScript-Umgebung des Browsers asynchron den Agenten auf dem Server auf. Dabei können auch komplexe Datentypen (Arrays, Objekte…) übergeben werden, zum Datenaustausch wird JSON verwendet.

Auf der Website des Projekts demonstrieren einige interessante Demos die Möglichkeiten des Frameworks.

Tabs zur Navigation sind schon lange beliebt und werden es wohl auch noch eine Zeit bleiben. Statt mit Tabellen werden sie heute allerdings mit CSS realisiert, und einige nette Beispiele stellt der exploding boy zur Verfügung (hier und hier).

Außerdem hat er auch noch 14 Beispiele für vertikale CSS-Menüs erstellt. Alles zur freien Verwendung.

(via CSSHilfe)

Überschneiden sich mehrere Elemente einer Webseite in der Darstellung, dann gibt die Reihenfolge im HTML-Quelltext an, welches “oben” liegt. Das erste liegt unten, das nächste darüber usw.

Aber das muß nicht so sein, denn per CSS läßt sich der z-index festlegen, der die “Höhe” über der Seite, quasi die dritte Achse neben horizontal und vertikal, angibt. Einen Einblick in die Verwendung gibt Andy Clark auf 24ways und erklärt ihn für alles andere als tot!

Die Website des UX Magazine ist ein schönes Beispiel für ein gelungenes CSS-basiertes Design, wie ich finde. Viel Inhalt, aber trotzdem übersichtlich und nett anzuschauen. Und das Thema ist auch noch interessant, es dreht sich alles rund um “User Experience”.

Die Site befindet sich zur Zeit noch im Beta-Stadium, wie dort angemerkt wird. Interessant, kannte ich bisher eher nur von Webanwendungen.

Jayaram Krishnaswamy hat ein Tutorial geschrieben, in dem die Bearbeitung von XML in Javascript mit XMLDOM-Objekten erklärt wird.

Understanding and manipulating the XMLDOM objects is a prerequisite to writing successful code, whether it be for AJAX or for anything to do with XML files especially using Microsoft tools. It is the author’s hope that the surgical presentation of this tutorial in dissecting the XMLDOM object will provide a guide to this understanding.

( via AJAX Magazine )

Ein exzellentes Beispiel für den Einsatz von AJAX für webbasierte Officeanwendungen liefert iRows. Auch wenn das Projekt noch recht neu ist, ist die ein großer Funktionsumfang bereits realisiert. Das Spreadsheet läßt sich flüssig bedienen, sogar Diagramme sind vorhanden.

Datenaustausch ist mit Excel oder CSV-Dateien möglich, mehrere Benutzer können gleichzeitig an einer Tabelle arbeiten, aus der sich auch HTML generieren läßt. Eine Demo ist auch ohne Anmeldung möglich, ansonsten ist eine kostenlose Registrierung nötig.

( via AJAXmagazine )