Maqetta – Visuelles Erstellen von HTML 5 Benutzerinterfaces im Browser

Das Erstellen von Benutzerschnittstellen auf HTML 5 Basis gewinnt zunehmend an Bedeutung.  Maqetta ist ein Tool, welches Ihnen hier viel Arbeit abnehmen kann. Maqetta ermöglicht Ihnen das visuelle Erstellen von Benutzerinterfaces für Desktop und mobile Geräte. Der dadurch erzeugte Code sollte auf den meisten aktuellen Browsern laufen. Die Anwendung selber benötigt einen Browser, der die HTML 5 Funktionen unterstützt die Maqetta benötigt, dies sind auf jeden Fall Chrome, Firefox und Safari, aber gegebenenfalls lohnt sich auch ein Test in anderen Browsern, da hier ja ständig Aktualisierungen stattfinden.

Magetta unterstützt Standards wie HTML5 und CSS3

Der von Maqetta erzeugt Code verwendet ausschließlich Standards wie HTML5, CSS3, JavaScript und OpenAjax Widgets. Magetta bietet eine umfangreiche Unterstützung für CSS inklusive eines vollständigen CSS-Parsers und -Modellierers. Ziel von Maqetta ist auch eine Unterstützung von Mobilgeräten, dies ist aber teilweise noch in Entwicklung, es lohnt sich aber auch dann bereits Maqetta zu testen und auch einen Blick auf die Weiterentwicklung zu werfen. Es stehen bereits Devices für iPhone, iPad, Blackberry und Android zur Verfügung, um eine Anpassung des User-Interfaces an diese Endgeräte vornehmen zu können..

Benutzerschnittstellen erstellen per Drag & Drop

Benutzerschnittstellen können in Maqetta einfach durch Drag&Drop der gewünschten Elemente, den sogenannten Widgets, in einem Designer visuell erstellt werden. Bilddateien werden einfach aus der ‘Files’ – Palette auf die Zeichenfläche gezogen und eingefügt. Elemente auf der Zeichenfläche der Benutzerschnitstelle können dabei jederzeit neu angeordnet werden. Enthalten Widgets Textelemente, z.B. Schaltflächen, so können diese direkt im Bearbeitungsbereich eingegeben oder geändert werden.

Maqetta bietet den Benutzern Standardelemente von HTML, sowie erweiterte oder zusätzliche Elemente aus beliebten Javascript – Libraries (z.B. jQuery UI), so dass umfangreiche Möglichkeiten geboten werden, eine individuelle und ansprechende Schnittstelle zu gestalten. Die Eigenschaftspalette ermöglicht dem Benutzer dabei Widgets individuell, je nach Möglichkeit des Elements, anzupassen, z.B. über CSS Eigenschaftswerte.

Die Outline Palette ermöglicht dem Benutzer Widgets neu anzuordnen, bietet eine hierarchische Ansicht der verwendeten Widgets und ermöglicht auf einfache Weise festzulegen, ob ein Widget sichtbar ist oder nicht.

Maqetta ermöglicht dem Benutzer aber nicht nur das visuelle Erstellen von Benutzerschnittstellen, sondern bietet auch eine Code – Ansicht, sowie eine geteilte Ansicht Visuell/Code.

Weiterverwendung der erstellten Benutzerschnittstellen

Die exportierten Benutzerschnittstellen können als ZIP exportiert werden und so z.B. in Eclipse zur weiteren Verwendung importiert werden. Die Benutzerschnittstellen sind aber auch eigenständig im Browser lauffähig. Der Anwender kann selber festlegen, ob verwendete Javascript-Libraries im Export eingebunden werden sollen.

Auf der Webseite von Maqetta findet der interessierte Leser umfangreiche Informationen und Tutorials vor. Sie können Maqetta online anwenden und testen oder diesen herunterladen und auf den eigenen Rechner ausführen.

Maqetta wurde ursprünglich von IBM entwickelt, ist aber im April IBM als Open Source freigegeben worden und wird nun von der Dojo Foundation betreut.