HTML5 & CSS3

The Future of Web Technologies

by Dang Minh Tuan Founder of HocTuDau.com

HTML5 & CSS3

The TODAY of Web Technologies
by Dang Minh Tuan Founder of HocTuDau.com

About me
Fullname: ng Minh Tun http://www.facebook.com/dangminhtuan http://youtube.com/hoctudau Website: hoctudau.com

Topics in H Ni PHP Day

2008: HTML & CSS Best Practices 2009: HTML & CSS Trends 2010: HTML5, CSS3 and The Future of web technologies Link download slide: http://bit.ly/htdhtml5today

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

What?

Why?

Who? When?
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 cu: http://www.w3schools.com/tags/ref_html_dtd.asp HTML5, CSS3, Javascripts: Designers HTML5, CSS3, Javascripts: Coders (Web, Web App, Game)

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 More Semantic, More Functions, More SEO
HTML5 references http://www.w3schools.com/html5/html5_reference.asp HTML4 <div id="header"> <input type="text"> <br /> HTML5 <header> <input type="url"> <br>

<basefont>

CSS3 references http://www.veign.com/downloads/guides/qrg0008.pdf CSS3 CSS2 border-radius border

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?

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 supports them?

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

Who uses them?

Apple

Who talks about them?

My personal bookmarks about HTML5 & CSS3 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

Who talks about them?

My personal bookmarks about HTML5 & CSS3

Youtube Search: hoctudau HTML5, hoctudau 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 Demo
http://slides.html5rocks.com/

Youtube Search: hoctudau HTML5, hoctudau CSS3

HTML5 for some Devices

Do you have an iPhone?
http://www.google.com.vn/images?q=html5+email http://www.youtube.com/results?search_query=Device+Orientation

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, CSS3 5. Step 5: "Practices make perfect" with HTML5, CSS3

Why?

When?

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