Adobe MAX: HTML5 im Workflow
Im Zentrum der Webpublishing-Strategie von Adobe steht die Werkzeugserie Edge. Statt eine großkalibrige All-inclusive-Lösung zu entwickeln, setzt Adobe auf kleine, flexible Module.
Flash fristet nur noch ein Nischendasein auf Adobes MAX-Konferenz. Acht Jahre lang, seit der Übernahme von Macromedia, hatte das Animationstool seinen festen Platz in der Agenda. Nun musste es weichen. Der designierte Nachfolger Edge Animate produziert Animationen aus einem Mix aus CSS und JavaScript, geht damit konform mit offenen Standards, ist in der Lage, Teil eines Responsive Layout zu werden, dass sich an alle Bildschirmgrößen anpasst und HTML5 läuft im Gegensatz zu Flash auf allen Mobilgeräten.
Animate ist nur eines von sechs Werkzeugen in der Edge-Serie. Hinzu kommen Reflow für die Herstellung von Responsive Designs, Inspect für die schnelle Vorschau des fertigen Machwerks auf dem Tablet, Code als Programmierkonsole, Phonegap Build als erweiterter Exportfilter in Richtung Mobiltelefone und WebFonts sowie Typekit für die Integration verschiedener Schrifttypen in Webseiten. Jedes Tool für sich genommen erfüllt nur einen kleinen Zweck, integriert sich dafür aber auch mit anderen Werkzeugen wir Dreamweaver, Photoshop oder Muse, dem Werkzeug für die Code-freie Entwicklung von Website-Layouts.
Ein beispielhafter Workflow beginnt mit Photoshop. Dort gibt es in der neuen Version – genannt CC für Creative Cloud – einen Exportfilter, der die Ebenen eines Dokuments als einzelne Elemente ausgibt und deren Anordnung in CSS abbildet. Es wird eine Reflow-Datei erzeugt, die sich dann im entsprechenden Tool öffnen läßt. Doch nicht alle Kompositionselemente bleiben erhalten. Die Blendmodi der Ebenen zum Beispiel gehen verloren.
Reflow ist vermutlich die spannendste Neuerung. Das Tool besteht im wesentlichen aus einem Webkit-Browser, mit dem sich Seiteninhalt anzeigen und das Browserfenster so verändern lässt, als betrachte man die Seite auf einem Smartphone. Der Designer setzt so genannte Breakpoints nach verfügbarer Bildschirmbreite. An den Breakpoints werden die Inhalte neu arrangiert oder gegebenenfalls ausgetauscht. In der neuen Preview von Reflow sitzt auch die Integration zu Webtype-Fonts und Typekit. Damit lassen sich selbst erstellte oder ausgefallene Schriften in die Seiten einbinden. Reflow exportiert nur CSS. "Wir werden kein neues Vollwerkzeug wie Dreamweaver bauen", erklärt Adobe Evangelist Paul Trani den Verzicht auf einen HTML-Export. Apropos Typekit: Ein Großteil der Fontbibliothek steht jetzt auch zur lokalen Installation auf dem Desktop zur Verfügung.
Edge Inspect erzeugt eine Live-Verbindung zwischen Desktop und einer App auf dem Mobilgerät. Letzteres liefert die Vorschau jedweden Browserinhalts auf dem Tablet. Änderungen, die zum Beispiel in Reflow erstellt werden, landen nach dem Speichern automatisch auf dem Tablet. Edge Code ist die Programmierkonsole dazu. Auch das Tool kann eine Live-Verbindung zum Browser und zum Tablet aufbauen. Ein nettes Feature namens Quick Edit springt direkt auf den Code zu ausgewählten Inhalten und erlaubt deren Bearbeitung. Eine Opensource-Version von Code namens "Bracket" steht auf Github zur Weiterverarbeitung zur Verfügung. Fehlt noch Phonegap. Es ist nicht direkt Teil der Edge-Familie, kann aber aus dem fertigen HTML- Javascript- und CSS-Code mit wenigen Mausklicks native Apps für Mobilgeräte erzeugen.
Unterm Strich ist der aktuelle Entwicklungsstand der Edge-Familie ein interessanter Zwischenschritt, Adobe ist aber noch lange nicht am Ziel. Beim strategischen Fokus aber lässt das Unternehmen keine Zweifel aufkommen. Von Flash wird kaum mehr gesprochen und das Projekt Fireworks wurde gestern zu Grabe getragen. (jo)
