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

PPT
Heavy Web Optimization: Frontend
Võ Duy Tuấn
 
PPTX
Speed up with hiphop php 2014 01-22
Võ Duy Tuấn
 
PPT
Caching strategy and apc
Võ Duy Tuấn
 
PPTX
Speed up Your Joomla Site for Ultimate Performance
JoomlaDay Australia
 
PPTX
Squeeze Maximum Performance From Your Joomla Website
SiteGround.com
 
PDF
Wordpress horsepower
Ross Johnson
 
PDF
Speed Up Wordpress, Wordpress Horsepower
Ross Johnson
 
PPT
Build your own PHP extension
Võ Duy Tuấn
 
Heavy Web Optimization: Frontend
Võ Duy Tuấn
 
Speed up with hiphop php 2014 01-22
Võ Duy Tuấn
 
Caching strategy and apc
Võ Duy Tuấn
 
Speed up Your Joomla Site for Ultimate Performance
JoomlaDay Australia
 
Squeeze Maximum Performance From Your Joomla Website
SiteGround.com
 
Wordpress horsepower
Ross Johnson
 
Speed Up Wordpress, Wordpress Horsepower
Ross Johnson
 
Build your own PHP extension
Võ Duy Tuấn
 

What's hot (20)

PPTX
Caching WordPress - Anthony Burchell Wordcamp Presentation
Anthony Burchell
 
PDF
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
Otto Kekäläinen
 
PPTX
Front end optimization
Abhishek Anand
 
PDF
Technical SEO for WordPress - 2019 edition
Otto Kekäläinen
 
PPT
How We Localize & Mobilize WP Sites - Pubcon 2013
Search Commander, Inc.
 
PPTX
WordPress Performance 101
Bora Yalcin
 
KEY
Optimize wordpress
David Parsons
 
PDF
Responsible [digital] Home Ownership
Denise (Dee) Teal
 
PDF
Measuring Web Performance
Dave Olsen
 
PDF
How to set up a Wordpress Blog
kichu
 
PDF
Optimizing wp
Mark Kelnar
 
PDF
Battling Google PageSpeed Insights
Jason Yingling
 
PDF
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
 
PPTX
Wordpress website scaling challenges
Rajnish K
 
PDF
DrupalCon Barcelona 2015
Daniel Kanchev
 
PPTX
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
Sudeep Balchhaudi
 
PDF
Keep the Web Fast
Chris Fetherston
 
PDF
Optimizing web performance (Fronteers edition)
Dave Olsen
 
PDF
WordCamp SF 2011: Debugging in WordPress
andrewnacin
 
PDF
WordPress website optimization
Daniel Kanchev
 
Caching WordPress - Anthony Burchell Wordcamp Presentation
Anthony Burchell
 
The 5 most common reasons for a slow WordPress site and how to fix them – ext...
Otto Kekäläinen
 
Front end optimization
Abhishek Anand
 
Technical SEO for WordPress - 2019 edition
Otto Kekäläinen
 
How We Localize & Mobilize WP Sites - Pubcon 2013
Search Commander, Inc.
 
WordPress Performance 101
Bora Yalcin
 
Optimize wordpress
David Parsons
 
Responsible [digital] Home Ownership
Denise (Dee) Teal
 
Measuring Web Performance
Dave Olsen
 
How to set up a Wordpress Blog
kichu
 
Optimizing wp
Mark Kelnar
 
Battling Google PageSpeed Insights
Jason Yingling
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
 
Wordpress website scaling challenges
Rajnish K
 
DrupalCon Barcelona 2015
Daniel Kanchev
 
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
Sudeep Balchhaudi
 
Keep the Web Fast
Chris Fetherston
 
Optimizing web performance (Fronteers edition)
Dave Olsen
 
WordCamp SF 2011: Debugging in WordPress
andrewnacin
 
WordPress website optimization
Daniel Kanchev
 
Ad

Similar to Html5, css3 and the future of web technologies (20)

PPT
html5 css3 the future of web technology
hazzaz
 
PPTX
HTML5- The Boosting Era of Web Development
MobilePundits
 
PDF
UMK Lecture 5 - HTML5 latest v7
Hisham Mat Hussin
 
PDF
HTML5 for the Flash Developer
DevelopmentArc LLC
 
PDF
Basics of css and xhtml
sagaroceanic11
 
PPTX
HTML 5 - A developers perspective
Santhosh Kumar Srinivasan
 
PPTX
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
PPSX
HTML5, CSS3, and JavaScript
Zac Gordon
 
KEY
HTML5: A brave new world of markup
Chris Mills
 
PDF
Html5 deciphered - designing concepts part 1
Paxcel Technologies
 
PPT
Brief on Html5
Tushar Deshmukh
 
ZIP
Html5 public
doodlemoonch
 
PPT
Is it time to start using HTML 5
Ravi Raj
 
PPTX
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
PDF
HTML5 Introduction – Features and Resources for HTML5
Team Mango Media Private Limited
 
ODP
Rmll2010 html5-css3-english
Fnot
 
PPT
Html5 basics
sagaroceanic11
 
PDF
Echo HTML5
Nathan Smith
 
PPTX
Presentation 1 (1).pptx
HARSHILBHAIRAJESHBHA
 
html5 css3 the future of web technology
hazzaz
 
HTML5- The Boosting Era of Web Development
MobilePundits
 
UMK Lecture 5 - HTML5 latest v7
Hisham Mat Hussin
 
HTML5 for the Flash Developer
DevelopmentArc LLC
 
Basics of css and xhtml
sagaroceanic11
 
HTML 5 - A developers perspective
Santhosh Kumar Srinivasan
 
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
HTML5, CSS3, and JavaScript
Zac Gordon
 
HTML5: A brave new world of markup
Chris Mills
 
Html5 deciphered - designing concepts part 1
Paxcel Technologies
 
Brief on Html5
Tushar Deshmukh
 
Html5 public
doodlemoonch
 
Is it time to start using HTML 5
Ravi Raj
 
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
HTML5 Introduction – Features and Resources for HTML5
Team Mango Media Private Limited
 
Rmll2010 html5-css3-english
Fnot
 
Html5 basics
sagaroceanic11
 
Echo HTML5
Nathan Smith
 
Presentation 1 (1).pptx
HARSHILBHAIRAJESHBHA
 
Ad

More from Võ Duy Tuấn (20)

PPTX
Log management system for Microservices
Võ Duy Tuấn
 
PDF
Multi-tenant Database Design for SaaS
Võ Duy Tuấn
 
PPTX
Flutter introduction
Võ Duy Tuấn
 
PPTX
Mobile outsourcing best practices
Võ Duy Tuấn
 
PDF
Chatbot in Sale Management
Võ Duy Tuấn
 
PPTX
Microservices and docker
Võ Duy Tuấn
 
PDF
Scale with Microservices
Võ Duy Tuấn
 
PPTX
React introduction
Võ Duy Tuấn
 
PPTX
Microservices in production
Võ Duy Tuấn
 
PPTX
Business Intelligence in Retail Industry
Võ Duy Tuấn
 
PPTX
How to Build Recommender System with Content based Filtering
Võ Duy Tuấn
 
PPTX
Php psr standard 2014 01-22
Võ Duy Tuấn
 
PPTX
How to build a Recommender System
Võ Duy Tuấn
 
PPT
Mobile for web
Võ Duy Tuấn
 
PPTX
Reader.vn 2012 - The Book Of Life
Võ Duy Tuấn
 
PPT
Heavy Web Optimization: Backend
Võ Duy Tuấn
 
PPT
PHP: Debugger, Profiler and more
Võ Duy Tuấn
 
PPTX
Magento overview and how sell Magento extensions
Võ Duy Tuấn
 
PPT
Javascript unit testing framework
Võ Duy Tuấn
 
PPT
How startups can benefit from launch community
Võ Duy Tuấn
 
Log management system for Microservices
Võ Duy Tuấn
 
Multi-tenant Database Design for SaaS
Võ Duy Tuấn
 
Flutter introduction
Võ Duy Tuấn
 
Mobile outsourcing best practices
Võ Duy Tuấn
 
Chatbot in Sale Management
Võ Duy Tuấn
 
Microservices and docker
Võ Duy Tuấn
 
Scale with Microservices
Võ Duy Tuấn
 
React introduction
Võ Duy Tuấn
 
Microservices in production
Võ Duy Tuấn
 
Business Intelligence in Retail Industry
Võ Duy Tuấn
 
How to Build Recommender System with Content based Filtering
Võ Duy Tuấn
 
Php psr standard 2014 01-22
Võ Duy Tuấn
 
How to build a Recommender System
Võ Duy Tuấn
 
Mobile for web
Võ Duy Tuấn
 
Reader.vn 2012 - The Book Of Life
Võ Duy Tuấn
 
Heavy Web Optimization: Backend
Võ Duy Tuấn
 
PHP: Debugger, Profiler and more
Võ Duy Tuấn
 
Magento overview and how sell Magento extensions
Võ Duy Tuấn
 
Javascript unit testing framework
Võ Duy Tuấn
 
How startups can benefit from launch community
Võ Duy Tuấn
 

Html5, css3 and 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