Windows 8 Apps with HTML5 and JavaScript: from zero to hero!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 110 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/51155 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC Oslo 2012102 / 110
1
2
3
5
7
9
11
12
15
19
20
23
24
27
28
29
31
32
33
35
36
37
38
39
41
43
46
47
51
52
56
59
60
61
62
63
65
67
70
71
74
75
77
79
80
81
83
87
91
92
93
94
95
96
97
98
100
103
106
108
110
00:00
Mobile appBuildingComputing platformSoftware developerCache (computing)SynchronizationDrag (physics)Independent set (graph theory)Touch typingDigital filterNetwork socketWeb pagePointer (computer programming)Lie groupWebsiteDemosceneMachine codeOperator (mathematics)Cartesian coordinate systemWorkstation <Musikinstrument>Web browserStandard deviationGoodness of fitLevel (video gaming)HypermediaFilm editingArithmetic meanData storage deviceWindowMultiplication signNumberMetropolitan area networkComputing platformProteinOpen setForm (programming)Software testingAxiom of choiceCASE <Informatik>Process (computing)Software frameworkGame theoryCodeoutputMobile appSocket-SchnittstelleWeb 2.0InternetworkingSlide ruleStability theoryVideoconferencingComputer animation
03:46
Software developerDemo (music)Singuläres IntegralSimultaneous localization and mappingWebsiteSoftware testingWeb browserComputing platformMultiplication signFunctional (mathematics)WindowDemo (music)Web pageWeb 2.0Content (media)Inheritance (object-oriented programming)Transformation (genetics)Acoustic shadowComputer animation
04:34
Software developerSimultaneous localization and mappingFingerprintCategory of beingMechatronicsCross-site scriptingLimit (category theory)Programmable read-only memorySolid geometryData modelVideo gameMIDILine (geometry)Normed vector spaceAsynchronous Transfer ModeMass flow rateMathematicsWechselseitige InformationHTTP cookieElectronic visual displayDialectSound effectDigital filterTable (information)Machine visionFunctional (mathematics)Line (geometry)Web pageElement (mathematics)RectangleGraph coloringFlagBlogSystem callLogic synthesisWeb 2.0Term (mathematics)QuicksortSelf-organizationFilter <Stochastik>Perspective (visual)AngleMedical imagingDifferent (Kate Ryan album)DampingForm (programming)Standard deviationMultiplication signInformationNumberContent (media)SpacetimeSampling (statistics)Equaliser (mathematics)Group actionSpecial unitary groupRight angleCategory of beingPower (physics)Heegaard splittingLatent heatWebsiteFraction (mathematics)Inheritance (object-oriented programming)Electronic visual displayPosition operatorSoftware developerWeb browserPhysicalismReal-time operating systemStress (mechanics)FamilyFreewareCodeSign (mathematics)Level (video gaming)Axiom of choiceGradientVector spaceMathematicsHeat transferDemosceneDivision (mathematics)Row (database)Artificial lifeComputer fileSound effectComputer hardwareDynamical systemClique-widthWordComputer animation
11:11
Demo (music)Software developerCore dumpService (economics)Mobile appData modelHypermediaGreen's functionView (database)Physical systemGame controllerCross-site scriptingLetterpress printingFundamental theorem of algebraCryptographySummierbarkeitGUI widgetUser interfaceWindowFormal languageCartesian coordinate systemDevice driverModule (mathematics)Projective planeRun time (program lifecycle phase)Different (Kate Ryan album)Connectivity (graph theory)Set (mathematics)Computing platformGame controllerMereologyCore dumpHypermediaUser interfaceMultiplication signLatent heatMessage passingSoftware developerRemote administrationComputer fileReal-time operating systemRight angleInternetworkingCuboidEndliche ModelltheorieCodeStatement (computer science)Kernel (computing)Greatest elementComputer hardwareForm (programming)LaptopTouchscreenNumberWeb browserStandard deviationOperating systemWeb applicationMetropolitan area networkFundamental theorem of algebraData managementScripting languageSystem callForm factor (electronics)TelecommunicationTerm (mathematics)UsabilityProcess (computing)Spring (hydrology)Streaming mediaPower (physics)Tablet computerDynamic random-access memoryLevel (video gaming)Nominal numberSocial classoutputExplosionSelf-organizationCausalityCryptographyPlanningOperator (mathematics)VideoconferencingWritingComputer animation
17:46
Software developerTemplate (C++)Visual systemMaxima and minimaSample (statistics)VisualBASICScripting languageData typeGUI widgetQuicksortFreewareNumberDifferent (Kate Ryan album)Formal languageVisualization (computer graphics)Projective planeCartesian coordinate systemOpen setVirtual machineExpressionTemplate (C++)Queue (abstract data type)Computer simulationWorkstation <Musikinstrument>Machine visionMultiplicationComputer animation
18:48
Software developerSheaf (mathematics)Vertical directionDefault (computer science)Group actionContent (media)HorizonWeb pageRight angleSystem callWeb browserCartesian coordinate systemBitMathematicsElement (mathematics)Real-time operating systemAlgebraGraph coloringForm (programming)Multiplication signWebsiteCore dumpBlogComputer animation
19:48
Software developerInterior (topology)Default (computer science)String (computer science)Value-added networkMessage passingError messageStack (abstract data type)Video game consoleSystem callContent (media)Real-time operating systemCartesian coordinate systemCategory of beingWeb pageElement (mathematics)Selectivity (electronic)Video game consoleQuery languageContent (media)Row (database)Asynchronous Transfer ModeComputer animation
20:41
Software developerFormal languageFunction (mathematics)Meta elementLink (knot theory)Execution unitBootingDefault (computer science)System callCodeCartesian coordinate systemComputer fileDefault (computer science)Point (geometry)Type theoryObject (grammar)Inheritance (object-oriented programming)Scripting languageWindowWeb pageFile systemHome pageProjective planeSingle-precision floating-point formatVirtual machineNamespaceSlide ruleOpen setElement (mathematics)Data storage deviceVisualization (computer graphics)Block (periodic table)Template (C++)Functional (mathematics)Physical systemHypermediaMereologyDemosceneMedical imagingSpacetimeWordSoftwareDirected graphSoftware developerComputer animation
24:06
Software developerScripting languageLink (knot theory)CAN busFunction (mathematics)Data storage deviceBootingUniform resource locatorGame controllerWindowMedical imagingOpen setCodeFunction (mathematics)Event horizonUniform resource locatorFile systemComputer fileSoftware frameworkProjective planePattern languageFunctional (mathematics)Operator (mathematics)Variable (mathematics)PlastikkarteResultantSystem callObject (grammar)SynchronizationRight angleSource codeRoboticsWordTunisPhysical systemPoint (geometry)InternetworkingOrder (biology)Directed graphSingle-precision floating-point formatComputer animation
26:37
Software developerScripting languageCAN busFunction (mathematics)Uniform resource locatorMedical imagingSelectivity (electronic)Open setPhysical systemCartesian coordinate systemView (database)Greatest elementProcess (computing)MereologyRight angleComputer animationMeeting/Interview
27:37
Software developerCartesian coordinate systemPoint cloudLine (geometry)Web pagePhysical systemMedical imagingCodeDesign by contractMobile appVirtual machineSystem callOperating systemCASE <Informatik>Software developerRight angleDigital photographyPattern languageFacebookAdventure gameUniform resource locatorProfil (magazine)Multiplication signWindowComputer animationSource code
28:26
Library (computing)Software developerLink (knot theory)Scripting languageFunction (mathematics)CAN busData storage deviceUniform resource locatorHill differential equationComputer fileGame controllerMedical imagingFacebookProfil (magazine)Pattern languageWindowUsabilityPower (physics)LaptopCartesian coordinate systemTouchscreenVirtual machineTouch typingComputer configurationData managementVisualization (computer graphics)Demo (music)Virtual realityOvalBoss CorporationComputer simulationComputer animation
29:58
Software developerScripting languageVirtual machineVirtual realityCartesian coordinate systemComputer simulationWindowTouchscreenCovering spaceUniform resource locatorAsynchronous Transfer ModeNumberTouch typingQuicksortTime zonePoint (geometry)Mobile appSingle-precision floating-point formatEvelyn PinchingZoom lensRotationComputer animation
30:52
Software developerLink (knot theory)Scripting languageData storage deviceComputer fileUniform resource locatorComputer simulationVirtual machineMobile appTouch typingCartesian coordinate systemNavigationComputer configurationReal numberComputer hardwareArmProjective planeCategory of beingSoftwareInternetworkingComputer animation
32:04
Software developerDemo (music)BuildingMobile appLibrary (computing)GUI widgetInteractive televisionoutputFaktorenanalyseScale (map)Scripting languageHyperlinkView (database)Data modelComputer simulationSoftware frameworkCartesian coordinate systemRight angleProjective planeNumberSlide ruleElectronic mailing listElement (mathematics)Standard deviationLibrary (computing)Game controllerWindowSoftware developerTable (information)Rule of inference2 (number)Mobile appVisualization (computer graphics)MereologyContent (media)EmailVideo gameDistancePixelDecision theoryView (database)Multiplication signPrototypeUltraviolet photoelectron spectroscopyBit rateStability theoryComputer animation
34:48
Software developerData modelMenu (computing)Template (C++)Execution unitFunction (mathematics)Local GroupProjective planeProcess (computing)Multiplication signMobile appHeegaard splittingTemplate (C++)BitVirtual machineWindowNumberSound effectWeb pageTesselationRight angleTouchscreenGroup actionGame theoryDependent and independent variablesCartesian coordinate systemView (database)Presentation of a groupComputer animationSource code
35:58
Software developerWeb pageLocal GroupScripting languageLink (knot theory)Data typeMeta elementMaß <Mathematik>Computer-generated imageryComputer fileFunction (mathematics)Directory serviceLibrary (computing)Limit (category theory)Cone penetration testDefault (computer science)BootingElectronic signatureNumber theoryElement (mathematics)Inheritance (object-oriented programming)Focus (optics)CountingDrill commandsToken ringComa BerenicesMereologyKey (cryptography)Hill differential equationCartesian coordinate systemDimensional analysisTemplate (C++)Open setTesselationContent (media)Web pageWindowLibrary (computing)MereologyMobile appGame controllerNavigationSoftware frameworkVirtual machineLine (geometry)CodeMultiplication signSoftware developerGroup actionCategory of beingFunctional (mathematics)Pattern languageNumberDivision (mathematics)Structural loadDefault (computer science)Computer fileView (database)Computer configurationCrash (computing)Thomas BayesRight angleAreaOrder (biology)Core dumpExecution unitProjective planeShared memoryReplication (computing)Standard deviationMetropolitan area networkElement (mathematics)Computer animation
40:05
Software developerContent (media)EmailSheaf (mathematics)Link (knot theory)Template (C++)Overlay-NetzView (database)Exception handlingGroup actionElement (mathematics)Line (geometry)Template (C++)Multiplication signExpressionGame controllerElectronic mailing listDivision (mathematics)Medical imagingDeclarative programmingCodeSoftware frameworkKeyboard shortcutData structureWeb pageLink (knot theory)Real-time operating systemComputer animation
41:39
Software developerEmailContent (media)Template (C++)Electronic visual displayKeyboard shortcutNavigationSheaf (mathematics)Web pageSystem callRevision controlCodeDivision (mathematics)Visualization (computer graphics)Order (biology)Cartesian coordinate systemRun time (program lifecycle phase)Web applicationReal-time operating systemArithmetic meanScripting languagePoint (geometry)Multiplication signElement (mathematics)Process (computing)Right angleComputer animation
42:35
Software developerEmailElement (mathematics)Local GroupRankingCartesian coordinate systemRun time (program lifecycle phase)Element (mathematics)Web pageFormal languageMereologyImage resolutionDifferent (Kate Ryan album)Computer hardwareRevision controlReal numberType theoryContent (media)View (database)Game controllerConnectivity (graph theory)Flash memoryMultiplication signTouchscreenAsynchronous Transfer ModeReal-time operating systemKeyboard shortcutMathematicsProjective planeVolumenvisualisierungCategory of beingCodeRight anglePhysical systemMachine visionSoftware testingSampling (statistics)Process (computing)Decision theoryArithmetic meanScripting languageSpacetimeSystem callComplex (psychology)Computer animation
46:24
Software developerContext awarenessLocal ringProcess (computing)PurchasingComputing platformCategory of beingPhysical systemExpressionGame controllerTemplate (C++)Group actionKeyboard shortcutRight angleSoftware frameworkFreewareCartesian coordinate systemTwitterDifferent (Kate Ryan album)Term (mathematics)Demo (music)AverageGame theoryMultiplication signWindowData storage deviceMereologyWeb 2.0AreaContext awarenessScripting languageContent (media)Endliche ModelltheorieLocal ringCodeQuery languageCuboidPlanningHeegaard splittingComputing platformNumberComputing platformDatabase transactionRun time (program lifecycle phase)Distribution (mathematics)Operating systemComputer configurationFront and back endsPlastikkarteBeta functionLibrary (computing)Connectivity (graph theory)Perspective (visual)Visualization (computer graphics)Public key certificateSoftware testingVirtual machineInformationMobile appAutomatic differentiationProcess (computing)LaptopNeuroinformatikDiffuser (automotive)Marginal distributionPhysical lawSocial classTablet computerMedical imagingInformation securityCASE <Informatik>Slide ruleInternetworkingWave packetSubsetStandard deviationSource codeComputer animation
53:53
Demo (music)Software developerSummierbarkeitSynchronizationContent (media)EmailSheaf (mathematics)Group actionMeta elementLink (knot theory)UsabilityScripting languageDefault (computer science)DokumentvorlageComputer-generated imageryRandom numberGame theoryMultiplication signLink (knot theory)CodeCartesian coordinate systemRadical (chemistry)Visualization (computer graphics)Computer fileRevision controlIntegrated development environmentPoint cloudGame theoryProjective planeWeb pageServer (computing)InformationComputer animation
55:04
Software developerMeta elementLink (knot theory)Scripting languageBootingHazard (2005 film)Game theoryPoint (geometry)BitRevision controlSystem callCartesian coordinate systemConnectivity (graph theory)Point cloudCodeLine (geometry)Mobile appComputer animationSource code
56:07
Software developerMereologyRevision controlSound effectGame theoryWeb pageElement (mathematics)Real-time operating systemContent (media)Point cloudLine (geometry)Video gameMedical imagingRight angleComputer animation
57:08
Software developerAnnulus (mathematics)Standard deviationMedical imagingSource codeTablet computerReal-time operating systemProcess (computing)Set (mathematics)Right angleComputer fileGame theoryMathematicsCartesian coordinate systemTransformation (genetics)Pointer (computer programming)View (database)Computer animationSource code
58:32
Error messageExecution unitSoftware developerBootingFunction (mathematics)Shift operatorEvent horizonMotion captureEvolutionarily stable strategyComputer clusterQuaternionDifferent (Kate Ryan album)Virtual machinePay televisionHydraulic jumpWrapper (data mining)Computer fileDefault (computer science)WindowGame theoryTouch typingRotationReading (process)MathematicsSet (mathematics)Right angleMultiplication signComputer animation
59:52
Software developerFunction (mathematics)DreizehnEvent horizonDemo (music)Hydraulic jumpDifferent (Kate Ryan album)MereologyGame theoryProjective planeSoftware testingBitRight angleData storage deviceMessage passingSoftware developerSampling (statistics)Cartesian coordinate systemWindowVirtual machineTwitterLevel (video gaming)Coma BerenicesView (database)Machine visionExpressionWorkstation <Musikinstrument>CASE <Informatik>Computer animationSource code
Transcript: English(auto-generated)
00:01
All right, I think we are ready to start. Thank you for coming to this session. Let me just recognize some face. But how many of you were sitting here before and saw the previous session? How many of you didn't see my previous session? Guys, I'm sorry. That was a very nice session, wasn't it?
00:22
I'm joking. So this session is about Windows 8. In the past hour, we talked about cut the rope, and I share some of the experience taking the cut the rope game that was initially a native application for iOS into an HTML5 website and then into a Windows 8 app. In this session, I want to focus more
00:42
on the concept of Windows 8 app. And I will break down, and I will show you some of the tools. I will show you some of the platform, some of the capabilities, some of the frameworks. We'll talk about the store. Just want to give you an overview of what means building a metro application in HTML
01:00
and JavaScript today. Before I start, my name is Giorgio Sardo. I work in the Windows evangelist team in Redmond. I'm actually responsible for many of the applications that you see in the Windows store today, as well as many of the beautiful HTML5 websites that we built with the Internet Explorer team in the last year. You probably saw some of them, like Pacman, BMW, Aston Martin.
01:25
We've done hundreds of them. Before I start, let me ask about you. Have you already looked into Windows 8? Have you already start building a metro application using Windows 8? Okay, some of you did. This is an intro session.
01:41
So we'll start on the high level, and eventually sometime I will go deeper and I will show some very deep code or something behind the scenes. If you have any question, feel free to raise your hand. Don't be shy. I'm here to answer. I'm here to make sure that you enjoy the session.
02:01
Let's start with HTML5. And I will start with a couple of slides that I showed earlier. When we were working on i9, and by the way, there is a phone if you want to answer this slide, feel free to answer. When we started on i9, HTML5 was just at the beginning.
02:21
Or I should say, it was getting more solid, more stable. And we had a number of CSS features, we have a number of HTML features like Canvas, audio and video. And it was a fairly good amount of capabilities to start building rich websites. Who's playing cut the rope there?
02:45
Can you hear it? Is it me? I have devices everywhere, but I don't think I'm playing cut the rope now. No, okay. More recently, we released Internet Explorer 10. And as you can see, in the matter of two years,
03:00
the number of standard features just doubled down. We have more than hundreds of capabilities in the browsers today. Most of these are also available in Chrome, in Firefox, Opera, Safari. Those in bold are in particular the most recent. And so you see new things from the CSS world like Grid or Flexbox, and I'll show you some of these.
03:22
You see APIs like to read files, or to go offline, or to do drag and drop. Or you have sockets or web workers, like yesterday there was a very nice workshop about sockets and how they're evolving, and Remi talked about these as well.
03:41
And so I want to spend just a couple of minutes to show you some of the newest features of the HTML5 world, because you will see that those become very important as you start building applications. So I'm going to go to the IE Test Drive. This is a Microsoft website where we publish a lot of new demos every time we add new features to the browsers.
04:03
In particular, I'm going to click the Windows 8 web platform. And I like this page because it gives you a very quick idea of many of, very quick demo for several features. So I always keep the usual one that you already saw, like text shadows, borders, et cetera. And I will start with the 3D transforms.
04:23
Like now using CSS, it's super easy to do 3D transform to your DOM content. So eventually you can set a rotate function and then boom, it comes to you. You can change the perspective. In terms of code, this is just one line of code.
04:42
So I'm just using the CSS3 transform property, prospect, rotate, y. Notice that we get rid of the prefix finally because these specification are getting more solid and it's now safe to use without prefix. Another one that I really like
05:01
is the ability to do animation or in general transitions from the browser. And so for example, now I have a div element and I want to animate it from one position to the other. I can use a CSS transition and I can also change the easy in, easy out function. And again, here's the live code that I'm using
05:21
and here's what the real-time sample. And you can see that very easily you can start creating nice effects just using CSS3. It's also about layout. So let's say that for example, you have a website with some textual information.
05:41
Either it's like an article or it's some sort of news or a blog. In the past, if you wanted to have different columns, you probably start building in your layout different columns. What you can do now is using CSS3 standard called multi-column that just allow you to give a number of columns
06:01
and then the user agent will take care for you of splitting the text into different columns. So you can see that as I increment the slider, like it just changed dynamically. Number of line of code, this is it. Columns five and then set the width to automatic so it kind of like reserved space in equal portion for each columns.
06:23
And you can also customize the way you do hyphenation. So the way you split one word between one line and the other with the number of characters, et cetera. So there is a very deep level of customization even in the multi-columns layout. And so when you look for example at newspaper, this is probably what newspapers on the web
06:42
will look like very soon. Like the website will be smart enough to resize, to be responsive in its design and to resize the content in columns. My favorite, this is a new standard, is a new specification that Microsoft submitted to W3C some time ago. It's called Grid.
07:01
Let me tell you the story about the Grids. Some time ago, I guess that many of you built websites and the first website that you built, at least when I was a kid, my very first website probably was my own personal page. Hello world, I can have my personal blog. And the first thing I did was creating a table.
07:23
You remember the table? Table, TR, TD, TD for the different columns and the different rows. And you set all of the layout using the table and it's beautiful because it works. And you just split your page into a table. And then somebody came to you, Microsoft or others, saying, bad, don't use the tables.
07:43
You remember the time? Like, tables are bad, don't use TR, don't use TD. Use divs. Use float. So you start converting all of the tables to div. And you start using the float left, float right.
08:01
And then as soon as you start having 20 divs and a lot of floating elements in the page, you start asking, what the hell is going on here? I just want a table with this column and this row and this other column, and it's a mess. Have you been there before? I see people nodding like, yes. Like, if you build websites, you've been there before.
08:21
And the reason is that the div was not meant to be, and the floating was not meant to be a way to organize the layout of the page. It was for the content, it was for like text or images. And so we've been working on a new standard. We call it CSS3 Grid. And the idea is that you can define a virtual grid on your page using CSS.
08:43
And so, for example, the grid that you see on this page is actually defined by display grid and then by a number of columns and a number of rows.
09:02
Eventually, you can change the size of the column. So you can see now I changed the size of column. I'm just saying use 12, basically, a fraction of the space for the first column and then assign equally the space to the other three columns. And you can get to more,
09:21
you can add new columns very easily. So you can see now I have more columns. And you can do this, you can edit and maintain over time super easily. So this is called CSS3 Grid. This is my favorite specification. If you don't want to use Grid, but you want to stack the elements on the page,
09:42
you can use the Flexbox. The Flexbox is similar to the stack panel if you're coming from the XML world. It's just going to stack elements one next to each other and fit the space as needed. SVG is another standard which is super, super powerful. SVG stands for Vectographic Content.
10:00
So, for example, if you have a flag, like if you go to Wikipedia and you look for the flag of your country, that's an SVG file. Because most likely, for example, the flag of Italy is made of three rectangles, right? Green, white, and red. And you don't need to have an image or a PNG to define the three angles. You just define the vector, the three rectangles
10:21
so that it can scale easily and save space and is more linear. Some of the things that the SVG working group has been working on in the last years is called filters. So, for example, you have an image here. And you can add a filter, like the Gaussian blur effect. And now the user agent is dynamically applying a filter
10:40
to the DOM content. So what we did in IE 10 was taking the same syntax of the SVG filters, which is the syntax that you see below, and using CSS, we apply to any DOM element of the page. And so imagine like you have a page where you need to have transitions or animation of content like fading in, out very quickly.
11:01
It's easy as that to create that animation now using the filter. And this is obviously hardware accelerated in IE and I think it will be also hardware accelerated in other browsers. And so this is a very quick overview to demonstrate the fact that HTML5 is extremely powerful today. And there are so many things and so many features. I don't pretend to know all of them. And I've been spending quite a lot of time
11:22
in the last years working with HTML5. But there is probably a specification for most of the needs that we need today. And if there isn't, let us know because we want to implement it. We want to make sure that developers can build complex applications and you're happy with the HTML5 platform.
11:43
So now that we had a quick overview of some of the new features in the HTML5, CSS, SVG world, let's move into the Windows 8 and Metro world. The basic idea behind the Windows 8 platform, and this is the key message that I want to leave for this session, is that if you know HTML and JavaScript today,
12:01
then you're already a Windows 8 developer. You don't need to learn a new language. You're already a Windows 8 developer. Like in the previous session, I showed the copy and paste from a web application like Gather.op into a Metro application. There was really a copy and paste because the code is the same. Let me talk now about the platform and let me explain to you why that statement is true.
12:24
So when we look at the Windows 8 platform, it all starts with the core OS, right? That's the kernel and that's the basic layer that sits at the bottom. In the past, we had, like when we look for a simple Windows 7, we have desktop applications. For example, right now I showed you Internet Explorer,
12:43
which is the one in the red box. Internet Explorer is a desktop application. Or you can have C and C++ application, or you can have .net application, right? So you have desktop applications. In Windows 8, we continue to run all of the desktop applications. So if your application was working before in Windows 7,
13:01
we continue to run it as is on Windows 8. But the new interesting part is what stay on the left of this chart, and it's called Metro applications. So the Metro application starts from the ground. We call it Windows Runtime, WinRT. And Windows Runtime is our way to reimagine Windows.
13:24
I know reimagining sounds like a funny term, but we literally rewrote a lot of the code behind, a lot of the plumbing to get rid of all of the layers, all of the obstructions, and make it super easy. We have the kernel.
13:40
On top of the kernel, there is Windows Runtime, which is a set of APIs that the operating system expose. And on top of the Windows Runtime, there is the language that you use. We call them projections, and there are three projections. Number one, C++ and C. Number two, C-sharp, VBnet with XAML as a user interface.
14:02
And the third is the new one, which is HTML, CSS, and JavaScript. And this is what we're going to focus on on this session. So this HTML, CSS, and JavaScript is exactly the same that you have inside the browser. So inside the browser, we have the Trident engine
14:20
that does the graphic, and the Chakra engine, and it is the JavaScript engine. The same two engines are the same engines used to run a major application in Windows 8. So it's the same code, right? Everything that was running in the browser now run in this box. So what's the difference? Is that this is the kind of standard compliant, this is the code that works in the browser,
14:41
this is the code that you already know. This code have access to the Windows Runtime. And the Windows Runtime expose all of the OS APIs. And this is what makes your code a powerful application on the Windows 8 platform. I also want to spend a note here to say that it doesn't matter which language you use,
15:03
the Windows Runtime is the same for all of the languages and that's the trick, right? It's not anymore like if you're using C++, you can do more things than JavaScript, or you have more APIs, or you have more lower level access. No, Windows Runtime is one, and all of these languages have access exactly to the same APIs of the Windows Runtime.
15:23
And the other nice thing about this model is that eventually you can mix different languages. So you can have like a core application built in HTML and JavaScript, and then I don't know, you need access to a specific driver like the Joypad, or you need something specific, you can just have a C++ module inside your HTML5 application
15:40
that just works fine as well. Or you can mix between C Sharp and HTML that works fine as well. And so we allow to mix between different projections. Again, because the plumbing, the runtime is the same. So what is the runtime? Like why do we need a runtime? Let me break down the Windows RT, the WinRT APIs into different segments.
16:02
It starts from the fundamentals, and this is about cryptography, it's about globalization, localization, it's about timers, threads, et cetera. Then there is a media component. It's a set of APIs that allow you to do media. And media is not just playing, you know, an audio or a video file. It's also, for example, streaming,
16:22
it's also DRM, it's also been able to take, not sure if you saw the E3 announcement, been able to take my tablet and connect it in real time with my Xbox, and start streaming from here to the Xbox, and have this become a remote controller for my television and have multiple devices connected to each other.
16:40
We call that a play tool scenario. The Windows runtime include a lot of devices. And so Windows 8 will run on a lot of different hardware and devices and form factors, and you will have access to all of the APIs of these devices. For example, near field communication, NFC. You can have two devices communicating
17:01
just when they are closed. You can use accelerometer, gyroscope, inclinometer, or you can use the geolocation if your laptop support GPS, et cetera. It's about communication, it's about data. So for example, you can send SMS, you can make phone calls, you can work with data stream,
17:21
XML feed, et cetera, et cetera. And lastly, it's about user interface. And so obviously, Windows runtime also gives you the API to draw on screen and to have complex input, accessible, and user-friendly controls. So all of this is the Windows runtime. So enough talking.
17:41
Now let's create the standard basic hello world, hello metro world application. So I'll go slowly here, but feel free to interrupt me if you have any question or you want me to go deeper in any topic. So I'm opening Visual Studio. Notice that this is the express queue of Visual Studio. It's specifically designed for metro application.
18:02
It's free today, so you can download it on devwindows.com. You can see that I have a number of different templates, and you notice that the languages here are exactly the three projection that I just talked about. And I will start with the, I will show you today, we're just going to talk about the JavaScript projection. I saw that in the agenda, I think after this session,
18:23
there will be another one that will talk about the XAML and C-sharp applications. I will start with the blank template, so it's easier and we can understand better what's going on. So I create a new blank template. And before I show anything, I will just run it.
18:41
So I will, I can debug this on my local machine, on the simulator, or on a remote machine. I will just debug it on my local machine. That's it. This is my metro application. Isn't it beautiful? Can you see the text? It's a bit small, right?
19:01
So what can we do from the tool? And notice that I'm still in debug mode, right? If you look here at the top, I'm still debugging the application. We have this page called DOM Explorer. And this is very similar to the DOM Explorer that you have in the browser, either in IE or also other browsers have it today. And what it allows you to do is, for example, you can click here, select element,
19:21
and then you go back to the page and you can real-time select an element of that page, and it will go straight to that element, and then you can start doing some live editing. So this is similar to the same editing you will do on the flight, on a webpage. So for example, I can say, change the color of the text to green.
19:42
And also, let's make it bigger. So font size, 110. And now you see that I'm in real-time editing my metro application. Notice that I'm still debugging, and this is an application, right? It's not like a website. You can hit save, redeploy, repackage.
20:01
I'm debugging, and I'm in real-time editing CSS property on my application. Can I do more? Of course I can do more. What a question. So let me show you, for example, another feature of the tools. It's called JavaScript console. And the JavaScript console allow you to query dynamically on the page.
20:20
So for example, I have a P element here. So inside my JavaScript console, I'm going to say p.documentqueryselector. I'm going to take my P element, and then I'm going to change the content to, hello, and you see, did it work?
20:42
There it is. And so you can also call dynamically, you can also inject or dynamically call JavaScript code inside your application. That, by the way, is still in debug mode, so I didn't interrupt, I didn't restart. I'm still editing a live, running application. And those are just two simple capabilities, right?
21:03
So what is an application? What's going on here behind the scenes? And so let me break down the different files that you have in this template. It all starts from a page, an HTML page. This is basically the home page of your application.
21:21
Let's skip this part, we will talk about this later. We have a CSS and a JavaScript file, just default file that are almost empty, like there isn't any useful code at this point. And then there is some HTML. And so when we launch the application, basically Visual Studio is taking this code, and it's just packaging it into a package,
21:40
and then it's running the application. Let me show you how, for example, to use the Windows runtime from here, right? So far, you already know everything. So far it's just HTML and JavaScript. Now let's go and use, for example, a new API that is called File Picker that allow you to select objects from your file system.
22:01
Okay, this is very complex. No, I'm joking, super simple. So a button. And we call this, sorry, we give it onClick, do, do. Then I'm going to create a script block. I'm going to create a function, do, it's a keyword.
22:27
And now I'm going to define a variable called Picker, and then I'm going to call a namespace called Windows. Windows, sorry, Windows.
22:40
Windows is basically the namespace that define all of the Win RT APIs. So all of the capabilities of Windows RT are defined under the Windows namespace. And the Windows namespace, if you look quickly, has other namespaces like media, networking, exactly the same namespaces that I showed you in the previous slide. And so, for example, I'm going to go into the storage.
23:02
By the way, notice also the IntelliSense. That's something we've been working a lot in Visual Studio which supports full IntelliSense on any JavaScript file, project resource that you have in the project, and it works very, very well, including the helpers and the comments and all of that. So storage, then I'm going to go into the Pickers,
23:23
and inside the Pickers, I'm going to take the File Open Picker. And as I said, the File Open Picker is a way to open file from a file system. So now I have my variable picker. I want to filter the type of elements that I will see. So I say, sorry, replace.
23:46
I want to see only, for example, JPG and say PNG. So only images. And then picker.open, no, pick a single file async, okay?
24:02
So freelance code. Let's see what happen when I run this on my machine. So I have my button do. I click do. And this is the picker control. So this is one of the controls that comes with Windows 8. And eventually I can go to my pictures folders.
24:21
I select an image, I click open, and nothing happen. Of course, I didn't write any code. So let's write some code to make something happen. Let's add an image tag here. So I want to select an image from the file system and then I want to show the image inside my project.
24:40
So I'm creating a tag called image and I'm calling this tag image. And now I have this call, right, which is opening the file picker and is returning an image and I need to get that image. How do I do it? How do I do it? This operation is asynchronous.
25:01
You see the async method? Which means, normally, probably, if you're using other APIs today, you're creating a callback and then you're registering to that event and then when that event is raised, you get the image and then you share variables and you do all of that. We use a smart pattern, it's called promise.
25:21
This is a JavaScript pattern, so it's a standard way to write JavaScript. It's a good best practice that allow you to concatenate and to make an asynchronous method, allow you to very easily manage the output of that method. And so what you can do is using the keyword then. And so then is going to, you see,
25:42
give you the ability to connect immediately to another function that is called when there is a result for the complete event. So I'm going to create an anonymous function here. And so basically now I know that the code here inside this function will be called when the file picker is done and the user already selected the image
26:01
and everything went correctly. So this is a pattern that you will see everywhere in the framework. It doesn't matter which API you're using. All of the APIs are asynchronous and all of the projections allow you to very easily work with asynchronous code. And so at this point, I can go to my image and I say image.source equal URL.createObjectURL
26:22
from my file. File is actually written from the file picker. This URL.createObjectURL again is a standard way to take an image and convert it into a blob that can be processed by the Trident engine. So let's run this again. I go back to my folder.
26:41
I select my image. Select open. There it is. It works. Right? Easy. Now let me do it again. I got to. Not sure if you notice, but in this view, you can select different folders in my system.
27:03
So you can go to documents, pictures, et cetera, et cetera. But here at the bottom, you also have other applications that are installed in my system. And the idea is that I can go, for example, to any application, for example, the camera and say, hey, let's take a picture.
27:25
And I take a picture. And then I crop the picture to the best part of this picture. Then I say, okay, open. There it is. Back into my application.
27:43
How many line of code did I write for this? I didn't. So what's the trick? What's the magic? I talk about contract in the previous session. This is, again, another contract. So this is a very simple example of where you, as app developer, know that you can do something with the image. In this case, you're just displaying the image on the page.
28:03
And you don't care, and you don't need to care about where that image comes from. The operating system allow you to connect to any other application installed on your machine that can deal with images and can give you images. In this case, it's the camera, but I can go and take it from the cloud. So eventually I can go to my SkyDrive and just pull one of my photos from my cloud.
28:25
I can go to the photos application and I can get into my Facebook profile or get other images from there. So this is extremely powerful, and you will see this pattern in many other controls of the Windows runtime, including eventually some little error.
28:42
No, I'm joking. This is obviously just a demo. So this gives you an idea of the power of the Windows runtime, right? And the ease of access from JavaScript to all of these APIs. A question that I get asked very often is, you know, eventually you will start building touch-friendly applications,
29:02
and not everybody probably already has a laptop. Like, my laptop is nice because there's a touchscreen, and so I can write, I can touch, and it just feels beautiful. Another feature that, so basically, let's say that you want to build a metro application today and you want to make it touch-friendly.
29:20
How can you do it, right? You don't have a touch machine. Option one, recommended. You go to your manager or your boss, and you say, hey boss, can you buy me a new laptop? This usually works. I'm joking, it doesn't. But you should try. You should show in some of this demo and then explaining why you need to get a new laptop
29:42
which has a touch screen. The other option, if you don't have that budget yet, is to use a simulator. And so in Visual Studio, you can go and select simulator. And then, let's see if it works. Instead of running the application inside Windows,
30:01
you're actually running the application inside a simulator that runs a virtual machine with Windows. And so now I have exactly the same application running inside this simulated environment. What's the benefit of the simulator? Let's see here. Here on the side, you actually have a number of buttons.
30:23
And the idea is that the simulator allows you also to simulate the touch. And so if you click this, it simulates single touch points. If you select the pinch zoom touch mode, it will simulate the gesture of pinching on the screen.
30:41
I have too many zoom things going on. Or you can simulate the rotation done with two fingers inside your application. So there are a number of capabilities given by the simulator. There it is. And you can also simulate things like location, or sensors, or the camera,
31:00
or you can take screenshots of the app. And eventually, also the simulator is touch friendly. So now I'm navigating inside a virtual machine that represents a copy of my real machine. And I can deploy my app inside the simulator. So this is very nice and very powerful. The third option, let's say that you're building an application for a device like this, or an ARM device.
31:23
What you can do there is saying remote machine. And so if you go to the property of the project inside the bagging, machine name, you can actually try to locate a machine in your network. Now this is not connected to the internet,
31:40
so you will not see it. But if this was connected to the internet, it would recognize my machine, and it would allow me to connect dynamically to this machine. And as you start remote debugging here, the application runs on this device. And so that is a very simple way to debug application on real hardware.
32:01
All right, so we talk about the tools. Let me share a few more details, and let me close the simulator for now. Any questions so far? Are we good? You like it? Now what we did so far was playing
32:21
with a very simple application. You probably know that as you start building more complex applications, sooner or later, you will end up going and importing inside your project some framework, right? It's good to use framework that just help you making the development easier. So today you might use jQuery, you might use Modernizr, Prototype, like YUI,
32:42
like there are a lot of frameworks already. When we look at Windows 8, and when we look at the Metro apps, there are a number of user experience, UI elements, or just pattern, that are consistent across all of the apps. For example, now I'm taking four apps,
33:00
and you can see that the way the distance between the header and the content is, it's kind of like there is 120 pixel on the left, and I think 92 pixel from the top. So it's kind of like well-defined best practices. There are a number of controls that are also well-defined. So what we decided to do was to create a new framework,
33:23
and we called it WinJS, which stands for Windows Library for JavaScript. So this is a JavaScript framework that comes as part of your Visual Studio template, and it serves two purposes. The first will make your development much easier, and I will show you why in a second.
33:40
And the second will make your application more beautiful. So if you are a developer like me that sucks at designing, eventually you just say, hey, I want a nice table, and the framework is going to give you automatically the nice table with all of the CSS rules and all of that. And the framework also comes with a number of controls. For example, in this slide you can see things
34:02
like list view, grid view, or scroll bars, rating. All of these elements are just using standard HTML control that are styled or are enhanced with this JavaScript framework. So let me show you in a sec, I'll show you in a second what the framework looks like. But I also want to say that
34:22
you don't have to use WinJS. So if you want to use jQuery, you can absolutely use jQuery. If you want to use jQuery and WinJS, that's fine too. So we don't want to force you to use our framework. We made our framework to simplify your life.
34:41
There are a lot of things that are just easier, but eventually you can make the decision of using your own frameworks or other existing frameworks in the market. So let me show you, let's create a new project. So same process, find new project,
35:01
Windows Metro style JavaScript template. This time I'm going to use the grid app template. You can see that there are different templates here, like grid app, split app, fixed layout and navigation. I will choose the grid app. And this is a bit more complex than what we saw earlier. And so let's run it first on my machine.
35:21
Let's see what it looks like. So this is like my template before I do anything, right? So there are a number of tiles. If I click a tile, it goes to the detail page of that article. Let's go back. If I click a group title, it's going to another page that present group items.
35:42
And then if I click on the item, I go back to the detail view. Other things that are already implemented are the side-by-side, right? I showed earlier how you can snap application to the side of the screen and have multiple applications running side-by-side. And so the template already take care of that. And so when you snap the application to the right,
36:02
you already reflow and redesigned, give you a different layout, which is just responsive design to fit on that specific dimensions. Okay, so let's take a look at, you have this in mind now. This is the basic grid template. Let's have a look to how it works.
36:21
So opening default page, in the body element, I have only one div, right? We can get rid of this comment. I have only one div, content host. And the content host define a data win control. So this is a standard property. And we call the control application
36:41
dot page control navigator. And then we also give some options. And in particular, we give the options of group items, which is another HTML page. So this is a way to use a WinJS. So this time we're using the WinJS control called page control navigator that allows you to organize the navigation inside your app.
37:03
Where is this thing defined? Where is this page control navigator coming from? You remember that I showed you this very quickly earlier but I didn't get into the detail. When you create a new project, we add automatically references to WinJS dot RC blah blah, base JS and UI JS.
37:22
This is WinJS. This is the Windows JS framework, right? So this is just a framework inside the page. The reference, like you see this path. It's because it's not part of your package. There is one that is shared in the machine and all of the applications share the same framework. So how does this base dot JS and UI dot JS work?
37:44
The beauty of this framework is that it's open. So if you go to references, here on the top of your solution explorer, and you expand the Windows library for JavaScript, you expand the JS folder, you can see here exactly the same framework we were talking about.
38:01
So let's open base JS. And this. 11,000 line of code. This is the base framework that we built for you. So eventually we tried to make this easier for you because we believe that sooner or later you will need to use some of these functionalities.
38:22
We just wanted to write them for you so that you don't need to write 11,000 line of code every time you write a new app. The other thing is that we made it clear, right? It's not obfuscated, it's not crunched. It's very clear what we did. And we even left the comments inside the code so you can understand how our developers
38:42
fought and organized this framework. And eventually, really these are comments from developers in the Visual Studio and the Windows team. Sometime I think you will still see some comments saying, hey, this line of code is buggy, please fix it, it's slow, we need to improve. We just want to be honest and say where we are at.
39:02
And if you have feedback or if you want to improve it or change it, it's all here so you know what's going on. And you have a base that controls the base functionality of the application. It gives you the promise pattern that I showed you earlier. And then you have a UI file that includes controls.
39:21
So the UI includes all of the controls. And we have a number of functionalities. I will not get into the detail of this, but it's a very powerful framework. Now, back to my page. I showed you all of this navigation with the tiles and you click the tile and you go to another page.
39:41
Then we open the default HTML and there is only one div. Where is the rest of the content? Is it a joke? Is it fake? No, actually the div loads this page. So let's go and look at fragment. Pages, grouped items, group items.
40:01
So this is the very first view. Let me run it again. The view that you see here, these tiles, grouped tiles, et cetera, is defined by this few line of HTML. And there are mainly two elements. The first one is this. Div, group item list, data win control.
40:24
Oops, sorry. Data win control, it's win JS, so we're using our framework, UI list view. And so we're basically saying, hey framework, take my div element and promote it to a list view. And then the other thing that we're doing
40:40
on top of this page is define a template for that list. And so this time we have a template and we say this div, promote it to a win JS binding template. And the template is a title. So this is my title of the tile. And then there is a link.
41:00
So actually this is the title of each group. The template of each item is actually this one with an image and then two lines of DOM. One is the title and one is the subtitle. And so very easily we're doing the binding using declarative code in HTML. On the JavaScript side we have the data structure
41:21
and the frameworks connect very easily the data with your HTML and make it simple to develop and to use and to maintain over time. If you're a designer and you want to visualize this in real time, you can do it using expression blend. And so I showed this tool before in the previous session. Now it will make even more sense.
41:42
And let's start by saying this, right? This is an HTML page. However, what happens if you run this code, this HTML code in, I don't know, Dreamweaver for example or in some older version of Visual Studio? What would you see when you run only this HTML code?
42:05
What would you see? Nothing? Nothing. I mean, it's a div. Look again, it's a div. We have an header, a button, H1, a span, like. This is nothing, right?
42:20
You need JavaScript in order to populate it with real data. And so if you open it in some Dreamweaver, you're just going to see the blackest spot because it's waiting for JavaScript to be called when you run the application at runtime. The idea behind blend, this is a tool that allow you to visualize in real time
42:41
what the application will look at runtime. And so all of the content that you see here is actually not just coming from the DOM but it's coming from the JavaScript that does the data binding for you and populates elements of the DOM. And so for example, if I click one of these elements,
43:00
you can see here on the left, you see that there is a live DOM. This is a live view of the DOM. So it starts from the HTML page, it goes to the body, and then you see all of the controls, right? And you see that there is an eye, and the eye is basically the basic control to toggle on and off the visibility of that specific component. And then there is also this flash.
43:22
And the flash means, hey, this element is created at runtime. This is created by JavaScript, which basically means that this is what you would see using Dreamweaver using some older version of tools in general, right? You try to run HTML, but the tool doesn't know yet what the HTML will look like
43:42
because it's not running JavaScript. With Blend, you can run the JavaScript of the application in real time, doesn't matter what JavaScript is, like you can just run it. And it gives you the idea of what the application will look like when you run it. And on top of that, these elements are live. So now you're editing a live version of the DOM,
44:02
and you can start modifying like a CSS property of this live version and change dynamically the CSS of your projects. And you can see that as I modify one, like all of the others get also arranged because obviously we're using the same CSS property
44:20
to multiple elements. And we're editing real time a complex application like this. Make sense? Do you like it? Yeah. Sure. The question is, is Blend part of the express package? When you install Visual Studio Express,
44:42
it gets, Blend gets installed with it. Obviously, today in this session, I'm talking about HTML and JavaScript. You get something similar using SAML or other languages before. The difference is that those are compiled languages. This time we're talking about JavaScript.
45:01
It's not a compiled language. And so in real time, being able to have a live view of the DOM and run JavaScript behind and edit what the DOM will look like eventually in some step of the application is powerful. And other things you can do with the tool is that you can go into a live editing. So now I'm running the application. Let's say you're probably wondering,
45:21
okay, how do I change the detail page? Because now with the tool, I can only see the very first screen. So you can go into this live editing. Now I can go into the detail and then I click again, turn off interactive mode. And the tool take a snapshot of that page and now allows you to go back to that page
45:41
and change specifically property of that page. And again, all of these is just happening in real time. This is all code that is generated from JavaScript. It's not something that we already brought in the HTML page. The tool also allows you to test this on, for example, the snap view. So you can snap it on the right or you can see how the application will look like
46:03
in portrait mode. You can see how these application render at different screen resolutions, which is extremely important, right? As soon as you get your application on different type of hardware with high resolution screens, et cetera, you will need to care about 25, 60
46:22
or different type of resolutions. And of course, like on the right, there is a very complex and robust system to manage your CSS property, to filter only for property that are used to go and edit transitions, animations. You can do all of these using just the expression blend.
46:47
Now, I talk about the fact that WinJS is a framework that comes within your template. You can use it and it will give you all of these controls, binding, et cetera, for free. We'll also give you accessibility.
47:01
So all of the controls that you saw today are already accessible. They already implement all of the area, standard, et cetera. If you want to use your framework, go for it. So if you want to use jQuery, you can absolutely use it. Some of the applications that we have in store today are actually using both jQuery and WinJS together.
47:20
Just be careful with the way we handle applications, metro application. I will not get into the detail of the platform, but very high concept is that each application run in its own process, which is a sandbox. That sandbox has two different contexts. One is the local and one is the web.
47:40
The local content run everything that is inside your package, is coming from Visual Studio. And so that's safe, that's trusted. It's okay for that code to go back, to go down to the operating system and query API in the operating system. The web context is the unsafe area. And so if your application, for example,
48:01
downloads some content from the internet, download a script from the web, that script will be maintained inside this red box in my slide, the web context. And that script will not have access to the win RT APIs. It's not safe, right? So we cannot trust him. You have APIs to trust him, but by default,
48:21
we isolate it inside this web content area. And so just be mindful of that. Otherwise, you can go and mix different frameworks together. We talk about some of the details, the technical details. Now, how many of you are interested also to monetize application, to make some money?
48:43
I'm building an application myself in my spare time, which is limited, but on the plane sometime I have some. We have a store, we have a Windows store, and the Windows store is the channel to distribute your applications. I repeat, the Windows store is the, the channel
49:02
to distribute your applications. So there is one channel, and it's the Windows store. Clear? There is one store, which means that, imagine million of devices, either tablets, computer, laptop, desktop, television, et cetera, and one store. So the beauty of the HTML application
49:22
is that you create one package, and that package will run on all of these applications, sorry, all of these platform and devices. In terms of monetization, in terms of business opportunity, we try to be very flexible with the store offers as well. And so you can have free app, you can have paid apps,
49:40
or you can have trios, limited or functional trios. When you submit the application at the beginning, there is a split revenue of 70, 30%. So initially, for the few first days, we are going, like you maintain 70% of the revenue of your app, and Microsoft keep 30%.
50:02
This is in line with other platform. The difference is that as soon as your application is successful, so as soon as you basically meet the 25K dollars margin, and that's not a lot, believe me, it's not a lot when you think about the number of devices that will run Windows 8. We change the percentage, and so you keep 80,
50:23
and we just keep 20. And that's very, very competitive compared to other platforms. The other thing is about commerce. So if your application want to do commerce, you want to have transactions inside the application, you have two possibilities.
50:41
The first, you use the Microsoft Commerce APIs. Those are great APIs that give you all of the analytics, like all of the performance, security, blah, blah, blah. They are part of the framework, they are part of the Windows runtime. So you have APIs in the Windows runtime that allow you to have transactions inside the application. We take care of managing taxes,
51:02
and all of the distribution credit cards, and all of that. We take care of all of that for you. And if you do this, there is, again, the same split revenue model of the apps. The second option is you use your own model, and you keep 100% of the revenue. So this is big, this is not something
51:23
that other platform are allowing today. But let's say that you're selling, I don't know, items, and you already have your own backend to collect the credit card and to process the payments. Great, go for it. We don't even need to approve it. If you have it, it's fine, go for it, and you keep 100% of your revenue.
51:42
In terms of ads, if you want to include the advertisement inside your application, is, again, the same story. Microsoft is providing a first-class advertising platform on Windows 8. We have great content, great publishers, great distribution, we have great analytics,
52:00
and all of this comes with an SDK that is already available, it's in beta as well. If you want to use other advertisement framework from other companies, feel free to do it. The only requirement here is that whatever libraries or component you import inside the Metro application is compliant from a technical perspective with the technical certification for the store.
52:22
So when you submit the application to the store, we run a number of technical tests, like we check if it's secure, we check if it's fast enough, we check a number of things. And by the way, all of these tests are public, so you can just look, see, and run them locally on your machine to understand better what's going on. And so as long as it passes the technical certification,
52:42
you're good. And lastly, if you're using our APIs, you are gonna get a very robust analytic system, which is going to give you information like downloads, demographic, across markets, segmentations, trends. You will be able to see the performance of your application compared to other applications
53:02
in the same category. So let's say that you have a game in the puzzle category, you will see the trend of your application in terms of how many downloads, how many transactions, and you will also get an average of other puzzle games in the same category at the same time, so that you can balance and you can understand how it's ranking across the store in general.
53:26
Now, do we have time left? Seven minutes? So we have seven minutes left. There is another demo that I never showed before. It's nice. So I can show you this quick demo.
53:41
Or we can do question. Which one do you prefer? Demo? Okay, questions? I ask questions by myself. Giorgio, tell me about. So there is this other game that I started building some time ago and I still didn't finish it, so I apologize if it's rough and everything.
54:06
No, actually, I should have a link here. This is a simple, very, very simple HTML5 game. And you notice it's taking some time.
54:20
The reason it's taking some time is that it's actually connecting to TFS, to our team foundation server. And so I'm already, you see the little locks next to the code. Like you used in Visual Studio in the past, you can do it with Metro application. You can just check in the code to terminal files TFS, and now you're doing source control over your code.
54:42
In particular, I'm using the online version of TFS, which is super cool. Like I didn't have to set up any backend environment. I just went online to the TFS page. I created my account, and now I'm creating source control of my project with a cloud version of TFS. I definitely recommend it. It's working very, very well.
55:01
And so let's run my game. So let me show you how it works. I have a spaceship. I can control it with the mouse or I can control it with the finger. And the idea is to get as many points as I can,
55:23
trying to avoid this one, right? So if I go here, now you're going to see the explosion. So this is a very, very simple game, completely built using HTML5. Do you like it?
55:41
It's very funny. And this is just a bit of code. It's actually, all of the code is probably, I don't know, let's see. Doo, doo, doo, doo. This it, like 1,000 line of code. So it's a very short, very small application.
56:01
The reason I wanted to show you this is that let's try to see this application using Blend again. Let's have a look to the different components of this app. And I was having some fun, and Blend as well is connected to TFS, right? So it's checking the source control from the cloud now. You saw different elements on the page.
56:21
You saw the two bars on the right, and then you saw the line at the center. Notice what is going to happen now. As soon as I run Blend, the game actually start. So this is what I mean by you're editing a live page, a live code, because all of this is a canvas element with JavaScript running behind and drawing dynamically,
56:43
and you can just edit in real time the different parts. And what I wanted to show you is that the parts here on the right, for example, you might think it's an image, but actually, let's take a look. You see where I define it?
57:01
Background image, right, ui.svg. So it's not an image. I'm using some SVG content to give that effect. So let's have a look to, let me show you that file, that SVG file, how it looks like. Images, left ui, there it is, you see?
57:24
This is not an image, this is SVG. So if I go and view source, you will see that this is just an SVG standard document. So it's scaled very easily and very nicely. So that's one thing that was fun to use. The other thing, you notice that there is a 3D animation?
57:41
Well, I'm doing that using a transform and using a CSS 3D transform. So I'm rotating the UI axis. I mean, sure, I can go here and change it to 65. In real time, we can re-update all of the value. And if I restart the application, you will see that actually all of the data
58:00
and all of the settings there, they change in real time, right? So you can play dynamically. You can say, no, this is too much, actually. Let's try to do it 35% and it goes back to a more proper view. The other thing is that right now, I'm working on a tablet. So I'm using the Microsoft pointer,
58:22
the MS pointer API that I showed in the previous session. But what if I'm running this game on a tablet, right? Where I have more sensors. And so what I did inside the premium.js file was create my little own wrapper. Let's see, it's called, here it is, rotation helper.
58:44
And look at the code, right? There is a promise, so I'm creating my own promise from winjs. Then I'm using the Windows runtime to connect to a sensor, and in particular to an inclinometer. So I'm saying, hey, give me the default inclinometer
59:00
if it's available on this machine. If it's not available, that's fine. I'm just going to fall back to mouse and touch. If it's available, I'm going to start listening for reading change. And then the other thing I also using below, I also have another helper called checker helper that is taking an accelerometer this time. And on the accelerometer I'm taking,
59:21
this gives me back a quaternion data, and I'm taking back in particular the zeta axis, and I'm checking the difference between different zeta values. So all of that to say that now the same game, you can control it just using, oops, you're just using an accelerometer, right? So the same game deployed on this machine.
59:41
This machine has an inclinometer, an accelerometer, and I can just control it using here. And if you want to jump, you just do this, and it jumps. Let me show you the jump. I didn't show you the jump. The jump is the thing I'm more happy about this game. Now I'd like to say that you want to jump an obstacle.
01:00:00
Cool. Voila. How about that? And so if you're on the device, you do this, and you're going to get the accelerometer, data access, and you're just going to jump. And so this was a very quick and funny project to work on to test different bits and different parts together. All right.
01:00:21
We got to the end of the session, but I hope I gave you the idea of the initial message. If you know HTML and JavaScript, you're already a Windows 8 developer. The Windows runtime gives you access to the low-level APIs, and the Windows Store gives you a way to monetize your application on millions of devices.
01:00:41
You can find all of the tools and hundreds of samples at dev.windows.com. So if you go there, you can download the Windows release preview, which is the build that I have of Windows on my machine. You can download the Visual Studio and Expression Blend. And we also have really hundreds of samples and SDK samples that drive you
01:01:02
for all of the capabilities if you need specific scenarios. My Twitter handle is there if you have any questions or any comments. Thank you for coming here. I hope you enjoyed, and enjoy the rest of the conference. Thank you.