Post on 11-Jan-2016
www.buildwindows.com
What's new with HTML5, Javascript, and CSS3
John HrvatinLead Program Manager, Internet ExplorerMicrosoft Corporation
PLAT-382T
www.buildwindows.com
Build amazing sites and Metro style apps with the Windows 8 web platform.
www.buildwindows.com
Characteristics of great sites and apps
Beautiful Sites and Apps
Easy-to-build, Touch-First Interactivity
Engaging Page Layouts
Better Client/Server Data Transfer
Powerful Local Data and Offline
www.buildwindows.com
Windows 8
Windows Core OS Services
JavaScript(Chakra)
CC++
C#VB
Metro style Apps
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
XAML HTML / CSS
HTMLJavaScri
pt
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Syst
em
Serv
ices
Vie w
Mod
el
Con
trolle
r
Cor
e
www.buildwindows.com
Windows 8
Windows Core OS Services
JavaScript(Chakra)
CC++
C#VB
Metro style Apps
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
XAML HTML / CSS
HTMLJavaScri
pt
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Syst
em
Serv
ices
Vie w
Mod
el
Con
trolle
r
Cor
e
www.buildwindows.com
These features work identically in Internet Explorer and
Metro style apps using HTML
www.buildwindows.com
Beautiful sites and Metro style apps
demo
www.buildwindows.com
Slide Transition: Fade
www.buildwindows.com
Slide Transition: Slide
www.buildwindows.com
Slide Transition: Slide and grow
www.buildwindows.com
Slide Transition: Rails
www.buildwindows.com
CSS3 Animations
• Characteristics of the animation• Delay• Duration• Timing function
• Keyframes• Which properties to change, to what values, at what
times
• Events
www.buildwindows.com
CSS3 Transitions
• Characteristics of the transition• Delay• Duration• Timing function• Properties to transition
• Change property value and browser takes over• “Fire and forget”
• Events
Applying CSS Transitions// Apply transform to the slideslides[i].elm.style.msTransform = "scale(0.4) perspective(290px) rotateY(17deg)";
// Apply transition to the slideslides[i].elm.style.msTransitionProperty = “transform”;slides[i].elm.style.msTransitionDuration = "2.5s";slides[i].elm.style.msTransitionDelay = "0s";
www.buildwindows.com
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
[381] Building beautiful and interactive apps with HTML5 & CSS3
LEARN MORE
Engaging page layouts
www.buildwindows.com
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
www.buildwindows.com
Engaging site and app layouts
• Present content in a way that • Draws in users• Makes content easy to consume
• Use declarative code that’s easy to write and adapts to changing content
[873] Designing Metro style apps using CSS3
LEARN MORE
Powerful local data and offline
www.buildwindows.com
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
Usage of App Cache via manifest file
<html manifest=“test.appcache"> <head>…</head> <body>
<img src=“logo.png” …></img>…<video … src=“fish.mp4” …
></video>…<img src=“kid.png” … />
</body></html>
Cache Manifest#7/20/2011 v3Cache:logo.png
Network:fish.mp4
Fallback:kid.png noImg.png
HTML File Manifest File
MIME Type: text/cache-manifest
www.buildwindows.com
IndexedDB
• Store, index, and query data on the client
• Full key-value pair object stores
• Index using object attributes
• No dependency on the browser’s database implementation
www.buildwindows.com
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
Read image using FileReader// Read file using FileReader and register handler for loadendvar filereader = new FileReader();filereader.imagediv = d; // expando to store image elementfilereader.onloadend = handleReaderOnLoadEnd;filereader.readAsDataURL(file);
// Set image src in loadend handlerfunction handleReaderOnLoadEnd(event){ var image = this.imagediv.children[0].children[0]; image.src = this.result;
…}
www.buildwindows.com
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
[376] Building offline access in Metro style apps and websites using HTML5
LEARN MORE
Easy-to-build, touch-first interactivity
www.buildwindows.com
Touch-first interactivity
demo
www.buildwindows.com
Overview of building touch apps
• Application templates• Controls: ListView, AppBar, Select Control, etc.• Scrolling and zooming views• Pointer events• Gesture events• Gesture recognizers
[185] Make great Metro style apps that are touch-optimized using HTML5
LEARN MORE
www.buildwindows.com
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
www.buildwindows.com
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
www.buildwindows.com
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
www.buildwindows.com
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
www.buildwindows.com
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
www.buildwindows.com
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
www.buildwindows.com
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
Better client/server data transfer
www.buildwindows.com
WebSockets
demo
www.buildwindows.com
Securely enable the
real-time Web
For the browser and
beyond
Standards-based and
interoperable
WebSockets
[373] Building real-time web apps with HTML5 WebSockets
LEARN MORE
www.buildwindows.com
There’s more!
• HTML5 Sandbox• HTML5 Parsing• Web Workers• Spellchecking
• Progress Events and Binary Data with XHR Level 2
• Multi-file upload• New hit-testing APIs
What’s new in IE9? http://www.ietestdrive.com/Links/DevGuide9.htmlWhat’s new in IE10? http://www.ietestdrive.com/Links/DevGuide10.htmlQuestions after BUILD? http://forums.dev.windows.com
www.buildwindows.com
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
www.buildwindows.com
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
www.buildwindows.com
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• HTML5 Geolocation• HTML5 Selection• HTML5 semantic elements• HTML5 video and audio• ICC Color Profiles• Selectors API Level 2• SVG, standalone and in
HTML• XHTML/XML
www.buildwindows.com
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• 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• File Reader API• File Saving• FormData• HTML5 Application Cache• HTML5 async• HTML5 Canvas• HTML5 Drag and drop• HTML5 Forms and Validation• HTML5 Geolocation• HTML5 History API• HTML5 Parser• HTML5 Sandbox
• HTML5 Selection• HTML5 semantic elements• HTML5 video and audio• ICC Color Profiles• IndexedDB• Page Visibility• Pointer (Mouse, Pen, and Touch)
Events• Resource Timing• Selectors API Level 2• SVG Filter Effects• SVG, standalone and in HTML• Timing callbacks• Web Messaging• Web Sockets• Web Workers• XHTML/XML• XMLHttpRequest (Level 2)
Explore the capabilities of the Windows 8 Web platform.
Lead the next wave of exciting software with
amazing sites and Windows Metro style apps.
www.buildwindows.com
• Feedback and questions http://forums.dev.windows.com
• Session feedbackhttp://bldw.in/SessionFeedback
thank you
© 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.