Neue Tools für Webentwickler – Create the Web

Vor inzwischen bereits 3 Wochen war ich in Hamburg auf der Adobe Create the Web Tour. In einer netten Location haben sich Webentwickler, Projektleiter etc. getroffen, um einiges über die neuesten Tools aus dem Hause Adobe zum Thema Webentwicklung zu erfahren.

Nach zwei einfürenden eher allgemeinen Talks zur Geschichte des Web (Volker Graubaum) sowie zum Thema Responsive Webdesign bzw. dem Repsonsive Webdesign Process (Sven Wolfermann), wurden uns in mehreren Präsentationen die neuesten Adobe Edge Tools vorgestellt.

Edge Animate

Bei Edge Animate handelt es sich um eine neue Entwicklungsumgebung zum Thema Motiondesign. Hier ist das Ziel von Adobe, das Auslaufmodell Flash durch ein neues Tool zu ersetzen, welches ohne notwendige Plugins komplett auf Basis von HTML und CSS arbeitet. Adobe geht hiermit den sicheren Weg der Standardtechnolgien, welche inzw. auch für komplexere Animationen, Spiele etc. einsetzbar sind.

Ähnlich dem Flashansatz, gibt es eine Stage und eine Timeline, worüber Animationen recht simpel erstellt werden können.

Was mir sehr gut gefallen hat, ist der anscheinend sehr saubere und gut lesbare Code, der von Edge Animate produziert wird. Sehr beeindruckend war zudem, dass Animationen auch in bestehende Websites integriert werden können, ohne dabei den vorhanden Code zu verändern. Ich bin mir sicher, dass Adobe mit Edge Animate auf dem richtigen Weg ist. Großes Lob übrigens an Simon Widjaja, der die Inhalte sehr interessant rübergebracht hat und demnächst auch ein Buch zum Thema veröffentlichen wird.

Screenshot Edge Animate - Motion Design

 

Brackets / Edge Code

Unter dem Namen Brackets entsteht ein hauseigener Codeeditor, welcher selber unter Verwendung aktueller Webtechnologien geschrieben wurde.

Die Lizenz, unter der Brackets veröffentlicht wird erlaubt anscheinend jegliche freie Nutzung und Veränderung des Editors.

Besonders interessant fand ich den Ansatz, dass ich beim Editieren in einer HTML-Datei gleich Änderungen in meiner CSS Datei vornehmen kann, ohne zu dieser Datei wechseln zu müssen. Ähnlich wie beim Editor Espresso,den ich z.Z. gerne verwende, werden Inhalte in Echtzeit in einer Vorschau gerendert, so dass ich mir das Speichern der HTML bzw. CSS Dateien und das Reloaden des Browers sparen kann.

Sicherlich werde ich Brackets bzw. Edge Code weiter im Blick behalten!

Screenshot Edge Code bzw Brackets

 

Phonegap

Phonegap bietet die Möglichkeit der Erstellung hybrider Apps. Das heisst, dass ich auf Basis von HTML und CSS eine Seite erstellen und hieraus über Phonegap eine App für verschiedenste Plattformen generieren kann. Das Interessante dabei ist, dass hierbei auch auf native Funktionen zugegriffen werden kann.

Zwar habe ich auf verschiedene Veranstaltungen schon von Performanceproblemen im Liveeinsatz von Phonegap-Apps gehört, ab ich denke, dass es zumindest für den Einsatz “kleinerer ” Apps interessant ist.

Soweit es die Zeit erlaubt, werde ich auch hierauf demnächst einen genaueren Blick werfen.

Edge Reflow

Der für mich spannendste Punkt des Tages war die Sneak Preview von Adobe Edge Reflow. Da der Artikel etwas länger geworden ist, habe ich Edge Reflow einen eigenen Blogpost gewidmet.

Adobe Edge Inspect

Zu guterletzt wurde Edge Inspect vorgstellt, welches vorher bereits unter dem Namen Adobe Shadow bekannt war. Edge Inspect ermöglicht es, mehrere mobile Devices mit einem Rechner zu verbinden und über eine Chrome Extension aktuelle Ansichten (Websites) aus Chrome auf den verbundenen Geräten ohne Reloads anzuzeigen. Zudem bietet es unter Integration von Weinre die Möglichkeit eines Debuggings ähnlich dem Firebug bzw. den Chrome Devtools auf den mobilen Geräten, was natürlich unglaublich nützlich für uns Webentwickler ist.

Neu war für mich, dass man über den Rechner zentral den Cache aller gekoppelten Geräte leeren kann. Zudem lassen sich zentral Screenshots von allen Geräten erstellen, welche alle in einem zentralen Ordner auf dem Rechner abgelegt werden. Neben dem Screenshot werden zudem wohl auch Textdateien mit Infos zu jeweiligen Ladezeiten, Dateigrössen etc. abgelegt.

Da das Testen auf möglichst viele (echten) Geräten in der Entwicking von mobilen bzw. responsiven Websites sehr wichtig ist, nimmt einem Edge Inspect sehr viel Arbeit ab. Fehlen ggf nur noch die vielen Devices zum Testen. Hierzu solltest Du Dich nach Open Device Labs in deiner Nähe umschauen, welche verschiedenste Geräte zum Testen zur Verfügung stellen.

Typekit

Nur kurz erwähnt sei hier Typekit, welches Dir eine großeAnzahl zum Teil kostenlos nutzbarer, hochqualitativer Webfonts zur Verfügung stellt, die nach Aussagen von Adobe auf verschiedenen Browsern nahezu gleich gut gerendert werden.

Wenn du Nutzer der Creative Cloud bist, stehen alle verfügaren Lizenzen zur Nutzung zur Verfügung. Ich werde also demnächst mal als Alternative zu den Google Webfonts Typekit testen.

Alles in allem ein nettes Event in Hamburg, bei dem ich, neben Networking auch einige – wenn auch nicht viele – neue Infos zu den Adobe Tool erfahren habe. Vielen Dank an die Veranstalter!

http://html.adobe.com/edge/