HTML5
HTML5 - Authoringtool Maqetta
Auf der IBM-Impact-Konferenz in Las Vegas kündigte der Blaue Riese unter dem Namen Maqetta ein neuartiges HTML5-Authoring-Tool an. Das Internet Magazin hat Maqetta unter die Haube geschaut.
Mit Maqetta wollte IBM eigenen Aussagen zufolge ein grafisches Authoring-System für standardkonforme Ajax-Entwicklung mit HTML5 ins Leben rufen - ganz nach dem Vorbild von Adobes Werkzeugen für Flash und Microsofts Werkzeugen für Silverlight. Maqetta ist konsequenterweise selbst in HTML5 geschrieben und läuft ganz einfach in einem aktuellen Browser.Der Name Maqetta ist eine alternative Schreibweise des spanischen Wortes "maqueta" und bedeutet so viel wie "Mockup", im Webdesigner- Jargon also ein provisorisches Vorabdesign einer Website, dem oftmals noch kein lauffähiger Code zu Grunde liegt. Maqetta soll das UXD-Gegenstück zu IBMs Eclipse-Tools bilden.
Pures HTML5-Authoring
Das flexible Prototyping-Tool ist ohne jegliche Plug-ins in einem ganz gewöhnlichen HTML5-fähigen Browser unter jedem gängigen Desktop-Betriebssystem nutzbar. Der Serverprozess von Maqetta läuft dank unter Linux, Windows und Mac OS X in der Java-Laufzeitumgebung. Damit bietet Ihnen Maqetta das Optimum an Leistung und Flexibilität. Durch die plattform- und betriebssystemunabhängige Implementierung bildet Maqetta das Bindeglied zwischen Webentwicklern und -designern in einer Ajax- und HTML5-basierten Umgebung. Langfristig soll Maqetta als ein Cloud-Dienst verfügbar sein.
Arbeitsweise
In der aktuellen Version liegt Maqetta als kostenloser Download vor. Den mitgelieferten Server können Sie lokal auf Ihrem Computer ausführen und auch anderen Benutzern via Netzwerk zugänglich machen. Hier finden Sie ein nicht registrierungspflichtiges Live-Tryout der aktuellen Vorabversion von Maqetta. Doch Vorsicht: In dieser Ausführung eignet sich Maqetta nicht für umfassende Tests, da Sie Ihre Daten nicht abspeichern können. Zudem sind Ihre Daten in der Cloud für alle Benutzer öffentlich zugänglich. Wer sich mit Maqetta auseinandersetzen möchte kommt nicht umhin, das Archiv herunterzuladen. Zum Glück ist die Einrichtung unkompliziert.
Maqetta
Projekt-Website: maqetta.org Download: maqetta.org/downloads/ Live-Tryout: maqetta.org:55556/maqetta/ Versionsnummer: Preis: Systemvoraussetzungen (Useragent): Zusätzliche Systemvoraussetzungen (Host):
Nach dem Download und dem Auspacken des Maqetta-Archivs starten Sie ganz einfach den Maqetta-Server in der Kommandozeile, navigieren dann in einem unterstützten Browser zur Adresse des eigenen Hosts unter der Angabe der Portnummer 50000 und steuern das Verzeichnis maqetta an: https://localhost: 50000/maqetta/.Nach dem erstmaligen Aufruf dieser Adresse im Browser meldet sich die Applikation mit dem Begrüßungsbildschirm; Sie können hier unter anderem eine neue HTML5-Website oder ein neues CSS-Theme erstellen.Die wichtigsten Funktionen von Maqetta sind jederzeit in der Menüleiste am rechten oberen Rand der Arbeitsfläche zugänglich. Im Zeitalter der explosiv wachsenden Bedeutung mobiler Geräte lag es für Maqetta-Entwickler nahe, Layouts standardmäßig im Flow-Modus anzulegen. Optional kann sich der Benutzer aber auch für ein absolutes Layout mit festen Koordinaten entscheiden.Die Bearbeitung von HTML5-Websites in Maqetta erfolgt unter Verwendung der so genannten OpenAjax-Widgets. Bei diesen Widgets handelt es sich um grafische Komponenten, die Sie auf der Website per Drag-und-Drop ablegen und mit Hilfe grafischer Werkzeuge konfigurieren können. Die Widget-Bibliothek Dijit gehört im Übrigen zum Dojo-Javascript-Toolkit. Das Drag-und-Drop-Konzept ist in Maqetta erstaunlich konsequent umgesetzt: Sie können Komponenten aus der Widget- oder der Dateipalette ziehen und sie dann auf der Arbeitsfläche für die Website (um)arrangieren.Die mitgelieferten Widgets beinhalten verschiedene Container und Kontrollelemente mit Anbindung an Dojo und Dojox Mobile, jQuery UI und YUI sowie HTML-Komponenten. Von HTML5 ist in der getesteten Version noch nicht viel zu sehen.Weder die Elemente <nav>, <section>, <article> noch <aside> sind unter den Widgets vertreten. Maqetta-Widgets basieren auf der OpenAjax-Metadata-Spezifikation, und so soll es in einer künftigen Version möglich sein, zusätzliche Widgets in diesem Standard auch von anderen Anbietern zu beziehen (Schaltfläche Import a Widget). Andere Widget-Standards werden derzeit nicht unterstützt.Der relevanteste Datenwert eines Widgets (wie der Text innerhalb einer Schaltfläche) lässt sich bei der erstmaligen Erstellung und auch nachträglich direkt auf der Arbeitsfläche per Doppelklick verändern. Einige Widgets öffnen ein Pop-up-Fenster für die vergleichsweise unkomplizierte Eingabe von Daten wie beispielsweise den Einträge in Drop-down-Menüs.Das Verhalten der Benutzeroberfläche der Widgets hat noch viele raue Kanten, und die Bedienung gestaltet sich zum Teil noch recht umständlich. Die Registerkarten zum Bearbeiten von Eigenschaften und Zuständen sind dagegen äußerst komfortabel und intuitiv.
Eigenschafteninspektor
Maqetta beinhaltet einen vollwertigen CSS-Parser und bietet dem Benutzer einen rein grafischen Editor von CSS-Regeln, den Eigenschafteninspektor. Der Benutzer navigiert darin zu der gewünschten CSS-Eigenschaft der aktuellen Auswahl mit Hilfe von Schaltflächen, welche, wie von einem Smartphone gewohnt, durch das Bedienfeld des Inspektors gleiten.
So können Sie CSS-Regelsätze direkt im Eigenschafteninspektor bearbeiten, indem Sie sich durch die einzelnen Funktionsbereiche wie Allgemein, Widget-spezifisch, Ereignisse, Layout, Padding/Margins, Hintergrund, Ränder sowie Fonts/Text zu der gewünschten CSS-Eigenschaft durchklicken. Die betreffende Klasse können Sie, falls erforderlich, ganz einfach direkt im Eigenschafteninspektor eintragen.Als Erstellungsgrundlage eines neuen CSS-Themes dient immer eines der vorliegenden Themes, denn Maqetta übernimmt hierbei einen ganzen Verzeichnisbaum von Stylesheets mit Regeln für die verschiedenen Aspekte einzelner Widgets. CSS-Themes lassen sich grafisch mit Hilfe des Eigenschafteninspektors (Reiter Properties) sehr komfortabel editieren; die Bearbeitung im Quelltext ist dagegen nicht praktikabel.Sämtliche Funktionen zum Konfigurieren von CSS-Eigenschaften unterstützen derzeit nur den grafischen Arbeitsmodus auf Basis von Widgets (anders als zum Beispiel in Adobe Dreamweaver, wo der CSS-Inspektor mit dem Code-Editor im Einklang steht und den ausgewählten Code visualisieren kann). Die Qualität der grafischen Darstellung von Seitenelementen zählt nicht zu den Stärken der getesteten Vorabversion von Maqetta. Bei den erstellten Designs handelt es sich um Mockups und Prototypen, nicht um einsatzbereite Webanwendungen. Benutzer von Balsamiq dürften dennoch an der CSS-Vorlage mit scheinbar handgezeichneten UI-Elementen ihre Freude haben.
Ajax-Entwicklung
Der Funktionsumfang von Maqetta fokussiert eindeutig auf die interaktiven Aspekte der Gestaltung von Ajax-Websites und -Applikationen.Maqetta unterstützt die Zuordnung von UI-Elementen des entstehenden Prototyps zu verschiedenen Zuständen der entstehenden Website mit rein grafischen Werkzeugen. Dadurch können Webdesigner das Verhalten der Anwendung gestalten, ohne in die Tiefen des Programmiercode hineintauchen zu müssen.Die Zustände der Webapplikation entstehen im Bedienfeld States; im Bedienfeld Outline können Sie die Sichtbarkeit der einzelnen Widgets vom Zustand der Webapplikation abhängig machen. Im Bedienfeld Eigenschaften legen Sie die Ereignisse fest, die den Zustand der Applikation verändern. So können Sie zum Beispiel unter Verwendung rein grafischer Tools bestimmen, dass der Mausklick auf eine Schaltfläche den Zustand der Applikation verändert und bestimmte Widgets unsichtbar macht.
Mobile Geräte
Um dem Designer das Erstellen mobiler Webanwendungen zu erleichtern, bietet Maqetta mit der Funktion Choose a device silhouette die Möglichkeit der Darstellung der Website in einem Vorschaumodus, der die Website in die Silhouette eines Dummy-Gerätes gießt. Zur Auswahl stehen neben den Einträgen iPhone, iPad und Blackberry zwei Einträge für Android-Smartphones (340x480 und 480x800) und ein Android-Tablet.Bei der Anzeige des klickbaren Prototyps des Maqetta-Projektes in der Silhouette eines der mobilen Geräte im Browser haben Sie die Möglichkeit, die Zoomstufe des Skins zu regeln um das Design genauer unter die Lupe zu nehmen.Die getestete Vorabversion von Maqetta bietet bereits einen vollwertigen Revisionsworkflow für Arbeitsgruppen und punktet dabei sogar mit integrierter Unterstützung für Abgabetermine. Das Besondere: Teilnehmer des Revisionsworkflows können einen vollwertigen, interaktiven Prototyp der entstehenden Webapplikation kommentieren. Auch lassen sich gleichzeitig mehrere Versionen der entstehenden Appliaktion miteinander vergleichen.Die Teilnehmer eines Revisionsworkflows erhalten eine Einladung per E-Mail, navigieren in ihrem Browser zu der betreffenden URL-Adresse und können auf der Oberfläche der entstehenden Webanwendung Markierungen anbringen, diese mit Kommentaren begründen und auf Anmerkungen anderer Benutzer reagieren.Den einzelnen Themen kann jeweils eine Prioritätsstufe und ein Status zugewiesen werden. Diese beiden Funktionen helfen wiederum, auf die wichtigsten Aufgabenstellungen zu fokussieren. Die einzelnen Diskussionsteilnehmer können während der Testphase mit dem Prototypen der Website frei interagieren und das Feedback direkt in die entstehende Anwendung einfließen lassen.
Externe Lösungen
Der Maqetta-Code beinhaltet eine REST-basierte Serveranwendung, die mittels Java und OSGi implementiert wurde und sich in Serverumgebungen der Java Enterprise Edition wie IBMs eigenem Websphere Applikationsserver integrieren lässt.
Die Architektur von Maqetta ist von den verwendeten Bibliotheken und der Entwicklungsumgebung unabhängig. Die Anbindung an Eclipse ist rein optional. Die in Maqetta erzeugten Projekte lassen sich mit Leichtigkeit herunterladen und mit einer beliebigen Anwendung einsetzen. Auch können Sie bei Bedarf eigene Javascript-Bibliotheken in die Maqetta-Umgebung einbinden; derzeit bedarf es allerdings noch manueller Eingriffe in den Maqetta-Code durch einen erfahrenen Entwickler. Gleiches betrifft die Einbindung externer Widget-Bibliotheken. Der Standard für OpenAjax-Widget ist übrigens nicht an eine bestimmte Javascript-Bibliothek gebunden.Während IBM mit Maqetta Webdesignern und -programmierern ein HTML5-konformes Programm zur Verfügung gestellt und die Kosten der Entwicklung geschultert hat, ist and er technischen Seite maßgeblich die Dojo Foundation beteiligt. Die Dojo Foundation hostet das Maqetta.org -Portal und hat unter anderem die zwei Standard-Themes Claro und Sketch für die Dojo-Widgets beigesteuert.Laut Aussage von Karel Vredenburg, IBMs Direktor für User Interface Design, beabsichtigt IBM, Maqetta intern als ein Tool von strategischer Bedeutung für das UIX-Design und die Usability-Optimierung sowohl für Desktops als auch für Mobilgeräte zu nutzen. IBM hoffe gleichzeitig darauf, dass die vergleichsweise liberalen Lizenzbedingungen dieser kostenlosen und quelloffenen Lösung zur Entstehung einer agilen Benutzergemeinde beitragen, welche die fortlaufende Entwicklung vorantreibt.Derzeit bietet Maqetta noch nicht die Betriebssicherheit etablierter Lösungen wie Dreamweaver CS5.5 an. Wer mit Maqetta einen produktionsreifen HTML5-Authoring-Workflow fahren möchte, hat zu hoch geschraubte Erwartungen.
Fazit
Bei Maqetta handelt es sich um ein browserbasiertes Authoring-Werkzeug für HTML5-basierte UIs mit optionaler Anbindung an Eclipse. Die Funktionenvon Maqetta fokussieren eindeutig auf die interaktiven Aspekte der Webentwicklung und greifen dem Designer mit visuellen Werkzeugen geschickt unter die Arme.
Noch hat die Benutzeroberfläche von Maqetta viele raue Kanten und stellt sich hin und wieder dem Arbeitsfluss in den Weg. Der quelloffene Charakter von Maqetta lässt jedoch erwarten, dass diese Ungereimtheiten bald behoben sein dürften. Die anpassungs- und ausbaufähige Architektur der Maqetta-Umgebung macht sicherlich Hoffnung auf eine aussichtsreiche Zukunft dieser Lösung. Die intuitive Implementierung eines Revisionsworkflows in Maqetta kann die Entscheidungsfindung beim UI-Design von Webanwendungen erleichtern und letztlich erheblich Kosten senken helfen.Da Mitte bis Ende 2012 Windows 8 erscheinen soll, das mit seinen Metro-Applikationen um HTML5, CSS3 und Javascript herum aufgebaut wurde, dürfte der Bedarf an HTML5-kompatiblen Authoring-Lösungen steigen.Mittelfristig wird aber der Einfluss der HTML5-zentrierten Neuorientierung von Softwarehäusern wie beispielsweise Adobe, Dojo Foundation, IBM, Microsoft, Mozilla Foundation, Opera und Oracle zu Synergieeffekten führen, das heißt, dass die wachsende HTML5-Gemeinde kommt auch Maqetta zugute. Insbesondere auf Grund der kostenlosen Verfügbarkeit von Maqetta als Open-Source-Lösung dürfte die Benutzergemeinde des Programms eine relevante Größe erreichen.Kurzfristig stellt Maqetta (noch) keine ernsthafte Bedrohung für etablierte kommerzielle Lösungen wie Adobe Fireworks CS5.1 und Dreamweaver CS5.5 dar. Mittelfristig hat es aber dank IBMs Rückendeckung und der Unterstützung durch Dojo Foundation die finanzielle Ausdauer, um dem Fireworks-Dreamweaver-Duo irgendwann einmal Konkurrenz zu machen, ähnlich wie heute Open Office/Libre Office eine ziemliche Herausforderung für Microsoft Office darstellt.IBM möchte Maqetta als Vehikel - oder sollte man besser trojanisches Pferd sagen? - platzieren, um IBM Eclipse und IBM-gestützte CRM-, Data-base- , Data-Mining- und Web-Analytics-Software populärer zu machen. Man sollte Maqetta also nicht unterschätzen, auch wenn es im Moment qualitativ noch in die Kategorie "einem geschenktem Gaul schaut man nicht ins Maul" fällt. Letzteres kann sich ja dank der finanziellen Ressourcen von IBM rasch ändern.
