5. Paper to W3C, 2004
We consider Web Applications to be an
important area that has not been adequately
served by existing technologies… There is a
rising threat of single-vendor solutions
addressing this problem before jointly-
developed specifications.
http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html
6. Paper to W3C, 2004
●
Backwards compatibility, and a clear migration path.
●
Well-defined error handling.
●
Users should not be exposed to authoring errors.
●
Practical use: every feature that goes into the Web-
applications specifications must be justified by a practical
use case. The reverse is not necessarily true.
●Scripting is here to stay (but should be avoided where
more convenient declarative mark-up can be used).
●Avoid device-specific profiling.
●
Make the process open.
10. Design Principles - Compatibility
● Support Existing Content
● Do not Reinvent the Wheel
● Pave the Cowpaths
● Evolution Not Revolution
www.w3.org/TR/html-design-principles/
11. Design Principles - Utility
● Solve Real Problems
● Secure By Design
● Separation of Concerns
● DOM Consistency
12. Design Principles -Priority of Constituencies
Consider users over authors over implementors
over specifiers over theoretical purity.
26. Top 20 class names
1. footer 11. button
2. menu 12. main
3. style1 13. style3
4. msonormal 14. small
5. text 15. nav
6. content 16. clear
7. title 17. search
8. style2 18. style4
9. header 19. logo
10. copyright 20. body
http://devfiles.myopera.com/articles/572/classlist-url.htm
27. Top 20 id names
1. footer 11. search
2. content 12. nav
3. header 13. wrapper
4. logo 14. top
5. container 15. table2
6. main 16. layer2
7. table1 17. sidebar
8. menu 18. image1
9. layer1 19. banner
10. autonumber1 20. navigation
http://devfiles.myopera.com/articles/572/idlist-url.htm
35. “...extending the language to better support Web
applications, since that is one of the directions the Web is
going in and is one of the areas least well served by HTML
so far. This puts HTML in direct competition with other
technologies intended for applications deployed over the
Web, in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
38. video format debates – Free formats vs MP4
<video controls autoplay poster=… width=… height=…>
<source src=movie.webm type=video/webm>
<source src=movie.mp4 type=video/mp4>
<source src=movie.ogv type=video/ogg>
<!-- fallback content -->
</video>
still include fallback for old browsers
http://camendesign.com/code/video_for_everybody
39. video as native object...why is it important?
● “play nice” with rest of the page
● keyboard accessibility built-in
● API for controls
40. controlling video with JavaScript
<script>
/* grab the first video element */
var video = document.getElementsByTagName('video')[0];
/* remove the browser-supplied controls, cos we're
scripting our own */
video.removeAttribute('controls');
</script>
<video controls>
<source src=movie.webm type=video/webm>
</video>
<input type=button value="play / pause"
onclick="if (video.paused) video.play(); else
video.pause()">
42. video media queries
<video controls>
<source src=hi-res.ogv media=”(min-device-width:800px)”>
<source src=lo-res.ogv>
</video>
http://dev.w3.org/html5/spec/video.html#the-source-element
43.
44. Photo credits
Swinging London
http://www.flickr.com/photos/nationalarchives/3008584298/
Cute NEWT by Rob Winters @Robwinters
Sharks with lasers:
http://www.flickr.com/photos/starstreak007/3416655056/
HTML5 rocks by Alex Sexton
Used with permission
Satan from ??
All others, me