Workflow
Adobe: neue HTML5-Webtools in der Creative Cloud
Montag 18. Februar 2013 - Adobe Systems hat die erste öffentliche Preview-Version von Adobe Edge Reflow bereitgestellt. Adobe Edge Reflow ist ein Designtool für das Responsive Web, welches Designer und Entwickler bei der Erstellung von Web-Content für unterschiedliche Geräte und Auflösungen unterstützt.
Zusätzlich wurden Funktions-Updates für Adobe Edge Animate, Adobe Dreamweaver und Adobe Edge Code Preview 3 zur Verfügung gestellt. Diese aktuellen Produktveröffentlichungen sind exklusiv für Mitglieder der Adobe Creative Cloud zugänglich.
Adobe Edge Reflow ist ein neues Werkzeug für Responsive Webdesign, mit dem sich Layouts und visuelle Designs mit CSS gestalten lassen. Reflow setzt keine fest definierte Breite des Gestaltungsbereichs voraus. Die Software ermöglicht erstmalig ein intuitives und visuelles Erarbeiten von Layouts, die sich dynamisch an verschiedenste Darstellungsbreiten anpassen. Adobe Edge Reflow selbst wurde vollständig mit HTML, CSS und JavaScript umgesetzt. Da die Software von der Browserengine WebKit dargestellt wird, arbeiten die Anwender an der Echtdarstellung ihrer Designs. Zusätzlich gibt es eine Live-Vorschau im Browser und die synchronisierte Anzeige des Entwicklungsstands auf verschiedenen Geräten wie Smartphones und Tablets via einer Edge Inspect Extension. Ferner ist die Extraktion von CSS-Code für die Verwendung in Edge Code, Dreamweaver oder anderen Code-Editoren möglich.
Des Weiteren kündigte Adobe ein Update für Adobe Edge Animate an, welches das Animationswerkzeug um neue CSS-basierende Funktionen wie Farbverläufe, CSS Filters und eine erweiterte Font-Unterstützung ergänzt. Nutzer haben ab sofort die Möglichkeit, beim Gestalten und Animieren von Elementen auf radiale oder lineare Farbverläufe zurückzugreifen. Zusätzlich wird die Auswahl der Web-Fonts durch die Darstellung im neuen Vorschaufenster erleichtert. Neu ist die Möglichkeit, in Edge Animate die Anwendung von CSS Filters auf Elemente zu definieren, womit fortschrittliche Effekte in modernen Browsern möglich werden. Dies umfasst unter anderem Weichzeichnungs-, Graustufen-, Sepia-, Helligkeits-, Kontrast-, Farbton-, Umkehren- und Sättigungsfilter. Bisher waren solche Filtereffekte ausschließlich über die Nutzung von Werkzeugen wie Adobe Photoshop realisierbar.
Zeitgleich bietet Adobe allen Mitgliedern der Creative Cloud ein Update für Adobe Dreamweaver, welches das Zusammenspiel mit den Werkzeugen der „Adobe Edge Tools & Services“-Familie verbessert und diverse neue Funktionen mit sich bringt, welche die Arbeit am Code und Entwicklungsworkflows verbessern. Die Funktion Fluid Grid Layout, die seit der CS6-Version integriert ist, wurde überarbeitet. Innerhalb der neuen Bearbeitungsoberfläche können Entwickler jetzt zusätzlich zu ID-Tags auch Class-Tags nutzen. Weiterhin können Edge Web Fonts ab sofort unkompliziert vorab gesichtet, ausgewählt und in Dreamweaver-Projekte eingebunden werden.
Die bereits veröffentlichte Preview von Adobe Edge Code beinhaltet Features wie Live-Development, welches Änderungen im Code sofort bei der Bearbeitung im Browser sichtbar macht, sowie Quick Edit, das es erlaubt, Code im Kontext zu ändern, ohne zwischen einzelnen Dateien hin und her wechseln zu müssen. Die Adobe Edge Code Preview 3 bietet auch Code-Hinweise zu CSS-Eigenschaften sowie HTML-Tags und -Attributen.
„Durch sich rasant weiterentwickelnde Webstandards und die steigende Anzahl unterschiedlich auflösender Geräte steigen die Anforderungen an Webdesigner und -entwickler“, sagt Paul Gubbay, Vice President für Product Development im Bereich Digital Media bei Adobe. „Mit der Adobe Creative Cloud können wir unseren Kunden die neuesten Produktinnovationen sofort nach deren Fertigstellung anbieten. So helfen wir Designern und Entwicklern, die aktuellen Herausforderungen des modernen Web zu bewältigen und Webseiten sowie interaktiven Content für aktuelle Browser und verschiedene Bildschirmgrößen zu erstellen.“
