70-480 Programming in HTML5 with JavaScript and CSS3

1
What's new with HTML5, JavaScript, and CSS3

• Lead Program Manager, Internet Explorer
• Microsoft Corporation

2
http//www.pass4sureexam.com/70-480.html
3
(No Transcript)
4
Build amazing sites and Metro style apps with
the Windows 8 web platform.
http//www.pass4sureexam.com/70-480.html
5
Characteristics of great sites and apps
http//www.pass4sureexam.com/70-480.html
6
Windows 8
Metro style Apps
Desktop Apps
HTML JavaScript
XAML
HTML / CSS
View
JavaScript (Chakra)
C C
C VB
Model Controller
C C
C VB
WinRT APIs
Communication Data
Devices Printing
Graphics Media
System Services
Win32
.NET / SL
Internet Explorer
Application Model
Windows Core OS Services
Core
http//www.pass4sureexam.com/70-480.html
7
Windows 8
Metro style Apps
Desktop Apps
HTML JavaScript
XAML
HTML / CSS
View
JavaScript (Chakra)
C C
C VB
Model Controller
C C
C VB
WinRT APIs
Communication Data
Devices Printing
Graphics Media
System Services
Win32
.NET / SL
Internet Explorer
Application Model
Windows Core OS Services
Core
http//www.pass4sureexam.com/70-480.html
8
These features work identically in Internet
Explorer and Metro style apps using HTML
http//www.pass4sureexam.com/70-480.html
9
Beautiful sites and Metro style apps

• demo

http//www.pass4sureexam.com/70-480.html
10
Slide Transition Fade
http//www.pass4sureexam.com/70-480.html
11
Slide Transition Slide
http//www.pass4sureexam.com/70-480.html
12
Slide Transition Slide and grow
http//www.pass4sureexam.com/70-480.html
13
Slide Transition Rails
http//www.pass4sureexam.com/70-480.html
14
CSS3 Animations

• Characteristics of the animation
• Delay
• Duration
• Timing function
• Keyframes
• Which properties to change, to what values, at
  what times
• Events

http//www.pass4sureexam.com/70-480.html
15
CSS3 Transitions

• Characteristics of the transition
• Delay
• Duration
• Timing function
• Properties to transition
• Change property value and browser takes over
• Fire and forget
• Events

http//www.pass4sureexam.com/70-480.html
16
Applying CSS Transitions

• // Apply transform to the slide
• slidesi.elm.style.msTransform
• "scale(0.4) perspective(290px)
  rotateY(17deg)"
• // Apply transition to the slide
• slidesi.elm.style.msTransitionProperty
  transform
• slidesi.elm.style.msTransitionDuration
  "2.5s"
• slidesi.elm.style.msTransitionDelay "0s"

http//www.pass4sureexam.com/70-480.html
17
Beautiful apps and sites

• New CSS3 in IE10 makes it easy to build beautiful
  sites and apps with a few lines of CSS
• Windows hardware acceleration makes this
  beautiful and fast

http//www.pass4sureexam.com/70-480.html
18
Engaging page layouts
http//www.pass4sureexam.com/70-480.html
19
CSS3 for content flow

• CSS3 Multi-column and Hyphenation
• Split text into columns and hyphenate to improve
  readability
• CSS3 Positioned Floats
• Flow content around positioned elements
• CSS3 Regions
• Dynamically overflow content from one element
  into another

http//www.pass4sureexam.com/70-480.html
20
Engaging site and app layouts

• Present content in a way that
• Draws in users
• Makes content easy to consume
• Use declarative code thats easy to write and
  adapts to changing content

21
Powerful local data and offline
http//www.pass4sureexam.com/70-480.html
22
HTML5 App Cache

• Manifest-based caching to enable offline
  scenarios, improve performance, and reduce
  operating expenses
• Improve availability of resources beyond local
  HTTP cache
• Resynchronize files by updating the manifest

http//www.pass4sureexam.com/70-480.html
23
Usage of App Cache via manifest file

• lthtml manifesttest.appcache"gt
• ltheadgtlt/headgt ltbodygt
• ltimg srclogo.png gt
• lt/imggt
• ltvideo srcfish.mp4 gt
• lt/videogt
• ltimg srckid.png /gt
• lt/bodygt
• lt/htmlgt

Cache Manifest 7/20/2011 v3 Cache logo.png Netw
ork fish.mp4 Fallback kid.png noImg.png
MIME Type text/cache-manifest
HTML File
Manifest File
http//www.pass4sureexam.com/70-480.html
24
IndexedDB

• Store, index, and query data on the client
• Full key-value pair object stores
• Index using object attributes
• No dependency on the browsers database
  implementation

http//www.pass4sureexam.com/70-480.html
25
File API

• Read data from files chosen by the user
• New objects to represent data
• Blob, File, FileReader
• New methods to access data
• readAsArrayBuffer
• readAsBinaryString
• readAsText
• readAsDataURL

http//www.pass4sureexam.com/70-480.html
26
Read image using FileReader

• // Read file using FileReader and register
  handler for loadend
• var filereader new FileReader()
• filereader.imagediv d // expando to store
  image element
• filereader.onloadend handleReaderOnLoadEnd
• filereader.readAsDataURL(file)
• // Set image src in loadend handler
• function handleReaderOnLoadEnd(event)
• var image this.imagediv.children0.children
  0
• image.src this.result

http//www.pass4sureexam.com/70-480.html
27
Powerful local data and offline access

• Cache resources on the client with HTML5 App
  Cache
• Store data in a local database with IndexedDB
• Read and manipulate data on the client using the
  File API

28
Easy-to-build, touch-first interactivity
http//www.pass4sureexam.com/70-480.html
29
Touch-first interactivity

• demo

http//www.pass4sureexam.com/70-480.html
30
Overview of building touch apps

• Application templates
• Controls ListView, AppBar, Select Control, etc.
• Scrolling and zooming views
• Pointer events
• Gesture events
• Gesture recognizers

http//www.pass4sureexam.com/70-480.html
31
CSS panning and zooming views

• Harness the power of Windows 8 to build highly
  responsive experiences
• Define regions that users can pan or zoom
  independent of the rest of the page
• Use snap points to create views of the content
  that users can easily reach

http//www.pass4sureexam.com/70-480.html
32
Pointer (touch, pen, mouse) events

• Write once for touch, pen, and mouse
• Sites written only for mouse work automatically
• Follow the familiar pattern of DOM mouse events,
  with extensions for touch properties and
  interaction principles

http//www.pass4sureexam.com/70-480.html
33
Gesture events

• Easy access to the Windows 8 touch language
• Two classes of gestures

• Static one-shot events
• MSGestureTap
• MSGestureHoldStart
• MSGestureHoldCancel
• MSGestureHoldEnd
• Dynamic manipulations with a stream of updates
• MSGestureStart
• MSGestureChange
• MSInertiaStart
• MSGestureEnd

http//www.pass4sureexam.com/70-480.html
34
Build great touch apps and sites

• Use MSPointer events to code for touch, mouse,
  and pen in a unified way
• Use MSGesture events to get easy access to the
  Windows 8 touch language
• Use scrolling/zooming views to harness the power
  of Windows 8 to build highly responsive
  experiences

http//www.pass4sureexam.com/70-480.html
35
Great interactivity with less script

• HTML5 Drag/drop
• Make any element draggable
• Drag files from the desktop to the browser
• HTML5 Forms
• Replace repetitive JavaScript form validation
  with HTML
• Use built-in validation UX or customize using
  validation events

http//www.pass4sureexam.com/70-480.html
36
HTML5 History

• Build sites and apps that update dynamically yet
  still provide
• Expected back/forward behavior
• URLs for sharing and deep linking
• Accurate referrer data in HTTP requests

http//www.pass4sureexam.com/70-480.html
37
Easy-to-build, touch-first interactivity

• Use pointer and gesture events to code for all
  input types and get easy access to the Windows 8
  touch language
• Use scrolling/zooming views to harness the power
  of Windows 8 to build highly responsive
  experiences
• Use less JavaScript while providing the same
  great experience
• Build Ajax-style sites while meet consumer
  expectations

http//www.pass4sureexam.com/70-480.html
38
Better client/server data transfer
http//www.pass4sureexam.com/70-480.html
39
WebSockets

• demo

http//www.pass4sureexam.com/70-480.html
40
WebSockets
Securely enable the real-time Web
For the browser and beyond
Standards-based and interoperable
http//www.pass4sureexam.com/70-480.html
41
Theres more!

• HTML5 Sandbox
• HTML5 Parsing
• Web Workers
• Spellchecking
• Progress Events and Binary Data with XHR Level 2
• Multi-file upload
• New hit-testing APIs

Whats new in IE9? http//www.ietestdrive.c
om/Links/DevGuide9.html Whats new in IE10?
http//www.ietestdrive.com/Links/DevGuide10.html Q
uestions after BUILD? http//forums.dev.windows.co
m
42
Related sessions

• PLAT-381T Building beautiful and interactive
  apps with HTML5 CSS3
• PLAT-873T Designing Metro style apps using CSS3
• PLAT-376T Building offline access in Metro
  style apps and websites using HTML5
• PLAT-386T 50 performance tricks to make your
  Metro style apps and sites using HTML5 faster
• PLAT-373C Building real-time web apps with
  HTML5 WebSockets
• APP-185T Make great Metro style apps that are
  touch-optimized using HTML5

http//www.pass4sureexam.com/70-480.html
43
Related sessions

• Pre-recorded
• PLAT-384P Anatomy of HTML5 sites and Metro
  style apps using HTML5
• PLAT-379P Building responsive apps and sites
  with HTML5 web workers
• PLAT-551P Programming SVG and canvas graphics
  in a Metro style app based on HTML5

http//www.pass4sureexam.com/70-480.html
44
IE9 hardware-accelerated web platform

• CSS 2D Transforms
• CSS Backgrounds Borders
• CSS Color
• CSS Fonts
• CSS Media Queries
• CSS Namespaces
• CSS OM Views
• CSS Selectors
• CSS Values and Units
• Data URI
• DOM Element Traversal
• DOM HTML
• DOM Level 3 Core
• DOM Level 3 Events
• DOM Style
• DOM Traversal and Range
• DOMParser and XMLSerializer
• ECMAScript 5
• HTML5 Canvas

http//www.pass4sureexam.com/70-480.html
45
Windows 8 hardware-accelerated web platform

• Animation Frames
• CSS 2D Transforms
• CSS 3D Transforms
• CSS Animations
• CSS Backgrounds Borders
• CSS Color
• CSS Flexbox
• CSS Fonts
• CSS Grid Alignment
• CSS Hyphenation
• CSS Image Values (Gradients)
• CSS Media Queries
• CSS multi-column Layout
• CSS Namespaces
• CSS OM Views
• CSS Positioned Floats (Exclusions)
• CSS Selectors
• CSS Transitions
• CSS Values and Units

46
Explore the capabilities of the Windows 8 Web
platform.Lead the next wave of exciting
software with amazing sites and Windows Metro
style apps.
http//www.pass4sureexam.com/70-480.html
47

• thank you

• Feedback and questions http//forums.dev.windows.c
  om
• Session feedbackhttp//bldw.in/SessionFeedback

http//www.pass4sureexam.com/70-480.html
48
http//www.pass4sureexam.com/70-480.html
2011 Microsoft Corporation. All rights
reserved. Microsoft, Windows, Windows Vista and
other product names are or may be registered
trademarks and/or trademarks in the U.S. and/or
other countries. The information herein is for
informational purposes only and represents the
current view of Microsoft Corporation as of the
date of this presentation. Because Microsoft
must respond to changing market conditions, it
should not be interpreted to be a commitment on
the part of Microsoft, and Microsoft cannot
guarantee the accuracy of any information
provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED
OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.
49
http//www.pass4sureexam.com/70-480.html