Beautiful Sites and Apps Easy-to-build, Touch-First Interactivity Engaging Page Layouts Better...

www.buildwindows.com

What's new with HTML5, Javascript, and CSS3

John HrvatinLead Program Manager, Internet ExplorerMicrosoft Corporation

PLAT-382T


Build amazing sites and Metro style apps with the Windows 8 web platform.


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


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


These features work identically in Internet Explorer and

Metro style apps using HTML


Beautiful sites and Metro style apps

demo


Slide Transition: Fade


Slide Transition: Slide


Slide Transition: Slide and grow


Slide Transition: Rails


CSS3 Animations

• Characteristics of the animation• Delay• Duration• Timing function

• Keyframes• Which properties to change, to what values, at what

times

• Events


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";


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


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


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


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


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


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;

…}


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


Touch-first interactivity

demo


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


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


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


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


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


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


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


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


WebSockets

demo


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


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

http://www.ietestdrive.com/Links/DevGuide9.htmlWhat%E2%80%99s%20new%20in%20IE10



http://www.ietestdrive.com/Links/DevGuide10.html



http://forums.dev.windows.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


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


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


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.


• Feedback and questions http://forums.dev.windows.com

• Session feedbackhttp://bldw.in/SessionFeedback

thank you



http://bldw.in/SessionFeedback

http://bldw.in/SessionFeedback

© 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.

Beautiful Sites and Apps Easy-to-build, Touch-First Interactivity Engaging Page Layouts Better...

Documents

Transcript of Beautiful Sites and Apps Easy-to-build, Touch-First Interactivity Engaging Page Layouts Better...