Stockholm presentation and links

I was lucky enough to be invited to Stockholm, where I gave two presentations at a Geek Meet organised by Robert Nyman and hosted by those nice folks at Creuna. (Here's a video that shows just how much effort went into it.) The slides for my first presentation are available:

The slides for my Disruptive Code presentation are also available:

(There is a video of the talk at www.livestream.com/disruptivemedia if you can find it!)

In both cases, 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 routines for faking HTML5 features in browsers

<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
• Problem with plugins and overlapping HTML elements
• Fixing overlap problem in Flash with wmode
• Native video with CSS3 Transitions
• Basic JavaScript controllers for video
• Fancy styled JavaScript-based video controls
• Swapping video sources for simple playlists/galleries
• 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

For video accessibility, see WebSRT and the <track> element (not part of HTML5), and showed the JavaScript demo implementation of WebSRT by Opera's Philip Jägenstedt as another example of how the native APIs for video can be used in creative new ways.

HTML5 audio

Patrick Lauke's audio examples:

• Simple audio element (with visible control)
• Same example without control attribute – playback can only be controlled via JavaScript
• Hacky looper to work around current loop latency and demonstrate scriptability
• Trivial example of random scripting – the audio windchime

HTML5's friends: JavaScript APIs

• How to use the W3C Geolocation API

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
• W3C Widget spec
• 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.")
• Robin Berjon's DAP blog