Beautyful Apps with HTML5 / CSS3

Ted Johnson
Die großen Änderungen durch CSS3:
Transparenz, Verläufe, Runde Ecken, Schatten, Typografie
Aber die kennen wir alle schon seit ca. 1 Jahr. Bitte nicht wieder ein Hurra auf runde Ecken!
Aktuell fühlt sich das an wie Zeitverschwendung. Meine Hoffnung bezog sich auf Expression Blend für HTML.

Fazit: Alles ist schon längst bekannt und von Schönheit kann hier nicht die Rede sein.

Animationen in HTML-Metro-Apps

Dale Rogerson
Animationsmöglichkeiten in HTML5 über JavaScript sind vielfältig.
In Metro-Style-Apps kann die WIN-JS-Library-App genutzt werden. Der Unterschied zwischen Metro-Style-Apps und HTML-Website ist insbesondere die Bewegung durch die Seite. Im App-Fall bleibt man auf einer Seite, im Websitefall bewegt man sich von Seite zu Seite.

Animationen reichern Applikation an, lassen sie modern und emotional ansprechend werden.
In Metro-Style-Apps stehen dafür die WIN-JS-Libraries zur Verfügung. Da hier Editierung der Animations-JS-Dateien gezeigt wird, werde ich neugierig, ob ich das auch in Blend kann und schau mal auf dem neuen Tablet nach, wo die BlendBeta für Metro-Apps vorinstalliert ist. Und ich bin begeistert: Alle notwendigen JS-Datei sind implementiert und ich kann sie on top editieren.

Animationen für Metro-Style-Apps bekommt man mit den Libraries for free.
Beliebte Animationen in Metrostyle in HTML und XAML:
CrossFade, FadeIn-FadeOut, enterPage, transitionPage, transistionContent, expand/collapse, Add/Delete

Metro-Style-Apps für HTML in Blend

Christian Schormann
Der deutsche Schormann ist Teil des Expression Team von MS Corp. Am Beispiel eines Games wird er uns die
Historisch betrachtet ist HTML die eine Beischreibungssprache für UIs. Da UIs visuell ist, ist eine visuelle Bearbeitung logisch und notwendig.
Blend versteht sich auch als professionelles Designtool, weil man direkt visuell arbeiten kann. Ebenso ist es eine gute Schnittstelle zu den Entwicklern. Obschon Blend erst für XAML da war, ist Blend für HTML logisch und das optimale Tool.
Der große Teil von Blend ist das Bearbeiten der CSS-Styles sowie des HTML-Layouts. Blend hat durch den Interaktive Mode aber auch die direkte Bearbeitung im Build-Modus möglich gemacht. Blend wird in Visual Studio eingebunden, so dass das Workflow besser sein wird. Wir sind noch im Preview-Modus. Die Blend-XAML-Version kommt später.

Dann geht es in die Praxis. Am Beispiel des Memory-Spiels zeigt er erst mal das Output in verschiedenen Views wie Fullscreen, Snapscreen und Portrait. Das kann auch alles in Blend angezeigt werden.

Der Weg begann mit einer Skizze. Diese wurde von den Entwickler roh aufgesetzt als JS-Funktionen und HTML-DivLayer. Die Skizze ist rekommentiert worden vom Entwickler. Der Entwickler hat ein auf den ersten ein komplett ungestaltetes Layout geliefert, ohne Struktur, Design … nur reduziert auf Inhalte. Aber man kann mit diesen Inhalten schon interagieren. Durch Anwendung des Metrostyles-CSS-Datei sind sofort alle UI-Elemente per Default umgestylt. Für das spezielle Design wird ein neues Stylesheet hinzugebut. Es gibt also die default-Styles, die Metro-Styles und die eigenen app-Spezifischen. Zum Umlayouten werden die Gameelemente in ein neues Layoutelement gepackt – in ein Layoutgrid. Diese kann ich dann genauso editieren, wie ich es aus Blend kenne. Das Layout der Elemente passiert wie bekannt mit Zuordnungen in das Grid, mit Margins, mit Farben, Schriftgrößen … Um Elemente per Style umzudesignen lege ich ähnlich wie im XAML einen neuen Style an. Sehr viel kommt mir bekannt vor. Auch hier mache ich eine neue CSS-Klasse. Diese kann ich supereasy editieren: Anklicken, sehen wo ich bin, Eingeschaften live einstellen. Feine Sache. Die Javascript Funktionen kann ich über den Namen zugewiesen, so dass ich alles auch funktional angezeigt wird. Es gibt eine schicke neue Sache: Anzeige von VisualTreeElemente und gemeinschaftliches Editieren. Die perfekte Umsetzung wird im interaktive-Modus angezeigt. Über die Assets kann ich natürlich noch weitere Elemente hinzufügen wie z. B. Bilder. Im Abgleich mit den anderen ViewModus (Portrait) ist das Layout nicht mehr so toll. Das kann man mit entsprechenden Style-Style bzw. ContentDataTemplates abgefangen werden. Abhängig von der Media-Query, werden unterschiedliche Styles angesteuert. Die integrierten HTML-Controls verhalten sich ebenfalls ähnlich wie die von XAML. Sehr cool !

Blend-Features in Visual Studio Express 11

Joanna Mason, Unni Ravindranathan
Als Blendkenner sehen wir schon auf dem ersten Blick: Das besten von Blend wird in VisualStudio verfügbar sein. Der helle Look von VisualStudio bleibt allerdings erhalten.

Blendangelehnte Killerfeatures:
– Split-Modus
– Zooming innerhalb der Stage
– Auswahl der Objekte auf der Stage
– Brush-Editor
– Panel-Verhalten
– Objekt-Layer als visuelle Umsetzung der XAML-Layer
– Property-Panel im Stil von Blend
– Reset-Punkt für Properties
– Visuelles Masken-Editing
– Resourcen-Dialog
– Xaml-Tag-Assets

Feature-Erweiterung im Vergleich zu Blend:
– Template-Preview
– Grid-Einstellungen als Contextmenu.
– Drei Ansichten des Property-editor nach Source, Name, Kategorie
– Verbessertes Style-Editing über Contextmenus
– Sehr schöner Grid-Editor

Nun ein kleines Fazit zu dem Gesehenen: In Visual Studio und Blend werden die Sachen zusammengezogen, die zusammen gehören, ohne die Programme zusammen zu führen. Das birgt den Vorteil, dass man nun nicht mehr wechseln muss, um kleine Änderungen durchzuführen als Entwickler. Designer werden sich in Blend bewegen, Entwickler im Visual Studio. Die vielen Möglichkeiten, nun visuell zu arbeiten, bergen zwei Gefahren: Designer halten sich noch mehr aus dem XAML-Umsetzungspart raus, was das VisualStudio die Tätigkeit nun Entwicklern indirekt zuweist. Entwickler fühlen sich nun als Designer berufen, weil ihnen nun die WYSIWYG-Mittel zur Verfügung stehen (die ihnen durch Blend eh zur Verfügung standen und ungenutzt bleiben). Es steht zu befürchten, dass die nun für Windows 8 sehr gut zusammenarbeiten sollten, es doch nicht tun. Da wir hier aber auf einer Entwickler-Konferenz sind, finde ich diese Änderungen an VisualStudio hervorragend sowie auch die Tools, die den Entwicklern zur Umsetzung toller Metro-Apps gegeben werden.

Das VisualStudio 2011 PreView ist verfügbar, aber sollte zügig mit einem Update versorgt werden, weil es noch ziemlich buggy ist.