use html5 to build what you want, where you want it
DESCRIPTION
TRANSCRIPT
![Page 1: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/1.jpg)
![Page 2: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/2.jpg)
![Page 3: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/3.jpg)
![Page 4: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/4.jpg)
GoalUse your existing skills to build apps
Learn few typical features
![Page 5: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/5.jpg)
IS IMPORTANT
the web community is big
because
![Page 6: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/6.jpg)
IS IMPORTANT
There are a lot of reusable things on the internet
because
![Page 7: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/7.jpg)
IS IMPORTANT
It is reusable across multiple platforms
because
![Page 8: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/8.jpg)
IS IMPORTANT
it is reusable across multiple platforms
with a minimum effort
because
![Page 9: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/9.jpg)
How does HTML5 fit in the windows 8 platform
![Page 10: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/10.jpg)
Windows 8 platform
![Page 11: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/11.jpg)
Windows 8 platform
![Page 12: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/12.jpg)
![Page 13: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/13.jpg)
![Page 14: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/14.jpg)
We will build this app
![Page 15: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/15.jpg)
DEMO:Turn an existing HTML website into a Win 8 Store application
![Page 16: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/16.jpg)
![Page 17: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/17.jpg)
![Page 18: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/18.jpg)
From HTML to Win 8 in 3 steps
1. Use your existing HTML, CSS and JavaScript skills
2. Add typical Windows 8 features like: Tiles
WinJS and WinJS controls
Portrait, landscape, snapped and filled
Contracts
...
3. Deploy your app to the store
![Page 19: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/19.jpg)
Use your HTML and CSS skills
![Page 20: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/20.jpg)
Popular HTML Features
![Page 21: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/21.jpg)
Popular CSS feature
![Page 22: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/22.jpg)
DEMO:(re)use your html and css skills
![Page 23: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/23.jpg)
WinJS
![Page 24: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/24.jpg)
WinJS
Library for building Windows Store apps using JavaScript
Matches the Windows Store design guidelines
Offers controls for common user experiences
Designed for touch as well as traditional input
Scales across form factors
![Page 25: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/25.jpg)
WinJS Contains
![Page 26: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/26.jpg)
![Page 27: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/27.jpg)
Or use your favorite library
jQuery, knockout, MooTools, Dojo, YUI
like
![Page 28: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/28.jpg)
Dangerous scripts
Microsoft doesn’t allow code injection
if (isWin8) {MSApp.execUnsafeLocalFunction(function () {
body.appendChild(container).appendChild(div);});
}else {
body.appendChild(container).appendChild(div);}
![Page 29: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/29.jpg)
WinJS Controls or Modern UI Controls
![Page 30: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/30.jpg)
First, you have the standard HTML Controls
<button> <input> <select> <progress> ...
![Page 31: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/31.jpg)
Then, you have WinJS or Modern UI Controlsbased on a <div> or <span> element
with data-win-control to specify the control
and data-win-options to set properties
![Page 32: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/32.jpg)
WinJS Controls
![Page 33: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/33.jpg)
WinJS Styled Controls
![Page 34: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/34.jpg)
More controls
![Page 35: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/35.jpg)
Demo: Application bar
![Page 36: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/36.jpg)
DEMO:Application bar
![Page 37: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/37.jpg)
Different states and orientations
![Page 38: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/38.jpg)
Different states == Different UI
![Page 39: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/39.jpg)
![Page 40: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/40.jpg)
![Page 41: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/41.jpg)
![Page 42: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/42.jpg)
Different states == CSS3 Media Queries
![Page 43: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/43.jpg)
Media Queries to support differentlayouts
@media screen and (-ms-view-state: fullscreen-portrait) {}
@media screen and (-ms-view-state: fullscreen-landscape) {}
@media screen and (-ms-view-state: filled) {}
@media screen and (-ms-view-state: snapped) {}
![Page 44: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/44.jpg)
![Page 45: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/45.jpg)
![Page 46: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/46.jpg)
![Page 47: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/47.jpg)
Demo: Snapped application
![Page 48: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/48.jpg)
DEMO:Support different orientations
![Page 49: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/49.jpg)
Contracts
![Page 50: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/50.jpg)
Contracts
Every webdeveloper can choose where he wants to
put the search or share functionality
Every windows developer can choose where he wants to put the option to change the settings
![Page 51: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/51.jpg)
![Page 52: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/52.jpg)
![Page 53: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/53.jpg)
![Page 54: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/54.jpg)
Contracts
Contracts enable integrating the Windows 8 experience into your app
![Page 55: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/55.jpg)
Contracts
![Page 56: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/56.jpg)
Demo: Share Contract
![Page 57: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/57.jpg)
DEMO:Contracts
![Page 58: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/58.jpg)
Tiles
![Page 59: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/59.jpg)
Tiles
Tap on tile to launch or switch an app
Static tiles
Static default tile specified in app manifest
Square and wide tile
Dynamic Tiles
Can have live updates
Based on templates
![Page 60: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/60.jpg)
![Page 61: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/61.jpg)
Templates
![Page 62: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/62.jpg)
TileUpdater
![Page 63: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/63.jpg)
Demo: Tiles
![Page 64: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/64.jpg)
DEMO:Tiles
![Page 65: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/65.jpg)
![Page 66: Use html5 to build what you want, where you want it](https://reader034.vdocuments.mx/reader034/viewer/2022052617/545c9f9eaf7959b4098b4878/html5/thumbnails/66.jpg)
Resources
Images
If we don’t remember me
http://iwdrm.tumblr.com
Anonymous Ostrich
Klaus Delanghe