• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,199
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
131
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?
  • 5. What?
  • 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?
  • 14. Who develops them?
  • 15. Who develops 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
  • 28. When? Why?
  • 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