HTML5 Instructor guide
This instructor guide is a companion to the HTML5 student curriculum and lesson files as well as the
HTML5 lecture notes, delivered in PowerPoint format. This guide includes class setup and/or preparation
notes for each of the 6 curriculum modules, as well as alternate exercises for students and additional
review questions.
How to use this instructor guide and the accompanying lecture notes
The goal of the instructor guide is to provide you a structured way to supplement the content covered in
the student curriculum. The companion PowerPoint lecture notes that are included with this curriculum
cover the central concepts covered in the student guide, however, the student guide provides in-depth
discussion of the topics as well as step-by-step exercises. This instructor guide is designed to help you
provide students with additional practice of the concepts covered in the main curriculum. Additionally,
this guide includes additional content that is not covered in the student guide and can be used for
advanced students or for additional exercises with your class.
Based on your class structure here are some suggestions on how to use this guide. 1.) As supplemental
in-class exercises. Each curriculum module has exercises that are very similar to those found in the
student guide only with different content. You might choose to walk through these exercises with the
entire class in order to reinforce concepts 2.) Additionally, you could print or otherwise deliver these
exercises to students to complete on their own as in-class labs or out-of-class homework.
The six curriculum modules
 Module 1: Defining HTML5
 Module 2: Fundamentals of HTML, XHTML and CSS
 Module 3: Introduction to CSS Layout
 Module 4: Using HTML5 Markup
 Module 5: Working with Canvas
 Module 6: HTML5 Multimedia and Drag and Drop
The 6 modules provide an introduction to HTML5 with the first module providing an overview of HTML5
but no lesson files (all remaining modules include lesson files). Lessons 2 and 3 cover the fundamentals
of standards based web design and include step-by-step exercises. Lesson 4 covers the fundamentals of
using the new HTML5 markup elements and other key concepts. Lesson 5 covers the fundamentals of
working with the Canvas element. Lesson 6 covers the HTML5 Drag and Drop API as well as adding
Multimedia with the HTML5 video element.
While the lessons can be used progressively, you are also able to use each lesson independent of the
others if it suits the needs of your class.
Starting Up
Make sure that you are familiar with this section, as it contains important information regarding the
hardware and software requirements recommended for this curriculum. This includes the software and
operating system requirements as well as web browser considerations.
Prerequisites
There are a few basic requirements that all users must meet before starting the lessons in this
curriculum. The user must have elementary computer skills, such as the ability to use the mouse. This
curriculum does not teach users how to navigate their directory systems.
Minimum System requirements
Make certain that the computer systems used in the classroom or lab are capable of running modern
Web browsers and HTML development tools. The minimum system requirements are as follows:






Intel® Pentium® 4 or AMD Athlon® 64 processor
Microsoft® Windows® 7; or Microsoft® Windows® XP with Service Pack 3; Windows® Vista® Home
Premium, Business, Ultimate, or Enterprise with Service Pack 1.
1 GB of RAM recommended
1 GB of available hard-disk space for working with lesson files
1280×800 display with 16-bit video card
Broadband Internet Connection
Web browsers
You will need Microsoft Internet Explorer 9 or later installed. Many of the HTML5 features covered in
the curriculum are not fully supported in earlier versions of the browser.
At the time of this writing (Fall 2011) Microsoft Internet Explorer 10 is also available as a Platform
Preview. Internet Explorer 10 supports more HTML5 features than Internet Explorer 9, however
Developer Preview versions are not yet in their final format. You can view the status of Internet Explorer
10 and download it at the following url:
http://ie.microsoft.com/testdrive/info/downloads/
If possible, you should confirm before you begin this curriculum that all student systems are using the
same version web browser. If all students, as well as the teacher, are using the same browser, this will
rule out browser bugs or discrepancies during class.
Throughout the curriculum we try to anticipate and note where HTML5 features have not yet been
implemented in Internet Explorer or other browsers. Keep in mind that HTML5 is an evolving standard
and browser compatibility issues will be a concern as the browsers are being updated at different times
to include new features. New features that work in one browser may not yet be implemented in
another.
2
Text Editors
Use of Microsoft Visual Studio 2010, Microsoft Visual Web Developer Express, or Microsoft WebMatrix
is recommended for the hands-on portion of this curriculum. If your school or department subscribes to
the Microsoft Developer Network Academic Alliance (MSDNAA) you can obtain these tools from your
MSDNAA account or download WebMatrix from http://www.microsoft.com/web/webmatrix/
and full-time students cans also obtain these tools at no cost from their DreamSpark account at
www.DreamSpark.com.
Loading lesson files
Each lesson, with the exception of lesson 1, contains files that accompany the exercises for each of the
lessons. Students should copy either the entire folder for all lessons to their local hard drive, or copy
only the lesson folders for the individual modules being covered.
Images used in this curriculum
It is important to remind students that the images in this curriculum are copyrighted and licensed for
educational use only with this curriculum, and are not to be re-used or repurposed without express
written consent.
Additional information available on HTML5
The scope of this curriculum covers the fundamental concepts of HTML, XHTML, CSS, JavaScript and
HTML5. Throughout the curriculum, you will find references to more advanced topics that are suitable
for follow-up assignments. For a further discussion of the topics we recommend the HTML5 Digital
Classroom book, published by Wiley. Some of the material in these exercises is adapted from this book.
The HTML5 Digital Classroom covers some of the same concepts found in this curriculum in more detail
including HTML5 forms, Multimedia and Interactivity as well additional material not found in this
curriculum including advanced styling with CSS3, using CSS3 Media Queries, Offline Storage, Geolocation
and additional topics. The HTML5 Digital Classroom book also includes lesson files, video tutorials, and
an instructor’s guide is available. The book includes a DVD in printed format, or on-line access to these
resources for e-book users.
3
Lesson 1
Defining HTML5
This instructor guide is designed to provide you with additional exercises to help you dive deeper into
some of the concepts covered in the book. The first lesson contains no lesson or exercise files, but
provides an overview for students on the features of HTML5.Students will learn about the relevant page
layout tags in HTML5 as well as additional new tags and HTML5 form elements. Additionally, related
technologies including Geolocation, Offline Storage, Drag and Drop, Canvas and CSS3 are covered.
Defining HTML5
This lesson attempts to clarify what is and what isn’t HTML5. Students used to working with HTML 4.0
(or XHTML) may be forgiven for thinking that HTML5 is simply new markup elements (<header>, <nav>,
<aside>, etc.). At the same time, students whose only experience with HTML5 is from information they
may have picked up in the media or elsewhere may think of HTML5 as technology that is used only for
mobile devices.
This is why we make the distinction between the HTML5 “core” which largely includes the new markup
elements and the HTML5 “family”: CSS3, Geolocation, Drag & Drop and others.
As supplementary information on how Microsoft’s HTML5 demo site “Never mind the Bullets” was
created, play the “Making of” video at the following URL:
http://www.nevermindthebullets.com/video.html
After the video have a class discussion on elements that are part of the HTML5 “core” versus the HTML5
“family.”
HTML5 Markup
This section provides a brief overview of the new markup elements in HTML5. A further exploration of
how to use these elements takes place in Lesson 6: Using HTML5 Markup.
The Internet Explorer Test Drive site (http://ie.microsoft.com/testdrive/) is referenced often in the
curriculum, however only a fraction of the available demos are used. Many of the demos rely on a
technical understanding of HTML, CSS and/or JavaScript, and so not all of the demos are the best
introduction for beginning students. We have chosen the demos most suitable for beginning students,
you may wish to run through the site ahead of time and choose demos most suitable for your class.
Advanced demo: For students who may be more comfortable with code you may choose to visit or have
students visit the following URL and experiment with removing the various HTML5 elements from the
code and running the demo page. This will help reinforce the new HTML5 elements.
4
http://playground.html5rocks.com/#semantic_markup
Video and Audio elements
Beginner demo: The following page allows students to see the code that embeds video and audio
multimedia.
http://www.html5rocks.com/en/tutorials/video/basics/
Advanced demo: Visit or have students visit the following URL and experiment with removing the
various HTML5 video elements from the code and then run the page.
http://playground.html5rocks.com/#video_tag
The canvas element
Beginner demo: The following page allows students to use a web application that makes use of the
canvas element.
http://www.lucidchart.com/
Advanced demo: Visit or have students visit the following URL and experiment with removing the
various HTML5 video elements from the code and then run the page.
http://slides.html5rocks.com/#canvas-2d
Web Forms
Beginner demo: The following is a presentation that illustrates the new HTML5 web form attributes.
http://standardista.com/interlabs/#slide1
Advanced demo: Visit or have students visit the following URL and experiment with removing the
various HTML5 video elements from the code and then run the page.
http://playground.html5rocks.com/#form_fields
An overview of HTML5 APIs and supporting technologies
The details of supporting HTML5 technologies such as Geolocation, Drag and Drop, Web Workers and
many more are technically challenging for many beginners. For a good overview on these technologies,
we recommend the HTML5rocks slide presentation:
http://slides.html5rocks.com/#landing-slide
5
Questions
1
What is an API and how does it relate to HTML5?
2
Is support for animation more likely to be found within HTML5 or CSS3? Explain.
3
List three questions that one may ask for testing a website for usability.
Answers
1
APIs (Application Programming Interfaces) are a way to create applications using pre-built
components. One of the main goals of an API is to simplify otherwise complicated programming
tasks. There are a number of APIs related to HTML5 including Drag and Drop, Web Storage,
Microdata, and Geolocation.
2
CSS3 is capable of creating animation using transforms, transitions and other techniques. The
HTML5 specification does not technically include animation unless one includes the <canvas>
animation features. Additionally, <canvas> is strictly speaking an API and not part of HTML5
specification.
3
What section of the page does your eye go to first? Is that section the most important element on
the page? Without clicking on anything yet, if you were exploring, what would you click on first and
why?
6
Lesson 2
Fundamentals of HTML, XHTML and CSS
This lesson gives students a solid introduction to the fundamentals of HTML, XHTML, and CSS. The
concepts covered here are considered the foundations of standards-based web design. Concepts such as
identifying where CSS styles can be located (Internal, External and Inline) as well as the different
categories of CSS styles (Tag styles versus class and ID styles) need to be well understood before students
can progress to HTML5 basics.
The W3C and page validation
This exercise in the book is useful to help reinforce the concept of web standards.
As a supplemental exercise, have students use the W3C site’s “Validate by URI” feature located at
http://validator.w3.org/ and enter in the web addresses of popular websites. Does the site validate? If
the site does not validate what are the errors and/or warnings?
It is important to reinforce that validation is not a guarantee that a web site looks good or even is
working in the browser (i.e. the exercise in this lesson specifically includes a web page which has broken
image links). Many designers and developers simply use a validation as a tool to help troubleshoot HTML
and CSS problems such as typographical errors or incorrect syntax. (Think of it like the HTML equivalent
of spell check). Another important point to stress is that 100% validation is a worthy goal but not always
possible or necessary. You can emphasize this point by having a discussion with students about the
difference between accessibility and usability. Page validation can be a great tool to improve
accessibility in a web site (for example Alt tags, the text description for images, are required for a page
to validate and improve a page’s accessibility for screen readers). Usability is a related issue, but
completely different. Usability of a website is not something that can be tested by a web service such as
the W3C validator; whether a site is usable or not can only come from feedback from users.
Creating and applying Cascading Style Sheets
Many students will have questions about when they should be using internal versus external style
sheets. Internal styles are often used by designers in the initial stages of building a site, mainly because
it is easier to work with your code when both HTML and CSS are in the same document. After a site has
been finalized and the internal styles have been moved to an external style sheet, the benefit of internal
style sheets becomes the ability to create new styles for a single page. In other words, with competing
styles (two h1 styles, for example), the internal style will win.
In this exercise, they will add a second page to the website and attach a style sheet to it so that the
styles they’ve already created will carry over to the new page. First, they need to save the style sheet
from the index.html file.
7
The three locations for styles
It is important for students to grasp the difference between internal, external and inline styles. One way
to reinforce the concept is refer to the word “Cascading” in the context of Cascading Style Sheets. Styles
for the majority of a website often reside in the external style sheet, then styles for a specific page
reside in an internal style sheet (and also if there two conflicting styles, the internal style “wins”) and
finally there are inline styles where the style rules are embedded inside HTML tags. So the cascade
might be represented like this:
External Styles
Internal Styles
Inline Styles
Working with ems
As an instructor, you should be aware and be prepared to discuss that there is still a bit of debate and
different practices as to which unit of measurement is best for sizing text. The options include pixels,
points, percentages, ems, and keywords. In the author’s opinion, ems are the most powerful option
available; however, this is largely under the assumption that a “CSS Reset” file will eventually be used.
Additionally, there has been a school of thought among designers and developers that ems are useful
not only for text, but as measurements for the layout containers of the page itself. This methods for embased layout are a bit more complicated than using pixels and we do not cover it in this curriculum,
however for a further exploration of how ems are used not only for text but page layout familiarize
yourself with this article:
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
Additional Assignments
After students have finished this module, you can test their understanding of the material by having
them complete any or all of the following:


Create a new page in the Worldwide Apparel site and attach their existing style sheet.
Have students visit http://www.typetester.org/. On this site students can experiment with different
type styles in real time on the screen. After they find a style, they are able to get the CSS for any of
the columns on the screen. Demonstrate how to copy this CSS code and paste it into their own style
sheets for and then have them create an alternative style for the heading 1 or 2 on the Worldwide
Apparel site.
Questions
1
List three significant differences between XHTML and HTML.
2
What are some benefits to creating well-structured web pages?
3
What is the alt attribute?
8
4
List four of the most reliable fonts for web use.
5
What is a font stack?
Answers
1
In XHTML all tags must be lowercase. XHTML requires all tags to be closed. XHTML requires proper
nesting of tags.
2
Less code, ease of maintenance, accessibility, search engine optimization and device compatibility
are all benefits of creating well structured pages.
3
The alt attribute represents the text equivalent for the image. This text will appear in browsers if the
image is broken or missing.
4
Arial, Verdana, Georgia, Times New Roman, Courier, Trebuchet, Lucida, Tahoma, and Impact are all
reliable fonts for web use.
5
A font stack is a list of multiple fonts that the web browser uses in an attempt to display text onscreen.
9
Lesson 3
Introduction to CSS Layout
In this lesson, students learn the role of a CSS reset file and how to create the basic layout structure of a
two column, fixed-width layout using the CSS float and clear properties. Additional concepts covered
include the role of margins and padding with div elements, contextual selectors and using background
images.
The role of a CSS Reset file
A CSS Reset file has become an invaluable tool for many web designers and all students need to
understand its purpose and be able to use and modify one.
Conceptually, the reset file is easy to understand: An external style sheet is added to a page that
includes multiple rules that set the margins and paddings of HTML elements to zero. The benefit of this
technique is that it removes the browser’s default styling and provides a predictable foundation for the
designer to begin adding their own rules.
Although this technique is useful, there are potential downsides (especially for beginners). Here are
some of the most common problems that can happen with style sheets.


Once an external reset style sheet is linked to a page it is easy for students to forget about it. This
increases the potential for confusion when they add an element and it is being affected by the zero
margins and padding in the reset style sheet.
When a new HTML page is added to a website, the reset style sheet also needs to be attached.
Failing to do so will mean that a paragraph or a heading on the new page will not look like the
paragraph or heading on the other pages.
It is important to keep in mind that web designers and developers will use reset style sheets in widely
different ways. Some may not use them at all; others will customize the reset style sheet for their own
needs (such as setting the body text with their favorite web font).
You should be familiar with the original article on reset style sheets mentioned in the book:
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
Again, there is not a universal consensus among designers and developers regarding style sheets.
Although we believe they are useful, at the very least, a web designer needs to know what they are.
Additionally, there is a marked trend in the industry to use not only CSS reset files, but also CSS
Frameworks.
10
A CSS Framework is an external style sheet that creates a template for designers. Although this is an
important development in web design, it is not covered in this book. For additional information on both
reset style sheets and CSS frameworks, refer to this article:
http://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
Using margins to modify the space between your text
Typically, students are eager to begin creating page layouts as soon as possible, but it is often in their
best interests to understand the fundamentals of working with margins and paddings first.
Remind them that it is common practice for designers to temporarily include properties such as borders
and background colors to help them visualize the relationship between objects on the page. They can
think of them as training wheels that are eventually removed once they have a solid conceptual
understanding of the layout.
Contextual selectors
The styling of the navigation bar in this lesson makes use of an important concept called “contextual
selectors.” As explained in the book, a contextual selector is a rule that targets a specific rule inside of an
ID or Class.
As a refresher this rule targets all heading 2s on a page:
h2 {
color:red;
}
Whereas this rule is a contextual selector and will only target heading 2 elements inside the div named
“box”:
#box h2 {
color:red;
}
Online Resources
To get more in depth background on how to create column layouts (and in particular three column
layouts), try some of the following online resources:
http://www.alistapart.com/articles/multicolumnlayouts/
http://www.positioniseverything.net
11
Additional Assignments
After students have finished this module, you can test their understanding of the material by having
them complete any or all of the following:



Save a copy of the Worldwide Apparel site and ask them to change the position of the sidebar
column from the right hand side of the page to the left. This will require them to change the float
properties for both the main column as well as the sidebar. Additionally, they should adjust any
margins, paddings or borders in order to reflect the new position of the columns.
Have students visit http://www.typetester.org/. On this site students can experiment with different
type styles in real time on the screen. After they find a style, they are able to get the CSS for any of
the columns on the screen. Demonstrate how to copy this CSS code and paste it into their own style
sheets for and then have them create an alternative style for the heading 1 or 2 on the Worldwide
Apparel site.
Based on students’ familiarity with an image editor such as Photoshop they can be assigned an
exercise to create a new background image from scratch. For example they could create a vertical or
horizontal gradient for either the body of the page or one of the layout containers. Alternatively, if
they have access to stock photo imagery they could replace the footer background image currently
used in the site.
Questions
1
What is the benefit of using a reset style sheet?
2
What are the two ways to add an image to a web page?
3
True or false. You can only create two types of styles for hyperlinks. The default style, and the style
for when a link has been visited.
Answers
1
Reset style sheets help standardize your layout across browsers. Frequently used styles can also be
added to reset style sheets.
2
Images can be added through an HTML image tag (inline images) or by using CSS background
images.
3
False. You can create four styles for hyperlinks: a:link, a:visited, a:hover and a:active.
12
Lesson 4
Using HTML5 Markup
In this lesson, students learn about the new HTML5 sectioning elements and the other elements as well.
Specifically, they learn how to take a pre-existing web page (built in XHTML 1.0) and convert the pages
DOCTYPE and existing div structure to HTML5 and the corresponding new sectioning elements.
Additionally, strategies for increasing HTML5 support for older browsers is covered as is adding support
for versions of Microsoft Internet Explorer 6, 7 & 8 using the Modernizr JavaScript library.
A review of semantic markup
Understanding the role of semantic markup in all forms of web design is a very useful skill for students,
however the phrase “semantic markup” can sometimes be confusing or intimidating. Be sure to
emphasize the message in this section that semantic markup really just means “Choosing the best tag
for the job”. In fact, this is one of the benefits of HTML5, choosing the best tag for the job is now easier
because we have tags that are more specific such as <header>, <footer>, <aside>, <nav>, <section>, and
<article> among others.
Adding HTML5 support for older browsers
There are two techniques covered in the curriculum that increase support for browsers with limited
support for HTML5 elements. The first technique covers the addition of the display:block rules into the
reset.css file and the second technique covers the use of the Modernizr JavaScript library in order to
provide support for Internet Explorer 6, 7 and 8.
HTML5 Fundamentals
The key take away from this section is that HTML5 is designed to be broadly compatible with both new
and old web browsers alike.
Additional exercise: Have students build a simple web page with different methods of syntax. For
example, use an uppercase <P> to start a paragraph and then a lowercase <p> to end the paragraph.
Alternatively, have them use only the opening tag for an element an <h1> for example and not place a
closing tag. The goal of this exercise is make them aware of the differences between HTML5 syntax and
other versions (HTML 4.01 or XHTML 1.0) for example. For added reinforcement, have them validate this
page using the W3C validator (explored in lesson 02):
http://validator.w3.org
The different categories used for HTML5 content
This section reinforces the new HTML5 elements and particular attention should be paid to the
sectioning content. Sectioning is the most obvious difference between HTML5 and previous versions of
13
HTML/XHTML not only because it includes all new tags, but because it includes the concept of a
document outline.
As noted in the curriculum, the concept of HTML5’s document outline is a bit difficult to discuss, mainly
because web browsers do not expose the document outline. One exercise you can use to illustrate
document outlines is the “Semantic Notepad” on Microsoft’s Test Drive website:
http://ie.microsoft.com/testdrive/HTML5/SemanticNotepad/Default.html
Using the new page elements in HTML5
This exercise in the curriculum focuses on taking the pre-existing web layout created in Lessons 2 and 3
for WorldWide Apparel and replacing the div tags with the various HTML5 elements. Although this is
perhaps the easiest method to understand the new syntax, students will benefit as well from creating an
HTML5 page from scratch.
Ask students to build a simple site using the tags: <header>, <nav>, <aside>, <footer>,
<section>,<article><figure>, <figcaption>.
Remember that many of these HTML5 elements can be used multiple times within a page. For example,
a <header> could be used in the traditional location at the top of a page, but also as a header within a
section, article or an aside.
Questions
1
True or False: HTML5 allows the use of only one <aside> and one <article> element per page.
2
Heading content is defined as including all the heading elements in HTML such as <h1>, <h2>, etc.
What is the new HTML5 element included within heading content and what is its purpose?
3
Define the <article> element and its role in HTML5.
Answers
1
False. You may use multiple <aside> and <article> elements on a page.
2
The <hgroup> element is new to HTML5 and its purpose is to group one or more heading elements.
3
The <article> element is designed to identify sections of content that is not reliant on surrounding
content. In other words, <article> content could stand alone (as an email or blog post, for example)
if need be.
14
Lesson 5
Working with Canvas
In this lesson, students learn the basics of JavaScript as well as the basics of working with the Canvas
element. In particular they learn how to add paths, basic shapes, colors, gradients, text, images,
animation and how to create a simple bar graph.
JavaScript basics
The JavaScript exercises in the book are designed to provide a simple introduction to interactivity.
JavaScript is a scripting language and the programming principles do not necessarily come easily to
visual designers. Students should be reminded that the goal is not to become a programmer or
developer, but to understand enough of the basics so when they encounter JavaScript code they can
modify it and understand the logic.
A good reference book for JavaScript is the JavaScript Bible (7th edition).
http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470526912.html
JavaScript Frameworks
The book focuses on an exercise using the jQuery framework, which although very popular, is not the
only framework in use. An easy way to get students excited about adding interactive elements to their
sites is to show them examples. Here are a few resources to help you expose students to the abilities of
JavaScript libraries:
jQuery UI. Although jQuery is much more than just user interface interactivity, this site demonstrates
many of the visual effects made possible and is visually engaging.
http://jqueryui.com/demos/
MooTools. A library similar to jQuery and has interesting demos as well.
http://mootools.net/demos/?
Script.aculo.us is another library that provides excellent user interface scripting control. This site
provides links to popular websites such as Apple.com and CNN.com that use the framework.
http://script.aculo.us/
15
Understanding the Canvas element
It should be reinforced to students that the Canvas element is a little different than most other elements
in HTML5. It is more complex in that it requires the help of JavaScript to work. Once the element has
been defined, a reference to the drawing context for that element is created as a variable in JavaScript.
The context itself can then be used to write the drawing instructions.
In general, the Canvas API is an extremely deep subject and could easily be the subject of an entire book
the size of the HTML5 Digital Classroom. These exercises only provide an introduction to the concept. A
useful resource for students interested in exploring Canvas is the “Canvas Cheat Sheet,” a reference to
the various types, attributes, and other code associated with Canvas:
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
Creating a bar chart in Canvas
The following code describes an alternative way to create by creating a bar chart in Canvas.
Note: for convenience, we have also added the completed lesson file in the instructor lessons folder,
labeled as canvas_chart.html.
1
Students should create a new HTML5 document, and then add the following within the body
section:
<div>
<h1>Assets</h1>
<canvas id=”graphSpace” width=”800” height=”400”></canvas>
</div>
This adds the structure for the graph to be added with the canvas code as well as the graph label.
2
Now the JavaScript needs to be added in the head section as follows:
<script type=”text/javascript”>
function graph() {
document.getElementById(‘graphSpace’);
var graphCanvas =
// Ensure that the element is available within the DOM
if (graphCanvas && graphCanvas.getContext) {
// Open a 2D context within the canvas
var context = graphCanvas.getContext(‘2d’);
// Bar chart data
var data = new Array(5);
data[0] = “Stocks,200”;
data[1] = “Bonds,120”;
data[2] = “Gold,80”;
data[3] = “Silver,230”;
16
data[4] = “Real Estate,345”;
// Draw the bar chart
drawBarChart(context, data, 50, 100, (graphCanvas.height - 20), 50);
}
}
</script>
This provides the data for the bar chart in the form of an array. In this case, five different data points
for Stocks, Bonds, Gold, Silver, and Real Estate.
3
The last line of the code you added refers to the drawBarChart function which is responsible for
taking the data and drawing the chart. This code is as follows:
// drawBarChart - draws a bar chart with the specified data
function drawBarChart(context, data, startX, barWidth, chartHeight,
markDataIncrementsIn) {
// Draw the x and y axes
context.lineWidth = “1.0”;
var startY = 380;
drawLine(context, startX, startY, startX, 30);
drawLine(context, startX, startY, 570, startY);
context.lineWidth = “0.0”;
var maxValue = 0;
for (var i=0; i<data.length; i++) {
// Extract the data
var values = data[i].split(“,”);
var name = values[0];
var height = parseInt(values[1]);
if (parseInt(height) > parseInt(maxValue)) maxValue = height;
// Write data to chart
context.fillStyle = “#345323”;
drawRectangle(context, startX + (i * barWidth) + i, (chartHeight - height),
barWidth, height, true);
// Add the column title to the x-axis
context.textAlign = “left”;
context.fillStyle = “#000”;
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200);
}
// Add some data markers to the y-axis
var numMarkers = Math.ceil(maxValue / markDataIncrementsIn);
context.textAlign = “right”;
context.fillStyle = “#000”;
var markerValue = 0;
for (var i=0; i<numMarkers; i++) {
17
context.fillText(markerValue,
(startX - 5), (chartHeight - markerValue), 50);
markerValue += markDataIncrementsIn;
}
}
The first section of the code draws the x and y axes, the second section extracts the data from the
array, the third section writes the data to the chart, the fourth section adds the column title to the
x-axis, the fifth section adds the data markers along the side of the x-axis.
Previewing at this point would not reveal an image. The lines and fills of the graph must still be
created.
4
Add the following two functions:
// drawLine - draws a line on a canvas context from the start point to the end
point
function drawLine(contextO, startx, starty, endx, endy) {
contextO.beginPath();
contextO.moveTo(startx, starty);
contextO.lineTo(endx, endy);
contextO.closePath();
contextO.stroke();
}
// drawRectangle - draws a rectangle on a canvas context using the dimensions
specified
function drawRectangle(contextO, x, y, w, h, fill) {
contextO.beginPath();
contextO.rect(x, y, w, h);
contextO.closePath();
contextO.stroke();
if (fill) contextO.fill();
}
5
18
Save the file and preview in the browser. The chart has now been drawn onto the screen.
Lesson 6
HTML5 Multimedia and Drag and Drop
In this lesson, students learn the basics of adding multimedia using the HTML <video> element and how
to ensure the video has fallbacks for different video codec support as well as browsers that do not
support HTML5 at all. Additionally they learn the basics of the Drag and Drop API and how to identify the
features that are not covered in Internet Explorer 9 and earlier.
Adding video
This lesson focuses on taking pre-existing video and audio and embedding it into a web page, however,
the process of creating web video to begin with is a related but separate topic.
The following is a good resource for students wishing to get a better sense of compressing video for the
web:
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/26/web-video-compression
Adding fallback support for older browsers
This lesson focuses on methods for using the open source Flowplayer for providing a Flash Video
fallback. For students interested in learning more about the capabilities of Flowplayer, be sure to send
them to following URLs:
http://flowplayer.org/demos/index.html
http://flowplayer.org/documentation/index.html
Controlling a video with JavaScript
This exercise focuses on the basics of exploring the JavaScript-based API in connection with the <video>
element to control media playback and retrieve properties of the video.
For additional information on the integration of JavaScript with the video element refer students to the
following URL:
http://www.w3.org/2010/05/video/mediaevents.html
This page provides an interactive demonstration of a video and all of the JavaScript media events.
Students can visit the site and play video while manipulating various controls (such as volume). As they
are manipulating controls, they can simultaneously see the media events changing.
19
Adding audio
In many ways the <audio> element is a somewhat gentler introduction to multimedia in HTML5 as there
are not quite as many issues with compatibility and codecs as found with video. Still, there are similar
issues pertaining to browser support of MP3 and OGG audio that bear understanding. The following
article provides a good overview and links to up-to-date information:
http://24ways.org/2010/the-state-of-html5-audio
Drag and Drop on the Web
Drag and drop is a natural way for users to interact with the web, and although the HTML5 Drag and
Drop API is still evolving, it holds promise for applications such as shopping carts or games.
Making any object draggable
Although its usefulness is very limited a good introduction to drag and drop is the fact that HTML5
enables any object to be draggable with a simple attribute and value. Have students add the following
attribute to a div or any other object:
<div draggable=”true”>Content</div>
The File API
Another API that is related to native drag and drop but not covered in the book is the File API which
provides for desktop dragging and dropping of files. For example, the ability to drag images or text
documents from the desktop into the browser window in order to upload them. For more information
on the File API, refer to the following article:
https://developer.mozilla.org/en/using_files_from_web_applications
Additional resources for drag and drop
http://www.html5rocks.com/en/tutorials/dnd/basics/
http://www.useragentman.com/tests/dragAndDrop/permissionForm.html#
http://jqueryui.com/demos/draggable/
Questions
1
True or False: H.264 is the main video format supported by the Firefox web browser (versions 3.6
and up).
2
What are the virtualization solutions for the MacOS? Does one have an advantage over the other?
3
To begin to changing the width of a play button to match the width of the video using JavaScript
would you add an event to the onloadedmetadata event or the loadstart event?
4
True or False: Any element in HTML5 can be made draggable within the HTML alone (No JavaScript
needed).
5
What is a drop zone?
20
Answers
1
False. The Firefox web browser supports OGV or OGG video.
2
Apple Bootcamp and Parallels and VmWare are software virtualization programs for the Mac. They
offer the ability to switch operating systems without restarting the computer.
3
The onloadedmetadata event.
4
True. Although items can be made draggable with a simple attribute and value, in order to have
interaction with other elements JavaScript is needed.
5
A drop zone is any target that will accept an object dropped onto it.
21
Windows, PowerPoint, Internet Explorer, Visual Studio, Visual Web Developer, and Silverlight are either
registered trademarks or trademarks of Microsoft Corporation in the United States and/or other
countries. Other product and company names mentioned herein may be the trademarks of their
respective owners.
The example companies, organizations, products, domain names, e-mail addresses, logos, people,
places, and events depicted herein are fictitious. No association with any real company, organization,
product, domain name, e-mail address, logo, person, place, or event is intended or should be inferred.
The information contained in this tutorial is provided without any express, statutory, or implied
warranties. Neither the authors, Microsoft Corporation, nor its resellers or distributors will be held liable
for any damages caused or alleged to be caused either directly or indirectly by this tutorial.
Copyright 2011 by Microsoft Corporation.
Certain portions excerpted from the HTML5 Digital Classroom are copyright 2011 by AGI Training, and
are used by permission. For more information about the HTML5 Digital Classroom book visit
http://www.digitalclassroombooks.com/Web-Design/HTML5-Digital-Classroom-Book.html
22