This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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