FIWA – Sebastians Blog

FIWA-Update: Toolbars

Sebastian Gaul — Wed, 07 Dec 2011 15:08:34 +0000

Heute gibt es ein kleines Update für mein „Framework for Integrated Web Applications“ – FIWA. Ab sofort gibt es auch eine Toolbar, die sich ziemlich genau wie die eines typischen Betriebssystem-Toolkits verhält.

Es ist wieder nur ein kleiner Schritt, macht aber wieder deutlicher, wo die Reise hingeht:

Die Schaltfläche „New“ im Bild zeigt den Hover-Effekt. Beim Machen des Screenshots wurde der Mauszeiger nicht aufgenommen.

Jetzt fehlt vor allem noch ein sinnvolles Grid-System und ein Tabellendesign, vor allem aber ein richtiges Projekt, mit dem man etwas Praxiserfahrung sammeln kann.

Erster Theme-Ansatz für FIWA: Ubuntus Ambiance

Sebastian Gaul — Mon, 28 Nov 2011 22:23:56 +0000

Um mir selbst ein Bild davon zu machen, wie genau eine Webanwendung einem nativen Programm ähneln kann, habe ich für die Menüleiste von FIWA ein Theme erstellt. Meine Wahl ist dabei auf das System gefallen, das ich hier auch selber nutze: Ubuntu 10.10 mit dem entsprechenden Ambiance-Theme. Und ehrlich gesagt bin ich von den Ergebnissen positiv überrascht.

Referenz: Ambiance aus Ubuntu 10.10

Hier meine Vorlage:

Es ist zwar nicht mehr die aktuelle Variante, allerdings ist eine Umstellung auf die neueren Ambiance-Variante mit der jetzt gemachten Vorarbeit kein Problem mehr.

HTML-Ambiance-Theme

Meine derzeitige Umsetzung beschränkt sich, wie bereits erwähnt, auf die Menüleiste:

Oder mit offenem Menü:

Zugegeben: Das ist alles noch nicht wirklich brauchbar. Dennoch zeigt es, wohin die Reise gehen kann, wenn man sich wirklich die Mühe macht. Mit HTML 5 und CSS 3 kann man viele recht aufwändige Effekte ohne viel Arbeit realisieren: Schrift mit Schatten hinterlegen, Ecken abrunden oder Farbverläufe – so macht Designen Spaß.

FIWA: Eine fast native Menüleiste

Sebastian Gaul — Sun, 27 Nov 2011 10:31:11 +0000

Schon seit längerem bin ich auf der Suche nach einem HTML-CSS-JS-Framework, welches sich möglichst genau an das eigene Betriebssystem anpasst und im Anwendungsmodus des Browsers gar nicht als Webdienst auffällt. Leider konnte ich dazu nie etwas finden, daher habe ich mit FIWA („Framework for Integrated Web Applications“) einfach mal einen eigenen Ansatz gestartet. Als erstes ist nun eine recht brauchbare Menüleiste fertig geworden.

FIWA Menubar

Die Menüleiste verhält sich nun ziemlich genau wie die in GTK (und somit hoffentlich auch den meisten anderen Toolkits, viele Tests konnte ich noch nicht machen):

immer normaler Mauszeiger
Hover-Hervorhebung nur, wenn irgend ein Teil des Menüs offen
Untermenüs bleiben offen bis Klick irgendwo im Dokument
ist Untermenü offen, werden andere Untermenüs schon durch darüberfahren geöffnet und das vorige geschlossen

Leider wird die Funktionsweise durch eine Screenshot kaum deutlich.

FIWA Menubar

Das Design

Für die perfekte Systemintegration benötigt man vor allem ein passendes Theme. Ich habe mich vorerst dazu entschieden, keiner speziellen Vorgabe zu folgen, um eine möglichst allgemeine Lösung zu finden, für die man später dann verschiedene Designs erstellen kann.

Einschränkungen

In Chrome und Firefox funktioniert die Menüleiste tadellos. Ich möchte mich bewusst auf moderne Browser beschränken. Im Zweifel kann lieber jemand zehn Minuten in sein IE-6-Update stecken als ich jetzt drei Stunden um es da zum Laufen zu kriegen.

Eine etwas größere Einschränkung ist da die Tatsache, dass das Menü derzeit nur zwei tief verschachtelt werden darf. Jede weitere Ebene ist etwas problematischer, da diese ja neben dem aktuellen Unterpunkt positioniert werden müssen. Aber auch das sollte in absehbarer Zeit machbar sein.

Download

Die Sache ist noch nicht im Ansatz fertig. Wer aber schon einmal hineinsehen möchte, kann das über das entsprechende Github-Projekt tun:

SebastianG86 / FIWA auf Github