HTML5 Instructor guideThis 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 notesThe 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 UpMake 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.

PrerequisitesThere 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 requirementsMake 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 EditorsUse 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 curriculumIt 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 HTML5The 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 1Defining HTML5This 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 HTML5This 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 MarkupThis 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.

http://playground.html5rocks.com/#semantic_markup

4

Video and Audio elementsBeginner 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 elementBeginner 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 FormsBeginner 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

Questions1 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.

5

Answers1 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 2Fundamentals of HTML, XHTML and CSSThis 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 validationThis 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 stylesIt 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 emsAs 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 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 AssignmentsAfter 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.

Questions1 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?

Answers1 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 on-screen.

9

Lesson 3Introduction to CSS LayoutIn 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 fileA 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.

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:

10

http://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/

Using margins to modify the space between your textTypically, 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 selectorsThe 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 ResourcesTo 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 AssignmentsAfter 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.

Questions1 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.

Answers1 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 4Using HTML5 MarkupIn 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 markupUnderstanding 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 browsersThere 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 FundamentalsThe 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 contentThis 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 HTML/XHTML not only because it includes all new tags, but because it includes the concept of a document outline.

13

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 HTML5This 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.

Questions1 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.

Answers1 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 5Working with CanvasIn 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 basicsThe 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 FrameworksThe 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 elementIt 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 CanvasThe 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() { 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”;

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;

17

for (var i=0; i<numMarkers; i++) { 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 Save the file and preview in the browser. The chart has now been drawn onto the screen.

18

Lesson 6HTML5 Multimedia and Drag and DropIn 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 videoThis 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 browsersThis 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 JavaScriptThis 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 audioIn 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 WebDrag 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 draggableAlthough 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 drophttp://www.html5rocks.com/en/tutorials/dnd/basics/

http://www.useragentman.com/tests/dragAndDrop/permissionForm.html#

http://jqueryui.com/demos/draggable/

Questions1 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

Answers1 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