Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 - Platform overview

HTML5 - Platform overview

HTML5, W3C, HTMLWG, WHATWG, Mobile, etc .... this overview is designed to help understand where we are, how we got here and who is leading the charge.

992bbe0cad45fc9f941a4717f9f01642?s=128

Dale Sande

May 14, 2012
Tweet

More Decks by Dale Sande

Other Decks in Programming

Transcript

  1. HTML5 The web of the future

  2. HTML5 The web of the future What the heck do

    these mean anyway?
  3. :SEMANTICS Giving meaning to structure, semantics are front and center

    with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
  4. :OFFLINE & STORAGE Web Apps can start faster and work

    even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
  5. :DEVICE ACCESS Beginning with the Geolocation API, Web Applications can

    present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.
  6. :CONNECTIVITY More efficient connectivity means more real-time chats, faster games,

    and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.
  7. :MULTIMEDIA Audio and video are first class citizens in the

    HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
  8. :3D, GRAPHICS & EFFECTS Between SVG, Canvas, WebGL, and CSS3

    3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
  9. :PERFORMANCE & INTEGRATION Make your Web Apps and dynamic web

    content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
  10. :CSS3 CSS3 delivers a wide range of stylization and effects,

    enhancing web apps without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.
  11. A DEVELOPMENT PLATFORM html ... a platform? Was HTML5 built

    for mobile?
  12. HTML5 is not a single thing or a monolithic technology.

    It is a collection of features, technologies, and APIs that brings the power of the desktop and the vibrancy of multimedia experience to the web—while amplifying the web’s core strengths of interactivity and connectivity. HTML5 includes the fifth revision of the HTML markup language, CSS3, and a series of JavaScript APIs. Together, these technologies enable you to create complex applications that previously could be created only for desktop platforms. HTML5 ~= HTML + CSS + JS
  13. HTML5 is not a single thing or a monolithic technology.

    It is a collection of features, technologies, and APIs that brings the power of the desktop and the vibrancy of multimedia experience to the web—while amplifying the web’s core strengths of interactivity and connectivity. HTML5 includes the fifth revision of the HTML markup language, CSS3, and a series of JavaScript APIs. Together, these technologies enable you to create complex applications that previously could be created only for desktop platforms. Together, these technologies enable you to create complex applications that previously could be created only for desktop platforms. HTML5 ~= HTML + CSS + JS
  14. WASN’T BUILT FOR MOBILE ... but it really helps :)

    :OFFLINE & STORAGE :DEVICE ACCESS :CONNECTIVITY :PERFORMANCE :LOOKS AWESOME!
  15. WASN’T BUILT FOR MOBILE ... but it really helps :)

    :OFFLINE & STORAGE :DEVICE ACCESS :CONNECTIVITY :PERFORMANCE :LOOKS AWESOME! “The solution is in your hands: develop Web apps, not apps!” - Tim Berners-Lee WWW2012's keynote
  16. HTML5 How did we get here? What ever happened to

    XHTML and Web Forms anyway?
  17. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0
  18. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2
  19. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2 4.0
  20. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2 4.0 4.01 transitional
  21. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2 4.0 4.01 transitional XHTML 1
  22. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2 4.0 4.01 transitional XHTML 1 XHTML 1.1
  23. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2 4.0 4.01 transitional XHTML 1 XHTML 1.1 Web Forms 2.0
  24. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2 4.0 4.01 transitional XHTML 1 XHTML 1.1 Web Forms 2.0 HTML5
  25. YESTERDAY => TODAY 1995 1996 1997 1998 1999 2000 2001

    2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2.0 3.2 4.0 4.01 transitional XHTML 1 XHTML 1.1 Web Forms 2.0 HTML5 Still not a spec
  26. &

  27. Founded by Tim Berners-Lee after he left the European Organization

    for Nuclear Research (CERN) in October, 1994. It was founded at the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS) with support from the European Commission and the Defense Advanced Research Projects Agency (DARPA), which had pioneered the Internet and its predecessor ARPANET. World Wide Web Consortium (HTMLWG)
  28. Founded by Tim Berners-Lee after he left the European Organization

    for Nuclear Research (CERN) in October, 1994. It was founded at the Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS) with support from the European Commission and the Defense Advanced Research Projects Agency (DARPA), which had pioneered the Internet and its predecessor ARPANET. World Wide Web Consortium (HTMLWG) 1994, the internet was called the ‘information super-highway’
  29. W3C was created to ensure compatibility and agreement among industry

    members in the adoption of new standards. Prior to its creation, incompatible versions of HTML were offered by different vendors, increasing the potential for inconsistency between web pages. The consortium was created to get all those vendors to agree on a set of core principles and components which would be supported by everyone. World Wide Web Consortium (HTMLWG) <blink> </blink>
  30. in short ... World Wide Web Consortium (HTMLWG) bring order

    to the universe
  31. 2004, the WHATWG was founded by a community of people

    interested in evolving HTML and related technologies. The WHATWG was founded by individuals from Apple, the Mozilla Foundation and Opera Software. Web Hypertext Application Technology Working Group (WHATWG) this is not your dad’s HTMLWG
  32. The WHATWG was formed in response to the slow development

    of web standards monitored by the W3C, and its decision to abandon HTML in favor of XHTML 2.0, and HTML!4.01 had not been updated since 2000. The WHATWG mailing list was announced two days after the initiatives of a joint Opera–Mozilla position paper had been voted down by the W3C. Web Hypertext Application Technology Working Group (WHATWG)
  33. The WHATWG was formed in response to the slow development

    of web standards monitored by the W3C, and its decision to abandon HTML in favor of XHTML 2.0, and HTML!4.01 had not been updated since 2000. The WHATWG mailing list was announced two days after the initiatives of a joint Opera–Mozilla position paper had been voted down by the W3C. Web Hypertext Application Technology Working Group (WHATWG)
  34. April 2007, the Mozilla Foundation, Apple, and Opera Software proposed

    that the W3C’s new HTMLWG adopt the WHATWG’s HTML5 as the starting point of its work and name its future deliverable "HTML5". On May 9th 2007, the new HTMLWG resolved to do that. Web Hypertext Application Technology Working Group (WHATWG) But, who is really in charge?
  35. None
  36. There’s a new Sheriff in town

  37. [CSSWG] Minutes and Resolutions Paris F2F Monday Morning 2012-02-06 http://goo.gl/WICTr

  38. [CSSWG] Minutes and Resolutions Paris F2F Monday Morning 2012-02-06 http://goo.gl/WICTr

  39. “Web standards activists are teaching people to use webkit. You

    will see presentations from all the web standards advocates advocating people to use webkit prefixes. Our job is to solve interoperability. At this point we’re trying to figure out which and how many webkit prefix properties to actually implement support for in Mozilla. If we don’t support webkit prefixes, we are locking ourselves out of parts of the mobile web.“ W3C meeting on February 7, 2012
  40. “Web standards activists are teaching people to use webkit. You

    will see presentations from all the web standards advocates advocating people to use webkit prefixes. Our job is to solve interoperability. At this point we’re trying to figure out which and how many webkit prefix properties to actually implement support for in Mozilla. If we don’t support webkit prefixes, we are locking ourselves out of parts of the mobile web.“ W3C meeting on February 7, 2012 plinss: As soon as we do this, vendor prefixes have failed. tantek: I don't think we need to throw out the baby with the bathwater. plinss: I think the fact that Mozilla is discussing this publicly is harmful. plinss: Nevermind actually doing this. Florian: So what should we do? dbaron: So what should we do, disband the WG? plinss: yes plinss: If we go down this path we have broken standardization.
  41. “Web standards activists are teaching people to use webkit. You

    will see presentations from all the web standards advocates advocating people to use webkit prefixes. Our job is to solve interoperability. At this point we’re trying to figure out which and how many webkit prefix properties to actually implement support for in Mozilla. If we don’t support webkit prefixes, we are locking ourselves out of parts of the mobile web.“ W3C meeting on February 7, 2012 plinss: As soon as we do this, vendor prefixes have failed. tantek: I don't think we need to throw out the baby with the bathwater. plinss: I think the fact that Mozilla is discussing this publicly is harmful. plinss: Nevermind actually doing this. Florian: So what should we do? dbaron: So what should we do, disband the WG? plinss: yes plinss: If we go down this path we have broken standardization.
  42. OK, LET’S GET ... There is good stuff to talk

    about, really!
  43. BETTER CONTENT we learned how to write for the web

  44. IMPROVED PAGE SEGMENTATION There is so much win here, I

    don’t know where to begin.
  45. WEB FORMS 2.0? superseded by html5

  46. NEW <FORM> TYPES <input type="text" required /> <input type="email" value="some@email.com"

    /> <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/> <input type="range" min="0" max="50" value="10" /> <input type="search" results="10" placeholder="Search..." /> <input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /> <input type="color" placeholder="e.g. #bbbbbb" /> <input type="number" step="1" min="-5" max="10" value="0" /> Freaking epic with Mobile!
  47. CSS 3 the day photoshop died

  48. None
  49. Best CSS3 example EVER!

  50. HTML5 - WEB OF THE FUTURE what have we learned?

  51. HTML5 has epic icons? No ... HTML5 is an emerging

    development platform. Becoming more powerful then anyone has ever imagined. Who is in charge of the spec? That is a fantastic debate. Mobile is a powerful force for change, but at what point is the community superseded by our corporate overlords?
  52. LET’S WRAP THIS UP it’s been fun, but ...

  53. RATE THE SPEAKER http://spkr8.com/t/10651 You don’t win anything, but it

    helps me to get better at this ;)
  54. DOWNLOAD THE DECK https://speakerdeck.com/u/anotheruiguy/p/html5-platform-overview

  55. FOLLOW ME - DALESANDE.COM