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ấ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

What?

When?

Why?

Who?

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 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

Who?

Who relates to HTML5 & CSS3?

• Who develops them?• Who supports them?• Who uses them?• Who talks about them?

Who develops them?

Who develops them?

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?

Who supports them?

http://www.findmebyip.com/litmus/#target-selector

Who uses them?

Apple

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

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

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/slideshow?q=CSS3

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/1sD4mf5JDS4 http://www.youtube.com/user/hoctudau#p/u/8/GGX5SfYSNHw

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

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

When?

Why?

Why & When?

Why We Should Start Using CSS3 and HTML5 Today?

• 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

• Potentially less disruptions of experience from one device to another and

• An overall improved user experience.

For the Users

• 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

So What Are We Waiting For?

• Fear Factor• Comfortable Factor• Doubt Factor• Faith Factor• “It’s Too Early” Factor• Validation Factor

Who hires HTML5, CSS3 Ninja?

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.

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