HTML5 & CSS3The Future of Web Technologies

by Dang Minh TuanFounder of HocTuDau.com

HTML5 & CSS3The TODAY of Web Technologies

by Dang Minh TuanFounder of HocTuDau.com

About meFullname: Đặng Minh Tuấnhttp://www.facebook.com/dangminhtuanhttp://youtube.com/hoctudau

Website: hoctudau.comTopics in Hà Nội PHP Day

2008: HTML & CSS Best Practices2009: HTML & CSS Trends2010: HTML5, CSS3 and The Future of web technologiesLink download slide: http://bit.ly/htdhtml5today

2012: Power your Web Skill with HTML, CSS, Javascript

What?

When?

Why?

Who?

How?

What?

What is HTML5 & CSS3?

Some Definitions of HTML5

● HTML5 = HTML5 + CSS3 + Javascript● HTML5 = Most HTML4 + new HTML5 elements● HTML5 = new HTML5 elements● HTML5 = cool Javascript Effects● HTML5 = game HTML5 (canvas)

Tra cứu: http://www.w3schools.com/tags/ref_html_dtd.asp

HTML5, CSS3, Javascripts: DesignersHTML5, CSS3, Javascripts: Coders (Web, Web App, Game)

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 manyMore Semantic, More Functions, More SEO

HTML4<div id="header"><input type="text"><br />

HTML5<header><input type="url"><br>

CSS2border

CSS3border-radius

<basefont>

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

○ http://www.whatwg.org/specs/web-apps/current-work/● W3C

○ http://dev.w3.org/html5/spec/Overview.html● IETF (WebSocket specification)

○ http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol

CSS 3 Specifications● W3C

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

Youtube Search: hoctudau HTML5, hoctudau CSS3

My personal bookmarks about HTML5 & CSS3

Who talks about them?Ebooks

published since 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?● What HTML5 & CSS3 can do?● How to learn HTML5, CSS3?

Live Demohttp://slides.html5rocks.com/

Youtube Search: hoctudau HTML5, hoctudau CSS3

HTML5 for some Devices● Do you have an iPhone?

http://www.youtube.com/results?search_query=Device+Orientationhttp://www.google.com.vn/images?q=html5+email

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.○ ex: http://hoctudau.com/slides/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?

Poll in 2010

Who hires HTML5, CSS3 Ninja?

HTML5 vs Flash○ http://flashsucks.org/○ 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.

Q&A