Upload
intertech-training
View
853
Download
1
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
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.
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!
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
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.
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.
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.
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.
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.
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.
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”.
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.
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.
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.
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>
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
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.
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!
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,
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.
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.
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.
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).
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.
Intertech
Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 25
HTML5 Browser Support http://www.html5test.com
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!
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!)
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.
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.)
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!
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.
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.
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>
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.
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.
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.
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>
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.
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.
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.
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.
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.
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.
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.
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]-->
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!
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.
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.
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/
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.
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/
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.
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/
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.
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.
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'
});
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
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.
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>
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>
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”/>
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.
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
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>
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
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.
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.
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.
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
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
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>
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%);
}
Intertech
Copyright © Intertech, Inc. 2012 • http://www.Intertech.com • 800-866-9884 • Slide 73
CSS3 Gradient Example
Here is the result:
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>
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.)
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>
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();
}
}
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
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…
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
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
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
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
An Intertech Course
Q & A