Last year – in a discussion about what could be the next feature for a multi-runtime RIA platform like OpenLaszlo – the former OpenLaszlo director Jim Grandy came up with the idea of generating either JavaScript or OpenLaszlo’s XML based LZX source code out of exisiting SWF files. Today heise.de reported the launch of project Gordon by Munich based Tobias Schneider. Gordon is “An open source Flash™ runtime written in pure JavaScript”. You’ll find some demos of the current version of Gordon here, and the source code is available on githup. Technically Gordon translates the SWF tags into SVG through a JavaScript SVG renderer. The project wiki contains information on the supported browsers as well as the supported SWF tags (SWF 1.0).

Check this picture of one of the oldest Future Splash demos (Future Splash is the old name of Flash before the technology was bought by Macromedia) running on an iPhone through Gordon.

Gordon - rendering an old Future Splash demo on the iPhone

That reminds me of the Henry Minky’s demo rendering OpenLaszlo’s XML into SVG (instead of Flash or JavaScript code). The question is, how much of the advanced interactivity the SWF format offers can be reproduced using SVG? An interesting post in the Open Web Advocacy Group titled “A Rant about SVG” discusses the various technical difficulties around using SVG and JavaScript in modern browsers.

Without being an expert on the SVG subject I have the feeling that there are still a few shortcomings if you plan to build full applications using SVG – if you plan to have the apps running in the various versions of IE in the market. But Gordon is definitely an interesting project, very much welcomed by anyone interested in an more open standards way of building Flash-like apps for the web.

After many months (even years) of waiting we finally have some information from Adobe on when the infamous FP-40 bug should be fixed. As an Adobe employee posted a few days ago: “I did a little investigation and confirmed this is fixed and will be available in the Flash Player 10.1 Beta to be released later this year.”

I’m tempted to say: “Good for the Flash community and the Linux world!”, but Adobe’s decision to not communicate any details around the issue for such a long time makes it very hard for me to say anything positive. Would it be too sarcastic to say that the Microsoft support seems to be pro-active compared to Adobe behavior in this case, but then – I’ve made my experiences with customer support and “open communication” when it comes to U.S. based technology companies.

Remember the Macromedia slogan Experience Matters?

Great experiences are hard to quantify, but we all know when we are having them. They are the memorable events that give shape to our lives. We believe that technology has reached a point in enabling the digital world to move beyond function towards great experiences – experiences that can complement and even compete with those of the physical world. Join us on this journey to explore what great experiences are, how they deliver better business results, and how to create them.

Wonder what the Adobe/Macromedia experience is like in 2009? Here’s quote from one of the frustrated customers commenting on the FP-40 issue:

I have posted an GetSatisfaction customer request for Adobe asking why is this bug not fixed. It has been ignored for 9 months now.
http://getsatisfaction.com/adobe/topics/why_doesnt_flash_support_international_characters_on_linu

With this kind of experience, I have just one more motivation to say: “The quicker Flash fades away, the better for all of us.” HTML5 and CSS3 will give us many of the features Flash offers right now. I’m not totally opposed to proprietary plug-ins, but I’m not up to more Adobe Flash FP-40 experience.

Have you ever been dealing with detecting support for the new HTML5 and CSS3 features in browsers? Check out Modernizr, an open source JavaScript library which will probably make things a lot easier for you:

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Using Modernizr within your CSS style sheets is very easy:

.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}

The approach Modernizr takes is not to assume what features the current browser supports based on the result of a user agent string analysis. Instead it uses feature detection for 20 innovative HTML5 and CSS3 features.

Just after finishing my last post on downloadable font support, I saw another update to OpenLaszlo trunk, containing the code to support rounded corners in the JavaScript/DHTML runtime. Here’s a a screenshot of the application in SWF10:

OpenLaszlo rounded corners in SWF10

While that has been possible in Flash for years, here’s the more interesting part: the same application running in DHTML, showing the rounded corners for Webkit, Safari and Firefox. It should work in Chrome as well, but there’s a still a small bug which will be fixed:

For a re-design of the OpenLaszlo components these features will give the OpenLaszlo team a lot more flexibility. At the same time application performance should increase (less views need to be generated) and download size should be drastically reduced (due to the lack of multiple request made to the art assets used for skinning).

Max Carlson has added support for CSS @font-face inclusion of True Type (TTF), Open Type Fonts (OTF) and embedded fonts in Internet Explorer (EOT) to OpenLaszlo trunk. As a result, now it’s possible to display custom fonts in Firefox (3.5+), Safari/Webkit, Opera 10 and IE 6,7 and 8. Technically Chrome supports downloadable fonts as well, but for security reasons is has been disabled as default (you can test by adding the parameter –enable-remote-fonts to Chrome at start-up).

This example applications shows a custom font embedded into a DHTML/JavaScript OpenLaszlo application in various browsers. In Flash fonts could be embedded for a long time already, but such a widespread support of that feature based on open standards is definitely exciting.

The following collection of screenshots shows how the application is being rendered in different browsers – notice the significant differences in font size in IE8.

Downloadble/embedded fonts supported in OpenLaszlo for these browsers

With support for text-shadow, box-shadow, downloadable fonts, ongoing work on support for rounded-corners and other HTML5/CSS2+3 features, OpenLaszlo currently is one of the most advanced RIA platforms supporting the Open Web movement.

Using downloadable/embedded fonts is as easy as this, just make sure you have an EOT version of the font available for IE.

  <!-- A font by Jos Buivenga (exljbris) -> http://www.exljbris.nl -->
  <font name="yanone" style="bold" src="YanoneTagesschrift.ttf" />

  <text x="50" y="35" font="yanone" fontstyle="bold" fontsize="28" text="OpenLaszlo for the Open Web!" />
  <text x="50" y="65" font="yanone" fontstyle="bold" fontsize="28" text="Downloadable Font Demo." />

With some adjustments to the font size and rendering – quality of the font in IE depends very much on the quality of the tool used for transforming from TTF to EOT format – the results will be very acceptable, although not pixel perfect as in Flash. Another big step would be to support HTML 5 video in OpenLaszlo.

If you have been using OpenLaszlo, what things would like to see improved, which features should be added? Any ideas for new APIs or standards that should be supported? Following some comments and good feedback on OpenLaszlo in the forums, I created this wiki page as a “community wishlist” for a future OpenLaszlo 5 version.

Personally I’m excited about the HTML5 and CSS2/3 features which are added to the platform. But there are other fields where improvement is needed, like

• components
• integration with backends and web services
• charting
• support of the advanced text layout features in Flash 10
• …

If you have ideas and visions for OpenLaszlo, feel free to create a wiki account and make changes to the page. Any help and support by the community to further improve OpenLaszlo is more than welcome!

Wired Oktoberfest 101 Wiki

Reading Wired on a calm Saturday morning I was surprised to discover they feature an “Oktoberfest 101 Wiki” on their front page. If you live in Munich you can’t miss the thousands of Germans and tourists from all over the world, running around in Lederhosen and Dirndl. While the dress at least resembles what’s part of Bavarian folk tradition – most designs have been a bit modernized – the fashion of drinking too much beer gathered in huge tents with thousands of people hasn’t changed.

At Oktoberfest the breweries put up huge tents hosting more than 10,000 guests for the duration of the festival. Some are more traditional in style and music selection, some a bit more modern. Here’s a webcam image from Löwenbräu tent, that should give you a good idea of the atmosphere. It’s very hard to get a seat in the evening, and don’t even try on the weekends unless you have reserved a table – that’s what many companies do.

Oktoberfest Webcam - Löwenbräu Festzelt

The Oktoberfest 101 Wiki is well written, and will give you valuable input for your Oktoberfest visit. Just make sure that you can still walk leaving Oktoberfest, and better don’t sleep on the lawn next to the festival area, in case you are totally drunk! If you enjoy drinking a lot of beer, meeting people from all over the world, dancing on the tables – then this is the place to be right now. Prost!

The announcement of Google Chrome Frame – an Internet Explorer extension that embeds a Google Chrome browser into Internet Explorer – could sarcastically be called the “making of an IE which fully supports open standards for the first time”! If you haven’t heard of Google Chrome Frame, here is the description from the project website:

Google Chrome Frame is an early-stage open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer. With Google Chrome Frame, you can:

• Start using open web technologies – like the HTML5 canvas tag – right away, even technologies that aren’t yet supported in Internet Explorer 6, 7, or 8.
• Take advantage of JavaScript performance improvements to make your apps faster and more responsive.

How can Chrome Frame be enabled for existing web pages?

To start using Google Chrome Frame, all developers need to do is to add a single tag:
<meta http-equiv=”X-UA-Compatible” content=”chrome=1″>

When Google Chrome Frame detects this tag it switches automatically to using Google Chrome’s speedy WebKit-based rendering engine. It’s that easy. For users, installing Google Chrome Frame will allow them to seamlessly enjoy modern web apps at blazing speeds, through the familiar interface of the version of IE that they are currently using.

Adding the meta tag to my blog, I could instantly run the OpenLaszlo JavaScript/HTML5/CSS demos I’ve built in the past months in IE! This video shows an IE8/Chrome Frame running an HTML5 demo:
[See post to watch Flash video]Microsoft – despite the Silverlight hype and the immense investment of the company into that technology – has constantly failed to deliver an IE version which can compete with either Firefox, Webkit/Safari/Google Chrome (all based on the Webkit platform) or Opera. The last time IE was on a par with Mozilla was about 7-8 years ago.

As a result, many company employees with access to IE only  - and latest stats show that still 25% of Internet users browser the web with IE6 – suffer from the extremely bad performance of that browser. In the corporate environment companies still report up to 40% IE6 users.

An interesting development could be witnessed last year. In September 2008 Google announced, that they worked closely with Microsoft to get better performance in IE6 for the Gmail application:

Last October, we launched a rewritten code base for the Gmail user interface to Internet Explorer 7 and Firefox 2 users. Since then, we’ve added support for Safari 3 and Firefox 3 and improved performance in other browsers. ….

The newest version of Gmail pushes modern browser technology to the limit, so initially we weren’t able to make it available to those of you who use IE6. Because it was released way back in 2001, IE6 wasn’t able to handle the complexity of the new code in a way that met our performance and stability goals. Over the last few months, we’ve been working with the IE engineers at Microsoft to address these issues: they released a critical update to their JavaScript implementation that fixed a performance problem with how the script engine allocates and frees memory.

By the end of September Google sent out a completely different message, as was reported by TG Daily:

Taking a page out of Apple’s book, Google is now urging Gmail users to drop Internet Explorer 6 (IE6) in favor of Firefox or Chrome that, according to the company, run the popular web-based email service “twice as fast.” Google also labels IE6 as an unsupported browser, meaning it fails to run some Gmail features.

As far as I can say there was no official announcement by Google, but who would doubt that the decision might be connected to the fact that Google Chrome 1.0 was released in December. What a strange timing – announcing cooperation with Microsoft to improve IE6 performance in September, and 3 months later tell your user to upgrade to a more modern browser instead. Would be interesting to hear what happened between Google and Microsoft within this short period of time.

Meanwhile companies start utilizing the massively improved performance of JavaScript engines of Chrome, Firefox and Webkit, as TG Daily reports:

Fast JavaScript engines and greater compatibility with web standards have become Chrome’s and Firefox’s biggest selling points over IE this year. In the corporate world, these benefits could turn into decisive reasons for companies to ditch IE. Some business software vendors have begun tweaking their web applications for Chrome’s speedy V8 engine, resulting in a dramatic speed gains. For example, a Chrome-optimized version of the Recruiting CRM software delivers a 300% performance increase in complex queries.

In July 2009 Google discontinued the support for IE6 in Youtube. IE6 users see a message saying: “We’ll be phasing out support for your browser soon…”, as Ajaxian and others reported. Companies can probably live with the fact, that your user experience won’t be as good if you visit Youtube with an IE6 at work. But for Google Apps functionality – switching from Microsoft to Google Docs – that’s a whole different story.

Google Chrome Frame and Korea – dealing with a 60% IE6 market share

There has been a country where we could see an approach similar to Chrome Frame: South Korea, with the difference that over there Firefox has an embedded IE which is used depending on which website/domain you visit. The reason for using IE is, that most of the secure Internet communication in South Korea is enabled by use of ActiveX plug-ins (the Korean government required companies to offer 128bit encryption, when the export of that technology was forbidden by the Clinton administration; as a solution Koreans developed their own encryption powered by ActiveX). And what happens in a country, where Firefox had a market share of less than 1% in 2007, totally dominated by IE (around 98%)? Gen Kanai of Mozilla in Asia reported:

In IE 7 and in Vista, Microsoft has re-architected Active X controls in such a way to make them “more safe” by requiring a user action for the control to run. This is obviously impacting every web site and company that uses active X controls on their websites, which include just about every website in Korea that handles any kind of secure transaction. Every online bank, every governmental agency, every ecommerce site. Without enough time to re-architect Korean websites, 3 S. Korean governmental ministries, the Ministry of Information and Communication, the Ministry of Government Administration and Home Affairs, and the Financial Supervisory Service, warned S. Korean users that upgrading to Vista would disable the user from making any secure transaction online.

Gen Kanai’s report is from 2007, but IE6 is still a hot topic in Korea, as you can tell by this article published this week by the Korea Times, titled “Korea paying price for Microsoft monoculture”:

“There are much better technologies out there, but Active-X has left us stuck at Windows XP and IE6,” said Channy Yun, an official from Daum (www.daum.net), the country’s second-largest Web portal, and also the local leader of the Mozilla foundation, a non-profit organization promoting the Firefox Web browser. …
Active-X usage became a hot topic again in July when a massive Internet attack left more than 80,000 Korean computers crippled. It was pointed out that Active-X provided an easy route for cyber criminals spreading the malware for the distributed denial of service (DDoS) attacks. …
Another problem with Active-X is that it is prolonging the life of IE6, the sixth revision of Microsoft’s Web browser that was introduced in 2001. The antiquated browser doesn’t support key Web standards, which makes it difficult for developers to design more sophisticated Web pages that are compatible with other browsers. …
However, the IE6 share in Korea is close to 60 percent, according to local Web analytics firm, Internet Trend, as companies are reluctant to go through the trouble to test and reprogram their Active-X entangled Web pages for newer browsers. So it’s easy to imagine Korean users waking up one day and experiencing difficulties in watching YouTube videos.

If Microsoft should ever disappear or get swallowed by Google, I’m sure going to miss stories like this about IE6, ActiveX and Vista craziness! And to the Korean web industry: maybe Chrome Frame can solve some of your problems, at least enabling companies to build open standards based web applications that can rendered inside IE through Chrome – even it is an IE6!

Update: According to tests run by Computerworld, Internet Explorer 8 (IE8) with the plug-in was 9.6 times faster than IE8 on its own. Computerworld ran the SunSpider JavaScript benchmark suite three times each for IE8 with Chrome Frame, and IE8 without the plug-in, then averaged the scores.

I can already hear the Flash community cry out loud, but I’m convinced that Flash – within the next 2 years – will lose the position as the leading RIA technology for visually advanced RIAs. The technical revolution we witness with a growing number of extremely powerful JavaScript engines (Firefox, Webkit, Google Chrome, Safari, Opera) enables complex animations and drawing API features based upon open standards. These two videos show the amazing things you can do with JavaScript, HTML5 and the canvas tag already. Follow the links to the applications if you have Webkit, Chrome or Firefox 3.5+ running – although Chrome and Webkit still seam to be superior performance wise.

First, check out Guiseppe Sicari’s amazing Chrome demos, including this JavaScript 3d model of a dinosaur (the demos ran in Firefox and Safari/Webkit as well, but Firefox performance was much slower than Webkit on my OS X 10.6):
[See post to watch Flash video]

The other cool demo is from Japan, built by Satoshi Ueyama: JavaScript cloth/flag demo.
[See post to watch Flash video]

Both demos indeed show that much of what many developers think can only be done with Flash or Silverlight is achievable with JavaScript, HTML5 and CSS2/3 support in browsers. True, not all browsers have the incredible performance shown here – take the older and even the latest version of IE for example.

In that context Chrome Frame by Google is an interesting project, which was just announced yesterday:

Enable open web technologies in Internet Explorer
Google Chrome Frame is an early-stage open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to Internet Explorer. With Google Chrome Frame, you can:

• Start using open web technologies – like the HTML5 canvas tag – right away, even technologies that aren’t yet supported in Internet Explorer 6, 7, or 8.
• Take advantage of JavaScript performance improvements to make your apps faster and more responsive.

That means, by installing Chrome Frame you can use the powerful rendering capabilities of Chrome within IE. Definitely something which will help Google with the adoption of Google Docs in companies with only IE installed on the computers.

The following screenshot shows the OpenLaszlo text shadow demo I built a bit ago, running in Chrome Frame on IE8/Windows XP:

Google Chrome Frame running my OpenLaszlo text shadow demo on Windows XP with IE8

The number of users on the web browsing with a modern, standards-compliant browser is increasing quickly. And it’s just a matter of time until you won’t have to rely on the Flash plugin to deliver visually appealing animations and 3d effects to your visitors. Technologies like OpenLaszlo can help you with the transition from still Flash-supported to completely open standards based RIAs.

Where’s the specific need for Flash in such a scenario? Video streaming, access to camera and microphone? I can imagine that there will be open standards based technologies giving us a compatible ways to stream videos into HTML pages in the near future. Good times for the Open Web!

Since the OpenLaszlo DHTML runtime has been released, I’ve been wondering if there’ll ever be the time for me to say: “I can imagine that Flash won’t be a necessity for visually very appealing RIAs!” That time has come, thanks to the incredible work on great open source projects like the Firefox browser or Webkit.

Judge for yourself, here are two versions (DHTML/JavaScript and SWF9) of a demo application, that was inspired by Zachary Johnson’s great CSS3 text-shadow demo. This is the OpenLaszlo DHTML/JavaScript version of the demo, and as always with the advanced CSS features, you need a modern browser for it to work (I’ve successfully tested with Firefox 3.5+, Safari 4.x or Webkit Nighly Build, Google Chrome and Opera 10):

And in case you wonder, what the SWF9 version of this application looks like, here it is. Even after so many years of working with OpenLaszlo it’s still surprising to see how well the platform renders applications across runtimes.

I believe this demo underlines what I’ve said in my previous blog, that OpenLaszlo can be one of the key technologys to drive adoption of standards like HTML 5 and CSS3 extensions in the RIA space, providing a backup version of an application in Flash for Internet Explorer 6/7 and older browsers. And who would choose Flash, if you can get exact the same visual results with open standards!

Update: Some people have requested the source code for this example. This is the main LZX file, and here is a link to the ZIP file containing the graphic resources as well. I ran tested with OpenLaszlo 4.5.1 and Trunk.

<?xml version="1.0" encoding="utf-8"?>
<!-- * GPL_COPYRIGHT_BEGIN ***********************************************
 * Copyright 2009 Raju Bitter
 * Use is subject to license terms.
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 * GPL_COPYRIGHT__END ****************************************************** -->
<canvas width="600" height="400" bgcolor="#FFFFFF" proxied="true">

  <!-- Resources -->
  <resource name="spotlightRes" src="spotlight.png" />
  <resource name="openlaszloRes" src="OpenLaszlo-Header.png" />

  <!-- reposition boxes depending on mouse x-pos -->
  <handler name="onmousemove" reference="lz.GlobalMouse"><![CDATA[
    var posX = canvas.getMouse('x');
    var posY = canvas.getMouse('y');
    if (posX>0 &amp;amp;&amp;amp; posY>0 &amp;amp;&amp;amp; posX<canvas.width &amp;amp;&amp;amp; posY<canvas.height) {
      spotlight.setAttribute("x", (posX-spotlight.width/2));
      spotlight.setAttribute("y", (posY-spotlight.height/2));
      // Calculate angel and distance
      var xx = posX - canvas.width/2;
      var yy = (posY - canvas.height/2);
      var distance = Math.sqrt(Math.pow(xx, 2) + Math.pow(yy, 2));
      var angle = Math.atan(yy/xx)/(Math.PI/180);
      if (xx<0){
        angle+=180
      }
      if(xx>=0 &amp;amp;&amp;amp; yy<0) {
        angle+=360
      }
      theText.setAttribute("distance", distance/2);
      theText.setAttribute("angle", angle+180);
    }
  ]]>
  </handler>

  <class name="demotext" extends="text">
      <!-- AS3 import statements -->
      <switch>
        <when property="$as3">
          <passthrough>
                        import flash.filters.DropShadowFilter;
          </passthrough>
        </when>
      </switch>

      <!-- Shadow distance -->
      <attribute name="distance" value="12" />
      <!-- Shadow angle -->
      <attribute name="angle" value="0" />
      <!-- blur X  -->
      <attribute name="blurx" value="5" />
      <!-- blur Y -->
      <attribute name="blury" value="5" />

      <!-- xoffset for CSS DropBox -->
      <attribute name="__xoffset" value="0" />
      <!-- yoffset for CSS DropBox -->
      <attribute name="__yoffset" value="0" />

      <!-- Reference to the Flash DropShadowFilter object -->
      <attribute name="shadowfilter" value="null" />

      <handler name="oninit">
        this.addBoxShadow()
      </handler>

      <method name="addBoxShadow">
        if ($dhtml) {
          // lz.text clipping active, which would cut off the shadow in DHTML
          // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8415
          this.getMCRef().style.overflow = "visible";
          this.getMCRef().firstChild.style.overflow = "visible";
          this.getMCRef().firstChild.style.clip = "";
          this.cssCalculateOffset();
          var cssString = "#333 "+ __xoffset +"px "+ __yoffset+"px "+ blurx + "px";
          Debug.write(cssString);
          this.getMCRef().style.textShadow = cssString;
        } else {
          /* DropShadowFilter constructor values:
           *  [distance:Number]
           *  [angle:Number]
           *  [color:Number]
           *  [alpha:Number]
           *  [blurX:Number]
           *  [blurY:Number]
           *  [strength:Number]
           *  [quality:Number]
           *  [inner:Boolean]
           *  [knockout:Boolean]
           *  [hideObject:Boolean])
           */
          this.shadowfilter = new flash.filters.DropShadowFilter(this.distance, this.angle,
              0x333333, 0.95, this.blurx, this.blury, 1, 2, false, false, false);
          // Have to remove mask on sprite for SWF8 runtime
          // Workaround for http://jira.openlaszlo.org/jira/browse/LPP-8426
          if ($as2) {
            this.sprite.removeMask();
          }
          updateSWFFilter();
        }
      </method>

      <handler name="onangle">
        if ($as2 || $as3) {
          this.shadowfilter.angle = this.angle;
          this.shadowfilter.distance = this.distance;
          this.shadowfilter.blurX = this.blurx;
          this.shadowfilter.blurY = this.blurx;
          updateSWFFilter();
        } else if ($dhtml) {
          this.cssCalculateOffset();
          var cssString = "#333 "+ __xoffset +"px "+ __yoffset+"px "+ blurx + "px";
          this.getMCRef().style.textShadow = cssString;
        }
      </handler>

      <method name="updateSWFFilter">
          this.sprite.getMCRef().filters = [this.shadowfilter];
      </method>

      <method name="cssCalculateOffset">
        // CSS3 doesn't use angle, but x/y offset. So we need to
        // translate from angle and distance to x and y offset for CSS3.
        // Math.cos and Math.cos are based on radians, not degrees
        var radians = this.angle * Math.PI/180;
        this.__xoffset = Math.round(Math.cos(radians) * this.distance);
        this.__yoffset = Math.round(Math.sin(radians) * this.distance);
      </method>

  </class>

  <demotext align="center" y="${canvas.height/2-this.height}" id="theText" clip="false"
        fontsize="70" fontstyle="bold" fgcolor="#2c657a" opacity="1.0">OpenLaszlo</demotext>

  <view id="wall" resource="openlaszloRes" y="${canvas.height-180}" />

  <view id="spotlight" x="$once{canvas.width/2-this.width/2}" y="$once{canvas.height/2-this.height/2}" resource="spotlightRes" />
</canvas>

And if you built some other cool demos with CSS3 or HTML5 support, please ping me!