flying sparks ein Weblog von Tobias Jordans zu den Themen software designstudium web2.0 webdesign informationsdesign oekologie werbung usability tj video interfacedesign marketing // alle Themen...

Alle Funken für das Thema javascript:

JavaScript-API zur Datenvisualisierung: Timeline und Timeplot

Schon seit einer ganzen Weile, programmieren Leute aus dem MIT an einer Reihe an fancy Tools — alles voran Timeline, ein „DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information." — und erschreckt habe ich festgestellt, dass ich noch nirgends darüber gebloggt habe :).

timline simile

Für mein Diplomprojekt hatte ich versucht, die Kalenderausgabe über einen 2. Kanal als Simile-Timeline darzustellen, bin aber leider an Zeichenkodierungsproblemen gescheitert…

Heute entdecke ich ein weiteres, sehr spanndendes JavaScript-Projekt der Simile-Familie: Timeplot „a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them".

timeplot

Schade, dass man bisher so wenig Anwendungen dafür findet und Glückwunsch an die MITler, die mit dem GoogleMaps-API-artigen Ansatz so ein Randthema wie Zeit- und Datenvisualisierung so einfach gemacht haben.

Wäre es nicht beispielsweise einfach möglich, die Postings eines Weblogs auf der Timeline darzustellen? Das wäre noch cooler als entsprechende bisherige Plugins. Und parallel dazu den Traffik/Kommentare/… in einer Timeplot-Ansicht?
Ich muss meine rhetorische Frage zur Timeline direkt selbst beantworten: Klar ist es möglich und es wurde auch schon gemacht…

Warum verstecken wir alle den Datepicker?

Ich fühle mich schon ein bisschen vorgeführt, wenn ich im 37signals-Produktblog eine so einfache und bisher unerreicht schnelle Lösung für das schnelle Eingeben von Datumwerten sehe:

Den Datepicker-Kalender einfach nicht verstecken sondern immer anzeigen… — genial einfach :-).

datumsauswahl in basecamp

Warum sieht man das eigentlich zum ersten Mal? Sicher auch, weil kaum ein Interface so reduziert konzipiert wird, wie bei 37signals. Dann kann man es sich auch mal leisten, für eines der wichtigen Formularelemente etwas mehr Platz zu nutzen.

Nebenbei: Meine eigenen Ideen mit JavaScript-Spielchen die textbasierte Eingabe zu beschleunigen, habe ich leider immernoch nirgends umgesetzt zu sehen. Das wäre im Übrigen auch der wichtige Verbesserungsschritt, den ich jetzt im Basecamp-Interface sehe: Den „Due: June 12, 2007"-Text durch ein Inputfeld zu ersetzen, in dass man auch per Hand Daten reinschreiben/-pasten kann.

Und wenn man dafür keinen Platz hat?

Auch dann kann man die Klick-Arbeit und -Zeit noch reduzieren. Yahoo hat nämlich ebenfalls mit einer Quasi-Konvention gebrochen und zeigt die Datumsauswahl nicht „OnClick auf Button" sondern „OnFocus in Textfeld" an. Wieder einen Klick und damit 10.000 $ pro Jahr gespart, wie Jacob Nielsen sagen würde ;-).

datepicker bei yahoo yui

Im Übrigen ist der Yahoo-Kalender auch sonst sehr gut optimiert und damit sogar dem OpenSource-Quasi-Standard vorzuziehen.

PS: Zum Schluss noch etwas Visuelles und Technisches für Interessierte.

[tags]javascript, gui, benutzereingabe, datum, interaktion, interfacedesign, optimierung, 37signals[/tags]

JavaScript in der Webentwicklung

Mark Norman Francis hat auf der Highland-Fling-2007-Konferenz darüber gesprochen, wie man mit JavaScript in der Webentwicklung umgehen sollte. Das Ideal: Die Website so konzipieren und umsetzen, dass sie auch ohne CSS, Ajax und JS funktioniert und dann mittels unobtrusive JavaScript einzelne Elemente pimpen.

Die Präsentation gibt es online: The Highland Fling (pdf)

zitat: unobstrusive javascript zitat: unobstrusive javascript

Eines der prägnanten Beispiele aus der Präsentation: Die Featured-News-Box auf der britischen Yahoo-News-Seite ist ohne JS ein Scrollbares Div. Mit JS bekommt es eine schöne vor-zurück-Funktionalität.

beispiel aus graded-browser-support-and-progressive-enhancement.pdf

Siehe auch: jQuery für schönes unobtrusive JavaScripting…

Coda für Mac-Webdev

Noch so ein Tool, das ich wahrscheinlich lieben würde, hätte ich einen Mac: CODA on-window web development

Was mir aufgefallen ist:

panic.com/coda

 

Was meint ihr dazu?

Hat jemand Praxiserfahrung?

[via OliverWrede RSS]

[tag]applikation, software, mac, webdesign, javascript, ajax[/tag]

jQuery und Jamal

jQuery ist ein JavaScript-Framework und gehört damit in die Liste von Prototype und Dojo. Timo Derstappen (teemow.com) hat uns dazu auf dem Barcamp in Berlin eine sehr gute Einführung gegeben und dabei auch sein eigenes Projekt Jamal vorgestellt.

jquery

Jamal baut auf jQuery auf und bringt das MVC (Model-View-Controller)-Prinzip in die Welt des JavaScripts. Timo entwickelt das gerade während er ormigo programmiert. Ormigo verwendet — wie heute üblich — viele JavaScript- und AJAX-Effekt im Interface und steht damit vor dem Problem, die vielen JavaScript-Funktionen sinnvoll zu verwalten. Timos interessante Lösung orientiert sich an Ruby On Rails und CakePHP und soll auch mit diesen Frameworks zusammenarbeiten.

jamal logo

Mehr über jQuery und Jamal unter diesen Links:

Selbsterfahrung:

Auf der Rückfahrt im Zug hat mir Timo geholfen, mit Hilfe von jQuery die Bedienbarkeit des MenüManager-Plugins von ScoutPress zu verbessern. Dieser erste Praxistest zeigt mir: Das Aneinanderhängen von Funktionen und der Verzicht auf die vielen zusätzlichen leeren Funktionen, wie sie in Prototype vorkommen, erleichtern das Lernen erheblich. Es gibt einige gute Tutorials auf der sehr aktiven jQuery-Seite, so dass ich glaube, ich könnte zügig weiterkommen ;-).
Trotzdem gibt es ein paar Stolpersteine über die Timo vielleicht einmal mehr schreiben kann. Ich hoffe, dass einem sein Framework an diesen Stellen noch weiter unter die Arme greift damit die Arbeit noch leichter wird…

Vielen Dank, teemow

[tag]javascript,programmierung,empfehlung,vergleich,barcamp,konferenz,usability[/tag]

JavaScript-Datumsauswahl

Ich glaube, ich habe jetzt eine Antwort auf meine zwei Monate alte Frage „Wie sähe ein optimales Datums- oder Zeit-Eingabefeld aus?„:

JavaScript-Autocomplete…

Mein ursprünglicher Gedanke war ein einfaches Inputfeld das zu Beginn so aussieht [_00.05.2006_]. Klickt man rein, wird alle markiert. Fängt man an zu tippen, werden die Zeichen von vorn beginnen ersetzt (die Punkte bleiben aber immer stehen), so dass man immer im richtigen Format ist, jedoch Komfort und Geschwindigkeit eines einzelnen Feldes und des Monats- und Jahres-Vorschlages erlebt.

Unglücklicherweise scheint noch niemand auf diese Idee gekommen zu sein, was zu zwei Problemen führt: 1. Finden man kein Script im Netz, 2. könnte das Verfahren für den Benutzer zu ungewohnt sein…

AndyBudds Post über „Select Box Usability Madness" hat mich jetzt auf eine andere Fährte gebracht: Autocomplete. Für ein Problem wie Andys ist Autocomplete ideal: Ein einfaches Feld und sobald ich „England" eintippe kann das System mit „United Kingdom" reagieren (wenn England unerwünscht ist). Man kann durch das AutoComplete viel mehr Fehlerkorrekturen einbauen und sie vor allem vor dem User verstecken.

Das Gleiche geht auch für Datumsangabe: Zu Beginn steht Grau 00.05.2006 im Feld. Klickt man hinein wird der Text selektiert. Beginnt man zu Tippen, zeigt einem das JavaScript-Autocomplete, wie das Datum in der Form, die man zur Eingabe gewählt hat, aussehen würde. Im besten Fall muss ich so nur 1 Zeichen eingeben (Tag) und kann den Rest aus dem Autocomplete wählen. Für Tag und Monat wären es dann maximal 4 Zeichen (wenn Punkte automatisch gesetzt werden).

In der Yahoo-Interface-Library gibt es ähnliche (textbasierte) Picker zum Test und Download. Genauso bei Script.aculo.us (Beispiel).

Kombiniert man dieses schnelle tastaturbasierte Verfahren mit einer visuellen Datumsauswahl, kommt jeder Benutzertyp schnell zum Ziel.

Update 06-05-31: Ajax in JavaScript umbenannt. Siehe Kommentare.