HTML5 Instructor guide

colonteeSoftware and s/w Development

Nov 4, 2013 (3 years and 9 months ago)

146 views



HTML5 Instructor guide

This instructor guide is a companion to the HTML5 student curriculum and lesson files as w
ell 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 a
nd additional
review questions.

How to use this instructor guide and the accompanying lecture notes

The goal of the instr
uctor 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 inc
ludes 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
-
cl
ass 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.) Additionall
y, 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
:
Introductio
n 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 fund
amentals 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 less
on independent of the
others
if it suits the needs of your class
.




2

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, Busin
ess, Ultimate, or En
terprise 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

Y
ou
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 support
s

more HTML5 features than Internet Explorer 9, however
Developer Preview versions are not
yet in their final format
.
Y
ou 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 bug
s 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 impleme
nted in
another.


3

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. Studen
ts 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 curriculu
m 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
.

T
he
HTML5 Digital Classroom

book also includes lesson files, video tu
torials, 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.




4

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 othe
rs.

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 tha
t 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 al
l 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 w
ho 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.


5


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://slid
es.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 experime
nt 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, D
rag 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


6

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 applic
ations 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 crea
ting animation using transforms, transitions and other techniques. The
HTML5 specification does not technically include animation unless one includes th
e <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?





7

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 usef
ul 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 wh
ich 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 importa
nt 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 too
l 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 o
f 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 t
hey 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 sit
e 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), th
e 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.



8

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
fo
r 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 styl
e 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 usefu
l
not only for text, but as measurements for the layout containers of the page itself. This methods for em
-
based 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 understan
ding 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 diffe
rent
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 alterna
tive 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?


9

4

List four of the most reliable fo
nts 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 compatibi
lity
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, Luci
da, 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 on
-
screen.




10

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 back
ground
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 exte
rnal 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
design
er 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 s
tyle 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 sty
le 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 de
signer 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.


11

A CSS Framework is an external style sheet that creates a template for designers. Although this is an
import
ant 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/

Usin
g 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 the
m 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 on
ce 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 th
at 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.positio
niseverything.net




12

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 ord
er 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 edit
or 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 hav
e 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 t
wo 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 add
ed 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.




13

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 t
he 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 sema
ntic 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 sem
antic 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>, <sect
ion>, 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 t
o 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 parag
raph.
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 exa
mple. 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 sho
uld be paid to the
sectioning content. Sectioning is the most obvious difference between HTML5 and previous versions of

14

HTML/XHTML not only because it includes all new tags, but because it includes the concept of a
document outline.

As noted in the curricu
lum, 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 H
TML5 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.




15

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 cr
eate 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 desig
ners. 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 t
he
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 w
ay 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 w
ell.


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/




16

Un
derstanding 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 e
ntire 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 ot
her 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” hei
ght=”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() {




var
graphCanvas =
document.getElementById(‘graphSpace’);


// 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”;


17


data[4] = “Real Estate,345”;


// Draw the bar chart


drawBarChart(context, data, 50, 100, (graphCanvas.height
-

20), 50);


}

}

</scr
ipt>

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++) {


context.fillText(markerValue,

18

(startX
-

5), (chartHeight
-

ma
rkerValue), 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();

}

// drawRectang
le
-

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

Sa
ve the file and preview in the browser. The chart has now been drawn onto the screen.




19

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 h
as 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
-
f
lash
-
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.




20

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 t
o 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 applicati
ons 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 dra
ggable=”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_applicat
ions

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
wou
ld 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?


21


Answers

1

False. The Firefox web browser supports OGV or O
GG 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 w
ith 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.





22

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, o
rganizations, 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 a
bout the
HTML5 Digital Classroom

book visit
http://www.digitalclassroombooks.com/Web
-
Design/HTML5
-
Digital
-
Classroom
-
Book.html