Programming in HTML5 with JavaScript and CSS3

Links

• Microsoft Seite zur Zertifizierung
• Training Guide: Programming in HTML5 with JavaScript and CSS3
• HTML5 and CSS3 (2nd edition)
• JavaScript: The Good Parts
• Measure Up 70-480 Traing
• Study Notes from @adnanmasood

CSS Cascading order

Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:

1. user agent declarations
2. user normal declarations
3. author normal declarations
4. author important declarations
5. user important declarations

http://www.w3.org/TR/CSS2/cascade.html#cascading-order

Skills measured

Implement and manipulate document structures and objects (24%)

Create the document structure

• Structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside)
• create a layout container in HTML

Write code that interacts with UI controls

• Programmatically add and modify HTML elements
• implement media controls
• implement HTML5 canvas
• implement SVG graphics

Apply styling to HTML elements programmatically

• Change the location of an element
• apply a transform
• show and hide elements

Implement HTML5 APIs

• Implement storage APIs
• AppCache API and
• Geolocation API

Establish the scope of objects and variables

• Define the lifetime of variables
• keep objects out of the global namespace
• use the “this” keyword to reference an object that fired an event
• scope variables locally and globally

Create and implement objects and methods

• Implement native objects
• create custom objects and custom properties for native objects using prototypes and functions
• inherit from an object
• implement native methods and create custom methods

Implement program flow (25%)

Implement program flow

• Iterate across collections and array items
• manage program decisions by using switch statements, if/then
• evaluate expressions

Raise and handle an event

• Handle common events exposed by DOM (OnBlur, OnFocus, OnClick)
• declare and handle bubbled events
• handle an event by using an anonymous function

Implement exception handling

• Set and respond to error codes
• throw an exception
• request for null checks
• implement try-catch-finally blocks

Implement a callback

• Receive messages from the HTML5 WebSocket API 2nd example
• use jQuery to make an AJAX call
• wire up an event
• implement a callback by using anonymous functions
• handle the “this” pointer

Create a web worker process

• Start and stop a web worker
• pass data to a web worker
• configure timeouts and intervals on the web worker
• register an event listener for the web worker
• limitations of a web worker

Access and secure data (26%)

Validate user input by using HTML5 elements

• Choose the appropriate controls based on requirements
• implement HTML input types and content attributes (for example, required) to collect user input

Validate user input by using JavaScript

• Evaluate a regular expression to validate the input format
• validate that you are getting the right kind of data type by using built-in functions
• prevent code injection (and more)

Consume data

• Consume JSON and XML data
• retrieve data by using web services
• load data or get data from other sources by using XMLHTTPRequest

Serialize, deserialize, and transmit data

• Binary data
• text data (JSON, XML)
• implement the jQuery serialize method
• Form.Submit
• parse data
• send data by using XMLHTTPRequest
• sanitize input by using URI/form encoding

Use CSS3 in applications (25%)

Style HTML text properties

• Apply styles to text appearance (color, bold, italics)
• apply styles to text font (WOFF and @font-face, size)
• apply styles to text alignment, spacing, and indentation
• apply styles to text hyphenation
• apply styles for a text drop shadow

Style HTML box properties

• Apply styles to alter appearance attributes (size, border and rounding border corners, outline, padding, margin)
• apply styles to alter graphic effects (transparency, opacity, background image, gradients, shadow, clipping)
• apply styles to establish and change an element’s position (static, relative, absolute, fixed)

Create a flexible content layout

• Implement a layout using a flexible box model and here
• implement a layout using multi-column
• implement a layout using position floating and exclusions
• implement a layout using grid alignment
• implement a layout using regions, grouping, and nesting

Create an animated and adaptive UI

• Animate objects by applying CSS transitions
• apply 3-D and 2-D transformations
• adjust UI based on media queries (device adaptations for output formats, displays, and representations)
• hide or disable controls

Find elements by using CSS selectors and jQuery

• Choose the correct selector to reference an element
• define element, style, and attribute selectors
• find elements by using pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)

Structure a CSS file by using CSS selectors

• Reference elements correctly
• implement inheritance
• override inheritance by using !important
• style an element based on pseudo-elements and pseudo-classes (for example, :before, :first-line, :first-letter, :target, :lang, :checked, :first-child)