Exercise Manual for Course 2320 HTML5 Web Development...Exercise Manual for Course 2320 HTML5 Web Development 2320/MA/D.1/407/C.4 by Andrew M. Andrews III Technical Editor: ... Exchanging

Exercise Manual for Course 2320HTML5 Web Development

2320/MA/D.1/407/C.4

by Andrew M. Andrews III

Technical Editor:Bill Wallace

© LEARNING TREE INTERNATIONAL, INC.All rights reserved.

All trademarked product and company names are the property of their respective trademark holders.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic,mechanical, photocopying, recording or otherwise, or translated into any language, without the prior written permission of the publisher.

Copying software used in this course is prohibited without the express permission of Learning Tree International, Inc.Making unauthorized copies of such software violates federal copyright law, which includes both civil and criminal penalties.

Exercise Manual Contents

© All rights reserved. Not to be reproduced without prior written consent. 2320-MA-i

Legend for Course Icons...................................................................................................... ii

Hands-On Exercise 2.1: Improving Performance, SEO, and Accessibility...........................1

Hands-On Exercise 2.2: Compartmentalizing Content.........................................................7

Hands-On Exercise 2.3: Maximizing Support for Legacy Browsers...................................11

Hands-On Exercise 3.1: Preventing User Errors With Form Validation............................. 17

Hands-On Exercise 4.1: Delimiting Content With Enhanced Borders andBackgrounds....................................................................................................................... 25

Hands-On Exercise 4.2: Shadows and Effects.................................................................. 35

Hands-On Exercise 4.3: Advanced Styling With Attributes and Fonts............................... 43

Hands-On Exercise 4.4: Optimizing Page Layout With Media Queries............................. 51

Hands-On Exercise 5.1: Processing Market Selection on the Client................................. 63

Hands-On Exercise 5.2: Storing Simple Data on the Client...............................................71

Hands-On Exercise 5.3: Persisting Complex Data as JSON.............................................79

Hands-On Exercise 6.1: Working Offline........................................................................... 85

Hands-On Exercise 6.2: Customizing the User Experience With Location-SpecificContent................................................................................................................................95

Hands-On Exercise 7.1: Feature Testing and Lazy Loading With Modernizr...................105

Hands-On Exercise 7.2: Creating a Rich Text Editor...................................................... 111

Hands-On Exercise 7.3: Simplifying File Upload With Drag-and-Drop.............................121

Hands-On Exercise 8.1: Exchanging Data.......................................................................139

Hands-On Exercise 8.1a: Exchanging Data—Synchronizing Windows WithMessages..........................................................................................................................141

Hands-On Exercise 8.1b: Exchanging Data—Including Third-Party Data Using CORS...147

Hands-On Exercise 8.1c: Exchanging Data—Processing Server-Pushed Data WithWebSockets......................................................................................................................157

Hands-On Exercise 8.1d: Exchanging Data—Improving Responsiveness With a WebWorker...............................................................................................................................163

Hands-On Exercise 9.1: Dynamic Charting With Canvas................................................ 169

Hands-On Exercise 9.2: Upgrading Site Graphics to SVG.............................................. 185

Hands-On Exercise 10.1: Promoting Website Features With Video................................ 197

Legend for Course Icons

2320-MA-ii © All rights reserved. Not to be reproduced without prior written consent.

Standard icons are used in the hands-on exercises to illustrate various phases ofeach exercise.

Major step Warning

1. ❏ Action Hint

Checkpoint Stop

Question Congratulations

Information Bonus

Solution/Answer

Hands-On Exercise 2.1:

Improving Performance, SEO, and Accessibility

© All rights reserved. Not to be reproduced without prior written consent. 2320-MA-1

Objectives

In this exercise, you will

● Update a document to HTML5● Reduce file size and download time with simplified references to CSS and

JavaScript resources● Improve SEO and accessibility with semantic elements

Overview

In this and in the following two exercises, we will improve a legacy XHTML page to takeadvantage of the new HTML5 semantic elements. In this first exercise, we will simplify theelements in our head section and convert the header and footer sections to new semanticelements.

Part 1: Simplifying syntax to improve performance

1. ❏ Visit http://dealingtree/.

Unless instructed otherwise, you can use any modern browser to visit theURLs in this course.

2. ❏ Scroll down to Great Deals in Atlanta.

3. ❏ Click the image or title to visit the detail page for Coder's Cafe.

Hands-On Exercise 2.1:Improving Performance, SEO, and Accessibility(continued)

2320-MA-2 © All rights reserved. Not to be reproduced without prior written consent.

This is the page that we will upgrade to HTML5. If you would like, you cancheck that it is valid XHTML in Firefox by pressing <Alt><Shift><L>.

4. ❏ Use Exercise Manager to edit C:\2320\dealingtree\Atlanta\sku02\index.html

Support for HTML5, CSS3, JavaScript, and jQuery varies greatlybetween editors. Some provide extensive syntax highlighting and codecompletion, while others are not even aware that some new keywords are valid!As you work through the exercises, try different editors and compare the levelsof support.

5. ❏ At the beginning of the file, change the existing <!DOCTYPE> declaration toHTML5.

Your code should resemble this:

<!DOCTYPE html>

6. ❏ Within the head element, remove type="text/css" from each link, sinceCSS is assumed.


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

7. ❏ Still within the head, remove type="text/javascript" from each script,since JavaScript is assumed.

Hands-On Exercise 2.1:Improving Performance, SEO, and Accessibility

(continued)


The beginning of the document should now resemble this:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <title>Half-Price Dinner | DealingTree</title> <link rel="stylesheet" href="/css/general.css"/>  <script src="/js/jquery.js"></script> <script src="/js/help-window.js"></script> </head>

8. ❏ Save your work.

Part 2: Improving SEO and accessibility with semantic elements

9. ❏ Immediately after <body>, locate:<div class="PageHeader ClearFix">

10. ❏ In this opening tag, convert the element name to header and remove classPageHeader (leaving ClearFix).

Your code should now resemble this, with this step in bold:

<header class="ClearFix">

11. ❏ Carefully locate the correct closing </div>, and convert it to </header>.

12. ❏ Within the new header, locate:<div class="Navigation">

13. ❏ Convert this opening tag to <nav> (without a class).

14. ❏ Carefully locate the correct closing </div>, and convert it to </nav>.



15. ❏ Within the new nav, locate:<ul class="Menu">

16. ❏ Convert this opening tag to <menu> (without a class).

17. ❏ Carefully locate the correct closing </ul>, and convert it to </menu>.

The beginning of the body should now resemble this, with changes in bold:

<body> <header class="ClearFix"> <h1>DealingTree</h1> <div class="SubTitle1">Deals Around the Corner and Around the World!</div> <nav> <menu> <li><a href="/">Home</a></li> <li><a href="/join/">Join</a></li> <li><a href="/demo/">Demo</a></li> <li><a href="/help/" id="helpLink">Help</a></li> </menu> </nav> </header>

18. ❏ Scroll to the end of the document and locate:<div class="PageFooter">

19. ❏ Convert this opening tag to <footer> (without a class).

20. ❏ Carefully locate the correct closing </div>, and convert it to </footer>.

21. ❏ Save your work and leave the file open in the editor; we will return to it inExercise 2.2.

Hands-On Exercise 2.1:Improving Performance, SEO, and Accessibility

(continued)


The new semantic elements—like divs—have no default style. Ourmain style sheet (/css/general.css) includes matching declarations for theoriginal classes and their HTML5 counterparts, so they will appear the same inthe browser. For example:

header,.PageHeader{ background-color: #FCFCFC; height: 5.5em; margin-bottom: 2em; position: relative;}

If you upgrade pages on your own site to HTML5 semantic elements, youwill have to update your style sheets, as well!

If you would like, you can check that the new code conforms to HTML5 inFirefox. Simply reload the page and press <Alt><Shift><L>. The Result lineshould say Passed (there might be warnings about the menu element).

Congratulations! You have improved performance, SEO, andaccessibility of a document by upgrading it to HTML5 syntax.

Please let your instructor know that you are finished with the exercise.

If you have more time. . .

22. ❏ For more information on simplifying syntax, read http://html5doctor.com/avoiding-common-html5-mistakes/



23. ❏ For more information on XML-compliant HTML5, readwww.sitepoint.com/have-you-considered-polyglot-markup/

This is the end of the exercise.


Compartmentalizing Content


Objectives


● Identify related content with article and section elements● Enhance human-readable dates with machine-readable formatting● Validate HTML5 against a conformance checker

Overview

In this exercise, we will continue converting our legacy XHTML document to HTML5,replacing more meaningless div elements with semantic groups. We will also improvethe relevance of our review dates with the new time element and upload our new page tothe W3C website to check our work.

Warning! If you did not finish Exercise 2.1, use Exercise Manager tosolve it before you begin this exercise.

Part 1: Compartmentalizing content

1. ❏ Return to editing C:\2320\dealingtree\Atlanta\sku02\index.html

2. ❏ After the </header> that you previously converted (near line 26), locate: <div class="Unit DealDetail">

3. ❏ Convert the div to article, eliminating class Unit (leaving DealDetail).

The closing tag should be immediately before the footer.

Your code should now resemble this, with changes in bold:

<article class="DealDetail"> ...</article>

Hands-On Exercise 2.2:Compartmentalizing Content(continued)


4. ❏ Within the article, locate the following (near line 62):<div class="Section DealReviews ClearFix"> <h3>Reviews</h3> <div class="Section">

5. ❏ Convert each div having class Section to a section, leaving any otherclass names.

Remember to change both closing tags, also.


<section class="DealReviews ClearFix"> <h3>Reviews</h3> <section> ... </section></section>

6. ❏ A few lines down, locate:<span class="Time">Mar 7 '13</span>

7. ❏ Change the span to a time element with the appropriate datetime attribute.


<time datetime="2013-03-07">Mar 7 '13</time>

8. ❏ Save your work and leave the file open in the editor; we will return to it inExercise 2.3.

Part 2: Validating HTML5

9. ❏ Visit http://validator.w3.org.

10. ❏ Select the Validate by File Upload tab.

Hands-On Exercise 2.2:Compartmentalizing Content

(continued)


11. ❏ Click Browse or Choose File (depending on the browser), and select C:\2320\dealingtree\Atlanta\sku02\index.html.

12. ❏ Click Check and review the results. If there are any errors, correct them and tryagain until the document successfully checks as HTML5.

A green bar containing the message "This document was successfullychecked as HTML5!" indicates a valid document; otherwise, an error messageis displayed in a red bar.

The checker might display warnings, which do not require correction.Because this is an experimental tool, it might also report items that are notactual errors due to changes in HTML5, which can also be ignored withcaution.

Congratulations! You have finished improving the semantics of anXHTML document by converting it to valid HTML5.



13. ❏ Visit the solution version of the case study at http://done-deal/. Right-click the page and choose View Source to inspect the semantic structure ofthe document.

Which HTML5 semantic elements are used on this page, but not on the pagethat you just upgraded? __________________________________________________

Hands-On Exercise 2.2:Compartmentalizing Content(continued)


14. ❏ Use the done-deal navigation menu to explore the other pages of thesolution website. Right-click each page and choose View Source to inspect itssemantic structure.

Which additional HTML5 semantic elements are used on the remainingpages? __________________________________________________



Maximizing Support for Legacy Browsers


Objectives


● Support legacy assistive technologies with ARIA roles● Override IE Compatibility Mode for intranet sites● Polyfill HTML5 elements in legacy browsers

Overview

In this exercise, we will add ARIA roles to HTML5 elements, so users of older assistivetechnologies will benefit from our improved semantics. We will also use Modernizr andedge mode so our site looks right on intranets and in legacy browsers.


Part 1: Improving accessibility with ARIA roles

1. ❏ Return to editing C:\2320\dealingtree\Atlanta\sku02\index.html.

2. ❏ Near line 14, locate:<header class="ClearFix">

3. ❏ Add the appropriate ARIA role to this tag.


<header class="ClearFix" role="banner">

4. ❏ Add the corresponding ARIA role to the opening <nav>.


<nav role="navigation">

5. ❏ Add the corresponding ARIA role to the opening <article>.

Hands-On Exercise 2.3:Maximizing Support for Legacy Browsers(continued)



<article class="DealDetail" role="article">

6. ❏ Add the corresponding ARIA role to the opening <footer>.


<footer role="contentinfo">

7. ❏ Save your work, leaving the file open in the editor.

Part 2: Supporting intranets and legacy browsers

8. ❏ Launch Internet Explorer and visit http://dealingtree/.

9. ❏ Scroll down to Great Deals in Atlanta.

10. ❏ Click the image or title to visit the detail page for Coder's Cafe.

By default, Internet Explorer displays intranet pages (including pages onour local server) in Compatibility Mode, which does not adhere to modern webstandards:

Hands-On Exercise 2.3:Maximizing Support for Legacy Browsers

(continued)


11. ❏ Return to editing C:\2320\dealingtree\Atlanta\sku02\index.html.

12. ❏ Within the head element, locate:<title>Half-Price Dinner | DealingTree</title>

13. ❏ Immediately after title (and before the first link), very carefully add themeta element to force Internet Explorer into edge mode.




<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Warning! The meta element need not be split across two lines, but itmust appear before any link or script elements.

14. ❏ Still within the head, add a new script immediately after the others to loadModernizr (/js/modernizr.js).


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


16. ❏ Return to Internet Explorer and refresh the page.

Warning! You must hold down the <Ctrl> key when you refresh thepage to force the browser to reload all the CSS and JavaScript resources!

The page should now display correctly:

Hands-On Exercise 2.3:Maximizing Support for Legacy Browsers

(continued)


17. ❏ Close all Internet Explorer windows.

Congratulations! You have enhanced accessibility and supportedHTML5 elements for users of assistive technologies and legacy browsers.



18. ❏ (Optional) Create a BrowserStack Free Trial account atwww.browserstack.com.

19. ❏ (Optional) Using your BrowserStack account, use the Live | Local Testing |Web tunnel feature to test your case study page in Internet Explorer 8. (Enterhost http://dealingtree/ and port 80).



20. ❏ Using the link on the bottom of the course home page, explore the URLsreferenced in Chapter 2.



Preventing User Errors With Form Validation


Objectives


● Prevent invalid data entry with advanced input types● Use date and month pickers● Implement custom validation

Overview

This exercise will complete the upgrade of our signup form that we began in this chapter'sDo Now exercise. We will upgrade the relevant fields to use advanced input types. Wewill also add custom validation to verify that the password fields match and provide visualclues about invalid fields.

Warning! If you did not finish the previous Do Now activity, useExercise Manager to solve it before you begin this exercise.

Part 1: Upgrading to advanced input types

1. ❏ Using Google Chrome, visit http://dealingtree/join.

2. ❏ In the signup form, enter XXXXX for each input field.

3. ❏ Click the Sign up! button.

Does the browser allow the form submission?__ Yes __ No

4. ❏ If you are not already editing the signup form, use Exercise Manager to edit C:\2320\dealingtree\join\index.html.

5. ❏ Locate the input element with name="email" and change the value of thetype attribute to email.

Hands-On Exercise 3.1:Preventing User Errors With Form Validation(continued)



<input id="email" name="email" type="email" placeholder="user@domain" required="required"/>

6. ❏ Locate the input with name="phone" and change the type value to tel.


<input id="phone" name="phone" type="tel" required="required" />

7. ❏ Locate the input with name="card" and add pattern and title attributesto require 13 to 16 digits.


<input id="card" name="card" type="text" autocomplete="off" required="required" pattern="[0-9]{13,16}" title="must be 13-16 digits" />

8. ❏ Locate the input with name="expires" and change the type value tomonth.


<input id="expires" name="expires" type="month" required="required" />

9. ❏ Locate the input with name="birth" and change the type value to date.


<input id="birth" name="birth" type="date" required="required" />


Hands-On Exercise 3.1:Preventing User Errors With Form Validation

(continued)


11. ❏ Use Exercise Manager to edit the empty file C:\2320\dealingtree\css\form-validation.css.

12. ❏ In this file, enter a CSS property set to style invalid input and textareaelements with a pale yellow background and italic text. Include the styles forWebshim widgets.

Your code should resemble this.

input:invalid,input:invalid + .ws-date,input:invalid + .ws-month,textarea:invalid{ background-color: #FF6; font-style: italic;}

Warning! Do not put space before or after the colon (:) in theselector.

Although this form does not include any textarea elements, we areadding it for consistency on other forms.


14. ❏ Return to the browser and refresh the Join page (http://dealingtree/join/) and all of its resources.

The fields should be pale yellow.

You might need to force-reload the page multiple times in GoogleChrome before it will take you seriously!

15. ❏ Use the new controls to select values for the e-mail, birth date, and cardexpiration fields.



16. ❏ Type XXXX in the credit card number field. Enter two different values for thepassword and confirmation fields. Enter valid values for all of the other fields,then click the Sign up! button.

What happens?

The browser should tell you the expected format for the credit cardnumber.

17. ❏ Change the value for the credit card number to 4444111144441111 and clickthe button again.

Is the form submission successful? __ Yes __ No

Is the validation adequate for a real credit card number? Why (or why not)? __________________________________________________

The browser allows the form submission even if the two passwordfields do not match. The credit card validation does not report an error if thechecksum (final) digit is incorrect.

Part 2: Regressive enhancement and custom validation

18. ❏ In the editor, open the empty file C:\2320\dealingtree\join\initialize-join-page.js.

19. ❏ In this empty file, add the code to include Webshim's forms and forms-extpolyfills.


(continued)



webshim.setOptions('extendNative',true);webshim.polyfill('forms forms-ext');

20. ❏ After that line, add a JavaScript function named passwordMatchCheck


function passwordMatchCheck(){}

21. ❏ Inside the function, retrieve the input element with the ID confirm into avariable named confirm


var confirm = document.getElementById('confirm');

22. ❏ After the assignment, add a condition to compare the value of confirm tothe value of the input with the ID pass. If they do not match, set a customvalidation message on the confirm element.


if (confirm.value!=document.getElementById('pass').value) confirm.setCustomValidity('passwords do not match');

23. ❏ Finally, add a statement to clear the custom validation message if the fields domatch.



The entire file should now resemble this, with this step in bold:

webshim.setOptions('extendNative',true);webshim.polyfill('forms forms-ext');function passwordMatchCheck(){ var confirm = document.getElementById('confirm'); if (confirm.value!=document.getElementById('pass').value) confirm.setCustomValidity('passwords do notmatch'); else confirm.setCustomValidity('');}


25. ❏ Return to index.html in the editor, and add oninput attributes to bothpassword fields, calling our new JavaScript function.


<input id="pass" name="pass" type="password" required="required" oninput="passwordMatchCheck()" />... <input id="confirm" name="confirm" type="password" required="required" oninput="passwordMatchCheck()" />



(continued)


27. ❏ Scroll to the top of the file and notice all of the script elements, which includeall of the JavaScript files that we need for this page:<script src="/js/jquery.js"></script><script src="/js/help-window.js"></script><script src="/js/modernizr.js"></script><script src="/js-webshim/minified/polyfiller.js"></script><script src="initialize-join-page.js"></script><script src="/js/message-with-help.js"></script>

28. ❏ In the browser, refresh the Join page and its resources.

29. ❏ Enter valid values for the first two fields.

30. ❏ For the password field, enter ABCD

31. ❏ For the password confirmation field, slowly type the same letters, watching asyou type.

At what point does the confirmation field appear valid? __________________________________________________

The oninput handler is invoked as each key is released. As long as thefields do not match, the confirmation field should remain yellow and italicized.

32. ❏ Press <Backspace> in the confirmation field, so the password values are nolonger the same.

Although the validation message is not displayed, the field shouldbecome yellow and italicized again.

33. ❏ Click Sign up!

Is the form submission successful? __ Yes __ No



34. ❏ Enter valid values for all of the fields. Enter the same value for the passwordand confirmation fields, then click Sign up! again.

Does the form submit now? __ Yes __ No

Congratulations! You have prevented invalid data entry withadvanced input types and custom validation.



35. ❏ Create additional styles to identify inputs that are :required.

36. ❏ Set the background color of every input that is :valid.



Delimiting Content With Enhanced Borders and Backgrounds


Objectives


● Add rounded corners to sectioning elements● Surround an element with an elaborate border image● Apply a linear-gradient as a background image● Use Modernizr class names for feature detection

Overview

In this exercise, we will apply border and background effects to our website to enhancethe appearance of the home page. First, we will apply rounded corners to the header,articles, footer, and welcome hint. Next, we will apply a starburst effect to the membershipcounter and purchase messages. Finally, we will apply a blue-to-green gradient to thewebsite background.

Part 1: Rounding corners

1. ❏ Visit http://dealingtree/ with a browser that supports border-radius,linear-gradient(), and border-image.

Visit fmbip.com/litmus or caniuse.com to find a suitable browser!

The header, article, and footer elements (styled with a whitebackground) currently have square corners. We will make these slightlyrounded. In addition, we will add rounding to the box around the welcome hint:

Hands-On Exercise 4.1:Delimiting Content With Enhanced Borders and Backgrounds(continued)


2. ❏ Use Exercise Manager to edit the empty fileC:\2320\dealingtree\css\borders-etc.css.

3. ❏ Set the border-radius of all article, footer, and header elements to4px

You can use CSS3, Please! or CSS Prefixer to easily generate consistentbrowser-specific properties (and save a little bit of typing)!


article,footer,header{ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}

Hands-On Exercise 4.1:Delimiting Content With Enhanced Borders and Backgrounds

(continued)


4. ❏ Set the right-side border-radius of the last navigation menu item ("Help") tomatch the corners of the header.

Hint...

Select the anchor (a) inside the :last-child list-item withinthe nav element. The corners are specified in the following order: upper left,upper right, lower right, lower left.


nav li:last-child a{ -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;}

5. ❏ Set the border-radius for the p inside #welcome to 15%.


#welcome p{ -moz-border-radius: 15%; -webkit-border-radius: 15%; border-radius: 15%;}


7. ❏ Return to the browser and refresh the page and its resources.

The effect should be similar to this:



Part 2: Surrounding content with an image border

Now we will replace the border around our aside element with aresizable border-image.

8. ❏ Use a browser that supports border-image to view the image filehttp://dealingtree/images/yellow-burst.png.

Each corner of this image is a uniform 22 pixels x 22 pixels.

9. ❏ Add a property set for the aside element to clip the background withinthe new border image, but only if Modernizr says that the browser supportsborderimage. Apply the same style to the strong element within the formon the .DealDetail page.


(continued)



.borderimage aside,

.borderimage .DealDetail form strong{ background-clip: padding-box;}

background-clip causes a 1 px gap between the solid border andcontent in IE 10 even though the browser doesn't support border images.Therefore, we do not want to apply background-clip unless border imagesare supported.

10. ❏ In the same property set, add the border-image properties to round theedges (use copy and paste!).


.borderimage aside,

.borderimage .DealDetail form strong{ background-clip: padding-box; -moz-border-image: url(/images/yellow-burst.png) 22 round; -o-border-image: url(/images/yellow-burst.png) 22 round; -webkit-border-image: url(/images/yellow-burst.png) 22 round; border-image: url(/images/yellow-burst.png) 22 round;}

11. ❏ Save your work, then return to the browser and refresh the page and itsresource files.

The result should be similar to this:



We cannot verify the effect on the Deal Detail pages until we finishChapter 5.

Part 3: Applying a background gradient

Now we will apply a blue-to-green gradient to the background of everypage.

12. ❏ Return to the editor and add a fixed linear-gradient to the htmlelement. Begin with blue #66F from the top right to 30%. Direct the gradientto bottom left, where it ends with green #6F6.


(continued)



html{ background-attachment: fixed; background-image: -webkit-linear-gradient(top right, #66F, #66F 30%,#6F6); background-image: linear-gradient(to bottom left, #66F, #66F 30%,#6F6);}

Warning! CSS does not allow white space between a function nameand its opening parenthesis!

13. ❏ Save your work, and then return to the browser and reload the page and itsresource files.

The effect should be similar to this:



Congratulations! You have enhanced the borders and backgroundof page elements with features of CSS3.



14. ❏ Check out Microsoft's CSS Gradient Background Maker at http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html.


(continued)


15. ❏ Search the web for more examples of the CSS3 properties that we've coveredin this exercise. Make note of any examples that might be particularly usefulwhen you upgrade your own site.




Shadows and Effects


Objectives


● Apply shadows to text and boxes for a 3-D effect● Scale elements in response to hover events without JavaScript● Animate effects without JavaScript

Overview

This exercise uses the text-shadow, box-shadow, transition, and transformproperties to enhance the DealingTree website with visual effects. First, we will apply atext shadow to the membership counter and a box shadow to the navigation menu itemswhen the mouse hovers over them. Finally, we will enlarge deal summaries on the mousehover, animating the change in size.

Part 1: Applying shadows to text and boxes

1. ❏ Using a browser that supports text-shadow, box-shadow, transform, andtransition, visit http://dealingtree/

2. ❏ Locate the membership count near the upper right part of the page:

The number has a very two-dimensional appearance. We will add ashadow to make it appear to levitate above the page.

3. ❏ Use Exercise Manager to edit the empty fileC:\2320\dealingtree\css\3d-effects.css.

4. ❏ Create a property set to apply a text-shadow to the strong element withinthe aside element. Drop the shadow 3px to the lower right, with a 6px blur.Make the shadow black with 50% opacity.

Hands-On Exercise 4.2:Shadows and Effects(continued)



aside strong{ text-shadow: 3px 3px 6px rgba(0,0,0,0.5);}

5. ❏ Save your work, leaving the editor open.

6. ❏ Return to the browser and reload the page and all of its resources.

The membership count should now have a shadow:

7. ❏ Hover the mouse pointer over one of the navigation menu items, causing thecolor of the element to change:

A simple color change like this is a common effect on the web. We willuse a drop shadow to make the effect more interesting.

8. ❏ Return to the editor and add a box-shadow to the anchor (a) elements withinthe nav element, whenever the mouse hovers over them. Drop the shadow4px to the lower right with a 4px blur. Make the shadow black with 50%opacity.

Hands-On Exercise 4.2:Shadows and Effects

(continued)



nav a:hover{ -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.5); box-shadow: 4px 4px 4px rgba(0,0,0,0.5);}



11. ❏ Hover the mouse pointer over one of the navigation menu items.

The drop shadow should appear:

Part 2: Enlarging a page element with transform and transition

Next, we will animate a growing deal summary whenever the mousepointer hovers over it.

12. ❏ Still in the browser, scroll down to Great Deals in Atlanta and hover the mousepointer over one of the deal summaries.

The element background and border should both turn red, but it shouldremain the same size as other deal summaries:



13. ❏ Return to the editor and add a new property set, matching on all elements withclass DealSummary and the hover pseudo-class. Apply the same propertiesto every img element inside the element with class Inventory, also duringhover.


.DealSummary:hover,

.Inventory img:hover{}

14. ❏ Within the property set, use the scale function to transform the element to110% of its original size. Use a CSS3 generator, or carefully copy and paste, tocreate prefixed versions of the property.


(continued)



-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);



17. ❏ Scroll down to Great Deals in Atlanta and hover the mouse pointer over oneof the deal summaries.

The element should immediately increase to 110% of its original size:

Next, we'll apply the transition to animate the effect.



18. ❏ Return to the editor and add a new property set, matching on all elements withclass DealSummary and on every img element inside the element with classInventory.

Do not include the :hover pseudo-class in these selectors.


.DealSummary,

.Inventory img{}

19. ❏ Within the property set, transition all property changes over two-tenths ofa second. Use a linear easing, and create a -webkit- prefixed version of thetransition, as well.


-webkit-transition: all 0.2s linear;transition: all 0.2s linear;



22. ❏ Scroll down to Great Deals in Atlanta and hover the mouse pointer over oneof the deal summaries.

The increase in element size should now take two-tenths of a second tocomplete from start to finish.

We cannot verify the effect on the images in the Inventory ("Your Deals")article until we finish Chapter 5.


(continued)


Congratulations! You have created three-dimensional effects byapplying shadows, transformations, and transitions to text and boxes.



The detail page for each deal includes one or more review sections belowthe offer. Each review includes a small picture (often called an avatar) for theperson who wrote the review. Let's add a spinning animation to these images,causing them to rotate 360 degrees when the mouse hovers over them.

23. ❏ Create the property set to rotate the images completely around when themouse hovers over them.


.DealReviews section img:hover{ -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);}

24. ❏ Create the property set to animate the rotation over the course of one-half of asecond (use copy and paste!).




.DealReviews section img{ -moz-transition: -moz-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear;}

25. ❏ Save your work and check the results in the browser(s), using any detail pageexcept the Coder's Cafe deal in Atlanta. When you move the mouse over areviewer's avatar on a detail page, the image should spin around. When youmove the mouse back off the image, it should spin backward.

Remember, C:\2320\dealingtree\Atlanta\sku02\index.htmlis based on the original XHTML version of our website, so it does not includethe CSS3 stylesheets that we're using here in Chapter 4!

26. ❏ Experiment with box-shadows and other properties by modifying the valuesin the 3d-effect.css stylesheet. Try to guess the effect of your changesbefore you test them in the browser.



Advanced Styling With Attributes and Fonts


Objectives


● Convert a font to web formats● Differentiate site elements with web fonts● Select content for special styling by matching attribute values

Overview

In this exercise, we will use @font-face to apply a custom font to the subheading of ourwebsite. We will also highlight select deals with a special color and our custom font.

Part 1: Differentiating site elements with web fonts


2. ❏ Notice the standard italic serif font used for the tagline in the heading:

We will replace it with a custom script font.

3. ❏ Visit www.fontsquirrel.com/fontface/generator.

If you cannot access the site, the result of generating our font kit isavailable as C:\2320\dealingtree\css\webfontkit.zip (skip ahead toStep 10).

4. ❏ Make certain that the OPTIMAL radio button is checked.

Hands-On Exercise 4.3:Advanced Styling With Attributes and Fonts(continued)


5. ❏ Click Add Fonts.

6. ❏ Select the file C:\2320\dealingtree\css\Gabrielle.ttf, and then waita few seconds for the file to finish uploading.

7. ❏ Check the Agreement checkbox: Yes, the fonts I'm uploading are legallyeligible for web embedding.

8. ❏ Click DOWNLOAD YOUR KIT.

9. ❏ After a few seconds, the browser will download a ZIP file. Save it in the C:\2320\dealingtree\css folder.

10. ❏ Close the browser, then use Windows Explorer to open C:\2320\dealingtree\css.

11. ❏ Right-click your webfontkit-*.zip file and select Extract All from thecontext menu.

Hands-On Exercise 4.3:Advanced Styling With Attributes and Fonts

(continued)


12. ❏ Extract the results to C:\2320\dealingtree\css (remove thewebfontkit-* folder from the "Files will be extracted to this folder" path).Uncheck the checkbox to show extracted files when complete, becauseyou should already have Windows Explorer open to the correct directory.When prompted to "Replace or Skip Files," choose Replace the file in thedestination.

The folder should now contain four font files named gabrielle-webfont.* as well as a stylesheet named stylesheet.css and a few otherfiles that we won't use.

13. ❏ Use an editor to open stylesheet.css and be certain that you understandits contents.

14. ❏ Edit the empty file C:\2320\dealingtree\css\fonts-etc.css.

15. ❏ Create a property set to use our new font, size 1.5em, for the page's subtitle.

Hint...

Select class SubTitle1 within the header.


header .SubTitle1{ font: normal normal 1.5em gabrielleregular;}

The class name ends in the digit 1 (one), not a letter!





Remember to reload all resources!

The new font should be used for the heading:

Part 2: Selecting elements by attribute value content

DealingTree is creating a special promotion for deals that are considered"green" (i.e., environmentally friendly). These deals will be highlighted on thehome page by a green background and our new font.

18. ❏ In the browser, view the HTML source of the home page.

19. ❏ Scan for sections that have class DealSummary. These elements alsohave a data-cat attribute containing keywords that describe the offercategory.

We will apply special processing to the offers containing the category keywordGREEN. Which offer(s) include this keyword in their data categories? __________________________________________________

20. ❏ In your editor, return to the stylesheet that you created in Part 1. Add theproperty set to change the background color for the targeted sections togreen with 20% opacity:


(continued)



section[data-cat*="GREEN"]{ background-color: rgba(0,255,0,0.2);}

Warning! CSS does not allow whitespace between an elementselector and the opening square bracket for its attribute value selector!

21. ❏ Next, add the property set to apply our custom font to the h3 within the specialsections. Use size 1.75em and disable the current transformation foruppercase text.


section[data-cat*="GREEN"] h3{ font: normal 1.75em gabrielleregular; text-transform: none;}


23. ❏ Return to the browser and refresh the page and its resources.

24. ❏ Scroll down to the "green" elements and verify that the special color and fontare being used. Also, make certain that only the environmentally friendly offershave the special styles applied!



Congratulations! You have converted a font to web formats anddifferentiated site elements with web fonts and background colors bymatching attribute values.



25. ❏ Visit www.google.com/fonts and follow the instructions to use one or moreGoogle Fonts on http://dealingtree/.

26. ❏ Experiment with other attribute value selectors to apply thegabrielleregular font to other elements on the page.


(continued)


27. ❏ Download another font from one of the free font websites, convert it to web fontformats, and apply it to the DealingTree elements of your choice.




Optimizing Page Layout With Media Queries


Objectives


● Support varying screen widths with media queries● Improve accessibility for high-zoom-level browsers

Overview

This exercise uses media queries to adjust the layout of a deal detail page toaccommodate the browser width and zoom level.

Part 1: Applying media queries

1. ❏ Use Firefox to visit http://dealingtree/.

2. ❏ Make the window as large as possible, but do not maximize it.

3. ❏ Press <Ctrl><F5> to reload the page and all of the CSS resource files.

4. ❏ Scroll down to the Great Deals in Atlanta article, and click the image or text forthe Metro Area Transit Promotions deal, to go to http://dealingtree/Atlanta/sku04/.

Hands-On Exercise 4.4:Optimizing Page Layout With Media Queries(continued)


5. ❏ Slowly resize the browser window to make it increasingly narrow.

As the size of the content exceeds the width of its boundaries, the layoutbecomes sloppy and more difficult to understand:

Hands-On Exercise 4.4:Optimizing Page Layout With Media Queries

(continued)


6. ❏ Use an editor to openC:\2320\dealingtree\css\media-queries.css.

This stylesheet adjusts the layout of this and other pages according to thewidth of the browser window, but it has not been linked to our web pages.



7. ❏ Locate the second media query:

@media only screen and (min-width: 74em){ header { height: 7em; } header .SubTitle1 { margin-top: 0.5em; font-size: 1.65em !important; } nav li a { height: 6.4em; line-height: 10em; width: 6.4em; }}

The property sets in this block adjust the size of the header when thepage is wider than 74 em.

How wide is the anchor in each navigation list item when these property sets are applied? __________________________________________________

The last property set adjusts the anchor to 6.4 em wide.


(continued)


8. ❏ Locate the third media query:

@media only screen and (max-width: 62em){ nav li a { width: 4.5em; }}

The property sets in this block adjust the size of the header when thepage is less than 62 em wide.

Does this property set make the navigation anchors wider or narrower as the browserwindow becomes smaller? __________________________________________________

The width is reduced to 4.5 em.

9. ❏ Edit C:\2320\dealingtree\Atlanta\sku04\index.html.

10. ❏ Within the head element, after the existing link elements, add another linkto load the stylesheet:


<link rel="stylesheet" href="/css/media-queries.css"/>

Warning! It is important to add this link after the others, or else theproperties in a later stylesheet could override the properties in our mediaqueries!

11. ❏ Save your work, leaving the file open in the editor.



12. ❏ Return to the browser. Once again, make the window as large as possible, butdo not maximize it.

13. ❏ Press <Ctrl><F5> to refresh the page and all of its resources.

14. ❏ Slowly resize the browser window to make it increasingly narrow, until thelayout of the heading changes:

15. ❏ Continue to reduce the width of the browser, until the image becomes muchsmaller than the heading text:


(continued)


Let's fix this with another media query!

16. ❏ Edit the empty fileC:\2320\dealingtree\css\media-queries-detail.css.

17. ❏ Create a media query that applies to a screen up to 48em wide.


@media only screen and (max-width: 48em) {}

18. ❏ Within the curly brackets, create a property set for an img that is an immediatechild of an element with class DealDetail. The image should not float andshould be as wide as its container.




.DealDetail > img{ float: none; width: 100%;}

19. ❏ Still within the media query, create another property set, this one for allelements that are immediate children of an element with class DealDetail.The left margin should be removed from these elements. This rule is !important


.DealDetail > *{ margin-left: 0 !important;}

20. ❏ Still within the media query, create another property set for h2 elements thatare immediate children of class DealDetail, setting the font-size to 2em.


.DealDetail > h2{ font-size: 2em;}

21. ❏ Finally, add one last property set to the media query, for sections that aredescendants of class DealReviews (not DealDetails!). For these elements,set the width to 98%.


(continued)



.DealReviews section{ width: 98%;}


23. ❏ Return to editing index.html.

24. ❏ Within the head element, after the link element that you added previously,add another link to load the new stylesheet.


<link rel="stylesheet" href="/css/media-queries-detail.css"/>


Part 2: Testing accessibility of media queries

26. ❏ Return to the browser and press<Ctrl><F5> to refresh the page and all of itsresources.

The image should no longer appear too small, and the details shouldappear below it:



27. ❏ Maximize the browser window.

The text on our page might be too small for some users to read.Fortunately, modern browsers provide a zoom feature that allows users toincrease (or decrease!) the size of the text and images on a page.


(continued)


28. ❏ Press <Ctrl><+> (hold <Ctrl> and press the <+> key) repeatedly toincrease the zoom level of the browser.

The media queries should adjust the page layout to accommodate thezoom level!

29. ❏ Press <Ctrl><0> (zero) to restore the zoom level to normal.

Congratulations! You have improved accessibility and usability ofvarying browser settings with media queries.



30. ❏ Add another media query to media-queries-detail.css to hide the avatarimages in the .DealReviews section if the screen is smaller than 32em wide.




@media only screen and (max-width: 32em){ .DealReviews img { display: none; }}

31. ❏ In preparation for the next chapter, read and perform the activities in"Modern JavaScript Best Practices," which you can download fromLearningTree.com/MyLearningTree (click Course 2320).



Processing Market Selection on the Client


Objectives


● Handle drop-down change events with jQuery● Show and hide deals using jQuery and custom data attributes

Overview

The DealingTree website, like most others, requires server-side code to process userrequests to select a different market. In this exercise, we will add JavaScript code to thebrowser to handle these requests. Later, we will use browser storage to remember theuser's selection.

Warning! If you did not finish the previous Do Now activity, useExercise Manager to solve it before you begin this exercise.

Part 1: Processing change events with jQuery

1. ❏ Return to editingC:\2320\dealingtree\market-selection.js.

2. ❏ Locate the statement that hides the submit button: $('#marketSubmit').hide();

If you aren't sure where to add the following steps, feel free to peekahead to the complete code checkpoint after step 7.

3. ❏ On the next line (still inside the function body), use jQuery to retrieve theselect element into a variable, using the ID of the element as the name of thevariable.


var $marketSelector = $('#marketSelector');

4. ❏ After the assignment, add a change event handler for the element.

Hands-On Exercise 5.1:Processing Market Selection on the Client(continued)



$marketSelector.change( function(e) { } );

5. ❏ Within the handler, pass jQuery a selector and context to detect which optionhas been selected, and invoke a function on each matching option.


$('option:selected',e.target).each( function() { } );} );

6. ❏ Within the function, assign the text from the option to a variable namedmarket


var market = $(this).text();

7. ❏ On the next line, add an alert() statement to output the market.


$(function() { $('#marketSubmit').hide(); var $marketSelector = $('#marketSelector'); $marketSelector.change( function(e) { $('option:selected',e.target).each( function() { var market = $(this).text(); alert(market); } ); } ); } );

8. ❏ Save the file, leaving the editor open.

Hands-On Exercise 5.1:Processing Market Selection on the Client

(continued)


9. ❏ To test your work so far, use Firefox to visit http://dealingtree/.

10. ❏ Press <Ctrl><F5> to refresh the page and all resources.

11. ❏ Near the beginning of the page, verify that the Find Great Deals button for themarket selection has been hidden.

12. ❏ Change the location to something other than the initial value. The alert dialogshould appear, showing the value that you selected:

Next, we will update the home page to only show deals that are relevantto the selected location.

Part 2: Displaying relevant content with custom data attributes

13. ❏ Press <F12> to launch the Firebug debugger, then click HTML to inspect thestructure of the page:



Which class name is present in each article for a specific market? __________________________________________________

Hint...

It's not ClearFix!

Which custom data-* attribute identifies the market for each article? __________________________________________________

14. ❏ Return to the editor and remove the alert(. . .)

15. ❏ In place of the alert(), use jQuery to collect all elements with class Marketand attribute data-market equal to variable market.


(continued)



$('.Market[data-market="'+market+'"]')

16. ❏ Remove the class AccessiblyHidden from the collection.


$('.Market[data-market="'+market+'"]') .removeClass('AccessiblyHidden');

Class AccessiblyHidden moves elements beyond the left edge of thescreen. Although no longer visible, their content is still accessible to screenreaders. These properties are already defined for you in the CSS:

.AccessiblyHidden{ position: absolute; left: -999px; top: 0px; width: 900px;}

17. ❏ Add a similar statement to hide all page elements that are not in the selectedmarket.

Warning! Be careful to use != instead of = in the final addition!



Your entire handler function should resemble this, with this step in bold:

function(e){ $('option:selected',e.target).each( function() { var market = $(this).text(); $('.Market[data-market="'+market+'"]') .removeClass('AccessiblyHidden'); $('.Market[data-market!="'+market+'"]') .addClass('AccessiblyHidden'); } );} );


19. ❏ Return to the browser and refresh the page and all resources.

20. ❏ Change the location to someplace new, then verify that the displayed articlematches the market that you selected:


(continued)


Congratulations! You have used jQuery to show and hide contentusing event handlers and custom data attributes.



21. ❏ In its current state, the browser no longer notifies the server that the marketselection has changed. Immediately after the call to addClass, use jQuery'sval() method to retrieve the option value, and $.post() to send the marketcoordinates to the home page (URL: "/") as an Ajax request.


$.post('/','market='+$(this).val());

22. ❏ If you are interested, review the jQuery documentation about val()or$.post() at http://docs.jquery.com.




Storing Simple Data on the Client


Objectives


● Save data to Web Storage● Retrieve data from Web Storage

Overview

In this exercise, we will enhance the JavaScript file that we created in the previousexercise to store the selected market in localStorage. Then we will restore the marketselection when the page is revisited.


Part 1: Saving and retrieving localStorage data

1. ❏ Edit C:\2320\dealingtree\market-selection.js.

2. ❏ Locate the following line:var market = $(this).text();

3. ❏ Immediately after the assignment, add a statement to set the market value inlocalStorage under the key SavedMarket


localStorage.setItem( 'SavedMarket', market );

4. ❏ After the end of the change handler, but before the end of the document-ready function, add a statement to get the previously set SavedMarket fromlocalStorage and assign it to a variable named market

Hands-On Exercise 5.2:Storing Simple Data on the Client(continued)


Your JavaScript file should now resemble this, with this step in bold:

$(function (){ $('#marketSubmit').hide(); var $marketSelector = $('#marketSelector'); $marketSelector.change( function(e) { $('option:selected',e.target).each( function() { var market = $(this).text(); localStorage.setItem('SavedMarket',market); $('.Market[. . .]').addClass('AccessiblyHidden'); $('.Market[. . .]').removeClass('. . .'); $.post('/','market='+$(this).val()); //(bonus) } ); } ); var market = localStorage.getItem('SavedMarket');});

5. ❏ Next, use a double-negative to test the value of market, to determine whetherthe item was previously set.


if ( !! market ){}

6. ❏ Within the conditional block, use jQuery to retrieve the value of the optionwithin the $marketSelector that contains the market text.


$( 'option:contains("' + market + '")', $marketSelector ).val()

Hands-On Exercise 5.2:Storing Simple Data on the Client

(continued)


7. ❏ Choose the market by setting the value of $marketSelectorto the value ofthe option.


$marketSelector.val( $( 'option:contains("'+market+'")', $marketSelector).val() )

Remember the closing parenthesis!

8. ❏ Trigger the drop-down's change event, so the page will display the deals forthe selected market.

The end of your JavaScript file should now resemble this (to review the completesolution, open the file in the done-deal version of the site):

var market = localStorage.getItem('SavedMarket');if ( !! market ){ $marketSelector. val( $('option:contains("'+market+'")', $marketSelector).val() ) .change();}}); // closing delimiters for $(function(){. . .});



11. ❏ Refresh the browser window, including all of its resources.

In Firefox, you must press <Ctrl><F5> to force all of the JavaScriptfiles to be reloaded. In other browsers, you must hold down <Ctrl> whileclicking the Refresh button. In Chrome, you may need to refresh twice. Ifyou do not follow this instruction carefully, you will probably not get theintended result!



12. ❏ Select a new location from the drop-down list, and verify that the browser onlydisplays deals for the selected location.

13. ❏ Open a new window (or tab) and visithttp://dealingtree/storage-inspect.html

This script retrieves the values from localStorage using thegetItem() method.

14. ❏ Verify that the reported value matches the location that you selected.

The page should resemble the following, although the exact appearanceand value will depend on the browser and the location that you selected:

15. ❏ Close all of your open browser windows, then open the same browser again.

16. ❏ Once more, visit http://dealingtree/

17. ❏ Verify that the market in the drop-down list and the article match the locationthat you previously selected.


(continued)


Congratulations! You have stored and retrieved data in client-sidestorage and displayed relevant content using custom data attributes.



18. ❏ Review the source code for /storage-inspect.html. If you are workingwith a partner, discuss the logic and be sure that you agree on how it works.

19. ❏ Review and test /storage-clear.html.

If you still have more time. . .

Currently, if a user closes their browser window while filling out the formon the Join page, all of the data that they've entered will be lost. In addition, acurrent member might have forgotten which e-mail address they used duringsignup. Let's add code to the page that saves the user's input as they entereach field.


20. ❏ EditC:\2320\dealingtree\join\initialize-join-page.js.

21. ❏ At the end of this file, pass a function to jQuery to execute when thedocument's HTML is ready.




$(function(){});

22. ❏ Inside the function body, use jQuery to find all input elements, except for thesubmit button.


$('input[type!="submit"]')

But wait! Fields containing sensitive information, such as passwords andcredit card numbers, should not be saved to the browser's Web Storage. Let'sexclude them!

23. ❏ Modify the selector to exclude elements with type="password" orautocomplete="off"


$('input[type!="submit"][type!="password"][autocomplete!="off"]')

24. ❏ Add a change handler to the elements in the collection. Within the handler,save the value of the event's target to localStorage, using the element'sid as the key, prepended with the string 'Saved-'

Your code should resemble this, with this step in bold:

$('input[type!="submit"][type!="password"][autocomplete!="off"]') .change( function(e) { localStorage.setItem( 'Saved-'+e.target.id, e.target.value); })


(continued)


25. ❏ Use jQuery chaining to invoke a function for each element in the collection.Within the function, retrieve the previously saved value from localStoragefor this element. If a value has been stored, restore it to the element.

All of the code that you've added in this bonus exercise should now resemble thefollowing, with this step in bold:

$(function(){ $('input[type!="submit"][type!="password"][autocomplete!="off"]') .change( function(e) { localStorage.setItem( 'Saved-'+e.target.id, e.target.value); }) .each( function() { var prev = localStorage.getItem('Saved-'+this.id); if ( !! prev ) this.value = prev; });}); // closing delimiters for $(function(){. . .});

Because this code is executing when the document is ready, the formwill be restored to its previous condition when the page reloads. Now we canpolyfill Web Storage for browsers that lack native support.

26. ❏ At the beginning of the file, locate the statement that initializes Webshims Lib:webshim.polyfill('forms forms-ext');

27. ❏ Add json-storage to the list of features to be polyfilled.


webshim.polyfill('forms forms-ext json-storage');




29. ❏ Use any browser to visit http://dealingtree/join

30. ❏ Refresh the browser window, including all of its resources.

31. ❏ Provide a value for every field, but do not submit the form. Be sure to press<Tab> after selecting a birth date, so the change handler will execute.

32. ❏ Refresh the page in the browser.

Which fields have been repopulated with their previous values? Is this whatyou expected? Why (or why not)? __________________________________________________



Persisting Complex Data as JSON


Objectives


● Represent a JavaScript object as JSON data● Store JSON data in localStorage● Retrieve JSON data from localStorage● Parse JSON data into a JavaScript object

Overview

In this exercise, we will save the user's inventory in localStorage, so that the usercan continue to interact with their cached version of our website even if the server isunavailable.

Part 1: Saving JSON data to client-side storage


2. ❏ Click the Buy button for any deal that you would like to purchase. The dealshould disappear from the list of available deals, and the deal's image (andsurrounding anchor) should appear under Your Deals on the right side of thepage.

3. ❏ Buy a few more deals to verify that they are added to your inventory.

Hands-On Exercise 5.3:Persisting Complex Data as JSON(continued)


Because the server code has been disabled, our deals currentlydisappear when we refresh the page.

4. ❏ Refresh the page and verify that your previous purchases no longer appearunder Your Deals.

5. ❏ Edit the empty fileC:\2320\dealingtree\js\deal-storage.js.

6. ❏ Within this empty file, add a new saveInventory method, with a parameternamed inv, to the existing InventoryManager object.


InventoryManager.saveInventory = function( inv ) { };

InventoryManager was defined in another file.

7. ❏ Within the method, convert the parameter to a JSON string and store the resultin localStorage under the key inventory


InventoryManager.saveInventory = function( inv ) { localStorage.setItem( 'inventory', JSON.stringify(inv) ); };


This file is already loaded into the home page.

9. ❏ Return to the browser and refresh the home page.

Hands-On Exercise 5.3:Persisting Complex Data as JSON

(continued)


Be sure to reload all of the page resources!

10. ❏ Click the Buy button for a few deals and verify that they are added to YourDeals on the Home page.

11. ❏ In another window (or tab) for the same browser, visit http://dealingtree/storage-inspect.html and verify that the JSON data isbeing stored under the key inventory:

Your exact data will depend on the market and deals that you selected.If the inventory key or its JSON data are not present, check your work andcorrect any problems before you continue.

12. ❏ Return to the window (or tab) containing the DealingTree site, and refresh thepage.



Do your previous purchases appear in Your Deals? Is this what you expected? Why (orwhy not)? __________________________________________________

Although we are saving our deals to local storage, we have not yetadded the code to retrieve them when the page is reloaded. We'll take care ofthat in the next part of the exercise.

Part 2: Restoring JSON data from client storage

13. ❏ Return to editing deal-storage.js. After the end of the file, pass a functionto jQuery to execute when the document is ready.


$( function() {} );

14. ❏ Within the handler, retrieve the value into a variable named inv


var inv = localStorage.getItem('inventory');

15. ❏ On the next line, use a double negative to test that the inv property hasa useful value. If it does, parse the JSON data and pass the result to theInventoryManager.loadInventory method:

Hands-On Exercise 5.3:Persisting Complex Data as JSON

(continued)


Your entire file should now resemble this, with this step in bold:

InventoryManager.saveInventory = function( inv ) { localStorage.setItem( 'inventory', JSON.stringify(inv) ); };$(function(){ var inv = localStorage.getItem('inventory'); if ( !! inv ) InventoryManager.loadInventory( JSON.parse(inv) );});


17. ❏ Back in the browser, reload the page and all of its resources.

Because your deals were already being saved, they should appear whenyou load the new code. If they do not, go back, check your work, and correctany problems.

Congratulations! You have converted JavaScript objects to andfrom JSON data in localStorage.



18. ❏ Visit http://json.org to learn more about the JSON data format.

19. ❏ Try to understand the InventoryManager code inC:\2320\dealingtree\js\inventory-manager.js.



20. ❏ Compare the additional code in the following two files:C:\2320\dealingtree\buy-home.jsC:\2320\dealingtree\js\buy-detail.js



Working Offline


Objectives


● Load an application into the browser for offline use● Work offline from the application cache

Overview

Because the Google Chrome desktop browser has strong support for the ApplicationCache, we will use it in this exercise to demonstrate some of the effects of working offline.

Note: This exercise uses the done-deal (completed) version of the website. We willexamine files on our exercise machine, but we will demonstrate functionality against thelive version of the website, on the Internet at http://www.dealingtree.com.

Part 1: Loading the Application Cache

1. ❏ Use an editor to view the solution manifest fileC:\2320\done-deal\dealingtree.appcache.

Why don't we add a manifest file to the dealingtree (in-progress) version of ourwebsite? What would be an undesirable effect of doing so at this time? __________________________________________________

The cache manifest must be updated every time a file is modified. If weadded a cache manifest to our in-progress site, then we would need to updateit every time we test an upcoming exercise!

2. ❏ Inspect this file and be certain that you understand its contents.

Hands-On Exercise 6.1:Working Offline(continued)


Which resource should be used as a placeholder for any missing resource from the /images/deal subdirectory, when the user is offline? __________________________________________________

placeholder.svg

Which resource should be used as a placeholder for any missing resource from the /images/user subdirectory? __________________________________________________

userX.png

Which resource should be used as a fallback for any other resource on our site? __________________________________________________

offline.html

3. ❏ If you have any Google Chrome browser windows open, close each windowand wait 10 seconds for the program to be cleared from memory.

4. ❏ Launch Google Chrome and press <Ctrl><H> to display the History page:

Hands-On Exercise 6.1:Working Offline

(continued)


5. ❏ Click Clear browsing data to display the "Clear browsing data" popup:

6. ❏ Use the time selector to obliterate items from the beginning of time. Makecertain that every checkbox is checked, then click the Clear browsing databutton.

7. ❏ After the popup disappears, close the browser window.

8. ❏ Wait 10 seconds for the program to be cleared from memory again.

9. ❏ Launch Google Chrome again and maximize the window.

10. ❏ Press <F12> to open the Developer Tools:

11. ❏ Click Console.

12. ❏ Click the link on the course home page to visit the live version of the casestudy, on the Internet at www.DealingTree.com.



Why don't we visit the completed solution on our exercise machine at http://done-deal/ instead? __________________________________________________

To test offline behavior, we need to be certain that the website cannot bereached. The browser could still access the local version without an Internetconnection!

13. ❏ Notice the Application Cache messages that appear in the Developer Toolsconsole as the page loads:

14. ❏ Wait for the Application Cache Cached event to appear.

15. ❏ Select a location using the Choose Your Location! drop-down.

16. ❏ Click the image for any deal to visit its detail page.

Which detail page did you visit? __________________________________________________

17. ❏ Click Home to refresh the DealingTree home page.


(continued)


Part 2: Going offline

Now that the application is cached, we can test going offline.

Warning! Be sure to perform the following step on the VirtualMachine desktop—not the host Operating System! The VM has a bluedesktop background with the dealingtree folder; the host has a blackbackground and probably displays the HOST name.

18. ❏ Right-click the network icon in the system tray (near the lower right corner ofthe desktop) and select Open Network and Sharing Center from the pop-upcontext menu.

19. ❏ In the left pane of the Network and Sharing Center window, click Changeadapter settings.



20. ❏ In the Network Connections window, right-click the only network connectionicon and select Disable from the pop-up context menu. Keep this windowopen; we will return to it shortly.

21. ❏ After a second or two, the network icon in the system tray should display an "x"in a red circle to indicate that there is no network access:


(continued)


22. ❏ Return to the browser window and, once again, click the image to return to thedetail page that you previously visited.

Does the detail page reappear? __ Yes __ No

Detail pages are not listed in the cache manifest. However, the browsermight display the page from its normal cache, especially if it references thecache manifest!

23. ❏ Click Join.

Does the registration page appear? __ Yes __ No

Thinking back to the cache manifest, what offline fallback URL is displayedwhen a page is not stored in the cache? __________________________________________________

Refer back to Step 2 if you don't remember!

24. ❏ Check the remaining pages in the navigation menu (Chirps, Savings, Demo,Help).



Which pages are not replaced by offline.html? Why? __________________________________________________

When the network is unavailable, the browser might display any pagefrom its AppCache or regular cache.

25. ❏ Click Home to return to the home page.

26. ❏ Press <Ctrl><F5> twice to force Chrome to try to reload the page and itsresources.

Has anything changed? If so, what? __________________________________________________

The browser might display placeholder.svg in place of one or moredeal images, if the original image is no longer in the browser cache. If all of thedeal images are displayed, changing the location might cause a missing imageto be replaced. It is also possible that all of the images have been cached, inwhich case, the placeholder is not used.

27. ❏ Click a deal image (or placeholder) other than the one that you previouslyvisited, to try another detail page.

Is the detail page available? __ Yes __ No

Remember, detail pages are not listed in the cache manifest. A detailpage will only appear when offline if it was previously visited while online.

28. ❏ Return to the Network Connections window, right-click the only network icon,and select Enable from the pop-up context menu.


(continued)


29. ❏ Close the Network Connections and Network and Sharing Center windows.The red "x" should disappear from the network icon in the system tray toindicate that network access has been restored:

30. ❏ Click Home to revisit the home page

31. ❏ Press <Ctrl><F5> twice to force Chrome to reload the page and allresources.

32. ❏ Visit the pages that were previously missing, to be certain that they areavailable.

Congratulations! You have used the Application Cache to access awebsite while offline.



33. ❏ If you have a smartphone or other wireless device, use it to visit the live, onlineversion of our completed case study at www.dealingtree.com. Disconnectthe device from the wireless network (for example, by going into Flight Mode orAirplane Mode). Attempt to use the website while it is offline, then reconnect tothe network.

34. ❏ Read the official specification about the Application Cache atwww.whatwg.org/specs/web-apps/current-work/#offline




Customizing the User Experience With Location-Specific Content


Objectives


● Discover the user's location with the geolocation API● Compute distances using the haversine formula● Assist the user in selecting relevant content

Overview

In this exercise, we will determine and select the closest DealingTree market to the user'slocation.


Part 1: Requesting location

1. ❏ Use Firefox to visit http://html5demos.com/geo.

2. ❏ Grant permission for the browser to share your location.

3. ❏ Compare your location on the map to your physical location.

AnyWare attendees: The location should be for your exercise machine,not where you are!

How accurate are the results? __________________________________________________

If the location cannot be determined or is not very accurate, try InternetExplorer. If it still isn't close, try Chrome or Opera.

Hands-On Exercise 6.2:Customizing the User Experience With Location-Specific Content(continued)


What location did you determine is "close enough?" __________________________________________________

4. ❏ Edit the empty file C:\2320\dealingtree\market-geolocation.js.

5. ❏ Within the empty file, pass a handler function to jQuery to execute ourgeolocation code when the document is ready.


$( function() {});

6. ❏ Within the function, get the user's current position, passing another functionthat expects a single parameter named pos.


navigator.geolocation.getCurrentPosition( function(pos) { });

7. ❏ Inside the new function, add an alert() statement to output the user'slatitude and longitude.

Your file should resemble this, with this step in bold:

$( function() { navigator.geolocation.getCurrentPosition( function(pos) { alert( 'lat=' + pos.coords.latitude +' lon='+pos.coords.longitude ); });});


Hands-On Exercise 6.2:Customizing the User Experience With Location-Specific Content

(continued)


9. ❏ Return to your most accurate browser and visit http://dealingtree/.

10. ❏ The browser should ask permission to share your location. Grant permission,but do not allow the browser to remember the decision.

If the dialog does not appear, reload the page and its resources and tryagain.

11. ❏ Close all open browser windows, then launch the browser again and revisithttp://dealingtree/. This time, when asked to share your location, denythe request.

This time, the dialog should not appear! If the browser does not promptyou for permission to share your location, then refer to Appendix B to revokethe prior permission.

12. ❏ Using the market selection drop-down list, choose the market that is thefurthest from the location that you decided was "close enough" in step 3.

13. ❏ Refresh the page and again deny the location-sharing request. Make certainthat the market shown (in the drop-down list and deal locations) is the one thatyou most recently selected.

When we test the next part of the exercise, it will be important that thesaved market is not the one that's actually closest to you!

Part 2: Calculating distances with the haversine formula

Now that we have our location-sharing code in place, we can comparethe location provided by the user to our different markets, and determine whichmarket is closest to the user.

14. ❏ Use the browser to view the source of the DealingTree home page.



15. ❏ In the HTML source, locate the select element that presents the drop-downlist of markets to the user:

<select name="market" id="marketSelector"> <option value="">Choose Your Location! </option> <option value="33.75,-84.39">Atlanta</option> ... <option value="38.90,-77.04">Washington</option></select>

Each option value contains the coordinates of a location near the centerof the market. We can compute the distance of each point from the user todetermine the closest market.

16. ❏ Use an editor to openC:\2320\dealingtree\haversine-miles.js.

The haversineMiles() function calculates the approximate distancebetween two points.

17. ❏ Return to market-geolocation.js and replace the alert() statementwith the following variables, which we will use to track the closest location:

var shortestDistance = 999999999;var closestOption = null;var marketSelector = document.getElementById('marketSelector');

18. ❏ After your initializations, but still inside the same function, create a for block toloop through all of the element's options after the first.


for (var i=1; i<marketSelector.options.length; i++){}

19. ❏ Within the loop, insert code to extract the coordinates from each option.


(continued)



var coords = marketSelector.options[i].value.split(',');

20. ❏ On the next line (still within the loop), call the function to calculate the distancebetween our location and the market coordinates.


var distMiles = haversineMiles( pos.coords.latitude, pos.coords.longitude, coords[0], coords[1] );

21. ❏ Still within the loop, add a condition to save the option element and distanceif it is closer than others already processed.


if ( distMiles < shortestDistance ){ closestOption = marketSelector.options[i]; shortestDistance = distMiles;}

22. ❏ After the loop's closing curly bracket (but still within the same function), selectthe closestOption, then invoke the change handler that we created earlier.



Your file should resemble this, with this step in bold:

$(function(){ navigator.geolocation.getCurrentPosition( function(pos) { var shortestDistance = 999999999; var closestOption = null; var marketSelector = document.getElementById('marketSelector'); for (var i=1; i<marketSelector.options.length; i++) { var coords = marketSelector.options[i].value.split(','); var distMiles = haversineMiles( pos.coords.latitude, pos.coords.longitude, coords[0], coords[1] ); if ( distMiles < shortestDistance ) { closestOption = marketSelector.options[i]; shortestDistance = distMiles; } } closestOption.selected = true; $(marketSelector).change(); } );});



25. ❏ Allow the browser to share your location.

If the browser does not prompt you for permission to share your location,then refer to Appendix B to remove the saved preference.

26. ❏ Verify that your closest market appears in the drop-down list and Great Dealsarticle:


(continued)


Congratulations! You have used the geolocation API and thehaversine formula to help the user select the most relevant market totheir location.



If the user has already selected a location, it is not very friendly to forcethem to change to the nearest market. Let's make sure that doesn't happen!

27. ❏ Return to the editor and add a conditional block around the call togetCurrentPosition(). Only call this method if the localStorage doesnot contain an item named SavedMarket.



The file should now resemble this, with this step in bold:

$(function(){ if ( ! localStorage.getItem('SavedMarket') ) { navigator.geolocation.getCurrentPosition( function(pos) { // ... lots of code here! } ); }});

28. ❏ Save your work, return to the browser, and reload the page and all of itsresources.

29. ❏ Be certain that the browser does not ask for your location.

Double-check that the current location will be used if the user has not yetselected a market. To do so, we must clear the saved data from storage and tryagain.

30. ❏ Using the same browser, visit http://dealingtree/storage-clear.html.

This page contains a call to the localStorage.clear() method. Youcan inspect the source if you want.

31. ❏ Return to the course home page (http://html5) and click the link for theDealingTree (work-in-progress) version of the case study. Your previouslysaved market should no longer be selected.

Warning! Do not just click the Back button to return to the coursehome page, because doing so might simply reload the previous HTMLfrom the cache instead of starting again.

32. ❏ Allow the browser to share your location.


(continued)


Does the selection change to the closest market? __ Yes __ No

If the selection does not change, review your work and correct anyproblems.

If you have even more time. . .

33. ❏ Add a second parameter to the call to getCurrentPosition(): the functionto handle errors.

34. ❏ Search the web for more information on the haversine formula.




Feature Testing and Lazy Loading With Modernizr


Objectives


● Lazy-load a JavaScript file to improve responsiveness● Test for available features with a double negative and Modernizr● Conditionally load and execute code based on feature availability

Overview

In the exercises for this chapter, we will enhance a form. In this first exercise, we will usefeature detection to determine which enhancements are possible and load JavaScript filesthat will eventually use the available features.

Part 1: Evaluating opportunities for enhancement

1. ❏ Use Chrome, Firefox, or IE to visit http://dealingtree/add/

Our advertisers use this form to add new deals to the site.

2. ❏ Enter some imaginary information for testing purposes (it doesn't need to bevery meaningful!). To add a photo, click the Choose File button and select oneof the images on your desktop.

Notice that the textarea for the Details section has a handle at thebottom-right corner, so it can be expanded to show more information withoutscrolling. Many browsers now add this handle automatically to a textarea.Some browsers will even let you make the textarea smaller with this handle!

Hands-On Exercise 7.1:Feature Testing and Lazy Loading With Modernizr(continued)


3. ❏ Submit the form. The browser should display what your deal will look like"pending approval" from the DealingTree moderators.

We will enhance the form to allow the detail text to be enhanced withbold, italics, and underline formatting. We will also make it easier to select animage by dropping it onto the form.

Part 2: Feature detection and conditional loading

4. ❏ Use an editor to open C:\2320\dealingtree\add\editable.js.

In Exercise 7.2, we will add code to this file to enhance editing of thedetail text. For now, it contains a simple alert() statement, to verify when it isloaded.

5. ❏ Use the editor to open C:\2320\dealingtree\add\dropimage.js.

In Exercise 7.3, we will add code to this file to allow an image to bedropped onto the form. For now, it contains a simple alert() statement, toverify when it is loaded.

Hands-On Exercise 7.1:Feature Testing and Lazy Loading With Modernizr

(continued)


6. ❏ Edit C:\2320\dealingtree\add\initialize-add-page.js.

This file contains the initializations for the Add a Deal page. At this point,it only invokes the Webshim polyfill to add HTML5 forms features for legacybrowsers.

7. ❏ After the existing code, invoke the Modernizr.load method with an emptyarray (using object literal notation):


Modernizr.load( [ ] );

8. ❏ Within the array, tell Modernizr to always run editable.js:


Modernizr.load( [ 'editable.js' ] );

9. ❏ After running editable.js, use an object literal to tell Modernizr to rundropimage.js, but only if the browser supports both the drag-and-drop andFileReader APIs. Modernizr provides a test for draganddrop support, butwe'll have to use a double negative to see if the window has a FileReaderproperty.

Your file should now resemble this, with this step in bold:

webshim.polyfill('forms');Modernizr.load( [ 'editable.js', { test: Modernizr.draganddrop && (!!window.FileReader), yep: 'dropimage.js' } ] );

Hands-On Exercise 7.1:Feature Testing and Lazy Loading With Modernizr(continued)


10. ❏ Save your work and return to the browser.

11. ❏ If necessary, click the Back button to return to the Add a New Deal page(http://dealingtree/add/).

12. ❏ Reload the page and all of its resources. The alert boxes should appear, oneafter the other:

Congratulations! You have used feature testing and lazy loading toimprove the performance of a web page.


Hands-On Exercise 7.1:Feature Testing and Lazy Loading With Modernizr

(continued)



13. ❏ Examine C:\2320\dealingtree\initialize-home-page.js.




Creating a Rich Text Editor


Objectives


● Add a WYSIWYG editor to an HTML form● Allow the user to resize a page element● Modify selected page content with JavaScript commands

Overview

In the previous exercise, we used lazy loading to run the alert() command in theeditable.js file. In this exercise, we will replace the alert()with JavaScript to createa text editor having bold, italic, and underline buttons.


Adding an editable page element to HTML

1. ❏ Edit C:\2320\dealingtree\add\index.html.

2. ❏ Locate the following (near line 83):

<textarea id="details" name="details" required="required"> </textarea>

The element might be formatted differently in your editor!

3. ❏ On the next line (after the closing </textarea> tag), create a div with ideditor and class AccessiblyHidden


<div id="editor" class="AccessiblyHidden"></div>

If JavaScript is enabled, we will use it to make the element visible. We donot want to display the WYSIWYG editor if JavaScript is not enabled!

Hands-On Exercise 7.2:Creating a Rich Text Editor(continued)


4. ❏ Within the div, add input buttons for bold, italic, and underlinestyles. Use the name of each style as the element id, and the first letter ofeach style as the value.


<input type="button" id="bold" value="b"/><input type="button" id="italic" value="i"/><input type="button" id="underline" value="u"/>

5. ❏ After the last input, add another div, having id editorText and thecontenteditable attribute with the value true.

This part of the file should now resemble this, with this step in bold:

<div class="labelAndField"> <label for="details">Details:</label> <textarea id="details" name="details" required="required"> </textarea> <div id="editor" class="AccessiblyHidden"> <input type="button" id="bold" value="b"/> <input type="button" id="italic" value="i"/> <input type="button" id="underline" value="u"/> <div id="editorText" contenteditable="true"> </div> </div></div>


7. ❏ Use the editor to openC:\2320\dealingtree\css\page-add.css.

This file contains styles for /add/index.html.

Hands-On Exercise 7.2:Creating a Rich Text Editor

(continued)


8. ❏ Review the styles for the elements that we just added to the page:

#editor#editor input#bold#italic#underline#editorText

What is the purpose of resize:vertical in the last property set? __________________________________________________

9. ❏ Edit C:\2320\dealingtree\add\editable.js and completely removethe alert() statement.

10. ❏ Within the now-empty file, pass a function to jQuery, to be executed when thedocument's HTML is ready.


$(function(){});

11. ❏ Inside the function body, use jQuery to hide the element with id valuedetails


$('#details').hide();

This is the textarea that will be replaced by the WYSIWYG editor.

12. ❏ On the next line, use jQuery to remove the class AccessiblyHidden from theelement with id editor




$('#editor').removeClass('AccessiblyHidden');

This is the div that we just added to the HTML!

13. ❏ Next, add a click event handler for the element with the id value bold.


$('#bold').click( function(e) { } );

14. ❏ Within the handler, use document.execCommand to make all selected textbold.


$(function(){ $('#details').hide(); $('#editor').removeClass('accessiblyHidden'); $('#bold').click( function(e){ document.execCommand('bold',false,null); } ); } );

15. ❏ Copy the entire click handler and paste in two copies below it. Modify thesecond handler to execute the italic command for the element with iditalic, and the third handler to execute the underline command for theelement with id underline


(continued)



$('#italic').click( function(e){ document.execCommand('italic',false,null); } );$('#underline').click( function(e){ document.execCommand('underline',false,null); } );

We still need one more handler, to copy the WYSIWYG contents to the(now-hidden) textarea, so the data will be sent when the form is submitted.

16. ❏ After the third click handler, use jQuery to add a submit handler for theform, selected by its id, addForm


$('#addForm').submit( function(e){ } );

17. ❏ Within the submit handler, use jQuery to copy the html from thecontenteditable element (selected by its id, editorText) to the value ofthe hidden textarea (selected by its id, details).




$(function(){ $('#details').hide(); $('#editor').removeClass('AccessiblyHidden'); $('#bold').click( function(e){ document.execCommand('bold',false,null); } ); $('#italic').click( function(e){ document.execCommand('italic',false,null); } ); $('#underline').click( function(e){ document.execCommand('underline',false,null); } ); $('#addForm').submit( function(e){ $('#details').val( $('#editorText').html() ); } );} );


19. ❏ Use a browser that fully supports the CSS3 resize property to visit http://dealingtree/add/

20. ❏ Reload the page and all of its resources.

21. ❏ Dismiss the loaded dropimage.js dialog.

The form should now resemble the following:


(continued)


22. ❏ Expand the WYSIWYG editor using the handle in the bottom-right corner:

23. ❏ Fill out the form completely, using an image from the Desktop and any randomtext. Be sure to highlight some of the text and click the formatting buttons (b, i,and u) to verify that they function as expected:



24. ❏ Click Add This Deal to submit the new deal. On the Pending Approval page,verify that the formatted text was properly uploaded to the server and that itappears in the results:

Congratulations! You have combined HTML5, CSS3, and JavaScriptto create a simple WYSIWYG editor.



(continued)



25. ❏ Because our Rich Text Editor is not a real form field, it cannot receive the:invalid styles defined for our input fields. Add the following code before thesubmit handler in editable.js to simulate the built-in behavior:

var $editorText = $('#editorText');$editorText.on( 'input', function(e) { $editorText.css( 'background-color', ($editorText.text().replace(/\s/g,'').length>0) ? 'white' : '#ff6' ); } );$editorText.css('background-color','#ff6');

IE 10–11 do not fire the input event when an editable element ischanged; therefore, the field will always have the yellow background. This is aknown bug that eventually should be fixed!

26. ❏ Read the comments in C:\2320\done-deal\add\editable.js tounderstand the code in the previous step.




Simplifying File Upload With Drag-and-Drop


Objectives


● Add a drop target to a web page● Use the File API to read a file on the client machine● Upload an image to the server in data URL format

Overview

In the previous exercise, we used lazy loading to run the alert() command in thedropimage.js file if the browser supports both drag-and-drop and the File API. In thisexercise, we will replace the alert()with JavaScript to add the ability to upload animage as a form attachment using these two features.

Warning! If you did not finish Exercises 7.1 or 7.2, use ExerciseManager to solve them before you begin this exercise.

Part 1: Adding a drop target to an HTML page

1. ❏ Edit C:\2320\dealingtree\add\index.html and locate the followingpage content:

<input type="file" id="photo" name="photo" required="required"/> (JPEG only!)

The element might be formatted differently in your editor!

2. ❏ After the text, but before the closing </div> tag, create a new input withtype hidden. Use the value imageData for both the name and id attributes.


<input type="hidden" id="imageData" name="imageData"/>

If the browser supports drag-and-drop and the File API, we will use thisnew element to upload the image file to the server in data URL format.

Hands-On Exercise 7.3:Simplifying File Upload With Drag-and-Drop(continued)


3. ❏ Immediately after the new input, add a new div with id photoArea andclass AccessiblyHidden


<div id="photoArea" class="AccessiblyHidden"></div>

This will be our drop target. Within the div element, we will add an imageplaceholder, to display the image that is dropped here.

4. ❏ Inside of the new div, add an img with id photoThumb andsrc /images/dropHint.png. Add an appropriate alt attribute if you wouldlike.


<div class="labelAndField"> <label for="photo">Photo:</label> <input type="file" id="photo" name="photo"/> (JPEG only!) <input type="hidden" id="imageData" name="imageData"/> <div id="photoArea" class="AccessiblyHidden"> <img id="photoThumb" src="/images/dropHint.png"/> </div></div>


6. ❏ Use the editor to openC:\2320\dealingtree\css\page-add.css.

This file contains styles for /add/index.html.

7. ❏ Review the styles for the elements that we just added to the page:

#photoArea#photoThumb

Hands-On Exercise 7.3:Simplifying File Upload With Drag-and-Drop

(continued)


The styles for #photoDrop will be used later.

8. ❏ Edit C:\2320\dealingtree\add\dropimage.js and completely removethe alert() statement.

9. ❏ Within the now-empty file, pass a function to jQuery, to be executed when thedocument's HTML is ready.


$(function(){});

10. ❏ Inside the function body, use jQuery to hide the element with id photo, andremove its required attribute.


$('#photo').hide().removeAttr('required');

This is the <input type="file"> that will be replaced by our droptarget.

11. ❏ On the next line, use jQuery to remove the class AccessiblyHidden from theelement with ID photoArea


$('#photoArea').removeClass('AccessiblyHidden');

This is the div that we just added to the HTML!

12. ❏ Next, define a handler function named dragHandler. Like all event handlers,it takes a single Event object as its parameter. Within the handler, invoke theobject's preventDefault() method.




function dragHandler(e){ e.preventDefault(); }

We will use this handler for both dragenter and dropover events, toallow a file to be dropped on our target.

13. ❏ After the function, assign the element with the id value photoArea to a localvariable named photoDrop


var photoDrop = document.getElementById('photoArea');

Warning! Be careful to use the variable name photoDrop but theelement ID photoArea.

14. ❏ Next, add our dragHandler function as a listener for dragenter, dragover,and dragleave events on the photoDrop element.


$(function(){ $('#photo').hide().removeAttr('required'); $('#photoArea').removeClass('AccessiblyHidden'); function dragHandler(e) { e.preventDefault(); } var photoDrop = document.getElementById('photoArea'); photoDrop.addEventListener('dragenter',dragHandler); photoDrop.addEventListener('dragover',dragHandler); photoDrop.addEventListener('dragleave',dragHandler);} );


(continued)


15. ❏ Add another event listener for the photoDrop object. This listener will look fordrop events. Define an empty handler function anonymously, inline.


photoDrop.addEventListener( 'drop', function(e) { } );

16. ❏ Within the handler function, pass the event to dragHandler() to stop thebrowser from completely replacing the current page with the dropped file.


dragHandler(e);

17. ❏ Assign the first File from the Event's dataTransfer.files collection to alocal variable named file.


var file = e.dataTransfer.files[0];

18. ❏ Add a conditional block to only process the file if it is a JPEG image.


if ( file.type == 'image/jpeg' ){}

19. ❏ Within the block, assign a new FileReader object to a local variable namedfr


var fr = new FileReader;



20. ❏ Add an anonymous onload handler for the fr object. To prevent confusionwith the existing event object, use the name e2 for this handler's parameter.


fr.onload = function(e2) { };

21. ❏ Inside the handler, use jQuery's val() method to copy the event'starget.result property to our new hidden field.


$('#imageData').val( e2.target.result );

22. ❏ Still inside the function, use jQuery's attr() method to use the data URL asthe src of our placeholder image.


$('#photoThumb').attr( 'src', e2.target.result );

23. ❏ Finally, outside the onload handler but still within the conditional block, usereadAsDataURL() to load the image.


(continued)


The entire drop handler should now resemble this, with this step in bold:

photoDrop.addEventListener( 'drop', function (e) { dragHandler(e); var file = e.dataTransfer.files[0]; if ( file.type == 'image/jpeg' ) { var fr = new FileReader; fr.onload = function(e2) { $('#imageData').val(e2.target.result); $('#photoThumb').attr('src',e2.target.result); }; fr.readAsDataURL(file); } } );


Part 2: Testing our drag-and-drop file upload

25. ❏ Visit http://dealingtree/add/.

26. ❏ Reload the page and all of its resources.

Our drop target should replace the file upload button:



27. ❏ Size and position the browser so that you can access one of the image fileicons on the desktop at the same time as the drop target, then carefully dragone of the image file icons onto the drop target.

If you use Opera, click Yes to confirm the file upload.

The image should appear within the drop target:


(continued)


28. ❏ Fill out the rest of the form completely, using any random text.

29. ❏ Click Add This Deal to submit the new deal. On the Pending Approval page,verify that the image file appears in the results:



Congratulations! You have used the drag-and-drop and File APIs tosimplify attaching a file to a web form.



Our improved form has one significant problem: It is not accessible tousers with special needs (some users cannot manipulate a mouse to drag anddrop). In this part of the exercise, we will enhance our code to support both<input type="file"> and drag and drop!

30. ❏ Return to editing C:\2320\dealingtree\add\dropimage.js.

31. ❏ Move the drop handler function to the beginning of the file, just inside of thefunction invoked by jQuery whenever the page has loaded. Give the functionthe name fileHandler


(continued)


The start of the file should now resemble this:

$( function() { function fileHandler(e) { dragHandler(e); var file = e.dataTransfer.files[0]; // ... approximately 11 lines not shown }

32. ❏ Change the addEventListener to invoke the named function.


photoDrop.addEventListener( 'drop', fileHandler );

33. ❏ Just below the end of the fileHandler function, locate the instruction thathides the field with ID photo.

$('#photo').hide().removeAttr('required');

34. ❏ Replace the calls to hide and removeAttr with the jQuery method to set up achange event handler for the element. Use fileHandler as the handler.


$('#photo').change( fileHandler );

35. ❏ Inside fileHandler, locate the instruction that retrieves the first file from theevent's dataTransfer.files collection:

var file = e.dataTransfer.files[0];

An input type="file" adds its file(s) to the event's target propertyinstead of its dataTransfer property, so we must modify this assignment tocheck both places.



36. ❏ Change the right side of the assignment to attempt to use the event'starget.files if they exist; otherwise, use the dataTransfer.files. Useonly the first file from whichever collection is available.


var file = (e.target.files||e.dataTransfer.files)[0];

This is a shortcut that uses the "or" operator (||) to determine whichobject is available and then to use its value in one step. It is equivalent to:

var file;if ( !! e.target.files ) file = e.target.files[0];else file = e.dataTransfer.files[0];

37. ❏ Inside of the onload handler, locate the instruction that assigns the loaded filedata (e2.target.result) to the hidden input with ID imageData:

$('#imageData').val(e2.target.result);

38. ❏ Expand this statement into an if/else that clears the #imageData if theinput type="file" is used, or that clears the input upon drag-and-drop.You should also remove the required attribute when drag-and-drop is used,or add it back when the input is used.


(continued)


The entire fileHandler() should now resemble this, with this step in bold:

function fileHandler(e){ dragHandler(e); var file = (e.target.files || e.dataTransfer.files)[0]; if ( file.type == 'image/jpeg' ) { var fr = new FileReader; fr.onload = function(e2) { if ( e.target.files ) { $('#photo').attr('required','required'); $('#imageData').val(''); } else { $('#photo').val('').removeAttr('required'); $('#imageData').val(e2.target.result); } $('#photoThumb').attr('src',e2.target.result); }; fr.readAsDataURL(file); }}

39. ❏ Save your work, then test both input methods in Google Chrome. If you'd like,press <F12> (or use the Tools menu) to open the Developer tools, then clickthe Network button to be certain that the image data is not uploaded twice aspart of the form submission.




We can make the drag-and-drop interface even more user-friendly byproviding a visual clue when a file is dragged over the drop target. To do so,we'll overlay the current image with a new drop target that displays a semi-transparent "checkmark" image in response to a dragover event.

40. ❏ Return to editing C:\2320\dealingtree\add\index.html.

41. ❏ Locate the img element with the id value photoThumb that you previouslyadded to this page:

<img id="photoThumb" src="/images/dropHint.png"/>

Your version might also include an alt attribute.

42. ❏ Immediately before the existing img, insert a new img with id photoDropand src /images/dropCheck.png


<div id="photoArea" class="accessiblyHidden"> <img id="photoDrop" src="/images/dropCheck.png"/> <img id="photoThumb" src="/images/dropHint.png"/></div>


44. ❏ Return to C:\2320\dealingtree\css\page-add.css in the editor.

45. ❏ Review the two styles for the new element:

#photoDrop#photoDrop.DragOver


(continued)


The image is positioned over its siblings within the parent, and will becompletely transparent unless the class name DragOver is added to it, atwhich time it becomes 50 percent opaque.

46. ❏ Return to editing C:\2320\dealingtree\add\dropimage.js.

47. ❏ Locate the statement that removes the class name AccessiblyHiddenfrom the element with id value photoArea:

$('#photoArea').removeClass('AccessiblyHidden');

48. ❏ Before the ending semicolon, chain a call to css() to position the elementrelatively.


$('#photoArea').removeClass('AccessiblyHidden') .css('position','relative');

49. ❏ Locate function dragHandler. Within it, after the call toe.preventDefault(), add a condition that compares the type of the eventto the strings 'dragleave' or 'drop'. If this is a dragleave or 'drop'event, use jQuery to remove class DragOver from the event's target.Otherwise, use jQuery to add the class.

The function should now resemble this, with this step in bold:

function dragHandler(e) { e.preventDefault(); if ( ( e.type == 'dragleave' ) || ( e.type =='drop' ) ) $(e.target).removeClass('DragOver'); else $(e.target).addClass('DragOver'); }

50. ❏ Locate the statement that gets the element with ID photoArea, and changethe argument to get the element with ID photoDrop instead.




var photoDrop = document.getElementById('photoDrop');

51. ❏ Save your work and test the dragover functionality in Google Chrome.

When you drag a file over the drop target, the semi-opaque image shouldappear:


It would be nice if we could test the file type during the dragover event, tobe certain that it is a JPEG image before displaying the checkmark image.Unfortunately, the e.dataTransfer.files collection is empty during thedragover event, so we cannot provide negative feedback until the drop. Still,it would be helpful to tell the user why the image was not added, instead offailing silently!

52. ❏ Within fileHandler(), add an else statement that displays a failure dialogif the user attempts to upload a file that is not of type image/jpeg.


(continued)



if ( file.type == 'image/jpeg' ){ // approximately 17 lines not shown here}else alert('Sorry, only JPEG images are permitted.')




Exchanging Data


Objectives

In this exercise, you can select from four options to develop JavaScript code toexchange data:

a. Send cross-document messages to make links in the help window change thepage in the main window b. Incorporate third-party data from Chirpinator into the "Chirps" page, using CORSand XHR2/XDR c. Update the membership counter dynamically with data pushed from the serverusing WebSockets d. Generate a tag cloud without degrading browser responsiveness, using webworkers

Overview

Chapter 8 presents four different ways that messages can be used by JavaScript toenhance websites. This exercise allows you to implement the technology that is mostinteresting to you. If you do not want to write any JavaScript code right now, you can instead use this time tocomplete the Bonus sections of your favorite earlier exercises, or download and completeSelf-Study Exercise 2.4: Annotating Page Elements with Microdata from your My LearningTree account.

Otherwise, please skip to the beginning of one of the following options:

● Hands-On Exercise 8.1a: Synchronizing Windows With Messages● Hands-On Exercise 8.1b: Incorporating Third-Party Data Using CORS● Hands-On Exercise 8.1c: Processing Server-Pushed Data With WebSockets● Hands-On Exercise 8.1d: Improving Responsiveness With a Web Worker


Hands-On Exercise 8.1a:

Exchanging Data—Synchronizing Windows With Messages


Overview

Our Help menu opens a new window, containing help for each page. In this option, we willsend cross-document messages from the help window to the main window, asking it todisplay the corresponding page.

Part 1: Sending a message to another window

1. ❏ Use any editor to open C:\2320\dealingtree\help\index.html.

This is the source file for the help page.

2. ❏ Notice that the HTML source contains the same header and footer as theother pages on our site.

3. ❏ Within the first section element, find the first anchor (a) element.

What is the value of this element's class attribute? __________________________________________________

4. ❏ Still in the editor, openC:\2320\dealingtree\help\trim-body.js.

This file is loaded by the help page when it opens in a new window. Itremoves the header and footer, adjusts the margins, and disables the links, sothat a user's click does not replace the help page with the target page. We willre-enable the links, using them to change the page in the main window insteadof the help window.

Near the end of the script, what class is added to the links that already havethe class HelpTarget? __________________________________________________

Hands-On Exercise 8.1a:Exchanging Data—Synchronizing Windows With Messages(continued)


5. ❏ Edit the empty file C:\2320\dealingtree\help\message-with-main.js.

We will place our code in this file, which is also loaded by the help page.

6. ❏ Pass a function to jQuery to execute when the HTML has loaded.


$(function(){});

7. ❏ Within the function, create an if statement that uses a double negative to testwhether the window supports addEventListener, and use Modernizr totest whether the browser supports postmessage


if ( ( !! window.addEventListener ) && Modernizr.postmessage ){}

8. ❏ Within the block, create a variable okHost that combines thewindow.location's protocol and host values into a URL string.


var okHost = window.location.protocol + '//' + window.location.host;

9. ❏ Next, use jQuery to select all anchors with the class HelpTarget, and removethe class name Deactivated from these elements.


$('a.HelpTarget').removeClass('Deactivated')

Hands-On Exercise 8.1a:Exchanging Data—Synchronizing Windows With Messages

(continued)


10. ❏ At the end of the previous statement, add a click handler.


$('a.HelpTarget').removeClass('Deactivated') .click( function(e) { } );

11. ❏ Within the handler, post a message to the window that opened the helpwindow. Pass the href property of the click event's target, but only send themessage if the window is from the approved okHost


$(function(){ if ( ( !! window.addEventListener ) && Modernizr.postmessage ) { var okHost = window.location.protocol + '//' + window.location.host; $('a.HelpTarget').removeClass('Deactivated').click( function(e) { window.opener.postMessage(e.target.href,okHost); } ); }});


Part 2: Receiving a message from another window

13. ❏ After saving your work, copy the entire contents of message-with-main.jsto the clipboard.

14. ❏ Edit the empty file C:\2320\dealingtree\js\message-with-help.js.



This file is loaded by every page on our website except the help page.We will add code here to receive a message from the help window, and changethe current page to the requested URL.

15. ❏ Paste the contents of the clipboard into this file.

Much of the code in this file is the same as the previous file!

16. ❏ Delete the following from the pasted code:

$('a.HelpTarget').removeClass('Deactivated').click(

17. ❏ In place of the deleted code, set up a listener for window message events.


window.addEventListener( 'message',

18. ❏ Replace the body of the event listener function with an if statement thatcompares the event's origin to the approved okHost. If they are the same,then load the window with the URL from the message data


$(function(){ if ( ( !! window.addEventListener ) && Modernizr.postmessage ) { var okHost = window.location.protocol + '//' + window.location.host; window.addEventListener( 'message', function(e) { if ( e.origin == okHost ) window.location.href = e.data; } ); }});

Hands-On Exercise 8.1a:Exchanging Data—Synchronizing Windows With Messages

(continued)



20. ❏ After saving your work, close all of your open browser windows, then launchany browser that supports cross-window messaging and clear its cache.

If you're not sure how to do this, ask your instructor.

Warning! Don't just reload the page and its resources! Close all ofyour open browser windows, then launch the browser again and clearits cache. If you're not sure how to do this, ask your instructor. We mustclear the cache because we have updated the resources for multiplewindows.

21. ❏ Visit http://dealingtree/

22. ❏ In the navigation menu, click Help.

23. ❏ Click a few links in the help window to display the requested page in the mainwindow.



Congratulations! You have posted messages between windows tocoordinate their content.



24. ❏ Begin work on another Ex. 8.1 option.


Hands-On Exercise 8.1b:

Exchanging Data—Including Third-Party Data Using CORS


Overview

Chirpinator is an imaginary social-networking website (www.chirpinator.com) thatprovides a microblogging service, which enables its users to submit and read shortmessages called chirps. Users can subscribe to messages posted by other users, usingthe website or SMS text messages. Like other microblogging services (such as Twitter), Chirpinator provides an interface tosearch chirps for keywords and receive a list of matches in the Atom Syndication Format,which is an XML vocabulary. DealingTree would like to use this report to share what usersare saying about the site with its visitors. In this option, we will make a cross-domain request to the Chirpinator search service andadd the results to our Chirps page.

Part 1: Analyzing our supporting files

1. ❏ Use any editor to open C:\2320\chirpinator\search\index.xml.

This is a static version of the Atom XML response from the searchinterface. We will use an existing function to build a string of HTML from theentry elements. Briefly examine the format of this file.

2. ❏ Use the editor to open C:\2320\dealingtree\chirps\chirps-to-html5.js.

chirpsToHtml5()is passed a collection of entry elements (called aNodeList in DOM terminology). The function loops through the entries in thelist and generates a string of HTML5 code that can be inserted into our Chirpspage.

3. ❏ Use the editor to open C:\2320\dealingtree\chirps\initialize-chirps-page.js.

Hands-On Exercise 8.1b:Exchanging Data—Including Third-Party Data Using CORS(continued)


This script detects whether the browser supports Cross-OriginResource Sharing with either an XDomainRequest object (IE8/9), or anXMLHttpRequest object that allows cross-domain requests. If the browsersupports CORS, then chirps-to-html5.js is loaded, as well as chirps-from-cors.js, which we will create. If the browser does not support CORS,then chirps-referral.js is executed instead.

4. ❏ Use the editor to open C:\2320\dealingtree\chirps\chirps-referral.js.

This script inserts a message into the page, directing the user toChirpinator because their browser does not support CORS.

Part 2: Connecting to a third-party server

5. ❏ Edit the empty fileC:\2320\dealingtree\chirps\chirps-from-cors.js.



$(function(){});

7. ❏ Within the function, create a new XMLHttpRequest object and assign it to avariable named cors


var cors = new XMLHttpRequest();

8. ❏ Create an if statement to test whether the object has a withCredentials property. If it does not, then create a new XDomainRequest object instead.

Hands-On Exercise 8.1b:Exchanging Data—Including Third-Party Data Using CORS

(continued)



if ( ! ( 'withCredentials' in cors ) ) cors = new XDomainRequest();

initialize-chirps-page.js already determined that the browsersupports CORS, but it didn't tell us which type of object we need!

9. ❏ Use the object to open a connection to the chirpinator search URL,using the HTTP GET method.


cors.open( 'GET', 'http://chirpinator/search/?q=dealingtree');

10. ❏ Create an onload handler that displays the cors object's responseTextvalue in an alert() dialog.


cors.onload = function() { alert( cors.responseText ); };

11. ❏ Send the search request to the third-party server.




$(function(){ var cors = new XMLHttpRequest(); if ( ! ( 'withCredentials' in cors ) ) cors = new XDomainRequest(); cors.open( 'GET', 'http://chirpinator/search/?q=dealingtree'); cors.onload = function() { alert(cors.responseText); }; cors.send();});


13. ❏ After saving your work, use any CORS-enabled browser to visit http://dealingtree/

14. ❏ In the navigation menu, click Chirps.

A few seconds after the page loads, a very large dialog should appear,containing the contents of the Atom XML document from the Chirpinator site:


(continued)


If the dialog does not appear, then reload the page, and all of itsresources. The exact size, shape, and layout of the dialog will depend on thebrowser.

15. ❏ Press the <Enter> key to dismiss the dialog.

Part 3: Processing the XML response

16. ❏ Return to editing chirps-from-cors.js.

17. ❏ Remove the call to alert().

18. ❏ In place of the alert(), assign the value from the cors object'sresponseXML property to a variable named dom




var dom = cors.responseXML;

If cors is an XDomainRequest object, responseXML will not be a DOMobject. In that case, we need to create one from the responseText.

19. ❏ After the assignment (and still within the handler function), add an if block thattests for a missing dom object.


if ( ! dom ){}

20. ❏ Within the conditional block, test whether the window has a DOMParser.If it does, then use a new DOMParser to parse the cors.responseTextstring into our dom object. (Pass the data and MIME type 'text/xml' to theparseFromString() method.)


if ( window.DOMParser ) dom = (new DOMParser()).parseFromString( cors.responseText, 'text/xml' );

Internet Explorer 9b and later support the native DOMParser objectto create DOM objects. Earlier versions require the ActiveX XMLDOM objectinstead.

21. ❏ Immediately after the previous statement (and still inside the earlier conditionalblock), add an else block to use the Microsoft.XMLDOM ActiveX object'sloadXML method to asynchronously create the dom instead.


(continued)


All of the changes for Part 3 of this option should now resemble this, with this step inbold:

var dom = cors.responseXML;if ( ! dom ){ if ( window.DOMParser ) dom = (new DOMParser()).parseFromString( cors.responseText, 'text/xml' ); else { dom = new ActiveXObject('Microsoft.XMLDOM'); dom.async = false; dom.loadXML(cors.responseText); }}

22. ❏ After all of the preceding code (including the closing curly brackets), pass thedom object's entry elements to the chirpsToHtml5() function. Append theresults to the innerHTML of the page element with the ID chirps



The entire onload handler should now resemble this, with this step in bold:

cors.onload = function() { var dom = cors.responseXML; if ( ! dom ) { if ( window.DOMParser ) dom = (new DOMParser()).parseFromString( cors.responseText, 'text/xml' ); else { dom=new ActiveXObject('Microsoft.XMLDOM'); dom.async = false; dom.loadXML(cors.responseText); } } document.getElementById("chirps").innerHTML += chirpsToHtml5( dom.getElementsByTagName('entry') ); };



The "chirps" should appear on the page:


(continued)


Congratulations! You have communicated with a third-party serverusing Cross-Origin Resource Sharing and the XHR2/XDR objects.






Hands-On Exercise 8.1c:

Exchanging Data—Processing Server-Pushed Data With WebSockets


Overview

The DealingTree home page displays the number of customers in an aside element.In this option, we will update the member count as new statistics are received from theserver, and examine the server-side code to generate the messages using C# and PHP.

Part 1: Communicating with the server

1. ❏ Visit http://dealingtree/

2. ❏ Right-click the page and choose the menu option to view the source code.

3. ❏ In the source code, locate the strong element within the aside element,containing the static membership count (3,000,000).

What is the value of the id attribute of this element? __________________________________________________

4. ❏ Edit the empty fileC:\2320\dealingtree\websockets-client.js.



$(function(){});

6. ❏ Within the function, create a variable named memberCount and assign it to thestrong element, which you can retrieve from the document by its ID.


var memberCount = document.getElementById('memberCount');

Hands-On Exercise 8.1c:Exchanging Data—Processing Server-Pushed Data With WebSockets(continued)


7. ❏ After the assignment, create a new WebSocket to the server at ws://done-deal/websockets-server.ashx, and assign it to a variable named ws


var ws = new WebSocket( 'ws://done-deal/websockets-server.ashx');

Because our computer needs only one WebSockets server, we areconnecting to the one for the completed version of our website.

8. ❏ Add a listener for open events on the WebSocket. When the connection opens,send the message 'hello' to the server.


ws.addEventListener('open', function(e) { ws.send('hello'); });

9. ❏ Add another listener, this time for message events from the WebSocket. Whena message is received, set the innerHTML of memberCount to the data fromthe message event.

Hands-On Exercise 8.1c:Exchanging Data—Processing Server-Pushed Data With WebSockets

(continued)



$(function(){ var memberCount = document.getElementById('memberCount'); var ws = new WebSocket( 'ws://done-deal/websockets-server.ashx'); ws.addEventListener('open', function(e) { ws.send('hello'); }); ws.addEventListener('message', function (e) { memberCount.innerHTML = e.data; });});


11. ❏ Return to the browser and reload http://dealingtree/ and all of itsresources.

12. ❏ Wait a few seconds for the client to connect to the server, and then check themembership counter near the upper right corner of the home page. The valueshould be greater than 3,000,000:

Hands-On Exercise 8.1c:Exchanging Data—Processing Server-Pushed Data With WebSockets(continued)


13. ❏ Wait a few more seconds and verify that the membership counter continues toincrease, at least once every 10 seconds.

Part 2: Examining the server code

14. ❏ Use any editor to open C:\2320\done-deal\websockets-server.ashx.

This is a C# script that uses the System.Web.WebSockets namespaceintroduced in ASP.NET version 4.5. The objects provided by this namespacemake it easy to create server-side WebSockets code in an ASP.NETenvironment.

15. ❏ Examine the C# code and try to understand what it does.

If you create your own ASP.NET 4.5+ WebSockets server, you can baseit on the code in this file!

16. ❏ Use any editor to openC:\2320\done-deal\websockets-server.php.

This is a PHP script that uses traditional TCP sockets to communicatevia WebSockets. Because traditional sockets do not provide the high-levelfunctionality of System.Web.WebSockets, the code is much more complex.

17. ❏ Examine the PHP code and try to understand what it does.

If you create your own PHP WebSockets server, you can base it on thecode in this file!

18. ❏ Compare the code in the PHP script to the code in the C# script.

Hands-On Exercise 8.1c:Exchanging Data—Processing Server-Pushed Data With WebSockets

(continued)


Congratulations! You have used WebSockets to display real-timemembership statistics on the home page in response to messages fromthe server.






Hands-On Exercise 8.1d:

Exchanging Data—Improving Responsiveness With a Web Worker


Overview

In this option, we will invoke a CPU-intensive tag cloud to our home page anddemonstrate how it affects the responsiveness of our site. Then, we will move the CPU-intensive code into an asynchronous process using web workers that communicate withthe main window using messages.

Part 1: Creating the tag cloud

1. ❏ Use any editor to openC:/2320/dealingtree/cloud-data.txt.

We will use the data in this file to build our tag cloud.

2. ❏ Use the editor to openC:/2320/dealingtree/tags-builder.js.

tagsBuilder()counts the words in the data file specified by url, andcreates a JavaScript object containing the most popular words. The resultingobject is then passed to the specified resultHandler function. This is aCPU-intensive process.

3. ❏ Use the editor to openC:/2320/dealingtree/tags-data-to-html.js.

tagsDataToHtml() is our result handler function. It converts the datagenerated by tagsBuilder() into a string of HTML, which it then adds to thehome page.

4. ❏ Edit the empty file C:/2320/dealingtree/tags-launcher.js.



$(function(){});

Hands-On Exercise 8.1d:Exchanging Data—Improving Responsiveness With a Web Worker(continued)


6. ❏ Within the function, pass the URL /cloud-data.txt and the result handlerfunction tagsDataToHtml to tagsBuilder()


$(function(){ tagsBuilder('/cloud-data.txt',tagsDataToHtml);});


8. ❏ Visit http://dealingtree/ with any browser that supports web workers,and maximize the browser window.

9. ❏ Refresh the home page and its resources, then attempt to scroll down the pageto examine the tag cloud, which will be added below the Your Deals article

As the JavaScript executes, the browser should temporarily becomeunresponsive; when the code finishes, the tag cloud should appear:

Hands-On Exercise 8.1d:Exchanging Data—Improving Responsiveness With a Web Worker

(continued)


Part 2: Refactoring code to use a web worker

10. ❏ Return to editing tags-launcher.js and remove the call totagsBuilder(), leaving the empty function.

11. ❏ Within the function, create a variable named worker and assign it to anew Worker that executes the code in tags-worker.js


var worker = new Worker('tags-worker.js');

12. ❏ After the assignment, post a message to the worker containing the URL of thedata file /cloud-data.txt




$(function(){ var worker = new Worker('tags-worker.js'); worker.postMessage('/cloud-data.txt');});


14. ❏ Edit the empty file C:/2320/dealingtree/tags-worker.js.

15. ❏ In this file, import the tags-builder.js script.


importScripts('tags-builder.js');

16. ❏ Next, add a listener for message events. When a message is received, passthe data file URL from the event's data, and the tagsDataToHtml resulthandler function, to tagsBuilder


addEventListener( 'message', function(e) { tagsBuilder( e.data, tagsDataToHtml ); } );

But wait—tagsDataToHtml adds the tag cloud to the home page, butthis web worker is not permitted to modify the document! Instead, we'll have togive tagsBuilder a new result handler function that passes the results backto the main window.

17. ❏ Replace the reference to tagsDataToHtml with an anonymous inlinefunction that takes a single argument obj (the data from tagsBuilder)and posts it back to the main window.

Hands-On Exercise 8.1d:Exchanging Data—Improving Responsiveness With a Web Worker

(continued)



importScripts('tags-builder.js');addEventListener( 'message', function(e) { tagsBuilder( e.data, function(obj) { postMessage( obj ); } ); } );


19. ❏ After saving tags-worker.js, return to tags-launcher.js.

We need to add code to receive the data from the worker and pass it totagsDataToHtml.

20. ❏ Between the assignment to worker and the call to postMessage, insert alistener for message events from the worker. When a message is received,pass the event's data to tagsDataToHtml()


$(function(){ var worker = new Worker('tags-worker.js'); worker.addEventListener( 'message', function(e) { tagsDataToHtml( e.data ); } ); worker.postMessage('/cloud-data.txt');});


22. ❏ Refresh the home page and its resources, then scroll down the page toexamine the tag cloud.



As the JavaScript executes in the worker, the browser should remainresponsive even before the tag cloud appears!

Congratulations! You have improved browser responsiveness byexchanging messages with a web worker that executes CPU-intensivecode in a concurrent process.






Dynamic Charting With Canvas


Objectives


● Draw lines and rectangles on a canvas● Add text and images to a canvas● Create a graph depicting user savings from stored data

Overview

In this exercise, you will use the new canvas element to create a chart from data inlocalStorage. For each deal in the inventory, you will create a two-color bardepicting the cost/value ratio. You will also create a line that shows overall savings. Theresult should resemble the following, but results will vary depending upon purchases:

Part 1: Preparing the canvas

Warning! If you did not finish Exercise 5.3, use Exercise Manager tosolve it before you begin this exercise!

1. ❏ Visit http://dealingtree/storage-clear.html

Hands-On Exercise 9.1:Dynamic Charting With Canvas(continued)


This will clear our purchases from Web Storage, so we can test the initialstate of our chart.

2. ❏ Visit http://dealingtree/ in the same browser.

3. ❏ Verify that no deals appear under Your Deals on the right.

If previous purchases are still there, close all browser windows, launchthe browser again, clear its cache, and return to Step 1.

4. ❏ Click the Savings link in the navigation menu.

We will add our canvas element to this page.

5. ❏ Edit C:\2320\dealingtree\savings\index.html

This is the source file for the savings page.

6. ❏ Inside the article, locate:<div class="SubTitle1">Here's a summary. . .</div>

7. ❏ Insert a new figure between the closing </div> and </article>. Withinthe figure, create a new canvas (with id="savings") that is 350 pixels highand 700 pixels wide.


<figure> <canvas id="savings" height="350" width="700"> </canvas></figure>

8. ❏ After the canvas element (but still inside figure), create a new figcaptionelement with an appropriate caption.

Hands-On Exercise 9.1:Dynamic Charting With Canvas

(continued)



<article> <h1>Track Your Savings</h1> <div class="SubTitle1">Here's a summary of the valueof your deals!</div> <figure> <canvas id="savings" height="350" width="700"> </canvas> <figcaption> Relative Price and Value per Deal, and Overall Savings </figcaption> </figure></article>

9. ❏ Save your work, then return to the browser and refresh the page.

The height of the article should increase to accommodate the figure(with the gray background) and canvas, and the caption should appear below:



10. ❏ Edit C:\2320\dealingtree\savings\savings-canvas.js.

This is the file to draw on the canvas. Calculating the values for the chartis time-consuming, so the tedious steps have already been completed. Youonly have to add the calls to the Canvas API.

11. ❏ Near line 3, locate the following comment:

// EX 9.1 PART 1:// Get the context and draw the blank canvas

12. ❏ Immediately after the comment, use jQuery to assign the canvas to a variablenamed $canvas, retrieved by its ID.


var $canvas = $('#savings');

13. ❏ Get a two-dimensional context from the canvas.


var context = $canvas.getContext('2d');

14. ❏ Initialize the canvas by filling it with an off-white background.

Hint...

jQuery's width() and height() methods return the size of an element inpixels.


context.fillStyle='#F7F7F7';context.fillRect( 0, 0, $canvas.width(), $canvas.height() );



(continued)


16. ❏ Return to the browser and refresh the Savings page, making sure to reload allof its resources.

A blank canvas should appear:

Part 2: Adding text to the canvas

Now we will add an initial message to our canvas.

17. ❏ Return to editing savings-canvas.js.

18. ❏ Immediately after the code that you added, read the comments and code forthe entire if block (approximately lines 11–94).

This section provides a fallback for browsers that do not support canvastext. In addition to the fillText() method, it also overrides drawImage(),which is buggy in the polyfill provided by Webshim.



19. ❏ Immediately after the canvas text polyfill (near line 101), locate the section thatgets the inventory from Web Storage and tests for a meaningful value:

var inv = localStorage.getItem('inventory');if ( ! inv ){ // EX 9.1 PART 2: // Provide a placeholder message if there are no deals}

Here, we will provide a hint that a user must purchase a deal before theycan see their savings.

20. ❏ Immediately after the comment, set the context to use a 32px bold sans-serif font


context.font = '32px bold sans-serif';

21. ❏ Center any text horizontally around any x-axis.


context.textAlign = 'center';

22. ❏ Center any text vertically around any y-axis.


context.textBaseline = 'middle';

23. ❏ Set the fillStyle to dark gray color #252525


context.fillStyle='#252525';

24. ❏ Call fillText() to display a suitable message at the center of the canvas.


(continued)



context.font = '32px bold sans-serif';context.textAlign = 'center';context.textBaseline = 'middle';context.fillStyle='#252525';context.fillText( 'Buy your first deal,' + ' and watch your savings grow!', $canvas.width()/2, $canvas.height()/2 );


26. ❏ Return to the browser and refresh the Savings page, making sure to reload allof its resources.

Your message should appear:

Part 3: Drawing the axis lines

Now we will add a polyline to our canvas, vertically from the top of thegraph to its origin, then right along the horizontal axis.




28. ❏ Immediately after your latest additions, read the comments and code from thebeginning of the else block (near line 115) to the following comment (near line141):

// EX 9.1 PART 3:// Draw the axis lines

This section initializes the variables we'll need to calculate the sizes andplacement of the bars and lines on our chart (base is the y-position of the baseline, len is the number of purchases, xStep is the distance between twodeals, and xHalf is half of xStep.

29. ❏ Immediately after the comment, set the strokeStyle to our dark gray color#252525


context.strokeStyle='#252525';

30. ❏ Move the context to the beginning of our polyline at coordinates(xHalf,10)


(continued)



context.moveTo(xHalf,10);

31. ❏ Draw the first line segment to the origin at (xHalf,base)


context.lineTo(xHalf,base);

32. ❏ Continue the line to (xStep*(len+1)+xHalf,base)


context.lineTo(xStep*(len+1)+xHalf,base);


context.stroke() already appears near the end of the file.

34. ❏ Return to the browser and click Home to return to the home page.

Remember, our chart will not appear unless we have a few deals in ourinventory!

35. ❏ Select a market (or allow the browser to select the nearest location), thenpurchase at least three deals by clicking their Buy buttons.

36. ❏ Click Savings to display the canvas:

The horizontal and vertical axis lines should appear:



You might have to refresh the page and its resources.

Part 4: Adding each deal to the chart

Now we will add bars for the price and value of each deal, and anotherpolyline depicting the accumulated savings.


38. ❏ Immediately after your latest additions, read the comments and code until youreach the following comment (near line 166):

// EX 9.1 PART 4:// Add each deal to the chart

Our total-savings line will begin at (0,0) on our chart, which is actually atpixel position (xHalf,base) on our canvas. From there, we move to a pointthat represents the total savings (value minus price) for the first purchase. Thenext point adds the savings for the second purchase, and so on. The code tomove to the origin already appears near line 155.


(continued)


39. ❏ Immediately after the comment, draw a line segment to our accumulatedsavings point at (x,y)


context.lineTo( x, y );

40. ❏ Set a variable named high to the height of the current deal's value bar.

Hint...

Multiply yStep times inv[key].value


var high = yStep * inv[key].value;

41. ❏ Set the fillStyle to our red color #E33


context.fillStyle='#E33';

42. ❏ Fill a rectangle starting at position (x-(xStep/4),base-high),xHalf pixels wide and high pixels tall.


context.fillRect( x-(xStep/4), base-high, xHalf, high );

43. ❏ After the code to add the red bar, add the code to create a blue (#449) bar forthe price of the deal.

Hint...

The blue bar is slightly thinner than the red one, using price insteadof value.




high = yStep * inv[key].price;context.fillStyle='#449';context.fillRect( x-(xStep/4)+4, base-high, xHalf-8, high );

Be careful if you copy the code from the red bar!


45. ❏ Return to the browser and refresh your page, making certain to reload allresources.

The results should resemble this, but the bars and line will be differentheights, depending on your purchases:

Although the height of the savings line will always increase, each barmight be taller or shorter than the one to its left, depending on the value of therespective deal.


(continued)


Part 5: Adding external images to a canvas

Now we will identify each deal by adding the relevant image beneath each pairof bars.


47. ❏ Soon after your latest additions, locate the following comment (near line 181):

// EX 9.1 PART 5:// Add each deal to the chart

48. ❏ Immediately after the comment, define variable img as a new Image


var img = new Image();

49. ❏ Create an onload handler for img as an empty function.


img.onload = function() { };

50. ❏ Inside the function body, draw the img at position (picX,picY), scaled towidth picW and height picH


context.drawImage( img, picX, picY, picW, picH );

51. ❏ After the closing curly bracket of the onload handler, load the image from theURL '/images/deal/'+key+'/400x200.jpg'




var img = new Image();img.onload = function() { context.drawImage(img,picX,picY,picW,picH); };img.src = '/images/deal/'+key+'/400x200.jpg';



The results should resemble this, but the bars, line, and images will bedifferent, depending on your purchases:

Congratulations! You have created a dynamic chart with the HTML5Canvas API.



(continued)



Our savings chart lacks annotations to explain the meaning of the lines andbars. Let's add a legend to the chart.

54. ❏ Return to editingC:\2320\dealingtree\savings\savings-canvas.js.

55. ❏ Near the end of the file, locate the following comment:

// EX 9.1 BONUS:// Add the legend

56. ❏ Immediately after the comment, add the following code to create the graphicsfor our legend (you do not have to type the comments!):

context.fillStyle='#FF6'; // legend backgroundcontext.fillRect( xHalf+8, 10, 128, 64 );context.moveTo( xHalf+16, 22 ); // linecontext.lineTo( xHalf+32, 22 );context.fillStyle='#E33'; // legend value squarecontext.fillRect( xHalf+16, 32, 16, 16 );context.fillStyle='#449'; // legend price squarecontext.fillRect( xHalf+16, 52, 16, 16 );

57. ❏ After the previous code, add labels to the legend:

context.font = '16px sans-serif';context.textBaseline = 'middle';context.fillStyle = '#252525';context.fillText('total savings',xHalf+36,22);context.fillText('deal value',xHalf+36,42);context.fillText('deal price',xHalf+36,62);





The legend should appear near the top left of the chart:



Upgrading Site Graphics to SVG


Objectives


● Replace PNG images with smaller SVG files● Use Modernizr feature-testing classes to selectively apply CSS styles● Create a simple Scalable Vector Graphics image

Overview

Raster-based images, such as JPEG, GIF, and PNG files, are often larger than vector-based graphics because they must account for each pixel in the image. In this exercise,we will replace PNGs with SVGs where possible.

Part 1: Comparing PNG to SVG

1. ❏ Visit http://dealingtree/ and select Choose Your Location! from thedrop-down selector.

When a market is not selected, a special article with ID welcomeappears below the market-selection drop-down. The background for thisarticle is named tree-graphic.png. The arrow that points from theparagraph to the drop-down is named arrow-up.png:

Hands-On Exercise 9.2:Upgrading Site Graphics to SVG(continued)


2. ❏ Minimize (but do not close) the browser window.

3. ❏ Double-click the dealingtree shortcut on the desktop to open C:\2320\dealingtree.

4. ❏ Double-click the images folder.

Hands-On Exercise 9.2:Upgrading Site Graphics to SVG

(continued)


5. ❏ If necessary, click View, then Details:

6. ❏ Compare the file size of tree-graphic.png to that oftree-graphic.svg



tree-graphic.png is more than 15 times larger than thecorresponding tree-graphic.svg! Remember, larger image files take longerto download and consume more resources.

7. ❏ Right-click the icon for the PNG version (tree-graphic.png) and selectEdit with Notepad++ from the pop-up menu:


(continued)


Because this file contains binary data, it cannot be edited with a texteditor; image-editing software is required.

8. ❏ Close the editor.

9. ❏ Right-click the icon for the SVG file (tree-graphic.svg) and select Editwith Notepad++ from the pop-up menu:



Because SVG is an XML vocabulary, it can be edited with text editors aswell as image-editing software. This image is created by sizing and positioningfont glyphs!

10. ❏ Close the editor.

Part 2: Creating a simple SVG image

We already have a replacement for tree-graphic.png, but we do nothave an SVG counterpart to arrow-up.png. Although it is easier to create acomplex image using software such as Inkscape or Adobe Illustrator, we canuse a text editor to create this simple SVG image.

11. ❏ Edit the empty fileC:\2320\dealingtree\images\arrow-up.svg.

12. ❏ Enter an XML declaration as the very first line of the new file.


(continued)



<?xml version="1.0"?>

The opening less-than sign (<) must be the very first character in the file.This declaration identifies our SVG file as an XML version 1.0 vocabulary.

13. ❏ Below the declaration, add the svg root element, which identifies the SVGnamespace and version, the height and width of the image (250x100),and the base fill and stroke styles (none and#449, respectively).


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="250" width="100" style="fill:none;stroke:#449"></svg>

14. ❏ Between the opening and closing svg tags, insert an empty path element tocreate the pointer at the tip of our arrow.


<path />

15. ❏ Add a style attribute to the path, using our base stroke color (#449) asthe fill style.


<path style="fill:#449" />

16. ❏ Add a d attribute to move (M) to position (x=1, y=25), draw a vertical (v)line 25 pixels up (-), then continue horizontally (h) 25 pixels to the right (+).


<path style="fill:#449" d="M1,25 v-25 h+25" />



17. ❏ After the first path, add another empty path to create the curved line that isthe shaft of our arrow.


<path />

18. ❏ Add a style attribute to set a 6 pixel stroke-width


<path style="stroke-width:6" />

19. ❏ Add a d attribute to move to position (12,12), curve (C) to (96,124), continue to(96,125), then end at (4,254).


<path style="stroke-width:6" d="M12,12 C96,124 96,1254,254" />


The entire file should resemble the following:

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="250" width="100" style="fill:none;stroke:#449"> <path style="fill:#449" d="M1,25 v-25 h+25" /> <path style="stroke-width:6" d="M12,12 C96,124 96,125 4,254" /></svg>

21. ❏ Return to your browser and press <Ctrl><T> to open a new tab.

22. ❏ In the new tab, visit http://dealingtree/images/arrow-up.svg todisplay your image:


(continued)


Part 3: Selectively applying SVG images

Now we can replace our PNG images with the SVG versions—but only ifthe browser supports SVG!

23. ❏ Edit the empty fileC:\2320\dealingtree\css\svg-backgrounds.css.

24. ❏ In this file, if Modernizr says that the browser supports svg, change thebackground-image for #welcome to /images/tree-graphic.svg


.svg #welcome{ background-image: url(/images/tree-graphic.svg);}

25. ❏ Next, if Modernizr says that the browser supports svg, change thebackground-image for the h2 within #welcome to /images/arrow-up.svg




.svg #welcome h2{ background-image: url(/images/arrow-up.svg);}


27. ❏ Return to your browser and reload http://dealingtree/ and all of itsresources.

Visually, it might be difficult to distinguish between the PNG and SVGversions of these images; you might notice that the edges of the SVG shapesare a bit smoother. In the second bonus section of this exercise, you can usethe developer tools to determine which image is actually used.

Congratulations! You have replaced PNG images with smallerScalable Vector Graphics.



In the first half of this chapter, we created a chart dynamically usingcanvas. Now we will create the same image using SVG.

28. ❏ Use an editor to openC:\2320\dealingtree\savings\savings-svg.js.

29. ❏ Locate the makeElem function near the beginning of the file.


(continued)


This function uses DOM commands to generate an SVG element fromthe arguments that are passed. The first parameter is the name of the SVGelement. The second parameter is an object literal. The properties and valueswithin the object become attributes of the SVG element.

Warning! If you did not finish Exercise 5.3, 9.1, or 9.2, use ExerciseManager to solve them now!

30. ❏ Leave this file opened in the editor, but also openC:\2320\dealingtree\savings\savings-canvas.js.

31. ❏ Compare the calls to makeElem in the SVG version against the contextmethods in the canvas version.

32. ❏ At the end of the SVG version, notice the command to replace the canvaselement in the HTML page with the svg element.

In most browsers, you cannot add the SVG to the page until it iscomplete, because later changes will not be displayed. Here, we add theelement as the last step.

33. ❏ Edit C:\2320\dealingtree\savings\initialize-savings-page.js.

34. ❏ Modify the argument to webshim.polyfill() so canvas is not polyfilled ifModernizr says that the browser supports inline SVG.


webshim.polyfill( Modernizr.inlinesvg ? 'json-storage' : 'canvas json-storage' );

35. ❏ Modify the Modernizr.load command to use savings-svg.js if thebrowser supports inline SVG.




Modernizr.load( { test: Modernizr.inlinesvg, yep: 'savings-svg.js', nope: 'savings-canvas.js' } );


37. ❏ Return to the browser and click the Savings menu item to visit http://dealingtree/savings/. Reload the page and all of its resources to be sureyou're loading the SVG version.

The chart should be nearly identical; use the developer tools to verify thatthe canvas has been replaced.


38. ❏ Use the browser's debugger to inspect the CSS properties of the home page,and verify that the SVG files are used as the background images.

39. ❏ Visit http://lynn.ru/examples/svg/en.html for another technique toprovide bitmap fallbacks for SVG images.

40. ❏ Visit http://code.google.com/p/svg-edit/ to create an SVG image fileusing a GUI interface (svg-edit is a complete vector graphics editor that runsentirely in the browser, using svg and canvas elements)!



Promoting Website Features With Video


Objectives


● Add HTML5 video to a website● Encode video in Ogg, WebM, and MP4 for the web● Improve accessibility with WebVTT text● Polyfill video and text support in legacy browsers

Overview

Our demo video only works in browsers with the Adobe Flash plug-in. In this exercise, wewill add HTML5 video and use Firefogg and HandBrake to convert our video to additionalformats. We will also add subtitles to the video and leverage Webshims Lib for legacysupport.

Part 1: Adding HTML5 video support

1. ❏ Use any browser to visit http://dealingtree/demo/

If Flash Player is installed, an image should appear. This "poster" is aplaceholder for the video.

2. ❏ Click the play button (a black right-pointing triangle in the center of the image)to play the first few seconds of the video.

Hands-On Exercise 10.1:Promoting Website Features With Video(continued)


You don't have to play the entire video; simply verify that the browseris able to display it. The video was created using a screen-recording programcalled Camtasia Studio, which saves the video as MP4 and generates a Flashcontroller to display it in a web page.

3. ❏ Edit C:\2320\dealingtree\demo\index.html.

The HTML to include the video was generated by Camtasia Studio andpasted into this HTML document.

4. ❏ Replace the object with a video element, providing controls for the user,specifying the width (768) and height (432) both as attributes and CSSstyles, and using demo.png as the poster

Hands-On Exercise 10.1:Promoting Website Features With Video

(continued)



<section class="MediaContainer"> <video controls="controls" height="432" poster="demo.png" width="768" style="height:432px;width:768px"> </video></section>

5. ❏ Within the video, specify source file demo.mp4


<source src="demo.mp4" type="video/mp4"/>

6. ❏ Save your work. Leave the editor open; we will return to it in Part 3 of thisexercise.

7. ❏ Test your work in every available browser.

Which browser(s) can play the video? __________________________________________________ Which browser(s) do not play the video? Is this what you expected? Why (orwhy not)? __________________________________________________

Remember, a browser must support both the video element and theprovided MP4 format.



Part 2: Converting video to additional formats

Now we will use Firefogg to convert the original video to Ogg and WebMformats, so that we can provide those alternatives to browsers that do notsupport MP4. Although we already have an MP4 video, will also practice usingHandBrake to convert a Windows Media video to MP4 format, since you mightneed to create an MP4 video for your own sites.

Warning! The Firefogg interface changes frequently, so it mightnot exactly match the following screenshots. If not, follow the text of theinstructions to determine what action to take. If you have any questions,ask your instructor.

8. ❏ Use Firefox to visit http://firefogg.org

The Firefogg plug-in has already been added to Firefox, but it is launchedby visiting the project home page.

9. ❏ Click Make web video.

10. ❏ On the Make Web Video page, click Select File and select C:\2320\dealingtree\demo\demo.mp4.


(continued)


After a few seconds, the Options page should appear:



11. ❏ Click Advanced Options; then select the following options: Format Ogg (Theora/Vorbis)Video (checked)

Size 1280 x 720

Bitrate 600

Quality (under Video) 9

Audio (checked)

Quality (under Audio) 5.0


(continued)


Our video resolution is 1280 x 720 for better results in full-screen mode.When converting your own files, take the time to try different settings andcompare the results. Higher quality almost always results in larger file sizes,which affects download speed. Try to find an acceptable balance betweenquality and file size.

12. ❏ Click Encode. A "Save video as" dialog should appear. Save the video as C:\2320\dealingtree\demo\demo.ogv

An Encoding page should appear:

Firefogg should only take a few minutes to convert our short video toOgg format. If it does not finish after four or five minutes, you can cancel theencoding and copy the solution from C:\2320\done-deal\demo to savetime. If Firefogg reports that the conversion failed after reaching 99.99%completion, the output file might have been successfully created. In othercases, the conversion will work on a subsequent attempt.

If the conversion is reported successful, the Done page should appear,with the resulting video embedded:



Now that we've created the Ogg version of the video, let's also create aWebM version.

13. ❏ Click Encode another file (identified above). If the encoding failed after99.99% completion, press the Back button and click Make Web Video asbefore.

14. ❏ On the Make Web Video page, again click Select file, and select demo.mp4.


(continued)


15. ❏ On the Options page, again click Advanced Options; then select the followingencoding options: Format WebM (VP8/Vorbis)Video (checked)

Size 1280 x 780

Bitrate 600

Quality (under Video) 9

Audio (checked)

Quality (under Audio) 5.0

All options other than Format remain the same.

16. ❏ Click Encode. A "Save video as" dialog should appear. Save the video as C:\2320\dealingtree\demo\demo.webm

Again, if the video is not encoded after a few minutes, you can cancel theencoding and simply copy the solution from C:\2320\done-deal\demo tosave time.

Now that we've used Firefogg to create Ogg and WebM video formats,let's practice using HandBrake to create MP4.

17. ❏ Close Firefox.

18. ❏ Launch HandBrake using the Desktop shortcut, and notice the followingfeatures:



19. ❏ Click Source, then select Open File.

20. ❏ Select C:\2320\dealingtree\demo\demo.ogv.

21. ❏ If the following Warning dialog appears, simply click OK:

22. ❏ Click Browse after Destination: File: and save the file as C:\2320\dealingtree\demo\demo2.mp4

Be careful spelling the filename! We do not want to overwrite the existingdemo.mp4 file.


(continued)


23. ❏ In the Output Settings section of the main window, check Web optimized.

24. ❏ Click Start.

Encoding status messages should appear at the lower left corner of thewindow. HandBrake should only take a minute or two to convert our video.

25. ❏ Close HandBrake.

Part 3: Providing a choice of format

We now have a version of our video for each of the three major formatssupported by web browsers. In this part of the exercise, we will modify ourvideo element to make all three files available to our visitors.

26. ❏ Return to the editor and locate the video and source elements that youadded previously.

27. ❏ Change the value of the src attribute for the source element to reference thenew MP4 file, named demo2.mp4

28. ❏ Add source elements for our newly created files.


<source src="demo.webm" type="video/webm"/><source src="demo.ogv" type="video/ogg"/>

29. ❏ Save the file, leaving the editor open.

30. ❏ (Re)load the page in every browser to test your work.



Now which browser(s) can play the video? Is this what you expected? Why (orwhy not)? __________________________________________________ Which browser(s) still do not play the video? Is this what you expected? Why(or why not)? __________________________________________________

Part 4: Adding text and legacy support

Now we will add subtitles to our video and support for legacy browsers, usingthe Webshim polyfill.

31. ❏ Use the editor to open C:\2320\dealingtree\demo\english.vtt

This file contains the cues for our subtitles. Read it over and be certainthat you understand what it does.

32. ❏ Use the editor to open C:\2320\dealingtree\demo\french.vtt.

This file provides French subtitles.

33. ❏ Use the editor to open C:\2320\dealingtree\demo\swedish.vtt.

This file provides Swedish subtitles.

34. ❏ Close the VTT files and return to editing index.html. Locate the video andsource elements that you added previously.

35. ❏ After the last source, add a track within the video. Use any one of the VTTfiles as the src. Add appropriate srclang and label attributes, and make itthe default


(continued)


Your code should now resemble this, with the (English) addition in bold:

<video controls="controls" height="432" poster="demo.png" width="768" style="height:432px;width:768px"> <source src="demo2.mp4" type="video/mp4"/> <source src="demo.webm" type="video/webm"/> <source src="demo.ogv" type="video/ogg"/> <track src="english.vtt" kind="subtitles" srclang="en" label="Transcript (English)" default="default"/></video>

36. ❏ Save the file.

37. ❏ Scroll to the head of the page and notice the script that includesinitialize-demo-page.js.

We will initialize the page to load Webshim.

38. ❏ Edit the empty fileC:\2320\dealingtree\demo\initialize-demo-page.js.

39. ❏ In this file, tell webshim to polyfill the mediaelement


webshim.polyfill('mediaelement');


41. ❏ (Re)load the page in every browser and verify that the video plays with thetext subtitles. Verify that the polyfill works in legacy versions of IE by usingDeveloper Tools to switch to earlier browser modes.



Congratulations! You have added native support for video to a webpage, encoded video in Ogg, WebM, and MP4 formats, provided text toimprove accessibility, and polyfilled legacy browsers.



42. ❏ Add track elements for the remaining VTT files toC:\2320\dealingtree\demo\index.html.


(continued)



<video controls="controls" height="432" poster="demo.png" width="768" style="height:432px;width:768px"> <source src="demo2.mp4" type="video/mp4"/> <source src="demo.webm" type="video/webm"/> <source src="demo.ogv" type="video/ogg"/> <track src="english.vtt" kind="subtitles" srclang="en" label="Transcript (English)" default="default"/> <track src="french.vtt" kind="subtitles" srclang="fr" label="French Subtitles"/> <track src="swedish.vtt" kind="subtitles" srclang="sv" label="Swedish Subtitles"/></video>


44. ❏ Return to editingC:\2320\dealingtree\demo\initialize-demo-page.js.

45. ❏ Add code to replace the default track with checkboxes that enable and disableeach track.

The solution file (C:\2320\done-deal\initialize-demo-page.js)includes comments that explain the code!



Your code might resemble this:

$(function(){ var test = document.createElement('track'); if ( ( !! test.track ) && ( !! test.track.mode ) ) { var tt = $('video')[0].textTracks; $.each( tt, function(i) { this.mode = 'disabled'; $('<div class="TrackSelection"> ' + this.label + '</div>'). appendTo('.MediaContainer'). prepend( $('<input type="checkbox" value="'+i+'"/>'). change( function() { tt[ this.value ].mode = this.checked ? 'showing' : 'hidden'; }) ); }); }});


47. ❏ After saving the file, reload the page in Internet Explorer and verify that eachtrack only displays when the corresponding checkbox is checked.

48. ❏ Reload the page in each other browser.


(continued)


Which browsers support track.mode switching? __________________________________________________ Which browser(s) only play the default track? __________________________________________________


49. ❏ Study your Course Notes and answer all of the Chapter Review questions—especially if you plan to take the exam!

Documents

Exercise Manual for Course 2320 HTML5 Web Development...Exercise Manual for Course 2320 HTML5 Web Development 2320/MA/D.1/407/C.4 by Andrew M. Andrews III Technical Editor: ... Exchanging