09. html5 & css3 furture of web
DESCRIPTION
TRANSCRIPT
![Page 1: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/1.jpg)
HTML5 & CSS3The Future of Web Technologies
by Dang Minh Tuan
![Page 2: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/2.jpg)
HTML5 & CSS3The TODAY of Web Technologies
by Dang Minh Tuan
![Page 3: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/3.jpg)
About me
Fullname: Đặng Minh Tuấnhttp://www.facebook.com/dangminhtuan
Nickname: ohiseehttp://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
![Page 4: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/4.jpg)
What?
When?
Why?
Who?
How?
![Page 5: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/5.jpg)
What?
![Page 6: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/6.jpg)
What is HTML5 & CSS3?
![Page 7: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/7.jpg)
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
![Page 8: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/8.jpg)
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
![Page 9: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/9.jpg)
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
![Page 10: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/10.jpg)
HTML5 is (just a version of) HTMLCSS3 is (just a version of) CSS
![Page 11: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/11.jpg)
New Version - remove some, add many
HTML4<div id="header"><input type="text">
HTML5<header><input type="email">
CSS2border
CSS3border-radius
HTML5 referenceshttp://www.w3schools.com/html5/html5_reference.asp
CSS3 referenceshttp://www.veign.com/downloads/guides/qrg0008.pdf
![Page 12: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/12.jpg)
Who?
![Page 13: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/13.jpg)
Who relates to HTML5 & CSS3?
• Who develops them?• Who supports them?• Who uses them?• Who talks about them?
![Page 14: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/14.jpg)
Who develops them?
![Page 15: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/15.jpg)
Who develops them?
![Page 16: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/16.jpg)
HTML5 Specifications
• WHATWGo http://www.whatwg.org/specs/web-apps/current-work/
• W3Co http://dev.w3.org/html5/spec/Overview.html
• IETF (WebSocket specification)o http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol
CSS 3 Specifications• W3C
o http://www.w3.org/Style/CSS/current-work
Who develops them?
![Page 17: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/17.jpg)
Who supports them?
http://www.findmebyip.com/litmus/#target-selector
![Page 18: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/18.jpg)
Who uses them?
Apple
![Page 19: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/19.jpg)
Who talks about them?
HTML5 ~ 80 links• sitepoint: 4• smashingmagazine: 4• tutsplus: 3• html5rocks: 2• sixrevisions: 2• VN: 4• other: 65
CSS3 ~ 70 links• smashingmagazine: 4• tutsplus: 3• marcofolio.net: 2• impressivewebs: 2• mikeplate: 2• css-tricks: 2• dev.opera: 2• VN: 1• other: 44
My personal bookmarks about HTML5 & CSS3
![Page 20: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/20.jpg)
Who talks about them?
HTML5 Link Collectionhttp://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw
CSS3 Link Collectionhttp://www.youtube.com/user/hoctudau#p/u/11/dLTmQG_kwJ4
My personal bookmarks about HTML5 & CSS3
![Page 21: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/21.jpg)
Who talks about them?Ebooks
most of them published in 2010
![Page 22: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/22.jpg)
Who talks about them?Slides:• http://www.slideshare.net/search/slideshow?q=HTML5• http://www.slideshare.net/search/slideshow?q=CSS3
![Page 23: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/23.jpg)
How?
![Page 24: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/24.jpg)
HOW TO?• How HTML5 & CSS3 can do?• How can you learn HTML5, CSS3?
![Page 25: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/25.jpg)
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
![Page 26: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/26.jpg)
HTML5 for some Devices• Do you have an iPhone?
![Page 27: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/27.jpg)
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
![Page 28: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/28.jpg)
When?
Why?
![Page 29: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/29.jpg)
Why & When?
Why We Should Start Using CSS3 and HTML5 Today?
![Page 30: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/30.jpg)
• 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.
For Our Clients
![Page 31: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/31.jpg)
• Potentially less disruptions of experience from one device to another and
• An overall improved user experience.
For the Users
![Page 32: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/32.jpg)
• 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.
For Designers/Developers
![Page 33: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/33.jpg)
So What Are We Waiting For?
• Fear Factor• Comfortable Factor• Doubt Factor• Faith Factor• “It’s Too Early” Factor• Validation Factor
![Page 34: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/34.jpg)
Who hires HTML5, CSS3 Ninja?
![Page 35: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/35.jpg)
HTML5 vs Flasho http://flashsucks.org/o http://html5vsflash.tumblr.com/
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.
![Page 36: 09. html5 & css3 furture of web](https://reader033.vdocuments.us/reader033/viewer/2022061221/54bd47c54a7959e35e8b4594/html5/thumbnails/36.jpg)
Start your own HTML5, CSS3 Project! Now!!!
Q&A
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