building windows store 8.1 apps using html, css and...
TRANSCRIPT
![Page 1: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/1.jpg)
| Basel
Building Windows Store 8.1 apps using HTML, CSS and JavaScript (e) Martin Beeby
Technical Evangelist
@thebeebs
![Page 2: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/2.jpg)
Agenda
What’s In a HTML5 App 10’What is it and who is using it
Building an app 50’A basic travel app
![Page 3: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/3.jpg)
What is a Windows Store app built using HTML?Written in HTML, CSS, & JavaScript
Can use jQuery, Dojo & other libraries
Renders using Trident
Adds layers of security
Full access to the Windows Runtime
Designed for touch
Deployed via the Windows Store
An app that runs natively on Windows using web technologies
![Page 4: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/4.jpg)
What’s built in HTML5?Many of Microsoft first party apps
![Page 5: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/5.jpg)
![Page 6: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/6.jpg)
![Page 7: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/7.jpg)
![Page 8: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/8.jpg)
![Page 9: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/9.jpg)
![Page 10: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/10.jpg)
![Page 11: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/11.jpg)
![Page 12: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/12.jpg)
![Page 13: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/13.jpg)
Windows Store app built using HTML architecture
Windows
![Page 14: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/14.jpg)
Windows Library for JavaScript (WinJS)
Style sheets
Core (promises, class, namespace, etc.)
App model
Data binding
Controls
Animations
Utilities
A collection of toolkits to make building Windows Store apps fast and easy
![Page 15: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/15.jpg)
| Basel
WinJS Basics
![Page 16: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/16.jpg)
![Page 17: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/17.jpg)
Where the magic happens
![Page 18: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/18.jpg)
Differences from web environment
Styling changes
Windows Runtime access
Single page model
App sizes and orientations
Security context and innerHTML
Local and web context
IE11 DOCMODE
Network connectivity and offline experience
All the advantages of HTML programming plus the power, personality, and security of Windows.
![Page 19: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/19.jpg)
| Basel
File New > Hub
![Page 20: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/20.jpg)
![Page 21: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/21.jpg)
| Basel
Blend
![Page 22: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/22.jpg)
![Page 23: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/23.jpg)
| Basel
Customisation
![Page 24: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/24.jpg)
![Page 25: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/25.jpg)
| Basel
Hub Sections
![Page 26: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/26.jpg)
![Page 27: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/27.jpg)
| Basel
Add Photo Section
![Page 28: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/28.jpg)
![Page 29: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/29.jpg)
| Basel
Item Binding
![Page 30: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/30.jpg)
WinJS.Binding
<img class="itemImage"data-win-bind="src: imageUrl WinJS.Binding.oneTime" />
<div class="win-type-large itemTitle"data-win-bind="textContent: title WinJS.Binding.oneTime"></div>
data-win-bind="style.backgroundImage: urlToImage MyConverters.cssUrl;"JS:
WinJS.Namespace.define("MyConverters", {
cssUrl: WinJS.Binding.converter(function (url) {
return "url('" + url + "')";
}),
![Page 31: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/31.jpg)
![Page 32: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/32.jpg)
| Basel
Item Detail
![Page 33: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/33.jpg)
![Page 34: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/34.jpg)
| Basel
Search
![Page 35: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/35.jpg)
![Page 36: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/36.jpg)
| Basel
Search Wire Up
![Page 37: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/37.jpg)
![Page 38: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/38.jpg)
| Basel
App Manifest
![Page 39: Building Windows Store 8.1 apps using HTML, CSS and ...download.microsoft.com/download/3/0/E/30E8E435-33D1-47B0-B0A2-34F9BD6… · Building Windows Store 8.1 apps using HTML, CSS](https://reader031.vdocuments.net/reader031/viewer/2022041018/5ecc644f666c3f0b2345f3ff/html5/thumbnails/39.jpg)