Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript (Bruce’s SxSW BigM Talk)
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
View more presentations from brucelawson
Here's my South by South West talk, also repeated at The Big M in Bath. It might not make much sense out of context, but Jeffrey Donenfeld scribed it and you might find the organically-grown hand-selected list-of-links-o-rama™ below to be useful.
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