1
00:00:00,000 --> 00:00:02,420
[Seminar - Windows 8 - App/Game Development with HTML5]

2
00:00:02,420 --> 00:00:05,090
[Chris Bowen, Edwin Guarin - Harvard University]

3
00:00:05,090 --> 00:00:07,350
[This is CS50. - CS50.TV]

4
00:00:07,350 --> 00:00:10,290
>> Hey, everyone. My name is Edwin Guarin. This is Chris Bowen.

5
00:00:10,290 --> 00:00:12,310
I'll let him introduce himself in a second.

6
00:00:12,310 --> 00:00:14,100
I just want to make a quick announcement.

7
00:00:14,100 --> 00:00:18,340
First of all, all you CS50 students get Windows 8 for free.

8
00:00:18,340 --> 00:00:23,150
So if you're thinking about actually using it for your final project, it's yours.

9
00:00:23,150 --> 00:00:25,740
Nate will send out an email later on for instructions.

10
00:00:25,740 --> 00:00:32,850
The second thing is if you decide to write a Windows 8 app for your CS50 final project,

11
00:00:32,850 --> 00:00:35,870
we're going to be doing some giveaways: an Xbox,

12
00:00:35,870 --> 00:00:38,870
we might be able to give a slate away, stuff like that.

13
00:00:38,870 --> 00:00:42,460
So if there's anything holding you back, let Chris or I know

14
00:00:42,460 --> 00:00:45,010
how we can help you build something really cool.

15
00:00:45,010 --> 00:00:48,580
So thanks again for coming today, and I'll hand it over to Chris.

16
00:00:48,580 --> 00:00:50,500
>> Thank you, Edwin.

17
00:00:51,000 --> 00:00:52,740
Thanks, everyone, for joining us today. 

18
00:00:52,740 --> 00:00:55,800
I'm Chris Bowen. I'm one of Edwin's colleagues here in the Northeast.

19
00:00:55,800 --> 00:00:58,310
I just wanted to spend a little bit of time with you talking about

20
00:00:58,310 --> 00:01:03,730
how to make a Windows Store application with HTML5, JavaScript, and CSS

21
00:01:03,730 --> 00:01:07,310
and kind of get any questions you may have about it answered for you

22
00:01:07,310 --> 00:01:12,920
as you're looking toward thinking about maybe using it for a CS50 finals opportunity.

23
00:01:12,920 --> 00:01:14,980
>> That said, we'll just dive right in.

24
00:01:14,980 --> 00:01:17,190
I'll go over to slides over here.

25
00:01:17,190 --> 00:01:19,440
If you do have any questions, feel free to send me an email.

26
00:01:19,440 --> 00:01:23,460
I'm cbowen@microsoft.com, and there's my blog and my Twitter.

27
00:01:23,460 --> 00:01:26,330
However you want to get in touch with me, that's fine.

28
00:01:26,330 --> 00:01:30,110
I've got about an hour of stuff, and I want to get your questions in along the way,

29
00:01:30,110 --> 00:01:33,720
so don't be shy about having questions during this.

30
00:01:33,720 --> 00:01:36,470
They can't see who's asking the questions on the recording,

31
00:01:36,470 --> 00:01:39,090
so you'll be as anonymous as you want to be.

32
00:01:39,090 --> 00:01:42,780
>> Let me dive right in, just give you a quick introduction to Windows 8,

33
00:01:42,780 --> 00:01:47,400
and show you a few of the things about Windows Store apps that you might consider

34
00:01:47,400 --> 00:01:49,530
as you're thinking about developing an application.

35
00:01:49,530 --> 00:01:52,660
We're looking at Windows 8. We've been out for a couple weeks now.

36
00:01:52,660 --> 00:01:55,810
A lot of strong adoption out there already.

37
00:01:55,810 --> 00:01:59,800
You may have seen already the Surface machines that we have as well.

38
00:01:59,800 --> 00:02:03,730
There's one over here actually you can take a look at if you're here in person.

39
00:02:03,730 --> 00:02:07,530
I really want to talk to you, show you around a little bit about Windows 8.

40
00:02:07,530 --> 00:02:10,759
The idea with Windows 8, it really does bring forward all the stuff you know about Windows

41
00:02:10,759 --> 00:02:16,840
into some new experiences--in particular, things like on the Surface machine with touch,

42
00:02:16,840 --> 00:02:20,000
these kind of more mobile devices that are now on the market,

43
00:02:20,000 --> 00:02:22,360
but it's also Windows at its core.

44
00:02:22,360 --> 00:02:25,850
So it means you can install it really on anything that runs Windows 7,

45
00:02:25,850 --> 00:02:30,770
from your biggest triple SLI gaming rig down to your laptop

46
00:02:30,770 --> 00:02:36,200
and to your shiny new other devices that you might pick up today.

47
00:02:36,200 --> 00:02:38,450
They will run Windows 8.

48
00:02:38,450 --> 00:02:40,530
I'll show you around just a little bit,

49
00:02:40,530 --> 00:02:44,670
and all the experiences that you'll see here are things that you can create.

50
00:02:44,670 --> 00:02:47,760
The idea is whether it's touch, mouse, keyboard,

51
00:02:47,760 --> 00:02:51,870
whatever the device is that you're running your application on, it's going to run great.

52
00:02:51,870 --> 00:02:55,180
Windows 8 will help with all those scenarios.

53
00:02:55,180 --> 00:02:59,600
>> These slides aside, let's just get right into taking a look around here.

54
00:02:59,600 --> 00:03:03,270
Let me show you around my home screen. This is my Start screen.

55
00:03:03,270 --> 00:03:05,810
I'll just give you a little bit of a tour here.

56
00:03:05,810 --> 00:03:09,610
I'm on a non-touch machine, so as much as I want to touch my laptop screen,

57
00:03:09,610 --> 00:03:13,400
it won't do a thing, so I'll just scroll around here a little bit and show you.

58
00:03:13,400 --> 00:03:17,950
Some things you might notice are the fact that these what are called live tiles

59
00:03:17,950 --> 00:03:21,470
actually can animate, and they can provide information to you--

60
00:03:21,470 --> 00:03:24,750
maybe updates on statistics for a game

61
00:03:24,750 --> 00:03:30,970
or show you news from some of the earlier apps that are here on the left-hand side.

62
00:03:30,970 --> 00:03:35,350
There we go. I'm sure it's only positive and fantastically great news.

63
00:03:35,350 --> 00:03:38,450
You can see here it's really calling your attention back to the app, saying,

64
00:03:38,450 --> 00:03:43,010
"Hey, there's something new here. Take a look. Come back in and see what's new for you."

65
00:03:43,010 --> 00:03:45,320
That's called live tile, and you can do notifications

66
00:03:45,320 --> 00:03:47,070
either right from the application itself

67
00:03:47,070 --> 00:03:52,220
or if you take a look in more detail, you'll find out how to write a remote service

68
00:03:52,220 --> 00:03:54,340
that can actually push information to the tile,

69
00:03:54,340 --> 00:03:56,520
which is what's happening with these news apps.

70
00:03:56,520 --> 00:04:00,080
They're actually getting news from the cloud and updating the tile right there

71
00:04:00,080 --> 00:04:03,710
so people know there's a reason to open up the application and take a look

72
00:04:03,710 --> 00:04:06,950
at whatever the latest news is in any of these

73
00:04:06,950 --> 00:04:10,060
or if there's new recipes or a new high score to beat

74
00:04:10,060 --> 00:04:13,560
or a friend playing or whatever on these applications.

75
00:04:13,560 --> 00:04:15,550
It's something to entice you back in.

76
00:04:15,550 --> 00:04:18,640
So that's the live tiles, and it could be a person, it could be a website as well.

77
00:04:18,640 --> 00:04:20,790
Usually it's an application.

78
00:04:20,790 --> 00:04:25,320
>> Pretty much all of these things that I have here came from the Windows Store. I'll launch that. 

79
00:04:25,320 --> 00:04:27,890
It's one of the applications that you get by default

80
00:04:27,890 --> 00:04:30,350
on any machine that's running Windows 8.

81
00:04:30,350 --> 00:04:33,040
You can come here to find anything you'd want,

82
00:04:33,040 --> 00:04:37,240
from things that are highlighted to games that I haven't seen before.

83
00:04:37,240 --> 00:04:39,440
Oh, wow, we've got a new pinball here.

84
00:04:39,440 --> 00:04:41,580
You can install these right here from the store,

85
00:04:41,580 --> 00:04:43,420
and we'll talk about how to develop these.

86
00:04:43,420 --> 00:04:45,670
You have a lot of choices in how you create them.

87
00:04:45,670 --> 00:04:49,020
We'll focus in on the JavaScript story with HTML and CSS,

88
00:04:49,020 --> 00:04:52,790
but to the user, to the purchaser of the app, it doesn't matter what it was written in.

89
00:04:52,790 --> 00:04:54,670
They can go ahead and work with it.

90
00:04:54,670 --> 00:04:57,870
I'm intrigued by this one, so I need to open this up and take a look.

91
00:04:57,870 --> 00:05:02,310
Every app, including the ones that you can submit and sell or give away for free,

92
00:05:02,310 --> 00:05:06,240
whatever you want to do in the store, will get a home page like this.

93
00:05:06,240 --> 00:05:10,750
You can submit with your application a bunch of screen shots--you see some here--

94
00:05:10,750 --> 00:05:15,970
details about the application, and over time you'll accumulate both ratings--

95
00:05:15,970 --> 00:05:19,020
they're basically just the star rating--and reviews,

96
00:05:19,020 --> 00:05:20,690
which provide a little bit more insight.

97
00:05:20,690 --> 00:05:24,380
Actually, someone has to type something and tell you how awesome you are,

98
00:05:24,380 --> 00:05:29,300
and that will go into your Reviews section over here, which I haven't looked at.

99
00:05:29,300 --> 00:05:33,890
Fantastic. "Won't even open." How great.

100
00:05:33,890 --> 00:05:39,000
Well, for the folks for whom this did open and run, they seem to really enjoy it. [laughs]

101
00:05:39,000 --> 00:05:43,770
Keep this in mind. The Internet. Anyone can say what they want about your application.

102
00:05:43,770 --> 00:05:45,780
So make sure you're doing a great job with it,

103
00:05:45,780 --> 00:05:49,030
make sure you're making it as comfortable for the user as you can

104
00:05:49,030 --> 00:05:52,720
because they're a couple clicks away from providing a review,

105
00:05:52,720 --> 00:05:55,870
and that will accumulate up to your overall review rating.

106
00:05:55,870 --> 00:05:58,990
And you want to do your best because you're going to be up against other applications.

107
00:05:58,990 --> 00:06:01,830
There will be thousands of apps already in the store,

108
00:06:01,830 --> 00:06:06,880
and chances are, there may be something that does similar functionality to what you're doing.

109
00:06:06,880 --> 00:06:12,740
So if you can really stand out from the crowd, that's going to be to your advantage, of course.

110
00:06:12,740 --> 00:06:15,300
>> We'll get into the store a little bit later on.

111
00:06:15,300 --> 00:06:17,090
I really want to focus on creating apps.

112
00:06:17,090 --> 00:06:20,760
But the short version of the store is worldwide distribution,

113
00:06:20,760 --> 00:06:25,430
it's automatically part of Windows 8, people just fire it up and take a look at various apps here,

114
00:06:25,430 --> 00:06:29,070
you have the Dress-Up Sticker Book and all kinds of various apps.

115
00:06:29,070 --> 00:06:33,690
Fresh Paint, I use this a lot--poorly, but I use it a lot.

116
00:06:33,690 --> 00:06:36,080
It's showing me I already own it.

117
00:06:36,080 --> 00:06:41,280
Let me show you something I don't have--UVideos I don't have as brand new.

118
00:06:41,280 --> 00:06:43,660
You see here it's free, so you can install it right from the store.

119
00:06:43,660 --> 00:06:46,430
You have choices too. You can of course give it away.

120
00:06:46,430 --> 00:06:49,660
You can put advertising in the app or game.

121
00:06:49,660 --> 00:06:54,770
You can also charge for it, and you could very easily provide a trial for the application as well

122
00:06:54,770 --> 00:06:58,220
so you can let folks try it for a week or whatever you want to do.

123
00:06:58,220 --> 00:07:01,540
That's just customizable through the portal. You don't write any code for that.

124
00:07:01,540 --> 00:07:03,990
So you say, "You can use this for a week and then you've got to buy it,"

125
00:07:03,990 --> 00:07:07,130
or you could do things like, "You could play the first 3 levels of this game

126
00:07:07,130 --> 00:07:09,820
"and then you've got to purchase to access the rest."

127
00:07:09,820 --> 00:07:12,310
You could even do in-app purchases as well, so you can say,

128
00:07:12,310 --> 00:07:17,880
"We've got additional adventures or sets of graphics or things that are unlocked--

129
00:07:17,880 --> 00:07:21,430
"more recipes that are unlocked--if you purchase these extended sets."

130
00:07:21,430 --> 00:07:24,260
And you can do that all within the app or game itself.

131
00:07:24,260 --> 00:07:26,070
So, totally up to you, your choice.

132
00:07:26,070 --> 00:07:28,070
There's a lot of things that you can do in the store,

133
00:07:28,070 --> 00:07:31,660
and then basically you're submitting it to a certification channel.

134
00:07:31,660 --> 00:07:35,380
We can talk all about that a little bit later on, but this is the goal.

135
00:07:35,380 --> 00:07:40,410
You want to get your app worldwide visibility in the store here.

136
00:07:40,410 --> 00:07:44,170
>> Back on the Start screen here, I'd like to show you around a little bit more.

137
00:07:44,170 --> 00:07:50,580
If I launch these apps, let me give you an example of some cross-app functionality here.

138
00:07:50,580 --> 00:07:53,070
To do that, I'll launch Fresh Paint.

139
00:07:53,070 --> 00:07:55,550
One thing you'll see here is every single bit of the screen,

140
00:07:55,550 --> 00:07:58,040
all pixels of the screen, go to your app.

141
00:07:58,040 --> 00:08:01,990
Gone are the days where you have these borders around windows

142
00:08:01,990 --> 00:08:05,120
with lots of buttons that are always there taking up space all the time.

143
00:08:05,120 --> 00:08:09,430
Now you really want to get away from that and just have your content be the focus.

144
00:08:09,430 --> 00:08:13,710
We can do things with Windows by accessing other kinds of menus.

145
00:08:13,710 --> 00:08:16,840
One of them is actually what's called the charms bar,

146
00:08:16,840 --> 00:08:18,870
and it comes out from the side of the screen.

147
00:08:18,870 --> 00:08:21,270
You can actually flick from the side if you have a touch screen,

148
00:08:21,270 --> 00:08:24,840
you could right click if you have a mouse, there's a keyboard shortcut for it,

149
00:08:24,840 --> 00:08:29,490
there's always more than one way to do something in the environment here.

150
00:08:29,490 --> 00:08:31,680
That brings out a number of things that you can do.

151
00:08:31,680 --> 00:08:33,870
The most obvious is you can go back to the Start screen,

152
00:08:33,870 --> 00:08:36,780
but the other 4 are what are called charms.

153
00:08:36,780 --> 00:08:41,059
They are contracts that you can plug into as an app developer. They're pretty cool.

154
00:08:41,059 --> 00:08:43,340
Search, I'm sure that's something you're going to do,

155
00:08:43,340 --> 00:08:44,950
sharing I'll show you in a second,

156
00:08:44,950 --> 00:08:48,450
and Devices and Settings, these are all things that your app can plug into

157
00:08:48,450 --> 00:08:51,960
to leverage Windows, to say, "I've done my part

158
00:08:51,960 --> 00:08:54,700
"and I want Windows to support some other functionality,

159
00:08:54,700 --> 00:08:56,750
"and I don't want to write a lot of code to make that happen."

160
00:08:56,750 --> 00:08:59,480
That's really a benefit of using these features.

161
00:08:59,480 --> 00:09:01,340
Let me show you one.

162
00:09:01,340 --> 00:09:05,170
To do that, I'll make a new painting.

163
00:09:05,170 --> 00:09:08,240
I also talked about using every pixel for your app.

164
00:09:08,240 --> 00:09:11,850
By default, this is what the paint app looks like when you're using it.

165
00:09:11,850 --> 00:09:14,960
It's really just about whatever you're drawing, your content.

166
00:09:14,960 --> 00:09:20,850
I could do horrible things here. What should I draw? I don't know.

167
00:09:20,850 --> 00:09:23,110
Scribbles? Oh, great. I can do scribbles. Fantastic.

168
00:09:23,110 --> 00:09:25,130
A turkey? [laughs]

169
00:09:25,130 --> 00:09:28,500
This is the most abstract turkey you will see.

170
00:09:28,500 --> 00:09:31,780
I can also bring up what's called the app bar,

171
00:09:31,780 --> 00:09:33,850
and this is really one of the key ways that you can use

172
00:09:33,850 --> 00:09:37,210
to hide away all the stuff that might have been on your app or game before

173
00:09:37,210 --> 00:09:39,570
just taking up space all the time.

174
00:09:39,570 --> 00:09:43,270
So now you can put it up here, and this is really one of the more beautiful experiences

175
00:09:43,270 --> 00:09:46,380
with the app bar that I've seen.

176
00:09:46,380 --> 00:09:48,800
Put the choices here for selecting different colors.

177
00:09:48,800 --> 00:09:54,310
We wanted a turkey, so we'll put some brown here, start mixing in a couple colors.

178
00:09:54,310 --> 00:09:58,790
We'll take an intermediate color here and then get back here.

179
00:09:58,790 --> 00:10:02,990
You can start drawing. There's your turkey. Fantastic.

180
00:10:02,990 --> 00:10:07,660
I can't draw to begin with, but to do it with a touchpad in front of an audience is even better.

181
00:10:07,660 --> 00:10:09,640
This is awesome.

182
00:10:09,640 --> 00:10:13,030
The idea, though, is everything that I care about is right here on the surface.

183
00:10:13,030 --> 00:10:17,060
Let's say I'm so satisfied with this that I've got to share it with somebody.

184
00:10:17,060 --> 00:10:19,680
Normally what you would do with other versions of Windows,

185
00:10:19,680 --> 00:10:22,900
you would maybe take a screen shot, you'd do some copy-paste of your text

186
00:10:22,900 --> 00:10:24,950
or things like that that you want to share out,

187
00:10:24,950 --> 00:10:27,260
and then go and open up another application and put it into it.

188
00:10:27,260 --> 00:10:28,630
Here you don't have to do that.

189
00:10:28,630 --> 00:10:32,400
You can actually bring out the charms bar and say, "I want to share this."

190
00:10:32,400 --> 00:10:35,000
At this point it's going to show you all the apps

191
00:10:35,000 --> 00:10:38,080
that know how to work with whatever is being shared.

192
00:10:38,080 --> 00:10:41,590
In this case it's a picture, so it's going to say, "I see you've got a picture."

193
00:10:41,590 --> 00:10:45,590
"Do you want to share that?" You can see I email myself stuff all the time.

194
00:10:45,590 --> 00:10:49,420
It recognizes that, and it's offering me that as a shortcut,

195
00:10:49,420 --> 00:10:53,270
but it's also showing me every app that knows how to deal with taking a picture

196
00:10:53,270 --> 00:10:55,520
and doing something with it.

197
00:10:55,520 --> 00:10:57,890
These have all indicated to Windows that they can do that.

198
00:10:57,890 --> 00:10:59,240
At this point this is Windows.

199
00:10:59,240 --> 00:11:01,680
The user just chooses what they want to do with it.

200
00:11:01,680 --> 00:11:06,610
I'll do my usual of PuzzleTouch. You can see I've created all kinds of puzzles over time.

201
00:11:06,610 --> 00:11:11,790
I'll take PuzzleTouch and say, "I want to share this amazing creation with PuzzleTouch."

202
00:11:11,790 --> 00:11:16,670
It's going to go ahead and say, "Great. You want to share this? Fantastic."

203
00:11:16,670 --> 00:11:19,260
"Do you want to make a puzzle that's easy, intermediate, whatever?"

204
00:11:19,260 --> 00:11:20,800
I'll make an intermediate one here.

205
00:11:20,800 --> 00:11:24,890
It makes the puzzle. It's going to be a terrible puzzle because it's mostly blank.

206
00:11:24,890 --> 00:11:28,100
But it's ready, and it's actually back in the other application.

207
00:11:28,100 --> 00:11:32,360
If I come out here, I can search for it and launch it.

208
00:11:32,360 --> 00:11:38,100
Now if we scroll over just a little bit here, we should see my creation somewhere.

209
00:11:38,100 --> 00:11:42,930
Where did I go? What kind of puzzle did I make? Did I make it easy?

210
00:11:42,930 --> 00:11:46,110
Oh, there it is, right there.

211
00:11:46,110 --> 00:11:49,550
[chuckles] It's the easily recognizable turkey puzzle that's here.

212
00:11:49,550 --> 00:11:52,360
But the thing I want to point out to you, the cool thing here

213
00:11:52,360 --> 00:11:54,710
is the apps didn't know anything about each other.

214
00:11:54,710 --> 00:11:58,740
They only said, "I've got a picture to share, and I know how to deal with pictures."

215
00:11:58,740 --> 00:12:01,420
And you as a developer, you don't have to write that code.

216
00:12:01,420 --> 00:12:05,350
When someone asks me to share, I'm going to put some data into this little data structure

217
00:12:05,350 --> 00:12:06,740
and I'm done.

218
00:12:06,740 --> 00:12:10,990
The other app takes over, does its thing, and that's the end of the sharing experience.

219
00:12:10,990 --> 00:12:14,550
That's just one thing that you can do--really, really powerful--

220
00:12:14,550 --> 00:12:17,570
and it's going to be one of those things that could really help differentiate your app

221
00:12:17,570 --> 00:12:20,090
and also your game too in the store.

222
00:12:20,090 --> 00:12:22,220
People are going to be able to say, "This is really useful."

223
00:12:22,220 --> 00:12:25,430
"I use this puzzle creator all the time. It's fantastic."

224
00:12:25,430 --> 00:12:30,490
>> That's about enough of a brief overview of what's going on here.

225
00:12:30,490 --> 00:12:33,670
There's a couple other features too that maybe we'll highlight as we go through code.

226
00:12:33,670 --> 00:12:37,710
But I want to dive into slides, and to do that, I'm going to go to Desktop,

227
00:12:37,710 --> 00:12:40,940
which is itself another live tile here.

228
00:12:40,940 --> 00:12:43,840
I can go into this and, sure enough, I'm on my slides,

229
00:12:43,840 --> 00:12:46,320
but let me show you actually where we are.

230
00:12:46,320 --> 00:12:48,460
We're actually in Desktop mode.

231
00:12:48,460 --> 00:12:52,580
This is really where what I was saying before about Windows carrying forward

232
00:12:52,580 --> 00:12:54,850
to new experiences shows itself.

233
00:12:54,850 --> 00:12:56,450
This is the Windows you know.

234
00:12:56,450 --> 00:12:59,730
Windows applications are called desktop apps. They run here.

235
00:12:59,730 --> 00:13:02,730
If you have existing apps and you want to run them on Windows 8,

236
00:13:02,730 --> 00:13:04,710
you can absolutely do that.

237
00:13:04,710 --> 00:13:07,590
These are not the same things as the store apps, which are over here,

238
00:13:07,590 --> 00:13:12,240
like Fresh Paint and these NBC News apps and things like that. Those will come from the store. 

239
00:13:12,240 --> 00:13:14,450
They can plug into some of the features that I was showing you

240
00:13:14,450 --> 00:13:16,620
and others that I haven't shown you just yet.

241
00:13:16,620 --> 00:13:21,460
But just keep that in mind. We have support for both of these things as well.

242
00:13:21,460 --> 00:13:27,000
I'm sorry. Is something not showing on the screen? I've lost it completely. That's odd.

243
00:13:29,000 --> 00:13:31,000
Okay. Thanks for pointing that out.

244
00:13:31,000 --> 00:13:34,770
What you haven't been seeing for a while is my showing you that the desktop is here.

245
00:13:34,770 --> 00:13:37,540
What is the last thing that you saw? Did you see this?

246
00:13:37,540 --> 00:13:39,490
This is the desktop. You already know what it looks like.

247
00:13:39,490 --> 00:13:42,070
It's nothing terribly unusual.

248
00:13:42,070 --> 00:13:46,940
It's our carrying that experience forward for you and letting you use the things that you've had.

249
00:13:46,940 --> 00:13:50,460
For example, I'll be showing you Visual Studio. That is a desktop application.

250
00:13:50,460 --> 00:13:52,600
It's going to run in this mode.

251
00:13:52,600 --> 00:13:54,960
It's going to support a more complex environment

252
00:13:54,960 --> 00:14:01,470
with a lot of options and things like that, so it makes it a good option as a desktop app.

253
00:14:01,470 --> 00:14:04,810
>> That said, let's go to slides for just a little bit

254
00:14:04,810 --> 00:14:09,720
and give you some introductory content and then get into actually coding here.

255
00:14:09,720 --> 00:14:14,070
The good news is I've heard you've been focusing on a lot of CSS and JavaScript, HTML.

256
00:14:14,070 --> 00:14:18,110
All of those things that you've been learning carry directly into making Windows Store apps.

257
00:14:18,110 --> 00:14:22,920
The things that you've been hearing about with applying CSS selectors and all those things

258
00:14:22,920 --> 00:14:27,180
is exactly what you do to create an application here for the store.

259
00:14:27,180 --> 00:14:29,640
We'll go through these things bit by bit.

260
00:14:29,640 --> 00:14:34,130
Basically, I'm building on the stuff that you already have taken the time to learn.

261
00:14:34,130 --> 00:14:36,520
This is the overall chart of the technologies that you could use

262
00:14:36,520 --> 00:14:38,790
to make applications for Windows 8.

263
00:14:38,790 --> 00:14:42,840
The stuff on the right, the desktop apps, is really what we already know.

264
00:14:42,840 --> 00:14:46,840
That's stuff that is really the Windows 7 world carried forward into Windows 8.

265
00:14:46,840 --> 00:14:51,920
All of those options carry forward: C#, VB, Win32 kind of development.

266
00:14:51,920 --> 00:14:54,450
Great. No problem. The new stuff is on the left-hand side.

267
00:14:54,450 --> 00:14:58,220
That's Windows Store apps, that's when I want to get my application wired into Windows 8

268
00:14:58,220 --> 00:15:02,300
using all those features, get it into the store, and get that really cool experience

269
00:15:02,300 --> 00:15:05,260
of the Windows Store applications.

270
00:15:05,260 --> 00:15:10,350
To do that, you can see here you've got all your choices with XAML, C++,

271
00:15:10,350 --> 00:15:14,100
C#, VB, you could do DirectX, things like that, things that go beyond the slide.

272
00:15:14,100 --> 00:15:18,650
But for us, we're going to focus right in on the fact that HTML, CSS, and JavaScript

273
00:15:18,650 --> 00:15:22,890
are really a first-class citizen for making applications for Windows 8

274
00:15:22,890 --> 00:15:24,960
and for the Windows Store.

275
00:15:24,960 --> 00:15:27,950
So this is good for everyone here and folks watching on video

276
00:15:27,950 --> 00:15:30,760
because you can just leverage all those experiences that you have

277
00:15:30,760 --> 00:15:33,900
and really tie into what Windows offers.

278
00:15:33,900 --> 00:15:37,870
You're going to do that through a set of APIs, which should be no surprise. 

279
00:15:37,870 --> 00:15:39,920
Every OS has its own APIs.

280
00:15:39,920 --> 00:15:43,530
We expose what Windows can do through what's called WinRT.

281
00:15:43,530 --> 00:15:46,370
It's a set of APIs that just does everything for you.

282
00:15:46,370 --> 00:15:51,650
If you need to open files, you need to use the camera, geolocation, things like that,

283
00:15:51,650 --> 00:15:55,700
they go through what Windows can offer to you.

284
00:15:55,700 --> 00:15:59,370
To access that, we have some more JavaScript that's going to make it even easier

285
00:15:59,370 --> 00:16:02,510
for you to do that. We'll get to that in a moment.

286
00:16:02,510 --> 00:16:04,060
But for now, that's basically your road map.

287
00:16:04,060 --> 00:16:06,770
The things that you've already been doing on top of some APIs

288
00:16:06,770 --> 00:16:11,280
that help you work with Windows equals store app.

289
00:16:11,280 --> 00:16:14,210
And that's really about all you have to know from the high level.

290
00:16:14,210 --> 00:16:17,370
>> We'll dive into actually working with the stuff now.

291
00:16:18,940 --> 00:16:21,950
The things you've probably already seen a bunch of,

292
00:16:21,950 --> 00:16:26,760
with IE9 a little while back we introduced support for a lot of the, at the time,

293
00:16:26,760 --> 00:16:30,340
newer standards in the Web, so a lot of new CSS features,

294
00:16:30,340 --> 00:16:34,380
a lot of new HTML, ECMAScript 5, which is really JavaScript.

295
00:16:34,380 --> 00:16:38,090
So everything for that except for strict mode was in IE9.

296
00:16:38,090 --> 00:16:42,290
Just a ton of stuff with CSS, CSS3, all in there.

297
00:16:42,290 --> 00:16:45,300
And all this stuff carries forward into what we're doing with Windows 8.

298
00:16:45,300 --> 00:16:49,350
You can use these things, and you can use everything that's new in IE10.

299
00:16:49,350 --> 00:16:54,640
With IE10 we introduce support for all of these things as well.

300
00:16:54,640 --> 00:16:59,340
They're all hardware-accelerated, so if you're on a machine that has some kind of GPU,

301
00:16:59,340 --> 00:17:04,190
which is probably pretty much every machine that you could get in the past 8 years,

302
00:17:04,190 --> 00:17:07,609
you're going to be able to have hardware-accelerated output,

303
00:17:07,609 --> 00:17:11,770
visual output with CSS, Canvas, SVG.

304
00:17:11,770 --> 00:17:14,339
All those things will go through hardware acceleration

305
00:17:14,339 --> 00:17:16,060
and be that much faster and more efficient.

306
00:17:16,060 --> 00:17:20,440
The short version of all of this--I'm not going to go through every single thing here--

307
00:17:20,440 --> 00:17:23,200
if you see it on this list, if you can do it in IE10,

308
00:17:23,200 --> 00:17:25,650
if it's a web app that you're running that works in IE10,

309
00:17:25,650 --> 00:17:28,640
it's something you can do as a Windows Store app.

310
00:17:28,640 --> 00:17:33,100
And that's pretty much it. So if it works in IE10, it's going to work as a Windows Store app.

311
00:17:33,100 --> 00:17:36,370
It's on the table as something that you could use.

312
00:17:36,370 --> 00:17:40,510
>> There's a lot here. We don't have until midnight, so I can't review everything here.

313
00:17:40,510 --> 00:17:44,060
But there are some sites that will help you understand what these things can do,

314
00:17:44,060 --> 00:17:45,520
and I'll show you one of them in a second.

315
00:17:45,520 --> 00:17:48,410
I just wanted to point out a few of the key things that you might look at.

316
00:17:48,410 --> 00:17:51,560
Maybe you've already seen some of these in your studies,

317
00:17:51,560 --> 00:17:56,610
but these are really helpful, in particular with Windows Store apps, from the CSS side.

318
00:17:56,610 --> 00:18:02,420
So being able to do transforms and transitions, provide motion with animation--

319
00:18:02,420 --> 00:18:07,010
these are all part of CSS now, and they're all supported by modern browsers,

320
00:18:07,010 --> 00:18:11,370
and IE10 and IE9 have added support over time for all these things.

321
00:18:11,370 --> 00:18:15,220
And so why write it yourself, why go through all the trouble of doing these things by hand

322
00:18:15,220 --> 00:18:19,970
when you could use a simple CSS transform to create a 3D effect for your application?

323
00:18:19,970 --> 00:18:22,740
Great. That's how it works.

324
00:18:22,740 --> 00:18:24,530
I can't make it any more difficult than that.

325
00:18:24,530 --> 00:18:28,330
If you know how to do it in CSS, you know how to do it in the Windows Store app.

326
00:18:28,330 --> 00:18:32,080
>> Going beyond that for layout, things like even the store app,

327
00:18:32,080 --> 00:18:35,350
but going beyond that, looking at maybe a news app that's showing you articles

328
00:18:35,350 --> 00:18:40,160
or recipes or things like that, these other kinds of features in CSS are really useful:

329
00:18:40,160 --> 00:18:45,610
Grid, Flexbox, CSS Regions is more of a fairly new standard as well.

330
00:18:45,610 --> 00:18:51,190
These things are all going to help you lay out content and flow content between sections,

331
00:18:51,190 --> 00:18:55,470
be able to do pagination and hyphenation without you having to write the stuff yourself.

332
00:18:55,470 --> 00:18:57,500
You just say, "Please do the following for me,"

333
00:18:57,500 --> 00:19:00,850
and as the screen real estate is different on different machines

334
00:19:00,850 --> 00:19:03,850
or as you'll see in a moment, as you snap an application

335
00:19:03,850 --> 00:19:07,920
to have smaller amounts of space on the screen, that's no problem for CSS.

336
00:19:07,920 --> 00:19:11,160
It can take advantage of--we'll talk about media queries in a second--

337
00:19:11,160 --> 00:19:15,880
it can take care of things with repositioning your content, flowing content from regions

338
00:19:15,880 --> 00:19:21,240
just with these things that you may have already seen with web technology.

339
00:19:21,240 --> 00:19:25,470
>> On the HTML5 side, there are also a bunch of things

340
00:19:25,470 --> 00:19:28,140
that will be very helpful for you with Windows Store apps.

341
00:19:28,140 --> 00:19:30,980
Again, we won't go through all of these, but they're just here.

342
00:19:30,980 --> 00:19:35,470
So if you need to use it, audio-video, if you want to do validation from forms,

343
00:19:35,470 --> 00:19:40,570
geolocation, all the things you can do in JavaScript with JavaScript 5 or ECMAScript 5,

344
00:19:40,570 --> 00:19:44,070
IndexedDB for local storage--these are all options for you.

345
00:19:44,070 --> 00:19:49,300
If you're looking for an answer, just look to existing technologies with HTML5 and CSS

346
00:19:49,300 --> 00:19:53,880
and you'll find easier answers than having to roll a lot of that stuff yourself.

347
00:19:53,880 --> 00:19:55,510
Let me show you around a little bit here.

348
00:19:55,510 --> 00:19:57,920
I've got a site we can go to. 

349
00:19:57,920 --> 00:20:01,590
Let me quit out of this slide for a second.

350
00:20:01,590 --> 00:20:06,450
>> If we go out to IETestDrive.com,

351
00:20:06,450 --> 00:20:08,960
I won't do much of a demo here.

352
00:20:08,960 --> 00:20:14,360
IETestDrive.com is really showing you a lot of what's new with IE10,

353
00:20:14,360 --> 00:20:16,220
the things that you can do.

354
00:20:16,220 --> 00:20:19,130
I find this is really useful because instead of reading through a bunch of white papers,

355
00:20:19,130 --> 00:20:23,020
look at a few demos, and that's going to help you put it on your own personal radar

356
00:20:23,020 --> 00:20:26,620
about whether a technology makes sense to even do any more research with

357
00:20:26,620 --> 00:20:29,070
so you'll understand, "I see what this is for."

358
00:20:29,070 --> 00:20:32,780
"I understand what Request Animation Frame does for me."

359
00:20:32,780 --> 00:20:36,900
"I understand how I could use Regions or SVG filters."

360
00:20:36,900 --> 00:20:40,190
You see them in action, see them on an example here,

361
00:20:40,190 --> 00:20:44,930
and decide for yourself if that's going to be useful for you in your own projects and beyond

362
00:20:44,930 --> 00:20:47,840
as you continue to work with web technology.

363
00:20:47,840 --> 00:20:49,900
Here I would just encourage you to take a look.

364
00:20:49,900 --> 00:20:52,880
I don't think I'll spend much time actually running these.

365
00:20:52,880 --> 00:20:56,030
We've got enough to show with writing code.

366
00:20:56,030 --> 00:21:01,640
You'll see here things from touch effects to touch-based games in that section,

367
00:21:01,640 --> 00:21:06,050
animation, really fast hardware-accelerated animation there,

368
00:21:06,050 --> 00:21:11,230
some optimizations that you'll see in some of these samples as well,

369
00:21:11,230 --> 00:21:12,770
and there's many, many more.

370
00:21:12,770 --> 00:21:15,330
If you go over here and open up the site map,

371
00:21:15,330 --> 00:21:19,070
there's just a ridiculous number of samples here.

372
00:21:19,070 --> 00:21:20,690
You can see them all here.

373
00:21:20,690 --> 00:21:22,900
If you're looking at something or you heard about something

374
00:21:22,900 --> 00:21:25,850
and you're wondering maybe this would be something cool to use in the app,

375
00:21:25,850 --> 00:21:31,720
try looking here, and there's probably a pretty good demo for it to save yourself some time.

376
00:21:31,720 --> 00:21:35,980
>> Okay? Any questions so far for the folks here?

377
00:21:35,980 --> 00:21:39,620
Okay. We'll carry on here.

378
00:21:39,620 --> 00:21:41,920
Again, just check that out.

379
00:21:41,920 --> 00:21:45,450
They are web standards, so go to any other showcase sites that you know of

380
00:21:45,450 --> 00:21:50,550
and see if those technologies make sense for what you're trying to do.

381
00:21:50,550 --> 00:21:53,190
>> Back to slides.

382
00:21:53,190 --> 00:22:00,290
That said, you are moving from a Web world to really an installed local application world,

383
00:22:00,290 --> 00:22:01,850
so there are some things to point out here.

384
00:22:01,850 --> 00:22:03,690
First of all, there's no web server involved here.

385
00:22:03,690 --> 00:22:06,120
There's no Apache, there's no IIS running here

386
00:22:06,120 --> 00:22:10,170
serving up pages to a remote client, to a remote browser agent.

387
00:22:10,170 --> 00:22:13,000
In this case, really everything is packaged up for you.

388
00:22:13,000 --> 00:22:16,630
You submit that as your application to the store, it gets certified,

389
00:22:16,630 --> 00:22:22,190
it's out in the store, and then people by the thousands will install your game or your app.

390
00:22:22,190 --> 00:22:24,780
But basically, they're pulling it down locally to their machine.

391
00:22:24,780 --> 00:22:29,080
There's no need to go out to the Web anymore unless you have calls that need a remote API,

392
00:22:29,080 --> 00:22:31,790
and that's perfectly normal as well too.

393
00:22:31,790 --> 00:22:35,330
But they're not going to be in that mode where they have to go request response from a server

394
00:22:35,330 --> 00:22:37,910
to get the next page of their content.

395
00:22:37,910 --> 00:22:41,380
So that said, there's a few minor API differences. These are incredibly minor.

396
00:22:41,380 --> 00:22:46,850
They're unlikely to hit you in your normal coding, but they're at least documented.

397
00:22:46,850 --> 00:22:50,030
They're kind of edge cases there.

398
00:22:50,030 --> 00:22:53,370
>> The other thing worth pointing out is the trust differences.

399
00:22:53,370 --> 00:22:58,070
I only mention this because I just want to make sure I said it

400
00:22:58,070 --> 00:23:01,580
so if you run into it later, you'll think, "Chris said something about this,

401
00:23:01,580 --> 00:23:04,890
"so maybe, yeah, okay," and then you go back and you find out what it was.

402
00:23:04,890 --> 00:23:06,480
Contexts matter.

403
00:23:06,480 --> 00:23:11,450
By default we try to protect the user from vectors of attack.

404
00:23:11,450 --> 00:23:13,400
There are certain things that you can do by default

405
00:23:13,400 --> 00:23:16,130
and certain things you need to change context to enable.

406
00:23:16,130 --> 00:23:19,860
As you're using some libraries out there--you've already been working with jQuery,

407
00:23:19,860 --> 00:23:23,650
but if you look for other libraries out there--you might be using some functionality

408
00:23:23,650 --> 00:23:28,000
that kind of goes beyond local usage, does more dynamic interactions

409
00:23:28,000 --> 00:23:30,360
XHR requests, things like that.

410
00:23:30,360 --> 00:23:33,090
Sometimes you might find those will be disabled by default,

411
00:23:33,090 --> 00:23:37,790
and in that case, just do a search, look for local and web context,

412
00:23:37,790 --> 00:23:39,560
and you'll find out how to fix that.

413
00:23:39,560 --> 00:23:42,580
Just make sure you knew about that as you begin to use other frameworks,

414
00:23:42,580 --> 00:23:45,720
which, I should mention, you're perfectly able to do.

415
00:23:45,720 --> 00:23:49,290
So if you find some other framework--we'll talk about this in a second--

416
00:23:49,290 --> 00:23:54,000
for gaming and you want to use that, you want to use some control libraries that are out there

417
00:23:54,000 --> 00:23:57,990
and you don't want to write that stuff yourself--it's a good idea, right?--

418
00:23:57,990 --> 00:23:59,560
you can absolutely use this stuff.

419
00:23:59,560 --> 00:24:03,660
There's nothing holding you back from using any kind of library that's based on JavaScript,

420
00:24:03,660 --> 00:24:05,380
CSS, HTML5.

421
00:24:05,380 --> 00:24:09,740
Again, if it's something you can do in IE10, which is a heck of a lot these days,

422
00:24:09,740 --> 00:24:11,220
you can do it.

423
00:24:11,220 --> 00:24:14,800
Pull it into your app, reference that JavaScript library, and use it in your application,

424
00:24:14,800 --> 00:24:19,880
just keeping in mind you might hit a security context once in a while--not very often.

425
00:24:19,880 --> 00:24:24,150
>> And then the features, we'll go over a few more of those as we go.

426
00:24:24,150 --> 00:24:27,500
The UX you'll kind of get used to as you see more and more applications

427
00:24:27,500 --> 00:24:29,250
from the Windows Store.

428
00:24:29,250 --> 00:24:33,870
You get a feel for how they work and how the design aesthetic tends to work

429
00:24:33,870 --> 00:24:37,720
across different applications and what people will be used to experiencing.

430
00:24:37,720 --> 00:24:39,660
That's really the important part.

431
00:24:39,660 --> 00:24:42,460
Make sure that when they fire up your app they don't need to read a manual,

432
00:24:42,460 --> 00:24:44,300
which they never do, by the way.

433
00:24:44,300 --> 00:24:46,650
They should just be able to start playing with your application

434
00:24:46,650 --> 00:24:49,450
and figuring it out without much difficulty.

435
00:24:49,450 --> 00:24:52,660
By sticking and adhering to a lot of these practices,

436
00:24:52,660 --> 00:24:57,640
you're going to do your users a big favor, making that easier.

437
00:24:57,640 --> 00:25:01,810
>> Okay. One last thing on the API side and then we'll get into actually writing code.

438
00:25:01,810 --> 00:25:05,660
WinJS is that thing I mentioned very briefly with that complex slide

439
00:25:05,660 --> 00:25:08,850
with all those different choices that you have for making applications.

440
00:25:08,850 --> 00:25:10,890
WinJS, you can think of it as a buddy.

441
00:25:10,890 --> 00:25:13,680
It's your friend to help you write stuff more quickly.

442
00:25:13,680 --> 00:25:18,820
It's just JavaScript and CSS. You don't have to use it. You can use it.

443
00:25:18,820 --> 00:25:22,180
If you're going to be calling in to Windows features, you will end up using it,

444
00:25:22,180 --> 00:25:27,210
but if there's things like some design patterns or controls that you really don't want to use,

445
00:25:27,210 --> 00:25:29,090
you want to use something else, it's up to you.

446
00:25:29,090 --> 00:25:32,580
Decide what you want to use and the styles that you want to use.

447
00:25:32,580 --> 00:25:37,250
The features from namespacing and class generation--up to you.

448
00:25:37,250 --> 00:25:41,650
If you prefer one or the other, it's entirely your choice. It's still JavaScript and CSS.

449
00:25:41,650 --> 00:25:43,860
But it's going to help you do a lot of stuff.

450
00:25:43,860 --> 00:25:47,780
For example, here's a subset of what it can do,

451
00:25:47,780 --> 00:25:50,790
things like helping asynchronous programming with promises.

452
00:25:50,790 --> 00:25:54,000
Any of you heard of or worked with Node.js?

453
00:25:54,000 --> 00:25:59,520
It's a common pattern to work with asynchronous programming.

454
00:25:59,520 --> 00:26:02,370
So basically what you're saying is, "Go do something,

455
00:26:02,370 --> 00:26:05,790
"and you're going to give me a promise that you'll return to me when you're done."

456
00:26:05,790 --> 00:26:08,400
That's essentially what's going on.

457
00:26:08,400 --> 00:26:12,400
So you don't freeze up your application while the user is going and picking a file

458
00:26:12,400 --> 00:26:15,810
or something is being streamed down from the Web.

459
00:26:15,810 --> 00:26:17,210
The UI remains responsive.

460
00:26:17,210 --> 00:26:19,410
And you can do that by using asynchronous programming.

461
00:26:19,410 --> 00:26:23,620
It sounds ridiculously complex, but it's really easy because you're using promises

462
00:26:23,620 --> 00:26:27,900
and you just say, "Go do this and when you're done, call back to this method."

463
00:26:27,900 --> 00:26:30,270
That's pretty much it. That's all built in to WinJS.

464
00:26:30,270 --> 00:26:35,120
It's going to make it a lot easier to write really flexible and powerful applications.

465
00:26:35,120 --> 00:26:37,870
>> You can see the rest here, a lot of animations.

466
00:26:37,870 --> 00:26:41,240
Probably one of the more important things on this slide are controls.

467
00:26:41,240 --> 00:26:44,680
I think I have a whole--yeah, I do.

468
00:26:44,680 --> 00:26:48,900
Here's an example of just some of the controls that you can use in your applications.

469
00:26:48,900 --> 00:26:51,060
This is all straight up from WinJS.

470
00:26:51,060 --> 00:26:53,430
You aren't writing these yourselves,

471
00:26:53,430 --> 00:26:55,990
you just say, "Here's how I want to compose my application."

472
00:26:55,990 --> 00:26:59,420
"I'll use a flip view so I can go between different pictures."

473
00:26:59,420 --> 00:27:03,380
I haven't shown you Semantic Zoom. I'll show you that in a second.

474
00:27:03,380 --> 00:27:05,700
ListViews. There's GridViews.

475
00:27:05,700 --> 00:27:08,680
You've already seen a grid as part of the store application,

476
00:27:08,680 --> 00:27:12,170
so being able to use blocks of content and scrolling across that.

477
00:27:12,170 --> 00:27:15,660
Flyout menus you'll see from time to time.

478
00:27:15,660 --> 00:27:19,090
The app bar I showed you with that Fresh Paint application as well,

479
00:27:19,090 --> 00:27:22,190
so you saw how you can customize that by putting buttons on it

480
00:27:22,190 --> 00:27:26,360
and having that hide away when you don't care to use that.

481
00:27:26,360 --> 00:27:28,120
That's really totally up to you to use.

482
00:27:28,120 --> 00:27:30,210
These are all controls that are part of WinJS.

483
00:27:30,210 --> 00:27:33,640
I'll show you how to make these in just a second, but there's more than just this,

484
00:27:33,640 --> 00:27:37,060
and the key thing is use them if you want, save some time.

485
00:27:37,060 --> 00:27:40,830
>> If you have other control libraries that you'd like to use, that's perfectly fine too.

486
00:27:40,830 --> 00:27:46,300
Things like jQuery UI do a lot of this kind of idea as well,

487
00:27:46,300 --> 00:27:51,280
providing more controls that extend what you can do in HTML and JavaScript.

488
00:27:52,690 --> 00:27:55,680
Let's dive in. I've already said that. Use what you'd like.

489
00:27:55,680 --> 00:27:59,680
Just keep in mind that you might run into some context issues.

490
00:27:59,680 --> 00:28:03,380
But you can certainly mix and match whatever kind of libraries you're comfortable with,

491
00:28:03,380 --> 00:28:06,770
you want to learn, you want to use, to save yourself some time.

492
00:28:06,770 --> 00:28:09,850
>> Let's talk about tools just for a second.

493
00:28:09,850 --> 00:28:12,400
You can get what you need to begin working with Windows Store apps.

494
00:28:12,400 --> 00:28:17,360
If I go back out, I have too many things up here.

495
00:28:17,360 --> 00:28:21,770
If you go to this page, which is dev.windows.com,

496
00:28:21,770 --> 00:28:23,300
you can download everything you need.

497
00:28:23,300 --> 00:28:28,170
As students, you have access to more than the general public does,

498
00:28:28,170 --> 00:28:30,670
so you can get higher end versions of Visual Studio.

499
00:28:30,670 --> 00:28:34,090
Edwin mentioned you can already get Windows as well.

500
00:28:34,090 --> 00:28:36,790
But in general, for all developers, you can go to this site

501
00:28:36,790 --> 00:28:40,380
and download everything you need to make an application, and it's all free.

502
00:28:40,380 --> 00:28:42,460
So there is a free version of Visual Studio,

503
00:28:42,460 --> 00:28:44,450
there are some tools that will install alongside of that--

504
00:28:44,450 --> 00:28:47,240
everything you need to create and test your application.

505
00:28:47,240 --> 00:28:50,130
It's only when you're going to publish your application up to the store

506
00:28:50,130 --> 00:28:52,470
that you're going to need a developer account.

507
00:28:52,470 --> 00:28:56,100
This too I believe is free. Is it free for students as well? >>[Guarin] Which one?

508
00:28:56,100 --> 00:28:57,970
The developer account, the actual submission. >>[Guarin] Yes.

509
00:28:57,970 --> 00:28:59,580
That's more good news.

510
00:28:59,580 --> 00:29:00,840
You'll go look at this.

511
00:29:00,840 --> 00:29:03,840
It'll say for an individual by default it's $49.

512
00:29:03,840 --> 00:29:06,140
But don't sign up for that as a student.

513
00:29:06,140 --> 00:29:10,250
We'll get you some information through your programs that you can get an account for free,

514
00:29:10,250 --> 00:29:13,980
and that will let you then submit your applications right up to the store,

515
00:29:13,980 --> 00:29:17,370
as many as you like, and all of that goodness will soon follow.

516
00:29:17,370 --> 00:29:19,710
So that's dev.windows.com.

517
00:29:19,710 --> 00:29:22,170
You can download the tools that you might need from here.

518
00:29:22,170 --> 00:29:25,310
And if you want, you can get a trial version of Windows here,

519
00:29:25,310 --> 00:29:27,160
but again, you won't need to.

520
00:29:27,160 --> 00:29:32,880
>> The other site--let me point this one out for you quickly--is design.windows.com.

521
00:29:32,880 --> 00:29:34,770
That was dev.windows.com.

522
00:29:34,770 --> 00:29:37,770
Design.windows.com, you can guess what it's for.

523
00:29:37,770 --> 00:29:40,380
It's actually a pretty friendly site. There's a lot of good information here.

524
00:29:40,380 --> 00:29:41,770
You can work through it.

525
00:29:41,770 --> 00:29:43,960
It's going to give you some advice on some things

526
00:29:43,960 --> 00:29:46,760
that maybe you haven't thought about before or had to deal with before,

527
00:29:46,760 --> 00:29:50,780
like designing for touch, designing for different form factors,

528
00:29:50,780 --> 00:29:55,310
designing for the capabilities of Windows 8, the things I mentioned before

529
00:29:55,310 --> 00:29:58,740
like searching and sharing, some things that I haven't talked about yet.

530
00:29:58,740 --> 00:30:05,570
They're all listed here, and it's a pretty good set of helpful file pages

531
00:30:05,570 --> 00:30:08,670
that will help you understand how to make a certain kind of application,

532
00:30:08,670 --> 00:30:14,250
how to do interaction, how to deal with the UI and UX of your application.

533
00:30:14,250 --> 00:30:18,630
I would recommend that you take a look at this, especially if you are at some point

534
00:30:18,630 --> 00:30:22,960
hoping to publish an application to the store.

535
00:30:22,960 --> 00:30:25,250
You're going to want to know how to make a good application

536
00:30:25,250 --> 00:30:28,300
because I mentioned before if you don't, there's those reviews again.

537
00:30:28,300 --> 00:30:29,930
People are going to be unhappy.

538
00:30:29,930 --> 00:30:32,960
They won't be able to find things that they expect in the right places.

539
00:30:32,960 --> 00:30:36,590
No one wants that to happen to you.

540
00:30:36,590 --> 00:30:39,220
>> Moving ahead here, let me close that down.

541
00:30:39,220 --> 00:30:43,700
Now that you know where to get things, I will show you how to actually start using stuff.

542
00:30:43,700 --> 00:30:48,520
To begin, I will actually show you here an example of desktop apps on my Start screen.

543
00:30:48,520 --> 00:30:53,600
Here you can see Visual Studio, you can see Blend and other developer tools that I have.

544
00:30:53,600 --> 00:30:55,890
They have a slightly different tile.

545
00:30:55,890 --> 00:30:57,930
That's because they are desktop apps,

546
00:30:57,930 --> 00:31:00,960
and in those cases they're all going to launch back to my desktop

547
00:31:00,960 --> 00:31:05,350
really just as apps that you're used to.

548
00:31:05,350 --> 00:31:06,960
So Windows experience, it's the same thing.

549
00:31:06,960 --> 00:31:12,940
They are not, for example, like Armed! or these things. Let me launch one quickly.

550
00:31:12,940 --> 00:31:14,340
Actually, here's an interesting one.

551
00:31:14,340 --> 00:31:19,210
This was developed by students working in partnership at NERD.

552
00:31:19,210 --> 00:31:23,430
Full screen application, these kinds of experiences here.

553
00:31:23,430 --> 00:31:26,290
Oh, nice cut screens and all kinds of fun stuff.

554
00:31:26,290 --> 00:31:34,330
They developed this. We might as well show the whole thing while we're at it.

555
00:31:37,510 --> 00:31:41,070
In fact, I worked with them a little bit, gave them some advice on things

556
00:31:41,070 --> 00:31:44,160
because they were doing JavaScript for their application.

557
00:31:44,160 --> 00:31:46,460
Please, I'm not taking credit for their work; they did all the work.

558
00:31:46,460 --> 00:31:48,990
I just gave them a little bit of advice here and there,

559
00:31:48,990 --> 00:31:52,400
but they did some great stuff by using a JavaScript front end

560
00:31:52,400 --> 00:31:56,920
and tying in some physics engines and things to make a lot of this work.

561
00:32:00,120 --> 00:32:03,360
Go. Let's see if that works.

562
00:32:03,360 --> 00:32:07,010
Wow, it still worked. All right, good. But you get the idea.

563
00:32:07,010 --> 00:32:09,350
A full screen app, a really good experience.

564
00:32:09,350 --> 00:32:14,250
This is supporting not only my mouse and pen if I have things like that but also touch.

565
00:32:14,250 --> 00:32:19,420
If I had a touch screen, I could just draw onto it and continue working with that.

566
00:32:19,420 --> 00:32:21,440
>> One thing I didn't show, and the reason why I'm bringing this up

567
00:32:21,440 --> 00:32:23,840
is I wanted to have another app to show you what you can do,

568
00:32:23,840 --> 00:32:29,480
you can actually take applications in Windows and drag them to the side of the screen.

569
00:32:29,480 --> 00:32:33,070
This is called snapping an application.

570
00:32:33,070 --> 00:32:37,800
In this case, I've taken Inkarus and I've added it to the side here.

571
00:32:37,800 --> 00:32:42,990
It is now in Snap view, and that allows me to do something else while that application is there.

572
00:32:42,990 --> 00:32:46,210
Most games you'll find will just simply pause.

573
00:32:46,210 --> 00:32:51,090
That's normally a decent thing to do unless your game can somehow scale down

574
00:32:51,090 --> 00:32:54,210
to that small of a resolution, like maybe some kind of board games

575
00:32:54,210 --> 00:32:55,620
or things like that on occasion.

576
00:32:55,620 --> 00:32:58,570
But in general, the easiest thing to do and the most appropriate thing to do for games

577
00:32:58,570 --> 00:33:00,620
is to pause the application.

578
00:33:00,620 --> 00:33:09,440
For applications like news apps, if I launch this one and then I snap it,

579
00:33:09,440 --> 00:33:16,170
you'll see it actually changes significantly in how it's presenting the data to you.

580
00:33:16,170 --> 00:33:20,070
Here it's showing you in really a more vertical pan that information,

581
00:33:20,070 --> 00:33:23,340
but I can still absolutely use the application.

582
00:33:23,340 --> 00:33:25,640
So it's still very useful.

583
00:33:25,640 --> 00:33:29,870
The fact that it's in a smaller view doesn't keep me from using that app. So think about that.

584
00:33:29,870 --> 00:33:32,090
It's something that you need to have your apps do to some degree,

585
00:33:32,090 --> 00:33:35,370
but it's up to you to determine how functional your apps should be

586
00:33:35,370 --> 00:33:39,080
in that kind of a smaller environment.

587
00:33:39,080 --> 00:33:44,780
Let me close that one down and go back into where we were here.

588
00:33:44,780 --> 00:33:48,110
>> Edwin, you added a photo of me already? >>[Guarin] Yeah. >>[Bowen] Look at that.

589
00:33:48,110 --> 00:33:51,510
See that? Edwin added a photo. [laughs]

590
00:33:51,510 --> 00:33:54,410
>> Let's go back over here into Visual Studio. Let me launch this for you.

591
00:33:54,410 --> 00:33:58,170
I could have clicked on the tile on that Start screen.

592
00:33:58,170 --> 00:34:02,630
It brought me back into Desktop mode, and it's launching the desktop app of Visual Studio.

593
00:34:02,630 --> 00:34:06,790
This is the Windows that you already know.

594
00:34:06,790 --> 00:34:09,100
I can go ahead and create a project here.

595
00:34:09,100 --> 00:34:11,159
We'll focus again on JavaScript, HTML.

596
00:34:11,159 --> 00:34:16,510
I'm going to go out and select up here under JavaScript, Windows Store.

597
00:34:16,510 --> 00:34:19,010
There's a number of templates that you can use.

598
00:34:19,010 --> 00:34:21,710
For productivity, I would recommend you take a look at some of these other ones here

599
00:34:21,710 --> 00:34:23,489
like the Grid and the Split.

600
00:34:23,489 --> 00:34:25,270
They're really useful if you're making an application

601
00:34:25,270 --> 00:34:28,960
that's going to have that kind of design and navigation. You'll see these a lot.

602
00:34:28,960 --> 00:34:33,070
The one I just showed you was actually an instance of the Grid application.

603
00:34:33,070 --> 00:34:36,880
So if you think you're going to be making a news app or an RSS reader

604
00:34:36,880 --> 00:34:43,120
or something like that that deals with multiple entries for which you'd like to show the detail,

605
00:34:43,120 --> 00:34:45,989
think about using one of these templates to get started quickly

606
00:34:45,989 --> 00:34:48,380
and customizing it from there.

607
00:34:48,380 --> 00:34:50,120
But just so I can show you all the moving parts here

608
00:34:50,120 --> 00:34:56,120
I'm going to create the blank app, and then we'll go a little bit deeper into the details.

609
00:34:56,120 --> 00:34:58,690
I'm just making that blank application here.

610
00:34:58,690 --> 00:35:01,270
It's going to create the whole project for me.

611
00:35:01,270 --> 00:35:03,290
I'll open up the things that I want to show you by default.

612
00:35:03,290 --> 00:35:08,550
Let me just zoom in a little bit to show you what's created for us here.

613
00:35:08,550 --> 00:35:11,350
The things that you're going to look at first are all named default.

614
00:35:11,350 --> 00:35:15,970
So you're going to look for default.html, default.js, and default.css.

615
00:35:15,970 --> 00:35:19,590
The other thing to point out is that we already have a reference to what I mentioned before.

616
00:35:19,590 --> 00:35:24,530
This is WinJS. No one actually calls it this long name here.

617
00:35:24,530 --> 00:35:27,710
It is WinJS, the Windows Library for JavaScript.

618
00:35:27,710 --> 00:35:29,530
If you open it up, you can see it's all in here.

619
00:35:29,530 --> 00:35:31,820
There's different CSS files, there's JavaScript.

620
00:35:31,820 --> 00:35:33,520
It's there to help you out.

621
00:35:33,520 --> 00:35:37,190
It's really there to provide controls and styles and stuff that you can just use automatically.

622
00:35:37,190 --> 00:35:41,240
But again, if there's things you want to use instead in terms of styling and other controls,

623
00:35:41,240 --> 00:35:45,600
it's entirely up to you. I will show you how to use a couple of those things right now.

624
00:35:45,600 --> 00:35:51,020
>> Back over onto our left-hand side, let me show you the default HTML page.

625
00:35:51,020 --> 00:35:54,490
You've already seen the WinJS stuff, and that's really all that's going on there

626
00:35:54,490 --> 00:35:59,930
with those middle lines of markup, just bringing in the CSS by default

627
00:35:59,930 --> 00:36:02,370
and bringing in a couple of JavaScript files from WinJS.

628
00:36:02,370 --> 00:36:06,400
You don't need to be master of what's going on inside those files.

629
00:36:06,400 --> 00:36:10,110
It's pretty interesting to take a look at them to kind of review what's going on in there

630
00:36:10,110 --> 00:36:14,410
because there's pretty interesting intermediate and advanced techniques going on in there,

631
00:36:14,410 --> 00:36:18,100
but the nice thing is as developers, you can just take advantage of them, just use them

632
00:36:18,100 --> 00:36:19,510
and not really have to worry about it.

633
00:36:19,510 --> 00:36:21,960
You can still drive a car without having to know how it works, right?

634
00:36:21,960 --> 00:36:24,180
So that's the kind of thing that's going on here.

635
00:36:24,180 --> 00:36:26,930
There's controls and styles and stuff that you can just go ahead and use

636
00:36:26,930 --> 00:36:31,460
and code that you can use in a second without having to know what's in there.

637
00:36:31,460 --> 00:36:33,200
Here are your own files.

638
00:36:33,200 --> 00:36:35,860
These are your places that you can modify your own CSS

639
00:36:35,860 --> 00:36:38,400
and your own JavaScript to get things rolling.

640
00:36:38,400 --> 00:36:43,300
You'll be adding certainly other JavaScript files and perhaps other CSS files

641
00:36:43,300 --> 00:36:47,480
as your project grows, but this is really just a starting point.

642
00:36:47,480 --> 00:36:52,570
Here is the Hello, world equivalent of HTML, so we're back in the body tag.

643
00:36:52,570 --> 00:36:55,990
At the top, by the way, it's the HTML5 doctype,

644
00:36:55,990 --> 00:37:00,060
so you'll recognize that from what you've been working on.

645
00:37:00,060 --> 00:37:04,600
There's full IntelliSense in here as well, so if you do things like type in a video tag

646
00:37:04,600 --> 00:37:07,340
and expand that out, you've probably learned about the fact

647
00:37:07,340 --> 00:37:12,760
that you need to do fallback encoding for video tags in HTML5--or maybe you have--

648
00:37:12,760 --> 00:37:17,490
to ensure that different browsers have support for your video.

649
00:37:17,490 --> 00:37:22,610
We have things like this across HTML, across JavaScript, across CSS.

650
00:37:22,610 --> 00:37:26,020
That's built in, and I'll show you CSS in a second.

651
00:37:26,020 --> 00:37:29,430
Here you can go ahead and start modifying code, the markup.

652
00:37:29,430 --> 00:37:33,700
In fact, before I change anything, I'm going to run this and show you what you get.

653
00:37:33,700 --> 00:37:35,700
You're going to get a splash screen which you can customize

654
00:37:35,700 --> 00:37:40,940
and then you get the Hello, world experience here. It's fantastic, right?

655
00:37:40,940 --> 00:37:42,640
Go ahead and ship that, right?

656
00:37:42,640 --> 00:37:45,970
Content goes here. That's the basic thing.

657
00:37:45,970 --> 00:37:48,740
It can only get better from there.

658
00:37:48,740 --> 00:37:51,300
We'll go ahead and add in some stuff.

659
00:37:51,300 --> 00:37:53,470
I've got a little bit of markup I'm going to copy in here

660
00:37:53,470 --> 00:37:55,740
just so you don't have to watch me typing.

661
00:37:55,740 --> 00:38:02,620
Let me go bring up the toolbox here, and I'll pin this because I'll be doing this a few times.

662
00:38:02,620 --> 00:38:05,650
Toolbox, if you haven't seen Visual Studio, is where you're going to find a bunch of controls.

663
00:38:05,650 --> 00:38:09,050
You can also put code snippets into it that you can reuse.

664
00:38:09,050 --> 00:38:16,360
Here I'll just pop in some other HTML, nothing terribly advanced at all here.

665
00:38:16,360 --> 00:38:20,170
It's just basic HTML saying I have an input where I can type,

666
00:38:20,170 --> 00:38:23,860
I have a button where I can submit it, and then I have a div that's essentially a placeholder

667
00:38:23,860 --> 00:38:27,360
that I can use to output the "Hello, you type this."

668
00:38:27,360 --> 00:38:32,780
It's the intro to HTML example.

669
00:38:32,780 --> 00:38:39,340
If I run this, we automatically get the HTML, but we also automatically get styling.

670
00:38:39,340 --> 00:38:42,270
This is one of the important things from WinJS.

671
00:38:42,270 --> 00:38:47,250
It's going to give you by default some look and feel that is really consistent

672
00:38:47,250 --> 00:38:50,520
with the rest of what Windows 8 is doing.

673
00:38:50,520 --> 00:38:52,110
Here you see things like the button.

674
00:38:52,110 --> 00:38:55,890
The button by default in HTML doesn't look like that, but it does here

675
00:38:55,890 --> 00:39:00,880
because it's getting that CSS right from that CSS file in WinJS.

676
00:39:00,880 --> 00:39:04,680
If you want to use something else, if you want to change that, totally fine,

677
00:39:04,680 --> 00:39:06,790
go ahead and do what you'd like. But that's the default.

678
00:39:06,790 --> 00:39:09,610
It's going to be more familiar to users.

679
00:39:09,610 --> 00:39:13,510
And of course this won't do anything because I didn't actually wire up any kind of code

680
00:39:13,510 --> 00:39:16,630
to respond to that. It was just the HTML.

681
00:39:16,630 --> 00:39:20,630
So I can get rid of that, and we'll come back into our application.

682
00:39:20,630 --> 00:39:25,310
>> Let me switch over to our default.js.

683
00:39:25,310 --> 00:39:29,030
This looks pretty complex, but it's just doing a few things for you.

684
00:39:29,030 --> 00:39:33,120
It's boilerplate. It's going to be the same in all your projects.

685
00:39:33,120 --> 00:39:36,620
The only thing this is doing is just kind of asking, "How did I get here?"

686
00:39:36,620 --> 00:39:39,090
and saying, "Are you launching this app for the first time?"

687
00:39:39,090 --> 00:39:42,640
"Are you resuming the app from having it being suspended?"

688
00:39:42,640 --> 00:39:44,510
A couple of things like that.

689
00:39:44,510 --> 00:39:50,300
Really, our focus on this file here is right about here.

690
00:39:50,300 --> 00:39:54,490
At this point, this one line of code is pretty important.

691
00:39:54,490 --> 00:39:57,070
It's actually going to go and look through all of your markup,

692
00:39:57,070 --> 00:40:01,640
and it's going to find things that you've asked to have turned into controls,

693
00:40:01,640 --> 00:40:07,220
deeper controls like a rating control, like a grid view, like the flyout

694
00:40:07,220 --> 00:40:09,570
and those other things that I showed you on that slide before.

695
00:40:09,570 --> 00:40:12,550
They're not native HTML controls.

696
00:40:12,550 --> 00:40:17,860
You just don't say flyout as an element and have it know what to do.

697
00:40:17,860 --> 00:40:22,120
What we actually do is the same thing that happens in other kinds of control frameworks.

698
00:40:22,120 --> 00:40:26,200
jQuery UI does the same kind of general approach.

699
00:40:26,200 --> 00:40:30,800
You use markings in your HTML, and then some JavaScript comes through later and says,

700
00:40:30,800 --> 00:40:35,900
"Oh, I know what that is. That's asking for this to be turned into this stuff,"

701
00:40:35,900 --> 00:40:39,850
which is other more expressive HTML to make like a ratings control,

702
00:40:39,850 --> 00:40:41,790
which is what I'll show you right now.

703
00:40:41,790 --> 00:40:46,140
This line of code is a promise that's saying, "When this promise is fulfilled,

704
00:40:46,140 --> 00:40:49,090
"everything that you've asked for has then been created."

705
00:40:49,090 --> 00:40:52,780
And that's it. It looks a little complex, but it's really the same in every project.

706
00:40:52,780 --> 00:40:56,690
Down here is where you can start adding in whatever else you want to have happen,

707
00:40:56,690 --> 00:40:58,280
so we'll come back to that in a second.

708
00:40:58,280 --> 00:41:01,480
>> First of all, I need a bit of code that can respond to the fact

709
00:41:01,480 --> 00:41:03,320
that someone has clicked on the button.

710
00:41:03,320 --> 00:41:06,330
I'm going to go ahead and put that in down here.

711
00:41:06,330 --> 00:41:09,620
Again, I'm not going to do any typing in front of you here.

712
00:41:09,620 --> 00:41:12,560
Very basic JavaScript just saying when this is called

713
00:41:12,560 --> 00:41:15,270
we're going to be provided some details about how we got here

714
00:41:15,270 --> 00:41:17,630
and then we're going to do a few basic things.

715
00:41:17,630 --> 00:41:21,300
Go find the thing in my HTML page that is named nameInput,

716
00:41:21,300 --> 00:41:28,490
grab it, take its value, slap "Hello" on the front of it, and stick that resulting string

717
00:41:28,490 --> 00:41:31,960
into that div tag that we had before that really didn't have anything before.

718
00:41:31,960 --> 00:41:37,220
Now we're going to find that tag and make its inner content equal to that string.

719
00:41:37,220 --> 00:41:38,880
Very simple JavaScript.

720
00:41:38,880 --> 00:41:42,240
Hopefully you're recognizing that there's really nothing unusual going on here.

721
00:41:42,240 --> 00:41:45,360
It's just straight up HTML and JS here.

722
00:41:45,360 --> 00:41:48,220
If I run this now, it's still not going to do any work because I haven't wired it up

723
00:41:48,220 --> 00:41:50,030
to receive the event.

724
00:41:50,030 --> 00:41:55,710
To do that, I'll do that right here, again returning to my toolbox,

725
00:41:55,710 --> 00:41:58,730
popping it in here.

726
00:41:58,730 --> 00:42:03,060
I expect you've seen all this kind of stuff before, so I won't over-explain it.

727
00:42:03,060 --> 00:42:05,060
Now we're going to go get the helloButton.

728
00:42:05,060 --> 00:42:07,730
We're going to say, "Button, congratulations."

729
00:42:07,730 --> 00:42:10,130
"Here is an event that you now are responding to."

730
00:42:10,130 --> 00:42:13,420
"When someone clicks on you, call this function, the buttonClickHandler."

731
00:42:13,420 --> 00:42:17,070
And that's that function we just added right down at the bottom there. That's it.

732
00:42:17,070 --> 00:42:20,980
So now we've got an amazingly functional application.

733
00:42:20,980 --> 00:42:24,720
I think you'll be really impressed by this.

734
00:42:24,720 --> 00:42:32,320
Chris. Wait for it. Wow. Okay. That's amazing. [laughs]

735
00:42:32,320 --> 00:42:36,570
But there's more. Don't buy it yet. Wait.

736
00:42:36,570 --> 00:42:39,610
>> Let me show you a little bit more here and get out of full screen.

737
00:42:39,610 --> 00:42:42,690
We're going to walk before we run.

738
00:42:42,690 --> 00:42:45,530
Let me go in and actually show you a little bit with CSS.

739
00:42:45,530 --> 00:42:49,480
Just by default, if we look back at the page here,

740
00:42:49,480 --> 00:42:53,570
whenever we pulled in these things from WinJS and we got the ui-dark,

741
00:42:53,570 --> 00:42:58,550
in fact, you can change it to the default for using light application.

742
00:42:58,550 --> 00:43:03,450
ui-dark is good for graphic applications like using a lot of pictures,

743
00:43:03,450 --> 00:43:05,740
you're showing a lot of visual content.

744
00:43:05,740 --> 00:43:12,560
If you're showing a lot of textual content, the ui-light is generally a good choice.

745
00:43:12,560 --> 00:43:15,160
You don't have to choose it, but I've switched to it

746
00:43:15,160 --> 00:43:17,690
and now you're seeing the same markup, same everything,

747
00:43:17,690 --> 00:43:20,320
it's just using basically an inverted scheme here

748
00:43:20,320 --> 00:43:24,770
where everything is making it black text on white.

749
00:43:24,770 --> 00:43:26,460
That's all well and good.

750
00:43:26,460 --> 00:43:30,680
Let me get out here, and let's actually do a little bit more with the CSS.

751
00:43:30,680 --> 00:43:34,830
I'll put it back on dark because I think it's probably easier to see on the screen

752
00:43:34,830 --> 00:43:36,970
when I start doing these things.

753
00:43:36,970 --> 00:43:40,150
I'm going to replace the body one more time.

754
00:43:40,150 --> 00:43:44,040
I'll go here. Let me nuke this.

755
00:43:44,040 --> 00:43:48,690
Let's bring in the body with classes.

756
00:43:48,690 --> 00:43:53,000
I believe you've done basic selectors with CSS and things like that already,

757
00:43:53,000 --> 00:43:55,380
so you probably know what's going on here.

758
00:43:55,380 --> 00:43:59,250
Just assigning some classes to our header, and we're creating a new div

759
00:43:59,250 --> 00:44:04,430
to wrap the rest of that stuff that we can now use to style all together.

760
00:44:04,430 --> 00:44:07,760
So what I can do now is go over to our default CSS.

761
00:44:07,760 --> 00:44:11,900
Have you looked at media queries yet? Have you talked about that at all?

762
00:44:11,900 --> 00:44:17,220
Media queries are part of this emergent trend--

763
00:44:17,220 --> 00:44:19,660
or it's an established trend now actually on the Web--

764
00:44:19,660 --> 00:44:22,760
for responsive design or adaptive,

765
00:44:22,760 --> 00:44:28,480
and the idea is that your applications can really adjust themselves appropriately

766
00:44:28,480 --> 00:44:31,910
based on what the device that they're being shown on can do.

767
00:44:31,910 --> 00:44:35,040
So if you're on a mobile device, obviously you're not going to have as much screen real estate

768
00:44:35,040 --> 00:44:41,520
as you will on a big 30-inch monitor sitting with a desktop, a big PC like that.

769
00:44:41,520 --> 00:44:46,710
So the old answer to that would be to have 5, 6 different versions of the same page

770
00:44:46,710 --> 00:44:51,350
and you'd open up the version that was tuned for that certain size screen.

771
00:44:51,350 --> 00:44:55,420
Not great. It's very, very repetitive and there's a ton of maintenance to do that.

772
00:44:55,420 --> 00:44:58,120
Now we have something called CSS media queries,

773
00:44:58,120 --> 00:45:02,530
and we can use this to automatically detect when there's certain sizes

774
00:45:02,530 --> 00:45:07,030
or certain uses of your content being performed.

775
00:45:07,030 --> 00:45:09,580
So you can respond to that and you can say, "Okay, in this case

776
00:45:09,580 --> 00:45:12,580
"you probably don't even need me to tell you what's going on here."

777
00:45:12,580 --> 00:45:18,020
This is just saying if this application is snapped, like I showed you before--

778
00:45:18,020 --> 00:45:20,830
grabbing it and putting it to the side of the screen--

779
00:45:20,830 --> 00:45:23,910
then let's do the following styling.

780
00:45:23,910 --> 00:45:25,850
Styling is not just about colors and stuff like that.

781
00:45:25,850 --> 00:45:29,860
It's also about sizing and margins and paddings and orientations of content

782
00:45:29,860 --> 00:45:34,040
or even disabling or enabling entire parts of your page

783
00:45:34,040 --> 00:45:36,420
and, in this case, your app or your game as well.

784
00:45:36,420 --> 00:45:39,210
So here you can do as simple as you want.

785
00:45:39,210 --> 00:45:46,720
This wouldn't be useful in your apps, but it's demo time,

786
00:45:46,720 --> 00:45:50,530
so I'm going to go ahead and just add in basic body selector and say,

787
00:45:50,530 --> 00:45:58,360
"When I'm snapped, let's go ahead and do background-color and let's choose something."

788
00:45:58,360 --> 00:46:00,400
You've got IntelliSense here. This is actually really cool.

789
00:46:00,400 --> 00:46:05,720
In 2012 we've added a lot of things for CSS support and JavaScript and HTML.

790
00:46:05,720 --> 00:46:08,690
You've of course got drop-down IntelliSense too, but that's not the cool thing.

791
00:46:08,690 --> 00:46:11,730
The cool thing is you've got visual selectors for a lot of things as well.

792
00:46:11,730 --> 00:46:14,120
So you could go through and just choose a color,

793
00:46:14,120 --> 00:46:17,580
or you can go out and be even more specific and you can choose--

794
00:46:17,580 --> 00:46:22,330
this is going to be terrible. I'll actually pick a decent color here.

795
00:46:22,330 --> 00:46:26,500
Watch the markup too, by the way. That's your RGB standard format there.

796
00:46:26,500 --> 00:46:30,780
But if I switch the opacity, it's going to switch over to an alpha channel selector here.

797
00:46:30,780 --> 00:46:36,910
So you can see that, the color with essentially the percent transparency that you have for that

798
00:46:36,910 --> 00:46:38,860
all baked right in there.

799
00:46:38,860 --> 00:46:42,530
I'm going to keep it as 100% and then when I'm done with that, all is well and good.

800
00:46:42,530 --> 00:46:46,160
Now if I run the app and we take the app and we snap it,

801
00:46:46,160 --> 00:46:49,000
that background color is being adjusted automatically

802
00:46:49,000 --> 00:46:53,410
just because we have some CSS that says, "Go do that."

803
00:46:53,410 --> 00:46:55,580
You also can write JavaScript too that will do the same thing

804
00:46:55,580 --> 00:47:03,010
or that you could use to actually pause a game, do things like that.

805
00:47:03,010 --> 00:47:04,310
That's probably when you'd use JavaScript.

806
00:47:04,310 --> 00:47:06,610
You would turn off the game loop at that point.

807
00:47:06,610 --> 00:47:09,970
You would need some JavaScript because that wouldn't be something you would CSS for.

808
00:47:09,970 --> 00:47:11,760
But keep in mind it's just an event.

809
00:47:11,760 --> 00:47:14,860
You could say, "When my application is resized,

810
00:47:14,860 --> 00:47:17,780
"let's see if we're snapped." And that's it.

811
00:47:17,780 --> 00:47:24,440
>> Okay? I've been talking a lot. Are there questions so far on where we are? Yeah.

812
00:47:24,440 --> 00:47:29,310
[student] Is there a tutorial for anyone to get more information? >>Yeah.

813
00:47:29,310 --> 00:47:33,510
The question is, is there a tutorial for this? I'll just extend it to everything.

814
00:47:33,510 --> 00:47:37,490
There are a few things that you can go to. Let's actually get out of here.

815
00:47:37,490 --> 00:47:40,150
Let me go back out here.

816
00:47:40,150 --> 00:47:45,180
One thing to point out is Visual Studio itself has tutorials built in.

817
00:47:45,180 --> 00:47:47,650
Let me get rid of this.

818
00:47:47,650 --> 00:47:51,520
If you go and create a new project, do File, New Project,

819
00:47:51,520 --> 00:47:56,750
and look on the left-hand side, there is an Online node in this selector.

820
00:47:56,750 --> 00:47:59,790
It's going to take a little bit. I'm on my MyFi here.

821
00:47:59,790 --> 00:48:02,300
But it's going to come up and it's going to give me a chance to find templates

822
00:48:02,300 --> 00:48:05,190
but also, more importantly, samples as well.

823
00:48:05,190 --> 00:48:06,750
So I can click on JavaScript.

824
00:48:06,750 --> 00:48:10,050
It's going to find samples for me. My resolution is way high here.

825
00:48:10,050 --> 00:48:15,070
Normally, you would see a list of a lot of different things here.

826
00:48:15,070 --> 00:48:18,280
If there's something you want to try, pick the language,

827
00:48:18,280 --> 00:48:20,970
JavaScript here, and say, "I don't know how to do geolocation."

828
00:48:20,970 --> 00:48:22,220
"I don't know how to open a file."

829
00:48:22,220 --> 00:48:25,840
"I don't know how to take advantage of the webcam

830
00:48:25,840 --> 00:48:28,290
"or optimize for touch or things like that."

831
00:48:28,290 --> 00:48:33,190
There are samples for everything: sharing, searching, app bars,

832
00:48:33,190 --> 00:48:37,520
making remote calls to a service, JSON encoding.

833
00:48:37,520 --> 00:48:40,390
All those kinds of things there are samples for here,

834
00:48:40,390 --> 00:48:44,560
and they're not huge samples that are going to take you all night to pull apart

835
00:48:44,560 --> 00:48:46,820
just to find that one thing you wanted to learn.

836
00:48:46,820 --> 00:48:49,870
They're really good. They're small, right to the point kinds of samples.

837
00:48:49,870 --> 00:48:52,330
I've learned a ton by going through these myself,

838
00:48:52,330 --> 00:48:55,260
and so I recommend that a lot as one thing.

839
00:48:55,260 --> 00:49:01,750
>> Another thing to point out too is of course I showed you dev.windows.com,

840
00:49:01,750 --> 00:49:07,490
so if you go back to that, you'll see at the bottom there's also the samples here.

841
00:49:07,490 --> 00:49:12,560
So you can download all of them at once, but there's also a lot of other resources here too

842
00:49:12,560 --> 00:49:14,400
that can help you get up to speed.

843
00:49:14,400 --> 00:49:17,870
>> One other thing, and I would really recommend that you try this,

844
00:49:17,870 --> 00:49:24,510
I've got it on my blog, but I'll just go right to it.

845
00:49:24,510 --> 00:49:28,220
I'll show you. My blog has resources and things like that.

846
00:49:28,220 --> 00:49:35,300
One of the things to point out is right here, this thing: Your Idea. Your App. 30 Days.

847
00:49:35,300 --> 00:49:40,960
If you click on this, it's going to bring you to a really helpful site.

848
00:49:40,960 --> 00:49:44,650
This is much more helpful than you might expect.

849
00:49:44,650 --> 00:49:49,040
This is going to be 30 days of content that you can basically get tips and tricks

850
00:49:49,040 --> 00:49:51,990
throughout that process as you're creating an app.

851
00:49:51,990 --> 00:49:55,980
And as you may not expect, you can actually get it for games too

852
00:49:55,980 --> 00:49:57,840
and for phone apps, things like that.

853
00:49:57,840 --> 00:50:01,000
So basically sign up for it, and they're going to be sending you tips and tricks on,

854
00:50:01,000 --> 00:50:03,010
"Have you thought about doing this? Do you support Snap?"

855
00:50:03,010 --> 00:50:04,900
"Here are some guidelines on how to do that well."

856
00:50:04,900 --> 00:50:07,440
"Have you thought about submitting to the store?"

857
00:50:07,440 --> 00:50:09,370
"Have you thought about how you're going to sell your application?"

858
00:50:09,370 --> 00:50:11,490
It's going to walk through all these various things.

859
00:50:11,490 --> 00:50:13,380
And actually, if you're on the gaming track, at some point

860
00:50:13,380 --> 00:50:17,010
you'll start recognizing the person talking to you

861
00:50:17,010 --> 00:50:22,850
because I actually had to go to Redmint to do those and recorded 2 videos there.

862
00:50:22,850 --> 00:50:25,240
But that's all part of the gaming track,

863
00:50:25,240 --> 00:50:27,650
and there's also a full track for general app development.

864
00:50:27,650 --> 00:50:29,380
That's called Generation App.

865
00:50:29,380 --> 00:50:33,460
I would definitely recommend that to you as well in addition to the samples.

866
00:50:33,460 --> 00:50:38,110
>> There's a lot of videos on a site called Channel 9 as well.

867
00:50:38,110 --> 00:50:42,790
That's probably the last thing I'll recommend as well before we move on here.

868
00:50:42,790 --> 00:50:45,280
Channel9.msdn.com.

869
00:50:45,280 --> 00:50:48,880
This is great because you're not going to be reading through tons of white papers.

870
00:50:48,880 --> 00:50:53,880
It's basically a lot of videos, screencasts and things that are right to the point.

871
00:50:53,880 --> 00:50:57,940
I shouldn't say it's always right to the point. It depends who is doing the talking.

872
00:50:57,940 --> 00:51:02,290
But generally, there's some really to-the-point videos here

873
00:51:02,290 --> 00:51:06,230
that will show you some particular thing you might want to learn or see demoed.

874
00:51:06,230 --> 00:51:11,110
There's also all of our content from our conference that happened a couple weeks ago

875
00:51:11,110 --> 00:51:14,380
called Build, and you'll see that right there.

876
00:51:14,380 --> 00:51:18,450
There's Core technologies for Windows 8 games. There you go.

877
00:51:18,450 --> 00:51:23,150
I was there, actually. You can't see me. I was over here.

878
00:51:23,150 --> 00:51:27,560
But anyhow, that aside, I would recommend that you take a look at those videos.

879
00:51:27,560 --> 00:51:29,330
They're pretty helpful.

880
00:51:29,330 --> 00:51:32,620
If you are stuck on something or you just want to see what something could do, fire those up.

881
00:51:32,620 --> 00:51:36,890
>> [Guarin] Windows Mail just sent me an email with a link to content

882
00:51:36,890 --> 00:51:42,140
for students to download with sample code and stuff like that. >>[Bowen] Great.

883
00:51:42,140 --> 00:51:45,510
Awesome. Thank you, Edwin.

884
00:51:45,510 --> 00:51:48,320
>> Good. >>[student] I have a question. >>[Bowen] Oh. Yeah, please.

885
00:51:48,320 --> 00:51:55,030
[inaudible student question] >>[Bowen] Oh, I'm glad you asked that. Yes.

886
00:51:55,030 --> 00:51:58,940
The question was, is there a visual interface for me to create things?

887
00:51:58,940 --> 00:52:01,630
Edwin will reward you handsomely for that question.

888
00:52:01,630 --> 00:52:04,310
There is a way to do this.

889
00:52:04,310 --> 00:52:09,040
Should we do it now? Let's do it now.

890
00:52:09,040 --> 00:52:11,780
I'm going to go to it right now.

891
00:52:11,780 --> 00:52:14,070
Actually, let me add in one more thing to this demo,

892
00:52:14,070 --> 00:52:16,710
and then I'll show you the actual answer.

893
00:52:16,710 --> 00:52:21,340
I was going to add in a little more CSS here.

894
00:52:21,340 --> 00:52:23,980
I was a little off on tangents here.

895
00:52:23,980 --> 00:52:26,770
Let me put in some CSS here to take advantage

896
00:52:26,770 --> 00:52:29,980
of the classes that we added a little while ago,

897
00:52:29,980 --> 00:52:33,930
to the header, to the mainContent div, and then to the greetingOutput.

898
00:52:33,930 --> 00:52:37,920
If I do that and run it, you can see now we've got a little bit different padding and margins,

899
00:52:37,920 --> 00:52:40,310
so we have actually some offsets here.

900
00:52:40,310 --> 00:52:44,630
These are more toward what you're going to expect of a final polished application.

901
00:52:44,630 --> 00:52:47,770
But I'm just showing this to you because it's straight up CSS.

902
00:52:47,770 --> 00:52:51,910
So the things that you already know you can use here to adjust the content as you wish.

903
00:52:51,910 --> 00:52:55,100
You've already seen how to make the background change out that way.

904
00:52:55,100 --> 00:53:02,980
>> If I go back out to our HTML, I'm going to add in one more set of markup,

905
00:53:02,980 --> 00:53:06,140
and this is actually going to be a control from WinJS.

906
00:53:06,140 --> 00:53:09,840
I'm going to go and grab this, a label. Let me make sure I'm doing it in the right place.

907
00:53:09,840 --> 00:53:11,740
Probably good enough.

908
00:53:11,740 --> 00:53:15,590
Here I've just added--and we'll go full screen so you can see the whole thing--

909
00:53:15,590 --> 00:53:18,520
I've added a label for the next div.

910
00:53:18,520 --> 00:53:20,890
The div is called ratingControlDiv.

911
00:53:20,890 --> 00:53:23,090
By itself it will do nothing.

912
00:53:23,090 --> 00:53:28,570
If you open this in a browser, you'd be looking at blank, the div itself.

913
00:53:28,570 --> 00:53:31,820
But because of that mysterious line of code that I showed you before,

914
00:53:31,820 --> 00:53:35,650
the process all, it's going to look for something that looks like this--

915
00:53:35,650 --> 00:53:40,380
data-win-control--and it's going to find whatever is in that parameter.

916
00:53:40,380 --> 00:53:44,560
It's going to make an instance of whatever that is it's pointing to.

917
00:53:44,560 --> 00:53:48,850
In this case, it's a rating control, so I'm saying, "Please go and replace this thing

918
00:53:48,850 --> 00:53:51,400
"with whatever you need to do to make a rating control."

919
00:53:51,400 --> 00:53:56,610
It could be a flip control, it could be the progress ring or whatever control you want to use.

920
00:53:56,610 --> 00:53:59,390
They're all going to work essentially the same way.

921
00:53:59,390 --> 00:54:02,920
You're using standard HTML5 markup to indicate what you want,

922
00:54:02,920 --> 00:54:07,670
and then you're going to get a control at the end of this. Let me run this.

923
00:54:07,670 --> 00:54:12,270
I just copied that in, and now that markup becomes this,

924
00:54:12,270 --> 00:54:15,280
which is actually quite a number of HTML elements.

925
00:54:15,280 --> 00:54:18,440
These are all individual images, and there's divs around them with selectors.

926
00:54:18,440 --> 00:54:22,610
Hopefully you can see that. It's a little subtle.

927
00:54:22,610 --> 00:54:27,380
I can hover over the different items, and it's going to allow me to see the rating here.

928
00:54:27,380 --> 00:54:31,560
I can click on it, and it remembers the rating but that's about it.

929
00:54:31,560 --> 00:54:33,100
It's not really doing anything with the rating.

930
00:54:33,100 --> 00:54:35,230
>> The one last thing I want to show you on this

931
00:54:35,230 --> 00:54:37,820
before we switch into a more visual design experience

932
00:54:37,820 --> 00:54:42,680
is a little bit of code that I can use to respond to these WinJS controls.

933
00:54:42,680 --> 00:54:47,540
Let me get out of there, back out of full screen,

934
00:54:47,540 --> 00:54:52,690
and switch over to JS here for second.

935
00:54:52,690 --> 00:54:57,450
I can do this right here. I think I'll replace this whole thing.

936
00:54:57,450 --> 00:55:03,080
Actually, I think it will replace all of it, but we'll find out together.

937
00:55:03,080 --> 00:55:07,350
I'll put this in here. Yeah. I'm going to delete this too.

938
00:55:07,350 --> 00:55:11,790
What did I add? It looks like a lot. It's not a lot.

939
00:55:11,790 --> 00:55:14,920
I just extended that line of code that I already talked about before,

940
00:55:14,920 --> 00:55:18,590
and I'm saying, "When everything is done, when all my controls have been made,

941
00:55:18,590 --> 00:55:23,660
"then do this." So then run this function called completed.

942
00:55:23,660 --> 00:55:27,080
In this case, this is stuff you can figure out.

943
00:55:27,080 --> 00:55:29,040
Go find that div control.

944
00:55:29,040 --> 00:55:30,790
Actually, there's one thing I should point out.

945
00:55:30,790 --> 00:55:35,630
That next line is actually saying, "I've got that ratingControlDiv."

946
00:55:35,630 --> 00:55:39,770
"I want to talk to it as if it were a real control, a WinJS control."

947
00:55:39,770 --> 00:55:42,020
So basically, you're asking for that from it.

948
00:55:42,020 --> 00:55:44,600
You're saying, "I want to talk to you as a control."

949
00:55:44,600 --> 00:55:47,810
And then you can start saying things like, "We're going to add a listener for you

950
00:55:47,810 --> 00:55:51,430
"so when you're changed we can respond to that."

951
00:55:51,430 --> 00:55:56,930
And then we can also do things like this. Actually, that's the old code there.

952
00:55:56,930 --> 00:55:59,600
I think I am missing pasting in one more function,

953
00:55:59,600 --> 00:56:05,030
and that would be the actual function that would respond to the rating control being changed.

954
00:56:05,030 --> 00:56:07,710
Let me pop that in right down here,

955
00:56:07,710 --> 00:56:09,840
somewhere around there.

956
00:56:09,840 --> 00:56:14,930
And in this case, the only thing that's new is the fact that we're going into

957
00:56:14,930 --> 00:56:21,000
what the rating control tells us and we're asking for what's called the tentativeRating.

958
00:56:21,000 --> 00:56:23,150
There's a bunch of different other things that that control can tell you,

959
00:56:23,150 --> 00:56:25,310
and it goes control by control.

960
00:56:25,310 --> 00:56:29,140
It's very straightforward. You'll be able to figure it out no trouble whatsoever.

961
00:56:29,140 --> 00:56:34,040
I run this, and now when I change the ratings and click on the rating,

962
00:56:34,040 --> 00:56:36,480
you can see now it's actually responding to it.

963
00:56:36,480 --> 00:56:40,280
It's putting that rating on the screen into that otherwise empty div tag

964
00:56:40,280 --> 00:56:42,970
below the rating control.

965
00:56:42,970 --> 00:56:46,670
That's the magic of a lot of stuff here too.

966
00:56:46,670 --> 00:56:49,580
So as you're creating applications for the Windows Store,

967
00:56:49,580 --> 00:56:52,930
there's a ton of controls that you can just use. They all work like this.

968
00:56:52,930 --> 00:56:58,670
>> Let me show you the visual side of designing for these applications.

969
00:56:58,670 --> 00:57:03,440
The good news is you'll already have this tool when you install everything

970
00:57:03,440 --> 00:57:06,240
if you go to that download and you get Visual Studio.

971
00:57:06,240 --> 00:57:09,890
I can right click on this. I won't zoom in.

972
00:57:09,890 --> 00:57:12,040
It just says Open in Blend.

973
00:57:12,040 --> 00:57:16,040
Blend is another tool that works side by side with Visual Studio

974
00:57:16,040 --> 00:57:19,230
and is focused much more on the design side of things,

975
00:57:19,230 --> 00:57:23,660
so it really surfaces tools that are optimized for creating styles,

976
00:57:23,660 --> 00:57:29,720
creating animations, working with CSS, a lot of things in that kind of vein.

977
00:57:29,720 --> 00:57:36,380
Here what should be very interesting and pretty obvious immediately is we're looking at the app.

978
00:57:36,380 --> 00:57:40,060
Hopefully we still are.

979
00:57:40,060 --> 00:57:42,650
Instead of seeing code, which we still do see at the bottom,

980
00:57:42,650 --> 00:57:45,350
we're seeing the actual representation of the application.

981
00:57:45,350 --> 00:57:49,640
What's more, it's not just a representation of the app, it is actually the app running.

982
00:57:49,640 --> 00:57:52,010
And that's what really is nice about Blend.

983
00:57:52,010 --> 00:57:58,620
The team has done a lot of work to bring HTML and JavaScript and CSS into this tool.

984
00:57:58,620 --> 00:58:01,930
Now you can actually, if you're curious, "What does that mean? What can I do?"

985
00:58:01,930 --> 00:58:08,310
I can actually design to this application even though things like this don't exist in my markup.

986
00:58:08,310 --> 00:58:13,230
Remember that rating control? It was just a div tag.

987
00:58:13,230 --> 00:58:17,090
This stuff, that star, only exists at runtime. How do I know that?

988
00:58:17,090 --> 00:58:20,300
There's a little bit of magic over here.

989
00:58:20,300 --> 00:58:21,700
See these lightning bolts?

990
00:58:21,700 --> 00:58:25,570
Any time you see a lightning bolt, that means it was created by something at runtime.

991
00:58:25,570 --> 00:58:31,770
Some JavaScript ran and turned something into this or created this with some logic.

992
00:58:31,770 --> 00:58:37,100
Those stars that you see there were created by JavaScript by WinJS.

993
00:58:37,100 --> 00:58:41,800
The nice thing is, it doesn't matter to me, I can still design it,

994
00:58:41,800 --> 00:58:44,410
I can still go in and change it, I can find out what's going on here,

995
00:58:44,410 --> 00:58:50,260
I can look at the CSS, I can go ahead and find out why the color is the way it is,

996
00:58:50,260 --> 00:58:54,610
I can start messing with things and making things horrible,

997
00:58:54,610 --> 00:58:58,360
whatever I want to do.

998
00:58:58,360 --> 00:59:01,020
Actually, I'll leave things alone.

999
00:59:01,020 --> 00:59:03,980
But you can see here it's all the CSS and it's showing you here.

1000
00:59:03,980 --> 00:59:10,120
If I go up to there, it's going to show you everything that they call Winning,

1001
00:59:10,120 --> 00:59:14,850
so the CSS rules that are the most specific and the most selected for that item,

1002
00:59:14,850 --> 00:59:17,110
which you've probably already gone over in your classes,

1003
00:59:17,110 --> 00:59:22,000
where you can say there's a general font that we're applying to everything,

1004
00:59:22,000 --> 00:59:26,860
but because this is an h1 and I have a color defined for h1s,

1005
00:59:26,860 --> 00:59:29,820
it's going to be this color, and that's because it's more specific than the body1.

1006
00:59:29,820 --> 00:59:32,590
This one thing right here shows you all of that,

1007
00:59:32,590 --> 00:59:35,470
and it's really powerful stuff as you get more complex,

1008
00:59:35,470 --> 00:59:38,160
you're wondering why these things are the way they are.

1009
00:59:38,160 --> 00:59:41,020
It will actually tell you, and you can pick any of these items here.

1010
00:59:41,020 --> 00:59:43,370
That color is not too bad, actually.

1011
00:59:43,370 --> 00:59:47,150
You can select them. Hopefully you can see this.

1012
00:59:47,150 --> 00:59:52,410
For everything that you have on your application, you see a whole cascade

1013
00:59:52,410 --> 00:59:56,070
of all the CSS that could have applied to that and which one is winning,

1014
00:59:56,070 --> 00:59:58,050
which one actually took precedence.

1015
00:59:58,050 --> 01:00:00,930
These are kind of boring. There's not a lot going on in some of these.

1016
01:00:00,930 --> 01:00:04,660
If I go and change the color, then you'll start seeing some cascading there.

1017
01:00:04,660 --> 01:00:07,760
You can also use HTML here as well.

1018
01:00:07,760 --> 01:00:12,490
I can go through and modify the HTML properties for all of these things as I wish.

1019
01:00:12,490 --> 01:00:14,620
There's just tons of stuff here.

1020
01:00:14,620 --> 01:00:18,070
>> I don't want to take your time by going through everything here. Just know it's here.

1021
01:00:18,070 --> 01:00:21,700
There's a lot of design-oriented functionality that's just available for you

1022
01:00:21,700 --> 01:00:26,730
so you can stay visual, work with the application, and not have to do a lot of guessing

1023
01:00:26,730 --> 01:00:32,180
that you would have to do normally and cycling back from a browser back into your design,

1024
01:00:32,180 --> 01:00:33,940
back to the browser.

1025
01:00:33,940 --> 01:00:37,010
This is really cool stuff for that, and as you develop a Windows Store app,

1026
01:00:37,010 --> 01:00:39,650
it's going to make you a lot more productive.

1027
01:00:39,650 --> 01:00:45,150
>> You'll also see it's tracking the markup here and your CSS

1028
01:00:45,150 --> 01:00:47,270
as you're working through different things.

1029
01:00:47,270 --> 01:00:50,180
It's probably really hard for you to see that, especially on video,

1030
01:00:50,180 --> 01:00:54,680
but that's what's going on here, and I would recommend you become familiar with that.

1031
01:00:54,680 --> 01:00:57,240
It will save you a lot of time. That's Blend.

1032
01:00:57,240 --> 01:01:00,520
If you make any changes here, they are automatically going to carry back over

1033
01:01:00,520 --> 01:01:01,870
to Visual Studio.

1034
01:01:01,870 --> 01:01:06,590
It's the same files, it's the same everything. I'll leave it alone.

1035
01:01:06,590 --> 01:01:08,650
I have a better example that I want to show you.

1036
01:01:08,650 --> 01:01:11,660
But if I made a change there and saved it and I came back to Visual Studio, it would say,

1037
01:01:11,660 --> 01:01:16,390
"Hey, you just changed something. Can I reload it for you?" Yes.

1038
01:01:16,390 --> 01:01:18,770
And you're using the same stuff there.

1039
01:01:18,770 --> 01:01:21,320
That's the end of that particular sample.

1040
01:01:21,320 --> 01:01:28,170
>> I want to show you a higher end sample just to give you a view of other functionality

1041
01:01:28,170 --> 01:01:30,350
you might think about as well.

1042
01:01:30,350 --> 01:01:32,280
This is a sample app that you can download.

1043
01:01:32,280 --> 01:01:35,620
If you look for something called the Windows Camp in a Box,

1044
01:01:35,620 --> 01:01:40,340
there are some samples that are in that, and one of them is The Contoso Cookbook.

1045
01:01:40,340 --> 01:01:41,640
I can just run this for you.

1046
01:01:41,640 --> 01:01:44,700
Custom splash screen. This is the Grid view application.

1047
01:01:44,700 --> 01:01:49,590
They've bound some custom data here. You can navigate through this.

1048
01:01:49,590 --> 01:01:53,090
You can go and take a look at various things that will make us hungry on a Friday afternoon.

1049
01:01:53,090 --> 01:01:57,760
I don't know. What is going to make me the most hungry?

1050
01:01:57,760 --> 01:02:00,530
I don't know. I'm just going to pick one.

1051
01:02:00,530 --> 01:02:02,460
You go into these things. It will show you the recipe.

1052
01:02:02,460 --> 01:02:04,900
You could also, instead of clicking on an item,

1053
01:02:04,900 --> 01:02:10,360
you can go right to that category of content, that section of content.

1054
01:02:10,360 --> 01:02:15,590
In this case, you can read lots of fake Latin telling you all about these recipes here

1055
01:02:15,590 --> 01:02:17,720
and then go right into the specific recipe.

1056
01:02:17,720 --> 01:02:22,770
This also supports things like the sharing that I showed you before with the pictures.

1057
01:02:22,770 --> 01:02:26,160
You can also search into this application too.

1058
01:02:26,160 --> 01:02:28,880
It's very straightforward to do searching.

1059
01:02:28,880 --> 01:02:31,300
Basically, you're just getting a string of text from Windows

1060
01:02:31,300 --> 01:02:34,720
and you decide how you want to handle search with that.

1061
01:02:34,720 --> 01:02:39,830
It's a few lines of code to get that, and then what you do with it after that is totally up to you.

1062
01:02:39,830 --> 01:02:44,180
>> Here they also have an app bar where they're using some other functionality.

1063
01:02:44,180 --> 01:02:45,430
I'll just tell you what it is.

1064
01:02:45,430 --> 01:02:48,220
A reminder is going to use what's called a toast notification.

1065
01:02:48,220 --> 01:02:52,930
This is really handy for letting the user know when things have happened,

1066
01:02:52,930 --> 01:02:55,850
like an application was installed or something was completed.

1067
01:02:55,850 --> 01:02:57,950
It's also good for games too.

1068
01:02:57,950 --> 01:03:02,360
If you have a persistent world or a leader board and a service that's hosting that

1069
01:03:02,360 --> 01:03:08,490
maybe on a separate machine, those notifications can be sent into a machine

1070
01:03:08,490 --> 01:03:12,240
and even if the user is not using your game, playing your game or running your app,

1071
01:03:12,240 --> 01:03:15,170
they can still get notifications about those kinds of events.

1072
01:03:15,170 --> 01:03:19,350
So you could say, "Your castle has been destroyed or is just about destroyed."

1073
01:03:19,350 --> 01:03:22,870
"Get back here and defend it," or something like that.

1074
01:03:22,870 --> 01:03:26,830
You click on the notification, you go right back into the game, and you can play it.

1075
01:03:26,830 --> 01:03:32,170
So those kinds of things can help really draw people back into your app pretty effectively.

1076
01:03:32,170 --> 01:03:37,450
>> There's also support in this application for using the microphone, the webcam,

1077
01:03:37,450 --> 01:03:39,560
doing video and taking photos.

1078
01:03:39,560 --> 01:03:42,080
You can also pin a secondary tile.

1079
01:03:42,080 --> 01:03:46,760
It's useful if you want to just have a tile that goes right to certain content.

1080
01:03:46,760 --> 01:03:49,960
In this case, it goes right to this recipe.

1081
01:03:49,960 --> 01:03:51,300
Everything I'm mentioning I'm just showing

1082
01:03:51,300 --> 01:03:53,270
because it's things that you can think about using as well.

1083
01:03:53,270 --> 01:03:57,590
For the most part, they are very straightforward to use.

1084
01:03:57,590 --> 01:04:00,070
I would just recommend you bring up that sample explorer

1085
01:04:00,070 --> 01:04:03,600
and find a sample that can show you how to do that.

1086
01:04:03,600 --> 01:04:07,140
It's pretty straightforward to bring those into your apps there as well.

1087
01:04:07,140 --> 01:04:11,030
>> I was going to show you something else that's pretty cool here.

1088
01:04:11,030 --> 01:04:15,230
I'll snap this application, and I'm going to go back to Visual Studio.

1089
01:04:15,230 --> 01:04:18,870
This application is running. It's running from Visual Studio.

1090
01:04:18,870 --> 01:04:21,370
I can do some pretty cool stuff with that.

1091
01:04:21,370 --> 01:04:23,840
I actually have an option to select an element,

1092
01:04:23,840 --> 01:04:28,250
and I can go over here to the live application and I can say,

1093
01:04:28,250 --> 01:04:34,000
"I'm wondering why is Preparation Time a little bit lighter gray than the title itself?"

1094
01:04:34,000 --> 01:04:35,680
I can click on it.

1095
01:04:35,680 --> 01:04:38,080
It's going to synchronize that back into Visual Studio,

1096
01:04:38,080 --> 01:04:43,780
and it's going to show me exactly the generated content that resulted in that part of the UI.

1097
01:04:43,780 --> 01:04:47,270
So in this case, it's item-subtitle and h4 double construct,

1098
01:04:47,270 --> 01:04:51,110
and that probably tells us what we need to know because as an h4 within that context,

1099
01:04:51,110 --> 01:04:53,550
it's going to get a certain kind of font.

1100
01:04:53,550 --> 01:04:56,410
But if I still don't know why, I can click on Trace Styles.

1101
01:04:56,410 --> 01:05:02,330
I can then expand out color and I can find out exactly why that color is not the body color

1102
01:05:02,330 --> 01:05:04,640
but in fact is something else.

1103
01:05:04,640 --> 01:05:07,210
This is essentially the dev tools from Internet Explorer

1104
01:05:07,210 --> 01:05:09,530
to a degree brought into Visual Studio.

1105
01:05:09,530 --> 01:05:12,110
If you've worked with the Chrome Dev Tools, Firebug, things like that,

1106
01:05:12,110 --> 01:05:14,720
those kinds of tools that are in the browser,

1107
01:05:14,720 --> 01:05:17,340
that kind of functionality has been brought right into Visual Studio

1108
01:05:17,340 --> 01:05:22,090
so you don't actually have to launch a browser and work with those tools separately.

1109
01:05:22,090 --> 01:05:24,320
Now I have a Windows Store app just running,

1110
01:05:24,320 --> 01:05:27,840
and I can start pulling it apart and finding out why things are doing what they are.

1111
01:05:27,840 --> 01:05:30,440
>> I can also do it this way too.

1112
01:05:30,440 --> 01:05:35,020
I can go and just pick something right from the markup and find out what it is

1113
01:05:35,020 --> 01:05:38,560
in the application itself. I think I've gone by everything.

1114
01:05:38,560 --> 01:05:41,440
Here I'm hovering over this. I can select it.

1115
01:05:41,440 --> 01:05:45,540
It's going to show me in the actual running application where that thing is

1116
01:05:45,540 --> 01:05:48,070
that I'm now clicking on in the markup.

1117
01:05:48,070 --> 01:05:49,700
Really cool stuff.

1118
01:05:49,700 --> 01:05:52,710
As you're trying to figure out what's going on and what HTML is doing,

1119
01:05:52,710 --> 01:05:56,080
what CSS is doing, keep this in mind.

1120
01:05:56,080 --> 01:05:58,450
Remember this is here for you

1121
01:05:58,450 --> 01:06:02,070
and also that Blend can work with a live running application.

1122
01:06:02,070 --> 01:06:06,070
>> The one last thing I wanted to show you with this application--

1123
01:06:06,070 --> 01:06:09,290
By the way, it shows you deltas as things change too,

1124
01:06:09,290 --> 01:06:11,160
so you can watch for those yellow highlights.

1125
01:06:11,160 --> 01:06:14,060
Those are things that have just changed in the application.

1126
01:06:14,060 --> 01:06:16,350
But one last thing. I want to go back to Blend just for a second here.

1127
01:06:16,350 --> 01:06:21,790
We'll open this up, Open in Blend, same app, same everything.

1128
01:06:21,790 --> 01:06:28,660
I just want to show you the experience here isn't just you're stuck on the home page

1129
01:06:28,660 --> 01:06:32,880
looking at the things you'll get by default when you run the app and let it sit there.

1130
01:06:32,880 --> 01:06:36,490
You can also turn on this pretty small icon up here.

1131
01:06:36,490 --> 01:06:38,560
It's called Interactive mode.

1132
01:06:38,560 --> 01:06:41,560
You click on that. It's going to bring up your application.

1133
01:06:41,560 --> 01:06:43,730
You're not in Design mode anymore, so you're not going to be clicking on things

1134
01:06:43,730 --> 01:06:47,270
to change functionality, but you can actually work with the application now.

1135
01:06:47,270 --> 01:06:51,560
You can click through, you can do whatever, get to a recipe that you care about

1136
01:06:51,560 --> 01:06:54,810
or to a category. Let's go to this category.

1137
01:06:54,810 --> 01:06:56,880
I'll say, "Okay, here is where I want to design."

1138
01:06:56,880 --> 01:06:59,680
Then you click that button again, it will bring you back into the Design surface,

1139
01:06:59,680 --> 01:07:02,130
and now you can do all those things that I was talking about before.

1140
01:07:02,130 --> 01:07:06,230
I'll keep clicking until I get this selected, find out its dimensions,

1141
01:07:06,230 --> 01:07:09,890
find out the HTML for it, the CSS for it

1142
01:07:09,890 --> 01:07:14,990
for a running application, some later part of the application.

1143
01:07:14,990 --> 01:07:17,780
Very, very useful. I'll show this to you.

1144
01:07:17,780 --> 01:07:21,340
Please keep it in mind if you're looking into writing code with this

1145
01:07:21,340 --> 01:07:26,070
because it's going to save you a lot of hassle, and it's pretty good stuff.

1146
01:07:26,070 --> 01:07:32,370
That's pretty much all I wanted to show you on Blend and in Visual Studio for all of that.

1147
01:07:32,370 --> 01:07:36,130
>> Any questions on either of those tools?

1148
01:07:36,130 --> 01:07:40,000
Anything at all? >>[Guarin] I have stuff to give out, so good questions, good stuff.

1149
01:07:40,000 --> 01:07:43,700
>> [Bowen laughs] I've already shown you my demos here.

1150
01:07:43,700 --> 01:07:47,000
I'm going to put it on the Resources page and turn to questions now.

1151
01:07:47,000 --> 01:07:53,850
That first reference is that Generation App site with the game track and the app track.

1152
01:07:53,850 --> 01:07:55,040
Sign up for those.

1153
01:07:55,040 --> 01:07:57,210
You don't have to wait the 30 days to get the content.

1154
01:07:57,210 --> 01:08:00,370
You can start going and looking at the content as you wish.

1155
01:08:00,370 --> 01:08:04,380
I understand your time frames might be different than-- [laughs]

1156
01:08:04,380 --> 01:08:07,780
So when is the Hackathon? That's a couple weeks, right?

1157
01:08:07,780 --> 01:08:09,620
So you don't have the 30 days to wait.

1158
01:08:09,620 --> 01:08:13,180
So yeah, you can sign up for that and then just start pulling the content out from it.

1159
01:08:13,180 --> 01:08:15,320
Also the Dev and the Design Centers.

1160
01:08:15,320 --> 01:08:17,620
And I didn't mention this, but there's also the Store Docs.

1161
01:08:17,620 --> 01:08:22,880
This would be for after the Hackathon as you're ready to start submitting your apps for the store.

1162
01:08:22,880 --> 01:08:27,350
There are some helpful guidelines here, some guidance about how to get things into the store,

1163
01:08:27,350 --> 01:08:29,960
some common issues that might trip you up,

1164
01:08:29,960 --> 01:08:32,540
and that's the end of those resources.

1165
01:08:32,540 --> 01:08:35,300
>> So what's on your mind? Anything else that you--

1166
01:08:35,300 --> 01:08:40,580
[Guarin] Who is thinking about doing a Windows app for CS50? Cool.

1167
01:08:40,580 --> 01:08:42,200
[Bowen] Cool. Great.

1168
01:08:44,149 --> 01:08:49,410
>> Any questions about the stuff that you've seen so far and how it relates to this?

1169
01:08:49,410 --> 01:08:54,540
For example, with more time I could take a game that I have written

1170
01:08:54,540 --> 01:08:57,310
and that runs in browser and just kind of go through the process

1171
01:08:57,310 --> 01:08:59,870
of bringing that into Visual Studio and making it a Windows Store app.

1172
01:08:59,870 --> 01:09:02,870
It takes more time than we really had to include today,

1173
01:09:02,870 --> 01:09:08,010
but the short version is it's the same code that you have running in the browser,

1174
01:09:08,010 --> 01:09:11,680
and the things that you change are the things that you decide to plug in to Windows 8.

1175
01:09:11,680 --> 01:09:16,220
So if you want to use charms, if you want to search or share,

1176
01:09:16,220 --> 01:09:19,899
you need to create an app bar to hide away some functionality onto that,

1177
01:09:19,899 --> 01:09:21,939
those are the kinds of things that you would change.

1178
01:09:21,939 --> 01:09:25,229
But the core of your web app can remain intact.

1179
01:09:25,229 --> 01:09:29,590
Again, as long as it works in IE10, it's going to be a really easy port

1180
01:09:29,590 --> 01:09:33,680
to bring that stuff into Visual Studio, into Blend, and make it a Windows Store app.

1181
01:09:33,680 --> 01:09:37,500
Again, the only things you will need to learn are those other features

1182
01:09:37,500 --> 01:09:41,830
that you can use to light up an application, like a live tile and those kinds of things.

1183
01:09:41,830 --> 01:09:46,899
>> Yeah. >>[student] My question is about working mobile.

1184
01:09:46,899 --> 01:09:52,210
So if you make an app that works as an app on desktop,

1185
01:09:52,210 --> 01:09:56,480
is it really easy to transfer it to mobile, or is there a--

1186
01:09:56,480 --> 01:10:01,270
The question is, if I make a Windows Store app that's really optimized for this environment

1187
01:10:01,270 --> 01:10:06,430
and I want to bring it to a mobile world, what's involved with doing that?

1188
01:10:06,430 --> 01:10:10,060
That, like many questions, is always a constantly changing answer.

1189
01:10:10,060 --> 01:10:16,190
The good news is if you're sticking with HTML and JavaScript, CSS,

1190
01:10:16,190 --> 01:10:18,720
if you're starting from a Windows Store app,

1191
01:10:18,720 --> 01:10:20,590
it's going to let you bring it to the Web

1192
01:10:20,590 --> 01:10:24,650
and then use those kinds of techniques, like media queries and things,

1193
01:10:24,650 --> 01:10:27,180
to adapt to different size devices.

1194
01:10:27,180 --> 01:10:29,900
That said, there's always frameworks and things out there

1195
01:10:29,900 --> 01:10:33,450
that support extending out different technologies, different platforms.

1196
01:10:33,450 --> 01:10:35,670
That changes all the time.

1197
01:10:35,670 --> 01:10:40,030
We are also changing things as well as we look toward what we have now

1198
01:10:40,030 --> 01:10:42,950
actually out with Windows Phone 8.

1199
01:10:42,950 --> 01:10:44,930
We have some shared core infrastructures

1200
01:10:44,930 --> 01:10:48,180
offered between applications for those environments.

1201
01:10:48,180 --> 01:10:51,200
So the stuff that you're doing to create a Windows Store app,

1202
01:10:51,200 --> 01:10:57,790
a lot of that can carry over into a Windows Phone 8 application as well.

1203
01:10:57,790 --> 01:11:02,270
That again is an emerging story, so there's some content about that at Build.

1204
01:11:02,270 --> 01:11:06,780
The SDK just got out a little while ago. It was just released a little while ago.

1205
01:11:06,780 --> 01:11:09,920
But in terms of other platforms too,

1206
01:11:09,920 --> 01:11:13,360
you probably run into many cross-platform frameworks as well.

1207
01:11:13,360 --> 01:11:16,170
The good news is the stuff that you're doing here,

1208
01:11:16,170 --> 01:11:19,620
the core functionality is straight up web standard stuff.

1209
01:11:19,620 --> 01:11:24,010
The only things that wouldn't translate easily are the things that Windows 8 does,

1210
01:11:24,010 --> 01:11:28,060
but that's no surprise because it's a Windows feature.

1211
01:11:28,060 --> 01:11:34,090
You're not going to find sharing or similar kinds of contracts on every other platform.

1212
01:11:34,090 --> 01:11:37,480
So those are the things that you would want to from a design perspective

1213
01:11:37,480 --> 01:11:40,820
make sure you have ways to kind of abstract that out so you can say,

1214
01:11:40,820 --> 01:11:42,970
"If I'm running on this, I can do that."

1215
01:11:42,970 --> 01:11:48,120
If I'm not, there's some design patterns you can use to kind of hide that stuff away.

1216
01:11:48,120 --> 01:11:53,360
But keep that in mind. Yeah. Sorry. Go ahead.

1217
01:11:53,360 --> 01:11:58,130
>> [student] If I want to test my Windows app on top of [inaudible]

1218
01:11:58,130 --> 01:12:02,310
[Bowen] Yeah. I skipped one more thing too. Yeah.

1219
01:12:02,310 --> 01:12:04,910
I'll answer your question first, then I'll show you a feature I forgot to mention.

1220
01:12:04,910 --> 01:12:09,220
We do have some machines available locally. I'm sorry.

1221
01:12:09,220 --> 01:12:11,240
The question was, how do I test things on devices

1222
01:12:11,240 --> 01:12:14,230
if I don't happen to have a whole lot of things to choose from?

1223
01:12:14,230 --> 01:12:17,130
[Guarin] We lent you guys, I think, 5 or 6. How many do you need?

1224
01:12:17,130 --> 01:12:20,940
[student] We got 4 of them. >>Okay. You guys got 4 slates to play around with.

1225
01:12:20,940 --> 01:12:25,520
So definitely let everyone know, please. [laughs] >>[Bowen] Awesome.

1226
01:12:25,520 --> 01:12:27,610
That's an even better answer than I was going to give you.

1227
01:12:27,610 --> 01:12:31,250
We have office hours for developers that we do at our office

1228
01:12:31,250 --> 01:12:35,110
and now coming soon to the Microsoft Store over at the Pru,

1229
01:12:35,110 --> 01:12:37,010
but Edwin has already taken care of you.

1230
01:12:37,010 --> 01:12:42,180
There are 4 slates available for loaning, for testing.

1231
01:12:42,180 --> 01:12:45,440
There we go. There's an example of one up there.

1232
01:12:45,440 --> 01:12:47,340
So yeah, absolutely. Great.

1233
01:12:47,340 --> 01:12:52,700
Absolutely by far the best way to test it is to be on a device.

1234
01:12:52,700 --> 01:12:56,810
If you don't happen to have one yet or you don't want to walk across campus in the snow

1235
01:12:56,810 --> 01:13:01,130
to grab one or whatever, there is a way to do this back in Visual Studio.

1236
01:13:01,130 --> 01:13:10,360
If I go back into where I was here, here instead of using Local Machine,

1237
01:13:10,360 --> 01:13:13,590
you could connect to Remote Machine, but that's not what I'm talking about here.

1238
01:13:13,590 --> 01:13:16,830
Simulator is the thing that you might want to look into.

1239
01:13:16,830 --> 01:13:22,120
I'll run this, and really what it is, it's essentially a window onto your own system.

1240
01:13:22,120 --> 01:13:26,260
Here is actually my system running, running Contoso,

1241
01:13:26,260 --> 01:13:29,550
but in a way that lets me change some of the execution parameters,

1242
01:13:29,550 --> 01:13:31,060
the environmental parameters.

1243
01:13:31,060 --> 01:13:34,150
So I can say here, "You know what?"

1244
01:13:34,150 --> 01:13:39,240
Oh. I already have it running in a simulated 27-inch monitor at 2560 resolution.

1245
01:13:39,240 --> 01:13:44,930
I can easily drop that down and see what my application would do with a smaller screen

1246
01:13:44,930 --> 01:13:47,480
or by changing DPI settings or whatever.

1247
01:13:47,480 --> 01:13:50,700
So on a small screen, a 10.6, what is it going to do?

1248
01:13:50,700 --> 01:13:53,040
That still looks pretty good, right?

1249
01:13:53,040 --> 01:13:58,220
You'll want to do this, especially if you're submitting to the store, because we do

1250
01:13:58,220 --> 01:14:00,480
as part of the testing process.

1251
01:14:00,480 --> 01:14:02,400
And if there are problems like that,

1252
01:14:02,400 --> 01:14:06,160
then you might run into an issue getting certified for the store.

1253
01:14:06,160 --> 01:14:09,240
But that's part of the simulator. Really cool. Very easy to do that.

1254
01:14:09,240 --> 01:14:11,480
You can also use features like rotating it as well.

1255
01:14:11,480 --> 01:14:15,650
I can click the button here, have it rotate, see what someone would have as an experience

1256
01:14:15,650 --> 01:14:20,970
rotating their slate, their tablet, and using your application with that.

1257
01:14:20,970 --> 01:14:25,060
There are some other things too like touch emulation and some other things,

1258
01:14:25,060 --> 01:14:27,210
setting GPS.

1259
01:14:27,210 --> 01:14:31,050
I can pretend I'm at a different location and see what my application does

1260
01:14:31,050 --> 01:14:34,690
when I pretend that I'm back in Seattle or something.

1261
01:14:34,690 --> 01:14:41,970
But it's a really useful feature, and it's built in to both Visual Studio and in Blend.

1262
01:14:41,970 --> 01:14:44,460
Yes. Your question.

1263
01:14:44,460 --> 01:14:48,530
>> [student] If you're writing a game, does Visual Studio have any support for animation?

1264
01:14:48,530 --> 01:14:55,550
Yeah. The question is around animation support, particularly with gaming.

1265
01:14:55,550 --> 01:14:58,380
It depends. [chuckles]

1266
01:14:58,380 --> 01:15:06,870
With JavaScript I will say there's probably less support than there is on the XAML side,

1267
01:15:06,870 --> 01:15:11,430
which has timelines, has storyboards and things that are built in.

1268
01:15:11,430 --> 01:15:18,710
For animations on JavaScript apps, I don't know how much of an answer I want to give you.

1269
01:15:18,710 --> 01:15:25,110
I have resources on my blog that go through a lot of options for both physics animations,

1270
01:15:25,110 --> 01:15:29,280
options for JavaScript-oriented games on Windows 8.

1271
01:15:29,280 --> 01:15:31,300
I would refer you to those.

1272
01:15:31,300 --> 01:15:34,300
Basically, there's so many choices.

1273
01:15:34,300 --> 01:15:37,770
The reason I'm hesitating is there's so many choices for doing animations with JavaScript.

1274
01:15:37,770 --> 01:15:44,280
It could be CSS, it could be Canvas-based, it could be just basic DOM animations,

1275
01:15:44,280 --> 01:15:47,470
it could be a lot of different things, so it really depends on your choice.

1276
01:15:47,470 --> 01:15:55,790
If you decide to use something like Create.js or Lime or other kinds of frameworks--

1277
01:15:55,790 --> 01:15:59,150
Well, I'm not even sure you're going to be able to use a higher end framework

1278
01:15:59,150 --> 01:16:01,370
like Impact or Construct.

1279
01:16:01,370 --> 01:16:07,000
That tends to generate more code than you might consider from scratch.

1280
01:16:07,000 --> 01:16:11,730
But in those cases, you could still use a simulator, you can use the environments,

1281
01:16:11,730 --> 01:16:17,480
and I tend to just use this environment for my test platform in those cases

1282
01:16:17,480 --> 01:16:19,930
as I'm developing games.

1283
01:16:19,930 --> 01:16:22,110
I've been fine especially with Canvas animations,

1284
01:16:22,110 --> 01:16:23,850
which is probably the most common thing.

1285
01:16:23,850 --> 01:16:27,360
The best you're going to probably find is the dev tools in the browser

1286
01:16:27,360 --> 01:16:30,160
and the dev tools in Visual Studio.

1287
01:16:30,160 --> 01:16:34,610
Kind of a meandering answer there, but hopefully I got your answer. Yes. You.

1288
01:16:34,610 --> 01:16:36,470
>> [student] What are the data storage options for Windows 8 apps?

1289
01:16:36,470 --> 01:16:41,100
What are the data storage options for Windows 8 apps, Windows Store apps?

1290
01:16:41,100 --> 01:16:46,790
Your options really are each application gets its own pool of local storage

1291
01:16:46,790 --> 01:16:52,150
for settings and for data, but it's also ridiculously easy to use roaming storage,

1292
01:16:52,150 --> 01:16:54,920
to use cloud-based storage. It's free.

1293
01:16:54,920 --> 01:16:58,250
What happens is you basically choose a different class and you say,

1294
01:16:58,250 --> 01:17:03,370
"Roaming Settings, Save, this particular set of content,"

1295
01:17:03,370 --> 01:17:06,050
and their Microsoft account, whatever they've signed in as,

1296
01:17:06,050 --> 01:17:08,620
is going to be the key to roaming that information around.

1297
01:17:08,620 --> 01:17:13,790
So if I use your game on my laptop and then I log in with the same account

1298
01:17:13,790 --> 01:17:18,900
and I play the game on a Surface or a tablet,

1299
01:17:18,900 --> 01:17:23,610
that will automatically roam that setting and data between those machines.

1300
01:17:23,610 --> 01:17:27,550
That's a default thing. That's good for certain amounts of data.

1301
01:17:27,550 --> 01:17:30,220
You wouldn't put a huge database into those.

1302
01:17:30,220 --> 01:17:35,350
For that you need to go to other kinds of solutions, like a hosted database in the cloud,

1303
01:17:35,350 --> 01:17:36,690
things like that.

1304
01:17:36,690 --> 01:17:39,840
There are some other community options around other kinds of data technologies.

1305
01:17:39,840 --> 01:17:42,920
I've seen some SQLite options in the community around there too.

1306
01:17:42,920 --> 01:17:46,690
So more and more are emerging, but those are the primary things that you would look toward

1307
01:17:46,690 --> 01:17:49,430
for a game or an app.

1308
01:17:49,430 --> 01:17:50,610
And you had a question in the back too.

1309
01:17:50,610 --> 01:18:02,390
>> [student] In terms of the network [inaudible] uploading or downloading files [inaudible]

1310
01:18:02,390 --> 01:18:04,870
[Bowen] Is your question how can you see that or how can you debug that and test it?

1311
01:18:04,870 --> 01:18:10,630
[student] How can you debug it [inaudible]

1312
01:18:10,630 --> 01:18:12,670
Sorry. I can't hear all of it.

1313
01:18:12,670 --> 01:18:16,480
[student] How do you get it bug tested and also [inaudible]

1314
01:18:16,480 --> 01:18:17,490
Great. Great.

1315
01:18:17,490 --> 01:18:21,860
How do you work with networking? How can you see what's going on?

1316
01:18:21,860 --> 01:18:23,620
There's many different answers to this one,

1317
01:18:23,620 --> 01:18:26,420
but let me show you probably the easiest things here.

1318
01:18:26,420 --> 01:18:29,350
Let me get rid of the simulator for a second.

1319
01:18:29,350 --> 01:18:31,740
Just a couple debugging options for networking.

1320
01:18:31,740 --> 01:18:36,070
There's a full network stack baked right into both the WinRT level and from WinJS,

1321
01:18:36,070 --> 01:18:42,810
so you can very easily make XHR, AJAX type calls from your game or app to do that.

1322
01:18:42,810 --> 01:18:47,250
Primarily, I tend to use 2 things.

1323
01:18:47,250 --> 01:18:53,660
I use the actual dev tools themselves, which have a network stack baked into them.

1324
01:18:53,660 --> 01:18:55,870
Let me show you the Windows home page.

1325
01:18:55,870 --> 01:19:02,730
I can bring this up, and there's actually a network proxy baked into these tools here.

1326
01:19:02,730 --> 01:19:08,390
So I can do this, I can refresh the page, and it's going to show me all of the interactions,

1327
01:19:08,390 --> 01:19:14,550
including AJAX calls for that session, for that request's duration.

1328
01:19:14,550 --> 01:19:17,600
This is useful. It's going to be very useful for browser-based apps.

1329
01:19:17,600 --> 01:19:20,470
For other kinds of apps, including Windows Store apps,

1330
01:19:20,470 --> 01:19:23,970
I use a tool called Fiddler.

1331
01:19:23,970 --> 01:19:29,650
You're going to get a game in response. [chuckles]

1332
01:19:29,650 --> 01:19:32,750
Fiddler is a simple proxy. I think I can show that to you.

1333
01:19:32,750 --> 01:19:40,190
It's just GetFiddler.com, which, interestingly enough, I'm tracing my network stack

1334
01:19:40,190 --> 01:19:41,740
going to GetFiddler.

1335
01:19:41,740 --> 01:19:45,700
But anyhow, Fiddler has been written by one of the PMs on the IE team,

1336
01:19:45,700 --> 01:19:48,290
so he knows what he's doing.

1337
01:19:48,290 --> 01:19:52,630
This is a good proxy that you can use for debugging network traffic.

1338
01:19:52,630 --> 01:19:55,730
I would recommend that. Question over there too.

1339
01:19:55,730 --> 01:19:58,050
>> [student] Is there an easy way to integrate foreign language input,

1340
01:19:58,050 --> 01:20:00,810
like Japanese or Chinese, into Windows apps?

1341
01:20:00,810 --> 01:20:03,240
I can't say I've done too much of it myself, but it is baked in.

1342
01:20:03,240 --> 01:20:08,470
There are options for of course emitting your application--I'm sorry, I didn't say the question--

1343
01:20:08,470 --> 01:20:11,100
options around globalization, localization of content,

1344
01:20:11,100 --> 01:20:14,320
including things like being able to sell in different markets

1345
01:20:14,320 --> 01:20:19,190
and target that version of your application for those individual languages

1346
01:20:19,190 --> 01:20:21,080
or cultures or things like that. Absolutely built in.

1347
01:20:21,080 --> 01:20:22,980
We've had support for that for forever,

1348
01:20:22,980 --> 01:20:26,630
and that carries forward into your options for Windows Store.

1349
01:20:26,630 --> 01:20:30,450
You can do that in the store itself, sell in different markets,

1350
01:20:30,450 --> 01:20:34,050
you can do that in the application as well too with using resources to define,

1351
01:20:34,050 --> 01:20:42,220
"If I am developed for this culture, then use these overrides for my textual content

1352
01:20:42,220 --> 01:20:44,510
"or use a right to left reader."

1353
01:20:44,510 --> 01:20:51,290
Those are all part of the default WinJS and WinRT APIs. Good question.

1354
01:20:51,290 --> 01:20:54,770
>> How are we doing? Any others?

1355
01:20:54,770 --> 01:20:58,850
And if anyone on video has questions, I'm cbowen@microsoft,

1356
01:20:58,850 --> 01:21:02,790
so I'm happy to take any of your questions from the future.

1357
01:21:02,790 --> 01:21:05,690
Very-- From the future, future [mimics echo].

1358
01:21:05,690 --> 01:21:09,140
So here is me. Let me put back my contact here.

1359
01:21:09,140 --> 01:21:11,840
So just send me a note, cbowen@microsoft,

1360
01:21:11,840 --> 01:21:15,190
and I will get back to you as soon as I can.

1361
01:21:15,190 --> 01:21:19,010
>> Anything else that you're wondering? Are we good?

1362
01:21:19,010 --> 01:21:24,050
Great. All right. Thank you all very much. I appreciate it. [applause]

1363
01:21:24,800 --> 01:21:27,000
>> [CS50.TV]