SlideShare une entreprise Scribd logo
1  sur  60
Télécharger pour lire hors ligne
Pur       Imaginatio
   e            n
Getting Your HTML5 Game Windows 8 Ready with
WinJS
Frédéric Harper
@fharper
http://outofcomfortzone.net
Pure   Imagination
#GM 2 #Win8PI
G
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8
Windows reimagined
A new Windows UI where touch is a first-class   Designed from the chipset up for multiple form-
citizen along with full mouse-and-keyboard      factors – tablets, laptops, desktops & all-in-ones
support




The Windows Store on every device with a full   New development models built on WinRT, including
commerce platform and flexibility               native support for HTML/CSS/JS, C#/XAML,
                                                C++/DirectX
The Windows Store
Paid downloads, trials, and in-app purchases. You      Use your own commerce engine and keep 100%
keep 70% of the first $25k, 80% of the rest            or use the Windows Store’s full commerce platform




Advertise with Microsoft Advertising or your           Robust analytics for free, including demographics,
preferred ad vendor.                                   reviews, referrals, and usage & performance statistics




                                   Microsoft Confidential                       7
Opportunity




 As of March 2012, IDC
Unprecedented Reach
Tools
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
CSS 2D Transforms                    DOM HTML                      HTML5 Selection
CSS 3D Transforms                    DOM Level 3 Core              HTML5 semantic elements
CSS Animations                       DOM Level 3 Events            HTML5 track
CSS Backgrounds & Borders            DOM Style                     HTML5 video and audio
CSS Color                            DOM Traversal and Range       JavaScript Typed Array
CSS Flexbox                          DOMParser and XMLSerializer   ICC Color Profiles
CSS Fonts                            ECMAScript 5                  IndexedDB
CSS Grid                             File Reader API               Page Visibility
CSS Hyphenation                      File Saving                   Pointer (Mouse, Pen, and Touch) Events
CSS Image Values (Gradients)         FormData                      RequestAnimationFrame
CSS Media Queries                    HTML5 Application Cache       Navigation Timing
CSS multi-column Layout              HTML5 async                   Selectors API Level 2
CSS Namespaces                       HTML5 BlobBuilder             SVG Filter Effects
CSS OM Views                         HTML5 Canvas                  SVG, standalone and in HTML
CSS Positioned Floats (Exclusions)   HTML5 Drag and drop           Web Messaging
CSS Selectors                        HTML5 Forms and Validation    Web Sockets
CSS Transitions                      HTML5 Geolocation             Web Workers
CSS Values and Units                 HTML5 History API             XHTML/XML
Data URI                             HTML5 Parser                  XMLHttpRequest (Level 2)
DOM Element Traversal                HTML5 Sandbox                 XMLHttpRequest CORS
Windows Library for JavaScript
(WinJS)
library for building apps using JavaScript
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Demo
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
HTML5 game demo
Page structure
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
WinJS.Utilities.query("a").listen("click", function (evt) {
      // dont load this link in the main window
      evt.preventDefault();

      // get target element
       var link = evt.target;

       //call navigate and pass the href of the link
       WinJS.Navigation.navigate(link.href);
});
WinJS.UI.Pages.define("/home.html", {
// This function is called whenever a user navigates to this page.

       ready: function (element, options) {
           //run code unique to this page
       }

});
Demo
Data binding
var hikerArray = [{
    title: 'John Smith',
    color:'#333333',
    body_img:'/images/body_333333.png',
    face_img:'/images/default_face.png',
    },
    {
    title: 'Erin Dodge',
    color:'#00c0ac',
    body_img: '/images/body_00c0ac.png',
    face_img:'/images/default_face.png',
    },
    {
    title: 'James Parker',
    …
    } ];

var hikerBindingList = new WinJS.Binding.List(hikerArr);
var publicMembers =
   {
       itemList: hikerBindingList
   };

WinJS.Namespace.define("DataHikers", publicMembers);
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
<div id="hikerListView"
        data-win- control="WinJS.UI.ListView"
        data-win-options="{
        itemDataSource: DataHikers.itemList.dataSource,
        itemTemplate: select(‘#hikersTemplate’)
        }‚
></div>
<div id="hikersTemplate" data-win-control="WinJS.Binding.Template">
    <div class=‚template_item">
        <div class=‚img_wrap">
            <img class="face" data-win-bind="src: face_img" />
            <img class="body" data-win-bind="src: body_img" />
        </div>
        <div class=‚overlay">
            <div class=‚text" data-win-bind="innerText: title"></div>
        </div>
    </div>
</div>
WinJS.UI.processAll();
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
App Bar
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
Demo
<div id=‚hikersAppBar" data-win-control="WinJS.UI.AppBar">
</div>
<div id=‚hikersAppBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-
options="{id:'cmdAdd', label: 'New Hiker', icon: 'add'}"></button>
</div>
<div id=‚hikersAppBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-
options="{id:'cmdAdd', label: 'New Hiker', icon: 'add'}"></button>
</div>
// get add command element
var cmdAdd = document.getElementById('cmdAdd');

cmdAdd.addEventListener('click', function (ev) {
       // respond to add hiker command
});
Demo
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS
CreateJS.com
 Get notified about upcoming
CreateJS Workshops in Canada!
aka.ms/createjsworkshops
http://dev.windows.com
                  http://buildnewgames.com/


http://channel9.msdn.com/Events/Build/2012/3-
110
Doing a Windows 8
game?
Ping me
fredh@Microsoft.co
m
Microsoft is committed to protecting your privacy. Survey responses are
collected by Poll Everywhere, a market research company
commissioned by Microsoft to conduct this survey.
• This survey does not request or collect any additional personal
  information from you nor does this survey use any cookies or other
  technologies to track your responses to the survey.
• Your responses to this survey will not be linked to the contact
  information previously collected by Microsoft. Your answers will be
  reported in aggregate with those of other respondents.
• This privacy statement applies only to the survey for this event or
  session. It does not apply to other online or offline Microsoft sites,
  surveys, products, or services.
Submit your session eval at

w8pi.ca/gmg2eval
Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS

Contenu connexe

Tendances

UI Rendering at Wayfair
UI Rendering at WayfairUI Rendering at Wayfair
UI Rendering at WayfairAndrew Rota
 
Lecture 10 Answers
Lecture 10 AnswersLecture 10 Answers
Lecture 10 Answersis4030.ray
 
Taking SharePoint 2010 Offline - European Best Practices Conference
Taking SharePoint 2010 Offline - European Best Practices ConferenceTaking SharePoint 2010 Offline - European Best Practices Conference
Taking SharePoint 2010 Offline - European Best Practices ConferenceGus Fraser
 
Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)
Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)
Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)Gus Fraser
 
Forget the Web Backend: Static Serverless + Client-Side Code for the Win!
Forget the Web Backend: Static Serverless + Client-Side Code for the Win!Forget the Web Backend: Static Serverless + Client-Side Code for the Win!
Forget the Web Backend: Static Serverless + Client-Side Code for the Win!Matti Petrelius
 
ASP.NET 4 and AJAX
ASP.NET 4 and AJAXASP.NET 4 and AJAX
ASP.NET 4 and AJAXKulveerSingh
 
Enterprise Portal 2.0
Enterprise Portal 2.0Enterprise Portal 2.0
Enterprise Portal 2.0Jeremi Joslin
 
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClassEuropean Collaboration Summit
 
Accelerating Digital Transformation With Microsoft Azure And Cognitive Services
Accelerating Digital Transformation With Microsoft Azure And Cognitive ServicesAccelerating Digital Transformation With Microsoft Azure And Cognitive Services
Accelerating Digital Transformation With Microsoft Azure And Cognitive ServicesThuan Ng
 
ASAS 2013 - Architecture for dynamic mobile forms at MoreApps
ASAS 2013 - Architecture for dynamic mobile forms at MoreApps ASAS 2013 - Architecture for dynamic mobile forms at MoreApps
ASAS 2013 - Architecture for dynamic mobile forms at MoreApps Avisi B.V.
 
Dear Azure: External collaboration with Azure AD B2B
Dear Azure: External collaboration with Azure AD B2BDear Azure: External collaboration with Azure AD B2B
Dear Azure: External collaboration with Azure AD B2BSjoukje Zaal
 
BigCommerce at VueConf 2020: Headless Lightning Talk
BigCommerce at VueConf 2020: Headless Lightning TalkBigCommerce at VueConf 2020: Headless Lightning Talk
BigCommerce at VueConf 2020: Headless Lightning TalkBigCommerce
 
Building High Quality Solutions with Design Patterns & Application Foundation...
Building High Quality Solutions with Design Patterns & Application Foundation...Building High Quality Solutions with Design Patterns & Application Foundation...
Building High Quality Solutions with Design Patterns & Application Foundation...Christoffer Sabsay
 
#SPSOttawa introduction to the #microsoftGraph
#SPSOttawa introduction to the #microsoftGraph#SPSOttawa introduction to the #microsoftGraph
#SPSOttawa introduction to the #microsoftGraphVincent Biret
 
Endeca Performance Considerations
Endeca Performance ConsiderationsEndeca Performance Considerations
Endeca Performance ConsiderationsCirrus10
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppRavi Teja
 

Tendances (20)

UI Rendering at Wayfair
UI Rendering at WayfairUI Rendering at Wayfair
UI Rendering at Wayfair
 
Lecture 10 Answers
Lecture 10 AnswersLecture 10 Answers
Lecture 10 Answers
 
Taking SharePoint 2010 Offline - European Best Practices Conference
Taking SharePoint 2010 Offline - European Best Practices ConferenceTaking SharePoint 2010 Offline - European Best Practices Conference
Taking SharePoint 2010 Offline - European Best Practices Conference
 
Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)
Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)
Advanced SharePoint Integration (Azure Service Bus and Dynamics CRM)
 
Forget the Web Backend: Static Serverless + Client-Side Code for the Win!
Forget the Web Backend: Static Serverless + Client-Side Code for the Win!Forget the Web Backend: Static Serverless + Client-Side Code for the Win!
Forget the Web Backend: Static Serverless + Client-Side Code for the Win!
 
Access & SharePoint
Access & SharePointAccess & SharePoint
Access & SharePoint
 
ASP.NET 4 and AJAX
ASP.NET 4 and AJAXASP.NET 4 and AJAX
ASP.NET 4 and AJAX
 
Enterprise Portal 2.0
Enterprise Portal 2.0Enterprise Portal 2.0
Enterprise Portal 2.0
 
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
[Vochten/Harbar] SharePoint Server On Premises & Hybrid PowerClass
 
Accelerating Digital Transformation With Microsoft Azure And Cognitive Services
Accelerating Digital Transformation With Microsoft Azure And Cognitive ServicesAccelerating Digital Transformation With Microsoft Azure And Cognitive Services
Accelerating Digital Transformation With Microsoft Azure And Cognitive Services
 
ASAS 2013 - Architecture for dynamic mobile forms at MoreApps
ASAS 2013 - Architecture for dynamic mobile forms at MoreApps ASAS 2013 - Architecture for dynamic mobile forms at MoreApps
ASAS 2013 - Architecture for dynamic mobile forms at MoreApps
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 
Html5 css3 Online Training
Html5 css3 Online Training Html5 css3 Online Training
Html5 css3 Online Training
 
Dear Azure: External collaboration with Azure AD B2B
Dear Azure: External collaboration with Azure AD B2BDear Azure: External collaboration with Azure AD B2B
Dear Azure: External collaboration with Azure AD B2B
 
BigCommerce at VueConf 2020: Headless Lightning Talk
BigCommerce at VueConf 2020: Headless Lightning TalkBigCommerce at VueConf 2020: Headless Lightning Talk
BigCommerce at VueConf 2020: Headless Lightning Talk
 
Building High Quality Solutions with Design Patterns & Application Foundation...
Building High Quality Solutions with Design Patterns & Application Foundation...Building High Quality Solutions with Design Patterns & Application Foundation...
Building High Quality Solutions with Design Patterns & Application Foundation...
 
#SPSOttawa introduction to the #microsoftGraph
#SPSOttawa introduction to the #microsoftGraph#SPSOttawa introduction to the #microsoftGraph
#SPSOttawa introduction to the #microsoftGraph
 
Endeca Performance Considerations
Endeca Performance ConsiderationsEndeca Performance Considerations
Endeca Performance Considerations
 
Getting Your Website Up & Running
Getting Your Website Up & RunningGetting Your Website Up & Running
Getting Your Website Up & Running
 
Pros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside AppPros and Cons of developing a Thick Clientside App
Pros and Cons of developing a Thick Clientside App
 

Similaire à Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS

Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshopJames Pearce
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものMicrosoft
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인Daum DNA
 
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)Felix Faber
 
Sviluppare giochi per il nuovo windows phone
Sviluppare giochi per il nuovo windows phoneSviluppare giochi per il nuovo windows phone
Sviluppare giochi per il nuovo windows phoneDan Ardelean
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft EdgeChris Love
 
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefitsDevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefitsFrédéric Harper
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsIvano Malavolta
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User ExperienceMahbubur Rahman
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8David Chou
 
The web as it should be
The web as it should beThe web as it should be
The web as it should bethebeebs
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
Single page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiSingle page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiAlexander Zeitler
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.agup2009
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionJames Pearce
 

Similaire à Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS (20)

Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすもの
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
 
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
HTML5 - Chances and Pitfalls (Bytro Labs GmbH)
 
Sviluppare giochi per il nuovo windows phone
Sviluppare giochi per il nuovo windows phoneSviluppare giochi per il nuovo windows phone
Sviluppare giochi per il nuovo windows phone
 
JavaScript Basics
JavaScript BasicsJavaScript Basics
JavaScript Basics
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
 
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefitsDevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
DevTeach Montreal - 2012-12-11 - Windows 8 & HTML5: friends with benefits
 
HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8
 
The web as it should be
The web as it should beThe web as it should be
The web as it should be
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Single page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiSingle page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web api
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
 
Html5
Html5Html5
Html5
 

Plus de Frédéric Harper

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)Frédéric Harper
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Frédéric Harper
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04Frédéric Harper
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Frédéric Harper
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...Frédéric Harper
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Frédéric Harper
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30Frédéric Harper
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Frédéric Harper
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Frédéric Harper
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Frédéric Harper
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Frédéric Harper
 

Plus de Frédéric Harper (20)

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
 

Dernier

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Dernier (20)

UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

Windows 8 Pure Imagination - 2012-11-24 - Getting your HTML5 game Windows 8 ready with WinJS

  • 1. Pur Imaginatio e n Getting Your HTML5 Game Windows 8 Ready with WinJS Frédéric Harper @fharper http://outofcomfortzone.net
  • 2. Pure Imagination
  • 6. Windows reimagined A new Windows UI where touch is a first-class Designed from the chipset up for multiple form- citizen along with full mouse-and-keyboard factors – tablets, laptops, desktops & all-in-ones support The Windows Store on every device with a full New development models built on WinRT, including commerce platform and flexibility native support for HTML/CSS/JS, C#/XAML, C++/DirectX
  • 7. The Windows Store Paid downloads, trials, and in-app purchases. You Use your own commerce engine and keep 100% keep 70% of the first $25k, 80% of the rest or use the Windows Store’s full commerce platform Advertise with Microsoft Advertising or your Robust analytics for free, including demographics, preferred ad vendor. reviews, referrals, and usage & performance statistics Microsoft Confidential 7
  • 8. Opportunity As of March 2012, IDC
  • 10. Tools
  • 12. CSS 2D Transforms DOM HTML HTML5 Selection CSS 3D Transforms DOM Level 3 Core HTML5 semantic elements CSS Animations DOM Level 3 Events HTML5 track CSS Backgrounds & Borders DOM Style HTML5 video and audio CSS Color DOM Traversal and Range JavaScript Typed Array CSS Flexbox DOMParser and XMLSerializer ICC Color Profiles CSS Fonts ECMAScript 5 IndexedDB CSS Grid File Reader API Page Visibility CSS Hyphenation File Saving Pointer (Mouse, Pen, and Touch) Events CSS Image Values (Gradients) FormData RequestAnimationFrame CSS Media Queries HTML5 Application Cache Navigation Timing CSS multi-column Layout HTML5 async Selectors API Level 2 CSS Namespaces HTML5 BlobBuilder SVG Filter Effects CSS OM Views HTML5 Canvas SVG, standalone and in HTML CSS Positioned Floats (Exclusions) HTML5 Drag and drop Web Messaging CSS Selectors HTML5 Forms and Validation Web Sockets CSS Transitions HTML5 Geolocation Web Workers CSS Values and Units HTML5 History API XHTML/XML Data URI HTML5 Parser XMLHttpRequest (Level 2) DOM Element Traversal HTML5 Sandbox XMLHttpRequest CORS
  • 13. Windows Library for JavaScript (WinJS) library for building apps using JavaScript
  • 18. Demo
  • 32. WinJS.Utilities.query("a").listen("click", function (evt) { // dont load this link in the main window evt.preventDefault(); // get target element var link = evt.target; //call navigate and pass the href of the link WinJS.Navigation.navigate(link.href); });
  • 33. WinJS.UI.Pages.define("/home.html", { // This function is called whenever a user navigates to this page. ready: function (element, options) { //run code unique to this page } });
  • 34. Demo
  • 36. var hikerArray = [{ title: 'John Smith', color:'#333333', body_img:'/images/body_333333.png', face_img:'/images/default_face.png', }, { title: 'Erin Dodge', color:'#00c0ac', body_img: '/images/body_00c0ac.png', face_img:'/images/default_face.png', }, { title: 'James Parker', … } ]; var hikerBindingList = new WinJS.Binding.List(hikerArr);
  • 37. var publicMembers = { itemList: hikerBindingList }; WinJS.Namespace.define("DataHikers", publicMembers);
  • 39. <div id="hikerListView" data-win- control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DataHikers.itemList.dataSource, itemTemplate: select(‘#hikersTemplate’) }‚ ></div>
  • 40. <div id="hikersTemplate" data-win-control="WinJS.Binding.Template"> <div class=‚template_item"> <div class=‚img_wrap"> <img class="face" data-win-bind="src: face_img" /> <img class="body" data-win-bind="src: body_img" /> </div> <div class=‚overlay"> <div class=‚text" data-win-bind="innerText: title"></div> </div> </div> </div>
  • 47. Demo
  • 49. <div id=‚hikersAppBar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win- options="{id:'cmdAdd', label: 'New Hiker', icon: 'add'}"></button> </div>
  • 50. <div id=‚hikersAppBar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win- options="{id:'cmdAdd', label: 'New Hiker', icon: 'add'}"></button> </div>
  • 51. // get add command element var cmdAdd = document.getElementById('cmdAdd'); cmdAdd.addEventListener('click', function (ev) { // respond to add hiker command });
  • 52. Demo
  • 54. CreateJS.com Get notified about upcoming CreateJS Workshops in Canada! aka.ms/createjsworkshops
  • 55. http://dev.windows.com http://buildnewgames.com/ http://channel9.msdn.com/Events/Build/2012/3- 110
  • 56. Doing a Windows 8 game?
  • 58. Microsoft is committed to protecting your privacy. Survey responses are collected by Poll Everywhere, a market research company commissioned by Microsoft to conduct this survey. • This survey does not request or collect any additional personal information from you nor does this survey use any cookies or other technologies to track your responses to the survey. • Your responses to this survey will not be linked to the contact information previously collected by Microsoft. Your answers will be reported in aggregate with those of other respondents. • This privacy statement applies only to the survey for this event or session. It does not apply to other online or offline Microsoft sites, surveys, products, or services.
  • 59. Submit your session eval at w8pi.ca/gmg2eval

Notes de l'éditeur

  1. DO NOT brush over this slide. Pure Imagination is as much a social event as it is a technical event. Get people talking and sharing. Remind them of this and encourage them to LIKE the page or follow on twitter if they haven’t done so already. Ensure that they use the right hashtag when tweeting. Also clarify that in the FB address, it is “pee-eye” on “pee-elle”.
  2. Fill in your session code. Your track owner will provide this to you. The final hashtag should look like #[track][code] #Win8PI. Eg. #DES1 #Win8PI.
  3. Windows reimaginedFor consumers, for developers
  4. [Speak to bullets as presented above]Analytics DetailsKey pivots:Audience demographics (age, gender, country)Device class (tablet, laptop, etc.)Paid vs. FreeKey MeasuresVol. of apps (download and submissions)Top grossingTop AppsRatingsReviewsApp quality (hangs, crashes)App performance (relative to category/sub-category)Referrals (how did people discover your app?)
  5. Windows is, by far, the largest platform in the world. There are over a billion Window PCs in current use, including 500m Windows 7 devices as of last December. In fact, over the last two years, there have been more Windows licenses sold than Android, iOS and Macs combined.Every Windows 7 PC can run Windows 8Most Windows licenses are sold with a new PCThis is a huge developer opportunity..
  6. We are everywhere.Mention localization. You can capitalize on that and make a lot more money. NOTE: YOU MUST READ THIS BLOG POST FOR YOUR LOCAL DETAILS http://blogs.msdn.com/b/windowsstore/archive/2012/01/05/global-reach.aspx Buy from 231 markets.. 45 market-specific app catalog..sLocal pricing in 40 markets *** Developer payments in 51 markets.. Is not in slide, keep it relevant to locale **
  7. You are here !! The focus will be HTML/JS… Click… But do remember WInRT is helping.. And is available to provide infrastructure.. We will see a little bit of WinRT in action in some demos
  8. Talking Track:IE10 is the next step in hardware-accelerated standards with 33 new standards supported (3x more than IE9). It’s easier to design your site layout including flexbox, grid, animations, and transitionsDrag and drop, forms, and FileAPI make the web feel more like native applicationsSandbox, IndexedDB and a new set of Performance APIs help you build faster, more secure sites with large data setsChanges between IE9 to IE10 also demonstrate how standards-based technologies evolve:WebSockets is a great example of this, which delivers real-time notifications and updates in the browser. The spec has made significant progress in the past months in working groups like the W3C. Microsoft tests and vets specs like WebSockets in our HTML5 Labs and has contributed over 456 new test cases since IE9 launch. In this case, WebSockets was stabilized and recommended to the Internet Engineering Steering Group for final approval. It was included into IE10 through our platform previewsLinks:List of IE10 supported standards (http://msdn.microsoft.com/en-us/library/ie/hh673549(v=vs.85).aspx)Site-ready web sockets (http://blogs.msdn.com/b/ie/archive/2011/09/15/site-ready-websockets.aspx)HTML5 Labs (http://html5labs.interoperabilitybridges.com/)IE Testing Center (http://samples.msdn.microsoft.com/ietestcenter/)
  9. Now we can get into the details.. Again, since the platform is HTML you can take advantage of the HTML DOM elements.. WinJS has CSS that customizes the look &amp; feel of standard DOM elements to match the Windows personality..
  10. Don’t forget to mention these are optimized too.. We have ensured the library is all independent animation.. Also, explain to the users that if they need their own animations for their own controls, they can still use the core animations for their own controls.. Use the default
  11. Become familiar with these by running the animation demo first.
  12. If you prefer to use your own library, you can. As long as your app is compliant with SDK, you will be fine.. At build, we explicitly wrote a sample (finance) using jQuery… It works very well.. If you are bringing your own library, here is the advise that I can give you:Mix &amp; Match works fine. WinJS does a lot of things well, such as simplifying the object model, wrappers for file system, implementing the promise pattern, etc.. Use WinJS for all of that.. Use your favorite library for everything else, but do try to adhere to the Windows UI and the Windows personality. Your users will appreciate it if you do..
  13. Your app can be displayed in any of the following sizes:Snapped: 320x768 (a minimum of 1366x768 is required to support snapped view)Full screen landscape / filled: minimum 1024x768Full screen portrait: minimum 768x1024Although there are an infinite number of supported sizes, it is important to verify your application in the most common application dimensions, namely:1024px by 768px1366px by 768px
  14. As screen’s pixel density increase, UI elements will get smallerTo maintain consistent physical sizes of UI elements for touchability and readability, the system automatically scales UI up by 1.4x or 1.8x based on DPI &amp; resolution
  15. Inside of windows 8 we have the ability to make a more immersive app. And visual studio helps by giving us templates for a single page application.The application starts on the default.html page. This page has a container called contenthost. On page navigation instead of switching to a page, the application inserts the new page data into the contentHost container.This creates a fast and smooth experience, and allows scripts and data to be shared across pages.
  16. We want to start our project using the Navigation App project template. You can find the Navigation App template under “javascript” in the New Project menu The template will give you an empty application to transfer the existing html5 game into.This will allow us to easily build out the different sections of our app
  17. Porting your game is as easy as dropping your game assets into your new Visual Studio project. For YetiBowl we created a separate folder called GameLibrary to hold all of our game specific code.NOTE: if you did the live preview you used a blank up, but here we are preparing to add new features that can only be done inside an app, so we are using navigation to build different pages.
  18. To add another page to the application:In the solution explorer, right click the pages folder and select New Folder. Name it “game.html”Right click the game folder and select Add &gt; New Item.Select Page Control and use the name “game.html” and hit AddThis will generate three files: “game.html”, “game.js” and “game.css”Game.html will be document that your game canvas will liveFor this application we want to give the user the ability to add there own customized hikers to the game.We can repeat these steps to add a few pages for adding and editing hikers
  19. Inside the package.appxmanifest file is where you will want to define your logos, names, splash screens and other key features of your app.Your app will not pass store certification unless you have customized the data in this file.NOTE: if you did the demo build on the app, you may not need to get into many details here, if not, besure you walk through requirements for logos, splashscreen etc..
  20. WinJS is a library that visual studio adds for you to your windows 8 projects. Although it’s not a necessary component for an app, it provides you will many helpful APIs and utilities.
  21. Were still using web technologies inside the app, so we are still using hyperlinks, but we want them to navigate in between our pages instead of to different websites.We want to override the links normal behavior and use WinJS.Navigation instead. We can do this by binding a click event to all links and calling “WinJS.Navigation.navigate”Now links load there content into our default.html page
  22. This method is helpful to define blocks of script that you want to execute per page.This function is what we use to trigger the startgame() method, when a user navigates to the game page in the ready event.
  23. One of our advanced features in this game, is the ability to customize your hikers. Hikers are saved as local data.We need to create a global list of hikers that we can display, add/edit and then use as a data source for our in game hiker characters. First we&apos;re going to create a WinJS.Binding.List and populate it with some default hikers.
  24. This function allows you to create your own namespace as a way of organizing your code.To be able to access your methods or data objects from external sources (buttons in the DOM or other classes), it needs to have a public name space.This is another features that we get for free with “WinJS”
  25. Now that we have our hikers data structure, we want to display our list of hikers using the WinJS.UI.ListView like this.
  26. Using this binding list we can create a WinJS.UI.ListView in hikers.htmlWe pass in a few options to the controlitemDataSource: this tells the control where its data source comes fromitemTemplate: the template that should be rendered for each item (we will create this next)
  27. the “win-data-bind” attribute lets you bind data from each item to DOM properties in template elements.
  28. Inside the pagename.js file that is loaded when this file is linked to, a simple method called “WinJS.UI.processAll()” is called.This reviews the page and executes the templates, in this case building the views from the data object.
  29. Using CSS you can change the template to look however you like
  30. The shift in focus is crucial – it means that the users, instead of remembering how to use the software, are remembering the content – the news story they read about, the social updates from their friends, the products they are shopping for.
  31. Windows 8 is about putting the app on the center stage. Content is the heart of any experience, and everything else are only tools to let you consume and interact with your contentIt’s important to think about how to leverage this real estate and place content first, so that users can actually be immersed in the things they love.Where does chrome come from? LayoutCommandsNavigationLet’s look at how we handle these in a Content first world
  32. The app bar can give contextual commands to your ListView control.We will add our app bar to hikers.html
  33. To add a command to the AppBar is simple
  34. - id: this sets the id attribute - label: the text under the command - icon: the icon style
  35. Attaching events to commands can be done with addEventListener
  36. As the speaker of the session, we’ll depend on you encourage folks to submit their session evaluation. It is in the best interest of both you and the Pure Imagination team to get the details. For you, to know how your content and presentation skills landed, and for the Pure Imagination team to see which sessions did well for repeats and which sessions may need tweaking for future presentations.To facilitate getting the data, Pure Imagination is using Poll Everywhere. Since it is an external company, this slide must be shown to attendees and virtual followers. You can summarize verbally by saying “I’m required to show this to you. The gist is that for your evals, Pure Imagination is using a service called Poll Everywhere and as part of submitting your eval, there is absolutely no collection of personal information, etc.”
  37. Fill in the URL with your session code. Your track owner will provide this to you. The final URL should look like w8pi.ca/[track][code]eval. Eg. W8pi.ca/des1eval. For aesthetic purposes, do not include “http://” at the beginning of the URL.