confoo - 2013-02-28 - html5 & windows 8, friends with benefits
Post on 18-Oct-2014
649 views
DESCRIPTION
What would you say if I told you that you can use your actual HTML, CSS, and JavaScript skills to create an amazing Windows 8 application? That all the lovely features that you like so much about HTML5, can be used to create your next masterpiece? That you can use the magical JavaScript libraries you use everyday to get in the game more quickly? Be honest, you would say that I'm crazy... Maybe, or maybe not, only the attendees to this session will know!TRANSCRIPT
![Page 1: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/1.jpg)
HTML5 & Windows 8friends with benefits
Frédéric HarperTechnical Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net
![Page 2: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/2.jpg)
WINDOWS 8
![Page 3: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/3.jpg)
Windows reimaginedNew fast and fluid Start screen
Everything great about Windows 7 we made even better
Touch, mouse, keyboard
![Page 4: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/4.jpg)
Great experience across all hardwareTablets to
laptops to all-in-ones
Highest power to the most efficient chipset
Touch, mouse, keyboard
![Page 5: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/5.jpg)
Content Before Chrome
Content comes first. Immerse users in the things they love
Leave only the most relevant elements on screen to minimize distractions
![Page 6: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/6.jpg)
If you know web technologies, you are ready to build amazing apps for
the Windows Store
![Page 7: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/7.jpg)
Windows Core OS Services
JavaScript(Chakra)
CC++
C#VB
Windows 8 Store Apps
Communication
& Data
Application Model
Devices & Printing
WinRT APIsGraphics &
Media
XAML HTML / CSS
HTMLJavaScrip
tCSS
CC++
C#VB
Desktop Apps
Win32
.NET / SL
Internet Explore
r
Syst
em
Serv
ices
Vie
wM
od
el
Contr
olle
rC
ore Windows Core OS Services
Communication
& Data
Application Model
Devices & Printing
Graphics & Media
Syst
em
Serv
ices
Core
![Page 8: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/8.jpg)
TOOLS
![Page 9: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/9.jpg)
Visual Studio 2012 & Blend for Visual Studio 2012
demo
![Page 10: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/10.jpg)
WEB STANDARDS
![Page 11: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/11.jpg)
IE10CSS 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
![Page 12: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/12.jpg)
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
![Page 13: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/13.jpg)
Popular HTML5
features in
Windows 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
![Page 14: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/14.jpg)
Context in HTML/JS Windows apps
Feature 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.
![Page 15: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/15.jpg)
Porting from HTML5
demo
![Page 16: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/16.jpg)
WINJS
![Page 17: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/17.jpg)
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
![Page 18: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/18.jpg)
WinJS
Helpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
![Page 19: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/19.jpg)
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
![Page 20: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/20.jpg)
Prefer your own library? Go ahead! Adhere to the Windows UI and personality
Understand our web context & sandboxing model
Mix & match works fine
![Page 21: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/21.jpg)
CONTRACTS
![Page 22: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/22.jpg)
Contracts enable integrating the Windows 8 experience
into your app
![Page 23: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/23.jpg)
Share SettingsSearch
App to App Picking
Play To
![Page 24: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/24.jpg)
SEARCH
![Page 25: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/25.jpg)
Search contract makes your app searchable from
anywhere in the system
![Page 26: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/26.jpg)
Search Anatomy
1. Search box is scoped to the main app on screen
2. Query suggestions provided by the main app on screen• Autocompletes to terms for which the app has search results
3. List of installed Windows Store apps that have implemented the search contract
2
3
1
![Page 27: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/27.jpg)
4. Result recommendations• Must include a thumbnail and title• Indicates a strong or exact match result• Takes users directly to the details of the result
5. Results• Show the count or not found• Be pertinent• Allow search refinementwith filters for example
Search Anatomy
4
5
![Page 28: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/28.jpg)
Implementing Search
demo
![Page 29: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/29.jpg)
SHARE
![Page 30: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/30.jpg)
Share provides a lightweight, in context experience for
app to app sharing
![Page 31: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/31.jpg)
Sharing From Source to TargetShare Target AppShare Broker
User selects “Share”, active app is sent
event
Activated for sharing
Registers with the DataTransfer
Manager
Source App
Filters list of Target Apps and Quicklinks
User selects Target App or Quicklink
Processes DataPackage contents
Reports Complete
Completes Async calls and returns
Receives event and fills DataPackage
DataPackage lives in source
application
Activate Target as kind shareTarget
![Page 32: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/32.jpg)
Data PackagePlain text
Formatted text
URI
HTML
Images
Files
Custom data formats
![Page 33: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/33.jpg)
Share source & target
demo
![Page 34: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/34.jpg)
SETTINGS
![Page 35: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/35.jpg)
Settings contract provides quick,
consistent, in-context access to settings in your app
![Page 36: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/36.jpg)
Settings
demo
![Page 37: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/37.jpg)
CONCLUSION
![Page 38: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/38.jpg)
You can build amazing apps with the Windows 8 platform, and HTML5
![Page 39: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/39.jpg)
dev.windows.com
![Page 40: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/40.jpg)
Free
Open Source
HTML5
Windows 8
template
for Wordpress
MetroPress
Made by
IdeaNotion
http://metropress.codeplex.com
Self-hosted &
Wordpress.com
Easy to use & customize
Windows 8 secret sauce
included
![Page 41: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/41.jpg)
Ready to create the next app phenomenon?developermovement.ca
![Page 42: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/42.jpg)
Rewards examples – more on developermovement.ca
![Page 43: Confoo - 2013-02-28 - HTML5 & Windows 8, friends with benefits](https://reader033.vdocuments.net/reader033/viewer/2022061108/5442d0b6b1af9f310a8b479d/html5/thumbnails/43.jpg)
Points structure