Leeds University talk (Patrick and Bruce)

The delightful Helen Kennedy, Senior Lecturer in New Media, Institute of Communications Studies at the University of Leeds invited Patrick and Bruce to harangue her students about Open Web Standards, HTML5, CSS and the like. Here are the slides and some supporting links.

HTML5 resources

• HTML5 Forms demo
• HTML5 validator (and HTML Lint for those that like xhtml syntax)
• HTML5 Demos, including demos of some of the advanced APIs
• HTML5 Doctor (a community site I co-curate)
• Opera articles on HTML5 and CSS 3
• 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

• Introduction to HTML5 video
• Demo: Dynamically resizing video with CSS
• Demo: Scripting your own HTML5 video controls
• Demo: Patrick Lauke's fancy swap video playlist
• Everything you need to know about HTML5 video and audio - and it really is everything!

HTML5's friends: JavaScript APIs

• How to use the W3C Geolocation API
• Taking your web apps offline: A tale of Web Storage, Application Cache and WebSQL
• Introducing Web Sockets
• WebSockets and Server-sent Events
• Web Workers rise up!

CSS Media Queries and Viewport 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
• An introduction to meta viewport and @viewport
• Combining media queries and JavaScript
• Mediaqueri.es showcase site

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)
• 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

• Widgets repository - try some out. (I demoed Torus.)
• Introduction to W3C Widgets by Peter-Paul Koch
• Creating web content for TV
• Video tutorial: Access your phone's camera with WAC widgets
• Opera and HTML5 <device> element to give web sites access to a device's camera, and Orientation Events (now renamed getUserMedia())
• W3C Widget spec