KEMBAR78
html5 css3 the future of web technology | PPT
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?      Why?

        Who?
When?      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
HTML5 references
http://www.w3schools.com/html5/html5_reference.asp

HTML4                     HTML5
<div id="header">         <header>
<input type="text">       <input type="email">


CSS3 references
http://www.veign.com/downloads/guides/qrg0008.pdf

CSS2                       CSS3
border                     border-radius
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
   o http://www.whatwg.org/specs/web-apps/current-work/
• W3C
   o http://dev.w3.org/html5/spec/Overview.html
• IETF (WebSocket specification)
   o http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol


CSS 3 Specifications
• W3C
  o 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         CSS3 ~ 70 links
• sitepoint: 4           • smashingmagazine: 4
• smashingmagazine: 4    • tutsplus: 3
• tutsplus: 3            • marcofolio.net: 2
• html5rocks: 2          • impressivewebs: 2
• sixrevisions: 2        • mikeplate: 2
• VN: 4                  • css-tricks: 2
• other: 65              • dev.opera: 2
                         • VN: 1
                         • other: 44
Who talks about them?
           My personal bookmarks about HTML5 & CSS3

HTML5 Link Collection                                     CSS3 Link Collection
http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw   http://www.youtube.com/user/hoctudau#p/u/11/dLTmQG_kwJ4
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?

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.
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?
For Our Clients


 • 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 the Users


 • Potentially less disruptions of experience from one device
   to another and
 • An overall improved user experience.
For Designers/Developers

  • 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.
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
  o   http://flashsucks.org/
  o   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
              Start your own HTML5, CSS3 Project!
                              Now!!!

            http://hoctudau.com/slides/reg
                  Topics in Hà Nội PHP Day
• 2008: HTML & CSS Best Practices
   o http://www.hoctudau.com/slides/html-css-best-practices
• 2009: HTML & CSS Trends
   o http://www.hoctudau.com/slides/html-css-trends
• 2010: HTML5 & CSS3 The Future of Web Technologies
   o   http://www.hoctudau.com/slides/html5-css3

html5 css3 the future of web technology

  • 1.
    HTML5 & CSS3 TheFuture of Web Technologies by Dang Minh Tuan
  • 2.
    HTML5 & CSS3 TheTODAY 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? Why? Who? When? How?
  • 5.
  • 6.
  • 7.
    HTML5 is (justa version of) HTML CSS3 is (just a version of) CSS
  • 8.
    HTML5 is (justa version of) HTML CSS3 is (just a version of) CSS
  • 9.
    HTML5 is (justa version of) HTML CSS3 is (just a version of) CSS
  • 10.
    HTML5 is (justa version of) HTML CSS3 is (just a version of) CSS
  • 11.
    New Version -remove some, add many HTML5 references http://www.w3schools.com/html5/html5_reference.asp HTML4 HTML5 <div id="header"> <header> <input type="text"> <input type="email"> CSS3 references http://www.veign.com/downloads/guides/qrg0008.pdf CSS2 CSS3 border border-radius
  • 12.
  • 13.
    Who relates toHTML5 & CSS3? • Who develops them? • Who supports them? • Who uses them? • Who talks about them?
  • 14.
  • 15.
  • 16.
    Who develops them? HTML5Specifications • WHATWG o http://www.whatwg.org/specs/web-apps/current-work/ • W3C o http://dev.w3.org/html5/spec/Overview.html • IETF (WebSocket specification) o http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol CSS 3 Specifications • W3C o http://www.w3.org/Style/CSS/current-work
  • 17.
  • 18.
  • 19.
    Who talks aboutthem? My personal bookmarks about HTML5 & CSS3 HTML5 ~ 80 links CSS3 ~ 70 links • sitepoint: 4 • smashingmagazine: 4 • smashingmagazine: 4 • tutsplus: 3 • tutsplus: 3 • marcofolio.net: 2 • html5rocks: 2 • impressivewebs: 2 • sixrevisions: 2 • mikeplate: 2 • VN: 4 • css-tricks: 2 • other: 65 • dev.opera: 2 • VN: 1 • other: 44
  • 20.
    Who talks aboutthem? My personal bookmarks about HTML5 & CSS3 HTML5 Link Collection CSS3 Link Collection http://www.youtube.com/user/hoctudau#p/u/12/hoiI8Dy1Lnw http://www.youtube.com/user/hoctudau#p/u/11/dLTmQG_kwJ4
  • 21.
    Who talks aboutthem? Ebooks most of them published in 2010
  • 22.
    Who talks aboutthem? Slides: • http://www.slideshare.net/search/slideshow?q=HTML5 • http://www.slideshare.net/search/slideshow?q=CSS3
  • 23.
  • 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 someDevices • Do you have an iPhone?
  • 27.
    How to learnHTML5, 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. 4. Step 4: "Playing make fun" with HTML5, CSS3 5. Step 5: "Practices make perfect" with HTML5, CSS3
  • 28.
  • 29.
    Why & When? Why We Should Start Using CSS3 and HTML5 Today?
  • 30.
    For Our Clients • 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.
  • 31.
    For the Users • Potentially less disruptions of experience from one device to another and • An overall improved user experience.
  • 32.
    For Designers/Developers • 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.
  • 33.
    So What AreWe 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 o http://flashsucks.org/ o 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.
    Q&A Start your own HTML5, CSS3 Project! Now!!! http://hoctudau.com/slides/reg Topics in Hà Nội PHP Day • 2008: HTML & CSS Best Practices o http://www.hoctudau.com/slides/html-css-best-practices • 2009: HTML & CSS Trends o http://www.hoctudau.com/slides/html-css-trends • 2010: HTML5 & CSS3 The Future of Web Technologies o http://www.hoctudau.com/slides/html5-css3