Your SlideShare is downloading. ×
0
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
HTML5 and CSS 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and CSS 3

2,111

Published on

Talk to Staffordshire University students 28 October 2010

Talk to Staffordshire University students 28 October 2010

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,111
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5: how did we get here? Bruce Lawson, Opera Software
  • 2. 11/01/10 2004 W3C focus on XHTML 2.0 and beyond... http://www.flickr.com/photos/craiga/17071467/
  • 3. 11/01/10 XHTML 2: This is not my beautiful wife! <img />
  • 4. 11/01/10
  • 5. 11/01/10
  • 6. 11/01/10 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
  • 7. 11/01/10 Paper to W3C, 2004 ● 1. Backwards compatibility, and a clear migration path. ● 2. Well-defined error handling. ● 3. Users should not be exposed to authoring errors. ● 4. 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. ● 5. Scripting is here to stay (but should be avoided where more convenient declarative mark-up can be used). ● 6. Avoid device-specific profiling. ● 7. Make the process open.
  • 8. 11/01/10 © Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document.
  • 9. 11/01/10
  • 10. 11/01/10
  • 11. 11/01/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/
  • 12. 11/01/10 Design Principles - Utility • Solve Real Problems • Secure By Design • Separation of Concerns • DOM Consistency
  • 13. 11/01/10 Design Principles - Priority of Constituencies Consider users over authors over implementors over specifiers over theoretical purity.
  • 14. 11/01/10 Design Principles - Interoperability • Well-defined Behavior • Avoid Needless Complexity • Handle Errors
  • 15. 11/01/10 Design Principles - Universal Access • Media Independence • Support World Languages • Accessibility
  • 16. 11/01/10 HTML5 <!DOCTYPE html>
  • 17. 11/01/10 Geo SVG
  • 18. 11/01/10 SVG
  • 19. 11/01/10 CSS
  • 20. 11/01/10 New Exciting Web Technology
  • 21. 11/01/10 HTML5 does not replace HTML 4.01
  • 22. 11/01/10 HTML5 has more bling!
  • 23. 11/01/10 HTML5 is umbrella term: markup elements and JavaScript APIs
  • 24. 11/01/10
  • 25. 11/01/10 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
  • 26. 11/01/10 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
  • 27. Where does that highway go to? ● Build an HTML5 page ● See that HTML5 is real world – document what browsers do now and extend that ● Use some new structural elements and style them with CSS ● Chuck in an intelligent form
  • 28. brucel@opera.com, http://dev.opera.com www.brucelawson.co.uk twitter.com/brucel

×