Вы находитесь на странице: 1из 91

OFFICIAL

MICROSOFT

LEARNING

10953A

HTML5 Programming Companion Content

PRODUCT

OFFICIAL MICROSOFT LEARNING 10953A HTML5 Programming Companion Content PRODUCT

2

HTML5 Programming

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, e-mail address, logo, person, place or event is intended or should be inferred. Complying with all applicable copyright laws is the responsibility of the user. Without limiting the rights under copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.

The names of manufacturers, products, or URLs are provided for informational purposes only and Microsoft makes no representations and warranties, either expressed, implied, or statutory, regarding these manufacturers or the use of the products with any Microsoft technologies. The inclusion of a manufacturer or product does not imply endorsement of Microsoft of the manufacturer or product. Links may be provided to third party sites. Such sites are not under the control of Microsoft and Microsoft is not responsible for the contents of any linked site or any link contained in a linked site, or any changes or updates to such sites. Microsoft is not responsible for webcasting or any other form of transmission received from any linked site. Microsoft is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement of Microsoft of the site or the products contained therein.

© 2012 Microsoft Corporation. All rights reserved.

Microsoft, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

All other trademarks are property of their respective owners.

Product Number: 10953A

Released: 04/2012

HTML5 Programming

3

HTML5 Programming 3

4

HTML5 Programming

4 HTML5 Programming

HTML5 Programming

5

HTML5 Programming 5
HTML5 Programming 5

6

HTML5 Programming

6 HTML5 Programming

HTML5 Programming

7

Module 1

Introduction to HTML5 Development

Contents:

Lesson 1: Overview of HTML

8

Lesson 2: What’s New in HTML5?

12

Lesson 3: Introduction to JavaScript

14

Lesson 4: Introduction to jQuery

17

8

HTML5 Programming

Lesson 1

Overview of HTML

Contents:

Detailed Demonstration Steps

9

Additional Reading

11

HTML5 Programming

9

Detailed Demonstration Steps

Demonstration: Creating an HTML Document Detailed demonstration steps

1. Log on to the virtual machine, named SEA-DEV as Admin, with the password, Pa$$w0rd.

2. Open a Notepad.exe (On the Windows Start menu, click Run, type notepad and then click OK).

3. Add the following doctype element:

<!DOCTYPE html>

4. Add the HTML element under the doctype element.

<!DOCTYPE html>

<html>

</html>

5. Create the head and body elements inside the HTML element.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

6. Add a title to the head element and some content to the body element.

<!DOCTYPE html> <html> <head> <title>Your first HTML document</title> </head> <body> <p>Hello HTML!</p> </body> </html>

7. Save the file as an HTML file.

8. Run the saved file by double-clicking it, and show the students the completed webpage.

Demonstration: Creating an HTML Document Detailed demonstration steps

1. Log on to the virtual machine named SEA-DEV as Admin, with the password Pa$$w0rd

2. Open Visual Studio 2010.

3. Create a new C# ASP.NET Empty Web Application.

4. Create an HTML file.

10

HTML5 Programming

<div>This is a division.</div> <div> This is another division</div> <span>This is a span</span> <span>This is another span</span> <p>This is a paragraph</p> <a href="http://www.microsoft.com">A link to Microsoft site</a> <table border="1"> <tr> <th>header 1</th> <th>header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> <ul>

<li>item1</li>

<li>item2</li>

</ul>

6. Save the file as an HTML file.

7. Run the saved file and show the students the completed webpage.

Demonstration: Creating Forms by Using HTML Detailed demonstration steps

1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd

2. Open Visual Studio 2010.

3. Create a new C# ASP .NET Empty Web Application.

4. Create an HTML file.

5. In the HTML file’s body element, add the following element.

<form action="#" method="GET"> <fieldset> <legend>Client Info:</legend> <label for="txtName">Name: </label><input type="text" id="txtName" name="txtName" /><br /> <label for="txtAddress">Address: </label><input type="text" id="txtAddress" name="txtAddress" /><br/> <input type="submit" value="Submit" name="btnSubmit" name="btnSubmit" /> </fieldset> </form>

6. Save the file as an HTML file.

7. Run the saved file and show the students the completed webpage.

HTML5 Programming

11

Additional Reading

The HTML Document

Languages

Encoding

12

HTML5 Programming

Lesson 2

What’s New in HTML5?

Contents:

Detailed Demonstration Steps

13

HTML5 Programming

13

Detailed Demonstration Steps

Demonstration: Common Styles Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file

3. In the HTML file, add the following HTML content to the body element:

<h1>The Header</h1> <div id="content">The Content</div> <div class="footer">The Footer</div>

4. In the HTML file, add a style element inside the head element before the head element’s closing tag.

<style type="text/css"> h1 { font-family: Arial sans-serif; font-size: 36px; text-decoration:
<style type="text/css">
h1
{
font-family: Arial sans-serif;
font-size: 36px;
text-decoration: underline;
color: brown;
text-align: center;
}
#content
{
background-color: brown;
color: white;
font-weight: bold;
height: 200px;
}
.footer
{
font-size: 0.6em;
color: gray;
text-align: right;
}
</style>

5. Save the HTML file.

6. Run the saved file and show the students the completed webpage.

14

HTML5 Programming

Lesson 3

Introduction to JavaScript

Contents:

Detailed Demonstration Steps

15

HTML5 Programming

15

Detailed Demonstration Steps

Demonstration: Using the Console Detailed demonstration steps

1. Open Internet Explorer.

2. Press F12 to open the Internet Explorer Developer Tools.

3. If the developer tools opens in a separate window, instead of in a pane at the lowermost part of the browser window, click the Pin button at the upper-right part of the window.

4. Click the Console tab.

5. Next to the >> symbol, enter the following code and then press Enter to show an alert message.

alert("Hello");

6. Observe the popup and then click OK to close it.

7. Enter the following line of code to print the type string of a number.

typeof 42;

8. Observe the result of the expression (“number”) printed in the console.

9. Enter the following line to declare and assign a new variable called message.

var message = "Hello";

10. Enter the following line to display the value of the message variable.

message;

11. Observe the value of the variable displayed in the console.

12. Enter the following line to show the value of the variable in an alert.

alert(message);

13. Click OK to close the alert.

Demonstration: Using the Console Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add HTML content to the body element.

<h1>The Header</h1> <div id="content">The Content</div>

16

HTML5 Programming

<script type="text/javascript"> function contentLoaded() { var content = document.getElementById("content"); content.textContent = "This content was modified using JavaScript.";

}

document.addEventListener("DOMContentLoaded", contentLoaded, false); </script>

5. Save the HTML file.

6. Run the saved file and show the students the completed webpage containing the text modified using JavaScript.

HTML5 Programming

17

Lesson 4

Introduction to jQuery

Contents:

Detailed Demonstration Steps

18

18

HTML5 Programming

Detailed Demonstration Steps

Demonstration: How to Get Started with jQuery Detailed demonstration steps

1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd

2. In Visual Studio 2010, create a new ASP.NET Empty Web Application called HellojQuery.

3. Add a new HTML file called HellojQuery.

4. Add a new JavaScript file called HellojQuery.

5. Add the jquery-1.5.1.js and jquery-1.5.1-vsdoc.js files from D:\Mod01\Democode\Assets.

6. In the HTML file, add the following script tags inside the head element.

<head> <title>Hello jQuery</title> <script src="jquery-1.5.1.js"></script> <script src="HellojQuery.js"></script> </head>

7. Drag the vsdoc file into the surface of the opened HellojQuery.js file to create the statement and inform the students that you have added IntelliSense for jQuery by doing that.

/// <reference path="jquery-1.5.1-vsdoc.js" />

8. Add the following code in the HellojQuery.js file to demonstrate the wiring of the ready event.

$(document).ready(function() { alert("Hello jQuery ready function");

});

9. Set the HellojQuery.html as the startup page.

10. Run the application.

Demonstration: How to Get Started with jQuery Detailed demonstration steps

1. Log on to the virtual machine named SEA-DEV as Admin with the password Pa$$w0rd

2. Open the previous HellojQuery web application.

3. In the HellojQuery HTML file, in the body element, add a div with an id of main.

<div id="main">

</div>

4. In the main div, add the following code.

<ul id="ulOfItems"> <li>item 1</li> <li class="red">item 2</li> <li id="item3">item 3</li> </ul> <br />

HTML5 Programming

19

<div>Hello jQuery</div> <div id="result"></div>

This creates the page markup containing an unordered list and two divs.

5. In the HellojQuery.js file, add the following code.

var resultDiv; $(document).ready(function () { resultDiv = $("#result"); $("li").each(function () { resultDiv.text(resultDiv.text() + " " + this.tagName);

});

$("#item3").each(function () { resultDiv.text(resultDiv.text() + " " + this.id);

});

$(".red").each(function () { resultDiv.text(resultDiv.text() + " " + this.tagName);

});

$("ul#ulOfItems").each(function () { resultDiv.text(resultDiv.text() + " " + this.id);

});

});

Write to the result div, all tag names of the selected list items, the id of the selected item3, the tag name li once for the list item with the red class name, and the id of the unordered list, ulOfItems, retrieved by the precise selector.

6. Run the webpage in the browser to show the results.

Demonstration: How to Get Started with jQuery Detailed demonstration steps

1. Log on to the virtual machine named S EA-DEV as Admin with the password Pa$$w0rd

2. Open the previous HellojQuery web application.

3. Add the following button at the end of the HellojQuery.html file.

<input type="button" id="btnEach" value="Each Function Example" /> <br />

4. Add the following JavaScript code in the HellojQuery.js file inside the ready handler:.

$("#btnEach").click(function () { $("div").each(function (i) { alert(i + "=" + $(this).text());

});

});

The code wires a click event to the input with the button type. When the button is clicked, an alert is shown for each div in the page with the div index and the div text.

5. Run the webpage in the browser.

20

HTML5 Programming

7. Add the following paragraph and buttons to the HellojQuery.html file.

<p></p> <input type="button" id="btnCreateParagraph" value="Create Paragraph Data" /><br /> <input type="button" id="btnAppendToUl" value="Append Two List Items Using appendTo" />

8. Add the following JavaScript code in the HellojQuery.js file inside the ready handler:.

$("#btnCreateParagraph").click(function () { $("p").html("<div>Hello jQuery!</div>");

});

$("#btnAppendToUl").click(function () { $("<li />").html("last").appendTo("ul"); $("<li />").html("new first").prependTo("ul");

});

The code wires two c

“Hello jQuery!” text to the paragraph element. The second event handler creates two list items that are

added as the first and last list items in the unordered list in the HTML.

9. Run the webpage in the browser.

10. Click the buttons to run their funct ionality.

lick event handlers to the buttons. The first handler adds a new div element with the

HTML5 Programming

21

Module 2

Creating Page Structure and Navigation

Contents:

Lesson 1: HTML5 Structural Elements

22

Lesson 2: Navigation and Menus

27

Module Reviews and Takeaways

30

22

HTML5 Programming

Lesson 1

HTML5 Structural Elements

Contents:

Detailed Demonstration Steps

23

Additional Reading

26

HTML5 Programming

23

Detailed Demonstration Steps

Demonstration: The New Structural Elements Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> <header> <h1>Page Title</h1> <nav> <ul> <li>navigation 1</li> <li>navigation 1</li> </ul> </nav> </header> <section> <article> <h2>Article Title</h2> <p>Article content</p> </article> </section> <footer> <p>Copyright 2011 Microsoft</p> </footer> </body>

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page

Demonstration: The New Structural Elements Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> This is<mark>marked</mark> text

value="70" min="0" max="100" low="54" high="100" optimum="100">70</meter></p> <p>Downloaded: <progress value="16" max="48">33%</progress> of the content</p> <p>Output: <input type="text" value="1" /> + <input type="text" value="3" /> =

<output>4</output></p>

<p>The time is now: <time>2011-11-12T14:54Z</time></p> </body>

<p>Your test score in the test was <meter

4. Save the file as an HTML file

24

HTML5 Programming

Demonstration: The New Structural Elements Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>

<header>

<h1>

Something Important Happened Somewhere</h1> <nav> <!-- Site Navigation --> <ul>

<li><a href="/">Home</a></li> <li><a href="/entertainment">Entertainment</a></li> <li><a href="/politics">Politics</a></li> <li><a href="/sports">Sports</a></li> </ul> </nav> </header> <article> <header> <p>

Table of Contents</p> <nav> <ul>

<li><a href="#summary">Summary</a></li> <li><a href="#details">The Details</a></li> <li><a href="#sources">Sources</a></li> </ul> </nav> </header> <section> <header>

<h2>

Somebody did Something Vital Yesterday</h2> </header> <p>

This is the summary of the article.</p> </section> <section> The main content of the article would be here. </section> <section> <header>

<h2>

Sources</h2>

</header>

<ul>

<!-- a link menu that is not wrapped in a nav element --> <li><a href="http://www.example.com/link1">A Well Known

Source</a></li>

</ul>

</section>

</article>

</body>

HTML5 Programming

25

5. Run the saved file and show the students the completed web page

26

HTML5 Programming

Additional Reading

Other New Elements

HTML5 Programming

27

Lesson 2

Navigation and Menus

Contents:

Detailed Demonstration Steps

28

28

HTML5 Programming

Detailed Demonstration Steps

Demonstration: The nav Element Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body>

<header>

<h1>

Something Important Happened Somewhere</h1> <nav> <!-- Site Navigation --> <ul>

<li><a href="/">Home</a></li> <li><a href="/entertainment">Entertainment</a></li> <li><a href="/politics">Politics</a></li> <li><a href="/sports">Sports</a></li> </ul> </nav> </header> <article> <header> <p>

Table of Contents</p> <nav> <ul>

<li><a href="#summary">Summary</a></li> <li><a href="#details">The Details</a></li> <li><a href="#sources">Sources</a></li> </ul> </nav> </header> <section> <header>

<h2>

Somebody did Something Vital Yesterday</h2> </header> <p>

This is the summary of the article.</p> </section> <section> The main content of the article would be here. </section> <section> <header>

<h2>

Sources</h2>

</header>

<ul>

<!-- a link menu that is not wrapped in a nav element --> <li><a href="http://www.example.com/link1">A Well Known

Source</a></li>

</ul>

</section>

</article>

</body>

HTML5 Programming

29

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page

30

HTML5 Programming

Module Reviews and Takeaways

Review questions

Question: Why should developers migrate from HTML4 elements to HTML5 elements?

Answer: The new elements in HTML5 help achieve the following:

Better accessibility

Better searchability

Support for internationalization

Better interoperability

Real-World Issues and Scenarios

The migration from HTML4 to HTML5 should not be done without thinking. This is a very complicated task that may break the appearance of the webpage if not done carefully.

Tools

Visual Studio 2010

HTML5 Programming

31

Module 3

Creating Form Input and Validation

Contents:

Lesson 1: Working with Input Types

32

Lesson 2: Using Form Attributes

35

Lesson 3: Validation

37

Lesson 4: Using Browser Detection, Feature Detection, and Modernizr

39

Module Reviews and Takeaways

43

32

HTML5 Programming

Lesson 1

Working with Input Types

Contents:

Detailed Demonstration Steps

33

HTML5 Programming

33

Detailed Demonstration Steps

Demonstration: Date Pickers Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> <form> <label for="dpBirthDate">Date: </label><input type="date" name="dpBirthDate" value="2011-12-19" /><br/> <label for="dpCCExpiration">Month: </label><input type="month" name="dpCCExpiration" value="2011-12" /><br/> <label for="dpArrivalWeek">Week: </label><input type="week" name="dpArrivalWeek" value="2011-W16" /><br/> <label for="dpDepartureTime">Time: </label><input type="time" name="dpDepartureTime" value="17:39:57" /><br/> <label for="dpBirthDate">Datetime: </label><input type="datetime" name="dpBirthDate" value="2011-12-31T23:59:60Z" /><br/> <label for="dpBirthDate">Datetime-local: </label><input type="datetime-local" name="dpBirthDate" value="2011-12-19T16:39:57" /><br/> </form> </body>

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page

Demonstration: Date Pickers Detailed demonstration steps

1. In the HTML file’s body element after the last </br> element, add the following elements:

<label for="txtEmail">Email: </label><input type="email" name="txtEmail" value="email@company.com" /><br/> <label for="txtUrl">Url: </label><input type="url" name="txtUrl" value="http://www.microsoft.com" /><br/> <label for="txtPhoneNumber">Telephone: </label><input type="tel" name="txtPhoneNumber" /><br/> <label for="txtSearch">Search: </label><input type="search" name="txtSearch" /><br/>

2. Save the file as an HTML file

3. Run the saved file and show the students the completed web page

Demonstration: Date Pickers Detailed demonstration steps

1. In the HTML file’s body element after the last </br> element, add the following elements:

34

HTML5 Programming

<label for="txtAge">Range: </label><input type="range" name="txtAge" min="0" max="120" /><br/><label for="txtCarColor">Color: </label><input type="color" name="txtCarColor" /><br/>

2. Save the file as an HTML file

3. Run the saved file and show t he students the completed web page

HTML5 Programming

35

Lesson 2

Using Form Attributes

Contents:

Detailed Demonstration Steps

36

36

HTML5 Programming

Detailed Demonstration Steps

Demonstration: Using Form Attributes Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> <form> <input type="text" placeholder="Enter your full name" name="FullName" autofocus="autofocus" autocomplete="on" /> <input type="password" placeholder="Type your password" name="Password" /> <input type="number" placeholder="Enter your age" name="Age" /> <input type="text" name="country" list="countries" /> <datalist id="countries"> <option value="Canada" /> <option value="England" /> <option value="France" /> <option value="Germany" /> <option value="Japan" /> <option value="Russia" /> <option value="United States" /> </datalist> <input type="file" name="photos" multiple="multiple" /> </form>

<section id="products" hidden="hidden"> <header> <h1>Products Screen</h1> </header> This screen displays the company's products. </section> </body>

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page

HTML5 Programming

37

Lesson 3

Validation

Contents:

Detailed Demonstration Steps

38

38

HTML5 Programming

Detailed Demonstration Steps

Demonstration: General Validation Attributes Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> <form> <input type="text" name="username" required="required" /> <label> Zip Code: <input type="text" pattern="\d{5}" name=”zip” /></label> <input type="text" name="address" maxlength="10" /> <input type="submit" name="submit" value="Submit The Form" /> </form> </body>

4. Save the file as an HTML file

5. Run the saved file and show the students the completed web page

HTML5 Programming

39

Lesson 4

Using Browser Detection, Feature Detection, and Modernizr

Contents:

Question and Answers

40

Detailed Demonstration Steps

41

Additional Reading

42

40

HTML5 Programming

Question and Answers

Feature Detection

Question: Why is feature detection preferable to browser detection?

Answer: Feature detection makes no assumptions. Using this technique will reveal whether a feature exists. On the other hand, browser detection makes the assumption that you succeeded in detecting the browser, although knowing the browser does not always mean that you know the value of each feature.

Using HTML5 Polyfills

Question: Why should you use polyfills?

Answer: Polyfills help to introduce HTML5 features or elements to browsers that do not support them. This helps to create the same behavior, markup, and user experience across most of the browsers.

HTML5 Programming

41

Detailed Demonstration Steps

Demonstration: Modernizr Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. Add the modernizr-1.7.js file from D:\Mod03\Democode\Assets.

4. In the html file add the following script tag inside the head element:

<head> <title>Hello Modernizr</title> <script src="modernizr-1.7.js"></script> </head>

5. Add an empty script tag at the end of the body tag:

<body> <script type=”text/javascript”></script> </body>

6. In the empty script tag, add the following code:

if (Modernizr.canvas)

{

alert(‘canvas is available’);

}

if (Modernizr.video)

{

alert(‘video is available’);

}

if (Modernizr.audio)

{

alert(‘audio is available’);

}

7. Save the file as an HTML file

8. Run the saved file and show the students the completed web page

42

HTML5 Programming

Additional Reading

Browser Detection

HTML5 Programming

43

Module Reviews and Takeaways

Review questions

Question: How can you use HTML5 today, when there are browsers that do not support some of its features?

Answer: There are many strategies to apply HTML5 features today. One strategy is feature detection (and in particular, the Modernizr JavaScript library), which enables you to detect features, and reacts if these do not exist in the browser. You can also use polyfills to meet your requirements.

44

HTML5 Programming

Module 4

Laying Out and Styling Webpages

Contents:

Lesson 1: Creating Layouts

45

Lesson 2: Advanced CSS by Using CSS3

48

Module Reviews and Takeaways

52

HTML5 Programming

45

Lesson 1

Creating Layouts

Contents:

Detailed Demonstration Steps

46

Additional Reading

47

46

HTML5 Programming

Detailed Demonstration Steps

Demonstration: Using HTML5 Structural Elements for Layout Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file’s body element add the following elements:

<body> <div> <header><h1>Page Title</h1></header> <div> <menu style=" width:200px;float:left;"> Menu</menu> <section style="width:400px;float:left;">Page Content</section> </div> <footer style="clear:both;">Footer</footer> </div> </body>

4. Save the file as an HTML file.

5. Run the saved file and show the students the completed webpage.

HTML5 Programming

47

Additional Reading

Using CSS3 for Layout

48

HTML5 Programming

Lesson 2

Advanced CSS by Using CSS3

Contents:

Detailed Demonstration Steps

49

Additional Reading

51

HTML5 Programming

49

Detailed Demonstration Steps

Demonstration: Transformations Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<div id="element"></div>

4. In the HTML file’s head element add the following style tag:

<style type="text/css"> #element

{

position: absolute; left: 50px; top: 50px; height: 20px; width: 20px; background-color: Red; -ms-transform: rotate(30deg) scale(1.5, 2);

}

</style>

5. Save the file as an HTML file

6. Run the saved file and show the students the completed web page

Demonstration: Media Queries Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<div id="element">This element has a border. When the screen’s width is less than 400 pixels the border is removed</div>

4. In the HTML file’s head element add the following style tag:

<style type="text/css"> #element

{

border: solid 1px black;

}

@media screen and (max-width:400px)

{

#element

{

border: none;

}

50

HTML5 Programming

}

</style>

5. Save the file as an HTML file

6. Run the saved file and show the students the completed web page.

7. Change the screen’s width to show the students the media query effect

HTML5 Programming

51

Additional Reading

Selectors

CSS3 Selectors

Animations

CSS3 Animations

Media Queries

52

HTML5 Programming

Module Reviews and Takeaways

Review questions

Question: What are the basic considerations for creating layouts?

Answer: The basic considerations include aspects such as space and white space, using images and graphics, working with text width, and element placement and position.

HTML5 Programming

53

Module 5

Getting Started with Graphics and Multimedia Elements

Contents:

Lesson 1: Canvas Basics

54

Lesson 2: Video/Audio Formats and Codecs

59

Lesson 3: Controlling Multimedia with JavaScript

61

Module Reviews and Takeaways

63

54

HTML5 Programming

Lesson 1

Canvas Basics

Contents:

Detailed Demonstration Steps

55

HTML5 Programming

55

Detailed Demonstration Steps

Demonstration: Canvas with Fallback Content Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add a canvas element with fallback content inside the body element.

<canvas id="canvas"> <div>Your browser does not support the canvas element.</div> </canvas>

4. In the HTML file, add a style element inside the head element before the head element’s closing tag.

<style type="text/css"> canvas { border: solid 1px green; } div { background-color: orange; } </style>

5. Save the file.

6. Run the saved file.

Demonstration: Drawing Shapes Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add a canvas element inside the body element.

<canvas id="canvas"> </canvas>

4. In the HTML file, add a script element inside the head element before the head element’s closing tag.

<head>

<script type="text/javascript"> </script> </head>

5. Inside the script element, call the new draw function after the page finishes loading, and retrieve the canvas context before starting to draw.

<script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

}

document.addEventListener("DOMContentLoaded", draw, false);

56

HTML5 Programming

</script>

6. At the end of the draw function, add the following code to draw a filled rectangle.

function draw() {

var context = canvas.getContext("2d");

context.fillRect(20, 30, 100, 40);

}

7. Save the HTML file.

8. Run the saved file and show the students the filled rectangle drawn on the canvas.

9. At the end of the draw function, add the following code to draw the circumference of a circle.

function draw() {

context.arc(70, 110, 30, 0, 2 * Math.PI, true); context.stroke();

}

10. Save the HTML file.

11. Run the saved file and show the students the circle drawn on the canvas.

12. At the end of the draw function, add the following code to draw part of a rectangle inside a clipping region defined by a circle.

function draw() {

context.beginPath(); context.moveTo(260, 75); context.arc(230, 75, 30, 0, 2 * Math.PI, true); context.clip();

context.beginPath(); context.rect(180, 55, 100, 40); context.fill();

}

13. Save the HTML file.

14. Run the saved file and show the students the partially filled circle drawn on the canvas.

Demonstration: Applying Styles Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add a canvas element inside the body element.

HTML5 Programming

57

4. In the HTML file, add a script element with a draw function inside the head element, before the head element’s closing tag.

<head>

<script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

}

document.addEventListener("DOMContentLoaded", draw, false); </script> </head>

5. At the end of the draw function, draw a rectangle with a radial gradient and three color stops.

<script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

var gradient = context.createLinearGradient(0, 0, 300, 150); gradient.addColorStop(0.1, "blue"); gradient.addColorStop(0.4, "green"); gradient.addColorStop(0.7, "yellow"); context.fillStyle = gradient;

context.beginPath(); context.arc(50, 75, 45, 0.5 * Math.PI, 1.5 * Math.PI); context.fill(); context.beginPath(); context.rect(50, 30, 200, 90); context.fill(); context.beginPath(); context.arc(250, 75, 45, 0.5 * Math.PI, 1.5 * Math.PI, true); context.fill();

}

document.addEventListener("DOMContentLoaded", draw, false); </script>

6. Save the HTML file.

7. Run the saved file and show the students the completed webpage.

Demonstration: Drawing and Transforming Text Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file

3. In the HTML file, add a canvas element inside the body element.

<canvas id="canvas"> </canvas>

58

HTML5 Programming

<head>

<script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

}

document.addEventListener("DOMContentLoaded", draw, false); </script> </head>

5. At the end of the draw function, draw a circle skewed to look like an ellipse and translated to the center of the canvas.

<script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

context.translate(canvas.width / 2, canvas.height / 2); context.scale(4, 2); // enlarge the grid and stretch it horizontally context.arc(0, 0, 30, 0, 2 * Math.PI); // draw a circle skewed by the scale method to look like an ellipse context.fillStyle = "orange"; context.fill();

}

document.addEventListener("DOMContentLoaded", draw, false); </script>

6. At the end of the draw function, draw text and rotate it.

<script type="text/javascript"> function draw() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");

context.rotate(Math.PI); // turn upside down context.font = "bold 9px Arial"; context.fillStyle = "blue"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("upside down", 0, 0); // draw the text "upside down" upside

down

}

document.addEventListener("DOMContentLoaded", draw, false); </script>

7. Save the HTML file.

8. Run the saved file and show the students the completed webpage.

HTML5 Programming

59

Lesson 2

Video/Audio Formats and Codecs

Contents:

Detailed Demonstration Steps

60

60

HTML5 Programming

Detailed Demonstration Steps

Demonstration: Playing Video Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Add the file, D:\Mod05\Democode\Assets\trailer.m4v, to the web application by copying or dragging the file to the new project’s folder in Solution Explorer.

3. Create an HTML file.

4. In the HTML file, add a video element with built-in controls supporting automatic playback and looping inside the body element.

<video src="trailer.m4v" width="400" autoplay="autoplay" loop="loop" controls="controls"> </video>

5. Save the HTML file.

6. Run the saved file and show the students the completed webpage.

HTML5 Programming

61

Lesson 3

Controlling Multimedia with JavaScript

Contents:

Detailed Demonstration Steps

62

62

HTML5 Programming

Detailed Demonstration Steps

Demonstration: Controlling Video Playback Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Add the file, D:\Mod05\Democode\Assets\trailer.m4v, to the web application by copying or dragging the file to the new project folder in Solution Explorer.

3. Create an HTML file.

4. In the HTML file, add a video element with the id attribute and automatic playback inside the body element.

<video id="video" src="trailer.m4v" autoplay="autoplay" width="400"> </video>

5. Inside the head element, before the closing tag, add a script element that pauses and plays the video.

<script type="text/javascript"> function toggleVideoPlayback() { var video = document.getElementById("video"); if(video.paused) video.play(); else video.pause();

}

function contentLoaded() { document.getElementById("video").addEventListener("click", toggleVideoPlayback, false);

}

document.addEventListener("DOMContentLoaded", contentLoaded, false); </script>

6. Save the HTML file.

7. Run the saved file, and show the students how the video is paused and resumed when it is clicked.

HTML5 Programming

63

Module Reviews and Takeaways

Review questions

Question: When using JavaScript to control video playback, what considerations affect whether a video element should be used alone, or played on a canvas?

Answer: The primary considerations are the level of complexity of the application, support for accessibility, and development speed.

64

HTML5 Programming

Module 6

Creating Advanced Graphics

Contents:

Lesson 1: Drawing with SVG

65

Lesson 2: Animation

68

HTML5 Programming

65

Lesson 1

Drawing with SVG

Contents:

Detailed Demonstration Steps

66

Additional Reading

67

66

HTML5 Programming

Detailed Demonstration Steps

Demonstration: Drawing Shapes Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add an svg element with the correct version and schema inside the body element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> </svg>

4. In the svg element, add a rect element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="30" width="150" height="40" rx="5" ry="5" fill="orange" /> </svg>

5. Before the svg element’s closing tag, add a circle element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<circle cx="250" cy="50" r="40" fill="blue" /> </svg>

6. Before the svg element’s closing tag, add a path element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<path d="M 20,200 C 20,100 170,100 170,200 S 320,300 320,200" fill="red" stroke="green" stroke-width="3" /> </svg>

7. Before the svg element’s closing tag, add a text element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<text x="160" y="130" font-family="Arial" font-size="36" fill="black" stroke="gray" stroke-width="2">Hello SVG</text> </svg>

8. Save the HTML file.

9. Run the saved file and show the students the completed webpage.

HTML5 Programming

67

Additional Reading

Working with Shapes

Attributes

Working with Filters

Filters

68

HTML5 Programming

Lesson 2

Animation

Contents:

Detailed Demonstration Steps

69

HTML5 Programming

69

Detailed Demonstration Steps

Demonstration: Drawing SVG Animations by Using Markup Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application.

2. Create an HTML file.

3. In the HTML file, add an svg element with a blue circle containing various animations, inside the body element.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="blue"> <animate attributeName="fill" to="yellow" begin="click" dur="5" fill="freeze"

/>

<animate attributeName="cx" to="200" begin="click" dur="5" fill="freeze" /> <animate attributeName="cy" to="150" begin="click" dur="5" fill="freeze" /> <animate attributeName="r" to="80" begin="click" dur="5" fill="freeze" /> </circle> </svg>

4. Save the HTML file.

5. Run the saved file and show the students how clicking the blue circle triggers the animations.

70

HTML5 Programming

Module 7

Using Client-Side Storage

Contents:

Lesson 1: Web Storage vs. Cookies

71

Lesson 2: Web Storage API

73

Module Reviews and Takeaways

77

HTML5 Programming

71

Lesson 1

Web Storage vs. Cookies

Contents:

Additional Reading

72

72

HTML5 Programming

Additional Reading

IndexedDB

IndexedDB

HTML5 Programming

73

Lesson 2

Web Storage API

Contents:

Detailed Demonstration Steps

74

Additional Reading

76

74

HTML5 Programming

Detailed Demonstration Steps

Demonstration: Web Storage Functions and Attribute Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> <form id="form1"> <p>

You have viewed this page <span id="counter"></span> times.

</p>

</form>

</body>

4. In the HTML file’s head element add the following script tag:

<script type="text/javascript"> function setCounter() { if (!localStorage.getItem('numberOfPageLoads')) { localStorage.setItem('numberOfPageLoads', 0);

}

localStorage.setItem('numberOfPageLoads', parseInt(localStorage.getItem('numberOfPageLoads')) + 1); document.getElementById('counter').innerHTML = localStorage.getItem('numberOfPageLoads');

}

window.addEventListener("load", setCounter, false); </script>

5. Save the file as an HTML file

6. In Solution Explorer, click on project with the right mouse button

7. Click on the Set As Startup Page menu item

8. Run the project by pressing CTRL+F5 and show the students the completed web page

Demonstration: Web Storage Functions and Attribute Detailed demonstration steps

1. In the HTML file’s head element add the following script statement at the end of the script tag:

function logEventProperties(e) { console.log(e.key); console.log(e.oldValue); console.log(e.newValue); console.log(e.url); console.log(e.storageArea);

}

window.addEventListener("storage", logEventProperties, false);

HTML5 Programming

75

HTML5 Programming 75 2. Save the file as an HTML file 3. In Solution Explorer ,

2. Save the file as an HTML file

3. In Solution Explorer, click on project with the right mouse button

4. Click on the Set As Startup Project menu item

5. Run the project by pressing CTRL+F5 and show the students the completed web page

76

HTML5 Programming

Additional Reading

Security and Privacy Considerations

Web Storage Security and Privacy

HTML5 Programming

77

Module Reviews and Takeaways

Review questions

Question: Why is it so important to have client-side storage capabilities?

Answer: Client-side storage capabilities can help increase the performance of websites and applications, reduce network latency by minimizing server calls, and help scale up the site or application.

78

HTML5 Programming

Module 8

Using Advanced HTML5 JavaScript APIs

Contents:

Lesson 1: Using the Drag-and-Drop API

79

Lesson 2: File API

83

Lesson 3: Geolocation API

86

HTML5 Programming

79

Lesson 1

Using the Drag-and-Drop API

Contents:

Detailed Demonstration Steps

80

Additional Reading

82

80

HTML5 Programming

Detailed Demonstration Steps

Demonstration: Using the Drag-and-Drop API Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> <div id="draggableDiv" draggable="true" style="width:150px; height:150px;border: solid 1px black;">The div can be dragged</div> <div id="dropDiv" dropzone="copy" style="width:300px; height:300px; padding- top:50px; border: solid 2px black;">a dropzone</div> </body>

4. In the HTML file’s head element add the following script tag:

<script type="text/javascript"> function wireDragEvents() { var div = document.getElementById('draggableDiv'); div.addEventListener('dragstart', handleDragStart, false);

var div = document.getElementById('dropDiv'); div.addEventListener('drop', handleDrop, false); div.addEventListener('dragover', handleDragOver, false);

}

function handleDragStart(ev) { console.log('handling drag start event'); ev.dataTransfer.effectAllowed = 'copy'; ev.dataTransfer.setData("text", "stored text");

}

function handleDrop(ev) { if (ev.stopPropagation) ev.stopPropagation(); console.log('handling drop event'); var data = ev.dataTransfer.getData("text"); console.log(data); return false;

}

function handleDragOver(ev) { if (ev.preventDefault) ev.preventDefault(); console.log('handling drag over event'); ev.dataTransfer.dropEffect = "copy"; return false;

}

window.addEventListener("DOMContentLoaded", wireDragEvents, false); </script>

5. Save the file as an HTML file

6. In Solution Explorer, click on file with the right mouse button

7. Click on the Set As Startup Page menu item

HTML5 Programming

81

9. Drag the first div and drop it inside the second div

10. Show to the students the Visual Studio console view

82

HTML5 Programming

Additional Reading

Dragging Events

Drag and Drop

dataTransfer Object

Data Transfer

HTML5 Programming

83

Lesson 2

File API

Contents:

Detailed Demonstration Steps

84

Additional Reading

85

84

HTML5 Programming

Detailed Demonstration Steps

Demonstration: File API Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s body element add the following elements:

<body> <input type="file" id="file" name="file" multiple /> </body>

4. In the HTML file’s head element add the following script tag:

<script type="text/javascript"> function handleSelectedFiles(e) { var files = e.target.files;

for (var i = 0; i < files.length; i++) { var reader = new FileReader();

reader.onload = (function (theFile) { return function (e) { console.log(e.target.result);

};

})(files[i]);

// Read the file as a text. reader.readAsText(files[i]);

}

}

function contentLoaded() {

document.getElementById('file').addEventListener('change', handleSelectedFiles, false);

}

window.addEventListener("DOMContentLoaded", contentLoaded, false); </script>

5. Save the file as an HTML file

6. In Solution Explorer, click on file with the right mouse button

7. Click on the Set As Startup Page menu item

8. Run the project by pressing CTRL+F5 and show the students the completed web page

9. Press the Browse button and pick any text file to see the result of the reading in the Visual Studio’s console view

HTML5 Programming

85

Additional Reading

Security Considerations

File API Security

86

HTML5 Programming

Lesson 3

Geolocation API

Contents:

Detailed Demonstration Steps

87

HTML5 Programming

87

Detailed Demonstration Steps

Demonstration: Geolocation API Detailed demonstration steps

1. Create a new C# ASP.NET Empty Web Application

2. Create an HTML file

3. In the HTML file’s head element add the following script tag:

<script type=”text/javascript”>

navigator.geolocation.getCurrentPosition(successCallback, errorCallback,

{

 

enableHighAccuracy: true, maximumAge: 1000,

timeout:500

});

function successCallback(position) { console.log(position.coords.latitude); console.log(position.coords.longitude);

}

function errorCallback(error) { var message = ""; switch (error.code) { case error.PERMISSION_DENIED:

message = "Permissions denied by the user "; break; case error.POSITION_UNAVAILABLE:

message = "The current position could not be determined."; break; case error.PERMISSION_DENIED_TIMEOUT:

message = "timeout occurred "; break;

}

console.log(message);

}

</script>

4. Save the file as an HTML file

5. In Solution Explorer, click on file with the right mouse button

6. Click on the Set As Startup Page menu item

7. Run the project by pressing CTRL+F5 and show the students the completed web page

8. You should press the Allow Once button that is popped up by the browser

88

HTML5 Programming

Module 9

Using WebMatrix and Other Developer Tools

Contents:

Lesson 2: ASP.NET MVC 3 and Razor

89

HTML5 Programming

89

Lesson 2

ASP.NET MVC 3 and Razor

Contents:

Additional Reading

90

90

HTML5 Programming

Additional Reading

Design Patterns and Rationale for Using the ASP.NET MVC 3 Framework

ASP.NET Webforms

A loosely coupled system is a system whose components are minimally dependent on other components in the system. This usually makes it easy to modify or replace components in a predictable, isolated manner without affecting the rest of the system.

HTML5 Programming

91

Send Us Your Feedback

You can search the Microsoft Knowledge Base for known issues at Microsoft Help and Support before submitting feedback. Search using either the course number and revision, or the course title.

either the course number and revision, or the course title. Note please ask your instructor whether

Note

please ask your instructor whether or not there are existing error log entries.

Not all training products will have a Knowledge Base article – if that is the case,

Courseware Feedback

Send all courseware feedback to support@mscourseware.com. We truly appreciate your time and effort. We review every e-mail received and forward the information on to the appropriate team. Unfortunately, because of volume, we are unable to provide a response but we may use your feedback to improve your future experience with Microsoft Learning products.

Reporting Errors

When providing feedback, include the training product name and number in the subject line of your e- mail. When you provide comments or report bugs, please include the following:

1. Document or CD part number

1. Page number or location

2. Complete description of the error or suggested change

Please provide any details that are necessary to help us verify the issue.

any details that are necessary to help us verify the issue. Important All errors and suggestions

Important All errors and suggestions are evaluated, but only those that are validated are added to the product Knowledge Base article.