HTML5 The web of the future

HTML5 The web of the future What the heck do these mean anyway?

: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.

: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.

: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.

: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.

:MULTIMEDIA Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!

: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.

: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.

: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.

A DEVELOPMENT PLATFORM html ... a platform? Was HTML5 built for mobile?

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

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

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

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

HTML5 How did we get here? What ever happened to XHTML and Web Forms anyway?

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

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

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

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

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

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

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

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

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

&

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)

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’

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)

in short ... World Wide Web Consortium (HTMLWG) bring order to the universe

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

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)

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)

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?

No content

There’s a new Sheriff in town

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

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

“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

“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.

“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.

OK, LET’S GET ... There is good stuff to talk about, really!

BETTER CONTENT we learned how to write for the web

IMPROVED PAGE SEGMENTATION There is so much win here, I don’t know where to begin.

WEB FORMS 2.0? superseded by html5

NEW TYPES Freaking epic with Mobile!

CSS 3 the day photoshop died

No content

Best CSS3 example EVER!

HTML5 - WEB OF THE FUTURE what have we learned?

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?

LET’S WRAP THIS UP it’s been fun, but ...

RATE THE SPEAKER http://spkr8.com/t/10651 You don’t win anything, but it helps me to get better at this ;)

DOWNLOAD THE DECK https://speakerdeck.com/u/anotheruiguy/p/html5-platform-overview

FOLLOW ME - DALESANDE.COM