HTML5 & CSS3 The Future of Web Technologies by Dang Minh Tuan
HTML5 & CSS3 The  TODAY  of Web Technologies by Dang Minh Tuan
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 Day 2008: HTML & CSS Best Practices http://www.hoctudau.com/slides/html-css-best-practices 2009: HTML & CSS Trends http://www.hoctudau.com/slides/html-css-trends
What? When? Why? Who? How?
What?
What is HTML5 & CSS3?
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 HTML4 <div id=&quot;header&quot;> <input type=&quot;text&quot;> HTML5 <header> <input type=&quot;email&quot;> CSS2 border CSS3 border-radius HTML5   references http://www.w3schools.com/html5/html5_reference.asp CSS3 references http://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? HTML5 Link Collection http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw CSS3 Link Collection http://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? Step 1: Learn some  basic  HTML, CSS. Step 2: Learn how to  use  HTML4, CSS2 in your daily works. Step 3: Learn how to apply HTML, CSS  best practices . Step 4: &quot; Playing  make fun&quot; with HTML5, CSS3 Step 5: &quot; Practices  make perfect&quot; 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 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.
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 http://www.hoctudau.com/slides/html-css-best-practices 2009: HTML & CSS Trends http://www.hoctudau.com/slides/html-css-trends 2010: HTML5 & CSS3 The Future of Web Technologies http://www.hoctudau.com/slides/html5-css3

More Related Content

PDF
GoCoding.Today For Rails - Episode1
PDF
W3Schools Quiz Test
PDF
ONA 2013 Design That Works session by Hong Qu
PDF
WordPress - From the Start - WordCamp Sofia 2013
PPTX
Make WordPress Your Friend #2 WordCamp Lancaster 2015
PDF
Getting Ready for Gutenberg
PDF
Plugins Spectacular WordCamp Sydney 2012
PDF
Intro to Web Development from Bloc.io
GoCoding.Today For Rails - Episode1
W3Schools Quiz Test
ONA 2013 Design That Works session by Hong Qu
WordPress - From the Start - WordCamp Sofia 2013
Make WordPress Your Friend #2 WordCamp Lancaster 2015
Getting Ready for Gutenberg
Plugins Spectacular WordCamp Sydney 2012
Intro to Web Development from Bloc.io

What's hot (19)

PDF
Frontend Crash Coarse 09/28
PPTX
Intro to HTML 5
PDF
Swc발표자료1 3(오픈cms wordpress_drupal)
PPTX
Building a Moodle theme with bootstrap
PDF
Thinkful FrontEnd Crash Course - HTML & CSS
PDF
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
PPTX
Chrome and Flash
PDF
Looking for a place to hang my helmet
PPT
End
PPTX
HTML5 - Future of Web
PDF
Thinkful FrontEnd Crash Course - HTML & CSS
PDF
Frontend Crash Course
PPT
Age Lego Structure
PDF
Web components
PDF
JavaScript & Animation
PPTX
Web design 2 - Basic HTML 2010
PDF
Going native with html5 web components
PDF
Frontend Crash Course
PPTX
Develop, Debug, Learn? - Dotjs2019
Frontend Crash Coarse 09/28
Intro to HTML 5
Swc발표자료1 3(오픈cms wordpress_drupal)
Building a Moodle theme with bootstrap
Thinkful FrontEnd Crash Course - HTML & CSS
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Chrome and Flash
Looking for a place to hang my helmet
End
HTML5 - Future of Web
Thinkful FrontEnd Crash Course - HTML & CSS
Frontend Crash Course
Age Lego Structure
Web components
JavaScript & Animation
Web design 2 - Basic HTML 2010
Going native with html5 web components
Frontend Crash Course
Develop, Debug, Learn? - Dotjs2019
Ad

Viewers also liked (6)

PPT
Video marketing for real estate
PPT
So you think you know CrossRef
PPT
Dragana Petković - Kako privući mlade da pišu za vas
PPTX
etwinning formazione fvg feedback Udine
PDF
CrossMark Prototype Demo 2010 Annual Meeting
PDF
WhiteCloud Marketing | Social connections | Social Media Mississauga
Video marketing for real estate
So you think you know CrossRef
Dragana Petković - Kako privući mlade da pišu za vas
etwinning formazione fvg feedback Udine
CrossMark Prototype Demo 2010 Annual Meeting
WhiteCloud Marketing | Social connections | Social Media Mississauga
Ad

Similar to 09 html5 css3-the_future_of_web_technology (20)

PPT
html5 css3 the future of web technology
PPTX
Intro to Front-End Web Devlopment
KEY
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
PPTX
full stqack guktgktktykytkyyyjrneyrynye5n
PDF
Using Cool New Frameworks in (Mobile) Domino Apps
PDF
FITC Spotlight HTML5 - The state of the web
PDF
Yahoo for the Masses
PPT
Successful Teams follow Standards
PDF
Introduction to Responsive Web Design
PPT
#1 of HTML and CSS3
PDF
HTML CSS Best Practices
PDF
Web designtrends
PDF
Web designtrends 1wd
PDF
Style Guide Best Practices
PDF
Contemporary webdesign day 2
PDF
HTML5 and CSS3 Illustrated Introductory 2nd Edition Vodnik Solutions Manual
PDF
The power of accessibility (November, 2018)
PPT
Building Web Hack Interfaces
PDF
The road to professional web development
PPTX
RWD - Bootstrap
html5 css3 the future of web technology
Intro to Front-End Web Devlopment
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
full stqack guktgktktykytkyyyjrneyrynye5n
Using Cool New Frameworks in (Mobile) Domino Apps
FITC Spotlight HTML5 - The state of the web
Yahoo for the Masses
Successful Teams follow Standards
Introduction to Responsive Web Design
#1 of HTML and CSS3
HTML CSS Best Practices
Web designtrends
Web designtrends 1wd
Style Guide Best Practices
Contemporary webdesign day 2
HTML5 and CSS3 Illustrated Introductory 2nd Edition Vodnik Solutions Manual
The power of accessibility (November, 2018)
Building Web Hack Interfaces
The road to professional web development
RWD - Bootstrap

More from Nguyen Duc Phu (17)

PPTX
iOS Gaming with Cocos2d
PPT
05 - Phan Thai Trung - Tu dong dat hang tu he thong ban le lon nhat Trung Quoc
PPT
8 - Javascript unit testing framework
PPT
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
PPT
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascript
PPT
Hanoi php day 2008 - 01.pham cong dinh - how.to.build.your.own.framework
PPT
Hanoi php day 2008 - 02. phan thai trung - drupal
PPT
13 social network game
PPTX
12 trung-oss-magento-overview
PPT
11 building joomla! extensions with flex integration
PDF
10 su dung drupal xay dung mang xa hoi
PPT
07 build your-own_php_extension
PDF
04 web optimization
PDF
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
PDF
01 zingme practice for building scalable website with php
PPT
14 how startups can benefit from launch community
PPT
Hanoi PHP Day 2008 - 04 - Nguyen Duc Phu - Search Engine: New Collection S...
iOS Gaming with Cocos2d
05 - Phan Thai Trung - Tu dong dat hang tu he thong ban le lon nhat Trung Quoc
8 - Javascript unit testing framework
Hanoi php day 2008 - 05. nguyen hai nhat huy - building-restful-web-service-w...
Hanoi php day 2008 - 03. dang minh tuan - html, css, javascript
Hanoi php day 2008 - 01.pham cong dinh - how.to.build.your.own.framework
Hanoi php day 2008 - 02. phan thai trung - drupal
13 social network game
12 trung-oss-magento-overview
11 building joomla! extensions with flex integration
10 su dung drupal xay dung mang xa hoi
07 build your-own_php_extension
04 web optimization
02 vng thanhnt-speedup_ntvv2_by_ph_pextmodule_
01 zingme practice for building scalable website with php
14 how startups can benefit from launch community
Hanoi PHP Day 2008 - 04 - Nguyen Duc Phu - Search Engine: New Collection S...

Recently uploaded (20)

PDF
sustainability-14-14877-v2.pddhzftheheeeee
PDF
Developing a website for English-speaking practice to English as a foreign la...
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
PDF
Hybrid horned lizard optimization algorithm-aquila optimizer for DC motor
PDF
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
PPTX
AI IN MARKETING- PRESENTED BY ANWAR KABIR 1st June 2025.pptx
PDF
sbt 2.0: go big (Scala Days 2025 edition)
PDF
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
PDF
STKI Israel Market Study 2025 version august
PPTX
2018-HIPAA-Renewal-Training for executives
PDF
OpenACC and Open Hackathons Monthly Highlights July 2025
PDF
The influence of sentiment analysis in enhancing early warning system model f...
PDF
Taming the Chaos: How to Turn Unstructured Data into Decisions
PPT
Module 1.ppt Iot fundamentals and Architecture
PPTX
Benefits of Physical activity for teenagers.pptx
PDF
Architecture types and enterprise applications.pdf
PDF
Enhancing emotion recognition model for a student engagement use case through...
PDF
Abstractive summarization using multilingual text-to-text transfer transforme...
PPTX
Modernising the Digital Integration Hub
PPTX
The various Industrial Revolutions .pptx
sustainability-14-14877-v2.pddhzftheheeeee
Developing a website for English-speaking practice to English as a foreign la...
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
Hybrid horned lizard optimization algorithm-aquila optimizer for DC motor
Produktkatalog für HOBO Datenlogger, Wetterstationen, Sensoren, Software und ...
AI IN MARKETING- PRESENTED BY ANWAR KABIR 1st June 2025.pptx
sbt 2.0: go big (Scala Days 2025 edition)
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
STKI Israel Market Study 2025 version august
2018-HIPAA-Renewal-Training for executives
OpenACC and Open Hackathons Monthly Highlights July 2025
The influence of sentiment analysis in enhancing early warning system model f...
Taming the Chaos: How to Turn Unstructured Data into Decisions
Module 1.ppt Iot fundamentals and Architecture
Benefits of Physical activity for teenagers.pptx
Architecture types and enterprise applications.pdf
Enhancing emotion recognition model for a student engagement use case through...
Abstractive summarization using multilingual text-to-text transfer transforme...
Modernising the Digital Integration Hub
The various Industrial Revolutions .pptx

09 html5 css3-the_future_of_web_technology

  • 1. HTML5 & CSS3 The Future of Web Technologies by Dang Minh Tuan
  • 2. HTML5 & CSS3 The TODAY of Web Technologies by Dang Minh Tuan
  • 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 Day 2008: HTML & CSS Best Practices http://www.hoctudau.com/slides/html-css-best-practices 2009: HTML & CSS Trends http://www.hoctudau.com/slides/html-css-trends
  • 4. What? When? Why? Who? How?
  • 6. What is HTML5 & CSS3?
  • 7. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 8. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 9. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 10. HTML5 is (just a version of) HTML CSS3 is (just a version of) CSS
  • 11. New Version - remove some, add many HTML4 <div id=&quot;header&quot;> <input type=&quot;text&quot;> HTML5 <header> <input type=&quot;email&quot;> CSS2 border CSS3 border-radius HTML5   references http://www.w3schools.com/html5/html5_reference.asp CSS3 references http://www.veign.com/downloads/guides/qrg0008.pdf
  • 12. Who?
  • 13. Who relates to HTML5 & CSS3? Who develops them? Who supports them? Who uses them? Who talks about them?
  • 16. 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?
  • 17. Who supports them? http://www.findmebyip.com/litmus/#target-selector
  • 18. Who uses them? Apple
  • 19. 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
  • 20. Who talks about them? HTML5 Link Collection http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw CSS3 Link Collection http://www.youtube.com/user/hoctudau#p/u/11/dLTmQG_kwJ4 My personal bookmarks about HTML5 & CSS3
  • 21. Who talks about them? Ebooks most of them published in 2010
  • 22. Who talks about them? Slides: http://www.slideshare.net/search/slideshow?q= HTML5 http://www.slideshare.net/search/slideshow?q= CSS3
  • 23. How?
  • 24. HOW TO? How HTML5 & CSS3 can do? How can you learn HTML5, CSS3?
  • 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. HTML5 for some Devices Do you have an iPhone?
  • 27. How to learn HTML5, CSS3? Step 1: Learn some basic HTML, CSS. Step 2: Learn how to use HTML4, CSS2 in your daily works. Step 3: Learn how to apply HTML, CSS best practices . Step 4: &quot; Playing make fun&quot; with HTML5, CSS3 Step 5: &quot; Practices make perfect&quot; with HTML5, CSS3
  • 29. Why & When? Why We Should Start Using CSS3 and HTML5 Today ?
  • 30. 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
  • 31. Potentially less disruptions of experience from one device to another and An overall improved user experience. For the Users
  • 32. 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
  • 33. So What Are We Waiting For? Fear Factor Comfortable Factor Doubt Factor Faith Factor “ It’s Too Early” Factor Validation Factor
  • 34. Who hires HTML5, CSS3 Ninja?
  • 35. 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.
  • 36. 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 http://www.hoctudau.com/slides/html-css-best-practices 2009: HTML & CSS Trends http://www.hoctudau.com/slides/html-css-trends 2010: HTML5 & CSS3 The Future of Web Technologies http://www.hoctudau.com/slides/html5-css3