Creative Cloud: Adobe baut Web-Design-Workflow aus

Einige Web-Werkzeuge der Creative Cloud sind Work-in-Progress, weshalb sich Edge Reflow und Edge Code immer noch im Preview-Status befinden und kostenlos nutzen lassen. Mit dem Release der Creative Cloud 2014 tut sich aber einiges.

In Pocket speichern vorlesen Druckansicht
Lesezeit: 6 Min.
Inhaltsverzeichnis

Web-Techniken ändern sich laufend. Das sieht man schon an den in schwindelnde Höhe steigenden Versionsnummern aktueller Browser. Daher ist gerade der Web-Bereich innerhalb der Creative Cloud den größten Änderungen unterworfen. Nur wenige Programme, darunter Dreamweaver und Flash Pro, haben die gleiche Kontinuität wie etwa Photoshop oder InDesign. Einige neuere Tools der Edge-Reihe befinden sich dementsprechend noch in einem experimentellen Status. Alle vorgestellten Tools stehen im Rahmen der Creative Cloud zur Verfügung.

Bei der neuen Version von Dreamweaver hat Adobe die Live-Editing-Funktionen erweitert. In der verbesserten Live-Ansicht lassen sich Elemente wie Überschriften und Fließtext direkt bearbeiten – früher musste man zwischen Code-Ansicht und Vorschau wechseln. Die Anwendung validiert außerdem Code-Elemente, ohne die Live-Ansicht zu verlassen. Zuvor blieben die Eigenschaften in der Vorschau ausgegraut.

Der Property Inspector stellt die wesentlichen HTML-Code-Eigenschaften in einem Kontextmenü bereit. Die Einfügen-Palette bietet nun Formular-Elemente an, mit denen sich etwa ein Feedback-Formular zusammenklicken lässt. Die Quick-View-Palette zeigt einzelne Bereiche des HTML-Baums dar, etwa DIV-Elemente, den Header oder den Footer. Die DIVs kann man mit der Maus neu arrangieren.

Die aktuelle Live-Ansicht kann einige Dinge darstellen, die der alte Dreamweaver nicht anzeigen konnte, etwa CSS-Shapes. Außerdem gibt es Verbesserungen am CSS-Designer und Code-Editor. Letzterer enthält dieselbe Auto-Vervollständigung für HTML-Tag-Eigenschaften wie das oben genannten Kontextmenü. Video-Tutorials zeigen übrigens alle neuen Funktionen direkt in der Anwendung.

Flash Pro fristet weiterhin nur noch ein Nischendasein. Ein neuer Exportdialog gibt einzelne Frames als SVG-Dateien zur Weiterverarbeitung in Edge Reflow und anderen Tools aus. Inhalte, die mit Flash erstellt wurden, lassen sich für WebGL ausgeben und mit entsprechenden Browsern damit hardwarebeschleunigt wiedergeben. Der in der Vorversion rausgeflogene Motion Editor ist nun wieder drin.

Die Bedienoberfläche des Web-Design-Tools Muse lehnt sich an DTP-Programme an und empfielt sich daher für InDesign-Nutzer.

Das Webseiten-Tool Muse bietet sich eher als Dreamweaver für den klassischen Designer an, da sich die Benutzeroberfläche an InDesign anlehnt. Es nutzte bis Ende 2013 die Laufzeitumgebung Adobe Air und steht mittlerweile als native 64-Bit-Anwendung zur Verfügung.

Das Programm ist in die Arbeitsbereiche Plan, Design, Preview, Publish und Manage unterteilt. Zunächst wählt man die Seiten-Option Desktop, Tablet oder Phone, kreiert anschließend eine Seitenstruktur mit horizontaler und vertikaler Navigation, erstellt Master-Elemente, die auf jeder Seite zu finden sind und fügt schließlich Inhalte ein.

Designer können ihren Kunden über Muse erlauben, Text und Bilder direkt im Browser zu ändern, ohne dass diese Muse installiert haben müssen. Der Ersteller der Seite bekommt in Muse bei Bearbeitung durch den Kunden allerdings eine Nachricht und kann die Änderungen bei Bedarf widerrufen. Im Web stehen unter Adobe Add-ons Vorlagen und Plug-ins bereit, die die Webseiten-Erstellung vereinfachen sollen.

Edge Animate erstellt interaktive und animierte Kompositionen fürs Web, indem es Zustandsänderungen wie Transparenz, Größe und Position über eine Zeitleiste steuerbar macht wie andere Animationsprogramme auch. Animate erzeugt daraus HTML und CSS und choreographiert das Ganze mit JavaScript.

Das neue Release sucht den Schulterschluss mit Illustrator. Grafiken lassen sich dort in die Zwischenablage kopieren und in Animate als SVG-Datei einfügen. Sprite-Sheets mit mehreren Einzelbildern einer Animation, wie sie Flash Pro erstellt, ordnet Animate wieder halbautomatisch zu einer einzigen Grafik. Wenn man das Sheet in Animate importiert, muss man der Anwendung nur sagen, wie viele Einzelbilder zu finden sind und wie das Raster aussieht.

Animate bringt laut Adobe ein komfortables Handling für HTML5-freundliches Video mit. Nach wie vor unterstützen die Browser unterschiedliche Videoformate wie Ogg Vorbis, MP4 oder WebM. Edge Animate kümmert sich um die Zuweisung. Ein neuer Aktions-Editor hilft beim Erstellen von Code, indem man sich von der Aktion wie einem Klick zu einem Ereignis wie dem Abspielen eines Videos durchklickt.

Das Tool für responsives Web-Design Edge Reflow gibts weiterhin nur auf Englisch und auch die neue Version ist lediglich eine weitere Preview, also laut Adobe noch nichts Fertiges – man sammele noch Erfahrungen, bevor man dafür Geld verlangen wolle.

Design beginnt häufig in Photoshop. Die Struktur aus Gruppen und Ebenen sowie deren Namen behält Reflow nach dem Import der Photoshop-Ebenen bei. Das Programm platziert Formular-Elemente, setzt Links für eine spätere Navigation, kann mehrere Elemente gleichzeitig verschieben und HTML-Seiten ausgeben. Dafür hatte Adobe es eigentlich nicht vorgesehen, in der Vergangenheit haben Nutzer den Code aber aus versteckten temporären Verzeichnis gefischt, also hat Adobe den HTML-Export realisiert. Der Code gilt allerdings als nicht publizierbar, sondern lediglich als Zwischenstufe.

Die neueste Preview von Edge Code – ebenfalls noch unfertig – ist bereits im Mai erschienen. Voreinstellungen für Projekte und Dateien bestimmen in der neuen Version den Einzug für JavaScript und HTML. Im Editor lässt sich der Cursor an verschiedene Stellen setzen, um Code an mehreren Stellen gleichzeitig zu bearbeiten. Der CSS-Shapes-Editor übernimmt Polygone, etwa für den Textfluss an komplexen Formen, direkt aus dem Browser – per Mauseingabe. Als kostenlose Alternative kommt das von Adobe gestartete Open-Source-Programm Brackets in Betracht, auf dem Edge Code basiert.

Siehe dazu auch:

(akr)