Bruce Lawson's personal site

Future of Web Design, Glasgow

Here’s the talk I gave at Glasgow (which was the afternoon talk I gave in in Bristol).

Sorry, Glaswegians, for the lack of demos—the projector had problems with Windows machines.

Future of HTML5 (.odp format, 3MB.), Future of HTML5 (.pdf format, 600K.)

Forms demo

One of the cool things in HTML5 is intelligent forms, which are implemented most thoroughly in Opera (so try them there) and which are apparently “coming soon” in Google Chrome.

In legacy browsers, the intelligent forms just fall back to text input fields.

Safari displays input type="range" as a slider, and also the once-proprietary, now standardised placeholder attribute. Watch what happens in Safari when you click in and out of the email field.

And don’t forget to view source for that “Look, no JavaScript!” moment.

HTML5 forms demo.

Canvas demos

Want to learn more? Opera has some excellent beginner canvas tutorials:

  1. HTML 5 canvas – the basics
  2. Creating an HTML 5 canvas painting application
  3. Creating pseudo 3D games with HTML 5 canvas and raycasting
  4. Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2

Video demos

You’ll need Firefox 3.5 for these (I was demoing using an Opera Labs build, but it’s not publicly available yet).

Remember – there are no browser plugins running here, so the video element is completely available for manipulating with script. That’s the killer feature.

A couple of links I mentioned:

Thanks to all who came to watch, ask some questions, share their thoughts, drink a beer with me, or buy me a deep-fried Mars Bar!

Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)

12 Responses to “ Future of Web Design, Glasgow ”

Comment by Ralph

I get exactly the same look in Opera as Mike (first post). Opera version 10.00, Build 6652, Platform Mac OS X, System 10.5.7

Good post, though. Thanks!

Comment by Jack

Good article, interesting to read, simple and most interest this article is usefull. Thanks for the info! wait for updated article

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.