Opera Developer News

I was very pleased to be asked to speak on HTML5, mobile, CSS 3, DAP and other exciting topics. The slides might not make much sense on their own, but the purpose was to give people a general overview of the technical landscape, so you might find the organically-grown hand-selected list-of-links-o-rama™ below to be more useful.

HTML5 resources

• HTML5 Forms demo
• HTML5 validator (and HTML Lint for those that believe that xhtml syntax matters)
• HTML5 Demos, including demos of some of the advanced APIs
• HTML5 Doctor (a community site I co-curate) including You can still use div
• List of scripts to plug holes in browsers' HTML5 support

<canvas> tutorials

• Canvas and SVG - which should I use when?
• HTML 5 canvas - the basics
• Creating an HTML 5 canvas painting application
• Creating pseudo 3D games with HTML 5 canvas and raycasting
• Creating pseudo 3D games with HTML 5 canvas and raycasting: Part 2

HTML5 <video> resources

• Demo: Dynamically resizing video with CSS
• Demo: Scripting your own HTML5 video controls
• Demo: Patrick Lauke's fancy swap video playlist
• http://dev.opera.com/articles/view/introduction-html5-video/
• Everything you need to know about HTML5 video and audio - and it really is everything!
• Accessible HTML5 Video with JavaScripted captions
• <video> specification
• How <video> is implemented in Opera

HTML5's friends: JavaScript APIs

• How to use the W3C Geolocation API
• W3C DAP (Device APIs and Policy Working Group)("the mission of the Device APIs and Policy Working Group is to create client-side APIs that enable the development of Web Applications and Web Widgets that interact with devices services such as Calendar, Contacts, Camera, etc.")

CSS Media Queries for adaptive content

• Demo: Media Queries: CSS that responds to the screen width
• Demo: CSS background-size
• Screencast: "Mobile web development techniques" (18 mins)
• Flexible Web Layouts with CSS3 Media Queries tutorial
• Combining meta viewport and media queries
• There's more to mobile than media queries
• Combining media queries and JavaScript

CSS 3 resources

• CSS Transforms tool - a great way to learn how they work by moving sliders and seeing what happens
• CSS3please: apply CSS3 rules and see what happens
• Border radius generator
• CSS3 transitions and 2D transforms
• CSS3 borders, backgrounds and box-shadows (multiple backgrounds, box-shadow, border-radius and border-image etc)
• Writing cross-browser, future-proof CSS 3 (a rant with the rant hat on)

Mobile-specific resources

• Mobile-friendly: The mobile web optimization guide (by Yours Truly)
• Testing your mobile sites on desktop (Win/ Mac/ Linux) with Opera Mobile Emulator (see instructions)
• 1.6 billion people are online, yet more than 4 billion people — two out of every three people on Earth — have a mobile phone or access to one. Opera State of the Mobile Web report (this monthly report has breakdowns by territory of most-vsited sites and handsets)
• Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG) (If you design so people with disabilities can use your content, it has good side-effects for mobile users)

Browser as a platform: W3C Widgets

• Widgets repository - try some out. (I demoed Torus.)
• Introduction to W3C Widgets by Peter-Paul Koch
• Creating web content for TV
• Robin Berjon's DAP blog (by nagging him over Twitter from the conference, we won!)
• W3C Widget spec

Personally, I found Over The Air to be the the best conference I've attended this year in terms of delegate enthusiasm and how much I learned, so thanks to Jo Rabin, Dan Appelquist and the team for putting it on and inviting me to talk. I gave a copy of my HTML5 book to Sir Tim Berners-Lee who asked me to sign it, which I was thrilled by ("Thanks for the Web. Bruce"). The standout presentation for me was Bryan Rieger's Rethinking the Mobile Web.