HTML5 & CSS3 The Future of Web Technologies by Dang Minh Tuan
HTML5 & CSS3 The  TODAY  of Web Technologies by Dang Minh Tuan
About me <ul><li>Fullname: Đặng Minh Tuấn </li></ul><ul><li>http://www.facebook.com/dangminhtuan </li></ul><ul><li>Nicknam...
What? When? Why? Who? How?
What?
What is HTML5 & CSS3?
HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
New Version - remove some, add many HTML4 <div id=&quot;header&quot;> <input type=&quot;text&quot;> HTML5 <header> <input ...
Who?
Who relates to HTML5 & CSS3? <ul><ul><li>Who develops them? </li></ul></ul><ul><ul><li>Who supports them? </li></ul></ul><...
Who develops them?
Who develops them?
<ul><li>HTML5 Specifications  </li></ul><ul><ul><li>WHATWG </li></ul></ul><ul><ul><ul><li>http://www.whatwg.org/specs/web-...
Who supports them? http://www.findmebyip.com/litmus/#target-selector
Who uses them? Apple
Who talks about them? <ul><li>HTML5 ~ 80 links </li></ul><ul><ul><li>sitepoint: 4 </li></ul></ul><ul><ul><li>smashingmagaz...
Who talks about them? HTML5 Link Collection http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw CSS3 Link Collection h...
Who talks about them? Ebooks most of them published in 2010
Who talks about them? <ul><li>Slides: </li></ul><ul><ul><li>http://www.slideshare.net/search/slideshow?q= HTML5 </li></ul>...
How?
HOW TO? <ul><ul><li>How HTML5 & CSS3 can do? </li></ul></ul><ul><ul><li>How can you learn HTML5, CSS3? </li></ul></ul>
Live Demo http://slides.html5rocks.com/ http://www.youtube.com/user/hoctudau#p/u/6/1sD4mf5JDS4 http://www.youtube.com/user...
HTML5 for some Devices <ul><ul><li>Do you have an iPhone? </li></ul></ul>
How to learn HTML5, CSS3? <ul><ul><li>Step 1: Learn some  basic  HTML, CSS. </li></ul></ul><ul><ul><li>Step 2: Learn how t...
When? Why?
Why & When? Why We Should Start Using CSS3 and HTML5 Today ?
<ul><ul><li>Conceding to the idea that the project will not be able to look the same across various browsers, </li></ul></...
<ul><ul><li>Potentially less disruptions of experience from one device to another and </li></ul></ul><ul><ul><li>An overal...
<ul><ul><li>Conceding to the idea that the project will not be able to look the same across various browsers, </li></ul></...
So What Are We Waiting For? <ul><ul><li>Fear Factor </li></ul></ul><ul><ul><li>Comfortable Factor </li></ul></ul><ul><ul><...
Who hires HTML5, CSS3 Ninja?
<ul><li>HTML5 vs Flash </li></ul><ul><ul><ul><li>http://flashsucks.org/ </li></ul></ul></ul><ul><ul><ul><li>http://html5vs...
Start your own HTML5, CSS3 Project!  Now!!! Q&A http://hoctudau.com/slides/reg <ul><li>Topics in Hà Nội PHP Day </li></ul>...
Upcoming SlideShare
Loading in...5
×

Html5, css3 and the future of web technologies

3,345

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,345
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
135
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Html5, css3 and the future of web technologies

  1. 1. HTML5 & CSS3 The Future of Web Technologies by Dang Minh Tuan
  2. 2. HTML5 & CSS3 The TODAY of Web Technologies by Dang Minh Tuan
  3. 3. About me <ul><li>Fullname: Đặng Minh Tuấn </li></ul><ul><li>http://www.facebook.com/dangminhtuan </li></ul><ul><li>Nickname: ohisee </li></ul><ul><li>http://twitter.com/ohisee </li></ul><ul><li>Website: hoctudau.com </li></ul>Topics in Hà Nội PHP Day 2008: HTML & CSS Best Practices http://www.hoctudau.com/slides/html-css-best-practices 2009: HTML & CSS Trends http://www.hoctudau.com/slides/html-css-trends
  4. 4. What? When? Why? Who? How?
  5. 5. What?
  6. 6. What is HTML5 & CSS3?
  7. 7. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  8. 8. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  9. 9. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  10. 10. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  11. 11. New Version - remove some, add many HTML4 <div id=&quot;header&quot;> <input type=&quot;text&quot;> HTML5 <header> <input type=&quot;email&quot;> CSS2 border CSS3 border-radius HTML5   references http://www.w3schools.com/html5/html5_reference.asp CSS3 references http://www.veign.com/downloads/guides/qrg0008.pdf
  12. 12. Who?
  13. 13. Who relates to HTML5 & CSS3? <ul><ul><li>Who develops them? </li></ul></ul><ul><ul><li>Who supports them? </li></ul></ul><ul><ul><li>Who uses them? </li></ul></ul><ul><ul><li>Who talks about them? </li></ul></ul>
  14. 14. Who develops them?
  15. 15. Who develops them?
  16. 16. <ul><li>HTML5 Specifications  </li></ul><ul><ul><li>WHATWG </li></ul></ul><ul><ul><ul><li>http://www.whatwg.org/specs/web-apps/current-work/ </li></ul></ul></ul><ul><ul><li>W3C </li></ul></ul><ul><ul><ul><li>http://dev.w3.org/html5/spec/Overview.html </li></ul></ul></ul><ul><ul><li>IETF (WebSocket specification) </li></ul></ul><ul><ul><ul><li>http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol </li></ul></ul></ul><ul><li>CSS 3 Specifications </li></ul><ul><ul><li>W3C </li></ul></ul><ul><ul><ul><li>http://www.w3.org/Style/CSS/current-work </li></ul></ul></ul>Who develops them?
  17. 17. Who supports them? http://www.findmebyip.com/litmus/#target-selector
  18. 18. Who uses them? Apple
  19. 19. Who talks about them? <ul><li>HTML5 ~ 80 links </li></ul><ul><ul><li>sitepoint: 4 </li></ul></ul><ul><ul><li>smashingmagazine: 4 </li></ul></ul><ul><ul><li>tutsplus: 3 </li></ul></ul><ul><ul><li>html5rocks: 2 </li></ul></ul><ul><ul><li>sixrevisions: 2 </li></ul></ul><ul><ul><li>VN: 4 </li></ul></ul><ul><ul><li>other: 65 </li></ul></ul><ul><li>CSS3 ~ 70 links </li></ul><ul><ul><li>smashingmagazine: 4 </li></ul></ul><ul><ul><li>tutsplus: 3 </li></ul></ul><ul><ul><li>marcofolio.net: 2 </li></ul></ul><ul><ul><li>impressivewebs: 2 </li></ul></ul><ul><ul><li>mikeplate: 2 </li></ul></ul><ul><ul><li>css-tricks: 2 </li></ul></ul><ul><ul><li>dev.opera: 2 </li></ul></ul><ul><ul><li>VN: 1 </li></ul></ul><ul><ul><li>other: 44 </li></ul></ul>My personal bookmarks about HTML5 & CSS3
  20. 20. Who talks about them? HTML5 Link Collection http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw CSS3 Link Collection http://www.youtube.com/user/hoctudau#p/u/11/dLTmQG_kwJ4 My personal bookmarks about HTML5 & CSS3
  21. 21. Who talks about them? Ebooks most of them published in 2010
  22. 22. Who talks about them? <ul><li>Slides: </li></ul><ul><ul><li>http://www.slideshare.net/search/slideshow?q= HTML5 </li></ul></ul><ul><ul><li>http://www.slideshare.net/search/slideshow?q= CSS3 </li></ul></ul>
  23. 23. How?
  24. 24. HOW TO? <ul><ul><li>How HTML5 & CSS3 can do? </li></ul></ul><ul><ul><li>How can you learn HTML5, CSS3? </li></ul></ul>
  25. 25. Live Demo http://slides.html5rocks.com/ http://www.youtube.com/user/hoctudau#p/u/6/1sD4mf5JDS4 http://www.youtube.com/user/hoctudau#p/u/8/GGX5SfYSNHw
  26. 26. HTML5 for some Devices <ul><ul><li>Do you have an iPhone? </li></ul></ul>
  27. 27. How to learn HTML5, CSS3? <ul><ul><li>Step 1: Learn some basic HTML, CSS. </li></ul></ul><ul><ul><li>Step 2: Learn how to use HTML4, CSS2 in your daily works. </li></ul></ul><ul><ul><li>Step 3: Learn how to apply HTML, CSS best practices . </li></ul></ul><ul><ul><li>Step 4: &quot; Playing make fun&quot; with HTML5, CSS3 </li></ul></ul><ul><ul><li>Step 5: &quot; Practices make perfect&quot; with HTML5, CSS3 </li></ul></ul>
  28. 28. When? Why?
  29. 29. Why & When? Why We Should Start Using CSS3 and HTML5 Today ?
  30. 30. <ul><ul><li>Conceding to the idea that the project will not be able to look the same across various browsers, </li></ul></ul><ul><ul><li>This means more developed and unfettered imaginative designs for our clients, </li></ul></ul><ul><ul><li>This could lead to increased costs for clients as well, but with higher levels of innovation and </li></ul></ul><ul><ul><li>Client’s visions for what they want will be less hindered by these limitations. </li></ul></ul>For Our Clients
  31. 31. <ul><ul><li>Potentially less disruptions of experience from one device to another and </li></ul></ul><ul><ul><li>An overall improved user experience. </li></ul></ul>For the Users
  32. 32. <ul><ul><li>Conceding to the idea that the project will not be able to look the same across various browsers, </li></ul></ul><ul><ul><li>A more open playing field for designers and developers all around; less restricted by this holding pattern, </li></ul></ul><ul><ul><li>More exciting and innovative landscape to attract new clientele, </li></ul></ul><ul><ul><li>Division of project audience into separate presentational approaches and </li></ul></ul><ul><ul><li>Probably less work involved because we don’t need the many hacks and workarounds we’ve used before. </li></ul></ul>For Designers/Developers
  33. 33. So What Are We Waiting For? <ul><ul><li>Fear Factor </li></ul></ul><ul><ul><li>Comfortable Factor </li></ul></ul><ul><ul><li>Doubt Factor </li></ul></ul><ul><ul><li>Faith Factor </li></ul></ul><ul><ul><li>“ It’s Too Early” Factor </li></ul></ul><ul><ul><li>Validation Factor </li></ul></ul>
  34. 34. Who hires HTML5, CSS3 Ninja?
  35. 35. <ul><li>HTML5 vs Flash </li></ul><ul><ul><ul><li>http://flashsucks.org/ </li></ul></ul></ul><ul><ul><ul><li>http://html5vsflash.tumblr.com/ </li></ul></ul></ul>Note:  HTML5 doesn't do anything. It's a  spec ; one that  isn't finished yet . Sure, many of its proposed features will allow developers to produce similar features as Flash, but it's up to the browser developers to implement said specification.
  36. 36. Start your own HTML5, CSS3 Project!  Now!!! Q&A http://hoctudau.com/slides/reg <ul><li>Topics in Hà Nội PHP Day </li></ul><ul><ul><li>2008: HTML & CSS Best Practices </li></ul></ul><ul><ul><ul><li>http://www.hoctudau.com/slides/html-css-best-practices </li></ul></ul></ul><ul><ul><li>2009: HTML & CSS Trends </li></ul></ul><ul><ul><ul><li>http://www.hoctudau.com/slides/html-css-trends </li></ul></ul></ul><ul><ul><li>2010: HTML5 & CSS3 The Future of Web Technologies </li></ul></ul><ul><ul><ul><li>http://www.hoctudau.com/slides/html5-css3 </li></ul></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×