98 375 html5

MTA EXAM 98-375
HTML5 Application Development

Fundamentals
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 1
Manage the Application Life Cycle
LESSON 1.2
Manage the state of an
application
OVERVIEW Lesson 1.2
In this lesson, you will review the following:
• Session state
• Application state
• Persisting state information
• States of an application
GUIDING QUESTIONS Lesson 1.2
• What are the states of an HTML5 application?

• List two ways to store data using HTML5.
• What is a cache, and how is it used in HTML5?
LECTURE Lesson 1.2
HTML5 State Management

• Session state is created when the user makes the first request to
access an application and ends when the user closes the session.
• Application state is created when the first request goes to the web
server and is released when the application is closed.
• Persist state information is data that needs to continue to exist after
the session has ended.
LECTURE Lesson 1.2
HTML5 Data Storage and Longevity

• sessionStorage keeps information only for the current lifetime of the
browser session.
• localStorage stores data persistently (keeps data after the user ends
the browser session).
• AppCache is a special cache created to retain resources and make
them available offline. Examples include: HTML pages, images, CSS,
and JavaScript.
DEMONSTRATION Lesson 1.2
Feature Detection
In this demonstration, you will see how to:

• Add code to detect whether the browser supports the new HTML5
API that allows the developer to use sessionStorage and
localStorage.
• Add code to detect whether the browser supports the AppCache
feature of HTML5.
• Use the application cache to include the manifest attribute in the
document’s html tag: <html manifest=“sample.appcache”>
DISCUSSION Lesson 1.2
Web Storage Advantages and Disadvantages

Cookies localStorage
Small file size (approximately 4 kb) Much larger capacity to hold data
(3-5 MB)
Sent with every HTTP request Only sent when specifically requested
Can be accessed by server scripts Web storage can ONLY be accessed
such as PHP and JavaScript by the client (JavaScript)
Specific to the browser and domain, Web storage distinguishes between
but do NOT make a distinction windows as well as browser and
between windows in the same domain
browser
IN-CLASS ACTIVITY Lesson 1.2
Directions:
• Read the scenario described in the In-Class Activity document.
• Answer the questions that follow.
REVIEW Lesson 1.2
Can you answer these?
• What are the states of an HTML5 application?

• List two ways to store data using HTML5.
• What is a cache, and how is it used in HTML5?
ADDITIONAL RESOURCES Lesson 1.2
MSDN Resources
HTML5 Tutorial http://msdn.microsoft.com/en-
us/ie/aa740476
Internet Explorer® 9 Guide for http://msdn.microsoft.com/en-
Developers us/ie/hh410106
Other Resources
How to use an Application http://www.html5rocks.com/en/tutorials/a
Cache ppcache/beginner/
W3Schools http://www.w3schools.com/html5/
Schmitt, Christopher and Kyle Simpson. HTML5 Cookbook (Sebastopol: O'Reilly
2012).
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 1
LESSON 1.3
Debug and test an
HTML5-based touch-
enabled application
OVERVIEW Lesson 1.3
• Strategies to debug and test an HTML5-based touch-enabled

application.
• The features of a HTML5-based touch-enabled application.
• Why is it important to debug and test your application?

• What are the features of an HTML5-based touch-enabled
application?
• How is an HTML5 touch-enabled application tested?
LECTURE Lesson 1.3
HTML5 Feature Testing

• Test on various browsers, such as Internet Explorer®, Firefox, Mozilla,
and Google Chrome
o Use the browsers on your desktop for initial debugging and
testing.
o If possible, test on different versions of each browser.
o Test for various screen resolutions and browser window sizes.
LECTURE Lesson 1.3
Understand Touch Events in HTML5

• Touch events include:
o Touchstart: initiated when a finger is place on a DOM element
o Touchmove: when the object is dragged
o Touchend: when the object is released (finger is removed)
• Each touch event creates three lists:
o Touches: a list of all fingers currently on the screen
o targetTouches: list of fingers on the DOM
o changedTouches: all fingers involved in the current event
LECTURE Lesson 1.3
Best practices for designing for mobile devices

• Prevent zooming
• Prevent scrolling
• Render carefully
Touch-Enabled Demonstration
• Add touch interaction that handles input from:

o mouse
o finger
o pen
Touch-Enabled Devices
What are the pros and cons of touch-enabled devices?
Directions:
• Read the scenario in the activity and answers the questions.
• Work with a partner to brainstorm additional ideas for the site.
REVIEW Lesson 1.3
• Why is it important to test your application on multiple browsers?

• What are the features of an HTML5-based touch-enabled
application?
• How is a touch-enabled application tested?
MSDN Resources
HTML5 Tutorials http://msdn.microsoft.com/en-
us/ie/aa740476
Internet Explorer Test Drive http://ie.microsoft.com/testdrive/Default.ht
ml
Internet Explorer 9 Guide for http://msdn.microsoft.com/en-
Developers us/ie/hh410106
Other Resources
W3Schools http://www.w3schools.com/html5/
W3C Mobile Device Validator http://validator.w3.org/mobile/
Mobile Validator http://ready.mobi/
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 1
LESSON 1.4
Publish an application
to a store
OVERVIEW Lesson 1.4
• Publishing an application to:

o Windows ® Store
o Third-party stores
• Prior to publishing, how can you ensure that your application works
as expected?
• List the steps necessary to publish an application.
• What is the purpose of a launcher icon?
LECTURE Lesson 1.4
Publishing Tasks
1. Gather materials for release
Prepare EULA, get cryptographic keys, create application icon.
2. Configure application for release
Remove debugging and logging settings, configure manifest
settings, clean up project.
3. Build application for release
Build application for release and sign application.
PUBLISHING TASKS CONTINUED
4. Prepare remote servers
Prepare remote servers and services for production, update
resources for release.
5. Test application for release
Test the signed application for release and distribution.
Launcher Icons
• Create an icon using Expression® Design that follows these

guidelines:
o Communicates at a small size
o Works on a wide variety of backgrounds
o Is comparable in weight to other icons
Application Testing
• Identify the key components of testing an application prior to
publishing to an application store such as the Windows Store.
Directions:
• Recall an application that you have already created, or think of one
you want to create.
• Write a brief description of the application .
• Use Expression Design to create a launcher icon for the application.
REVIEW Lesson 1.4
• Prior to publishing, how can you ensure that your application works
as expected?
• List the steps necessary to publish an application.
• What is the purpose of a launcher icon?
MSDN Resources
Windows Store for developers http://blogs.msdn.com/b/windowsstore/arc
hive/2011/12/06/announcing-the-new-
windows-store.aspx
Windows Phone Marketplace http://msdn.microsoft.com/en-
us/library/hh202930(VS.92).aspx?ocid=otc
-n-nz-dca-gzdcao
Other Resources
Android Developers http://developer.android.com/guide/publis
hing/preparing.html
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 2
Build the User Interface by Using
HTML5
LESSON 2.1
Choose and configure
HTML5 tags to display
text content
OVERVIEW Lesson 2.1
• Choose and configure HTML5 tags to display text content

• How has HTML5 changed from HTML4 ?

• What does it mean when a tag is deprecated?
• What happens to existing HTML4 tags that have changed to HTML5?
LECTURE Lesson 2.1
New HTML5 Tags

• The World Wide Web Consortium (W3C) has partnered with
Microsoft®, Google, and others to research the most
commonly used id names for div tags, leading to new tags
such as <header>, <footer>, and others.
• In addition, W3C concentrated on a user-centric approach to
HTML by making it easier to separate content from design,
using native code and APIs in place of plug-ins.
• Other new tags were created to provide a semantic meaning
to the markup, such as <small> for a reduced font size, as in a
copyright statement.
LECTURE Lesson 2.1
Displaying Text Using HTML5

• HTML5 includes many of the HTML4 tags, deprecates some tags,
and adds some new ones.
• <acronym> has been combined into <abbr> (therefore, <acronym>
is a deprecated tag).
• <mark> is a new tag that applies a yellow background.
• HTML5 design strongly emphasizes the separation of content from
design by using CSS.
• The font tag is no longer used; instead, font attributes must be
declared using CSS.
• Big and center tags have been deprecated; instead, use CSS font
attributes and text-align to achieve the same style.
Web Page Created with HTML5

In this demonstration, you will see how a page created with HTML5
appears in a browser:
– Create an HTML5 document

– Open a web browser
– View the new page
HTML5 Support
If HTML5 is not fully supported by all browsers, does it make sense to
use it now?
Directions:
• Read the scenario in the In-Class Activity.
• Use the resources mentioned in this PowerPoint ® presentation and
your own investigative skills to answer the questions.
• Part of the activity includes creating an HTML5 page with the
following new tags:
– Header
– Footer
– Small
– Mark
REVIEW Lesson 2.1
• How has HTML5 changed from HTML4 ?

• What does it mean when a tag is deprecated?
• What happens to existing tags that have changed from HTML4 to
HTML5?
MSDN Resources
Internet Explorer® http://msdn.microsoft.com/en-us/ie/aa740476
Learning:
Learn HTML5 in 5 http://msdn.microsoft.com/en-us/hh549253
Minutes
Other Resources
Complete set of HTML5 http://dev.w3.org/html5/markup/elements.html#el
elements ements
W3 Schools http://www.w3schools.com/html5
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 2
HTML5
LESSON 2.2
HTML5 tags to display
graphics
OVERVIEW Lesson 2.2
• When, why, and how to use the canvas element

• When, why, and how to use Scalable Vector Graphics (SVG)
• What criteria determine whether the developer uses the <canvas>

tag or the <svg> tag?
• Why is it recommended to use transformations when drawing on

the canvas?
• What code can developers include to test for browser support of the
new HTML5 <canvas> tag?
LECTURE Lesson 2.2
Canvas Compared to SVG Performance

• Consider performance comparison when choosing a drawing medium.
LECTURE Lesson 2.2
Canvas Compared to SVG Selection Factors

Canvas SVG
An HTML element built into the A separate language written in
browser. XML.
Pixel-based, immediate-mode Shape-based, retained-mode
graphics system that works best graphics system that works
with a smaller surface or a better with a larger surface or a
larger number of objects. smaller number of objects.
Better for complex scenes, real- Better for static images and
time mathematical animations, high-fidelity documents for
high-performance elements viewing and printing.
(filters and ray tracers), and
video manipulation.
LECTURE Lesson 2.2
Canvas Compared to SVG for Modifying Images

Canvas SVG
Drawn images cannot be Objects are part of the
modified by scripting and Document Object Model
CSS. (DOM); they can be
modified by scripting and
CSS at any time.
Image types are bitmaps Vector graphics are scalable.
and not easily scalable.
LECTURE Lesson 2.2
Canvas Specifications
• The Canvas element uses a standard HTML5 header, <!doctype
html>, so that browsers can distinguish it as part of the HTML5
specification.
• The <canvas> tag is included in the body and must specify the
width and height.
• An ID is assigned to the tag so that it can be part of the Document
Object Model (DOM).
• The developer also must specify which function is called when the
canvas is clicked.
• The <script> portion of the page has two sections: one for drawing
the user interface and the other for processing the click event on the
user interface.
How to Use the New <canvas> Element in HTML5

• Define a canvas element.
• Provide alternative displays if it is not supported by a browser.
• Add JavaScript to draw an image to the canvas.
Note: the canvas starts at position 0,0 in the upper-left corner.
X- direction
Y- direction (note, it is a positive Y value)

• Which element is better for displaying real-time data and why?
• What types of websites use real-time data?

Directions:
• Read the scenario.
• Open the URL provided.
• Read the entire section before beginning to create a game.
• Working in pairs, have one person program the game using SVG,
and have the other program using the canvas.
• Answer the questions in the activity.
REVIEW Lesson 2.2
• What criteria determine whether the developer uses the <canvas>

tag or the <svg> tag?
• Why is it recommended to use transformations when drawing on

the canvas?
• How can developers accommodate browsers that do not support

the HTML5 canvas?
MSDN Resources
Internet Explorer® Learning - http://msdn.microsoft.com/en-
HTML5 us/ie/aa740476
HTML5 Graphics http://msdn.microsoft.com/en-
us/library/gg589511(v=VS.85).aspx
Other Resources
Modernizr http://www.modernizr.com/
The Canvas Element http://www.w3.org/TR/html5/the-canvas-
element.html#the-canvas-element
Lubbers, Peter; Albers, Brian; Smith, Ric; Salim, Frank (2010-09-01). Pro HTML5
Programming: Powerful APIs for Richer Internet Application Development (Kindle
Location 161). Apress. Kindle Edition. later lesson?
98-375: OBJECTIVE 1
LESSON 1.1
Understand the
platform fundamentals
OVERVIEW Lesson 1.1
• Packaging and the run-time environment, including:

o App package
o App container
o Credentials/permission sets
o Host process
o Leveraging existing HTML5 skills and content for slate/tablet
applications
• How does a web designer accommodate the various devices that

might be used to view a website?
• What must be considered when selecting a host for your website or
application?
• How can HTML5 enhance the user experience on a slate or tablet
hardware platform?
LECTURE Lesson 1.1
Application Package and Application Container

• An application local package is an application container that can be
used to install your application on your local machine or another
computer for testing and then final implementation.
• To package a website:
o Microsoft® Expression® Web: Select Site, Export to Web Package.
• Install and run the package
o Copy the test layout folder and its contents to the test computer (this is
created from the prior step).
o Import the Web Package on the test computer for testing.
Packaging your website or application

• Create a local package for testing on another machine.

o The target machine must have Expression Web installed to import and
test the new site.
LECTURE Lesson 1.1
Credentials and Permission Sets

• When preparing to deploy your application or website, it is
important to consider the security measures needed for the site and
data.
• The client must present the proper credentials.
o Users must be registered and sign in with correct user name and
password.
LECTURE Lesson 1.1
Host Process
• With the variety of products that users can use to view a website or
application, it is even more critical to choose the right host.
• To become active, a service must be hosted within a run-time
environment that creates it and controls its context and lifetime.
• A hosting environment must meet the needs of the application
deployment, such as:
o IIS - Internet Information Services
o Managed application
o Windows® Services
LECTURE Lesson 1.1
Leveraging HTML5 Skills and Content

• Web applications are web pages that provide a focused solution to a
task and conform to certain display guidelines.
• Slate or tablet application guidelines
o Optimize web pages correctly.
o Scale content for the graphics device.
o Use HTML5 content to check for browser compatibility and
accommodate the display for a slate or tablet device.
1. What is meant by development platforms? For example, a program

might be created to run on a Windows desktop platform. Can you
think of addition platforms that should be considered?
2. What is the current version of each platform?
3. Look at the Internet Explorer® 9 Guide for Developers:

http://msdn.microsoft.com/en-us/ie/hh410106.aspx
4. What HTML5 features are included in Internet Explorer 8? What

new features are in Internet Explorer 9?
Directions:
• Read the scenario described in the In-class Activity document.
• Answer the questions that follow.
REVIEW Lesson 1.1
• How does a web designer accommodate the various devices that

might be used to view a website?
• What must be considered when selecting a host for your website or
application?
• How can HTML5 enhance the user experience on a slate or tablet
hardware platform?
MSDN Resources
Building Apps with HTML5: http://msdn.microsoft.com/en-
What You Need to Know us/magazine/hh335062.aspx
MSDN® Developer Samples: http://code.msdn.microsoft.com/site/search?f%5B0%5
Learn Through Code D.Type=Technology&f%5B0%5D.Value=HTML5
Learn HTML5 in 5 Minutes! http://msdn.microsoft.com/en-us/hh549253
New! HTML 5 and CSS: Six http://blogs.msdn.com/b/mis_laboratory/archive/2011
Complete Lessons /10/18/new-html-5-and-css-six-complete-lessons.aspx
Other Resources
W3 Schools http://www.w3schools.com/html5/default.asp
A vocabulary and associated http://dev.w3.org/html5/spec/Overview.html
APIs for HTML and XHTML
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 2
HTML5
LESSON 2.3
HTML5 tags to play
media
OVERVIEW Lesson 2.3
• Video and audio tags

• What are the advantages and disadvantages of using the new

<audio> and <video> tags available in HTML5?
• What types of controls are available for audio and video?
• What file types are recommended for audio and video?

LECTURE Lesson 2.3
Benefits of Using Audio and Video Tags

• Semantic tags make it easier for search engines (rather than generic
object tags).
• Not vendor-specific.
• No additional plug-ins or software are required.
• These elements are part of the Document Object Model (DOM),
which provides more control over them through scripting and
Cascading Style Sheets (CSS).
• They make it easier to add video and audio to a web page.
LECTURE Lesson 2.3
Drawbacks of Using Audio and Video Tags

• Not supported by Internet Explorer® 8 and earlier.
• Lack of common codec support.
• Video must be produced in at least two or three formats.
• Currently supports .mp4 (or H.264) .ogg/Theora, WebM video types.
• iOS only supports H.264.
• Streaming audio and video is not supported.
LECTURE Lesson 2.3
Using Audio
• With HTML5, you can add a music player to a web page without
requiring a third-party plug-in or add-on.
• Tags specify the sound or audio content, such as music or effects, to
be played in a document.
• The control attribute adds audio controls, such as play, pause, and
volume.
• It is a good practice to add text content between the <audio> and
</audio> tags for browsers that do not support the <audio>
element.
LECTURE Lesson 2.3
Using Video
• Video files contain audio tracks, video tracks, and additional
metadata that are combined at run time to play the video.
• Coders/decoders are algorithms used to encode and decode both
audio and video. Raw files are huge and too large to travel across
the Internet.
• The video tag requires a height and width attribute.
• The controls attribute is a Boolean attribute that specifies that video

controls should be displayed.
• Controls include:
• Play, pause, seeking, volume, fullscreen toggle, captions/subtitles, track
JavaScript Control for Audio Files
• Include an audio tag in HTML5.

• Add a button to allow the user to restart the audio.
• Add a second button that skips the first 30 seconds.
Audio and Video Compression

• Why is it necessary to compress audio and video for playback in a
web browser?
• What does compression do?

Directions:
• Search the HTML5 sites for a definition of the video tag poster
attribute.
• Create a one-page website for Margie’s Travel.
• Add an HTML5 page that uses a poster to introduce a video on a
“how to” topic, such as “How to say Hello in French.“
REVIEW Lesson 2.3
• What are the advantages and disadvantages of using the new

<audio> and <video> tags available in HTML5?
• What types of controls are available for audio and video?
• What file types are recommended for audio and video?

MSDN Resources
HTML5 Audio and Video http://msdn.microsoft.com/en-
us/library/gg589509(v=VS.85).aspx
Internet Explorer 9 Guide for http://msdn.microsoft.com/en-
Developers us/ie/hh410106#_HTML5_video_audio
Other Resources
W3C Audio Element Definition http://www.w3.org/TR/html5/the-iframe-
element.html#the-audio-element
W3C Video Element Definition http://www.w3.org/TR/html5/the-iframe-
element.html#the-video-element
HTML5 Tutorial http://www.w3schools.com/html5/default.a
sp
Lubbers, Peter; Albers, Brian; Smith, Ric; Salim, Frank (2010-09-01). Pro HTML5
Programming: Powerful APIs for Richer Internet Application Development (Kindle
Location 161). Apress. Kindle Edition.
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 2
HTML5
LESSON 2.4
HTML5 tags to
organize content and
forms
OVERVIEW Lesson 2.4
• Tables
• Lists
• Sections
• Semantic HTML
• What does the term “semantic tag” mean?
• Explain how the new HTML5 section tags are used to organize
content and forms.
LECTURE Lesson 2.4
Tables in HTML5
• HTML5 did not change the syntax for creating a table on a web
page, but it is important to review the table attributes because
HTML5 no longer supports these attributes.
• Developers will need to use Cascading Style Sheets (CSS) instead.
• Some of the attributes not supported:
» <table> does not support: cellpadding, cellspacing, frame, rules,
summary, and width.
» <td> and <th> do not support attributes: abbr, align, height, valign,
width, and more.
» <thead> and <tr> do not have any supported attributes.
LECTURE Lesson 2.4
Lists
• With HTML5, the input element can contain a list attribute.
• With this attribute, the developer can provide a list of values for the user
to choose from or add his or her own value.
• This list is referred to as a datalist. Example:
<input list = “browsers” autocomplete />
<datalist id=“browsers”>
<option value = “Internet Explorer”>
<option value = “Firefox”>
<option value = “Google Chrome”>
<option value = “Opera”>
<option value = “Safari”>
</datalist>
LECTURE Lesson 2.4
Sections
• Sectioning elements are added to organize content into logical
divisions of the document.
• Using sections is great for creating outlines and provides an easy
format for interacting with the page programmatically.
• HTML5 includes additional sectioning elements that are useful for
organizing content:
• <article>, <aside>, <nav>, <section>
• <header>, <footer>, <hgroup>
LECTURE Lesson 2.4
Examples of New HTML5 Section Tags

• <article>: content that can stand alone in syndication, such as a
magazine or newspaper article, a blog post, or a blog comment.
• <aside>: related to the surrounding content.
• <nav>: defines a section of navigation links.
• <header>: specifies an introduction, or a group of navigation
elements for a document.
• <footer>: typically contains the author of the document,
copyright information, links to terms of use, contact information, etc.
• <hgroup>: used to group a set of <h1> to <h6> elements when a
heading has multiple levels (subheadings).
LECTURE Lesson 2.4
Syntactic to Semantic
• All new HTML5 tags are defined with meaningful semantic names
such as <mark>, which is used to mark/highlight text, <meter>,
<progress>, <time>, etc.
• HTML5 tags are redefining the meaning of the HTML tag.
• Examples:
» "My name is <em>Peggy</em> not Margaret” (adds emphatic
stress to the word Peggy).
» Acronyms and abbreviations are combined into one tag:
<abbr title=“Microsoft Developer
Network”>MSDN</abbr>
Creating an Outline
• Increase accessibility and usability

• Use the new <section> tag to create an outline
• Use the site: http://gsnedders.html5.org/outliner/ to test the new
page
Using HTML5 to Create a Blog

• What is the layout of a blog?
• What HTML5 tags can be used to set up the content and

organization of a blog?
Directions:
• Use the information from the discussion questions on the previous
slide to draw the layout of a blog page.
• Identify each section of the blog using the new HTML section tags:
header, hgroup, nav, article, and aside.
• Use Microsoft® Expression® Web to create a one-page website.
• Add the HTML5 tags to create the layout of a blog page.
REVIEW Lesson 2.4
• What does the term “semantic tag” mean?
• Explain how the new HTML5 section tags are used to organize
content and forms.
MSDN Resources
Internet Explorer® Learning – http://msdn.microsoft.com/en-
HTML5 us/ie/aa740476
Internet Explorer 9 Developer http://msdn.microsoft.com/en-
Guide > HTML5 – Internet us/ie/hh410106
Explorer 9 Guide for Developers
Other Resources
HTML5 Outlines http://webdesign.about.com/od/html5tutor
Why HTML5 Outlines Are ials/a/html5-outlines.htm
Important
W3 Schools http://www.w3schools.com/html5/html5_re
ference.asp
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 2
HTML5
LESSON 2.5
HTML5 tags for input
and validation
OVERVIEW Lesson 2.5
• Choose and configure HTML5 tags for input and validation.

• What do the new form elements (progress, meter, datalist, keygen,

and output) add to a web page?
• HTML5 introduces 13 new input types and several new input

attributes. How are these new types used to make user interaction
easier?
• How does the use of semantic tags make creating forms easier?
LECTURE Lesson 2.5
New Form Fields

• Progress: used to display the status of something being downloaded
or uploaded.
• Meter: a scalar measurement that can include a range of values.
• Datalist: combines a drop-down list and text input for items not in
the list.
• Keygen: defines a key-pair generator field (when the private key is
stored locally, and the public key is sent to the server).
• Output: represents the result of a calculation (similar to one
performed by a script).
LECTURE Lesson 2.5
New Input Types and Input Validation

• <input> elements are used within a <form> element to declare
input controls that allow users to input data.
• HTML5 has introduced many new input types such as:
• List (which refers to a <datalist>)
• Email (includes validation)
• URL (includes validation)
• Tel (no validation, but can include placeholder text and a pattern
attribute)
• Color (includes validation)
• Date (defines a date control)
• Number
LECTURE Lesson 2.5
New Input Element Attributes

• Autocomplete: specifies whether an <input> element should
have autocomplete enabled.
• Autofocus: specifies that an <input> element should
automatically get focus when the page loads.
• Height/width: specifies the height and width of an <input>
element (only used for image types).
• List: refers to a <datalist> element that contains predefined
options for an <input> element.
• Min/max: specifies the min and max value of an <input>
element.
• Maxlength: specifies the maximum number of characters allowed
in an <input> element.
• Pattern: specifies a regular expression that an <input>
element's value is checked against (a type of mask).
Create a Form to Capture Contact Information

• Create a form.
• Add form input elements that use the new HTML5 syntax.
• Test it in a compatible browser.
New HTML5 Input Tags and Attributes

• Because the new tags and attributes provide the added value of
validation, usability, and accessibility, should all existing sites be
updated to take advantage of this new technology? Why or why not?
Directions:
• This activity is designed to use the new HTML5 tags for inputting
data, validating data, including data lists, and providing placeholder
text.
• Review the list of new input types.
• Use the new types to convert existing form data to specific field
types for better data validation.
REVIEW Lesson 2.5
• How are the new form elements (progress, meter, datalist, keygen,
and output) providing added value to a web page?
• HTML5 introduces 13 new input types and several new input

attributes. How are these new types used to make user interaction
easier?
• How does the use of semantic tags help make building forms easier?
MSDN Resources
Better Web Forms with HTML5 http://msdn.microsoft.com/en-
Forms us/magazine/hh547102.aspx
Internet Explorer® Learning http://msdn.microsoft.com/en-
us/ie/aa740476
Other Resources
Making Forms Fabulous with http://www.html5rocks.com/en/tutorials/fo
HTML5 rms/html5forms/
W3 Schools http://www.w3schools.com/html5
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 3
Format the User Interface by
Using CSS
LESSON 3.1
Understand the core
CSS concepts
OVERVIEW Lesson 3.1
• Separating presentation from content

• Managing content flow
• Managing positioning of individual elements
• Managing content overflow
• Basic Cascading Style Sheets (CSS) styling
• Why is it important to separate style from content?
• How does CSS manage positioning elements on a page?
• How does CSS apply presentation to content?

LECTURE Lesson 3.1
Separating Presentation from Content
• Create content with HTML and style content with CSS.
• The HTML content and CSS style must be coordinated using HTML
tags, and selectors such as ids and classes.
• Create this sentence: Welcome to the wonderful world of CSS
» HTML code: <h1 id=“welcome”>Welcome to the wonderful
world of CSS</h1>
» CSS code: #welcome { font-family: “Tempus Sans ITC”;
color: red;}
• All future HTML tags that use the id=“welcome” will be formatted in the
same style.
LECTURE Lesson 3.1
Managing Content Flow

• Inline and block flow describe the spacing and line breaks for the
content included in the tag.
• A block element, such as a div tag, typically starts a new line and is
sized according to the width of the parent container.
• Examples of block elements: <h1>, <p>, <div>
• An inline element, such as a span, typically does not start a new line
and is sized according to the height and width of its own content.
• Examples of inline elements: <span>, <a>
LECTURE Lesson 3.1
Managing Positioning of Individual Elements
• Float vs. absolute positioning.

• A floated element is taken out of the normal flow and pushed to the
right or left of the parent element.
• Elements can float to the right or left. Any element that follows the
floated element will flow around the floated element on the other
side.
• An element with absolute positioning is located relative to the
upper-left corner of the browser.
LECTURE Lesson 3.1
Managing Content Overflow
• The overflow property specifies what happens if the content is too

large to fit into an element box.
• Overflow can be set to:
• Scroll: Overflow is clipped, but a scroll bar is added for viewing the extra
content.
• Visible: Overflow is not clipped; it renders outside the element’s box.
• Hidden: Overflow is clipped and the rest of the content is not visible.
Basic CSS Styling
• Setup HTML code to add “hooks” for styles.

• Create an external CSS file.
• Attach that file to the page and preview it in a browser.
What Is Meant by the CSS Box Model?

1. How is the box model used to style HTML elements?
2. What properties are included in the box model?
3. What part of the model is set to a specific height and width?

Directions:
• Read the scenario.

• Answers to the questions.
• Review your answers with a partner.
REVIEW Lesson 3.1
• Why is it important to separate style from content?
• How does CSS manage positioning elements on a page?
• How does CSS apply presentation to content?

MSDN Resources
Internet Explorer® Learning – http://msdn.microsoft.com/en-
CSS3 us/ie/gg593671
Cascading Style Sheets http://msdn.microsoft.com/en-
us/library/ms531205(v=vs.85).aspx
Other Resources
W3 Schools CSS Tutorial http://www.w3schools.com/css/default.asp
About: What is CSS? http://webdesign.about.com/od/xhtml/u/ht
mlcssxml.htm#s5
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 3
Format the User Interface by Using
CSS
LESSON 3.2
Arrange user interface
(UI) content by using
CSS
OVERVIEW Lesson 3.2
• Using the Flexible Box Model and grid layouts to establish content
alignment, direction, and orientation.
• Proportional scaling and the use of “free space” for elements within
a flexible box or grid.
• Ordering and arranging content.
• Concepts for using flexbox for simple layouts and grid for complex
layouts.
• Grid content properties for rows and columns.
• Using application templates.
• What additional features are added to the box model by using the
Flexible Box Model?
• What are the various ways to allocate excess space using the Flexible
Box Model?
• How does the new Flexible Box Model eliminate the need for using
float?
LECTURE Lesson 3.2
Using Flexible Box and Grid Layouts to Establish

Content Alignment, Direction, and Orientation
• The Flexible Box Model adds more options to the current box
model.
• These new options allow developers to easily change content
alignment, content direction, and content orientation.
• After a flex box is created, the developer can add child elements,
which reflect the alignment, direction, and orientation set for the
parent.
• The need to use float is eliminated.
• See next two slides for examples of using a flex box
FLEXIBLE BOX CONTINUED
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Example page using Flex Box</title>
<link href="flexboxForSimpleLayouts.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="flexbox">
<p class="box1">Box1</p>
</div>
</body>
</html>
Expected outcome:
CSS is listed on next page
FLEXIBLE BOX CONTINUED
#flexbox{ /* basic styling */

width: 200px; height: 300px; border: 1px solid #555; font: 14px Arial;
/* flexbox setup for safari and google chrome*/
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align:center;
/* flexbox setup for firefox */
display: -moz-box;
-moz-box-orient: horizontal;
/* flexbox setup for Internet Explorer 10 */
display: -ms-box;
-ms-box-orient: horizontal;
display: box;
box-orient: horizontal; }
.box1{width:50px;height:20px;border:thick silver solid;background-color:teal;}

.box2{width:50px;height:20px;border:thick silver solid;background-color:fuchsia;}
.box3{width:50px;height:20px;border:thick silver solid;background-color:yellow;}
LECTURE Lesson 3.2
Proportional Scaling and Use of “Free Space” for

Elements within a Flexible Box or Grid
• Allows browsers to use the size of the graphical device to scale the
web page accordingly.
• Builds a layout that is fluid but contains elements (such as images or
controls) that maintain their position and size relative to each other.
• Specifies how excess space is allocated by using the box-pack
property.
• Controls how excess space along a parent’s layout axis is
proportionately allocated to child elements by using the box-flex
property.
LECTURE Lesson 3.2
Ordering and Arranging Content

• Controls the direction that elements are laid out on the page (top-
to-bottom, left-to-right, right-to-left, or bottom-to-top).
• box-direction (normal, reverse, inherit)
• box-orient (horizontal, vertical, inline-axis, block-axis, or inherit)
• Elements can be reordered on the screen in an order that is different
from how they are specified by the Document Object Model (DOM).
LECTURE Lesson 3.2
Concepts for Using Flexbox for Simple Layouts and

Grid for Complex Layouts
• Using the new value (box) for the display property gives us access to
these attributes:
– box-orient Grid Properties:
– box-pack – grid-columns
– box-align – grid-rows
– box-flex
– box-ordinal-group
– box-direction
– box-shadow
LECTURE Lesson 3.2
Grid Content Properties for Rows and Columns

• Using the grid property enables the developer to divide space for
major regions of a webpage or web app and to define the
relationship between parts of an HTML control in terms of size,
position, and layer.
• This removes the need to create a fixed layout, which cannot take
advantage of available space within the browser window.
• It is similar to the concept of a table, allowing columns to span rows
and vice-versa.
LECTURE Lesson 3.2
Using Application Templates

• Templates allow elements to be placed in a visual order independent
of their source order, providing a type of wire frame for the page to
be filled in later with content.
• Template-based positioning is an alternative to absolute positioning.
• Using application templates provides consistency and repetition in a
website.
Using the Flexbox

In this demonstration, you will see how a page can be created using
flexbox:
– Use the HTML file and CSS file included for this lesson.
– View the new page using Internet Explorer®; notice that the new
styles are applied but the orientation is not horizontal (available in
Internet Explorer 10).
– If available, use Safari to see how the flexbox properties align the
boxes horizontally.
Using CSS to Arrange Elements on the Screen

How does the flexbox property make the relative position and size of
elements remain constant, even as screen and browser window sizes
vary and change?
Directions:
• Read the scenario in the In-class Activity
• Use the resources mentioned in this PowerPoint ® presentation and
• Part of the activity includes drawing a web page with a flexbox
container and identifying the following properties:
– box-orient
– box-pack
– box-align
– box-flex
– box-direction
REVIEW Lesson 3.2
• What additional features are added to the box model by using the
Flexible Box Model?
• What are the various ways to allocate excess space using the Flexible
Box Model?
• How does the new Flexible Box Model eliminate the need for using
float?
MSDN Resources
Flexible box (“Flexbox”) http://msdn.microsoft.com/en-
Layout us/library/hh673531(v=vs.85).aspx
CSS http://msdn.microsoft.com/en-
us/library/hh673536(v=vs.85)
Other Resources
Test Drive Hands-on: http://ie.microsoft.com/testdrive/Graphics/hands-
Windows® 8 HTML5 on-css3/hands-on_flex.htm
Platform
HTML5 Rocks http://www.html5rocks.com/en/tutorials/flexbox/q

uick/
W3 Schools http://www.w3schools.com/cssref/default.asp#flex
box
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 3
CSS
LESSON 3.3
Manage the flow of
text content by using
CSS
OVERVIEW Lesson 3.3
• Regions and using regions to flow text content between multiple

<div> sections – content source, content container, dynamic flow,
flow-into, flow-from, msRegionUpdate, msRegionOverflow,
msGetRegionContent().
• Columns and hyphenation and using these CSS settings to optimize
the readability of text.
• Using “positioned floats” to create text flow around a floating object.
• How can a website with Cascading Style Sheets 3 (CSS3) be used to

display text for an online magazine or newspaper?
• Without using the new region or multi-column properties, how

can a developer get continuous text to display in multiple columns?
• What new CSS3 properties can help when the words are too long to
fit in the content container?
LECTURE Lesson 3.3
Regions and Using Regions to Flow Text Content
between Multiple <div> Sections
• Content source, content container, dynamic flow, flow-into, flow-
from, msRegionUpdate, msRegionOverflow, msGetRegionContent().
• Provides pagination for HTML content.
• Defines content sources using the flow-into and flow-from.
• Regions are content containers that use msRegion Update,
msRegion Overflow, and msGetRegionConent().
• Developers and designers can take a single HTML content stream of
text and images and segment that stream into multiple empty
containers defined in a standard HTML template.
• Provides a more suitable layout for varying graphic devices such as a
tablet.
REGIONS CONTINUED
• Multiple regions of the same flow of content (text, related pictures,

video, and so on) are shaped around unrelated content elements,
such as alternate stories or advertisements.
• CSS Regions enable content placed in a target container to take on
the styling of that container.
LECTURE Lesson 3.3
Columns and Hyphenation and Using These CSS

Settings to Optimize the Readability of Text
• Multi-column layout enables content to be flowed into multiple
columns that retain a gap and an optional rule between them.
• It also makes it possible to vary the number of columns based on
the size of the browser window.
• Hyphenation and columns are related. Columns are used to split
text, and this property allows the browser to hyphenate words
according to a built-in dictionary.
LECTURE Lesson 3.3
Using “Positioned Floats” to Create Text Flow

around a Floating Object
• CSS positioned floats allow you to create web pages in which text
and other content can wrap around specific elements.
• A positioned float can be absolutely positioned relative to a
container, allowing text to flow around it.
Create a web page that allows text to break across

columns
In this demonstration, you will see how a page created with the CSS3
multi-columns property can be used to place content in columns:
– Open the HTML file for this demonstration.

– Preview it in a browser (Internet Explorer® 10 or Safari) if possible.
– View the new page, and explain how the content is continuous, but
when viewing the page it is divided into columns.
Flow of Text
Compare and contrast the current ways to organize text on a page vs.
using the regions, columns, and hyphenation properties available with
CSS3.
Prior to CSS3 Using CSS3

Directions:
• Read the scenario in the In-class Activity.
• Use the resources mentioned in this PowerPoint® presentation and
• Part of the activity includes creating an HTML5 page with CSS
properties for creating regions in a web page.
REVIEW Lesson 3.3
• How can a website with Cascading Style Sheets 3 (CSS3) be used to

display text for an online magazine or newspaper?
• Without using the new region or multi-column properties, how can

a developer get continuous text to display in multiple columns?
• What new CSS3 properties can help when the words are too long to
fit in the content container?
MSDN Resources
Regions http://msdn.microsoft.com/en-
Hyphenation us/library/hh673536(v=VS.85).aspx
Multi-Column Layout
Windows® Dev Center http://msdn.microsoft.com/en-
Positioned Floats us/library/windows/apps/hh453704.aspx
Other Resources
Adobe Developer http://www.adobe.com/devnet/html5/articles/css3
Connection/CSS3 -regions.html
Regions
W3 Schools CSS3 multi- http://www.w3schools.com/cssref/default.asp#mul
columns ticol
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 3
CSS
LESSON 3.4
Manage the graphical
interface by using CSS
OVERVIEW Lesson 3.4
• Graphics effects – rounded corners, shadows, transparency,

background gradients, typography, and Web Open Font Format.
• 2D and 3D transformations – translate, scale, rotate, skew, and 3D
perspective transitions and animations.
• SVG filter effects.
• Canvas.
• How can the new Cascading Style Sheets 3 (CSS3) properties enable
the use of fonts that are not pre-loaded on a client PC?
• What are the benefits of adding graphic visual effects such as

border-radius, 2D and 3D transformations, and SVG filters?
• What impact does CSS3 have on the new HTML5 tags used for a
drawing canvas and SVG elements?
LECTURE Lesson 3.4
Graphics Effects – Rounded Corners, Shadows,

Transparency, and Background Gradients
• Using rounded corners, shadows, transparency and background
gradients can make the site appear “softer,” friendlier, and visually
appealing.
• Graphics effects can be applied to any element on a web page.
GRAPHICS EFFECTS CONTINUED
Graphics Effects – Typography and Web Open

Font Format
• Adding custom fonts to a web page is much easier with new
CSS3 styles such as Web Open Font Format (WOFF).
• WOFF offers an alternative to only using fonts currently
installed on end-user PCs.
• WOFF is a compressed wrapper for other font formats such
as TrueType, OpenType, or Open Font Format.
• A downloaded or new font can be added using @font-
face, which includes a reference to the URL containing the
font file.
LECTURE Lesson 3.4
2D and 3D Transformations
• Translate, scale, rotate, skew, and 3D perspective transitions and
animations.
• The translate() method moves the element from its current
position, depending on the parameters given for the left (X-
axis) and the top (Y-axis) position.
• The scale() method increases or decreases the size of the
element, depending on the parameters given for the width (X-
axis) and the height (Y-axis); this value is multiplied by the
current values.
• Example: scale(2,3) doubles the width and triples the height.
• With the rotate() method, the element rotates clockwise at a
given degree. Negative values are allowed and rotate the element
counter-clockwise.
TRANSFORMATIONS CONTINUED
• 3D* Transformations work similar to 2D, except they have an

additional value for the z-axis.
• The 3D perspective property defines how many pixels a 3D

element is placed from the view. This property allows you to
change the perspective on how 3D elements are viewed.
• There are six animation properties: animation-name, animation-

duration, animation-timing-function, animation-delay, animation-
iteration-count, and animation-direction.
*3D is not supported at this time; check the list of browser support.
2D TRANSFORMATIONS – EXAMPLES
LECTURE Lesson 3.4
SVG Filter Effects
• SVG filter effects are effects applied to Scalable Vector Graphics

(SVG) files. They add special effects to the graphic.
• To apply a filter effect to a graphics element or a container element,
the 'filter' property is set on a given element.
• A filter is applied to an SVG element via the filter attribute, in the
form of filter="url(#filterId)", or it can be applied as a CSS
property filter:url(#filterId).
LECTURE Lesson 3.4
Canvas
• The <canvas> tag is new to HTML5, and it is included in the body

tag with a width and height.
• The new CSS styles can be applied, giving the canvas rounded
corners, background color, and even a shadow effect.
Adding a New Font to a Web Page

In this demonstration, you will see how to use the @font-face property
to use a font that might not be pre-installed on the client machine.
• Unzip the resources file for this lesson.

• Make sure both files are unzipped to the same location.
• Use a browser to open the NewFontFace.html page.
• The page should display the new paragraph text with a new font.
Why is Typography Important?

Several sans serif and serif fonts are already available to web designers.
What is the benefit of the @font-face property?
Directions:
• Use the resources in this presentation and your own investigative
skills to answer the questions.
• In this activity, you will add rounded borders and 2D transformation
styles to elements on an HTML page.
REVIEW Lesson 3.4
• How can the new Cascading Style Sheets 3 (CSS3) properties enable
the use of fonts that are not pre-loaded on a client PC?
• What are the benefits of adding graphic visual effects such as

border-radius, 2D and 3D transformations, and SVG filters?
• What impact does CSS3 have on the new HTML5 tags used for a
drawing canvas and SVG elements?
MSDN Resources
Microsoft® Typography http://www.microsoft.com/typography/WEFT.mspx
How to Add Rounded http://msdn.microsoft.com/library/gg589503.aspx
Corners with CSS
Internet Explorer® http://msdn.microsoft.com/en-us/ie/gg593671
Learning – CSS3
Other Resources
W3 Schools CSS3 http://www.w3schools.com/css3/default.asp
Google Web Fonts http://code.google.com/webfonts
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 4
Code by Using JavaScript
LESSON 4.1
Manage and maintain
JavaScript
OVERVIEW Lesson 4.1
• Variable naming and techniques to avoid naming collisions within a

global scoped environment.
• Creating and using functions.
• Using Windows® Library for JavaScript, jQuery, and other third-party
libraries.
• What is the difference between a global and a local variable?
• How can you avoid problems if a browser does not support

JavaScript?
• What is the purpose of using Windows Library or jQuery for

JavaScript in your website?
LECTURE Lesson 4.1
Variable Naming and Techniques

• Avoid naming collisions within a global scoped environment.
• Global variable names should start with an underscore, cannot contain
spaces, and are case sensitive, ie: _globalVariable=6;
• A variable is declared with the keyword var followed by the variable
name.
• Example: var lastName; This is a local variable; therefore, it starts with
a lowercase letter.
• Variable names cannot be the same as any reserved words, such as
var, int, if, else.
• Give unique names to variables, especially when your program
includes methods from outside your code such as jQuery.
LECTURE Lesson 4.1
Creating and Using Functions
• To create a function (a block of code designed to perform a certain

action), you must give the function a name.
• Functions allow more control over when the code is executed.
• Events can be used to trigger a function to execute.
• Functions can receive values by enclosing them in the parenthesis,
and they can also return values, such as the result of a calculation.
• To call a function, specify the function name and any required values
in parenthesis.
LECTURE Lesson 4.1
Using Windows Library for JavaScript, jQuery, and

Other Third-Party Libraries
• JavaScript has several built-in functions.
• Windows Library, jQuery, and other third-party libraries provide
other common objects, functions, and properties that can be used in
your JavaScript program. This is also known as an API.
Writing a JavaScript Function

In this demonstration, you will see how adding JavaScript to a page can
make the page dynamic and interactive.
What are the benefits of saving JavaScript in an external file?

Directions:
• Create an HTML5 page with JavaScript and test it in a browser.
REVIEW Lesson 4.1
• What is the difference between a global and a local variable?
• How can you avoid problems if a browser does not support

JavaScript?
• What is the purpose of using Windows Library or jQuery for

JavaScript in your website?
MSDN Resources
JavaScript Fundamentals http://msdn.microsoft.com/en-
us/library/6974wx4d(v=VS.94).aspx
JavaScript Reference http://msdn.microsoft.com/en-
us/library/yek4tbz0(v=VS.94).aspx
Windows Library for http://msdn.microsoft.com/en-
JavaScript Reference us/library/windows/apps/br211669.aspx
Other Resources
jQuery Documentation http://docs.jquery.com/Main_Page
W3 Schools JavaScript http://www.w3schools.com/js/default.asp
Tutorial
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 4
LESSON 4.2
Update the UI by using
JavaScript
OVERVIEW Lesson 4.2
• Locating/accessing elements.
• Listening to and responding to events.
• Showing and hiding elements.
• Updating the content of elements.
• Adding elements.
• How can JavaScript be used to change the appearance of a web

page?
• What events can be used to trigger a JavaScript function?

LECTURE Lesson 4.2
Locating/Accessing Elements
• When the browser loads a new web page, it creates an outline for all
the tags on the page. This is called the Document Object Model
(DOM).
• Each tag is referred to as an element on the page.
• JavaScript finds and accesses these elements by using the element
ID field or the tag name.
• Example:
<p id=“message”>This is a special message</p>
....
var message = document.getElementById(‘message’);
• After the element is located, JavaScript can be used to add to it,
change it, or remove it from the web page.
LECTURE Lesson 4.2
Listening to and Responding to Events
• JavaScripts in an HTML page will automatically execute, but that is

not always what we want to happen.
• Instead, JavaScript functions can be placed in the <head> section of
the document and only invoked when an event occurs, such as when
a user clicks a button.
• Some common events:
– A mouse click
– A web page or an image loading
– Mouse positioned over a hotspot on the web page
– Selection of an input field in an HTML form
LECTURE Lesson 4.2
Showing and Hiding Elements
• Using the display property allows the developer to show or hide an

element. This can be controlled with JavaScript.
• The code display: none; hides the entire element.
• The display property has many other values including: block, inline,
list-item, table, and more.
LECTURE Lesson 4.2
Updating the Content of Elements

• JavaScript can be used to locate and access elements on a web
page. Once the tag or ID is located, code can update content of that
element. Example:
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
• Code can also change the attributes of an element.
LECTURE Lesson 4.2
Adding Elements
• Use document.createElement(sTag) to add an element to a
page.
• You must perform a second step when you use createElement to
create the input element.
– The createElement method generates an input text box by default.
• To insert any other kind of input element, first invoke

createElement for input, and then set the type property to the
appropriate value in the next line of code.
• Attributes can be included with the (sTag) if the entire string is

valid HTML code.
Adding Elements Using JavaScript

In this demonstration, you will see how to dynamically add elements to
an HTML document.
What happens, if when using JavaScript to search for a tag name, there
are multiple tags with the same name?
Directions:
• Create an HTML5 page that includes JavaScript that responds to
events.
REVIEW Lesson 4.2
• How can JavaScript be used to change the appearance of a web

page?
• What events can be used to trigger a JavaScript function?

MSDN Resources
JavaScript Language http://msdn.microsoft.com/en-
Reference us/library/d1et7k7c(v=VS.94).aspx
JavaScript Reference http://msdn.microsoft.com/en-
us/library/windows/apps/yek4tbz0(v=vs.94).aspx
Other Resources
JavaScript Kit http://www.javascriptkit.com/javatutors/
W3 Schools JS & DOM http://www.w3schools.com/jsref/dom_obj_event.asp
Reference
Textbook: JavaScript & McFarland, D. S. (2012). JavaScript & JQuery.
jQuery Sebasopol: O'Reilly Media, Inc.
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 4
LESSON 4.3
Code Animations by
Using JavaScript
OVERVIEW Lesson 4.3
• Using the animation library.

• How can JavaScript be used to create animations?
• What are the benefits of using an animation library?

LECTURE Lesson 4.3
Animations
• Most animations on websites are created by using JavaScript. An
animation is the illusion of movement or the appearance of motion.
• Examples of animations include:
• Scrolling banners
• Popup boxes
• Fading images or pages in and out
• Mouse-over effects
• Movement of objects
• Animation of the first page
• Image slide shows
• Counting down/up to a certain date and/or time
LECTURE Lesson 4.3
Using the Animation Library

• Several animation libraries provide APIs (Application Program
Interfaces) for easy creation of animations.
• The jQuery library has several effects that can be used to create animations,
such as pop-ups, tooltips, and slide shows.
• The Windows® libraries for JavaScript are included in the new Metro-styled
applications.
• The Yahoo User Interface (YUI) library is another source for animation.
Using the Animation Library
In this demonstration, you will see how to include the jQuery library
functions to create an animated effect.
Why is it important to understand mathematics and physics to create

realistic animations?
Directions:
• Use the resources mentioned in this presentation and your own
investigative skills to answer the questions.
• Part of the activity includes creating an HTML5 page that includes
animation from jQuery Library.
REVIEW Lesson 4.3
• How are animations created using JavaScript?
• What are the benefits of using an animation library?

MSDN Resources
Animating your UI http://msdn.microsoft.com/en-
us/library/windows/apps/hh465165.aspx
Windows Library for http://msdn.microsoft.com/en-
JavaScript reference us/library/windows/apps/br211669.aspx
Other Resources
SourceCodeOnline - http://www.sourcecodeonline.com/sources/
JavaScript javascript.html
jQuery API http://api.jquery.com/animate/
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 4
LESSON 4.4
Access Data Access by
Using JavaScript
OVERVIEW Lesson 4.4
• Sending and receiving data.

• Transmitting complex objects and parsing.
• Accessing databases and indexed databases.
• Loading and saving files.
• App Cache.
• Considering that HTTP is a stateless protocol, how is JavaScript used

to dynamically send and receive data?
• What is a JSON object and how is it used?
• How are indexed databases created and used with JavaScript?

LECTURE Lesson 4.4
Sending and Receiving Data

• JavaScript can send a request to a web server, which then
returns data to be used on the page using AJAX.
• AJAX Stands for Asynchronous JavaScript and XML
(eXtensible Markup Language).
• Creates a connection to the server and sends a request.
• Server responds to the request.
• Response is processed and page is updated by updating existing
DOM elements or adding new elements.
• AJAX can also be used to retrieve data from a text file.
AJAX CONTINUED
LECTURE Lesson 4.4
Transmitting Complex Objects and Parsing

• JavaScript Object Notation (JSON) is new in HMTL5.
• It is written in JavaScript but needs XML to be parsed.
• JSON is either a JavaScript object literal or a collection of
name/value pairs.
• The API for JSON has two functions: parse( ) and stringify( ).
• The web server sends a string to be converted using JSON.
• jQuery has a method for using JSON:
• getJSON( ) that converts the string to a valid JSON object – similar to
the get( ) and set( ) functions.
LECTURE Lesson 4.4
Accessing Databases and Indexed DB

• Client-side databases, which allow direct access using JavaScript, are
new to HTML5.
• This feature allows the developer to store structured data with
additional features such as group, iterate, search, and filter for these
JavaScript objects.
• Indexed DBs are object databases (not relational). Each record must
have a unique name and key to allow for sorting and retrieval.
• There are two methods for inserting data: add( )and put( ).
LECTURE Lesson 4.4
Loading and Saving Files

• HTML5 introduces a File API (only available in Internet Explorer® 10
or later).
• Files accessed by web pages are called blobs (binary large objects).
Each file object has a name and last modified date.
• With the new File API, developers can access local files on the client
machine directly without plugins.
• To update a file, the W3C is writing a specification for a BlobBuilder
API, which allows developers to manipulate a blob.
LECTURE Lesson 4.4
AppCache
• Application cache (or AppCache) was introduced with HTML5 to
provide web applications access to data when the user is offline.
• The benefits of using AppCache include offline access, speed, and
reduced server dependency.
• The developer specifies the files to be included in the AppCache.
• The file is basically a text file with a list of resources that the browser
should cache for offline access.
Using JSON to Create an Array of Objects

In this demonstration, you will see how to create an array of JSON
objects that are then used to display employee contact information.
How will these new features to access data access using JavaScript
change the web?
Directions:
• Use the resources in this presentation and your own investigative

skills to answer the questions.
• The activity includes creating an HTML5 page that uses JavaScript to

work with JSON objects.
REVIEW Lesson 4.4

• Considering that HTTP is a stateless protocol, how is JavaScript used
to dynamically send and receive data?
• What is a JSON object and how is it used?
• How are indexed databases created and used with JavaScript?

MSDN Resources
IndexedDB http://msdn.microsoft.com/en-
us/library/hh673548(v=vs.85).aspx
File API http://msdn.microsoft.com/en-
us/library/hh673542(v=VS.85).aspx
Other Resources
JSON Tutorial http://www.w3schools.com/json/default.asp
HTML5 Rocks and File http://www.html5rocks.com/en/tutorials/file/filesyst
API em/
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 4
LESSON 4.5
Respond to the Touch
Interface
OVERVIEW Lesson 4.5
• How to capture gestures.
• How to respond to gestures.

• What does it mean to “capture” an event?
• After an event is captured, how do you respond to it?

LECTURE Lesson 4.5
Capturing and Responding to Gestures

• Touchscreen and mobile events are considered gesture events.
• Gesture events include:
• Two-finger scaling
• Rotation gestures
• To capture gesture events, JavaScript has a gesturestart event, and
gesturechange, gesturemove, and gestureend events. These events track the
change of the gesture.
• Each event has a numeric value representing the scale and rotation values.
• The scale property is the ratio of the current distance between two fingers to
the initial distance.
GESTURES CONTINUED
• A “pinchclose” gesture has a scale of less than 1.0; a “pinchopen”

gesture has a scale greater than 1.0.
• The rotation gesture is captured as degrees of the finger rotation.
• A clockwise gesture rotation returns a positive value. A counterclockwise
rotation returns a negative value.
• Simple finger touches trigger a touchstart event. When the finger is
released, a touchend event is triggered. In the interim, the
touchmove event is used to track the finger movement.
• These two finger gestures and touch events do not return individual
(x,y) coordinate points; instead, they have a changedTouches
property, which is similar to an array of all points covered by the
finger.
• A change in the orientation triggers an orientationchanged event.
Use WebKit Transform Property to Rotate the Node

In this demonstration, you will see the code used to handle a gesture
that rotates an image.
var width = 100, height = 200, rotation = ;

node.ongesturechange = function(e){
var node = e.target;
// scale & rotation are relative values, so we wait
// to change our variables until the gesture ends
node.style.width = (width * e.scale) + "px";
node.style.height = (height * e.scale) + "px";
node.style.webkitTransform = "rotate(" + ((rotation +
e.rotation) % 360) + "deg)"; }
node.ongestureend = function(e){
// Update the values for the next gesture
width *= e.scale; height *= e.scale; rotation = (rotation +
e.rotation) % 360; }
What best practices should be considered during the web design phase
when creating applications for touch screen devices?
Directions:
• Use the resources listed in this presentation and your own

REVIEW Lesson 4.5
• What does it mean to “capture” an event?
• After an event is captured, how do you respond to it?

MSDN Resources
Touch Gestures http://msdn.microsoft.com/en-
(Windows® Embedded us/library/ee499124.aspx
Compact 7)
JavaScript, Ajax, & http://msdn.microsoft.com/en-us/ie/dd420501
DOM
Other Resources
Mobile Touch Events in http://davidwalsh.name/mootools-touch
MooTools 1.3
jQuery http://archive.plugins.jquery.com/plugin-
tags/gesturestart
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 4
LESSON 4.6
Code Additional
HTML5 APIs
OVERVIEW Lesson 4.6
• GeoLocation
• Web Workers
• WebSockets
• List uses for an API that determines your current location.
• What is the purpose of a web worker?
• What is a WebSocket?
LECTURE Lesson 4.6
GeoLocation
• The GeoLocation API (Application Programming Interface) is
used to find the latitude and longitude of a web user.
• Uses of geolocation:
• Provide online timetables for public transportation in close
proximity to the user.
• Notify the user of school delays and closings relative to their
location.
• Find restaurants, gas stations, hotels, grocery stores.
GEOLOCATION CONTINUED
• To use GeoLocation, the site must first obtain user permission.

• The API resides within the geolocation object, which is an
attribute of the Navigator object.
• Includes three functions:
1. getCurrentPosition – retrieves the user location one time.
2. watchPosition – used to retrieve repeated updates.
3. clearWatchPosition – cancels the repeated updates.
• Data is presented in either geodetic or civic format.
• Geodetic provides longitude and latitude, meters, etc.
• Civic is consider human readable. such as Lewistown, 3rd Floor.
LECTURE Lesson 4.6
Web Worker
• Allows JavaScripts to run in the background as parallel threads.
• The developer can spawn background scripts that run
simultaneously.
• Every new worker object requires a .js file. Example:
var myWorker = new Worker(‘worker.js’);
• Allows communication between the host worker and worker
scripts. It uses postmessage and then listens for a response using
the onmessage event. Example:
var hello = new Worker(‘hello.js’);

hello.onmessage = function( ){
alert(e.data);
};
postmessage(‘Hello World’);
LECTURE Lesson 4.6
WebSockets
• Provides a new JavaScript API and protocol for two-way
communication over the Internet.
• Makes it easier to work directly with fixed-data formats, and
bypasses the slower HTTP protocol.
• Allows data to be sent using text, binary arrays, or blobs
• To implement, the developer must follow these steps:
• Use a client browser that implements a WebSocket protocol
• Write code that creates a client WebSocket using a constructor
• Write code on a web server that responds to the client request
through a WebSocket
Using Geolocation and Bing Maps
In this demonstration, you will see how to use the new Geolocation API
combined with Bing® Maps (requires Internet Explorer® 9 or later).
What privacy issues that can result from the use of Geolocation APIs?
Directions:
• Create an HTML5 page that employs the new HTML5 Geolocation
API to calculate the distance travelled.
REVIEW Lesson 4.6
• List uses for an API that determines your current location.
• What is the purpose of a web worker?
• What is a WebSocket?
MSDN Resources
Geolocation http://msdn.microsoft.com/en-
us/library/gg589499(v=vs.85).aspx
Web Workers http://msdn.microsoft.com/en-
us/library/ie/hh673568(v=vs.85).aspx
WebSockets http://msdn.microsoft.com/en-
us/library/ie/hh673567(v=vs.85).aspx
Other Resources
HTML5 Rocks - http://www.html5rocks.com/en/tutorials/geolocatio
Geolocation API n/trip_meter/
What is a WebSocket? http://websocket.org/
HTML5 Rocks – The http://www.html5rocks.com/en/tutorials/workers/b
Basics of Web Workers asics/
MTA EXAM 98-375
Fundamentals
98-375: OBJECTIVE 4
LESSON 4.7
Access Device and
Operating System
Resources
OVERVIEW Lesson 4.7
• Windows® Runtime (WinRT).
• In-memory resources, such as contact lists and calendars.
• Hardware capabilities, such as GPS, accelerometer, and camera.

• What is WinRT and how is it used in web development?
• How do mobile devices maintain and store contact lists and

calendars?
• Most mobile devices have GPS components and built-in cameras.

How can a web developer access and use these components?
LECTURE Lesson 4.7
Windows Runtime (WinRT)

• In Metro style applications, the Windows Runtime makes it easy to
create applications that work on any hardware.
• They are optimized for touch, are capable of using geolocation to
identify the user’s location, and can be hosted in the Windows Store.
• WinRT is developed for use with JavaScript as well as C#, VB, and
C++.
LECTURE Lesson 4.7
In-Memory Resources: Contact Lists and Calendars

• Many of today’s portable devices provide access for a user to add,
view, change, and delete contacts and calendar events.
• The information from the contact list and calendar is stored directly
in the device memory.
• There are APIs (Application Program Interfaces) designed to access
this data.
• The Windows Library for JavaScript reference can be used to
retrieve lists of data.
• Windows phone has a library designed to retrieve this data also:
Microsoft.Phone.UserData
LECTURE Lesson 4.7
Hardware Capabilities: GPS, Accelerometer, and

Camera.
• GPS (Global Positioning System) hardware provides precise location
information in longitude and latitude notation. This devices is often
used to support the Geolocation API.
• Accelerometers are one source for providing high-level data
independent from the page content, specifically the movement
(acceleration) of the hosting device.
• By using the Windows Runtime, the developer can request access to
user devices such as webcams. This is typically used in applications
that have the capability for video chat or video conferencing.
More and more of the technology we use has the potential of allowing
predators to invade our privacy.
How can this happen? How can it be prevented?

Directions:
• Use the resources mentioned in this presentation and your own

REVIEW Lesson 4.7
• What is WinRT and how is it used in web development?
• How do mobile devices maintain and store contact lists and

calendars?
• Most mobile devices have GPS components and built-in cameras.

How can a web developer access and use these components?
MSDN Resources
The Windows Runtime http://msdn.microsoft.com/en-
us/library/windows/apps/hh464942.aspx
Accelerometer http://msdn.microsoft.com/en-
Overview us/library/ff431810(v=vs.92).aspx
Other Resources
W3C DeviceOrientation http://dev.w3.org/geo/api/spec-source-
Event Specification orientation.html
Wikipedia: HTML5 in http://en.wikipedia.org/wiki/Html5_in_mobile_
mobile devices devices

98 375 html5

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

98 375 html5

Caricato da

Copyright:

Formati disponibili

MTA EXAM 98-375

HTML5 Application Development

In this lesson, you will review the following:

• What are the states of an HTML5 application?

HTML5 State Management

HTML5 Data Storage and Longevity

In this demonstration, you will see how to:

Web Storage Advantages and Disadvantages

Can you answer these?

• What are the states of an HTML5 application?

In this lesson, you will review the following:

• Strategies to debug and test an HTML5-based touch-enabled

• Why is it important to debug and test your application?

HTML5 Feature Testing

Understand Touch Events in HTML5

Best practices for designing for mobile devices

In this demonstration, you will see how to:

• Add touch interaction that handles input from:

Can you answer these?

• Why is it important to test your application on multiple browsers?

In this lesson, you will review the following:

• Publishing an application to:

In this demonstration, you will see how to:

• Create an icon using Expression® Design that follows these

Can you answer these?

In this lesson, you will review the following:

• Choose and configure HTML5 tags to display text content

• How has HTML5 changed from HTML4 ?

New HTML5 Tags

Displaying Text Using HTML5

Web Page Created with HTML5

– Create an HTML5 document

Can you answer these?

• How has HTML5 changed from HTML4 ?

In this lesson, you will review the following:

• When, why, and how to use the canvas element

• What criteria determine whether the developer uses the <canvas>

• Why is it recommended to use transformations when drawing on

Canvas Compared to SVG Performance

Canvas Compared to SVG Selection Factors

Canvas Compared to SVG for Modifying Images

How to Use the New <canvas> Element in HTML5

In this demonstration, you will see how to:

Y- direction (note, it is a positive Y value)

• Which element is better for displaying real-time data and why?

• What types of websites use real-time data?

Can you answer these?

• What criteria determine whether the developer uses the <canvas>

• Why is it recommended to use transformations when drawing on

• How can developers accommodate browsers that do not support

In this lesson, you will review the following:

• Packaging and the run-time environment, including:

• How does a web designer accommodate the various devices that

Application Package and Application Container

Packaging your website or application

• Create a local package for testing on another machine.

Credentials and Permission Sets

Leveraging HTML5 Skills and Content

1. What is meant by development platforms? For example, a program

2. What is the current version of each platform?

3. Look at the Internet Explorer® 9 Guide for Developers:

4. What HTML5 features are included in Internet Explorer 8? What

Can you answer these?