keep visiting for regular updates to this presentation. This presentation includes the link for Hands On - Windows 8 HTML5 Platform demos

1. Microsoft Official Course
®
My Learning to 070-480
HTML5 Certification

2. Anchor Pseudo-classes
• remember the hierarchy for Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:
• Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

3. CSS text-transform property
Value Description
none No capitalization. The text renders as it is. This is default
capitalize Transforms the first character of each word to uppercase
uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
inherit Specifies that the value of the text-transform property should
be inherited from the parent element

4. How to extend an object by adding a method to it?
Using prototypal inheritance, objects can still inherit from other objects. However, there is
no specific keyword or operator - such as "extends" in Java - to achieve that end. What
happens is that when you instantiate an object using the "new" keyword, "new myObject()"
produces a new object that inherits from myObject.prototype rather than directly from the
object itself.
Example:
function Person(name) {
if ( arguments.length > 0 )
this.init(name);
}
Person.prototype.init = function(name) {
this.name = name;
}

5. CSS Display - Block and Inline Elements
A block element is an element that takes up the full width available, and has a line break
before and after it.
An inline element only takes up as much width as necessary, and does not force line breaks.
Changing an inline element to a block element, or vice versa, can be useful for making the
page look a specific way, and still follow web standards.
The following example displays list items as inline elements:
Example
li {display:inline;}
The following example displays span elements as block elements:
Example
span {display:block;}

6. CSS Opacity / Transparency / rgba
The CSS3 property for transparency is opacity.
Example for Image Opacity,
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
RGBA
CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this
property-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity value
for a color.
<div style="background: rgba(255, 0, 0, 0.4);"></div>
The key difference between the two declarations is this:
Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.

7. Cascading Style Sheets (CSS) Exclusions
Cascading Style Sheets (CSS) Exclusions are new in Internet Explorer 10 and Windows Store apps using
JavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements,
thereby avoiding the traditional limitations of floats.
CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a
containing block, while remaining part of the document flow.
Note : Because of the preliminary status of CSS Exclusions, the properties described in this topic must be used with the
Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows Store apps using JavaScript in
Windows 8. Also, be aware that the properties and syntax defined in the CSS Exclusions specification might not correspond
exactly to those described in this topic. As development on the specification continues, this might change.
Wrap-Flow Property
An element becomes an exclusion when its „wrap-flow‟ property has a computed value other than „auto‟.
In case of IE, -ms-wrap-flow property makes an element an exclusion element.
See following URLs for more reading,
http://dev.w3.org/csswg/css3-exclusions/#definitions
http://msdn.microsoft.com/en-us/library/ie/hh673558(v=vs.85).aspx

8. Hands-On: Windows 8 on HTML5 Platform
This page introduces a set of “Hands On” demos of the graphic features of
Windows 8 HTML5 Platform and Internet Explorer 10
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/Default.html

9. try...catch...finally Statement (JavaScript)
The try...catch...finally statement provides a way to handle some or all of the errors that
may occur in a given block of code, while still running code. If errors occur that are not
handled, JavaScript provides the normal error message.
The try block contains code that may provoke an error, while the catch block contains the
code that handles some or all errors. If an error occurs in the try block, program control is
passed to the catch block. The value of exception is the value of the error that occurred in
the try block. If no error occurs, the code in the catch block is never executed.
You can pass the error up to the next level by using the throw statement to re-throw the
error.
After all the statements in the try block have been executed and error handling has been
done in the catch block, the statements in the finally block are executed, whether or not an
error was handled. The code in the finally block is guaranteed to run unless an unhandled
error occurs (for example, a run-time error inside the catch block).

10. try...catch...finally Statement (JavaScript)
Example:
-------------------------------
try {
document.write("try running...<br/>");
throw new Error(301, "an error");
}
catch (e) {
document.write ("catch caught " + e.message + "<br/>");
}
finally {
document.write ("finally is running...<br/>");
}

11. CSS Position Property
The position property is supported in all major browsers.
Note: The value "inherit" is not supported in IE7 and earlier.
IE8 requires a !DOCTYPE. IE9 supports "inherit".
[static]
Default. Elements render in order, as they appear in the document flow
[absolute]
The element is positioned relative to its first positioned (not static) ancestor
element
[fixed]
The element is positioned relative to the browser window
[relative]
The element is positioned relative to its normal position, so "left:20" adds 20
pixels to the element's LEFT position
[inherit]
The value of the position property is inherited from the parent element

12. Page Layout (breakup)
Headers and footers are self-explanatory
and <nav> creates a navigation or menu
bar. You can use sections and articles to
group your content.
Finally, the aside element can be used for
secondary content, for example, as a
sidebar of related links.

13. JavaScript Comparison Operators

14. Features Available to Web Workers
Due to their multi-threaded behavior, web workers only has access
to a subset of JavaScript's features:
■The navigator object
■The location object (read-only)
■XMLHttpRequest
■setTimeout()/clearTimeout() and setInterval()/clearInterval()
■The Application Cache
■Importing external scripts using the importScripts() method
■Spawning other web workers
Web Workers do NOT have access to:
■The DOM (it's not thread-safe)
■The window object
■The document object
■The parent object
http://www.html5rocks.com/en/tutorials/workers/basics/

15. Resource of GeoLocation API
The getCurrentPosition() function has an optional third argument, a
PositionOptions object. There are three properties you can set in a
PositionOptions object. All the properties are optional. You can set any or all or
none of them.
PositionOptions Object
Property: Type: Default: Notes
enableHighAccuracy: Boolean: false: true might be slower
timeout: long: (no default): in milliseconds
maximumAge: long: 0: in milliseconds
The enableHighAccuracy property is exactly what it sounds like. If true, and
the device can support it, and the user consents to sharing their exact
location, then the device will try to provide it. Both iPhones and Android
phones have separate permissions for low- and high-accuracy positioning, so it
is possible that calling getCurrentPosition() with enableHighAccuracy:true will
fail, but calling with enableHighAccuracy:false would succeed.
http://diveintohtml5.info/geolocation.html

16. Geolocation API - „getCurrentPosition‟
Difference between getCurrentPosition and watchPosition
The main difference between "getCurrentPosition" and
"watchPosition" is that watchPosition keeps informing your
code should the position change, so basically it keeps
updating the user‟s position.
This is very useful if they‟re on the move and you want to
keep track of their position, whereas getCurrentPosition is a
once off. This method also returns a watchID which is
required when you want to stop the position constantly
being updated by calling clearWatch method is called.

17. Study Material programming-in-html5-with-javascript
http://geekswithblogs.net/wtfnext/
archive/2012/10/08/exam-70-480-
study-material-programming-in-
html5-with-javascript-and.aspx