DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
-
date post
18-Oct-2014 -
Category
Technology
-
view
662 -
download
1
description
Transcript of DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
Windows 8 & HTML5: friends with benefitsDevTeach Montreal – 2012-12-11
Frédéric Harper
Technical Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net
WINDOWS 8
Windows reimagined
New fast and fluid Start screen
Everything great about Windows 7 we made even better
Touch, mouse, keyboard
Great experience across all hardware
Tablets to laptops to all-in-ones
Highest power to the most efficient chipset
Touch, mouse, keyboard
Content Before Chrome
Content Before Chrome
Content comes first. Immerse users in the things they love
Leave only the most relevant elements on screen to minimize distractions
If you know web technologies, you are ready to build amazing apps for the Windows Store
Windows Core OS Services
JavaScript(Chakra)
CC++
C#VB
Windows 8 Store Apps
Communication & Data
Application Model
Devices & Printing
WinRT APIs
Graphics & Media
XAML HTML / CSS
HTMLJavaScrip
tCSS
CC++
C#VB
Desktop Apps
Win32.NET / SL
Internet Explorer
Sys
tem
Ser
vice
sV
iew
Mod
el
Con
trol
ler
Cor
e
Windows Core OS Services
Communication & Data
Application Model
Devices & Printing
Graphics & Media
Sys
tem
Ser
vice
sC
ore
HTML5
demo
MORE WEB STANDARDS
IE9 hardware-accelerated 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
IE10 hardware-accelerated platformCSS 2D Transforms
CSS 3D Transforms
CSS Animations
CSS Backgrounds & Borders
CSS Color
CSS Flexbox
CSS Fonts
CSS Grid
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 BlobBuilder
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 track
HTML5 video and audio
JavaScript Typed Array
ICC Color Profiles
IndexedDB
Page Visibility
Pointer (Mouse, Pen, and Touch) Events
RequestAnimationFrame
Navigation Timing
Selectors API Level 2
SVG Filter Effects
SVG, standalone and in HTML
Web Messaging
Web Sockets
Web Workers
XHTML/XML
XMLHttpRequest (Level 2)
XMLHttpRequest CORS
Popular CSS3 features in Windows 8
2D & 3D transforms
Transforms Animations
Transitions
MotionGrid
Flexbox
Layout
Gradients
Filter Effects
Text-shadow
GraphicsMulti-column, hyphenation
Pagination
Position float
Content flow
Windows hardware acceleration makes these beautiful and fast
CSS3 demos
demo
Popular HTML5features inWindows 8
Web Sockets
Web Workers
IndexedDB
Ecmascript 5
File API & Blobs
Geolocation
Audio tag
Video tag
Touch-first
Pointer events
Zoom regions
Snap Points
Forms
Validation
Input types
Spell checking
HTML5 demos
demo
From IE10 web app to Windows app
• Minor API differences http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx
• Different host No plug-ins in Windows apps Trust level differences (local and web context) http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx
• UX [recommended]
• Windows 8 features [recommended]
Context in HTML/JS Windows appsFeature Local context Web context
Windows Run-time Yes No
Windows Library for Javascript
Yes No
External script references
No Yes
Cross-domain XHR requests
Yes No
Automatic filtering for script injection on DOM
Yes No
There are ways to communicate across contexts, ways to give websites access to some web standards features and ways to skip automatic filtering within a function.
TOOLS
Visual Studio 2012 RC & Blend for Visual Studio 2012 RC
demo
WINJS
Windows Library for JavaScript (WinJS)library for building apps using JavaScript
Web technologies you’re already familiar with
Utilities and patterns for responsive, reliable apps
Use interactive design tools
Build your apps fast and with high quality
Matches the Windows 8 design style
Controls for common user experiences
Designed for touch as well as traditional input
Scales across form factors
Make your apps look and feel great
WinJS
Helpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
WinJS controls SettingsFlyout
Flyout
Semantic Zoom
Flipview
SemanticZoomListview
Menu
Rating
Slide does not include all WinJS controls (App Bar, Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
DatePicker
Porting HTML5
demo
Prefer your own library? Go ahead!
• Adhere to the Windows UI and personality
• Understand our web context & sandboxing model
• Mix & match works fine
You can build amazing sites and apps with the Windows 8 web platform
dev.windows.com
The Developer Movement is giving you the chance!
Ready to create the next app phenomenon?
DeveloperMovement.ca/APPS
About
• Publish awesome Windows apps• And collect points every step of the way to redeem great rewards like a pair of Monster Headphones and much more! Victory is only an app away. It’s time to make yours the next big thing!
Join The Developer Movement now!
DeveloperMovement.ca/APPS