[Seminar - Windows 8 - App/Game Development with HTML5]
[Chris Bowen, Edwin Guarin - Harvard University]
[This is CS50. - CS50.TV]
>> Hey, everyone. My name is Edwin Guarin. This is Chris Bowen.
I'll let him introduce himself in a second.
I just want to make a quick announcement.
First of all, all you CS50 students get Windows 8 for free.
So if you're thinking about actually using it for your final project, it's yours.
Nate will send out an email later on for instructions.
The second thing is if you decide to write a Windows 8 app for your CS50 final project,
we're going to be doing some giveaways: an Xbox,
we might be able to give a slate away, stuff like that.
So if there's anything holding you back, let Chris or I know
how we can help you build something really cool.
So thanks again for coming today, and I'll hand it over to Chris.
>> Thank you, Edwin.
Thanks, everyone, for joining us today.
I'm Chris Bowen. I'm one of Edwin's colleagues here in the Northeast.
I just wanted to spend a little bit of time with you talking about
how to make a Windows Store application with HTML5, JavaScript, and CSS
and kind of get any questions you may have about it answered for you
as you're looking toward thinking about maybe using it for a CS50 finals opportunity.
>> That said, we'll just dive right in.
I'll go over to slides over here.
If you do have any questions, feel free to send me an email.
I'm cbowen@microsoft.com, and there's my blog and my Twitter.
However you want to get in touch with me, that's fine.
I've got about an hour of stuff, and I want to get your questions in along the way,
so don't be shy about having questions during this.
They can't see who's asking the questions on the recording,
so you'll be as anonymous as you want to be.
>> Let me dive right in, just give you a quick introduction to Windows 8,
and show you a few of the things about Windows Store apps that you might consider
as you're thinking about developing an application.
We're looking at Windows 8. We've been out for a couple weeks now.
A lot of strong adoption out there already.
You may have seen already the Surface machines that we have as well.
There's one over here actually you can take a look at if you're here in person.
I really want to talk to you, show you around a little bit about Windows 8.
The idea with Windows 8, it really does bring forward all the stuff you know about Windows
into some new experiences--in particular, things like on the Surface machine with touch,
these kind of more mobile devices that are now on the market,
but it's also Windows at its core.
So it means you can install it really on anything that runs Windows 7,
from your biggest triple SLI gaming rig down to your laptop
and to your shiny new other devices that you might pick up today.
They will run Windows 8.
I'll show you around just a little bit,
and all the experiences that you'll see here are things that you can create.
The idea is whether it's touch, mouse, keyboard,
whatever the device is that you're running your application on, it's going to run great.
Windows 8 will help with all those scenarios.
>> These slides aside, let's just get right into taking a look around here.
Let me show you around my home screen. This is my Start screen.
I'll just give you a little bit of a tour here.
I'm on a non-touch machine, so as much as I want to touch my laptop screen,
it won't do a thing, so I'll just scroll around here a little bit and show you.
Some things you might notice are the fact that these what are called live tiles
actually can animate, and they can provide information to you--
maybe updates on statistics for a game
or show you news from some of the earlier apps that are here on the left-hand side.
There we go. I'm sure it's only positive and fantastically great news.
You can see here it's really calling your attention back to the app, saying,
"Hey, there's something new here. Take a look. Come back in and see what's new for you."
That's called live tile, and you can do notifications
either right from the application itself
or if you take a look in more detail, you'll find out how to write a remote service
that can actually push information to the tile,
which is what's happening with these news apps.
They're actually getting news from the cloud and updating the tile right there
so people know there's a reason to open up the application and take a look
at whatever the latest news is in any of these
or if there's new recipes or a new high score to beat
or a friend playing or whatever on these applications.
It's something to entice you back in.
So that's the live tiles, and it could be a person, it could be a website as well.
Usually it's an application.
>> Pretty much all of these things that I have here came from the Windows Store. I'll launch that.
It's one of the applications that you get by default
on any machine that's running Windows 8.
You can come here to find anything you'd want,
from things that are highlighted to games that I haven't seen before.
Oh, wow, we've got a new pinball here.
You can install these right here from the store,
and we'll talk about how to develop these.
You have a lot of choices in how you create them.
We'll focus in on the JavaScript story with HTML and CSS,
but to the user, to the purchaser of the app, it doesn't matter what it was written in.
They can go ahead and work with it.
I'm intrigued by this one, so I need to open this up and take a look.
Every app, including the ones that you can submit and sell or give away for free,
whatever you want to do in the store, will get a home page like this.
You can submit with your application a bunch of screen shots--you see some here--
details about the application, and over time you'll accumulate both ratings--
they're basically just the star rating--and reviews,
which provide a little bit more insight.
Actually, someone has to type something and tell you how awesome you are,
and that will go into your Reviews section over here, which I haven't looked at.
Fantastic. "Won't even open." How great.
Well, for the folks for whom this did open and run, they seem to really enjoy it. [laughs]
Keep this in mind. The Internet. Anyone can say what they want about your application.
So make sure you're doing a great job with it,
make sure you're making it as comfortable for the user as you can
because they're a couple clicks away from providing a review,
and that will accumulate up to your overall review rating.
And you want to do your best because you're going to be up against other applications.
There will be thousands of apps already in the store,
and chances are, there may be something that does similar functionality to what you're doing.
So if you can really stand out from the crowd, that's going to be to your advantage, of course.
>> We'll get into the store a little bit later on.
I really want to focus on creating apps.
But the short version of the store is worldwide distribution,
it's automatically part of Windows 8, people just fire it up and take a look at various apps here,
you have the Dress-Up Sticker Book and all kinds of various apps.
Fresh Paint, I use this a lot--poorly, but I use it a lot.
It's showing me I already own it.
Let me show you something I don't have--UVideos I don't have as brand new.
You see here it's free, so you can install it right from the store.
You have choices too. You can of course give it away.
You can put advertising in the app or game.
You can also charge for it, and you could very easily provide a trial for the application as well
so you can let folks try it for a week or whatever you want to do.
That's just customizable through the portal. You don't write any code for that.
So you say, "You can use this for a week and then you've got to buy it,"
or you could do things like, "You could play the first 3 levels of this game
"and then you've got to purchase to access the rest."
You could even do in-app purchases as well, so you can say,
"We've got additional adventures or sets of graphics or things that are unlocked--
"more recipes that are unlocked--if you purchase these extended sets."
And you can do that all within the app or game itself.
So, totally up to you, your choice.
There's a lot of things that you can do in the store,
and then basically you're submitting it to a certification channel.
We can talk all about that a little bit later on, but this is the goal.
You want to get your app worldwide visibility in the store here.
>> Back on the Start screen here, I'd like to show you around a little bit more.
If I launch these apps, let me give you an example of some cross-app functionality here.
To do that, I'll launch Fresh Paint.
One thing you'll see here is every single bit of the screen,
all pixels of the screen, go to your app.
Gone are the days where you have these borders around windows
with lots of buttons that are always there taking up space all the time.
Now you really want to get away from that and just have your content be the focus.
We can do things with Windows by accessing other kinds of menus.
One of them is actually what's called the charms bar,
and it comes out from the side of the screen.
You can actually flick from the side if you have a touch screen,
you could right click if you have a mouse, there's a keyboard shortcut for it,
there's always more than one way to do something in the environment here.
That brings out a number of things that you can do.
The most obvious is you can go back to the Start screen,
but the other 4 are what are called charms.
They are contracts that you can plug into as an app developer. They're pretty cool.
Search, I'm sure that's something you're going to do,
sharing I'll show you in a second,
and Devices and Settings, these are all things that your app can plug into
to leverage Windows, to say, "I've done my part
"and I want Windows to support some other functionality,
"and I don't want to write a lot of code to make that happen."
That's really a benefit of using these features.
Let me show you one.
To do that, I'll make a new painting.
I also talked about using every pixel for your app.
By default, this is what the paint app looks like when you're using it.
It's really just about whatever you're drawing, your content.
I could do horrible things here. What should I draw? I don't know.
Scribbles? Oh, great. I can do scribbles. Fantastic.
A turkey? [laughs]
This is the most abstract turkey you will see.
I can also bring up what's called the app bar,
and this is really one of the key ways that you can use
to hide away all the stuff that might have been on your app or game before
just taking up space all the time.
So now you can put it up here, and this is really one of the more beautiful experiences
with the app bar that I've seen.
Put the choices here for selecting different colors.
We wanted a turkey, so we'll put some brown here, start mixing in a couple colors.
We'll take an intermediate color here and then get back here.
You can start drawing. There's your turkey. Fantastic.
I can't draw to begin with, but to do it with a touchpad in front of an audience is even better.
This is awesome.
The idea, though, is everything that I care about is right here on the surface.
Let's say I'm so satisfied with this that I've got to share it with somebody.
Normally what you would do with other versions of Windows,
you would maybe take a screen shot, you'd do some copy-paste of your text
or things like that that you want to share out,
and then go and open up another application and put it into it.
Here you don't have to do that.
You can actually bring out the charms bar and say, "I want to share this."
At this point it's going to show you all the apps
that know how to work with whatever is being shared.
In this case it's a picture, so it's going to say, "I see you've got a picture."
"Do you want to share that?" You can see I email myself stuff all the time.
It recognizes that, and it's offering me that as a shortcut,
but it's also showing me every app that knows how to deal with taking a picture
and doing something with it.
These have all indicated to Windows that they can do that.
At this point this is Windows.
The user just chooses what they want to do with it.
I'll do my usual of PuzzleTouch. You can see I've created all kinds of puzzles over time.
I'll take PuzzleTouch and say, "I want to share this amazing creation with PuzzleTouch."
It's going to go ahead and say, "Great. You want to share this? Fantastic."
"Do you want to make a puzzle that's easy, intermediate, whatever?"
I'll make an intermediate one here.
It makes the puzzle. It's going to be a terrible puzzle because it's mostly blank.
But it's ready, and it's actually back in the other application.
If I come out here, I can search for it and launch it.
Now if we scroll over just a little bit here, we should see my creation somewhere.
Where did I go? What kind of puzzle did I make? Did I make it easy?
Oh, there it is, right there.
[chuckles] It's the easily recognizable turkey puzzle that's here.
But the thing I want to point out to you, the cool thing here
is the apps didn't know anything about each other.
They only said, "I've got a picture to share, and I know how to deal with pictures."
And you as a developer, you don't have to write that code.
When someone asks me to share, I'm going to put some data into this little data structure
and I'm done.
The other app takes over, does its thing, and that's the end of the sharing experience.
That's just one thing that you can do--really, really powerful--
and it's going to be one of those things that could really help differentiate your app
and also your game too in the store.
People are going to be able to say, "This is really useful."
"I use this puzzle creator all the time. It's fantastic."
>> That's about enough of a brief overview of what's going on here.
There's a couple other features too that maybe we'll highlight as we go through code.
But I want to dive into slides, and to do that, I'm going to go to Desktop,
which is itself another live tile here.
I can go into this and, sure enough, I'm on my slides,
but let me show you actually where we are.
We're actually in Desktop mode.
This is really where what I was saying before about Windows carrying forward
to new experiences shows itself.
This is the Windows you know.
Windows applications are called desktop apps. They run here.
If you have existing apps and you want to run them on Windows 8,
you can absolutely do that.
These are not the same things as the store apps, which are over here,
like Fresh Paint and these NBC News apps and things like that. Those will come from the store.
They can plug into some of the features that I was showing you
and others that I haven't shown you just yet.
But just keep that in mind. We have support for both of these things as well.
I'm sorry. Is something not showing on the screen? I've lost it completely. That's odd.
Okay. Thanks for pointing that out.
What you haven't been seeing for a while is my showing you that the desktop is here.
What is the last thing that you saw? Did you see this?
This is the desktop. You already know what it looks like.
It's nothing terribly unusual.
It's our carrying that experience forward for you and letting you use the things that you've had.
For example, I'll be showing you Visual Studio. That is a desktop application.
It's going to run in this mode.
It's going to support a more complex environment
with a lot of options and things like that, so it makes it a good option as a desktop app.
>> That said, let's go to slides for just a little bit
and give you some introductory content and then get into actually coding here.
The good news is I've heard you've been focusing on a lot of CSS and JavaScript, HTML.
All of those things that you've been learning carry directly into making Windows Store apps.
The things that you've been hearing about with applying CSS selectors and all those things
is exactly what you do to create an application here for the store.
We'll go through these things bit by bit.
Basically, I'm building on the stuff that you already have taken the time to learn.
This is the overall chart of the technologies that you could use
to make applications for Windows 8.
The stuff on the right, the desktop apps, is really what we already know.
That's stuff that is really the Windows 7 world carried forward into Windows 8.
All of those options carry forward: C#, VB, Win32 kind of development.
Great. No problem. The new stuff is on the left-hand side.
That's Windows Store apps, that's when I want to get my application wired into Windows 8
using all those features, get it into the store, and get that really cool experience
of the Windows Store applications.
To do that, you can see here you've got all your choices with XAML, C++,
C#, VB, you could do DirectX, things like that, things that go beyond the slide.
But for us, we're going to focus right in on the fact that HTML, CSS, and JavaScript
are really a first-class citizen for making applications for Windows 8
and for the Windows Store.
So this is good for everyone here and folks watching on video
because you can just leverage all those experiences that you have
and really tie into what Windows offers.
You're going to do that through a set of APIs, which should be no surprise.
Every OS has its own APIs.
We expose what Windows can do through what's called WinRT.
It's a set of APIs that just does everything for you.
If you need to open files, you need to use the camera, geolocation, things like that,
they go through what Windows can offer to you.
To access that, we have some more JavaScript that's going to make it even easier
for you to do that. We'll get to that in a moment.
But for now, that's basically your road map.
The things that you've already been doing on top of some APIs
that help you work with Windows equals store app.
And that's really about all you have to know from the high level.
>> We'll dive into actually working with the stuff now.
The things you've probably already seen a bunch of,
with IE9 a little while back we introduced support for a lot of the, at the time,
newer standards in the Web, so a lot of new CSS features,
a lot of new HTML, ECMAScript 5, which is really JavaScript.
So everything for that except for strict mode was in IE9.
Just a ton of stuff with CSS, CSS3, all in there.
And all this stuff carries forward into what we're doing with Windows 8.
You can use these things, and you can use everything that's new in IE10.
With IE10 we introduce support for all of these things as well.
They're all hardware-accelerated, so if you're on a machine that has some kind of GPU,
which is probably pretty much every machine that you could get in the past 8 years,
you're going to be able to have hardware-accelerated output,
visual output with CSS, Canvas, SVG.
All those things will go through hardware acceleration
and be that much faster and more efficient.
The short version of all of this--I'm not going to go through every single thing here--
if you see it on this list, if you can do it in IE10,
if it's a web app that you're running that works in IE10,
it's something you can do as a Windows Store app.
And that's pretty much it. So if it works in IE10, it's going to work as a Windows Store app.
It's on the table as something that you could use.
>> There's a lot here. We don't have until midnight, so I can't review everything here.
But there are some sites that will help you understand what these things can do,
and I'll show you one of them in a second.
I just wanted to point out a few of the key things that you might look at.
Maybe you've already seen some of these in your studies,
but these are really helpful, in particular with Windows Store apps, from the CSS side.
So being able to do transforms and transitions, provide motion with animation--
these are all part of CSS now, and they're all supported by modern browsers,
and IE10 and IE9 have added support over time for all these things.
And so why write it yourself, why go through all the trouble of doing these things by hand
when you could use a simple CSS transform to create a 3D effect for your application?
Great. That's how it works.
I can't make it any more difficult than that.
If you know how to do it in CSS, you know how to do it in the Windows Store app.
>> Going beyond that for layout, things like even the store app,
but going beyond that, looking at maybe a news app that's showing you articles
or recipes or things like that, these other kinds of features in CSS are really useful:
Grid, Flexbox, CSS Regions is more of a fairly new standard as well.
These things are all going to help you lay out content and flow content between sections,
be able to do pagination and hyphenation without you having to write the stuff yourself.
You just say, "Please do the following for me,"
and as the screen real estate is different on different machines
or as you'll see in a moment, as you snap an application
to have smaller amounts of space on the screen, that's no problem for CSS.
It can take advantage of--we'll talk about media queries in a second--
it can take care of things with repositioning your content, flowing content from regions
just with these things that you may have already seen with web technology.
>> On the HTML5 side, there are also a bunch of things
that will be very helpful for you with Windows Store apps.
Again, we won't go through all of these, but they're just here.
So if you need to use it, audio-video, if you want to do validation from forms,
geolocation, all the things you can do in JavaScript with JavaScript 5 or ECMAScript 5,
IndexedDB for local storage--these are all options for you.
If you're looking for an answer, just look to existing technologies with HTML5 and CSS
and you'll find easier answers than having to roll a lot of that stuff yourself.
Let me show you around a little bit here.
I've got a site we can go to.
Let me quit out of this slide for a second.
>> If we go out to IETestDrive.com,
I won't do much of a demo here.
IETestDrive.com is really showing you a lot of what's new with IE10,
the things that you can do.
I find this is really useful because instead of reading through a bunch of white papers,
look at a few demos, and that's going to help you put it on your own personal radar
about whether a technology makes sense to even do any more research with
so you'll understand, "I see what this is for."
"I understand what Request Animation Frame does for me."
"I understand how I could use Regions or SVG filters."
You see them in action, see them on an example here,
and decide for yourself if that's going to be useful for you in your own projects and beyond
as you continue to work with web technology.
Here I would just encourage you to take a look.
I don't think I'll spend much time actually running these.
We've got enough to show with writing code.
You'll see here things from touch effects to touch-based games in that section,
animation, really fast hardware-accelerated animation there,
some optimizations that you'll see in some of these samples as well,
and there's many, many more.
If you go over here and open up the site map,
there's just a ridiculous number of samples here.
You can see them all here.
If you're looking at something or you heard about something
and you're wondering maybe this would be something cool to use in the app,
try looking here, and there's probably a pretty good demo for it to save yourself some time.
>> Okay? Any questions so far for the folks here?
Okay. We'll carry on here.
Again, just check that out.
They are web standards, so go to any other showcase sites that you know of
and see if those technologies make sense for what you're trying to do.
>> Back to slides.
That said, you are moving from a Web world to really an installed local application world,
so there are some things to point out here.
First of all, there's no web server involved here.
There's no Apache, there's no IIS running here
serving up pages to a remote client, to a remote browser agent.
In this case, really everything is packaged up for you.
You submit that as your application to the store, it gets certified,
it's out in the store, and then people by the thousands will install your game or your app.
But basically, they're pulling it down locally to their machine.
There's no need to go out to the Web anymore unless you have calls that need a remote API,
and that's perfectly normal as well too.
But they're not going to be in that mode where they have to go request response from a server
to get the next page of their content.
So that said, there's a few minor API differences. These are incredibly minor.
They're unlikely to hit you in your normal coding, but they're at least documented.
They're kind of edge cases there.
>> The other thing worth pointing out is the trust differences.
I only mention this because I just want to make sure I said it
so if you run into it later, you'll think, "Chris said something about this,
"so maybe, yeah, okay," and then you go back and you find out what it was.
Contexts matter.
By default we try to protect the user from vectors of attack.
There are certain things that you can do by default
and certain things you need to change context to enable.
As you're using some libraries out there--you've already been working with jQuery,
but if you look for other libraries out there--you might be using some functionality
that kind of goes beyond local usage, does more dynamic interactions
XHR requests, things like that.
Sometimes you might find those will be disabled by default,
and in that case, just do a search, look for local and web context,
and you'll find out how to fix that.
Just make sure you knew about that as you begin to use other frameworks,
which, I should mention, you're perfectly able to do.
So if you find some other framework--we'll talk about this in a second--
for gaming and you want to use that, you want to use some control libraries that are out there
and you don't want to write that stuff yourself--it's a good idea, right?--
you can absolutely use this stuff.
There's nothing holding you back from using any kind of library that's based on JavaScript,
CSS, HTML5.
Again, if it's something you can do in IE10, which is a heck of a lot these days,
you can do it.
Pull it into your app, reference that JavaScript library, and use it in your application,
just keeping in mind you might hit a security context once in a while--not very often.
>> And then the features, we'll go over a few more of those as we go.
The UX you'll kind of get used to as you see more and more applications
from the Windows Store.
You get a feel for how they work and how the design aesthetic tends to work
across different applications and what people will be used to experiencing.
That's really the important part.
Make sure that when they fire up your app they don't need to read a manual,
which they never do, by the way.
They should just be able to start playing with your application
and figuring it out without much difficulty.
By sticking and adhering to a lot of these practices,
you're going to do your users a big favor, making that easier.
>> Okay. One last thing on the API side and then we'll get into actually writing code.
WinJS is that thing I mentioned very briefly with that complex slide
with all those different choices that you have for making applications.
WinJS, you can think of it as a buddy.
It's your friend to help you write stuff more quickly.
It's just JavaScript and CSS. You don't have to use it. You can use it.
If you're going to be calling in to Windows features, you will end up using it,
but if there's things like some design patterns or controls that you really don't want to use,
you want to use something else, it's up to you.
Decide what you want to use and the styles that you want to use.
The features from namespacing and class generation--up to you.
If you prefer one or the other, it's entirely your choice. It's still JavaScript and CSS.
But it's going to help you do a lot of stuff.
For example, here's a subset of what it can do,
things like helping asynchronous programming with promises.
Any of you heard of or worked with Node.js?
It's a common pattern to work with asynchronous programming.
So basically what you're saying is, "Go do something,
"and you're going to give me a promise that you'll return to me when you're done."
That's essentially what's going on.
So you don't freeze up your application while the user is going and picking a file
or something is being streamed down from the Web.
The UI remains responsive.
And you can do that by using asynchronous programming.
It sounds ridiculously complex, but it's really easy because you're using promises
and you just say, "Go do this and when you're done, call back to this method."
That's pretty much it. That's all built in to WinJS.
It's going to make it a lot easier to write really flexible and powerful applications.
>> You can see the rest here, a lot of animations.
Probably one of the more important things on this slide are controls.
I think I have a whole--yeah, I do.
Here's an example of just some of the controls that you can use in your applications.
This is all straight up from WinJS.
You aren't writing these yourselves,
you just say, "Here's how I want to compose my application."
"I'll use a flip view so I can go between different pictures."
I haven't shown you Semantic Zoom. I'll show you that in a second.
ListViews. There's GridViews.
You've already seen a grid as part of the store application,
so being able to use blocks of content and scrolling across that.
Flyout menus you'll see from time to time.
The app bar I showed you with that Fresh Paint application as well,
so you saw how you can customize that by putting buttons on it
and having that hide away when you don't care to use that.
That's really totally up to you to use.
These are all controls that are part of WinJS.
I'll show you how to make these in just a second, but there's more than just this,
and the key thing is use them if you want, save some time.
>> If you have other control libraries that you'd like to use, that's perfectly fine too.
Things like jQuery UI do a lot of this kind of idea as well,
providing more controls that extend what you can do in HTML and JavaScript.
Let's dive in. I've already said that. Use what you'd like.
Just keep in mind that you might run into some context issues.
But you can certainly mix and match whatever kind of libraries you're comfortable with,
you want to learn, you want to use, to save yourself some time.
>> Let's talk about tools just for a second.
You can get what you need to begin working with Windows Store apps.
If I go back out, I have too many things up here.
If you go to this page, which is dev.windows.com,
you can download everything you need.
As students, you have access to more than the general public does,
so you can get higher end versions of Visual Studio.
Edwin mentioned you can already get Windows as well.
But in general, for all developers, you can go to this site
and download everything you need to make an application, and it's all free.
So there is a free version of Visual Studio,
there are some tools that will install alongside of that--
everything you need to create and test your application.
It's only when you're going to publish your application up to the store
that you're going to need a developer account.
This too I believe is free. Is it free for students as well? >>[Guarin] Which one?
The developer account, the actual submission. >>[Guarin] Yes.
That's more good news.
You'll go look at this.
It'll say for an individual by default it's $49.
But don't sign up for that as a student.
We'll get you some information through your programs that you can get an account for free,
and that will let you then submit your applications right up to the store,
as many as you like, and all of that goodness will soon follow.
So that's dev.windows.com.
You can download the tools that you might need from here.
And if you want, you can get a trial version of Windows here,
but again, you won't need to.
>> The other site--let me point this one out for you quickly--is design.windows.com.
That was dev.windows.com.
Design.windows.com, you can guess what it's for.
It's actually a pretty friendly site. There's a lot of good information here.
You can work through it.
It's going to give you some advice on some things
that maybe you haven't thought about before or had to deal with before,
like designing for touch, designing for different form factors,
designing for the capabilities of Windows 8, the things I mentioned before
like searching and sharing, some things that I haven't talked about yet.
They're all listed here, and it's a pretty good set of helpful file pages
that will help you understand how to make a certain kind of application,
how to do interaction, how to deal with the UI and UX of your application.
I would recommend that you take a look at this, especially if you are at some point
hoping to publish an application to the store.
You're going to want to know how to make a good application
because I mentioned before if you don't, there's those reviews again.
People are going to be unhappy.
They won't be able to find things that they expect in the right places.
No one wants that to happen to you.
>> Moving ahead here, let me close that down.
Now that you know where to get things, I will show you how to actually start using stuff.
To begin, I will actually show you here an example of desktop apps on my Start screen.
Here you can see Visual Studio, you can see Blend and other developer tools that I have.
They have a slightly different tile.
That's because they are desktop apps,
and in those cases they're all going to launch back to my desktop
really just as apps that you're used to.
So Windows experience, it's the same thing.
They are not, for example, like Armed! or these things. Let me launch one quickly.
Actually, here's an interesting one.
This was developed by students working in partnership at NERD.
Full screen application, these kinds of experiences here.
Oh, nice cut screens and all kinds of fun stuff.
They developed this. We might as well show the whole thing while we're at it.
In fact, I worked with them a little bit, gave them some advice on things
because they were doing JavaScript for their application.
Please, I'm not taking credit for their work; they did all the work.
I just gave them a little bit of advice here and there,
but they did some great stuff by using a JavaScript front end
and tying in some physics engines and things to make a lot of this work.
Go. Let's see if that works.
Wow, it still worked. All right, good. But you get the idea.
A full screen app, a really good experience.
This is supporting not only my mouse and pen if I have things like that but also touch.
If I had a touch screen, I could just draw onto it and continue working with that.
>> One thing I didn't show, and the reason why I'm bringing this up
is I wanted to have another app to show you what you can do,
you can actually take applications in Windows and drag them to the side of the screen.
This is called snapping an application.
In this case, I've taken Inkarus and I've added it to the side here.
It is now in Snap view, and that allows me to do something else while that application is there.
Most games you'll find will just simply pause.
That's normally a decent thing to do unless your game can somehow scale down
to that small of a resolution, like maybe some kind of board games
or things like that on occasion.
But in general, the easiest thing to do and the most appropriate thing to do for games
is to pause the application.
For applications like news apps, if I launch this one and then I snap it,
you'll see it actually changes significantly in how it's presenting the data to you.
Here it's showing you in really a more vertical pan that information,
but I can still absolutely use the application.
So it's still very useful.
The fact that it's in a smaller view doesn't keep me from using that app. So think about that.
It's something that you need to have your apps do to some degree,
but it's up to you to determine how functional your apps should be
in that kind of a smaller environment.
Let me close that one down and go back into where we were here.
>> Edwin, you added a photo of me already? >>[Guarin] Yeah. >>[Bowen] Look at that.
See that? Edwin added a photo. [laughs]
>> Let's go back over here into Visual Studio. Let me launch this for you.
I could have clicked on the tile on that Start screen.
It brought me back into Desktop mode, and it's launching the desktop app of Visual Studio.
This is the Windows that you already know.
I can go ahead and create a project here.
We'll focus again on JavaScript, HTML.
I'm going to go out and select up here under JavaScript, Windows Store.
There's a number of templates that you can use.
For productivity, I would recommend you take a look at some of these other ones here
like the Grid and the Split.
They're really useful if you're making an application
that's going to have that kind of design and navigation. You'll see these a lot.
The one I just showed you was actually an instance of the Grid application.
So if you think you're going to be making a news app or an RSS reader
or something like that that deals with multiple entries for which you'd like to show the detail,
think about using one of these templates to get started quickly
and customizing it from there.
But just so I can show you all the moving parts here
I'm going to create the blank app, and then we'll go a little bit deeper into the details.
I'm just making that blank application here.
It's going to create the whole project for me.
I'll open up the things that I want to show you by default.
Let me just zoom in a little bit to show you what's created for us here.
The things that you're going to look at first are all named default.
So you're going to look for default.html, default.js, and default.css.
The other thing to point out is that we already have a reference to what I mentioned before.
This is WinJS. No one actually calls it this long name here.
It is WinJS, the Windows Library for JavaScript.
If you open it up, you can see it's all in here.
There's different CSS files, there's JavaScript.
It's there to help you out.
It's really there to provide controls and styles and stuff that you can just use automatically.
But again, if there's things you want to use instead in terms of styling and other controls,
it's entirely up to you. I will show you how to use a couple of those things right now.
>> Back over onto our left-hand side, let me show you the default HTML page.
You've already seen the WinJS stuff, and that's really all that's going on there
with those middle lines of markup, just bringing in the CSS by default
and bringing in a couple of JavaScript files from WinJS.
You don't need to be master of what's going on inside those files.
It's pretty interesting to take a look at them to kind of review what's going on in there
because there's pretty interesting intermediate and advanced techniques going on in there,
but the nice thing is as developers, you can just take advantage of them, just use them
and not really have to worry about it.
You can still drive a car without having to know how it works, right?
So that's the kind of thing that's going on here.
There's controls and styles and stuff that you can just go ahead and use
and code that you can use in a second without having to know what's in there.
Here are your own files.
These are your places that you can modify your own CSS
and your own JavaScript to get things rolling.
You'll be adding certainly other JavaScript files and perhaps other CSS files
as your project grows, but this is really just a starting point.
Here is the Hello, world equivalent of HTML, so we're back in the body tag.
At the top, by the way, it's the HTML5 doctype,
so you'll recognize that from what you've been working on.
There's full IntelliSense in here as well, so if you do things like type in a video tag
and expand that out, you've probably learned about the fact
that you need to do fallback encoding for video tags in HTML5--or maybe you have--
to ensure that different browsers have support for your video.
We have things like this across HTML, across JavaScript, across CSS.
That's built in, and I'll show you CSS in a second.
Here you can go ahead and start modifying code, the markup.
In fact, before I change anything, I'm going to run this and show you what you get.
You're going to get a splash screen which you can customize
and then you get the Hello, world experience here. It's fantastic, right?
Go ahead and ship that, right?
Content goes here. That's the basic thing.
It can only get better from there.
We'll go ahead and add in some stuff.
I've got a little bit of markup I'm going to copy in here
just so you don't have to watch me typing.
Let me go bring up the toolbox here, and I'll pin this because I'll be doing this a few times.
Toolbox, if you haven't seen Visual Studio, is where you're going to find a bunch of controls.
You can also put code snippets into it that you can reuse.
Here I'll just pop in some other HTML, nothing terribly advanced at all here.
It's just basic HTML saying I have an input where I can type,
I have a button where I can submit it, and then I have a div that's essentially a placeholder
that I can use to output the "Hello, you type this."
It's the intro to HTML example.
If I run this, we automatically get the HTML, but we also automatically get styling.
This is one of the important things from WinJS.
It's going to give you by default some look and feel that is really consistent
with the rest of what Windows 8 is doing.
Here you see things like the button.
The button by default in HTML doesn't look like that, but it does here
because it's getting that CSS right from that CSS file in WinJS.
If you want to use something else, if you want to change that, totally fine,
go ahead and do what you'd like. But that's the default.
It's going to be more familiar to users.
And of course this won't do anything because I didn't actually wire up any kind of code
to respond to that. It was just the HTML.
So I can get rid of that, and we'll come back into our application.
>> Let me switch over to our default.js.
This looks pretty complex, but it's just doing a few things for you.
It's boilerplate. It's going to be the same in all your projects.
The only thing this is doing is just kind of asking, "How did I get here?"
and saying, "Are you launching this app for the first time?"
"Are you resuming the app from having it being suspended?"
A couple of things like that.
Really, our focus on this file here is right about here.
At this point, this one line of code is pretty important.
It's actually going to go and look through all of your markup,
and it's going to find things that you've asked to have turned into controls,
deeper controls like a rating control, like a grid view, like the flyout
and those other things that I showed you on that slide before.
They're not native HTML controls.
You just don't say flyout as an element and have it know what to do.
What we actually do is the same thing that happens in other kinds of control frameworks.
jQuery UI does the same kind of general approach.
You use markings in your HTML, and then some JavaScript comes through later and says,
"Oh, I know what that is. That's asking for this to be turned into this stuff,"
which is other more expressive HTML to make like a ratings control,
which is what I'll show you right now.
This line of code is a promise that's saying, "When this promise is fulfilled,
"everything that you've asked for has then been created."
And that's it. It looks a little complex, but it's really the same in every project.
Down here is where you can start adding in whatever else you want to have happen,
so we'll come back to that in a second.
>> First of all, I need a bit of code that can respond to the fact
that someone has clicked on the button.
I'm going to go ahead and put that in down here.
Again, I'm not going to do any typing in front of you here.
Very basic JavaScript just saying when this is called
we're going to be provided some details about how we got here
and then we're going to do a few basic things.
Go find the thing in my HTML page that is named nameInput,
grab it, take its value, slap "Hello" on the front of it, and stick that resulting string
into that div tag that we had before that really didn't have anything before.
Now we're going to find that tag and make its inner content equal to that string.
Very simple JavaScript.
Hopefully you're recognizing that there's really nothing unusual going on here.
It's just straight up HTML and JS here.
If I run this now, it's still not going to do any work because I haven't wired it up
to receive the event.
To do that, I'll do that right here, again returning to my toolbox,
popping it in here.
I expect you've seen all this kind of stuff before, so I won't over-explain it.
Now we're going to go get the helloButton.
We're going to say, "Button, congratulations."
"Here is an event that you now are responding to."
"When someone clicks on you, call this function, the buttonClickHandler."
And that's that function we just added right down at the bottom there. That's it.
So now we've got an amazingly functional application.
I think you'll be really impressed by this.
Chris. Wait for it. Wow. Okay. That's amazing. [laughs]
But there's more. Don't buy it yet. Wait.
>> Let me show you a little bit more here and get out of full screen.
We're going to walk before we run.
Let me go in and actually show you a little bit with CSS.
Just by default, if we look back at the page here,
whenever we pulled in these things from WinJS and we got the ui-dark,
in fact, you can change it to the default for using light application.
ui-dark is good for graphic applications like using a lot of pictures,
you're showing a lot of visual content.
If you're showing a lot of textual content, the ui-light is generally a good choice.
You don't have to choose it, but I've switched to it
and now you're seeing the same markup, same everything,
it's just using basically an inverted scheme here
where everything is making it black text on white.
That's all well and good.
Let me get out here, and let's actually do a little bit more with the CSS.
I'll put it back on dark because I think it's probably easier to see on the screen
when I start doing these things.
I'm going to replace the body one more time.
I'll go here. Let me nuke this.
Let's bring in the body with classes.
I believe you've done basic selectors with CSS and things like that already,
so you probably know what's going on here.
Just assigning some classes to our header, and we're creating a new div
to wrap the rest of that stuff that we can now use to style all together.
So what I can do now is go over to our default CSS.
Have you looked at media queries yet? Have you talked about that at all?
Media queries are part of this emergent trend--
or it's an established trend now actually on the Web--
for responsive design or adaptive,
and the idea is that your applications can really adjust themselves appropriately
based on what the device that they're being shown on can do.
So if you're on a mobile device, obviously you're not going to have as much screen real estate
as you will on a big 30-inch monitor sitting with a desktop, a big PC like that.
So the old answer to that would be to have 5, 6 different versions of the same page
and you'd open up the version that was tuned for that certain size screen.
Not great. It's very, very repetitive and there's a ton of maintenance to do that.
Now we have something called CSS media queries,
and we can use this to automatically detect when there's certain sizes
or certain uses of your content being performed.
So you can respond to that and you can say, "Okay, in this case
"you probably don't even need me to tell you what's going on here."
This is just saying if this application is snapped, like I showed you before--
grabbing it and putting it to the side of the screen--
then let's do the following styling.
Styling is not just about colors and stuff like that.
It's also about sizing and margins and paddings and orientations of content
or even disabling or enabling entire parts of your page
and, in this case, your app or your game as well.
So here you can do as simple as you want.
This wouldn't be useful in your apps, but it's demo time,
so I'm going to go ahead and just add in basic body selector and say,
"When I'm snapped, let's go ahead and do background-color and let's choose something."
You've got IntelliSense here. This is actually really cool.
In 2012 we've added a lot of things for CSS support and JavaScript and HTML.
You've of course got drop-down IntelliSense too, but that's not the cool thing.
The cool thing is you've got visual selectors for a lot of things as well.
So you could go through and just choose a color,
or you can go out and be even more specific and you can choose--
this is going to be terrible. I'll actually pick a decent color here.
Watch the markup too, by the way. That's your RGB standard format there.
But if I switch the opacity, it's going to switch over to an alpha channel selector here.
So you can see that, the color with essentially the percent transparency that you have for that
all baked right in there.
I'm going to keep it as 100% and then when I'm done with that, all is well and good.
Now if I run the app and we take the app and we snap it,
that background color is being adjusted automatically
just because we have some CSS that says, "Go do that."
You also can write JavaScript too that will do the same thing
or that you could use to actually pause a game, do things like that.
That's probably when you'd use JavaScript.
You would turn off the game loop at that point.
You would need some JavaScript because that wouldn't be something you would CSS for.
But keep in mind it's just an event.
You could say, "When my application is resized,
"let's see if we're snapped." And that's it.
>> Okay? I've been talking a lot. Are there questions so far on where we are? Yeah.
[student] Is there a tutorial for anyone to get more information? >>Yeah.
The question is, is there a tutorial for this? I'll just extend it to everything.
There are a few things that you can go to. Let's actually get out of here.
Let me go back out here.
One thing to point out is Visual Studio itself has tutorials built in.
Let me get rid of this.
If you go and create a new project, do File, New Project,
and look on the left-hand side, there is an Online node in this selector.
It's going to take a little bit. I'm on my MyFi here.
But it's going to come up and it's going to give me a chance to find templates
but also, more importantly, samples as well.
So I can click on JavaScript.
It's going to find samples for me. My resolution is way high here.
Normally, you would see a list of a lot of different things here.
If there's something you want to try, pick the language,
JavaScript here, and say, "I don't know how to do geolocation."
"I don't know how to open a file."
"I don't know how to take advantage of the webcam
"or optimize for touch or things like that."
There are samples for everything: sharing, searching, app bars,
making remote calls to a service, JSON encoding.
All those kinds of things there are samples for here,
and they're not huge samples that are going to take you all night to pull apart
just to find that one thing you wanted to learn.
They're really good. They're small, right to the point kinds of samples.
I've learned a ton by going through these myself,
and so I recommend that a lot as one thing.
>> Another thing to point out too is of course I showed you dev.windows.com,
so if you go back to that, you'll see at the bottom there's also the samples here.
So you can download all of them at once, but there's also a lot of other resources here too
that can help you get up to speed.
>> One other thing, and I would really recommend that you try this,
I've got it on my blog, but I'll just go right to it.
I'll show you. My blog has resources and things like that.
One of the things to point out is right here, this thing: Your Idea. Your App. 30 Days.
If you click on this, it's going to bring you to a really helpful site.
This is much more helpful than you might expect.
This is going to be 30 days of content that you can basically get tips and tricks
throughout that process as you're creating an app.
And as you may not expect, you can actually get it for games too
and for phone apps, things like that.
So basically sign up for it, and they're going to be sending you tips and tricks on,
"Have you thought about doing this? Do you support Snap?"
"Here are some guidelines on how to do that well."
"Have you thought about submitting to the store?"
"Have you thought about how you're going to sell your application?"
It's going to walk through all these various things.
And actually, if you're on the gaming track, at some point
you'll start recognizing the person talking to you
because I actually had to go to Redmint to do those and recorded 2 videos there.
But that's all part of the gaming track,
and there's also a full track for general app development.
That's called Generation App.
I would definitely recommend that to you as well in addition to the samples.
>> There's a lot of videos on a site called Channel 9 as well.
That's probably the last thing I'll recommend as well before we move on here.
Channel9.msdn.com.
This is great because you're not going to be reading through tons of white papers.
It's basically a lot of videos, screencasts and things that are right to the point.
I shouldn't say it's always right to the point. It depends who is doing the talking.
But generally, there's some really to-the-point videos here
that will show you some particular thing you might want to learn or see demoed.
There's also all of our content from our conference that happened a couple weeks ago
called Build, and you'll see that right there.
There's Core technologies for Windows 8 games. There you go.
I was there, actually. You can't see me. I was over here.
But anyhow, that aside, I would recommend that you take a look at those videos.
They're pretty helpful.
If you are stuck on something or you just want to see what something could do, fire those up.
>> [Guarin] Windows Mail just sent me an email with a link to content
for students to download with sample code and stuff like that. >>[Bowen] Great.
Awesome. Thank you, Edwin.
>> Good. >>[student] I have a question. >>[Bowen] Oh. Yeah, please.
[inaudible student question] >>[Bowen] Oh, I'm glad you asked that. Yes.
The question was, is there a visual interface for me to create things?
Edwin will reward you handsomely for that question.
There is a way to do this.
Should we do it now? Let's do it now.
I'm going to go to it right now.
Actually, let me add in one more thing to this demo,
and then I'll show you the actual answer.
I was going to add in a little more CSS here.
I was a little off on tangents here.
Let me put in some CSS here to take advantage
of the classes that we added a little while ago,
to the header, to the mainContent div, and then to the greetingOutput.
If I do that and run it, you can see now we've got a little bit different padding and margins,
so we have actually some offsets here.
These are more toward what you're going to expect of a final polished application.
But I'm just showing this to you because it's straight up CSS.
So the things that you already know you can use here to adjust the content as you wish.
You've already seen how to make the background change out that way.
>> If I go back out to our HTML, I'm going to add in one more set of markup,
and this is actually going to be a control from WinJS.
I'm going to go and grab this, a label. Let me make sure I'm doing it in the right place.
Probably good enough.
Here I've just added--and we'll go full screen so you can see the whole thing--
I've added a label for the next div.
The div is called ratingControlDiv.
By itself it will do nothing.
If you open this in a browser, you'd be looking at blank, the div itself.
But because of that mysterious line of code that I showed you before,
the process all, it's going to look for something that looks like this--
data-win-control--and it's going to find whatever is in that parameter.
It's going to make an instance of whatever that is it's pointing to.
In this case, it's a rating control, so I'm saying, "Please go and replace this thing
"with whatever you need to do to make a rating control."
It could be a flip control, it could be the progress ring or whatever control you want to use.
They're all going to work essentially the same way.
You're using standard HTML5 markup to indicate what you want,
and then you're going to get a control at the end of this. Let me run this.
I just copied that in, and now that markup becomes this,
which is actually quite a number of HTML elements.
These are all individual images, and there's divs around them with selectors.
Hopefully you can see that. It's a little subtle.
I can hover over the different items, and it's going to allow me to see the rating here.
I can click on it, and it remembers the rating but that's about it.
It's not really doing anything with the rating.
>> The one last thing I want to show you on this
before we switch into a more visual design experience
is a little bit of code that I can use to respond to these WinJS controls.
Let me get out of there, back out of full screen,
and switch over to JS here for second.
I can do this right here. I think I'll replace this whole thing.
Actually, I think it will replace all of it, but we'll find out together.
I'll put this in here. Yeah. I'm going to delete this too.
What did I add? It looks like a lot. It's not a lot.
I just extended that line of code that I already talked about before,
and I'm saying, "When everything is done, when all my controls have been made,
"then do this." So then run this function called completed.
In this case, this is stuff you can figure out.
Go find that div control.
Actually, there's one thing I should point out.
That next line is actually saying, "I've got that ratingControlDiv."
"I want to talk to it as if it were a real control, a WinJS control."
So basically, you're asking for that from it.
You're saying, "I want to talk to you as a control."
And then you can start saying things like, "We're going to add a listener for you
"so when you're changed we can respond to that."
And then we can also do things like this. Actually, that's the old code there.
I think I am missing pasting in one more function,
and that would be the actual function that would respond to the rating control being changed.
Let me pop that in right down here,
somewhere around there.
And in this case, the only thing that's new is the fact that we're going into
what the rating control tells us and we're asking for what's called the tentativeRating.
There's a bunch of different other things that that control can tell you,
and it goes control by control.
It's very straightforward. You'll be able to figure it out no trouble whatsoever.
I run this, and now when I change the ratings and click on the rating,
you can see now it's actually responding to it.
It's putting that rating on the screen into that otherwise empty div tag
below the rating control.
That's the magic of a lot of stuff here too.
So as you're creating applications for the Windows Store,
there's a ton of controls that you can just use. They all work like this.
>> Let me show you the visual side of designing for these applications.
The good news is you'll already have this tool when you install everything
if you go to that download and you get Visual Studio.
I can right click on this. I won't zoom in.
It just says Open in Blend.
Blend is another tool that works side by side with Visual Studio
and is focused much more on the design side of things,
so it really surfaces tools that are optimized for creating styles,
creating animations, working with CSS, a lot of things in that kind of vein.
Here what should be very interesting and pretty obvious immediately is we're looking at the app.
Hopefully we still are.
Instead of seeing code, which we still do see at the bottom,
we're seeing the actual representation of the application.
What's more, it's not just a representation of the app, it is actually the app running.
And that's what really is nice about Blend.
The team has done a lot of work to bring HTML and JavaScript and CSS into this tool.
Now you can actually, if you're curious, "What does that mean? What can I do?"
I can actually design to this application even though things like this don't exist in my markup.
Remember that rating control? It was just a div tag.
This stuff, that star, only exists at runtime. How do I know that?
There's a little bit of magic over here.
See these lightning bolts?
Any time you see a lightning bolt, that means it was created by something at runtime.
Some JavaScript ran and turned something into this or created this with some logic.
Those stars that you see there were created by JavaScript by WinJS.
The nice thing is, it doesn't matter to me, I can still design it,
I can still go in and change it, I can find out what's going on here,
I can look at the CSS, I can go ahead and find out why the color is the way it is,
I can start messing with things and making things horrible,
whatever I want to do.
Actually, I'll leave things alone.
But you can see here it's all the CSS and it's showing you here.
If I go up to there, it's going to show you everything that they call Winning,
so the CSS rules that are the most specific and the most selected for that item,
which you've probably already gone over in your classes,
where you can say there's a general font that we're applying to everything,
but because this is an h1 and I have a color defined for h1s,
it's going to be this color, and that's because it's more specific than the body1.
This one thing right here shows you all of that,
and it's really powerful stuff as you get more complex,
you're wondering why these things are the way they are.
It will actually tell you, and you can pick any of these items here.
That color is not too bad, actually.
You can select them. Hopefully you can see this.
For everything that you have on your application, you see a whole cascade
of all the CSS that could have applied to that and which one is winning,
which one actually took precedence.
These are kind of boring. There's not a lot going on in some of these.
If I go and change the color, then you'll start seeing some cascading there.
You can also use HTML here as well.
I can go through and modify the HTML properties for all of these things as I wish.
There's just tons of stuff here.
>> I don't want to take your time by going through everything here. Just know it's here.
There's a lot of design-oriented functionality that's just available for you
so you can stay visual, work with the application, and not have to do a lot of guessing
that you would have to do normally and cycling back from a browser back into your design,
back to the browser.
This is really cool stuff for that, and as you develop a Windows Store app,
it's going to make you a lot more productive.
>> You'll also see it's tracking the markup here and your CSS
as you're working through different things.
It's probably really hard for you to see that, especially on video,
but that's what's going on here, and I would recommend you become familiar with that.
It will save you a lot of time. That's Blend.
If you make any changes here, they are automatically going to carry back over
to Visual Studio.
It's the same files, it's the same everything. I'll leave it alone.
I have a better example that I want to show you.
But if I made a change there and saved it and I came back to Visual Studio, it would say,
"Hey, you just changed something. Can I reload it for you?" Yes.
And you're using the same stuff there.
That's the end of that particular sample.
>> I want to show you a higher end sample just to give you a view of other functionality
you might think about as well.
This is a sample app that you can download.
If you look for something called the Windows Camp in a Box,
there are some samples that are in that, and one of them is The Contoso Cookbook.
I can just run this for you.
Custom splash screen. This is the Grid view application.
They've bound some custom data here. You can navigate through this.
You can go and take a look at various things that will make us hungry on a Friday afternoon.
I don't know. What is going to make me the most hungry?
I don't know. I'm just going to pick one.
You go into these things. It will show you the recipe.
You could also, instead of clicking on an item,
you can go right to that category of content, that section of content.
In this case, you can read lots of fake Latin telling you all about these recipes here
and then go right into the specific recipe.
This also supports things like the sharing that I showed you before with the pictures.
You can also search into this application too.
It's very straightforward to do searching.
Basically, you're just getting a string of text from Windows
and you decide how you want to handle search with that.
It's a few lines of code to get that, and then what you do with it after that is totally up to you.
>> Here they also have an app bar where they're using some other functionality.
I'll just tell you what it is.
A reminder is going to use what's called a toast notification.
This is really handy for letting the user know when things have happened,
like an application was installed or something was completed.
It's also good for games too.
If you have a persistent world or a leader board and a service that's hosting that
maybe on a separate machine, those notifications can be sent into a machine
and even if the user is not using your game, playing your game or running your app,
they can still get notifications about those kinds of events.
So you could say, "Your castle has been destroyed or is just about destroyed."
"Get back here and defend it," or something like that.
You click on the notification, you go right back into the game, and you can play it.
So those kinds of things can help really draw people back into your app pretty effectively.
>> There's also support in this application for using the microphone, the webcam,
doing video and taking photos.
You can also pin a secondary tile.
It's useful if you want to just have a tile that goes right to certain content.
In this case, it goes right to this recipe.
Everything I'm mentioning I'm just showing
because it's things that you can think about using as well.
For the most part, they are very straightforward to use.
I would just recommend you bring up that sample explorer
and find a sample that can show you how to do that.
It's pretty straightforward to bring those into your apps there as well.
>> I was going to show you something else that's pretty cool here.
I'll snap this application, and I'm going to go back to Visual Studio.
This application is running. It's running from Visual Studio.
I can do some pretty cool stuff with that.
I actually have an option to select an element,
and I can go over here to the live application and I can say,
"I'm wondering why is Preparation Time a little bit lighter gray than the title itself?"
I can click on it.
It's going to synchronize that back into Visual Studio,
and it's going to show me exactly the generated content that resulted in that part of the UI.
So in this case, it's item-subtitle and h4 double construct,
and that probably tells us what we need to know because as an h4 within that context,
it's going to get a certain kind of font.
But if I still don't know why, I can click on Trace Styles.
I can then expand out color and I can find out exactly why that color is not the body color
but in fact is something else.
This is essentially the dev tools from Internet Explorer
to a degree brought into Visual Studio.
If you've worked with the Chrome Dev Tools, Firebug, things like that,
those kinds of tools that are in the browser,
that kind of functionality has been brought right into Visual Studio
so you don't actually have to launch a browser and work with those tools separately.
Now I have a Windows Store app just running,
and I can start pulling it apart and finding out why things are doing what they are.
>> I can also do it this way too.
I can go and just pick something right from the markup and find out what it is
in the application itself. I think I've gone by everything.
Here I'm hovering over this. I can select it.
It's going to show me in the actual running application where that thing is
that I'm now clicking on in the markup.
Really cool stuff.
As you're trying to figure out what's going on and what HTML is doing,
what CSS is doing, keep this in mind.
Remember this is here for you
and also that Blend can work with a live running application.
>> The one last thing I wanted to show you with this application--
By the way, it shows you deltas as things change too,
so you can watch for those yellow highlights.
Those are things that have just changed in the application.
But one last thing. I want to go back to Blend just for a second here.
We'll open this up, Open in Blend, same app, same everything.
I just want to show you the experience here isn't just you're stuck on the home page
looking at the things you'll get by default when you run the app and let it sit there.
You can also turn on this pretty small icon up here.
It's called Interactive mode.
You click on that. It's going to bring up your application.
You're not in Design mode anymore, so you're not going to be clicking on things
to change functionality, but you can actually work with the application now.
You can click through, you can do whatever, get to a recipe that you care about
or to a category. Let's go to this category.
I'll say, "Okay, here is where I want to design."
Then you click that button again, it will bring you back into the Design surface,
and now you can do all those things that I was talking about before.
I'll keep clicking until I get this selected, find out its dimensions,
find out the HTML for it, the CSS for it
for a running application, some later part of the application.
Very, very useful. I'll show this to you.
Please keep it in mind if you're looking into writing code with this
because it's going to save you a lot of hassle, and it's pretty good stuff.
That's pretty much all I wanted to show you on Blend and in Visual Studio for all of that.
>> Any questions on either of those tools?
Anything at all? >>[Guarin] I have stuff to give out, so good questions, good stuff.
>> [Bowen laughs] I've already shown you my demos here.
I'm going to put it on the Resources page and turn to questions now.
That first reference is that Generation App site with the game track and the app track.
Sign up for those.
You don't have to wait the 30 days to get the content.
You can start going and looking at the content as you wish.
I understand your time frames might be different than-- [laughs]
So when is the Hackathon? That's a couple weeks, right?
So you don't have the 30 days to wait.
So yeah, you can sign up for that and then just start pulling the content out from it.
Also the Dev and the Design Centers.
And I didn't mention this, but there's also the Store Docs.
This would be for after the Hackathon as you're ready to start submitting your apps for the store.
There are some helpful guidelines here, some guidance about how to get things into the store,
some common issues that might trip you up,
and that's the end of those resources.
>> So what's on your mind? Anything else that you--
[Guarin] Who is thinking about doing a Windows app for CS50? Cool.
[Bowen] Cool. Great.
>> Any questions about the stuff that you've seen so far and how it relates to this?
For example, with more time I could take a game that I have written
and that runs in browser and just kind of go through the process
of bringing that into Visual Studio and making it a Windows Store app.
It takes more time than we really had to include today,
but the short version is it's the same code that you have running in the browser,
and the things that you change are the things that you decide to plug in to Windows 8.
So if you want to use charms, if you want to search or share,
you need to create an app bar to hide away some functionality onto that,
those are the kinds of things that you would change.
But the core of your web app can remain intact.
Again, as long as it works in IE10, it's going to be a really easy port
to bring that stuff into Visual Studio, into Blend, and make it a Windows Store app.
Again, the only things you will need to learn are those other features
that you can use to light up an application, like a live tile and those kinds of things.
>> Yeah. >>[student] My question is about working mobile.
So if you make an app that works as an app on desktop,
is it really easy to transfer it to mobile, or is there a--
The question is, if I make a Windows Store app that's really optimized for this environment
and I want to bring it to a mobile world, what's involved with doing that?
That, like many questions, is always a constantly changing answer.
The good news is if you're sticking with HTML and JavaScript, CSS,
if you're starting from a Windows Store app,
it's going to let you bring it to the Web
and then use those kinds of techniques, like media queries and things,
to adapt to different size devices.
That said, there's always frameworks and things out there
that support extending out different technologies, different platforms.
That changes all the time.
We are also changing things as well as we look toward what we have now
actually out with Windows Phone 8.
We have some shared core infrastructures
offered between applications for those environments.
So the stuff that you're doing to create a Windows Store app,
a lot of that can carry over into a Windows Phone 8 application as well.
That again is an emerging story, so there's some content about that at Build.
The SDK just got out a little while ago. It was just released a little while ago.
But in terms of other platforms too,
you probably run into many cross-platform frameworks as well.
The good news is the stuff that you're doing here,
the core functionality is straight up web standard stuff.
The only things that wouldn't translate easily are the things that Windows 8 does,
but that's no surprise because it's a Windows feature.
You're not going to find sharing or similar kinds of contracts on every other platform.
So those are the things that you would want to from a design perspective
make sure you have ways to kind of abstract that out so you can say,
"If I'm running on this, I can do that."
If I'm not, there's some design patterns you can use to kind of hide that stuff away.
But keep that in mind. Yeah. Sorry. Go ahead.
>> [student] If I want to test my Windows app on top of [inaudible]
[Bowen] Yeah. I skipped one more thing too. Yeah.
I'll answer your question first, then I'll show you a feature I forgot to mention.
We do have some machines available locally. I'm sorry.
The question was, how do I test things on devices
if I don't happen to have a whole lot of things to choose from?
[Guarin] We lent you guys, I think, 5 or 6. How many do you need?
[student] We got 4 of them. >>Okay. You guys got 4 slates to play around with.
So definitely let everyone know, please. [laughs] >>[Bowen] Awesome.
That's an even better answer than I was going to give you.
We have office hours for developers that we do at our office
and now coming soon to the Microsoft Store over at the Pru,
but Edwin has already taken care of you.
There are 4 slates available for loaning, for testing.
There we go. There's an example of one up there.
So yeah, absolutely. Great.
Absolutely by far the best way to test it is to be on a device.
If you don't happen to have one yet or you don't want to walk across campus in the snow
to grab one or whatever, there is a way to do this back in Visual Studio.
If I go back into where I was here, here instead of using Local Machine,
you could connect to Remote Machine, but that's not what I'm talking about here.
Simulator is the thing that you might want to look into.
I'll run this, and really what it is, it's essentially a window onto your own system.
Here is actually my system running, running Contoso,
but in a way that lets me change some of the execution parameters,
the environmental parameters.
So I can say here, "You know what?"
Oh. I already have it running in a simulated 27-inch monitor at 2560 resolution.
I can easily drop that down and see what my application would do with a smaller screen
or by changing DPI settings or whatever.
So on a small screen, a 10.6, what is it going to do?
That still looks pretty good, right?
You'll want to do this, especially if you're submitting to the store, because we do
as part of the testing process.
And if there are problems like that,
then you might run into an issue getting certified for the store.
But that's part of the simulator. Really cool. Very easy to do that.
You can also use features like rotating it as well.
I can click the button here, have it rotate, see what someone would have as an experience
rotating their slate, their tablet, and using your application with that.
There are some other things too like touch emulation and some other things,
setting GPS.
I can pretend I'm at a different location and see what my application does
when I pretend that I'm back in Seattle or something.
But it's a really useful feature, and it's built in to both Visual Studio and in Blend.
Yes. Your question.
>> [student] If you're writing a game, does Visual Studio have any support for animation?
Yeah. The question is around animation support, particularly with gaming.
It depends. [chuckles]
With JavaScript I will say there's probably less support than there is on the XAML side,
which has timelines, has storyboards and things that are built in.
For animations on JavaScript apps, I don't know how much of an answer I want to give you.
I have resources on my blog that go through a lot of options for both physics animations,
options for JavaScript-oriented games on Windows 8.
I would refer you to those.
Basically, there's so many choices.
The reason I'm hesitating is there's so many choices for doing animations with JavaScript.
It could be CSS, it could be Canvas-based, it could be just basic DOM animations,
it could be a lot of different things, so it really depends on your choice.
If you decide to use something like Create.js or Lime or other kinds of frameworks--
Well, I'm not even sure you're going to be able to use a higher end framework
like Impact or Construct.
That tends to generate more code than you might consider from scratch.
But in those cases, you could still use a simulator, you can use the environments,
and I tend to just use this environment for my test platform in those cases
as I'm developing games.
I've been fine especially with Canvas animations,
which is probably the most common thing.
The best you're going to probably find is the dev tools in the browser
and the dev tools in Visual Studio.
Kind of a meandering answer there, but hopefully I got your answer. Yes. You.
>> [student] What are the data storage options for Windows 8 apps?
What are the data storage options for Windows 8 apps, Windows Store apps?
Your options really are each application gets its own pool of local storage
for settings and for data, but it's also ridiculously easy to use roaming storage,
to use cloud-based storage. It's free.
What happens is you basically choose a different class and you say,
"Roaming Settings, Save, this particular set of content,"
and their Microsoft account, whatever they've signed in as,
is going to be the key to roaming that information around.
So if I use your game on my laptop and then I log in with the same account
and I play the game on a Surface or a tablet,
that will automatically roam that setting and data between those machines.
That's a default thing. That's good for certain amounts of data.
You wouldn't put a huge database into those.
For that you need to go to other kinds of solutions, like a hosted database in the cloud,
things like that.
There are some other community options around other kinds of data technologies.
I've seen some SQLite options in the community around there too.
So more and more are emerging, but those are the primary things that you would look toward
for a game or an app.
And you had a question in the back too.
>> [student] In terms of the network [inaudible] uploading or downloading files [inaudible]
[Bowen] Is your question how can you see that or how can you debug that and test it?
[student] How can you debug it [inaudible]
Sorry. I can't hear all of it.
[student] How do you get it bug tested and also [inaudible]
Great. Great.
How do you work with networking? How can you see what's going on?
There's many different answers to this one,
but let me show you probably the easiest things here.
Let me get rid of the simulator for a second.
Just a couple debugging options for networking.
There's a full network stack baked right into both the WinRT level and from WinJS,
so you can very easily make XHR, AJAX type calls from your game or app to do that.
Primarily, I tend to use 2 things.
I use the actual dev tools themselves, which have a network stack baked into them.
Let me show you the Windows home page.
I can bring this up, and there's actually a network proxy baked into these tools here.
So I can do this, I can refresh the page, and it's going to show me all of the interactions,
including AJAX calls for that session, for that request's duration.
This is useful. It's going to be very useful for browser-based apps.
For other kinds of apps, including Windows Store apps,
I use a tool called Fiddler.
You're going to get a game in response. [chuckles]
Fiddler is a simple proxy. I think I can show that to you.
It's just GetFiddler.com, which, interestingly enough, I'm tracing my network stack
going to GetFiddler.
But anyhow, Fiddler has been written by one of the PMs on the IE team,
so he knows what he's doing.
This is a good proxy that you can use for debugging network traffic.
I would recommend that. Question over there too.
>> [student] Is there an easy way to integrate foreign language input,
like Japanese or Chinese, into Windows apps?
I can't say I've done too much of it myself, but it is baked in.
There are options for of course emitting your application--I'm sorry, I didn't say the question--
options around globalization, localization of content,
including things like being able to sell in different markets
and target that version of your application for those individual languages
or cultures or things like that. Absolutely built in.
We've had support for that for forever,
and that carries forward into your options for Windows Store.
You can do that in the store itself, sell in different markets,
you can do that in the application as well too with using resources to define,
"If I am developed for this culture, then use these overrides for my textual content
"or use a right to left reader."
Those are all part of the default WinJS and WinRT APIs. Good question.
>> How are we doing? Any others?
And if anyone on video has questions, I'm cbowen@microsoft,
so I'm happy to take any of your questions from the future.
Very-- From the future, future [mimics echo].
So here is me. Let me put back my contact here.
So just send me a note, cbowen@microsoft,
and I will get back to you as soon as I can.
>> Anything else that you're wondering? Are we good?
Great. All right. Thank you all very much. I appreciate it. [applause]
>> [CS50.TV]