Adobe erneuert Webdesign und-entwicklung

Nicht nur Photoshop wurde in der seit Mitte Mai erhältlichen Creative Suite 5 deutlich aufgewertet – siehe Test in der vorangegangenen Ausgabe des Swiss IT Magazine. Auch die Tools für Webdesign und Webentwicklung haben in der neuesten Ausgabe von Adobes Kreativwerkzeug-kasten einen massiven Schub erhalten: Neben Verbesserungen und neuen Funktionen in Flash Professional und Dreamweaver ist mit Flash Catalyst ein zusätzliches Tool hinzugekommen, das die Brücke zwischen Designer und Entwickler schliessen soll. Ausserdem ist das Eclipse-basierte Flex-Entwicklungstool Flash Builder nun Teil der Web-Premium-Ausgabe der CS5, und das Seitenlayoutprogramm InDesign, enthalten in der Design-Premium-Suite, bietet neue Funktionalität zur Ausgabe von interaktiven Inhalten auf Basis eines zunächst für den Druck gestalteten Layouts. Die Themen Crossmedia und Interaktivität stehen klar im Vordergrund der CS5-Philosophie – auch wenn die an sich erfreuliche Aussicht, aus einer Quelle heraus diverse Plattformen inklusive mobiler Internetgeräte zu bedienen, durch Apples sture Weigerung, Flash-Inhalte auf iPhone, iPod Touch und iPad zuzulassen, doch merklich getrübt wird.

Mehr Dynamik für Dreamweaver

In der CS5-Version bietet Dreamweaver diverse zusätzliche Features, die den Umgang mit dynamischen Webseiten erleichtern sollen. In erster Linie werden dabei PHP-basierte Webanwendungen sowie Client-seitige Javascript-Logik unterstützt. Das Kern-Feature heisst «Dynamically Related Files»: Dreamweaver informiert, falls die aktuell bearbeitete Seite weitere Dateien bedingt, sucht per Mausklick auf die Option «Discover» alle mit der aktuell bearbeiteten Seite zusammenhängenden Files und stellt diese in der «Related Files»-Toolbar zum Direktzugriff zusammen. Dabei werden alle Includes samt referenzierten Javascript-, PHP- und CSS-Dateien berücksichtigt. Eine Filterfunktion erlaubt, nur bestimmte Dateitypen anzuzeigen. Wird gleichzeitig die Option «Live View» aktiviert, präsentiert Dreamweaver die an den Includes vorgenommenen Änderungen sofort auch auf der ursprünglichen Seite.

Dazu sollte die gesamte Site allerdings nicht nur im Filesystem liegen, sondern mit voller Funktionalität (PHP, Datenbank) auf einem lokalen Testserver laufen. Alle so vorgenommenen Anpassungen an den Includes müssen später natürlich auch auf den Live-Server übernommen werden – falls ein Content-Management-System wie Drupal, Joomla oder eine Blog-Software wie Wordpress eingesetzt wird, muss man allenfalls durch den automatischen Installer dieser Systeme installierte Dateien nachträglich durch die in Dreamweaver geänderten Versionen ersetzen.

Auch die Live-View-Funktion selbst hat Adobe in Dreamweaver CS5 ergänzt: Mit der Option «Live View Navigation» werden die Links in der per Live View angezeigten Browserdarstellung aktiv und können angeklickt und verfolgt werden. Die dynamischen Änderungen, die bei der Interaktion mit Javascript- und PHP-Scripts anfallen, werden parallel dazu auch in der Code-Ansicht dargestellt. Auf diese Weise lassen sich zudem auch Seiten untersuchen, die nicht auf dem lokalen Testserver, sondern auf einem Live-Webserver im Internet liegen.

Spezial-Support für PHP

PHP-Entwickler profitieren vom neuen «PHP Custom Class Code Hinting»: Dreamweaver analysiert den PHP-Code während der Eingabe und präsentiert zu den verwendeten Funktio-nen diverse Informationen wie Funktionssignatur, das Modul, in dem die Funktion definiert ist, eine Beschreibung von Methoden und Parametern, einen Link zur entsprechenden PHP.net-Manualpage sowie die Angabe, in welchen PHP-Versionen die Funktion zur Verfügung steht. Das meiste funktioniert auch mit selbst definierten Funktionen und Klassen und mit 3rd-Party-Frameworks wie demjenigen von Zend.

CSS-Inspektion integriert

In der Vergangenheit, so Adobe, seien externe CSS-Tools nötig gewesen, um die CSS-Elemente einer Seite mit den zugeordneten Styles visuell anschaulich zu machen. Das neue Dreamweaver-Feature «CSS Inspect» soll dies überflüssig machen. Es arbeitet eng mit dem Live-View-Modus zusammen: Einerseits werden im Inspect-Modus die wichtigsten Eigenschaften des CSS-Boxmodells wie Grösse, Ränder und Padding in der Design-Ansicht farbig visualisiert. Gleichzeitig werden sämtliche dem ausgewählten HTML-Element zugeordneten CSS-Regeln samt der ganzen Kaskade im Panel «CSS Styles» angezeigt, wo sie auch angepasst werden können – bei Änderungen erfolgt sofort ein Feedback in der Design- und der Code-Ansicht.

Damit sich die Auswirkung einer bestimmten CSS-Property noch einfach beurteilen lässt, kann man im CSS-Styles-Panel jede Eigenschaft mit einem einfachen Mausklick ein- oder ausschalten. Auch hier gibt die Design-Ansicht sofort Feedback. Technisch wird die deaktivierte Eigenschaft jeweils in einen Kommentar gehüllt, was sich auch in der Code-Ansicht der Datei widerspiegelt, in der die Eigenschaft definiert ist.

Besonders für CSS-Anfänger sind die verbesserten Starter-Layouts interessant. Die rein CSS-basierten Layout-Vorlagen wurden komplett überarbeitet. So sind die Bereiche wie Header, Sidebar und Content nun verschiedenfarbig hinterlegt, und Anleitungen und Kommentare sind sowohl im Code als auch im direkt lesbaren Text enthalten. Unter der Haube wurden komplexe Konstrukte mit verschachtelten Selektoren durch einfache, leicht verständliche Strukturen ersetzt.

ervergleich integriert

Neben den Programmpaketen bietet die CS5 auch Zugang zu diversen teils neu lancierten Online-Diensten, den Adobe CS Live Services. Einer dieser Dienste nennt sich Browserlab (http://browserlab.adobe.com): Damit können Webseiten auf Cross-Browser-Kompatibilität getestet werden. Browserlab stellt die gewünschte Seite parallel in zwei wählbaren Browsern und Browserversionen dar, auf Wunsch auch in einer Onion-Skin-Ansicht, in der die Unterschiede durch direkte Überlagerung besonders deutlich werden. Die Anzeigestärke der beiden Varianten lässt sich dabei mit einem Crossfader stufenlos variieren. Browserlab lässt sich auch ausserhalb von Dreamweaver nutzen – neu kann man eine in Dreamweaver bearbeitete Seite jedoch per Mausklick direkt in Browserlab öffnen und vergleichen.

Die übrigen CS-Live-Services sind ebenfalls direkt aus den passenden CS5-Anwendungen heraus nutzbar – es gibt zum Beispiel den Review-Dienst CS Review, mit dem sich Entwürfe zum Kommentieren an Kunden übermitteln lassen. Auch das Online-Office Acrobat.com ist Teil der CS-Live-Services. Fürs Erste sind die Dienste gratis, später werden Abonnementsgebühren anfallen. Details zu den Kosten nennt Adobe indes bisher nicht.

Flash CS5: Typo Ahoi

Mit dem Flash-Player 10 hat Adobe eine neue Text-Engine und ein neues Text-Layout-Framework mit markant erweiterten Möglichkeiten und deutlich verfeinerter Typografie eingeführt. Die CS5-Version von Flash Professional macht diese technischen Verbesserungen nun den Kreativen zugänglich, die die Inhalte erstellen und gestalten. Neu erlaubt Flash verkettete Textrahmen, mehrspaltigen Text, sowohl referenzierte als auch inline eingebundene Bilder, Tabulatoren und Textumfluss um eingebettete Grafikelemente – also praktisch alles, was man auch von einem für die Print-Welt geeigneten Seitenlayoutprogramm erwarten kann.

Auch typografische Feinheiten werden mit Flash CS5 möglich. Die neue Version unterstützt Kerning, Spationierung, Ligaturen, Einstellung des Durchschusses, Grundlinienversatz, Höher- und Tieferstellung sowie weitere Detailanpassungen der Zeichen- und Absatzdarstellung. Auch für nichteuropäische Sprachen ist gesorgt, zum Beispiel durch Unterstützung unterschiedlicher Schreibrichtungen (von rechts nach links, von oben nach unten und gemischt links-rechts/rechts-links) oder durch einen speziellen Blocksatzgenerator für asiatische Sprachen. Sämtliche neuen Einstellmöglichkeiten sind im Eigenschaften-Panel über diverse Aufklapp-Sektionen zugänglich, sobald ein Textelement ausgewählt ist. Einige Eigenschaften können auch direkt im Arbeitsbereich übers Kontextmenü bearbeitet werden. Mit der neuen Text-Engine geht Flash weit über das hinaus, was mit konventioneller Webtypografie inklusive HTML5 und CSS3 möglich ist.

Für Entwickler und Animatoren

Auch bei Flash hat Adobe nicht nur an die altgedienten Cracks, sondern auch an die Anfänger gedacht: Das neue Panel «Code Snippets» enthält, übersichtlich kategorisiert, eine Vielzahl gut kommentierter Actionscript-Schnipsel für gängige Aufgaben. Diese lassen sich per Mausklick einem geeigneten Symbol auf der Arbeitsfläche beziehungsweise einem Frame der aktuellen Animation zuordnen. Zusätzlich zu den mitgelieferten Snippets lässt sich das Panel mit eigenem Beispielcode bestücken, der dann in der gleichen Weise zur Verfügung steht. Der eigentliche Actionscript-Editor bietet in Flash CS5 Code-Hinting und Vervollständigung für eigene Klassen und vereinfacht die Entwicklung zum Beispiel, indem das Import-Statement für externe Bibliotheken automatisch generiert wird. Erfahrene Entwickler können ausserdem nun ihren Actionscript-Code im Eclipse-basierten Code-Editor von Flash Builder schreiben und ihn danach in Flash Professional testen, debuggen und verfeinern – dazu genügt es, im Flash Builder die Optionen «Test Movie» oder «Debug Movie» aufzurufen, worauf die Verarbeitung automatisch an Flash Professional übergeben wird.

Für natürlichere Animationen sorgt das neue Feature «Spring for Bones». Flash bietet bereits seit einigen Versionen ein System für inverse Kinematik (IK). Neu lässt sich die Animation der untereinander verbundenen IK-Elemente, auch als «Bones» bekannt, mit zwei zusätzlichen Eigenschaften natürlicher gestalten, die einer physikalischen Feder entlehnt sind. Für jedes einzelne Bone kann man die Parameter «Strength» (Stärke der Feder) und «Damping» (Widerstand, der die Zeit beeinflusst, in der das Element sich wieder in die Ausgangsposition zurückbewegt) einstellen. Auf diese Weise lassen sich natürlich ausse-hende Bewegungsabläufe umsetzen – neben eigentlichen Federn können so zum Beispiel Schilfhalme dargestellt werden, die sich im Wind wiegen, oder ein Wackelpudding, der bei Berührung zittert.

Roundtrip Designer – Entwickler

Moderne Webprojekte bestehen kaum mehr bloss aus simplen statischen HTML-Seiten, sondern fordern fast immer interaktive Inhalte sowie applikatorische Funktionen, die Serverseitige Logik bedingen. Mit der Entwicklung einer Webseite sind dementsprechend nicht nur Designer, sondern auch Entwickler betraut – und diese Funktionen werden meist nicht in Personalunion geführt.

Die Kommunikation zwischen Design- und Entwicklungsteam ist oft eher mühsam, weil die Umsetzung der zum Beispiel in Photoshop entworfenen Gestaltung in eine interaktive Webseite nicht automatisch vor sich geht. Sobald dann Änderungen gewünscht werden, geht der Zyklus wieder von vorne los, und die bereits einmal getätigte Umsetzungsarbeit fällt erneut an.

Zumindest für Flash/Flex-basierte Webanwendungen macht Adobe mit der neuen CS5-Komponente Flash Catalyst Schluss mit diesem komplizierten Prozedere. Mit Flash Catalyst kann der Designer in den Adobe-Programmen Photoshop, Illustrator oder Fireworks erstellte Seitenlayouts in eine interaktive Oberfläche umwandeln, ohne eine einzige Zeile Actionscript- oder Flex-Code zu schreiben: Flash Catalyst generiert diesen Code im Hintergrund automatisch.

Dem Designer stehen vorgefertigte Komponenten wie Buttons, Slider, Scrollbars, Eingabefelder, Checkboxen und datengetriebene Lis-tendarstellungen zur Verfügung. Diese Komponenten plaziert man wie in einem Seitenlayoutprogramm auf der Arbeitsfläche, die Grundfunktionalität wird mit Hilfe diverser Eigenschaften-Panels festgelegt. Das Aussehen dieser Komponenten lässt sich in einem der unterstützten Grafikprogramme jederzeit anpassen – einmal festgelegte Funktionalität geht dabei gemäss dem «Roundtrip-Editing»-Prinzip nicht verloren. Analoges gilt, wenn der Entwickler in Flash Builder am Code etwas ändert, den Flash Catalyst generiert hat.

Als zweite Option ermöglicht Flash Catalyst, aus bestehenden Grafikelementen interaktive Komponenten zu machen. So entsteht zum Beispiel aus mehreren Photoshop-Ebenen ein Panel mit verschiedenen, über Buttons abrufbaren Inhalten – bei der Umwandlung mit dem Befehl «Convert Artwork to Component» werden Photoshop-Layers, Fireworks-Pages oder Illustrator-Artboards je nach Funktion des jeweiligen Elements in adressierbare applikatorische Zustände (States) oder Seiten (Pages) konvertiert, die sich per Script ansteuern lassen. Auf diese Weise lassen sich interaktive Elemente mit beliebigem Aussehen gestalten. Buttons, Scrollbars, Menüs und andere Steuerelemente bleiben nicht auf das 08/15-Aussehen der typischen HTML-Formularelemente beschränkt.

Die Entwicklung interaktiver Oberflächen mit Flash Catalyst geht nach einiger Übung flott vonstatten. Als Anfänger muss man sich allerdings in eine neue Welt aus States, Pages, Ebenen und Eigenschaften einarbeiten. Auch völlig ohne Programmierkenntnisse lassen sich dann aber ansprechende Webanwendungen erstellen – erst wenn wirklich Server-seitige Logik benötigt wird oder eine Datenbank angebunden werden muss, braucht es zusätzlichen Code.

Der Pferdefuss: Mit Flash Catalyst ist man auf die Rich-Internet-Plattform von Adobe festgelegt. Am Schluss des Prozesses steht grundsätzlich eine SWF-Datei oder eine AIR-Applikation. Auf dem Zielgerät muss also der Flash-Player installiert oder das AIR-Runtime unterstützt sein. Eine interessante Weiterentwicklung des Produkts wäre die Möglichkeit, die erstellten Anwendungen auch als rein HTML/CSS-basierten Output zu erhalten – Stichwort HTML 5 lässt grüssen. Adobe hat zwar vage in Aussicht gestellt, künftig auch HTML-5-Tools ins Auge zu fassen. Ob es allerdings jemals einen «HTML5 Catalyst» geben wird, steht noch völlig in den Sternen.