HTML5 and CSS 3 at Staffordshire University
I was honoured to return to Staffordshire University to talk about HTML5, CSS 3 and the Web in general. It's great to talk there, as the staff and students are really clueful. And Fiona Knight gives you lunch.
Here are demos and resources after the slideware:
HTML5 resources
- Demo page I built
- HTML5 Shiv for Internet Explorer (and styling HTML5 markup in IE without script)
- 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
HTML5 <video>
resources
- Introduction to HTML5 video
- Demo: Dynamically resizing video with CSS
- Demo: Scripting your own HTML5 video controls
- Basic JavaScript controllers for
video
- Fancy styled JavaScript-based
video
controls - Swapping
video
sources for simple playlists/galleries - Everything you need to know about HTML5 video and audio - and it really is everything!
<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 visiblecontrol
) - 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
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)
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
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-visited 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)