What is HTML5?

Introduction

My name is Stacy London.

I've been doing front-end web development since 1998.

I still love it.

~7 years at JohnsonDiversey on the E-Commerce / Web Team

~2 years at Kohl's on the kohls.com team

~4 years at Northwestern Mutual building web apps

I lived here for a bit

My 1st Browser

In the 90s the Web was ugly

Geocities - My Eyes!!

Web Page Basics

Don't fall asleep developers! This isn't for you :)

HTML - Structure

CSS - Style

JavaScript - Behavior

HTML

HyperText Markup Language is the language web pages are written in. It should be easy to read the tags and understand the content they are describing (semantic).

"The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page." - HTML

Browsers

Google (Chrome), Microsoft (Internet Explorer), Mozilla (Firefox), Apple (Safari), Opera

CSS

Cascading Style Sheets are used to describe the look and feel of a web page (fonts, colors, positions, etc.).

JavaScript

JavaScript is a programming language used to apply behavior to a web page based on user interaction (e.g. clicks). Some examples of what JavaScript can do include form validation and animation.

The Evolution of the Web

Web Pages to Web Applications

Developers weren't just building web pages to display content but they were building web applications that had deep user interaction.

This was never the original intention of HTML. We needed and demanded more.

In the meantime, 1000s and 1000s of lines of JavaScript were written to achieve the application-like behavior we wanted.

Who defines what HTML is?

In the early 80s a physicist named Sir Tim Berners-Lee, who was a contractor at CERN, devised a way to markup documents to be shared electronically with other scientists. This was the start of HTML.

He later founded the W3C (World Wide Web Consortium) which is the main international standards organization for the WWW.

W3C

"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." - W3C

There are books about this

In June 2004, representatives from the semantic web community, major browser vendors, and the W3C met in San Jose, California.

Topic: the W3C's response to the rise of web applications.

A vote...

Should the W3C should augment HTML and the DOM to address the new requirements of web applications?

The results...

"8 for, 14 against."

HTML5's Birth

2 days later...

The WHATWG was formed from the major browser vendors to solve emerging issues: WHATWG WebApps Spec.

Meanwhile, the W3C pushed forward with the XHTML2 spec.

5 years later...

The W3C drops XHTML2 to focus on an aligned HTML5 effort with the WHATWG.

reference: HTML5 History

Ignoring Standards

Even though there is a standards organization, some vendors decided to introduce proprietary functionality in their browser ...

This was the introduction of a nightmare for web developers called "cross-browser compatibility". We were directed to make a web site / application look and function exactly the same in Internet Explorer 6 and in Firefox (as an example).

IE6 - the worst browser ever

Web Developers spent countless hours finding and correcting bugs and coding work-arounds because IE6 didn't implement W3C standards while other browsers did.

Even Microsoft now admits how bad it was and how it prevented modern web development from moving forward.

Microsoft created a countdown website, ie6countdown.com, to get the world off of it.

Today

Microsoft is onboard with HTML5 and is evolving its browser to be standards compliant with what the W3C defines. IE10, when released, will be the most standards compliant browser they've ever made and will support a lot of the new HTML5 and CSS3 features.

While it's nice to think they are doing this out of the goodness of their heart it's also a response to shrinking market share of their browser.

Whew! That's a long story.

Show me a picture!

The Evolution of the Web

History is exhausting!! Show me shiny stuff.

Kindle Cloud Reader

HTML5 web application with ability to go offline

3D animation (WebGL)

Typography

CSS3

Gradients, rounded corners, opacity, transforms, transitions

What is HTML5?

The term "HTML5" is often used as a buzzword to refer to modern web technologies (similar to the term "Web 2.0").

Specifically, it's the 5th major revision of HTML aimed at easing web application development whereas prior versions were aimed at creating static web pages.

• Reduce reliance on vendor plugins (e.g. no more Flash to display a video)
• Allow for offline web apps
• Increase access to native mobile device capabilities (e.g. GPS)

Other specs get lumped in

• Web Workers - run scripts in parallel (thread-like)
• Web Sockets - 2-way communication from browser to server (think live chat)
• Web Storage - store data in web clients
• Geolocation - retrieve my latitude & longitude coordinates to show my location on a map
• WebGL - Brings plugin-free 3D to the web (written in JavaScript and exposed through HTML5 canvas element)
• CSS3 - New styles that help replace need for images and JavaScript to achieve the same look & feel / behavior.

HTML5 Features

• Semantics - new tags to better describe content, new form input types, new app markup.
• Offline & Storage - App Cache, localStorage, Indexed DB (e.g. NY Times, Kindle App)
• Device Access - Geolocation
• Connectivity - Web Sockets (e.g. chat)
• Multimedia - Audio & Video tags (no need for Flash plugin)
• 3D Graphics & Effects - SVG, <canvas>, WebGL
• Performance & Integration - Web Workers (multiple threads), XMLHttpRequest2
• CSS3 - rounded corners, gradients, webfonts, text wrapping, columns, shadows, transitions, transforms, animations, opacity

Web Storage

Desktop Drag-In

HTML5 input types / device access

When you use the new HTML5 input types and device access, you make filling out forms or showing driving directions easier for your users on tablets/smart phones (a better user experience).

CSS3 - Media Queries

Detect screen size and re-arrange/hide pieces. E.g. make the main navigation into large buttons on a mobile device to make touch interaction easy.

The user gets the best experience for the size device they are using.

mediaqueri.es

New Input Types for Forms

<input type="search" results="5" placeholder="search">

<input type="number">

<input type="range" min="1" max="10">

New Input Types for Forms

<input type="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" title="(xxx) xxx-xxxx">

<input type="url">

<input type="email" placeholder="Please enter your email address" required>

<input type="date">

Markup For Applications

<p id="editable" contenteditable="true">Click in this text and start changing it!</p>

<progress value="75" max="100">3/4 complete</progress>

<details><summary>Expand Me!</summary>Content</details>

Device Access

Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.

Conclusion

When Can I Start Using It?

Now

"Perhaps 2012. Perhaps 2022. It doesn't matter; what matters is that a lot of it is implemented in browsers now, so it can be used now. Saying that we can't use HTML5 because it isn't finished is like saying we can't speak English because it isn't finished." - Bruce Lawson

Now

• If your web app worked yesterday in HTML 4, it will still work today in HTML5 diveintohtml5.info
• There are many shims/polyfills to enhance the capabilities of non-modern browsers (IE8).
• Feature detection tools like Modernizr allow devs load a shim/polyfill and use new HTML5 tags in IE8.
• Google Chrome Frame - A plugin for IE8 so you can take advantage of websites that use a full set of HTML5/CSS3.
• Excellent starter templates available like HTML5 Boilerplate.

Developer Resources

So much more

We only had 1 1/2 hours. There is much more to explore!

• HTML5 Rocks
• HTML5 Demos

This is not PowerPoint. This was made with HTML5, CSS3, and JavaScript.

Thank You!!

Questions?

stacy london | @stacylondoner | linkedin | google +

Resources

• HTML5 Rocks
• HTML5 Briefing Notes
• HTML5 Specification
• W3C
• WHATWG
• HTML5 differences from HTML4

stacy london | @stacylondoner | linkedin | google +