SlideShare a Scribd company logo
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
PDF
Going native with html5 web components
PPTX
Web design 2 - Basic HTML 2010
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
Going native with html5 web components
Web design 2 - Basic HTML 2010
Frontend Crash Course
Develop, Debug, Learn? - Dotjs2019
Ad

Viewers also liked (20)

KEY
Doctype
PPTX
Web Accessibility: You can and You should
PDF
Designing for developers
PPTX
Making Web Fun
PDF
Intro to CSS
PPTX
Don’t forget to add doctype
PDF
Javascript tutorial
KEY
WHAT IS HTML5? (at CSS Nite Osaka)
PDF
Intro to HTML and CSS - Class 2 Slides
PPT
HTML5 Canvas
PPTX
Html5 game development
PDF
Quality Development with HTML5
PPTX
Introduction to HTML5 Canvas
PDF
Modular HTML & CSS Workshop
PPTX
In search of JavaScript code quality: unit testing
PDF
Intro to HTML + CSS
PDF
An Intro to HTML & CSS
KEY
HTML Design for Devices
PPT
HTML 5 Overview
Doctype
Web Accessibility: You can and You should
Designing for developers
Making Web Fun
Intro to CSS
Don’t forget to add doctype
Javascript tutorial
WHAT IS HTML5? (at CSS Nite Osaka)
Intro to HTML and CSS - Class 2 Slides
HTML5 Canvas
Html5 game development
Quality Development with HTML5
Introduction to HTML5 Canvas
Modular HTML & CSS Workshop
In search of JavaScript code quality: unit testing
Intro to HTML + CSS
An Intro to HTML & CSS
HTML Design for Devices
HTML 5 Overview
Ad

Similar to HTML5 CSS3 The Future of Web Technologies (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 1wd
PDF
Web designtrends
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 1wd
Web designtrends
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

Recently uploaded (20)

PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Electronic commerce courselecture one. Pdf
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Encapsulation theory and applications.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Approach and Philosophy of On baking technology
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PDF
KodekX | Application Modernization Development
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
cuic standard and advanced reporting.pdf
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
Cloud computing and distributed systems.
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
Understanding_Digital_Forensics_Presentation.pptx
“AI and Expert System Decision Support & Business Intelligence Systems”
Electronic commerce courselecture one. Pdf
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Encapsulation theory and applications.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Approach and Philosophy of On baking technology
Digital-Transformation-Roadmap-for-Companies.pptx
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
KodekX | Application Modernization Development
Agricultural_Statistics_at_a_Glance_2022_0.pdf
20250228 LYD VKU AI Blended-Learning.pptx
cuic standard and advanced reporting.pdf
Network Security Unit 5.pdf for BCA BBA.
Cloud computing and distributed systems.
Dropbox Q2 2025 Financial Results & Investor Presentation
Understanding_Digital_Forensics_Presentation.pptx

HTML5 CSS3 The Future of Web Technologies

  • 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