HTML 5 Design and Development Tooling

Changed from "Rearchitecting amazon.com for the Cloud" - had enough Amazon sales speech last time...

Agenda

• Edge - Motion and Interaction Design Tools
• Webkit contributions - CSS Regions, CSS Shaders
• JQuery Mobile
• PhoneGap
• Flash News

Presentation slides here.


Adobe Edge

New web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML 5, CSS 3, etc.

• Live Demo - quite powerful tool (produces Java Script)

Webkit contributions

The Adobe CSS shaders proposals went via W3C (see here)

• allows effects on any elements of the DOM
• Live demo with Chromium (which implemented this spec) using CSS Shaders studio
• wurp, fold effects kind of cool
• works directly on actual HTML content (videos, animations, selections, all still work in the animated pages) - example given with untouched Google maps site embedded in animation some animations/effects
• real cool and easy to use to add artistic elements to standard web content
• shaders not already available - pending standard publication

JQuery mobile + PhoneGap

• can run as an app or withing the browserit creates a native shell with a web view which load the web content or application
• used to publish to android, ios, etc.
• demo showing how to package web content from a browser to IOs by using XCode PhoneGap extensions
• Xcode=Apple's IDE for IOS applications
• saw an IPad simulator showing how the app would look on an actual IPad
• Then an IPhone simulator was only a click away.
• generated application deployable to AppStore for example.
• he then tested in on an actual device instead of than on a simulator
• very easy to test applications for various platforms/devices
• he then tried it on an Android phone (with a produced android app output from Eclipse instead of XCode)

2 problems with what was demoed so far

• multiple IDEs/tools for multiple target platforms (Xcode for IOS, Eclipse for Android, windows, etc.)
• debugging remote html applications when it runs on a device

for the first problem, phonegap offers a a builder service in the cloud on EC2 (see build.phonegap.com) - all connectable to a Git repository

for the later problem, they developed the Web Inspector Remote tool (called also weinre), similar to web application debuggers such as the one in Chrome, Firebug, etc.)

Flash news

• Adobe painted as non HTML company... which they claim is not the case
• They think Flash and Flex are still useful in certain cases (pear to pear application for examples - ex: game with 2 players, another ex: enterprise application: ) like real-time data streaming, collaboration sessions between multiple users/devices, etc.

Conclusion

Kind of amazing how easy it was to develop animated web content applications and to deliver them to multiple devices!