84
An Intertech Course HTML5 Tutorial Davin Mickelson, [email protected] Intertech Inc.

HTML5 Tutorial

Embed Size (px)

DESCRIPTION

1. What is HTML5? 2. Brief History of HTML5 3. Tools for Development 4. New HTML5 Content Tags 5. HTML5 Shiv, Modernizr, and Polyfills with Graceful Degradation 6. Web Forms 2.0 7. Audio and Video 8. CSS3, SVG, and Canvas

Citation preview

Page 1: HTML5 Tutorial

An Intertech Course

HTML5 Tutorial

Davin Mickelson, [email protected]

Intertech Inc.

Page 2: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 2

IntertechInstructors Who Consult, Consultants Who Teach

Training• Training through hands-on,

real world business examples.

• Our site, your site, or live online – globally.

• Agile/Scrum, Citrix, VMware, Oracle, IBM, Microsoft, Java/Open Source, and web and mobile technologies.

Consulting Design and develop software

that powers businesses and governments of all sizes.

On-site consulting, outsourcing, and mentoring.

Agile, .NET, Java, SQL Server, mobile development including iPhone and Android platforms and more….

Our Company Over 35 awards for growth,

innovation and workplace best practices.

99.7% satisfaction score from our consulting and training customers.

Yearly “Best Places to Work” winner in Minnesota.

Page 3: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 3

About Me… Developed web applications since 1998 with:

FrontPage and Visual InterDev, FPSEs, ASP, and COM

Perl, ColdFusion <cftag>, ASP.NET: C#, VB.NET, F#

Intertech consultant/instructor since 2005

My Intertech Courses:

Complete ASP.NET 3.5/4.0

HTML5 and CSS3 for HTML4 Developers

For developers of all languages and tools

I teach .NET, SQL Server BI, TFS, jQuery, MVC, HTML5

I love reading books!

My web site and blog: http://www.mndeveloper.com

Intertech blog: http://www.intertech.com/blogNew fishing hat

doesn’t work!

Page 4: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 4

Agenda

1. What is HTML5?

2. Brief History of HTML5

3. Tools for Development

4. New HTML5 Content Tags

5. HTML5 Shiv, Modernizr, and Polyfills with Graceful

Degradation

6. Web Forms 2.0

7. Audio and Video

8. CSS3, SVG, and Canvas

Page 5: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 5

1. What is HTML5?

HTML5 is the latest suggested set of standards

(version 5.0) controlled by the World Wide Web

Consortium (W3C) for the Hypertext Markup Language.

It is not officially recommended yet but rather is a

“working draft” specification for supporting and displaying

documents.

HTML5 is also the collection of new APIs that web

browsers are expected to support.

Page 6: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 6

More About HTML5

HTML5 is reverse-compatible with HTML 4.01.

HTML5 includes 30 new tags.

HTML5 includes new APIs.

We will go into greater detail shortly.

In some ways, it feels like all new web technologies were

tossed into the HTML5 bucket.

Most HTML5 specifications are defined independent from

each other.

Learning a little about the history of HTML5 can make it

easier to understand where it is today and why.

Page 7: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 7

2. Brief History of HTML

The HTML standards for v1, v2, and v3 were all

recommended in the same year – 1995.

These early editions did not use Cascading Style Sheets

(CSS) to modify the appearance of the pages.

Instead, they included tags to signify styles, such as

<center>, <font>, and <b>.

HTML4 was released in 1997 with the recognition that

CSS could also be used to set the “style” of a Web page.

Page 8: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 8

Brief History of HTML

HTML 3.2 was released in January, 1997 and then HTML4.0 was

released in December, 1997.

HTML 4.01 was recommended in December, 1999, fixing bugs found

in the HTML 4.0 specification.

XHTML1.0, which treats HTML documents as well-formed XML

documents, was released in 2002.

It relies on the HTML 4.01 specification for most of its coding

requirements.

The W3C assumed that HTML would soon be pushed to the

sidelines and be superseded by XHTML by the web browser

developers.

The W3C continued to push for newer versions of the standard,

including XHTML 1.1 and the unfinished XHTML 2.0.

Page 9: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 9

XHTML2 Sucks

Even though XML was all the rage in the late ‘90s, the

W3C was wrong about XHTML.

In 2004, the W3C had a meeting which included the

plans to break compatibility with the current HTML 4.01

standards to instead pursue the XHTML 2.0 standards.

A few days later, a group of developers from several

different companies who felt disheartened from the

meeting felt that the W3C was leaving web browser

companies behind.

Page 10: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 10

Introducing Web Forms 2.0

They formed their own group with folks from Opera,

Mozilla, and Apple and called it the Web Hypertext

Application Technology Working Group

(WHATWG, http://www.whatwg.org).

Led by Ian Hickson from Opera, Its purpose was to

create its own set of standards for the web browsers

without breaking compatibility with HTML 4.01.

Initially they created Web Form 2.0, which was folded into

the HTML5 standards.

Page 11: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 11

Paving the Cowpaths

As the W3C continued work with the XHTML 2.0

standards, the WHATWG continued with their HTML5

standards.

Recognizing that the browser developers had no interest

in adding any support for the new XHTML 2.0 tags, the

W3C stopped all XHTML2.0 development.

They grabbed the latest standards from the WHATWG’s

site and called it HTML5.

The W3C refers to the practice of recognizing and

accepting the standard practices followed by the latest

browsers as “paving the cowpaths”.

Page 12: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 12

WHATWG Lives!

Somewhat bitter about losing the control of the HTML5

standards to the W3C, the WHATWG removed the

version number from their HTML standards.

They instead prefer to think of their standards as part of a

“living document”, an HTML playground of sorts, that

changes along with the standards.

Today, everyone is welcome to participate in helping

mold the future of HTML.

Page 13: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 13

XHTML5 is Cool, Though!

Although XHTML2 has officially been dropped by the

W3C, there is a new XHTML5.

HTML5 is still case-insensitive, doesn’t require closing

tags, and doesn’t require quotation marks around

attribute values.

XHTML5 is a way of writing HTML5 by treating the page

as a well-formed XML document.

Developers have the choice of following either standard,

knowing that XHTML5 is more of a programming mindset

that is not enforced by any web browser.

Page 14: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 14

XHTML5 is Cool, Though!

The XHTML5 schema is not actually enforced by a DTD

reference.

Instead, it is a set of rules followed religiously by the web

developer or team of developers.

Most HTML5 development tools also support XHTML5

development.

Page 15: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 15

HTML5’s New Tags

HTML5 includes the following 30 new tags (elements):

<article> <datalist> <header> <output> <source>

<aside> <details> <hgroup> <progress> <summary>

<audio> <embed> <keygen> <rp> <time>

<bdi> <figcaption> <mark> <rt> <track>

<canvas> <figure> <meter> <ruby> <video>

<command> <footer> <nav> <section> <wbr>

Page 16: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 16

HTML5’s (New?) APIs

HTML5 includes the following APIs:

WebSockets

Web Workers

File API

Web Storage

Offline Applications

History API

Drag and Drop

Geolocation

XMLHttpRequest

Page 17: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 17

HTML5’s New Media Tags

Graphics and media are support by the new media

elements.

The <audio>, <video, and <canvas> tags are new with

HTML5 and offer the ability to include media and

graphics programming.

Scalable Vector Graphics (SVG) is not new with HTML5

but is another graphics engine that has been supported

for some time by the more popular web browsers.

Page 18: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 18

<canvas>

The <canvas> tag is also supported by all the latest web

browsers today.

Its specification is so large that it gets its own set of

documents on the W3C web site.

It supports both 2D and 3D graphics using WebGL.

It threatens to eventually end the life of Adobe Flash and

Microsoft Silverlight!

Page 19: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 19

<input type=“hmm…”>

There are also new <input> types added to web forms.

These simplify data entry within the browser on the

desktop as well as on certain devices and display the

data in a richer fashion.

Some client-side validation has been added,

Page 20: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 20

What about CSS3?

CSS3 is also something that often gets mentioned with

HTML5.

Although it is a completely separate and smaller

specification, it is something that will also soon be

supported by all the web browsers.

CSS3 had to be upgraded with HTML5.

For example, it had to be able to stylize the new HTML5 tags.

It also had to be able to set styles deeply nested in the

new HTML5 outlining architecture.

Page 21: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 21

What Supports HTML5?

HTML5 is not fully supported by today’s user agents

(web browsers).

Heck – it’s barely supported at all by some!

So, we wait and develop around these browsers’

shortcomings using either polyfills or graceful

degradation

These changes sometimes seem to occur almost weekly.

Why, as you were just reading this, additional support was just added

to one of the user agents for the desktop, tablet, or smartphone.

REMEMBER: It is much easier (and quicker) to upgrade a simple

web site with new HTML5 and CSS3 features than it is to take an

existing HTML5 site and fix it to work with older browsers.

Page 22: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 22

HTML5 Support

Please be respectful of the many reasons that a lot of

Web users cannot upgrade their browsers or cannot use

different browsers.

Corporate policies may prevent users from surfing with

anything other than a certain brand of browser (for

example, Internet Explorer) or a certain version of a web

browser (IE6).

Operating systems may prevent a browser from being

upgraded.

For example, Windows XP will not allow users to upgrade

to IE9 or newer and some smartphones may not support

upgraded browsers.

Page 23: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 23

Most Popular Browsers You can find out which web browsers (desktop and

mobile) are the most popular ones being used today by

checking out the latest updated statistics on Net Market

Share’s site (http://marketshare.hitslink.com).

Page 24: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 24

Which browsers Support HTML5? There are several different web sites available that show

what HTML5 and CSS3 features are supported by

today’s web browsers.

Because HTML5 support seems to change weekly, be

sure that the content has been kept up to date.

The HTML5Test web site accurately reports the HTML5

support by the browser you use to view it.

Page 25: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 25

HTML5 Browser Support http://www.html5test.com

Page 26: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 26

3. Tools for Development

HTML5 and CSS3 are, of course, stored in text files.

You can use whichever text editor you prefer – even

Notepad in a pinch!

Some editors give automatic support for HTML5,

XHTML5, and CSS3 while other may require custom

plug-ins.

Some editors are free while others are going to cost you

(or your boss) some greenback$.

Thankfully, there is quite a selection of editors to choose

from!

Page 27: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 27

Online WYSIWYG Editors

You may consider a WYSIWYG web-based editor, which

is primarily designed to works with page-based editing or

supporting a CMS editing page.

IMPORTANT: These editors require you to use a browser

that already supports most of the latest HTML5 features.

Here are some free online HTML5 web editors:

http://maqetta.org/

http://jejacks0n.github.com/mercury/

http://aloha-editor.org/

http://rendera.heroku.com/

http://www.bluegriffon.org/ (also downloadable!)

Page 28: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 28

HTML5 Editors with Windows

For Windows, you can download any free text editor but

an editor that supports HTML5 and CSS3 will be better.

CoffeeCup offers a free HTML editor that works nicely.

http://www.coffeecup.com/free-editor/

Aptana Studio is a free yet awesome HTML5 editor as well.

http://www.aptana.com/

Eclipse, a favorite editor used by Java developers, offers

support for HTML5.

HTML5 support was added starting with the Helios editions of

Eclipse (Java EE Developers or JavaScript Web Developers)

As a nice alternative, you can also use the free Eclipse plug-in from

Aptana (above) for HTML5 support.

Page 29: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 29

HTML5 Editors with Windows

ASP.NET Developers (Forms and MVC3) can use

the free Visual Web Developer 2010 Express

You can install it online here: http://www.asp.net/vwd

The ASP.NET MVC 3 add-on includes support for

HTML5

Visual Studio 2010 SP1 adds most of the new HTML5

tags for markup validation (HTML5 & XHTML5)

CSS3 Extension is available in the Visual Studio Gallery

Offers vender prefix IntelliSense! (-moz-, -ms-, -o-, etc.)

Page 30: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 30

Developing on Windows Server

Special Note: Be sure the operating system you use as

the host for your developer tools supports rendering and

viewing all media types.

For example, some .NET developers may prefer to install

Windows Server 2008 or newer instead of Windows 7 or

newer to run other server-based software.

Unfortunately, Windows Server (all versions) does not

include the codecs required to view certain media types

within the web browser, such as MP3 and MP4 files.

You can’t develop for <audio> and <video> tags!

Page 31: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 31

HTML5 Editors with Mac Mac users may want to consider buy MacFlux for a

nominal fee. http://www.macwareinc.com/products/MacFlux/overview.html

It’s available at other online stores as well, such as Amazon.com

Windows and Mac users may also want to just consider

purchasing Adobe Dreamweaver CS5.5.

It isn’t cheap it but offers great support for implementing HTML5,

CSS3, media files, and jQuery integration support.

http://www.adobe.com/products/dreamweaver.html

It is priced as an upgrade, full product, or a subscription.

Page 32: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 32

4. New HTML5 Content Tags

Most developers are initially surprised how HTML5

actually simplifies the required boilerplate markup

needed for a Web page.

Fewer markups are needed by many of the tags and

some attributes have been dropped for simplicity’s sake.

Great HTML5 Starting Points:

http://html5boilerplate.com/

Offers an HTML5 starting document

http://www.initializr.com/

Lets you dynamically create a custom HTML5 document with

what you need it to support, then you download it.

Page 33: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 33

Consider this XHTML Document<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>This is the title of the document</title>

<script type="text/javascript" src="jquery.js"></script>

<link rel="stylesheet" href="bodystyle.css" type="text/css"/>

</head>

<body>

<div id=”header1” class=”header”>

<p>This is the main header content.</p>

</div>

<div id=”nav1” class=”nav”>

<a href=”default.htm”>Home</a><br/>

<a href=”products.htm”>Products</a><br/>

<a href=”support.htm”>Support</a><br/>

<a href=”about.htm”>About Us</a>

</div>

<div id=”main” class=”main”>

<p>This is the body of the document.</p>

<div id=”article1” class=”article”>

<p>This is the first article of the document.</p>

<div id=”section1” class=”section”>

<p>This is the first section of the document.</p>

</div>

</div>

</div>

<div id=”footer1” class=”footer”>

<p>This is the main footer content.</p>

</div>

</body>

</html>

Page 34: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 34

<div> Tags Everywhere!

The problem with the preceding example is that all of the

content is inside of nondescript <div> tags, which outputs

its contents in block format.

The developer is in charge of tracking, understanding,

and remembering the purpose of each chunk of the page.

Developers often track them by giving each one a

descriptive ID and/or assigning descriptive CSS class

names.

The <div> chunks are then positioned (absolute

positioning) using CSS rules defined in CSS style sheets.

Page 35: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 35

<div> is Not a Description

The web browser itself, of course, does not know one

<div> from another.

It just renders them all out according to the HTML, JavaScript,

and CSS that has been applied to them.

Worst yet, search engine spiders hoping to optimize their

results either have to try to figure out the content types

from class names or IDs or just use all the content.

Even more troublesome, folks using screen reader

software (such as JAWS) have a hard time navigating

through a typical web site because it is up to the app to

discern navigation links from content.

Page 36: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 36

MAMA!

Opera used their MAMA engine (Metadata Analysis and

Mining Application) to perform a survey of over two

million web sites (URLs) and identified the most common

class and ID names used with CSS style sheets.

They wanted to identify these names as potential

candidates for new tags in HTML5.

If a class name had been identified to been used at least

500 times, it made the list.

Page 37: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 37

HTML5 Version<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>This is the title of the document</title>

<script src="jquery.js"></script>

<LINK REL=stylesheet href=bodystyle.css>

</head>

<body>

<header id="header1" class="header">

<p>This is the main header content.</p>

</header>

<NAV id="nav1" class="nav">

<a href="default.htm">Home</a><br/>

<a href="products.htm">Products</a><br/>

<a href="support.htm">Support</a><br/>

<a href="about.htm">About Us</a>

</NAV>

<SECTION id="main" class="main">

<p>This is the body of the document.</p>

<article id="article1" class="article">

<p>This is the first article of the document.</p>

<section id="section1" class="section">

<p>This is the first section of the document.</p>

</section>

</article>

</Section>

<footer id="footer1" class="footer">

<p>This is the main footer content.</p>

</footer>

</body>

</html>

Page 38: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 38

New HTML5 Section Tags

HTML5 includes the following new Section tags:

HTML5 Section

Tags Official W3C Definition

<article> The article element represents a section of content that forms an independent

part of a document or site; for example, a magazine or newspaper article, or a

blog entry.

<aside> The aside element represents content that is tangentially related to the content

that forms the main textual flow of a document.

<footer> The footer element represents the footer for the section it applies to.

<hgroup> The hgroup element represents a group of headings.

<header> The header element represents the header of a section.

<nav> The nav element represents a section of a document that links to other

documents or to parts within the document itself; that is, a section of navigation

links.

<section> The section element represents a section of a document, typically with a title or

heading.

Page 39: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 39

Section Tag Rules – None!

The new HTML5 Section elements describe the content

contained within the page.

Any of the new tags can be nested inside of each other

any number of times as deemed necessary.

The key is to be consistent with the use of these tags

throughout the pages on the site.

Page 40: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 40

Consistency is the Rule!

Your primary content will probably be inside of <article>

and <section> tags.

You may have an <article> broken up by <section> tags

or have a few <article> tags nested within a <section>.

You might have an <article> inside of am <aside> tag or

<nav> placed inside of an <aside> with nested <section>

tags.

Anything is possible but as a best practice, you should do

it simply and consistently as possible - get the point?

Another important reason to use Section tags is they help

define a document outline.

Page 41: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 41

Other New HTML5 TagsHTML5 Section Tags Official W3C Definition

<bdi>The bdi element represents a span of text that is isolated from its surroundings for the purposes of bidirectional text formatting.

<command>The command element is a multipurpose element for representing commands.

<datalist>The datalist element represents a set of option elements that represent predefined options for other controls.

<details>The details element represents a control from which the user can obtain additional information or controls on-demand.

<keygen>The keygen element represents a control for generating a public-private key pair and for submitting the public key from that key pair.

<mark>The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<meter>The meter element represents a scalar gauge providing a measurement within a known range, or a fractional value.

<output> The output element represents the result of a calculation.

Page 42: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 42

Other New HTML5 Tags

HTML5 Section Tags Official W3C Definition

<progress> The progress element represents the completion progress of a task.

<rp>The rp element can be used to provide parentheses around a ruby text component of a ruby annotation, to be shown by UAs that don’t support ruby annotations.

<rt> The rt element marks the ruby text component of a ruby annotation.

<ruby>The ruby element allows spans of phrasing content to be marked with ruby annotations.

<summary>The summary element represents a summary, caption, or legend for a details element.

<time> The time element represents a date and/or time.

<wbr> The wbr element represents a line-break opportunity.

Page 43: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 43

5. HTML5 Shiv, Modernizr, Polyfills and

Graceful Degradation

We know that today’s browsers do not fully support

HTML5 and CSS3.

The good news is that most web browsers will happily

accept HTML containing any tag (made-up or HTML5)

that it doesn’t recognize.

For example, Firefox doesn’t have a problem with a web

page if it includes an <intertech> tag.

Most browsers will treat the unknown tag as any other tag

and add it to the DOM as is, allowing it even be stylized

with CSS.

Page 44: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 44

Dog Gone IE!

The bad news is that Internet Explorer 8 and older will

not accept unknown tags, including HTML5 tags, that are

not part of the original HTML4 DOM.

As well, IE will not let you stylize the new HTML5 tags

with CSS either, unless they have been officially created

programmatically using JavaScript.

One way to use HTML5 tags and stylize them in IE 6-8 is

to create the elements in the head section, like so…

The example below is using Microsoft’s proprietary

optional script that only works in Internet Explorer.

Page 45: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 45

Our Job to Fix Older IEs

The example below is using Microsoft’s proprietary

(optional) script that only works in Internet Explorer. <!DOCTYPE html>

<html>

<head>

<title>This is the title of the document</title>

<!--[if lt IE 9]>

<script>

document.createElement('header');

document.createElement('footer');

document.createElement('nav');

document.createElement('article');

document.createElement('section');

...

</script>

<![endif]-->

Page 46: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 46

The Famous HTML5 Shiv!

Thankfully, John Resig, creator of jQuery, created a

JavaScript file called the HTML5 Shiv that we just need to

reference from the top of our page.

This script automatically creates all the new elements

into the DOM so they are readily available.

These new elements are not functional, but at least IE

knows they exist.<!--[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

A shiv is a prison knife; this is really a shim! Both can be used to shank IE!

Page 47: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 47

What’s a Polyfills?

A polyfill is a script or plug-in that provides an API that

the developer expects the browser to provide natively.

There are many polyfills available and you can pick and choose

to use whichever ones you like.

Most (if not all) polyfills are free and open source.

Page 48: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 48

Polyfills Are Your Friends!

Polyfills are excellent at filling in where a browser is

lacking a feature.

However, there will be a performance cost associated with each

use of a polyfill.

You can easily bring a well performing page to its knees,

depending on the size of a polyfill or how many times you use or

abuse it.

Remember - polyfills will never provide any functionality that

performs as fast as if it was already compiled into a supporting

web browser.

Page 49: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 49

A Classic Canvas Polyfill

Although IE9+ supports the <canvas> tag, a famous

polyfill that brings basic canvas functionality to older

versions of IE is Explorercanvas.

http://code.google.com/p/explorercanvas/

Page 50: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 50

Another Canvas Polyfill

FlashCanvas is another polyfill that is supposed to

perform even better. http://flashcanvas.net/

It exposes Canvas functions but uses an Adobe Flash

object in the background to draw and perform just like the

Canvas object.

Page 51: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 51

CSS3 Polyfill

There are some free CSS3 polyfills to fill in the

shortcomings of IE 6-9.

The PIE polyfill allows CSS3 behavior in older versions of

Internet Explorer: http://css3pie.com/

Page 52: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 52

Yepnope!

A conditional resource loader script can be used to check

the browser for support for a technology and only load

the polyfill if necessary.

Yepnope is one of the most popular resource loader

scripts. http://yepnopejs.com/

Based on a condition that you define, it can load and

cache JavaScript and CSS files asynchronously into the

browser memory.

When they are done being downloaded, it can

automatically call into the script(s) via a callback function.

Page 53: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 53

Modernizr!

The most popular HTML5 script would easily be

Modernizr. http://modernizr.com/

Page 54: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 54

Modernizr Includes the Shiv!

Modernizr allows developers to test the current web

browser for the support of HTML5 and CSS3 features.

If a feature isn’t supported, a polyfill can be loaded and

used instead.

Modernizr actually has the HTML5 Shiv rolled into it!

Just by including Modernizr, you automatically have all

the HTML5 tags added for IE 6-8 web browsers.

Page 55: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 55

Modernizr Includes Yepnope!

Modernizr also has an unmodified version of the

Yepnope script included with it.

The developers realized how much Yepnope significantly

shortened the code needed to use Modernizr.

Again, no need to also include the resource loader.

Yepnope is wrapped by the Modernizr.load( ) method.

Page 56: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 56

Modernizr Example!

Here is a simple example that checks if the current

browser supports the HTML5 Geolocation feature.

If it does, it loads the geo.js script that uses the built-in

functionality.

If it doesn’t, it loads the geo-polyfill.js script to supplant

the Geolocation functionality and use it:

Modernizr.load({

test: Modernizr.geolocation,

yep : 'geo.js',

nope: 'geo-polyfill.js'

});

Page 57: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 57

“Get Your Polyfills…”

An amazing list of polyfills are listed on the Modernizr

GitHub site here:

https://github.com/Modernizr/Modernizr/wiki/HTML5-

Cross-browser-Polyfills

Page 58: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 58

6. Web Forms 2.0

Web Forms 2.0 was the original creation of HTML5 by

the Opera team.

This is why most of these features are only supported

by the Opera web browser today!

It was created by the WHATWG group in spite of W3C’s

intention to move forward with the XML-based Xforms

markup.

Page 59: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 59

<output>

The <output> element is designed to be a target for

displaying updated data to the user.

It could be used to display the result of a calculation

performed with JavaScript.

<output id="oresult"></output>

Page 60: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 60

<datalist>

The <datalist> element can be combined with the <list>

attribute of an <input> element.

<datalist id=“colorlist">

<option value=“red”>

<option value=“green”>

<option value=“blue”>

</datalist>

Page 61: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 61

Progress and Meter

These two tags are often confused with each other.

The progress is meant to show a percentage of how far a

task has completed.

The meter is intended to display a value between a

starting and ending number.

<progress id=“Count” value=“0” max=“100”/>

<meter id=“Count” value=“0” max=“50”/>

Page 62: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 62

7. Audio and Video

Unfortunately, no web browser supports all media

formats yet

Even worse, it’s because of the politics of the underlying

technologies as to why we have to suffer.

Apple and Microsoft are members of the MPEG group

who manages the standards for MP3s (audio) and MP4s

(audio and video).

They receive money when their technologies are used.

The remaining browser venders (Google, Opera, Firefox)

are not interested in supporting them and their preferred

codecs for this very reason.

Page 63: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 63

Audio and Video

Here are the supported media types and the browsers

that support them.

Browsers WebM MP3/MP4 OGG/OGV

Opera X X

Firefox X X

Chrome X X

IE9 X

Safari X

Page 64: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 64

Audio and Video

<audio controls autoplay>

<source src=“../media/myaudio.mp3” type=“audio/mpeg”>

<source src=“../media/myaudio.ogg” type=“audio/ogg”>

<p>Your browser doesn’t support the HTML 5 audio tag</p>

</audio>

<video autoplay controls width=“640” height=“480”>

<source src=“../media/myvideo.mp4” type=“video/mp4”>

<source src=“../media/myvideo.ogg” type=“video/ogg”>

<p>Your browser doesn’t support the HTML 5 video tag</p>

</video>

Page 65: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 65

Audio and Video

In order to support all the browsers, we need to include

multiple <audio> and <video> media types so everyone

can enjoy.

Even if their browser doesn’t support the audio/video

codecs you offer, there is a script that can let the user fall

back to a Flash video.

It is called “Video for Everybody” and it was created by Kroc

Camen

http://camendesign.com/code/video_for_everybody

Page 66: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 66

8. CSS3, SVG, and Canvas

Currently, there are four versions of CSS.

The CSS 1.0 recommendation was introduced in December,

1996.

The CSS 2.0 standard included features that were overlooked in

CSS 1.0 and was recommended in May, 1998.

CSS 2.1 removed poorly-supported features and added existing

Web browser extensions. It was recommended in July, 2007.

CSS 3.0 has not been officially recommended yet.

However, all browsers (Firefox, Opera, Safari, IE 8+)

have already been adding support for CSS 3.0.

Page 67: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 67

CSS3 Vendor Prefixes

As the browser vendors add new CSS3 functionality to

their browsers, they set up vender prefix requirements

unique to each of them.

They do this because the CSS3 standards have not yet

been finalized and their implements might require bug

fixes or rewriting if the standards change.

The idea is that these vendor prefixes will be removed

when the CSS3 standards are finalized and the kinks are

worked out of the browsers.

Thus, in order to take advantage of the latest cool CSS3

features, web developers must use them.

Page 68: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 68

CSS3 Vendor Prefixes

There are a couple of problems with vendor prefixes.

It requires web developers to redefine a particular style

several times within the CSS style sheet for each of the

vendor prefixes.

Some browser venders have actually considered adding

support for the “-webkit-” prefix when their particular

browser starts supporting a CSS3 feature.

Page 69: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 69

CSS3 Vendor Prefixes

The most prevalent vendor prefixes that are used with

CSS3 are:

-webkit- for Google Chrome and Apple Safari

-moz- for Mozilla Firefox

-ms- for Microsoft Internet Explorer

-o- for Opera

See more here: http://wiki.csswg.org/spec/vendor-

prefixes

Page 70: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 70

CSS3 Features

CSS3 introduces several new features including:

Multi-column and grid layout

Rounded corners

Border images

Text and Box Shadows

Animations

Gradients

Page 71: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 71

CSS3 Gradient Example

Here is the web page:<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="StyleSheet.css" rel="stylesheet" />

</head>

<body>

<article></article>

<br>

<div></div>

</body>

</html>

Page 72: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 72

CSS3 Gradient Example Here is the style sheet:article

{

width: 300px;

height:300px;

background-image: -moz-linear-gradient(#f00 20%, #00f 100%);

}

div

{

width: 200px;

height :200px;

background-image: -moz-linear-gradient(270deg, #f00 0%, #070

100%);

}

Page 73: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 73

CSS3 Gradient Example

Here is the result:

Page 74: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 74

SVG

SVG has been around for awhile, although IE8 and older

required a plug-in to view SVG files.

It is primarily based on creating graphics from data stored

in XML format.

You can use Adobe Illustrator to create SVG files.

Learn more here:

http://www.w3schools.com/svg/svg_examples.asp

Here is a small example:<html><body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2"

fill="red" /></svg>

</body></html>

Page 75: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 75

Canvas

The Canvas object can be used to drawing 2d and 3d

images.

All the latest browsers now support the canvas object in

2d mode.

Few support the WebGL 3D mode. Try your favorite browser at

http://playground.HTML5rocks.com

The Canvas object is primarily drawn on with JavaScript.

The object has no memory of where it drew on it

previously.

That all must be tracked by the developer (collision

detection, etc.)

Page 76: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 76

Canvas

The primary markup to use the canvas object is this:<canvas id=“myCanvas” width=“300” height=“300”>

Your browser doesn’t support the canvas object.

</canvas>

Page 77: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 77

Canvas The JavaScript needed to use the Canvas object must

first create the object before drawing on it.function drawPic()

{

var canvas = document.getElementById(“myCanvas”)

if(canvas.getContext(“2d”)

{

context = canvas.getContext(“2d”);

context.beginPath();

context.moveTo(100,100);

context.lineTo(200,200);

context.lineTo(100,200);

context.closePath();

context.stroke();

}

}

Page 78: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 78

Resource List Come to my HTML5 Class here at Intertech!

Attend in person or virtually!

The class covers much more detail.

You learn by doing in the exercises and labs.

Classes scheduled: May 24&25, July 23&24

Good books:

HTML5 Mobile Application Development in 24 Hours

HTML5 and CSS3 for the Real World

HTML5 Canvas, Great Start for Game Development

Introducing HTML5 - 2nd Edition, Warped humor and very

informative! (My favorite!)

O’Reilly Canvas Pocket Reference

Visual QuickStart Guide CSS3

Page 79: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 79

HTML5 Links http://html5test.com

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

http://www.w3.org/TR/2012/WD-html-markup-20120329/

http://www.html5rocks.com/en/

http://html5labs.interoperabilitybridges.com/

http://playground.html5rocks.com/

http://www.browserscope.org/

http://css3test.com/

Many more…

Page 80: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 80

Associated Courses and Resources

Free Chapter From Intertech’s HTML5 Course

• Complete HTML5 Mobile Training

• Intertech Article on HTML5

Page 81: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 81

Intertech Training

Intertech offers training in these areas:

JavaEE, open source technologies

.NET, SQL Server, SharePoint

XML, Ajax

Process/Design/Agile

jQuery and HTML5/CSS3

Delivery formats include:

Instructor-led public and onsite

Instructor-led virtual

Mentored Learning

For advanced purchase customers,

Intertech offers Elite Rewards™—call

651-994-8558 +23

Page 82: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 82

Intertech Consulting

In addition to training, Intertech

delivers consulting

Consulting is part of our brand:

Instructors Who Consult |

Consultants Who Teach

Give your project success with

our consulting services

To learn more, contact us at

651-994-8558 +11

Page 83: HTML5 Tutorial

Intertech

Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 83

Intertech Resources

http://LinkedIn.Intertech.com

http://Facebook.Intertech.com

http://Twitter.Intertech.com

http://YouTube.Intertech.com

http://www.intertech.com/FreeEvents/FreeEvents.aspx

Page 84: HTML5 Tutorial

An Intertech Course

Q & A