something in the way

Following the BlackBerry Developer Day App Circus at Mobile World Congress 2011, Director of Developer Relations, Mike Kirkup, was able to give me a brief look at a BlackBerry PlayBook application developed by The Astonishing Tribe that demonstrates the power and flexibility of BlackBerry WebWorks platform.

The “aura” application shown in the video above demonstrates rich graphics and physics engine similar to TAT’s “scrapbook” demo, but was built entirely with web technologies like HTML5 and CSS. Built in a week, “aura” demonstrates how web developers can leverage the professional grade performance of the BlackBerry PlayBook platform just like Adobe AIR and native application developers.

This is a perfect example of why developers packed the BlackBerry Developer Day WebWorks bootcamp sessions yesterday. Click the link below to download the BlackBerry WebWorks SDK and start building your own BlackBerry PlayBook Application!

BlackBerry WebWorks SDK For BlackBerry Tablet OS

Here we go, folks – the second BlackBerry® PlayBook™ tablet development environment to be released: the BlackBerry® WebWorks platform. Today, we’re releasing an early access version of the BlackBerry® WebWorks™ SDK. The SDK provides web and mobile web developers with a framework, API’s and tooling to develop web applications for the BlackBerry PlayBook tablet.

If your background and skills are in using web technologies like HTML5, CSS and JavaScript®, then this is the platform for you! The platform extends some of the native device capabilities like system utilities, dialogs, and invoking other apps on the device and makes them available for you to use in your applications – helping them to become Super Apps!

Remember: this is still early access and the product team will be adding more and more capabilities from now until the launch of the device. The design and architectural principles for the BlackBerry WebWorks platform on the BlackBerry PlayBook tablet were to keep as much in common as possible with the BlackBerry WebWorks platform on BlackBerry® smartphones. This means that apps written on one will work on the other; however some modification might be needed depending on the underlying device capabilities. For example the tablet may have characteristics like bringing up a native dialog box including various options like the size and appearance of the dialog on the PlayBook’s screen that aren’t on the smartphones. However, all of your HTML5, CSS and JavaScript code should all be compatible.

Also, we’ve released the source code to the BlackBerry WebWorks SDK on the BlackBerry PlayBook tablet – please check it out and join the open source project. This is an opportunity for the larger developer community to get involved in shaping the future of this platform and tooling. So get involved!

And lastly, all BlackBerry PlayBook WebWorks applications that are submitted to BlackBerry App World™ are eligible for a FREE BlackBerry PlayBook tablet! To submit your apps, please go here, and see the terms and conditions here. To keep in touch with all the announcements and release information related to the BlackBerry PlayBook tablet, please enter your information here.

Thanks for your support!

CSS has always been a powerful tool in the web programmer's arsenal, especially today with CSS3, CSS Animations/Transforms/Transitions, CSS FlexBox and Columns, CSS with SVG, etc. If you're trying to do it all with JavaScript, many times you are probably doing things wrong -- a CSS solution will often be more elegant, terse, and performant.

This is why it's important to stay on top of the latest CSS work. I've found The CSS Awards web site a great way to do this. The CSS Awards is:

[a] gallery of the most prestigious websites in the world created with CSS. An international jury of the top designers, agencies, and bloggers will award prizes to the best CSS websites.

A new CSS website is posted every day.

From SitePoint comes a nice series of videos on CSS3, called CSS Live. Here's one on Progressive Enhancement when using CSS3 features:

Exciting news from Adobe; they've announced a new HTML5 Pack on Adobe Labs with support for HTML5, CSS3, and SVG:

Adobe is pleased to announce the availability of the Adobe® Illustrator® CS5 HTML5 Pack. This add-on for Illustrator CS5 15.0.1 provides initial support for HTML5 and CSS3, extends SVG capability in Illustrator CS5, and helps you easily design web and device content. In combination with the HTML5 features available in the Adobe Dreamweaver CS5 11.0.3 updater, these new tools allow web designers to take advantage of the latest advancements in HTML5.

While HTML5 and CSS3 will not be finalized for some time, and SVG support in browsers will continue to evolve, the extension provides support for a set of currently implemented features.

Some of the benefits of the HTML5 Pack:

• Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.
• Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.
• Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.
• Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.

Greg Rewis discusses it more in the video below:

Mordy Golding has a good description of some of the new features in this lab pack:

Parameterized SVG

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art. You can even create global variables.

Multi-screen SVG

You can create multiple artboards in Illustrator at various sizes, for example to design art for different screen sizes. You might do this to create different designs for mobile, tablet, and desktop versions of a design for example. You can then save your file as SVG and include all the different artboards. Illustrator creates an HTML file and a CSS file, along with separate SVG files for each artboard. The CSS uses media queries to detect the screen size and automatically serves up the correct SVG image.

Mark objects as canvas in SVG

You can select an object on the Illustrator artboard and then choose Object > HTML5 Canvas > Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control the elements via JavaScript.

Export named character styles as CSS

You can define character styles in your Illustrator document, and then export those character styles as a valid CSS file. You can do this directly from the Character Styles panel.

Export artwork appearances as CSS

You can select an object in Illustrator and export valid CSS directly from the Appearance panel. Of course, if you mockup an entire page in Illustrator, you can simply select all of it and export it to a single CSS file. IDs are picked up from the Layers panel (so you want to name artwork carefully), and Illustrator can export Fill, Stroke, Opacity, and Absolute Position and Dimensions.

Include selected Graphic Styles as CSS in SVG

You can select styles from the Graphic Styles panel and choose to have them exported when you save your file as SVG. What's really cool is that you can include styles even if they aren't applied to your artwork. This would allow you to deliver multiple styles to a developer within a single SVG, and even programmatically swap styles.

Great work Adobe!

The Chrome and HTML DevRel team at Google have released a new portal, HTML5 Rocks, that packages together some of the great resources available on HTML5 and the renaissance of browsers.

Whether it be references on what you can do, to readiness to shims to get use features now.

Beyond the resources, there is the killer HTML5 Slide Presentation and interactive playground.

A lot of nice stuff, all in one place. This is the first release, and we are sure to see a lot of additions coming soon. What would you like to see?

The Chrome and HTML DevRel team at Google have released a new portal, HTML5 Rocks, that packages together some of the great resources available on HTML5 and the renaissance of browsers.

Whether it be references on what you can do, to readiness to shims to get use features now.

Beyond the resources, there is the killer HTML5 Slide Presentation and interactive playground.

A lot of nice stuff, all in one place. This is the first release, and we are sure to see a lot of additions coming soon. What would you like to see?

While preparing my HTML WORKSHOP, I’ve been re-reading W3C specs in far further detail than I ever would’ve imagined. The reading experience is far from delightful. Not only is the text the entire browser width in measure, but it’s dense and laborious to read. No wonder browser vendors have traditionally missed subtle details.

The paragraph above is how Ben Schwarz starts off his post on "Moving towards readable W3C specs". He roped in Anthony Kolber, and the end result is something that is a pleasure to read!:

The W3C should hire these guys to keep going and clean up shop across the specs. Then, when they look beautiful, maybe we can do the other hard work of making them readable ;)