HTML5 & CSS3The Future of Web Technologies        by Dang Minh Tuan
HTML5 & CSS3The TODAY of Web Technologies        by Dang Minh Tuan
About me                  Fullname: Đặng Minh Tuấn                  http://www.facebook.com/dangminhtuan                  ...
What?      Why?        Who?When?      How?
What?
What is HTML5 & CSS3?
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
New Version - remove some, add manyHTML5 referenceshttp://www.w3schools.com/html5/html5_reference.aspHTML4                ...
Who?
Who relates to HTML5 & CSS3?       •   Who develops them?       •   Who supports them?       •   Who uses them?       •   ...
Who develops them?
Who develops them?
Who develops them?HTML5 Specifications• WHATWG   o http://www.whatwg.org/specs/web-apps/current-work/• W3C   o http://dev....
Who supports them?http://www.findmebyip.com/litmus/#target-selector
Who uses them?             Apple
Who talks about them?     My personal bookmarks about HTML5 & CSS3HTML5 ~ 80 links         CSS3 ~ 70 links• sitepoint: 4  ...
Who talks about them?           My personal bookmarks about HTML5 & CSS3HTML5 Link Collection                             ...
Who talks about them?       Ebooks          most of them published in 2010
Who talks about them?Slides:• http://www.slideshare.net/search/slideshow?q=HTML5• http://www.slideshare.net/search/slidesh...
How?
HOW TO?  • How HTML5 & CSS3 can do?  • How can you learn HTML5, CSS3?
Live Demo                               http://slides.html5rocks.com/http://www.youtube.com/user/hoctudau#p/u/6/1sD4mf5JDS...
HTML5 for some Devices    • Do you have an iPhone?
How to learn HTML5, CSS3?1. Step 1: Learn some basic HTML, CSS.2. Step 2: Learn how to use HTML4, CSS2 in your daily   wor...
Why?When?
Why & When?   Why We Should Start Using CSS3 and   HTML5 Today?
For Our Clients • Conceding to the idea that the project will not be able to   look the same across various browsers, • Th...
For the Users • Potentially less disruptions of experience from one device   to another and • An overall improved user exp...
For Designers/Developers  • Conceding to the idea that the project will not be able    to look the same across various bro...
So What Are We Waiting For?    •   Fear Factor    •   Comfortable Factor    •   Doubt Factor    •   Faith Factor    •   “I...
Who hires HTML5, CSS3 Ninja?
HTML5 vs Flash  o   http://flashsucks.org/  o   http://html5vsflash.tumblr.com/               Note: HTML5 doesnt do anythi...
Q&A              Start your own HTML5, CSS3 Project!                              Now!!!            http://hoctudau.com/sl...
Upcoming SlideShare
Loading in …5
×

html5 css3 the future of web technology

1,584 views

Published on

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
1,584
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

html5 css3 the future of web technology

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

×