Slide 1

Microsoft Certification Exam 70-480 Michael Van Cleave Planet Technologies

Slide 2

Slide 3

Slide 4

Objectives Implement and Manipulate Data Structures (24%) Implement Program Flow (25%) Access Secure Data (26%) Use CSS3 in Applications (25%) Reference: http://www.microsoft.com/learning/en/us/exam.aspx?ID=70=480

Slide 5

HTML5 Differences New elements improve the semantic structure of a document. New form controls and built-in validation. Native audio and video support so users do not have to rely on browser plug-ins. The element and the associated JavaScript API provides a freeform area in a page to draw on, and the JavaScript commands to do the drawing, importing, and exporting.

Slide 6

HTML5 Differences Cont. File Uploads Support for uploading files to a web server. Drag/Drop Support for dragging and dropping elements on the page. Offline Support enables web applications to continue running when the browser is offline. Local Data Storage over and above that provided by cookies. A formalization of the JavaScript object that underpins AJAX by using the XmlHttpRequest object.

Slide 7

HTML5 Differences Cont. Cont. Web Sockets Support for continuous communication between browser and web server. Web Workers Support for using multiple threads to handle processing for a web page. GeoLocation Support for accessing a device's GPS capabilities.

Slide 8

HTML5 Basics Contains new Semantic elements the divorce meaning from presentation. semantics the study of meaning (linguistics) Makes HTML structure more declarative in nature. Helps with other tools that decipher the structure of the page, such as Screen Readers

Slide 9

New and Old Elements HTML5 Notable Additions HTML5 Notable Removals AcronymApplet BasefontBig CenterDir FontFrame FramesetNoFrames StrikeTt

Slide 10

Input Elements (but better) Login Details Username: Password:

Slide 11

New Input Types color date datetime datetime-local email month number range search tel time url week

Slide 12

New Attributes For Specifies the relationship between the element and another element on the page. Placeholder Specifies a hint to the user as to the kind of input that is expected. List Specifies the ID of a DataList element that provides values for the element. Required Specifies the user must enter a value. Pattern Specifies a Regular Expression pattern for the purposes of validation

Slide 13

Getting Crazy with HTML5 Contact Form Elements Attributes DataList Input Types Other Features GeoLocation Drag Drop Audio/Video

Slide 14

Slide 15

CSS3 Differences CSS3 is completely backwards compatible with CSS2. CSS3 is broken in to smaller modules Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface CSS3 keywords and effects work differently depending on browser! Remember Mileage May Vary so check W3 for supportability.

Slide 16

New Selectors ~ Selects every ^= Begins with $= Ends with *= Contains substring :first-of-type Selects first of specified element within the parent :last-of-type Selects last of specified element within the parent :0nly-of-type Selects only of type that is the only type in the parent :only-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-0f-type(n) :last-child :root :empty :target :enabled :disabled :checked :not(selector) ::selection

Slide 17

Borders and Background Borders Border-Radius (Rounded Corners) Box-Shadow (Drop Shadow) Border-Image (Image used for border) Background Background-Size Background-Origin (Box Model) Background-Clip (Box Model) Content-Box Border-Box Padding-Box

Slide 18

Text Effects and Transitions Text-Shadow Text-Shadow Word-Wrap Styles for how to break large words Moving from one style to another over a set period of time. All CSS3, no Flash or JavaScript needed.

Slide 19

2D/3D Transformations 2D Transformations 2D Transformations Translate() Rotate() Scale() Skew() Matrix() Transforms on the X and Y Axis 3D Transformations 3D Transformations Rotate3D() Scale3D() Translate3D() Perspective() Matrix3D() Transforms on the X, Y, and Z axis

Slide 20

Animations Similar to Transitions, but not the same. Uses the @keyframes rule Specify the keyframe and duration to the animation.

Slide 21

Komma Crazy med CSS3

Slide 22

Slide 23

Namespace Best Practices Namespaces are used to logically separate objects and prevent naming collisions. Keep your objects out of the Global JavaScript namespace.

Slide 24

Data Types String var myString = Simple String; Number var myNumber = 42; Boolean var myBoolean = true; (false, 1, 0) Array var arrVersions = new Array(2003, 2007, 2010, 2013); Object var person{firstname: Mike, lastname: Van Cleave} Null var x = null; (setting it to empty) Undefined var x; (variable has no value)

Slide 25

Concepts JavaScript objects are Dictionary Objects Type Safety? Not so much. Functions are First Class Objects Operators Get very familiar with what they do Exactly = vs. == vs. === = assignment (x = 5) == evaluate value, not type ( 5 == x) - true === evaluates value and type (5 === x) - false

Slide 26

Advanced Concepts Anonymous Functions Technically a Function without a name, therefore being anonymous. Prototypes Sort of an inheritance model that each object has a reference back to its prototype object

Slide 27

' JavaScript

Slide 28

Reference Definitive Guide

Slide 29

Additional References Exam Information http://www.microsoft.com/learning/en/us/Exam.aspx?ID=70 -480 http://www.microsoft.com/learning/en/us/Exam.aspx?ID=70 -480 W3 Schools Reference Information http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/css3/default.asp http://www.w3schools.com/js/default.asp Code Academy Play/Learn http://www.codecademy.com/tracks/javascript Object Oriented JavaScript http://msdn.microsoft.com/en-us/magazine/cc163419.aspx