29. Oktober 2013 | 1 Comment Hallo zusammen, diese Woche möchte ich euch den „Google Web Designer“ vorstellen! Bevor ihr nun an Programme wie Frontpage oder Dreamweaver denkt… Keine Sorge, es handelt sich hier nicht um einen „Homepage Baukasten“ đ Viel eher geht es um ein Programm, welches uns bei der Erstellung animierter Banner und Werbung hilft. NatĂŒrlich komplett auf Basis von HTML5, CSS und Javascript! Google Web Designer? Mehr Informationen, bitte! Der Google „Web Designer“ ist vor kurzem erst in der Beta-Version erschienen und bringt eine Ă€hnliche OberflĂ€che mit wie z.B. „Adobe Flash Professional“ und weitere Programme, bei denen animiert wird. Unter anderem gibt es Tools zum erstellen und modifizieren von Objekten, eine Zeitleiste und detaillierte Objekt-Informationen mit sĂ€mtlichen Eigenschaften des aktiven Objektes. Ăber die Tools lassen sich Objekte erstellen und auf allen Achsen drehen und bewegen. Mit Hilfe der Zeitleiste definieren wir wann welche Objekte welche Animationen ausfĂŒhren… Keine Sorge, das klingt komplizierter als es ist đ Wie genau funktioniert die Zeitleiste? Wer ein mal mit einem Animationsprogramm gearbeitet hat, kann sich ungefĂ€hr vorstellen wie es funktioniert: Auf der Zeitleiste werden sogenannte „Keyframes“ erstellt. AnschlieĂend definiert man pro Keyframe eine Stufe der Animation – Dadurch haben wir festgelegt, zu welchem Zeitpunkt welche Animation ausgefĂŒhrt wird. Was lĂ€sst sich animieren? Im Grunde steht uns die komplette Palette an CSS Eigenschaften zur VerfĂŒgung… Vor allem aber die CSS3 Features sind interessant: Objekte können auf allen drei Achsen bewegt und gedreht werden! Google verspricht dabei, dass das Ergebnis auf allen GerĂ€ten funktioniert – inklusive verschiedener Bildschirmauflösungen (Responsive!). Wie schaut der generierte Code aus? Zugegeben, der generierte Code ist ein ziemlicher Haufen CSS und Javascript… WĂ€hrend die CSS Regeln noch relativ nachvollziehbar sind, dĂŒrfte es beim Javascript schwer fallen… Es ist ein (auf den ersten Blick) wilder Mix aus JSON Konfigurationen, einer internen API und komprimiertem Code. An dieser Stelle mĂŒssen wir dem Programm vertrauen đ Was kann man sonst noch anstellen? „Nur“ animieren wĂ€re etwas langweilig, vor allem fĂŒr Google. Daher können die verschiedenen erstellten Elemente auf diverse Events reagieren… Wie z.B. das laden der Seite, berĂŒhrung (bzw. Klick), Ă€ndern der Ausrichtung (Bei Smartphones und Tablets), „schĂŒtteln“ usw. Allerdings beschrĂ€nken sich die Ereignisse dabei auf Weiterleitungen und das erreichen von Google Analytics Zielen / Messwerten. FĂŒr den Desktop scheint auĂerdem nur wenig dabei zu sein… Vielleicht fĂ€hrt Google hier eine Ă€hnliche Strategie wie Bootstrap: „Mobile first“. „Web Designer“ ohne wirkliches Web Design? Bei nĂ€herer Betrachtung stellt sich dieser Punkt als „vielleicht doch nicht so wahr“ heraus… Immerhin kann man in Googles Web Designer eigenen (HTML-, Javascript- und CSS-) Code schreiben und mit Hilfe der „Designansicht“ die HTML Elemente positionieren… Doch wenn ich das richtig erkenne geschieht diese Positionierung stets „absolut“ und dĂŒrfte sich somit streng genommen nicht eignen. Ich fĂŒrchte dieses Thema ist etwas schwierig – Es kommt dabei immer auf die Person an, die mit der Software arbeitet. Lasst uns nicht vergessen: Es handelt um eine Beta-Version… Wer weiĂ, was noch kommt? Bedienung? Die grundlegende Bedienung ist recht einfach gehalten und erinnert dabei an Programme wie Photoshop oder eben Flash. Viele Elemente lassen sich intuitiv erstellen, bearbeiten und animieren. Doch die Software gibt mir persönlich noch ein paar RĂ€tsel auf – So kann ich (scheinbar) nicht auf alle Elemente Events anwenden… Oder zumindest nicht, wenn ich beim erstellen eines neuen Dokuments keine Vorlage (Banner, Expandable, Interstitial) ausgewĂ€hlt habe. AuĂerdem gibt es einige eingebaute „Komponenten“ wie z.B. verschiedene Galerien („360° Galerie“, „Karussel-Galerie“, …), eine (Google Maps?) „Karte“ oder ein „Video“ / „Youtube Video“ – doch ich konnte keine dieser Komponenten sinnvoll zum laufen bringen. Vielleicht dienen diese als „Mockup“ (bzw. „Platzhalter“)…? Ich schĂ€tze ich werde einfach noch etwas Zeit in dieses Tool investieren mĂŒssen und vielleicht auf weitere Versionen warten. Bisher konnte ich noch keinen tatsĂ€chlichen Mehrwert erkennen (bis auf die einfache Animation von HTML Elementen). Ich hoffe ich konnte euch mit dem Google Web Designer etwas interessantes neues zeigen und kann euch auch nĂ€chste Woche wieder hier begrĂŒĂen! Bis dahin wĂŒnsche ich euch eine angenehme Herbst-Woche und natĂŒrlich Happy Coding!