1
00:00:00,000 --> 00:00:02,420
[Powered by Google Translate] [Seminar - Windows 8 - App / Game Development met 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
[Dit is CS50. - CS50.TV]

4
00:00:07,350 --> 00:00:10,290
>> Hey, iedereen. Mijn naam is Edwin Guarin. Dit is Chris Bowen.

5
00:00:10,290 --> 00:00:12,310
Ik laat hem zichzelf voor te stellen in een tweede.

6
00:00:12,310 --> 00:00:14,100
Ik wil gewoon een snelle aankondiging doen.

7
00:00:14,100 --> 00:00:18,340
Allereerst, alles wat je studenten CS50 krijgt Windows 8 voor gratis.

8
00:00:18,340 --> 00:00:23,150
Dus als je denkt over het gaat gebruiken voor uw uiteindelijke project, is het van jou.

9
00:00:23,150 --> 00:00:25,740
Nate sturen een e-mail later voor instructies.

10
00:00:25,740 --> 00:00:32,850
Het tweede ding is als je besluit om een ​​Windows 8 app te schrijven voor uw CS50 afstudeerproject,

11
00:00:32,850 --> 00:00:35,870
we gaan doen wat giveaways: een Xbox,

12
00:00:35,870 --> 00:00:38,870
we misschien in staat zijn om een ​​leisteen weg te geven, dat soort dingen.

13
00:00:38,870 --> 00:00:42,460
Dus als er iets is wat je tegenhoudt, laat Chris of ik weet

14
00:00:42,460 --> 00:00:45,010
hoe we kunnen helpen je iets echt cool bouwen.

15
00:00:45,010 --> 00:00:48,580
Dus nogmaals bedankt voor uw komst vandaag, en ik zal het overhandigen aan Chris.

16
00:00:48,580 --> 00:00:50,500
>> Dank je, Edwin.

17
00:00:51,000 --> 00:00:52,740
Bedankt, iedereen, voor het samenvoegen van ons vandaag.

18
00:00:52,740 --> 00:00:55,800
Ik ben Chris Bowen. Ik ben een van Edwin collega's hier in het noordoosten.

19
00:00:55,800 --> 00:00:58,310
Ik wilde alleen maar een beetje tijd doorbrengen met je praten over

20
00:00:58,310 --> 00:01:03,730
hoe u een Windows Store applicatie met HTML5, JavaScript maken, en CSS

21
00:01:03,730 --> 00:01:07,310
en soort van krijgen eventuele vragen die u heeft over het sluiten Wist u dat

22
00:01:07,310 --> 00:01:12,920
als u op zoek bent naar het denken over misschien gebruik het voor een CS50 finale kans.

23
00:01:12,920 --> 00:01:14,980
>> Dat gezegd hebbende, zullen we gewoon duiken inch

24
00:01:14,980 --> 00:01:17,190
Ik ga over naar dia's hier.

25
00:01:17,190 --> 00:01:19,440
Als u vragen hebt, voel je vrij om een ​​email te sturen.

26
00:01:19,440 --> 00:01:23,460
Ik ben cbowen@microsoft.com, en daar is mijn blog en mijn Twitter.

27
00:01:23,460 --> 00:01:26,330
Maar je wilt in contact te komen met mij, dat is prima.

28
00:01:26,330 --> 00:01:30,110
Ik heb ongeveer een uur van de dingen, en ik wil je vragen te krijgen langs de weg,

29
00:01:30,110 --> 00:01:33,720
dus wees niet verlegen over het hebben van vragen tijdens dit.

30
00:01:33,720 --> 00:01:36,470
Ze kunnen niet zien wie het stellen van de vragen over de opname,

31
00:01:36,470 --> 00:01:39,090
dus je zult zo anoniem als je wilt zijn.

32
00:01:39,090 --> 00:01:42,780
>> Laat me duiken recht in, geef je een korte introductie van Windows 8,

33
00:01:42,780 --> 00:01:47,400
en tonen u een paar van de dingen over Windows Store apps die je zou kunnen overwegen

34
00:01:47,400 --> 00:01:49,530
als u denkt over het ontwikkelen van een applicatie.

35
00:01:49,530 --> 00:01:52,660
We kijken naar Windows 8. We zijn uit geweest voor een paar weken nu.

36
00:01:52,660 --> 00:01:55,810
Veel sterke adoptie die er reeds.

37
00:01:55,810 --> 00:01:59,800
U misschien al gezien hebben de Surface machines die we hebben.

38
00:01:59,800 --> 00:02:03,730
Er is een hier eigenlijk kun je een kijkje nemen als je hier in persoon bent.

39
00:02:03,730 --> 00:02:07,530
Ik wil heel graag met je praten, laten zien rond een klein beetje over Windows 8.

40
00:02:07,530 --> 00:02:10,759
Het idee met Windows 8, het is echt naar voren te brengen alle spullen die je kent over Windows

41
00:02:10,759 --> 00:02:16,840
in een aantal nieuwe ervaringen - met name de dingen graag op de Surface machine met touch,

42
00:02:16,840 --> 00:02:20,000
dit soort meer mobiele apparaten die nu op de markt,

43
00:02:20,000 --> 00:02:22,360
maar het is ook Windows in de kern.

44
00:02:22,360 --> 00:02:25,850
Dus het betekent dat je het echt op iets dat Windows 7 loopt te installeren,

45
00:02:25,850 --> 00:02:30,770
van uw grootste triple SLI gaming rig neer op uw laptop

46
00:02:30,770 --> 00:02:36,200
en aan uw glanzende nieuwe andere apparaten die je zou vandaag ophalen.

47
00:02:36,200 --> 00:02:38,450
Zij zullen draaien op Windows 8.

48
00:02:38,450 --> 00:02:40,530
Ik zal je laten zien rond een beetje,

49
00:02:40,530 --> 00:02:44,670
en alle ervaringen die je hier ziet zijn dingen die je kunt maken.

50
00:02:44,670 --> 00:02:47,760
Het idee is of het nu druk, muis, toetsenbord,

51
00:02:47,760 --> 00:02:51,870
ongeacht het apparaat is dat je draait je applicatie op, het gaat om grote run.

52
00:02:51,870 --> 00:02:55,180
Windows 8 zal helpen met al die scenario's.

53
00:02:55,180 --> 00:02:59,600
>> Deze dia's terzijde, laten we gewoon te krijgen in het nemen van een kijkje hier.

54
00:02:59,600 --> 00:03:03,270
Laat me zien rond mijn home-scherm. Dit is mijn Startscherm.

55
00:03:03,270 --> 00:03:05,810
Ik geef je slechts een klein beetje van een tour hier.

56
00:03:05,810 --> 00:03:09,610
Ik ben op een non-touch machine, om zo veel als ik wil mijn laptop scherm aan te raken,

57
00:03:09,610 --> 00:03:13,400
het zal een ding niet doen, dus ik zal gewoon scrollen hier een beetje en je laten zien.

58
00:03:13,400 --> 00:03:17,950
Enkele dingen die je kunt opmerken, zijn het feit dat deze zogenaamde live-tegels

59
00:03:17,950 --> 00:03:21,470
daadwerkelijk kan animeren, en ze kunnen informatie aan u te leveren -

60
00:03:21,470 --> 00:03:24,750
misschien updates op de statistieken voor een spel

61
00:03:24,750 --> 00:03:30,970
of toon je nieuws van sommige van de eerdere apps die hier op de linkerkant.

62
00:03:30,970 --> 00:03:35,350
Daar gaan we. Ik weet zeker dat het alleen maar positief en fantastisch goed nieuws.

63
00:03:35,350 --> 00:03:38,450
U kunt hier zien dat het echt belt je aandacht terug naar de app, zeggende:

64
00:03:38,450 --> 00:03:43,010
"He, er is iets nieuws hier. Neem een ​​kijkje. Kom terug in en zie wat er nieuw is voor u."

65
00:03:43,010 --> 00:03:45,320
Dat heet live-tegel, en je kunt meldingen doen

66
00:03:45,320 --> 00:03:47,070
ofwel rechtstreeks vanuit de applicatie zelf

67
00:03:47,070 --> 00:03:52,220
of als je een kijkje nemen in meer detail, zult u ontdekken hoe u een service op afstand te schrijven

68
00:03:52,220 --> 00:03:54,340
dat daadwerkelijk kan informatie doorgeven aan de tegel,

69
00:03:54,340 --> 00:03:56,520
dat is wat er gebeurt met dit nieuws apps.

70
00:03:56,520 --> 00:04:00,080
Ze eigenlijk om nieuws uit de wolk en het bijwerken van de tegel daar

71
00:04:00,080 --> 00:04:03,710
zodat mensen weten dat er een reden is om het openstellen van de applicatie en een kijkje nemen

72
00:04:03,710 --> 00:04:06,950
op welk laatste nieuws in elk van deze

73
00:04:06,950 --> 00:04:10,060
of als er nieuwe recepten of een nieuwe high score te verslaan

74
00:04:10,060 --> 00:04:13,560
of een vriend spelen of wat dan ook op deze toepassingen.

75
00:04:13,560 --> 00:04:15,550
Het is iets om je terug te verleiden inch

76
00:04:15,550 --> 00:04:18,640
Dus dat is de live tegels, en het zou een persoon te zijn, het kan een website ook.

77
00:04:18,640 --> 00:04:20,790
Meestal is het een applicatie.

78
00:04:20,790 --> 00:04:25,320
>> Vrijwel alle van die dingen die ik hier kwam uit de Windows Store. Ik zal lanceren dat.

79
00:04:25,320 --> 00:04:27,890
Het is een van de toepassingen die je krijgt standaard

80
00:04:27,890 --> 00:04:30,350
op elke machine die draait Windows 8.

81
00:04:30,350 --> 00:04:33,040
U kunt hier komen om alles wat je zou willen vinden,

82
00:04:33,040 --> 00:04:37,240
van dingen die zijn gemarkeerd om games die ik niet eerder heb gezien.

83
00:04:37,240 --> 00:04:39,440
Oh, wow, we hebben een nieuwe flipperkast kreeg hier.

84
00:04:39,440 --> 00:04:41,580
U kunt deze hier te installeren uit de winkel,

85
00:04:41,580 --> 00:04:43,420
en we praten over hoe deze te ontwikkelen.

86
00:04:43,420 --> 00:04:45,670
Je hebt een heleboel keuzes in hoe je ze maakt.

87
00:04:45,670 --> 00:04:49,020
We zullen concentreren in De JavaScript-verhaal met HTML en CSS,

88
00:04:49,020 --> 00:04:52,790
maar aan de gebruiker, aan de koper van de app, het maakt niet uit wat het is geschreven inch

89
00:04:52,790 --> 00:04:54,670
Ze kunnen gaan en werken.

90
00:04:54,670 --> 00:04:57,870
Ik ben geïntrigeerd door deze, dus ik moet deze openen en een kijkje nemen.

91
00:04:57,870 --> 00:05:02,310
Elke app, met inbegrip van degenen die u kunt maken en verkopen of gratis weggeven,

92
00:05:02,310 --> 00:05:06,240
wat je wilt doen in de winkel, zal een startpagina zoals dit te krijgen.

93
00:05:06,240 --> 00:05:10,750
U kunt indienen bij uw aanvraag een stel screenshots - die je hier ziet wat -

94
00:05:10,750 --> 00:05:15,970
details over de aanvraag, en na verloop van tijd zult u zich ophopen beide ratings -

95
00:05:15,970 --> 00:05:19,020
ze zijn eigenlijk gewoon de sterren - en beoordelingen,

96
00:05:19,020 --> 00:05:20,690
die zorgen voor een beetje meer inzicht.

97
00:05:20,690 --> 00:05:24,380
Eigenlijk, iemand moet iets typen en je vertellen hoe geweldig je bent,

98
00:05:24,380 --> 00:05:29,300
en dat zal in uw Reviews sectie gaan over hier, die ik niet heb gekeken.

99
00:05:29,300 --> 00:05:33,890
Fantastisch. "Zal niet eens te openen." Hoe groot.

100
00:05:33,890 --> 00:05:39,000
Nou, voor de mensen voor wie dit deed open en rennen, ze lijken echt te genieten. [Lacht]

101
00:05:39,000 --> 00:05:43,770
Hou dit in gedachten. Het Internet. Iedereen kan zeggen wat ze willen over uw aanvraag.

102
00:05:43,770 --> 00:05:45,780
Dus zorg ervoor dat u een geweldige job met het doet,

103
00:05:45,780 --> 00:05:49,030
zorg ervoor dat je maakt het zo comfortabel voor de gebruiker als je kunt

104
00:05:49,030 --> 00:05:52,720
omdat ze een paar klikken verwijderd van het verstrekken van een beoordeling,

105
00:05:52,720 --> 00:05:55,870
en dat zal ophopen aan uw algehele review.

106
00:05:55,870 --> 00:05:58,990
En wilt u uw best doen, want je gaat tegen andere toepassingen.

107
00:05:58,990 --> 00:06:01,830
Er zullen duizenden apps al in de winkel,

108
00:06:01,830 --> 00:06:06,880
en de kansen zijn, er kan iets zijn dat vergelijkbare functionaliteit doet wat je doet zijn.

109
00:06:06,880 --> 00:06:12,740
Dus als je echt kunt onderscheiden van de menigte, dat gaat in je voordeel, natuurlijk.

110
00:06:12,740 --> 00:06:15,300
>> We gaan een beetje later op in de winkel te krijgen.

111
00:06:15,300 --> 00:06:17,090
Ik wil echt concentreren op het maken van apps.

112
00:06:17,090 --> 00:06:20,760
Maar de korte versie van de winkel is wereldwijde distributie,

113
00:06:20,760 --> 00:06:25,430
het is automatisch onderdeel van Windows 8, mensen gewoon brand het op en neem een ​​kijkje op verschillende apps hier,

114
00:06:25,430 --> 00:06:29,070
je hebt de Dress-Up Sticker Book en allerlei verschillende apps.

115
00:06:29,070 --> 00:06:33,690
Verse verf, gebruik ik dit veel - slecht, maar ik gebruik het veel.

116
00:06:33,690 --> 00:06:36,080
Het toont me Ik heb het al.

117
00:06:36,080 --> 00:06:41,280
Laat me iets wat ik niet heb laten zien - UVideos ik heb niet zo nieuw.

118
00:06:41,280 --> 00:06:43,660
Je ziet hier het is gratis, dus je kunt het installeren recht uit de winkel.

119
00:06:43,660 --> 00:06:46,430
Heb je keuzes ook. U kunt natuurlijk weggeven.

120
00:06:46,430 --> 00:06:49,660
U kunt reclame drukken in de app of game.

121
00:06:49,660 --> 00:06:54,770
U kunt ook in rekening mag brengen, en je kan heel gemakkelijk zorgen voor een proef voor de aanvraag, alsmede

122
00:06:54,770 --> 00:06:58,220
dus je kunt mensen laten proberen het voor een week of wat je wilt doen.

123
00:06:58,220 --> 00:07:01,540
Dat is gewoon aanpasbaar via de portal. Je hebt geen code voor dat schrijven.

124
00:07:01,540 --> 00:07:03,990
Dus zeg je: "Je kunt dit gebruiken voor een week en dan heb je om het te kopen,"

125
00:07:03,990 --> 00:07:07,130
of je kan dingen als: "Je kunt de eerste 3 levels van dit spel te spelen doen

126
00:07:07,130 --> 00:07:09,820
"En dan heb je om te kopen om toegang te krijgen tot de rest."

127
00:07:09,820 --> 00:07:12,310
Je zou zelfs kunnen doen in-app aankopen zo goed, dus je kunt zeggen,

128
00:07:12,310 --> 00:07:17,880
"We hebben extra avonturen of sets van afbeeldingen of dingen die worden ontgrendeld -

129
00:07:17,880 --> 00:07:21,430
"Meer recepten die zijn ontgrendeld -. Als je de aankoop van deze uitgebreide sets"

130
00:07:21,430 --> 00:07:24,260
En kun je dat doen alles binnen de app of spel zelf.

131
00:07:24,260 --> 00:07:26,070
Dus, helemaal aan u, uw keuze.

132
00:07:26,070 --> 00:07:28,070
Er zijn een heleboel dingen die je kunt doen in de winkel,

133
00:07:28,070 --> 00:07:31,660
en dan wat je eigenlijk probeert het indienen van een certificatie-kanaal.

134
00:07:31,660 --> 00:07:35,380
We kunnen allemaal wel over een beetje later, maar dit is het doel.

135
00:07:35,380 --> 00:07:40,410
U wilt uw app wereldwijde zichtbaarheid te krijgen in de winkel hier.

136
00:07:40,410 --> 00:07:44,170
>> Terug op het scherm Start hier, wil ik je laten zien rond een beetje meer.

137
00:07:44,170 --> 00:07:50,580
Als ik start deze apps, laat me je een voorbeeld van een aantal cross-app functionaliteit hier.

138
00:07:50,580 --> 00:07:53,070
Om dat te doen, zal ik verse verf te lanceren.

139
00:07:53,070 --> 00:07:55,550
Een ding dat je hier ziet is elke bit van het scherm,

140
00:07:55,550 --> 00:07:58,040
alle pixels van het scherm naar uw app.

141
00:07:58,040 --> 00:08:01,990
Voorbij zijn de dagen waar je deze randen rond vensters

142
00:08:01,990 --> 00:08:05,120
met veel knoppen die altijd nemen er tot de ruimte de hele tijd.

143
00:08:05,120 --> 00:08:09,430
Nu je echt wilt weg van die te krijgen en gewoon je content de focus.

144
00:08:09,430 --> 00:08:13,710
We kunnen dingen doen met Windows door de toegang tot andere vormen van menu's.

145
00:08:13,710 --> 00:08:16,840
Een van hen is eigenlijk wat de charmes bar genaamd,

146
00:08:16,840 --> 00:08:18,870
en het komt uit de zijkant van het scherm.

147
00:08:18,870 --> 00:08:21,270
Je kunt eigenlijk flick van de zijkant als je een touch screen,

148
00:08:21,270 --> 00:08:24,840
kon je rechts klikken als u een muis, is er een sneltoets voor het,

149
00:08:24,840 --> 00:08:29,490
er is altijd meer dan een manier om iets te doen in de omgeving hier.

150
00:08:29,490 --> 00:08:31,680
Dat brengt een aantal dingen die je kunt doen.

151
00:08:31,680 --> 00:08:33,870
De meest voor de hand liggende is dat je terug kunt gaan naar het Startscherm,

152
00:08:33,870 --> 00:08:36,780
maar de andere 4 zijn wat charmes genoemd.

153
00:08:36,780 --> 00:08:41,059
Ze zijn contracten die u kunt aansluiten op een app-ontwikkelaar. Ze zijn wel cool.

154
00:08:41,059 --> 00:08:43,340
Zoeken, ik weet zeker dat is iets wat je gaat doen,

155
00:08:43,340 --> 00:08:44,950
delen Ik zal je laten zien in een tweede,

156
00:08:44,950 --> 00:08:48,450
en apparaten en instellingen, het zijn allemaal dingen die je app kunt aansluiten op

157
00:08:48,450 --> 00:08:51,960
om gebruik te maken van Windows, om te zeggen: "Ik heb mijn deel gedaan

158
00:08:51,960 --> 00:08:54,700
"En ik wil Windows naar een andere functionaliteit te ondersteunen,

159
00:08:54,700 --> 00:08:56,750
"En ik wil niet te veel code te schrijven om dat te realiseren."

160
00:08:56,750 --> 00:08:59,480
Dat is echt een voordeel van het gebruik van deze functies.

161
00:08:59,480 --> 00:09:01,340
Laat ik je een.

162
00:09:01,340 --> 00:09:05,170
Om dat te doen, zal ik een nieuw schilderij te maken.

163
00:09:05,170 --> 00:09:08,240
Ik heb ook gesproken over het gebruik van elke pixel voor uw app.

164
00:09:08,240 --> 00:09:11,850
Standaard, dit is wat de verf app eruit ziet als je hem gebruikt.

165
00:09:11,850 --> 00:09:14,960
Het is eigenlijk gewoon over alles wat je tekent, uw inhoud.

166
00:09:14,960 --> 00:09:20,850
Ik kon verschrikkelijke dingen hier doen. Wat moet ik tekenen? Ik weet het niet.

167
00:09:20,850 --> 00:09:23,110
Scribbles? Oh, geweldig. Ik kan krabbels doen. Fantastisch.

168
00:09:23,110 --> 00:09:25,130
Een kalkoen? [Lacht]

169
00:09:25,130 --> 00:09:28,500
Dit is de meest abstracte kalkoen u zult zien.

170
00:09:28,500 --> 00:09:31,780
Ik kan ook brengen wat de app bar genaamd,

171
00:09:31,780 --> 00:09:33,850
en dit is echt een van de belangrijkste manieren waarop u kunt gebruiken

172
00:09:33,850 --> 00:09:37,210
alle dingen die op uw applicatie of spel voor zou zijn geweest weg te verbergen

173
00:09:37,210 --> 00:09:39,570
slechts toegang tot de ruimte de hele tijd.

174
00:09:39,570 --> 00:09:43,270
Dus nu kunt u het hier zetten, en dit is echt een van de mooiste ervaringen

175
00:09:43,270 --> 00:09:46,380
met de app bar die ik heb gezien.

176
00:09:46,380 --> 00:09:48,800
Zet de keuzes voor het selecteren van verschillende kleuren.

177
00:09:48,800 --> 00:09:54,310
We wilden een kalkoen, dus we zullen wat bruine hier zetten, beginnen mengen in een paar kleuren.

178
00:09:54,310 --> 00:09:58,790
We zullen een tussenliggende kleur hier en dan hier terug.

179
00:09:58,790 --> 00:10:02,990
U kunt beginnen met tekenen. Daar is je kalkoen. Fantastisch.

180
00:10:02,990 --> 00:10:07,660
Ik kan niet tekenen om mee te beginnen, maar om het te doen met een touchpad in voor een publiek is nog beter.

181
00:10:07,660 --> 00:10:09,640
Dit is geweldig.

182
00:10:09,640 --> 00:10:13,030
Het idee is echter alles wat ik zorg over is hier aan de oppervlakte.

183
00:10:13,030 --> 00:10:17,060
Laten we zeggen dat ik ben zo tevreden met deze die ik heb om het te delen met iemand.

184
00:10:17,060 --> 00:10:19,680
Normaal wat je zou doen met andere versies van Windows,

185
00:10:19,680 --> 00:10:22,900
zou je misschien een screenshot, zou je wat copy-paste van de tekst doen

186
00:10:22,900 --> 00:10:24,950
of dat soort dingen die u wilt delen uit,

187
00:10:24,950 --> 00:10:27,260
en dan gaan en open een andere toepassing en zet het in het.

188
00:10:27,260 --> 00:10:28,630
Hier hoef je niet om dat te doen.

189
00:10:28,630 --> 00:10:32,400
Je kunt eigenlijk brengen de charmes bar en zegt: "Ik wil dit delen."

190
00:10:32,400 --> 00:10:35,000
Op dit punt zal je laten zien alle apps

191
00:10:35,000 --> 00:10:38,080
die weten hoe te werken met alles wat wordt gedeeld.

192
00:10:38,080 --> 00:10:41,590
In dit geval is het een foto, dus het zal zeggen: "Ik zie dat je een foto gekregen."

193
00:10:41,590 --> 00:10:45,590
"Wil je dat delen?" Je ziet heb ik een e-mail me spullen de hele tijd.

194
00:10:45,590 --> 00:10:49,420
Hij erkent dat, en het biedt mij dat als een snelkoppeling,

195
00:10:49,420 --> 00:10:53,270
maar het is ook het tonen van me elke app die weet hoe om te gaan met het nemen van een foto

196
00:10:53,270 --> 00:10:55,520
en er iets mee doen.

197
00:10:55,520 --> 00:10:57,890
Deze hebben allemaal aangegeven naar Windows dat ze dat kunnen doen.

198
00:10:57,890 --> 00:10:59,240
Op dit moment is dit Windows.

199
00:10:59,240 --> 00:11:01,680
De gebruiker kiest gewoon wat ze willen doen.

200
00:11:01,680 --> 00:11:06,610
Ik zal mijn gebruikelijke van PuzzleTouch doen. U kunt zien heb ik allerlei puzzels in de tijd gemaakt.

201
00:11:06,610 --> 00:11:11,790
Ik zal PuzzleTouch nemen en zeggen: "Ik wil deze geweldige creatie met PuzzleTouch te delen."

202
00:11:11,790 --> 00:11:16,670
Het gaat om verder te gaan en te zeggen: "Geweldig. Wil je dit delen? Fantastisch."

203
00:11:16,670 --> 00:11:19,260
"Wil je een puzzel die is gemakkelijk, intermediaire maken, wat dan ook?"

204
00:11:19,260 --> 00:11:20,800
Ik zal een intermediair een hier te maken.

205
00:11:20,800 --> 00:11:24,890
Het maakt de puzzel. Het gaat om een ​​vreselijke raadsel, want het is meestal leeg.

206
00:11:24,890 --> 00:11:28,100
Maar het is klaar, en het is eigenlijk terug in de andere toepassing.

207
00:11:28,100 --> 00:11:32,360
Als ik hier naar buiten komen, kan ik zoek het op en start het.

208
00:11:32,360 --> 00:11:38,100
Als we nu scrollen over een beetje hier, we moeten mijn creatie ergens zien.

209
00:11:38,100 --> 00:11:42,930
Waar ging ik heen? Wat voor soort puzzel heb ik te maken? Heb ik het gemakkelijk maken?

210
00:11:42,930 --> 00:11:46,110
Oh, daar is het, precies daar.

211
00:11:46,110 --> 00:11:49,550
[Grinnikt] Het is de herkenbare puzzel kalkoen die hier is.

212
00:11:49,550 --> 00:11:52,360
Maar het ding wil ik u erop wijzen, de cool ding hier

213
00:11:52,360 --> 00:11:54,710
wordt de apps wist niets over elkaar.

214
00:11:54,710 --> 00:11:58,740
Ze zei alleen: "Ik heb een foto te delen heb, en ik weet hoe om te gaan met foto's."

215
00:11:58,740 --> 00:12:01,420
En u als ontwikkelaar, hoef je niet naar die code te schrijven.

216
00:12:01,420 --> 00:12:05,350
Wanneer iemand mij vraagt ​​om te delen, ik ga een aantal gegevens in dit kleine datastructuur zetten

217
00:12:05,350 --> 00:12:06,740
en ik ben klaar.

218
00:12:06,740 --> 00:12:10,990
De andere app overneemt, doet zijn ding, en dat is het einde van het delen van ervaringen.

219
00:12:10,990 --> 00:12:14,550
Dat is slechts een ding dat je kunt doen - echt, echt krachtig -

220
00:12:14,550 --> 00:12:17,570
en het gaat om een ​​van die dingen die echt kunnen helpen differentiëren uw app

221
00:12:17,570 --> 00:12:20,090
en ook uw spel ook in de winkel.

222
00:12:20,090 --> 00:12:22,220
Mensen gaan om te kunnen zeggen: "Dit is erg handig."

223
00:12:22,220 --> 00:12:25,430
"Ik gebruik deze puzzel schepper de hele tijd. Het is fantastisch."

224
00:12:25,430 --> 00:12:30,490
>> Dat is ongeveer genoeg van een kort overzicht van wat er aan de hand hier.

225
00:12:30,490 --> 00:12:33,670
Er zijn een paar andere functies ook dat we misschien benadrukken als we door code.

226
00:12:33,670 --> 00:12:37,710
Maar ik wil duiken in dia's, en om dat te doen, ik ga naar Desktop,

227
00:12:37,710 --> 00:12:40,940
die zelf een andere live-tegel hier.

228
00:12:40,940 --> 00:12:43,840
Ik kan gaan in deze en, ja hoor, ik ben op mijn dia's,

229
00:12:43,840 --> 00:12:46,320
maar laat ik je eigenlijk waar we zijn.

230
00:12:46,320 --> 00:12:48,460
We zitten eigenlijk in Desktop mode.

231
00:12:48,460 --> 00:12:52,580
Dit is echt waar wat ik eerder zei over Windows verdere uitvoering

232
00:12:52,580 --> 00:12:54,850
voor nieuwe ervaringen toont zich.

233
00:12:54,850 --> 00:12:56,450
Dit is de Windows die je kent.

234
00:12:56,450 --> 00:12:59,730
Windows-toepassingen worden genoemd desktop applicaties. Ze lopen hier.

235
00:12:59,730 --> 00:13:02,730
Als u bestaande apps en u wilt ze draaien op Windows 8,

236
00:13:02,730 --> 00:13:04,710
je absoluut doen.

237
00:13:04,710 --> 00:13:07,590
Dit zijn niet dezelfde dingen als de winkel apps, die zijn hier,

238
00:13:07,590 --> 00:13:12,240
zoals verse verf en deze NBC News apps en dat soort dingen. Die komen uit de winkel.

239
00:13:12,240 --> 00:13:14,450
Ze kunt aansluiten op een aantal van de functies die ik liet zien u

240
00:13:14,450 --> 00:13:16,620
en anderen dat ik je niet gewoon nog niet hebben aangetoond.

241
00:13:16,620 --> 00:13:21,460
Maar hou dat in gedachten. We hebben ondersteuning voor beide dingen ook.

242
00:13:21,460 --> 00:13:27,000
Het spijt me. Is er iets niet zien op het scherm? Ik heb het volledig verloren. Dat is vreemd.

243
00:13:29,000 --> 00:13:31,000
Oke. Bedankt voor deze opmerking.

244
00:13:31,000 --> 00:13:34,770
Wat je nog niet zien voor een tijdje is mijn laten zien dat het bureaublad is hier.

245
00:13:34,770 --> 00:13:37,540
Wat is het laatste wat je zag? Heb je dit gezien?

246
00:13:37,540 --> 00:13:39,490
Dit is het bureaublad. Je weet al hoe het eruit ziet.

247
00:13:39,490 --> 00:13:42,070
Het is niets vreselijk ongewoon.

248
00:13:42,070 --> 00:13:46,940
Het is onze uitvoering die ervaring vooruit voor u en laten u de dingen die je hebt gehad te gebruiken.

249
00:13:46,940 --> 00:13:50,460
Bijvoorbeeld, zal ik laten zien u Visual Studio. Dat is een desktop applicatie.

250
00:13:50,460 --> 00:13:52,600
Het gaat in deze modus.

251
00:13:52,600 --> 00:13:54,960
Het gaat om een ​​meer complexe omgeving te ondersteunen

252
00:13:54,960 --> 00:14:01,470
met veel opties en dat soort dingen, dus het maakt het een goede optie als een desktop app.

253
00:14:01,470 --> 00:14:04,810
>> Dat gezegd hebbende, laten we naar dia's voor net een beetje

254
00:14:04,810 --> 00:14:09,720
en geven u een aantal inleidende inhoud en krijgen dan in hier eigenlijk codering.

255
00:14:09,720 --> 00:14:14,070
Het goede nieuws is dat ik heb gehoord dat je al gericht op een veel CSS en JavaScript, HTML.

256
00:14:14,070 --> 00:14:18,110
Al die dingen die je hebt carry direct leren in het maken van Windows Store apps.

257
00:14:18,110 --> 00:14:22,920
De dingen die je hebt gehoord over met het toepassen van CSS selectors en al die dingen

258
00:14:22,920 --> 00:14:27,180
is precies wat je doet om een ​​aanvraag hier te maken voor de winkel.

259
00:14:27,180 --> 00:14:29,640
We gaan door middel van deze dingen beetje bij beetje.

260
00:14:29,640 --> 00:14:34,130
Kortom, ik ben het bouwen op de dingen die je al de tijd om te leren hebben genomen.

261
00:14:34,130 --> 00:14:36,520
Dit is de algemene grafiek van de technologieën die je zou kunnen gebruiken

262
00:14:36,520 --> 00:14:38,790
om applicaties voor Windows 8 te maken.

263
00:14:38,790 --> 00:14:42,840
Het spul aan de rechterkant, de desktop apps, is echt wat we al weten.

264
00:14:42,840 --> 00:14:46,840
Dat is spul dat is echt de Windows 7 wereld in Windows 8 overgedragen.

265
00:14:46,840 --> 00:14:51,920
Al deze opties dragen naar: C #, VB, Win32 soort ontwikkeling.

266
00:14:51,920 --> 00:14:54,450
Geweldig. Geen probleem. Het nieuwe spul is op de linkerkant.

267
00:14:54,450 --> 00:14:58,220
Dat is Windows Store apps, dat is wanneer ik wil om mijn sollicitatie bedraad in Windows 8

268
00:14:58,220 --> 00:15:02,300
met behulp van al die mogelijkheden, krijgen in de winkel, en krijgen dat echt cool ervaring

269
00:15:02,300 --> 00:15:05,260
van de Windows Store toepassingen.

270
00:15:05,260 --> 00:15:10,350
Om dat te doen, kunt u hier zie dat je al je keuzes hebt met XAML, C + +,

271
00:15:10,350 --> 00:15:14,100
C #, VB, kon je DirectX doen, dat soort dingen, dingen die verder gaan dan de dia.

272
00:15:14,100 --> 00:15:18,650
Maar voor ons, we gaan recht richten op het feit dat HTML, CSS en JavaScript

273
00:15:18,650 --> 00:15:22,890
zijn echt een eersteklas burger voor het maken van applicaties voor Windows 8

274
00:15:22,890 --> 00:15:24,960
en voor de Windows Store.

275
00:15:24,960 --> 00:15:27,950
Dus dit is goed voor iedereen hier en de mensen kijken op video

276
00:15:27,950 --> 00:15:30,760
want je kunt gewoon gebruikmaken van al die ervaringen die je hebt

277
00:15:30,760 --> 00:15:33,900
en echt binden in wat Windows biedt.

278
00:15:33,900 --> 00:15:37,870
Je gaat dat doen door middel van een set van API's, die geen verrassing zou moeten zijn.

279
00:15:37,870 --> 00:15:39,920
Elk OS heeft zijn eigen API's.

280
00:15:39,920 --> 00:15:43,530
We bloot wat Windows kan doen door wat heet WinRT.

281
00:15:43,530 --> 00:15:46,370
Het is een set van API's die net doet alles voor je.

282
00:15:46,370 --> 00:15:51,650
Als u nodig hebt om bestanden te openen, moet u de camera, geolocatie, dat soort dingen te gebruiken,

283
00:15:51,650 --> 00:15:55,700
ze gaan door wat Windows kan bieden.

284
00:15:55,700 --> 00:15:59,370
Om toegang te krijgen dat, we hebben wat meer JavaScript dat gaat om het nog makkelijker te maken

285
00:15:59,370 --> 00:16:02,510
voor u om dat te doen. We zullen dat in een moment.

286
00:16:02,510 --> 00:16:04,060
Maar voor nu, dat is eigenlijk uw wegenkaart.

287
00:16:04,060 --> 00:16:06,770
De dingen die je al hebt gedaan op de top van een aantal API's

288
00:16:06,770 --> 00:16:11,280
die helpen bij het werken met Windows gelijk store app.

289
00:16:11,280 --> 00:16:14,210
En dat is echt alles wat je moet weten van het hoge niveau.

290
00:16:14,210 --> 00:16:17,370
>> We gaan duiken in werkelijk aan de slag met de spullen nu.

291
00:16:18,940 --> 00:16:21,950
De dingen die je hebt waarschijnlijk al een hoop gezien,

292
00:16:21,950 --> 00:16:26,760
met IE9 een tijdje geleden introduceerden wij ondersteuning voor een groot deel van de, op dat moment,

293
00:16:26,760 --> 00:16:30,340
nieuwere standaarden op het web, dus een hoop nieuwe CSS-functies,

294
00:16:30,340 --> 00:16:34,380
veel nieuwe HTML, ECMAScript 5, dat is echt webbrowser.

295
00:16:34,380 --> 00:16:38,090
Dus alles voor die behalve voor de strikte modus was in IE9.

296
00:16:38,090 --> 00:16:42,290
Gewoon een hoop dingen met CSS, CSS3, allemaal in.

297
00:16:42,290 --> 00:16:45,300
En al deze spullen wordt overgenomen in wat we doen met Windows 8.

298
00:16:45,300 --> 00:16:49,350
U kunt deze dingen te gebruiken, en je kunt alles wat er nieuw is in IE10 gebruiken.

299
00:16:49,350 --> 00:16:54,640
Met IE10 introduceren we ondersteuning voor al deze dingen ook.

300
00:16:54,640 --> 00:16:59,340
Ze zijn allemaal met hardwareversnelling, dus als je op een machine die een soort van GPU heeft,

301
00:16:59,340 --> 00:17:04,190
dat is waarschijnlijk vrijwel elke machine die u in de afgelopen 8 jaar kon krijgen,

302
00:17:04,190 --> 00:17:07,609
je gaat om te kunnen hardware-versnelde uitvoer heeft,

303
00:17:07,609 --> 00:17:11,770
visuele output met CSS, Canvas, SVG.

304
00:17:11,770 --> 00:17:14,339
Al die dingen zullen gaan door hardwareversnelling

305
00:17:14,339 --> 00:17:16,060
en dat veel sneller en efficiënter.

306
00:17:16,060 --> 00:17:20,440
De korte versie van dit alles - ik ben niet van plan om te gaan door elk ding hier -

307
00:17:20,440 --> 00:17:23,200
als je het ziet op deze lijst, als je het kan doen in IE10,

308
00:17:23,200 --> 00:17:25,650
als het een web app die je draait die werkt in IE10,

309
00:17:25,650 --> 00:17:28,640
het is iets wat je kunt doen als een Windows Store app.

310
00:17:28,640 --> 00:17:33,100
En dat is het zowat. Dus als het werkt in IE10, het gaat om te werken als een Windows Store app.

311
00:17:33,100 --> 00:17:36,370
Het is op de tafel als iets dat je zou kunnen gebruiken.

312
00:17:36,370 --> 00:17:40,510
>> Er is veel hier. We hebben geen tot middernacht, dus ik kan niet alles hier beoordelen.

313
00:17:40,510 --> 00:17:44,060
Maar er zijn een aantal sites die u zullen helpen te begrijpen wat deze dingen kunnen doen,

314
00:17:44,060 --> 00:17:45,520
en ik zal u een van hen zien in een tweede.

315
00:17:45,520 --> 00:17:48,410
Ik wilde alleen maar wijzen op een paar van de belangrijkste dingen die je zou kunnen kijken.

316
00:17:48,410 --> 00:17:51,560
Misschien heb je al een aantal van deze gezien in je studie,

317
00:17:51,560 --> 00:17:56,610
maar deze zijn erg behulpzaam, vooral met Windows Store apps, van de CSS kant.

318
00:17:56,610 --> 00:18:02,420
Dus de mogelijkheid om transformaties en overgangen doen, bieden beweging met animatie -

319
00:18:02,420 --> 00:18:07,010
deze zijn allemaal onderdeel van CSS nu, en ze zijn allemaal ondersteund door moderne browsers,

320
00:18:07,010 --> 00:18:11,370
en IE10 en IE9 hebben steun rekenen voor al deze dingen toegevoegd.

321
00:18:11,370 --> 00:18:15,220
En dus waarom jezelf schrijven, waarom ga door al de moeite van het doen van deze dingen met de hand

322
00:18:15,220 --> 00:18:19,970
toen kon je gebruik maken van een eenvoudige CSS transformeren naar een 3D-effect voor uw toepassing te maken?

323
00:18:19,970 --> 00:18:22,740
Geweldig. Dat is hoe het werkt.

324
00:18:22,740 --> 00:18:24,530
Ik kan het niet maken moeilijker dan dat.

325
00:18:24,530 --> 00:18:28,330
Als je weet hoe het te doen in CSS, je weet hoe het te doen in de Windows Store app.

326
00:18:28,330 --> 00:18:32,080
>> Die verder gaat dan die voor layout, dingen als zelfs de winkel app,

327
00:18:32,080 --> 00:18:35,350
maar verder gaat dan dat, kijkend naar misschien een nieuws app die getoond wordt u artikels

328
00:18:35,350 --> 00:18:40,160
of recepten of dat soort dingen, die andere soorten functies in CSS echt bruikbaar zijn:

329
00:18:40,160 --> 00:18:45,610
Grid, Flexbox, CSS Regio is meer een vrij nieuwe standaard.

330
00:18:45,610 --> 00:18:51,190
Deze dingen gaan allemaal om u te helpen de inhoud lay-out en inhoud stromen tussen secties,

331
00:18:51,190 --> 00:18:55,470
kunnen paginering en woordafbreking doen zonder dat u de spullen zelf schrijft.

332
00:18:55,470 --> 00:18:57,500
Je zegt gewoon: "Voer de volgende stappen voor mij,"

333
00:18:57,500 --> 00:19:00,850
en als het scherm onroerend goed is verschillend op verschillende machines

334
00:19:00,850 --> 00:19:03,850
of zoals u zult zien in een moment, als je een applicatie snap

335
00:19:03,850 --> 00:19:07,920
om kleinere hoeveelheden van de ruimte op het scherm hebben, dat is geen probleem voor CSS.

336
00:19:07,920 --> 00:19:11,160
Het kan profiteren van - een vervelend gesprek over media queries in een tweede -

337
00:19:11,160 --> 00:19:15,880
het kan zorgen voor dingen met herpositionering uw inhoud, vloeiende content van regio's

338
00:19:15,880 --> 00:19:21,240
gewoon met deze dingen die je misschien al gezien hebben met webtechnologie.

339
00:19:21,240 --> 00:19:25,470
>> Op de HTML5 kant, zijn er ook een hoop dingen

340
00:19:25,470 --> 00:19:28,140
dat zal zeer nuttig zijn voor u met Windows Store apps.

341
00:19:28,140 --> 00:19:30,980
Nogmaals, we zullen niet gaan door al deze, maar ze zijn gewoon hier.

342
00:19:30,980 --> 00:19:35,470
Dus als je nodig hebt om het te gebruiken, audio-video, als je wilt om de validatie te doen van formulieren,

343
00:19:35,470 --> 00:19:40,570
geolocatie, alle dingen die je kunt doen in JavaScript met JavaScript 5 of ECMAScript 5,

344
00:19:40,570 --> 00:19:44,070
IndexedDB voor lokale opslag - het zijn allemaal opties voor je.

345
00:19:44,070 --> 00:19:49,300
Als u op zoek bent naar een antwoord, kijk maar om bestaande technologieën met HTML5 en CSS

346
00:19:49,300 --> 00:19:53,880
en je zult gemakkelijker antwoorden dan te moeten veel van dat spul zelf rollen te vinden.

347
00:19:53,880 --> 00:19:55,510
Laat me je een beetje rond hier.

348
00:19:55,510 --> 00:19:57,920
Ik heb een site die we kunnen gaan.

349
00:19:57,920 --> 00:20:01,590
Laat me stoppen uit deze glijbaan voor een tweede.

350
00:20:01,590 --> 00:20:06,450
>> Als we gaan uit naar IETestDrive.com,

351
00:20:06,450 --> 00:20:08,960
Ik zal niet veel van een demo hier doen.

352
00:20:08,960 --> 00:20:14,360
IETestDrive.com is echt laat je veel van wat er nieuw is met IE10,

353
00:20:14,360 --> 00:20:16,220
de dingen die je kunt doen.

354
00:20:16,220 --> 00:20:19,130
Ik vind dit echt nuttig omdat in plaats van het lezen door een bos van white papers,

355
00:20:19,130 --> 00:20:23,020
kijken naar een paar demo's, en dat gaat om u te helpen zet het op je eigen persoonlijke radar

356
00:20:23,020 --> 00:20:26,620
over de vraag of een technologie zinvol is om nog te doen meer onderzoek met

357
00:20:26,620 --> 00:20:29,070
zodat u zult begrijpen, "Ik zie wat dit is voor."

358
00:20:29,070 --> 00:20:32,780
"Ik begrijp wat Request Animation Frame doet voor mij."

359
00:20:32,780 --> 00:20:36,900
"Ik begrijp hoe ik Gewesten of SVG-filters kunnen gebruiken."

360
00:20:36,900 --> 00:20:40,190
Je ziet ze in actie, bekijk ze op een voorbeeld hier,

361
00:20:40,190 --> 00:20:44,930
en zelf bepalen of dat gaat nuttig voor u om in uw eigen projecten en daarbuiten

362
00:20:44,930 --> 00:20:47,840
als u blijven werken met webtechnologie.

363
00:20:47,840 --> 00:20:49,900
Hier zou ik je gewoon aan te moedigen om een ​​kijkje te nemen.

364
00:20:49,900 --> 00:20:52,880
Ik denk niet dat ik veel tijd daadwerkelijk uitvoeren van deze.

365
00:20:52,880 --> 00:20:56,030
We hebben genoeg om te laten zien met het schrijven van code gekregen.

366
00:20:56,030 --> 00:21:01,640
Je zult hier dingen vanuit aanraking effecten aan te raken-based games in dat gedeelte,

367
00:21:01,640 --> 00:21:06,050
animatie, echt snel hardware-versnelde animatie daar,

368
00:21:06,050 --> 00:21:11,230
enkele optimalisaties die je ziet in een aantal van deze monsters ook,

369
00:21:11,230 --> 00:21:12,770
en er is veel, veel meer.

370
00:21:12,770 --> 00:21:15,330
Als je hier over te gaan en het openstellen van de site map,

371
00:21:15,330 --> 00:21:19,070
er is gewoon een belachelijk aantal monsters hier.

372
00:21:19,070 --> 00:21:20,690
U kunt ze hier allemaal bekijken.

373
00:21:20,690 --> 00:21:22,900
Als u op zoek bent naar iets of je gehoord over iets

374
00:21:22,900 --> 00:21:25,850
en je je afvraagt ​​misschien zou dit iets leuks om te gebruiken in de app zijn,

375
00:21:25,850 --> 00:21:31,720
proberen te kijken hier, en er is waarschijnlijk een vrij goede demo voor het aan jezelf te redden wat tijd.

376
00:21:31,720 --> 00:21:35,980
>> Oke? Eventuele vragen tot nu toe voor de mensen hier?

377
00:21:35,980 --> 00:21:39,620
Oke. We zullen hier uit te voeren.

378
00:21:39,620 --> 00:21:41,920
Nogmaals, kijk maar dat uit.

379
00:21:41,920 --> 00:21:45,450
Ze zijn webstandaarden, dus ga naar een andere showcase sites die jij

380
00:21:45,450 --> 00:21:50,550
en kijk of deze technologieën zinvol voor wat je probeert te doen.

381
00:21:50,550 --> 00:21:53,190
>> Terug naar dia.

382
00:21:53,190 --> 00:22:00,290
Dat gezegd hebbende, je verplaatsen van een webpagina wereld om echt een geïnstalleerde lokale toepassing wereld,

383
00:22:00,290 --> 00:22:01,850
dus er zijn een aantal dingen om hier te wijzen.

384
00:22:01,850 --> 00:22:03,690
Allereerst, er is geen webserver hier bij betrokken.

385
00:22:03,690 --> 00:22:06,120
Er is geen Apache, is er geen IIS hier lopen

386
00:22:06,120 --> 00:22:10,170
waar je van pagina's naar een externe client, naar een externe browser middel.

387
00:22:10,170 --> 00:22:13,000
In dit geval, is werkelijk alles op verpakt voor u.

388
00:22:13,000 --> 00:22:16,630
U dient dat als uw aanvraag naar de winkel, het wordt gecertificeerd,

389
00:22:16,630 --> 00:22:22,190
het is in de winkel, en dan gaan mensen door de duizenden zal je spel of je app te installeren.

390
00:22:22,190 --> 00:22:24,780
Maar in principe, ze zijn het naar beneden trekken lokaal om hun machine.

391
00:22:24,780 --> 00:22:29,080
Er is geen noodzaak meer uit te gaan naar het web, tenzij u oproepen met een externe API nodig,

392
00:22:29,080 --> 00:22:31,790
en dat is volkomen normaal als goed ook.

393
00:22:31,790 --> 00:22:35,330
Maar ze zijn niet van plan om in die modus waar ze moeten geantwoord gaan van een server

394
00:22:35,330 --> 00:22:37,910
naar de volgende pagina van de inhoud te krijgen.

395
00:22:37,910 --> 00:22:41,380
Dus dat gezegd, er zijn een paar kleine verschillen API. Deze zijn ongelooflijk klein.

396
00:22:41,380 --> 00:22:46,850
Ze zijn onwaarschijnlijk dat je raakt in je normale codering, maar ze zijn in ieder geval gedocumenteerd.

397
00:22:46,850 --> 00:22:50,030
Ze zijn soort daar rand gevallen.

398
00:22:50,030 --> 00:22:53,370
>> De andere zaak gewezen is het vertrouwen verschillen.

399
00:22:53,370 --> 00:22:58,070
Ik noem slechts dit omdat ik wil gewoon zeker weten dat ik zei dat het

400
00:22:58,070 --> 00:23:01,580
dus als je later tegenkomt, zult u denken, "Chris zei iets over deze,

401
00:23:01,580 --> 00:23:04,890
"Dus misschien, ja, oke," en dan ga je terug en je erachter wat het was.

402
00:23:04,890 --> 00:23:06,480
Contexten uit.

403
00:23:06,480 --> 00:23:11,450
Standaard proberen we om de gebruiker te beschermen tegen aanvalsvectoren.

404
00:23:11,450 --> 00:23:13,400
Er zijn bepaalde dingen die je kunt doen door standaard

405
00:23:13,400 --> 00:23:16,130
en bepaalde dingen die je nodig hebt om context te veranderen om te schakelen.

406
00:23:16,130 --> 00:23:19,860
Als u gebruikmaakt van een aantal bibliotheken die er zijn - you've al werken met jQuery,

407
00:23:19,860 --> 00:23:23,650
maar als je kijkt naar andere bibliotheken die er zijn - je zou kunnen gebruiken sommige functies

408
00:23:23,650 --> 00:23:28,000
dat soort gaat dan plaatselijk gebruik, maakt meer dynamische interacties

409
00:23:28,000 --> 00:23:30,360
XHR verzoeken, dat soort dingen.

410
00:23:30,360 --> 00:23:33,090
Soms zou u kunnen vinden die worden standaard uitgeschakeld,

411
00:23:33,090 --> 00:23:37,790
en in dat geval, doe enkel een onderzoek, op zoek naar lokale en web context,

412
00:23:37,790 --> 00:23:39,560
en je zult ontdekken hoe dat op te lossen.

413
00:23:39,560 --> 00:23:42,580
Zorg ervoor dat je wist dat als je begint met andere kaders te gebruiken,

414
00:23:42,580 --> 00:23:45,720
die, ik moet zeggen, ben je perfect in staat om te doen.

415
00:23:45,720 --> 00:23:49,290
Dus als je een ander kader te vinden - een vervelend hierover praten in een tweede -

416
00:23:49,290 --> 00:23:54,000
voor gaming en je wilt gebruiken, je wilt wat controle bibliotheken die er gebruik

417
00:23:54,000 --> 00:23:57,990
en u niet wilt dat spul zelf te schrijven - het is een goed idee, toch? -

418
00:23:57,990 --> 00:23:59,560
je absoluut gebruiken dit spul.

419
00:23:59,560 --> 00:24:03,660
Er is niets houdt je van het gebruik van elke vorm van bibliotheek die is gebaseerd op JavaScript,

420
00:24:03,660 --> 00:24:05,380
CSS, HTML5.

421
00:24:05,380 --> 00:24:09,740
Nogmaals, als het iets is wat je kunt doen in IE10, dat is een deurklink van een veel deze dagen,

422
00:24:09,740 --> 00:24:11,220
je kunt het doen.

423
00:24:11,220 --> 00:24:14,800
Trek het in uw app, referentie die JavaScript-bibliotheek, en gebruik het in uw toepassing,

424
00:24:14,800 --> 00:24:19,880
enkel rekening houdend met je misschien een security context keer geraakt in een tijd - niet heel vaak.

425
00:24:19,880 --> 00:24:24,150
>> En dan de functies, gaan we over een paar meer van die als we gaan.

426
00:24:24,150 --> 00:24:27,500
De UX je soort van wennen als je ziet meer en meer toepassingen

427
00:24:27,500 --> 00:24:29,250
uit de Windows Store.

428
00:24:29,250 --> 00:24:33,870
Je krijgt een gevoel voor hoe ze werken en hoe het ontwerp esthetisch heeft de neiging om te werken

429
00:24:33,870 --> 00:24:37,720
over verschillende toepassingen en welke mensen zullen gebruikt ervaren.

430
00:24:37,720 --> 00:24:39,660
Dat is echt het belangrijkste onderdeel.

431
00:24:39,660 --> 00:24:42,460
Zorg ervoor dat wanneer ze start uw applicatie die zij niet nodig om een ​​handleiding te lezen,

432
00:24:42,460 --> 00:24:44,300
die ze nooit doen, trouwens.

433
00:24:44,300 --> 00:24:46,650
Ze moeten gewoon in staat zijn om te beginnen te spelen met uw aanvraag

434
00:24:46,650 --> 00:24:49,450
en out ervan uitgaande dat het zonder veel moeite.

435
00:24:49,450 --> 00:24:52,660
Door vast te houden en vast te houden aan veel van deze praktijken,

436
00:24:52,660 --> 00:24:57,640
je gaat om uw gebruikers een groot plezier te doen, maakt dat gemakkelijker.

437
00:24:57,640 --> 00:25:01,810
>> Oke. Een laatste ding op de API-kant en dan zullen we in feite het schrijven van code.

438
00:25:01,810 --> 00:25:05,660
WinJS is dat wat ik gezegd heel kort met dat complexe dia

439
00:25:05,660 --> 00:25:08,850
met al die verschillende keuzes die je hebt voor het maken van applicaties.

440
00:25:08,850 --> 00:25:10,890
WinJS, kunt u denken aan het als een buddy.

441
00:25:10,890 --> 00:25:13,680
Het is je vriend te helpen schrijven spullen sneller.

442
00:25:13,680 --> 00:25:18,820
Het is gewoon JavaScript en CSS. Je hoeft niet om het te gebruiken. U kunt het gebruiken.

443
00:25:18,820 --> 00:25:22,180
Als je gaat bellen bij Windows functies, zal je uiteindelijk het gebruik ervan,

444
00:25:22,180 --> 00:25:27,210
maar als er dingen zoals sommige design patterns of controles die je echt niet wilt gebruiken,

445
00:25:27,210 --> 00:25:29,090
je wilt iets anders te gebruiken, het is aan jou.

446
00:25:29,090 --> 00:25:32,580
Bepaal wat je wilt gebruiken en de stijlen die u wilt gebruiken.

447
00:25:32,580 --> 00:25:37,250
De kenmerken van namespacing en klasse generatie - aan jou.

448
00:25:37,250 --> 00:25:41,650
Als u liever een of het ander, het is volledig uw keuze. Het is nog steeds JavaScript en CSS.

449
00:25:41,650 --> 00:25:43,860
Maar het gaat om je te helpen een heleboel dingen.

450
00:25:43,860 --> 00:25:47,780
Bijvoorbeeld, hier is een subset van wat het kan doen,

451
00:25:47,780 --> 00:25:50,790
dingen zoals het helpen van asynchrone programmering met beloften.

452
00:25:50,790 --> 00:25:54,000
Iemand van jullie gehoord of werkte met Node.js?

453
00:25:54,000 --> 00:25:59,520
Het is een gemeenschappelijk patroon te werken met asynchrone programmering.

454
00:25:59,520 --> 00:26:02,370
Dus eigenlijk wat je wil zegt: "Ga iets doen,

455
00:26:02,370 --> 00:26:05,790
"En je gaat me een belofte dat je weer terug naar mij als je klaar bent te geven."

456
00:26:05,790 --> 00:26:08,400
Dat is in wezen wat er gaande is.

457
00:26:08,400 --> 00:26:12,400
U hoeft dus niet bevriezen uw aanvraag terwijl de gebruiker gaat en het kiezen van een bestand

458
00:26:12,400 --> 00:26:15,810
of er iets wordt stroomden van het web.

459
00:26:15,810 --> 00:26:17,210
De UI blijft responsief.

460
00:26:17,210 --> 00:26:19,410
En je kunt dat doen met behulp van asynchrone programmering.

461
00:26:19,410 --> 00:26:23,620
Het klinkt belachelijk ingewikkeld, maar het is echt makkelijk, want je gebruikt beloften

462
00:26:23,620 --> 00:26:27,900
en je gewoon zeggen: "Ga dit doen en als je klaar bent, bel dan terug naar deze methode."

463
00:26:27,900 --> 00:26:30,270
Dat is vrij veel. Dat is alles ingebouwd in WinJS.

464
00:26:30,270 --> 00:26:35,120
Het gaat om het een stuk makkelijker om echt flexibele en krachtige toepassingen te schrijven.

465
00:26:35,120 --> 00:26:37,870
>> U kunt de rest hier te zien, veel animaties.

466
00:26:37,870 --> 00:26:41,240
Waarschijnlijk een van de meer belangrijke dingen op deze dia zijn controles.

467
00:26:41,240 --> 00:26:44,680
Ik denk dat ik een heel - ja, ik doe.

468
00:26:44,680 --> 00:26:48,900
Hier is een voorbeeld van slechts enkele van de besturingselementen die u kunt gebruiken in uw applicaties.

469
00:26:48,900 --> 00:26:51,060
Dit is allemaal recht omhoog uit WinJS.

470
00:26:51,060 --> 00:26:53,430
U bent niet het schrijven van deze zelf,

471
00:26:53,430 --> 00:26:55,990
je gewoon zeggen: "Hier is hoe ik wil dat mijn aanvraag samen te stellen."

472
00:26:55,990 --> 00:26:59,420
"Ik zal een flip uitzicht te gebruiken, zodat ik kan gaan tussen de verschillende foto's."

473
00:26:59,420 --> 00:27:03,380
Ik heb je niet zien Semantic Zoom. Ik zal je laten zien dat in een tweede.

474
00:27:03,380 --> 00:27:05,700
Listviews. Er is GridViews.

475
00:27:05,700 --> 00:27:08,680
Je hebt al een raster gezien als onderdeel van de winkel applicatie,

476
00:27:08,680 --> 00:27:12,170
dus de mogelijkheid om blokken inhoud te gebruiken en het scrollen over die.

477
00:27:12,170 --> 00:27:15,660
Flyout menu zie je van tijd tot tijd.

478
00:27:15,660 --> 00:27:19,090
De app bar heb ik laten zien met dat Fresh Paint aanvraag, alsmede,

479
00:27:19,090 --> 00:27:22,190
dus je zag hoe u kunt aanpassen dat door de invoering knoppen op het

480
00:27:22,190 --> 00:27:26,360
en met dat verstoppen wanneer je niet kan schelen om dat te gebruiken.

481
00:27:26,360 --> 00:27:28,120
Dat is echt helemaal aan jou om te gebruiken.

482
00:27:28,120 --> 00:27:30,210
Dit zijn alle controles die deel uitmaken van WinJS.

483
00:27:30,210 --> 00:27:33,640
Ik zal je laten zien hoe deze te maken in slechts een seconde, maar er is meer dan alleen dit,

484
00:27:33,640 --> 00:27:37,060
en het belangrijkste is ze gebruiken als je wilt, wat tijd besparen.

485
00:27:37,060 --> 00:27:40,830
>> Als u nog andere controle bibliotheken die u wilt gebruiken, is dat ook prima.

486
00:27:40,830 --> 00:27:46,300
Dingen zoals jQuery UI doen veel van dit soort idee ook,

487
00:27:46,300 --> 00:27:51,280
het verstrekken van meer controles die verder wat u kunt doen in HTML en JavaScript.

488
00:27:52,690 --> 00:27:55,680
Laten we duiken inch Ik heb al gezegd dat. Gebruik wat je wilt.

489
00:27:55,680 --> 00:27:59,680
Houd in gedachten dat je zou kunnen lopen in sommige context kwesties.

490
00:27:59,680 --> 00:28:03,380
Maar je kan zeker mixen en matchen wat voor soort bibliotheken die u prettig bij voelt,

491
00:28:03,380 --> 00:28:06,770
je wilt leren, die u wilt gebruiken, bespaart u tijd.

492
00:28:06,770 --> 00:28:09,850
>> Laten we praten over instrumenten voor een tweede.

493
00:28:09,850 --> 00:28:12,400
U kunt krijgen wat je nodig hebt om te beginnen werken met Windows Store apps.

494
00:28:12,400 --> 00:28:17,360
Als ik weer naar buiten, ik heb te veel dingen hier.

495
00:28:17,360 --> 00:28:21,770
Als je naar deze pagina, die is dev.windows.com,

496
00:28:21,770 --> 00:28:23,300
je kunt alles wat je nodig hebt downloaden.

497
00:28:23,300 --> 00:28:28,170
Als studenten, heb je toegang tot meer dan het algemene publiek heeft wel,

498
00:28:28,170 --> 00:28:30,670
dus je kunt hogere eind versies van Visual Studio te krijgen.

499
00:28:30,670 --> 00:28:34,090
Edwin vermeld kan je al Windows te krijgen ook.

500
00:28:34,090 --> 00:28:36,790
Maar in het algemeen, voor alle ontwikkelaars, kunt u naar deze site

501
00:28:36,790 --> 00:28:40,380
en download alles wat je nodig hebt om een ​​aanvraag in te dienen, en het is allemaal gratis.

502
00:28:40,380 --> 00:28:42,460
Dus er is een gratis versie van Visual Studio,

503
00:28:42,460 --> 00:28:44,450
zijn er een aantal tools die naast dat wordt geïnstalleerd -

504
00:28:44,450 --> 00:28:47,240
alles wat je nodig hebt voor het maken en testen van uw toepassing.

505
00:28:47,240 --> 00:28:50,130
Het is pas wanneer je gaat om uw aanvraag te publiceren naar de winkel

506
00:28:50,130 --> 00:28:52,470
dat je gaat naar een developer account nodig.

507
00:28:52,470 --> 00:28:56,100
Ook dit geloof ik is gratis. Is het gratis voor studenten ook? >> [Guarin] Welke?

508
00:28:56,100 --> 00:28:57,970
De ontwikkelaar rekening, de daadwerkelijke overlegging. >> [Guarin] Ja.

509
00:28:57,970 --> 00:28:59,580
Dat is meer goed nieuws.

510
00:28:59,580 --> 00:29:00,840
Je gaat kijken naar dit.

511
00:29:00,840 --> 00:29:03,840
Het zal zeggen voor een individuele standaard het is $ 49.

512
00:29:03,840 --> 00:29:06,140
Maar maak je niet aanmelden voor dat als een student.

513
00:29:06,140 --> 00:29:10,250
We zullen je wat informatie te krijgen via uw programma's die u een gratis rekening kunt krijgen,

514
00:29:10,250 --> 00:29:13,980
en dat laat je dan stuur je applicaties tot aan de winkel,

515
00:29:13,980 --> 00:29:17,370
zoveel als je wilt, en dat alles goedheid zal spoedig volgen.

516
00:29:17,370 --> 00:29:19,710
Dus dat is dev.windows.com.

517
00:29:19,710 --> 00:29:22,170
U kunt de tools die je nodig zou kunnen hebben van hier downloaden.

518
00:29:22,170 --> 00:29:25,310
En als u wilt, kunt u een proefversie van Windows hier krijgen,

519
00:29:25,310 --> 00:29:27,160
maar nogmaals, zult u niet nodig hebt.

520
00:29:27,160 --> 00:29:32,880
>> De andere site - wil ik erop wijzen dit uit voor u snel - is design.windows.com.

521
00:29:32,880 --> 00:29:34,770
Dat was dev.windows.com.

522
00:29:34,770 --> 00:29:37,770
Design.windows.com, kun je raden waar het voor is.

523
00:29:37,770 --> 00:29:40,380
Het is eigenlijk een vrij vriendelijke site. Er is veel goede informatie hier.

524
00:29:40,380 --> 00:29:41,770
U kunt werken doorheen.

525
00:29:41,770 --> 00:29:43,960
Het zal u enkele adviezen over sommige dingen geven

526
00:29:43,960 --> 00:29:46,760
dat je misschien nog niet eerder hebben nagedacht of te maken gehad met vroeger,

527
00:29:46,760 --> 00:29:50,780
zoals het ontwerpen voor touch, het ontwerpen voor verschillende vormfactoren,

528
00:29:50,780 --> 00:29:55,310
het ontwerpen voor de mogelijkheden van Windows 8, de dingen die ik eerder al noemde

529
00:29:55,310 --> 00:29:58,740
zoals het zoeken en delen, sommige dingen die ik nog niet gesproken over nog.

530
00:29:58,740 --> 00:30:05,570
Ze zijn allemaal hier vermeld, en het is een vrij goede set handige bestand pagina's

531
00:30:05,570 --> 00:30:08,670
dat zal u helpen te begrijpen hoe je een bepaald soort aanvraag in te dienen,

532
00:30:08,670 --> 00:30:14,250
hoe je interactie doen, hoe om te gaan met de UI en UX van uw aanvraag.

533
00:30:14,250 --> 00:30:18,630
Ik zou aanraden dat u een kijkje op deze te nemen, vooral als je op een bepaald punt

534
00:30:18,630 --> 00:30:22,960
in de hoop om een ​​applicatie te publiceren naar de winkel.

535
00:30:22,960 --> 00:30:25,250
Je gaat te willen weten hoe je een goede applicatie maken

536
00:30:25,250 --> 00:30:28,300
omdat ik al eerder als je dat niet gezegd, er is die beoordelingen weer.

537
00:30:28,300 --> 00:30:29,930
Mensen gaan om ongelukkig te zijn.

538
00:30:29,930 --> 00:30:32,960
Zij zullen niet in staat zijn om dingen die ze verwachten in de juiste plaatsen te vinden.

539
00:30:32,960 --> 00:30:36,590
Niemand wil dat jou overkomt.

540
00:30:36,590 --> 00:30:39,220
>> We gaan vooruit hier, laat mij sluiten die naar beneden.

541
00:30:39,220 --> 00:30:43,700
Nu dat je weet waar je spullen te krijgen, zal ik laten zien hoe je nu eigenlijk gaan gebruiken spullen.

542
00:30:43,700 --> 00:30:48,520
Om te beginnen, ik zal je eigenlijk zien hier een voorbeeld van desktop apps op mijn Startscherm.

543
00:30:48,520 --> 00:30:53,600
Hier kunt u Visual Studio zien, kunt u zien Blend en andere developer tools die ik heb.

544
00:30:53,600 --> 00:30:55,890
Ze hebben een iets andere tegel.

545
00:30:55,890 --> 00:30:57,930
Dat komt omdat ze zijn desktop applicaties,

546
00:30:57,930 --> 00:31:00,960
en in die gevallen dat ze gaan allemaal terug te lanceren om mijn desktop

547
00:31:00,960 --> 00:31:05,350
eigenlijk net zoals apps die je gewend bent.

548
00:31:05,350 --> 00:31:06,960
Dus Windows-ervaring, het is hetzelfde.

549
00:31:06,960 --> 00:31:12,940
Ze zijn bijvoorbeeld niet, zoals Armed! of deze dingen. Laat me snel te starten een.

550
00:31:12,940 --> 00:31:14,340
Eigenlijk, hier is een interessante.

551
00:31:14,340 --> 00:31:19,210
Dit werd ontwikkeld door studenten die in partnerschap op NERD.

552
00:31:19,210 --> 00:31:23,430
Schermvullend programma, dit soort ervaringen hier.

553
00:31:23,430 --> 00:31:26,290
Oh, mooi gesneden schermen en allerlei leuke dingen.

554
00:31:26,290 --> 00:31:34,330
Zij ontwikkelde deze. We kunnen net zo goed laten zien de hele zaak, terwijl we toch bezig zijn.

555
00:31:37,510 --> 00:31:41,070
Sterker nog, ik werkte met hen een beetje, gaf hen wat advies over dingen

556
00:31:41,070 --> 00:31:44,160
omdat ze JavaScript deden voor hun toepassing.

557
00:31:44,160 --> 00:31:46,460
Alsjeblieft, ik neem geen krediet voor hun werk, ze deed al het werk.

558
00:31:46,460 --> 00:31:48,990
Ik heb ze maar een klein beetje advies hier en daar,

559
00:31:48,990 --> 00:31:52,400
maar ze hebben een aantal geweldige dingen met behulp van een JavaScript front-end

560
00:31:52,400 --> 00:31:56,920
en koppelverkoop in sommige physics engines en dingen die er te veel van dit werk te maken.

561
00:32:00,120 --> 00:32:03,360
Gaan. Eens kijken of dat werkt.

562
00:32:03,360 --> 00:32:07,010
Wow, het werkte nog steeds. Oke, goed. Maar je krijgt het idee.

563
00:32:07,010 --> 00:32:09,350
Een full screen app, echt een goede ervaring.

564
00:32:09,350 --> 00:32:14,250
Deze ondersteunt niet alleen mijn muis en pen als ik dat soort dingen, maar ook aanraken.

565
00:32:14,250 --> 00:32:19,420
Als ik een touch screen, kon ik gewoon tekenen op het en blijven werken met dat.

566
00:32:19,420 --> 00:32:21,440
>> Een ding dat ik niet laten zien, en de reden waarom ik ben om dit op

567
00:32:21,440 --> 00:32:23,840
is Ik wilde naar een andere app om te laten zien wat je kunt doen,

568
00:32:23,840 --> 00:32:29,480
je kunt eigenlijk toepassingen in Windows te nemen en sleep ze naar de zijkant van het scherm.

569
00:32:29,480 --> 00:32:33,070
Dit heet het breken van een aanvraag.

570
00:32:33,070 --> 00:32:37,800
In dit geval heb ik Inkarus genomen en ik heb het toegevoegd aan de kant staan.

571
00:32:37,800 --> 00:32:42,990
Het is nu in Snap uitzicht, en dat me in staat stelt om iets anders te doen, terwijl die toepassing is er.

572
00:32:42,990 --> 00:32:46,210
De meeste spellen vind je zult gewoon pauzeren.

573
00:32:46,210 --> 00:32:51,090
Dat is normaal gesproken een goede ding om te doen, tenzij je spel een of andere manier kan afbouwen

574
00:32:51,090 --> 00:32:54,210
om dat kleine van een resolutie, zoals misschien een soort van bordspellen

575
00:32:54,210 --> 00:32:55,620
of dat soort dingen op de gelegenheid.

576
00:32:55,620 --> 00:32:58,570
Maar in het algemeen, de makkelijkste om te doen en de meest geschikte ding om te doen voor games

577
00:32:58,570 --> 00:33:00,620
is om de applicatie te pauzeren.

578
00:33:00,620 --> 00:33:09,440
Voor toepassingen zoals nieuws apps, als ik start dit een en dan ik snap het,

579
00:33:09,440 --> 00:33:16,170
je ziet het eigenlijk aanzienlijk verandert in hoe het de presentatie van de gegevens aan u.

580
00:33:16,170 --> 00:33:20,070
Hier het toont je echt een meer verticale pan die informatie,

581
00:33:20,070 --> 00:33:23,340
maar ik kan nog steeds absoluut gebruik maken van de applicatie.

582
00:33:23,340 --> 00:33:25,640
Dus het is nog altijd zeer bruikbaar.

583
00:33:25,640 --> 00:33:29,870
Het feit dat het in een kleinere oog me niet houden van het gebruik van die app. Zo denken.

584
00:33:29,870 --> 00:33:32,090
Het is iets dat je nodig hebt om je apps doen tot op zekere hoogte,

585
00:33:32,090 --> 00:33:35,370
maar het is aan u om te bepalen hoe functioneel je apps moet

586
00:33:35,370 --> 00:33:39,080
in zo'n een kleinere omgeving.

587
00:33:39,080 --> 00:33:44,780
Laat me dat een sluiten en terug te gaan naar waar we hier waren.

588
00:33:44,780 --> 00:33:48,110
>> Edwin, je een foto van mij al toegevoegd? >> [Guarin] Ja. >> [Bowen] Kijk dat.

589
00:33:48,110 --> 00:33:51,510
Zie je dat? Edwin een foto toegevoegd. [Lacht]

590
00:33:51,510 --> 00:33:54,410
>> Laten we teruggaan hier in Visual Studio. Laat mij dit te lanceren voor jou.

591
00:33:54,410 --> 00:33:58,170
Ik kon hebt geklikt op de tegel op die Startscherm.

592
00:33:58,170 --> 00:34:02,630
Het bracht me terug in de desktop-modus, en het is de lancering van de desktop-app van Visual Studio.

593
00:34:02,630 --> 00:34:06,790
Dit is de Windows die je al kent.

594
00:34:06,790 --> 00:34:09,100
Ik kan gaan en maak een project hier.

595
00:34:09,100 --> 00:34:11,159
We zullen weer richten op JavaScript, HTML.

596
00:34:11,159 --> 00:34:16,510
Ik ga om uit te gaan en selecteer hier onder JavaScript, Windows Store.

597
00:34:16,510 --> 00:34:19,010
Er is een aantal sjablonen die u kunt gebruiken.

598
00:34:19,010 --> 00:34:21,710
Voor de productiviteit, zou ik adviseren u een kijkje bij enkele van deze andere die hier nemen

599
00:34:21,710 --> 00:34:23,489
zoals de Grid en de Split.

600
00:34:23,489 --> 00:34:25,270
Ze zijn echt handig als je het maken van een applicatie

601
00:34:25,270 --> 00:34:28,960
dat gaat om dat soort ontwerp en navigatie hebben. Je zult zien dat deze veel.

602
00:34:28,960 --> 00:34:33,070
Degene die ik je net liet zien was eigenlijk een instantie van de Grid applicatie.

603
00:34:33,070 --> 00:34:36,880
Dus als je denkt dat je gaat om het maken van een nieuws-app of een RSS-lezer

604
00:34:36,880 --> 00:34:43,120
of iets dergelijks, dat zich bezighoudt met meerdere vermeldingen waarvoor u wilt het detail laten zien,

605
00:34:43,120 --> 00:34:45,989
denken over het gebruik van een van deze sjablonen om snel aan de slag

606
00:34:45,989 --> 00:34:48,380
en het aanpassen van het vanaf daar.

607
00:34:48,380 --> 00:34:50,120
Maar gewoon zo kan ik u alle bewegende delen hier laten zien

608
00:34:50,120 --> 00:34:56,120
Ik ga naar de lege app te maken, en dan zullen we een beetje dieper ingaan op de details.

609
00:34:56,120 --> 00:34:58,690
Ik maak dat blank toepassing hier.

610
00:34:58,690 --> 00:35:01,270
Het gaat om het gehele project voor mij te creëren.

611
00:35:01,270 --> 00:35:03,290
Ik zal het openstellen van de dingen die ik wil laten zien door gebrek.

612
00:35:03,290 --> 00:35:08,550
Laat me even in een klein beetje inzoomen om te laten zien wat er gemaakt voor ons hier.

613
00:35:08,550 --> 00:35:11,350
De dingen die je gaat kijken naar de eerste zijn allemaal vernoemd standaard.

614
00:35:11,350 --> 00:35:15,970
Dus je gaat op zoek naar default.html, default.js en default.css.

615
00:35:15,970 --> 00:35:19,590
Het andere ding om te wijzen is dat we al een verwijzing naar hetgeen ik eerder al noemde.

616
00:35:19,590 --> 00:35:24,530
Dit is WinJS. Niemand eigenlijk noemt het deze lange naam hier.

617
00:35:24,530 --> 00:35:27,710
Het is WinJS, de Windows-bibliotheek voor JavaScript.

618
00:35:27,710 --> 00:35:29,530
Als je het opent, kunt u zien dat het allemaal hier.

619
00:35:29,530 --> 00:35:31,820
Er zijn verschillende CSS-bestanden, is er webbrowser.

620
00:35:31,820 --> 00:35:33,520
Het is er om u te helpen.

621
00:35:33,520 --> 00:35:37,190
Het is er echt aan controles en stijlen en spullen die je gewoon automatisch kunt gebruiken bieden.

622
00:35:37,190 --> 00:35:41,240
Maar nogmaals, als er dingen die je wilt gebruiken in plaats op het gebied van styling en andere controles,

623
00:35:41,240 --> 00:35:45,600
Het is helemaal aan jou. Ik zal laten zien hoe je een paar van die dingen op dit moment gebruiken.

624
00:35:45,600 --> 00:35:51,020
>> Terug over op onze linkerzijde, laat ik je de standaard HTML-pagina.

625
00:35:51,020 --> 00:35:54,490
Je hebt al gezien dat de WinJS spul, en dat is echt alles wat daar gaande is

626
00:35:54,490 --> 00:35:59,930
met die middelste lijnen van markup, maar het binnenhalen van de CSS standaard

627
00:35:59,930 --> 00:36:02,370
en brengen in een paar JavaScript-bestanden uit WinJS.

628
00:36:02,370 --> 00:36:06,400
Je hoeft geen meester van wat er gaande is binnen die bestanden.

629
00:36:06,400 --> 00:36:10,110
Het is vrij interessant om een ​​kijkje te nemen op hen om soort te beoordelen wat er aan de hand

630
00:36:10,110 --> 00:36:14,410
want er is behoorlijk interessant intermediate en gevorderde technieken gebeurt er,

631
00:36:14,410 --> 00:36:18,100
maar het leuke is als ontwikkelaars, je kunt gewoon gebruik maken van hen, ze gewoon gebruiken

632
00:36:18,100 --> 00:36:19,510
en niet echt zorgen te maken over.

633
00:36:19,510 --> 00:36:21,960
U kunt nog steeds een auto te rijden zonder te weten hoe het werkt, toch?

634
00:36:21,960 --> 00:36:24,180
Dus dat is het soort ding dat er aan de hand hier.

635
00:36:24,180 --> 00:36:26,930
Er is controle en stijlen en spullen die je gewoon kunt doorgaan en gebruik

636
00:36:26,930 --> 00:36:31,460
en de code die u kunt gebruiken in een tweede, zonder te weten wat er in zit.

637
00:36:31,460 --> 00:36:33,200
Hier zijn je eigen bestanden.

638
00:36:33,200 --> 00:36:35,860
Dit zijn uw plaatsen dat u uw eigen CSS kan aanpassen

639
00:36:35,860 --> 00:36:38,400
en uw eigen JavaScript om dingen rollen.

640
00:36:38,400 --> 00:36:43,300
U zult het toevoegen zeker andere JavaScript-bestanden en wellicht andere CSS-bestanden

641
00:36:43,300 --> 00:36:47,480
als uw project groeit, maar dit is echt slechts een startpunt.

642
00:36:47,480 --> 00:36:52,570
Hier is de Hello, world equivalent van HTML, dus we zijn weer terug in de body-tag.

643
00:36:52,570 --> 00:36:55,990
Op de top, door de manier, het is de HTML5 doctype,

644
00:36:55,990 --> 00:37:00,060
dus je zult erkennen dat van wat je hebt gewerkt op.

645
00:37:00,060 --> 00:37:04,600
Er is volledige IntelliSense hier zo goed, dus als je dingen zoals het type te doen in een video-tag

646
00:37:04,600 --> 00:37:07,340
en breiden dat uit, heb je waarschijnlijk geleerd over het feit

647
00:37:07,340 --> 00:37:12,760
die je nodig hebt om fallback encoding doen voor video tags in HTML5 - of misschien heb je -

648
00:37:12,760 --> 00:37:17,490
om ervoor te zorgen dat de verschillende browsers ondersteunen voor uw video.

649
00:37:17,490 --> 00:37:22,610
Wij hebben dit soort dingen over HTML, over JavaScript, over CSS.

650
00:37:22,610 --> 00:37:26,020
Die is ingebouwd in, en laat ik je CSS in een tweede.

651
00:37:26,020 --> 00:37:29,430
Hier kun je verder gaan en beginnen met het wijzigen van code, de markup.

652
00:37:29,430 --> 00:37:33,700
In feite, voordat ik iets veranderen, ik ga dit uitvoeren en u laten zien wat je krijgt.

653
00:37:33,700 --> 00:37:35,700
Je gaat naar een splash screen die u kunt aanpassen krijgen

654
00:37:35,700 --> 00:37:40,940
en dan krijg je de Hello, world ervaring hier. Het is fantastisch, toch?

655
00:37:40,940 --> 00:37:42,640
Ga je gang en het schip dat, toch?

656
00:37:42,640 --> 00:37:45,970
Content gaat hier. Dat is de basis wat.

657
00:37:45,970 --> 00:37:48,740
Het kan alleen maar beter vanaf daar.

658
00:37:48,740 --> 00:37:51,300
We zullen verder gaan en toe te voegen in een aantal dingen.

659
00:37:51,300 --> 00:37:53,470
Ik heb een beetje van markup ik ga hier kopiëren kreeg

660
00:37:53,470 --> 00:37:55,740
gewoon dus je hoeft me niet te kijken te typen.

661
00:37:55,740 --> 00:38:02,620
Laat me gaan brengen de toolbox hier, en ik zal dit speld omdat ik dit een paar keer zult moeten doen.

662
00:38:02,620 --> 00:38:05,650
Toolbox, als je niet hebt gezien Visual Studio, is de plaats waar je gaat een heleboel controles vinden.

663
00:38:05,650 --> 00:38:09,050
Je kunt ook stukjes code erin die je kunt hergebruiken.

664
00:38:09,050 --> 00:38:16,360
Hier zal ik gewoon pop in een andere HTML, niets vreselijk geavanceerde helemaal hier.

665
00:38:16,360 --> 00:38:20,170
Het is gewoon de eenvoudige HTML staat dat ik een ingang waar ik kan typen,

666
00:38:20,170 --> 00:38:23,860
Ik heb een knop waar ik het kan voorleggen, en dan heb ik een div dat is in wezen een tijdelijke aanduiding

667
00:38:23,860 --> 00:38:27,360
die ik kan gebruiken om de output van de "Hallo, u dit typ."

668
00:38:27,360 --> 00:38:32,780
Het is de intro van HTML voorbeeld.

669
00:38:32,780 --> 00:38:39,340
Als ik dit uitvoeren, krijgen we automatisch de HTML, maar wij ook automatisch styling krijgen.

670
00:38:39,340 --> 00:38:42,270
Dit is een van de belangrijke dingen van WinJS.

671
00:38:42,270 --> 00:38:47,250
Het zal u standaard een aantal look en feel die is echt consequent

672
00:38:47,250 --> 00:38:50,520
de rest van wat Windows 8 doet.

673
00:38:50,520 --> 00:38:52,110
Hier zie je dingen als de knop.

674
00:38:52,110 --> 00:38:55,890
De knop standaard in HTML lijkt niet op dat, maar hier doet

675
00:38:55,890 --> 00:39:00,880
omdat het krijgen van die CSS vanaf dat CSS-bestand in WinJS.

676
00:39:00,880 --> 00:39:04,680
Als je iets anders wilt gebruiken, als u wilt dat veranderen, helemaal prima,

677
00:39:04,680 --> 00:39:06,790
ga je gang en doe wat je wilt. Maar dat is de standaard.

678
00:39:06,790 --> 00:39:09,610
Het gaat meer vertrouwd aan gebruikers.

679
00:39:09,610 --> 00:39:13,510
En natuurlijk zal dit niets doen omdat ik niet echt de draad van elke vorm van code

680
00:39:13,510 --> 00:39:16,630
te reageren. Het was gewoon de HTML.

681
00:39:16,630 --> 00:39:20,630
Dus ik kan ontdoen van dat, en we komen terug in onze applicatie komen.

682
00:39:20,630 --> 00:39:25,310
>> Laat me over te schakelen naar onze default.js.

683
00:39:25,310 --> 00:39:29,030
Dit ziet er behoorlijk complex, maar het doet gewoon een paar dingen voor je.

684
00:39:29,030 --> 00:39:33,120
Het is standaardtekst. Het zal hetzelfde zijn in al uw projecten.

685
00:39:33,120 --> 00:39:36,620
Het enige wat dit doet is gewoon een soort van vragen: "Hoe ben ik hier gekomen?"

686
00:39:36,620 --> 00:39:39,090
en zei: "Bent u de lancering van deze app voor de eerste keer?"

687
00:39:39,090 --> 00:39:42,640
"Bent u het hervatten van de app van het hebben van het wordt geschorst?"

688
00:39:42,640 --> 00:39:44,510
Een paar van dat soort dingen.

689
00:39:44,510 --> 00:39:50,300
Echt, onze focus op dit bestand is hier ongeveer hier.

690
00:39:50,300 --> 00:39:54,490
Op dit punt, dit een regel code is vrij belangrijk.

691
00:39:54,490 --> 00:39:57,070
Het is eigenlijk aan de hand om te gaan en te kijken door alle van uw opmaak,

692
00:39:57,070 --> 00:40:01,640
en het gaat om dingen die je hebt gevraagd om zijn veranderd in controles vinden,

693
00:40:01,640 --> 00:40:07,220
dieper controles, zoals een rating controle, als een rasterweergave, zoals de vangbal

694
00:40:07,220 --> 00:40:09,570
en die andere dingen die ik je liet zien op die dia toe voor.

695
00:40:09,570 --> 00:40:12,550
Ze zijn niet inheems HTML controles.

696
00:40:12,550 --> 00:40:17,860
Je gewoon niet vangbal zeggen als een element en laat het weten wat te doen.

697
00:40:17,860 --> 00:40:22,120
Wat we eigenlijk doen is het zelfde ding dat gebeurt in andere vormen van control frameworks.

698
00:40:22,120 --> 00:40:26,200
jQuery UI doet hetzelfde soort algemene aanpak.

699
00:40:26,200 --> 00:40:30,800
U gebruikt markeringen in uw HTML, en dan komt een aantal JavaScript door later en zegt:

700
00:40:30,800 --> 00:40:35,900
"Oh, ik weet wat dat is. Dat is vragen om dit te worden omgezet in dit spul,"

701
00:40:35,900 --> 00:40:39,850
die andere, meer expressieve HTML te maken als een ratings controle,

702
00:40:39,850 --> 00:40:41,790
dat is wat ik je laten zien op dit moment.

703
00:40:41,790 --> 00:40:46,140
Deze regel code is een belofte die zegt: "Als deze belofte wordt nagekomen,

704
00:40:46,140 --> 00:40:49,090
"Alles wat u naar vroeg werd vervolgens gemaakt."

705
00:40:49,090 --> 00:40:52,780
En dat is het. Het ziet er een beetje ingewikkeld, maar het is echt hetzelfde in elk project.

706
00:40:52,780 --> 00:40:56,690
Hier beneden is waar je kunt beginnen met het toevoegen van alles wat je wilt dat er gebeurt,

707
00:40:56,690 --> 00:40:58,280
dus we zullen hierop terugkomen in een tweede.

708
00:40:58,280 --> 00:41:01,480
>> Allereerst, ik heb een stukje code die kan inspelen op het feit

709
00:41:01,480 --> 00:41:03,320
dat iemand heeft geklikt op de knop.

710
00:41:03,320 --> 00:41:06,330
Ik ga om te gaan en we deze in hier beneden.

711
00:41:06,330 --> 00:41:09,620
Nogmaals, ik ben niet van plan om alle typen hier doen voor je.

712
00:41:09,620 --> 00:41:12,560
Very basic webbrowser gewoon zeggen wanneer dit heet

713
00:41:12,560 --> 00:41:15,270
we gaan worden verstrekt enkele details over hoe we hier

714
00:41:15,270 --> 00:41:17,630
en dan gaan we een paar fundamentele dingen te doen.

715
00:41:17,630 --> 00:41:21,300
Gaan vinden het ding in mijn HTML-pagina met de naam nameInput,

716
00:41:21,300 --> 00:41:28,490
grijpen, neemt de waarde ervan, slap "Hello" op de voorzijde van het, en blijf dat resulterende tekenreeks

717
00:41:28,490 --> 00:41:31,960
in die div-tag die we hadden voordat die echt niets voor hebben.

718
00:41:31,960 --> 00:41:37,220
Nu gaan we die tag te vinden en zijn innerlijke inhoud gelijk aan die string.

719
00:41:37,220 --> 00:41:38,880
Zeer eenvoudige webbrowser.

720
00:41:38,880 --> 00:41:42,240
Hopelijk je erkennen dat er eigenlijk niets bijzonders aan de hand.

721
00:41:42,240 --> 00:41:45,360
Het is hier gewoon recht omhoog HTML en JS.

722
00:41:45,360 --> 00:41:48,220
Als ik zonder dit nu, het is nog steeds niet van plan om enig werk te doen, want ik heb niet bedraad het omhoog

723
00:41:48,220 --> 00:41:50,030
het evenement.

724
00:41:50,030 --> 00:41:55,710
Om dat te doen, doe ik dat hier, weer terug te keren naar mijn gereedschapskist,

725
00:41:55,710 --> 00:41:58,730
popping het in hier.

726
00:41:58,730 --> 00:42:03,060
Ik verwacht dat je al dit soort dingen al eerder gezien, dus ik zal niet te verklaren.

727
00:42:03,060 --> 00:42:05,060
Nu gaan we naar gaan halen de helloButton.

728
00:42:05,060 --> 00:42:07,730
We gaan zeggen: "Button, gefeliciteerd."

729
00:42:07,730 --> 00:42:10,130
"Hier is een evenement dat je nu reageren op."

730
00:42:10,130 --> 00:42:13,420
"Als iemand klikt op u, bel deze functie, de buttonClickHandler."

731
00:42:13,420 --> 00:42:17,070
En dat is dat de functie we gewoon recht naar beneden op de bodem daar zijn toegevoegd. Dat is het.

732
00:42:17,070 --> 00:42:20,980
Dus nu hebben we een ongelooflijk functioneel applicatie.

733
00:42:20,980 --> 00:42:24,720
Ik denk dat je echt onder de indruk van dit.

734
00:42:24,720 --> 00:42:32,320
Chris. Wachten. Wow. Oke. Dat is geweldig. [Lacht]

735
00:42:32,320 --> 00:42:36,570
Maar er is meer. Doe het nog niet kopen. Wacht.

736
00:42:36,570 --> 00:42:39,610
>> Laat ik je een beetje meer hier en uitstappen van het volledige scherm.

737
00:42:39,610 --> 00:42:42,690
We gaan wandelen voor we lopen.

738
00:42:42,690 --> 00:42:45,530
Laat me gaan en eigenlijk tonen u een beetje met CSS.

739
00:42:45,530 --> 00:42:49,480
Gewoon standaard, als we terugkijken naar de pagina hier,

740
00:42:49,480 --> 00:42:53,570
wanneer we trok in deze dingen WinJS en kregen we het ui-donker,

741
00:42:53,570 --> 00:42:58,550
in feite, kunt u deze wijzigen naar de standaard voor het gebruik van lichte toepassing.

742
00:42:58,550 --> 00:43:03,450
ui-donker is goed voor grafische toepassingen zoals het gebruik van een heleboel foto's,

743
00:43:03,450 --> 00:43:05,740
je bent met een heleboel visuele inhoud.

744
00:43:05,740 --> 00:43:12,560
Als je met een veel tekstuele inhoud, de ui-licht is over het algemeen een goede keuze.

745
00:43:12,560 --> 00:43:15,160
Je hoeft niet te kiezen, maar ik ben overgestapt naar het

746
00:43:15,160 --> 00:43:17,690
en nu ben je het zien van dezelfde opmaak, alles hetzelfde,

747
00:43:17,690 --> 00:43:20,320
het is alleen met behulp van in principe een omgekeerde regeling hier

748
00:43:20,320 --> 00:43:24,770
waar alles maakt het zwarte tekst op wit.

749
00:43:24,770 --> 00:43:26,460
Dat is allemaal goed en wel.

750
00:43:26,460 --> 00:43:30,680
Laat me hier uit, en laten we eigenlijk een beetje meer met de CSS.

751
00:43:30,680 --> 00:43:34,830
Ik zet het terug op donkere, omdat ik denk dat het waarschijnlijk makkelijker te zien op het scherm

752
00:43:34,830 --> 00:43:36,970
toen ik begin deze dingen te doen.

753
00:43:36,970 --> 00:43:40,150
Ik ga naar het lichaam te vervangen nog een keer.

754
00:43:40,150 --> 00:43:44,040
Ik zal hier gaan. Laat mij dit nuke.

755
00:43:44,040 --> 00:43:48,690
Laten we brengen in het lichaam met lessen.

756
00:43:48,690 --> 00:43:53,000
Ik geloof dat u hebt elementaire selectors met CSS en dat soort dingen al gedaan,

757
00:43:53,000 --> 00:43:55,380
zodat u waarschijnlijk weet wat er aan de hand hier.

758
00:43:55,380 --> 00:43:59,250
Gewoon toewijzen van een aantal klassen om onze header, en we zijn het creëren van een nieuwe div

759
00:43:59,250 --> 00:44:04,430
naar de rest van dat spul dat we nu kunnen gebruiken om alle samen stijl wrap.

760
00:44:04,430 --> 00:44:07,760
Dus wat ik nu kan doen is ga naar onze standaard CSS.

761
00:44:07,760 --> 00:44:11,900
Heb je gekeken naar de media queries nog? Heb je sprak over dat helemaal?

762
00:44:11,900 --> 00:44:17,220
Media queries maken deel uit van deze opkomende trend -

763
00:44:17,220 --> 00:44:19,660
of het is een gevestigde trend nu eigenlijk op het Web -

764
00:44:19,660 --> 00:44:22,760
voor responsive design of adaptieve,

765
00:44:22,760 --> 00:44:28,480
en het idee is dat uw applicaties zelf echt adequaat kunnen aanpassen

766
00:44:28,480 --> 00:44:31,910
op basis van wat het apparaat zijn dat zij op zijn afgebeeld kunnen doen.

767
00:44:31,910 --> 00:44:35,040
Dus als je op een mobiel apparaat, uiteraard dat je niet van plan om zo veel schermruimte te hebben

768
00:44:35,040 --> 00:44:41,520
zoals u zult op een groot 30-inch monitor zitten met een desktop, een grote PC als dat.

769
00:44:41,520 --> 00:44:46,710
Dus de oude antwoord daarop zou zijn om 5, 6 verschillende versies van dezelfde pagina hebben

770
00:44:46,710 --> 00:44:51,350
en je zou het openstellen van de versie die is afgestemd op dat bepaalde grootte van het scherm.

771
00:44:51,350 --> 00:44:55,420
Niet geweldig. Het is zeer, zeer repetitieve en er is een ton van onderhoud om dat te doen.

772
00:44:55,420 --> 00:44:58,120
Nu hebben we iets genaamd CSS media queries,

773
00:44:58,120 --> 00:45:02,530
en we kunnen dit gebruiken om automatisch te detecteren wanneer er bepaalde maten

774
00:45:02,530 --> 00:45:07,030
of bepaalde vormen van gebruik van uw inhoud wordt uitgevoerd.

775
00:45:07,030 --> 00:45:09,580
Zo kunt u reageren op dat en je kan zeggen: "Oke, in dit geval

776
00:45:09,580 --> 00:45:12,580
"Je waarschijnlijk niet eens nodig dat ik je vertel wat er aan de hand is."

777
00:45:12,580 --> 00:45:18,020
Dit is gewoon te zeggen indien deze toepassing is vastgeklikt, zoals ik u eerder liet zien -

778
00:45:18,020 --> 00:45:20,830
grijpen het en zetten het aan de zijkant van het scherm -

779
00:45:20,830 --> 00:45:23,910
dan laten we het volgende doen styling.

780
00:45:23,910 --> 00:45:25,850
Styling is niet alleen over kleuren en dat soort dingen.

781
00:45:25,850 --> 00:45:29,860
Het gaat ook over de maat en marges en paddings en oriëntaties van de inhoud

782
00:45:29,860 --> 00:45:34,040
of zelfs uit te schakelen of waarmee hele delen van uw pagina

783
00:45:34,040 --> 00:45:36,420
en, in dit geval, uw app of je spel ook.

784
00:45:36,420 --> 00:45:39,210
Dus hier kun je zo simpel doen als je wilt.

785
00:45:39,210 --> 00:45:46,720
Dit zou niet nuttig zijn in je apps, maar het is demo tijd,

786
00:45:46,720 --> 00:45:50,530
dus ik ga om verder te gaan en gewoon toe te voegen in de basis lichaam selector en zeggen:

787
00:45:50,530 --> 00:45:58,360
"Als ik knapte, laten we gaan je gang en doe achtergrondkleur en laten we kiezen voor iets."

788
00:45:58,360 --> 00:46:00,400
Je hebt IntelliSense hier. Dit is eigenlijk echt cool.

789
00:46:00,400 --> 00:46:05,720
In 2012 hebben we een heleboel dingen toegevoegd voor CSS-ondersteuning en JavaScript en HTML.

790
00:46:05,720 --> 00:46:08,690
Je hebt natuurlijk heb drop-down IntelliSense ook, maar dat is niet het cool ding.

791
00:46:08,690 --> 00:46:11,730
Het leuke is dat je hebt visuele selectors kreeg voor een heleboel dingen ook.

792
00:46:11,730 --> 00:46:14,120
Dus je zou kunnen gaan door en kies een kleur,

793
00:46:14,120 --> 00:46:17,580
of u kunt gaan en nog meer specifieke en u kunt kiezen -

794
00:46:17,580 --> 00:46:22,330
dit gaat verschrikkelijk zijn. Ik kom hier eigenlijk kies een fatsoenlijke kleur.

795
00:46:22,330 --> 00:46:26,500
Bekijk de markup ook, trouwens. Dat is je RGB standaardformaat daar.

796
00:46:26,500 --> 00:46:30,780
Maar als ik overschakel de dekking, het gaat om over te schakelen naar een alpha-kanaal selector hier.

797
00:46:30,780 --> 00:46:36,910
Zodat u kunt zien dat de kleur met in wezen het percentage transparantie die je hebt voor dat

798
00:46:36,910 --> 00:46:38,860
allemaal gebakken recht daar.

799
00:46:38,860 --> 00:46:42,530
Ik ga het als 100% te houden en dan als ik klaar ben met dat, alles goed en wel.

800
00:46:42,530 --> 00:46:46,160
Nu als ik de app en nemen we de app en we snap het,

801
00:46:46,160 --> 00:46:49,000
dat achtergrondkleur automatisch wordt aangepast

802
00:46:49,000 --> 00:46:53,410
gewoon omdat we een aantal CSS die zegt: "Ga dat doen."

803
00:46:53,410 --> 00:46:55,580
U kunt ook te schrijven JavaScript dat zal hetzelfde doen

804
00:46:55,580 --> 00:47:03,010
of die je zou kunnen gebruiken om daadwerkelijk te pauzeren een spel, doe dat soort dingen.

805
00:47:03,010 --> 00:47:04,310
Dat is waarschijnlijk wanneer u JavaScript zou gebruiken.

806
00:47:04,310 --> 00:47:06,610
Je zou uit het spel lus op dat moment draaien.

807
00:47:06,610 --> 00:47:09,970
Je zou sommige JavaScript nodig hebben, omdat dat niet iets wat je zou CSS voor zou zijn.

808
00:47:09,970 --> 00:47:11,760
Maar houd in gedachten het is gewoon een gebeurtenis.

809
00:47:11,760 --> 00:47:14,860
Je zou kunnen zeggen: "Wanneer mijn aanvraag wordt aangepast,

810
00:47:14,860 --> 00:47:17,780
"Laten we eens kijken of we beet." En dat is het.

811
00:47:17,780 --> 00:47:24,440
>> Oke? Ik heb veel gepraat. Zijn er vragen tot nu toe op waar we zijn? Yeah.

812
00:47:24,440 --> 00:47:29,310
[Student] Is er een tutorial voor iedereen om meer informatie te krijgen? >> Ja.

813
00:47:29,310 --> 00:47:33,510
De vraag is, is er een tutorial voor? Ik kom net uit te breiden tot alles.

814
00:47:33,510 --> 00:47:37,490
Er zijn een paar dingen die je kunt gaan. Laten we daadwerkelijk wegkomen.

815
00:47:37,490 --> 00:47:40,150
Laat me teruggaan hier.

816
00:47:40,150 --> 00:47:45,180
Een ding wijzen is Visual Studio zelf heeft tutorials ingebouwd

817
00:47:45,180 --> 00:47:47,650
Laat me te ontdoen van deze.

818
00:47:47,650 --> 00:47:51,520
Als je gaat en creëer een nieuw project, doe Bestand, Nieuw project,

819
00:47:51,520 --> 00:47:56,750
en kijk op de linkerkant is er een online knooppunt in deze selector.

820
00:47:56,750 --> 00:47:59,790
Het gaat om een ​​klein beetje nemen. Ik ben op mijn MyFi hier.

821
00:47:59,790 --> 00:48:02,300
Maar het gaat om te komen en het zal me een kans om sjablonen te geven

822
00:48:02,300 --> 00:48:05,190
maar ook, nog belangrijker, samples.

823
00:48:05,190 --> 00:48:06,750
Dus ik kan u op JavaScript.

824
00:48:06,750 --> 00:48:10,050
Het gaat om monsters voor me te vinden. Mijn resolutie is zo hoog hier.

825
00:48:10,050 --> 00:48:15,070
Normaal gesproken zou je een lijst van een heleboel verschillende dingen hier te zien.

826
00:48:15,070 --> 00:48:18,280
Als er iets is wat je wilt proberen, kies de taal,

827
00:48:18,280 --> 00:48:20,970
JavaScript hier, en zeggen: "Ik weet niet hoe te geolocatie te doen."

828
00:48:20,970 --> 00:48:22,220
"Ik weet niet hoe je een bestand te openen."

829
00:48:22,220 --> 00:48:25,840
"Ik weet niet hoe om te profiteren van de webcam

830
00:48:25,840 --> 00:48:28,290
"Of optimaliseren voor touch of dat soort dingen."

831
00:48:28,290 --> 00:48:33,190
Er zijn monsters voor alles: het delen, zoeken, app bars,

832
00:48:33,190 --> 00:48:37,520
maken van externe gesprekken naar een dienst, JSON-codering.

833
00:48:37,520 --> 00:48:40,390
Al dat soort dingen zijn er monsters voor hier,

834
00:48:40,390 --> 00:48:44,560
en ze zijn niet groot monsters die gaan om u de hele nacht om uit elkaar te trekken

835
00:48:44,560 --> 00:48:46,820
alleen te vinden dat een ding dat je wilde leren.

836
00:48:46,820 --> 00:48:49,870
Ze zijn echt goed. Ze zijn klein, recht op het punt soorten monsters.

837
00:48:49,870 --> 00:48:52,330
Ik heb een hoop geleerd door te gaan door deze zelf,

838
00:48:52,330 --> 00:48:55,260
en dus ik raad dat een partij als een ding.

839
00:48:55,260 --> 00:49:01,750
>> Een ander ding om te wijzen is natuurlijk toonde ik u dev.windows.com,

840
00:49:01,750 --> 00:49:07,490
dus als je terug naar die te gaan, zie je aan de onderkant is er ook de monsters hier.

841
00:49:07,490 --> 00:49:12,560
Zo kunt u ze allemaal in een keer te downloaden, maar er is ook een heleboel andere middelen hier ook

842
00:49:12,560 --> 00:49:14,400
dat kan u helpen om op snelheid.

843
00:49:14,400 --> 00:49:17,870
>> Een ander ding, en ik zou echt aanraden dat je dit probeert,

844
00:49:17,870 --> 00:49:24,510
Ik heb het op mijn blog, maar ik ga gewoon recht op.

845
00:49:24,510 --> 00:49:28,220
Ik zal je laten zien. Mijn blog heeft middelen en dat soort dingen.

846
00:49:28,220 --> 00:49:35,300
Een van de dingen die wijzen is hier, dit ding: uw idee. Your App. 30 dagen.

847
00:49:35,300 --> 00:49:40,960
Als u klikt op deze, het gaat om je naar een echt nuttig site.

848
00:49:40,960 --> 00:49:44,650
Dit is veel nuttiger dan je zou verwachten.

849
00:49:44,650 --> 00:49:49,040
Dit gaat worden 30 dagen van de inhoud die u in principe kunt krijgen tips en trucs

850
00:49:49,040 --> 00:49:51,990
gedurende dat proces als je het creëren van een app.

851
00:49:51,990 --> 00:49:55,980
En zoals je misschien niet verwachten, kun je eigenlijk krijgen voor games te

852
00:49:55,980 --> 00:49:57,840
en voor de telefoon apps, dat soort dingen.

853
00:49:57,840 --> 00:50:01,000
Dus eigenlijk aanmelden voor het, en ze gaan sturen u tips en tricks op,

854
00:50:01,000 --> 00:50:03,010
"Heb je nagedacht over het doen? Steunt u Snap?"

855
00:50:03,010 --> 00:50:04,900
"Hier zijn enkele richtlijnen over hoe om dat goed te doen."

856
00:50:04,900 --> 00:50:07,440
"Heb je nagedacht over het indienen van naar de winkel?"

857
00:50:07,440 --> 00:50:09,370
"Heb je nagedacht over hoe je gaat om uw aanvraag te verkopen?"

858
00:50:09,370 --> 00:50:11,490
Het gaat om te lopen door al deze verschillende dingen.

859
00:50:11,490 --> 00:50:13,380
En eigenlijk, als je op de gaming spoor, op een bepaald punt

860
00:50:13,380 --> 00:50:17,010
begin je het herkennen van de persoon die tegen je praat

861
00:50:17,010 --> 00:50:22,850
want ik had eigenlijk naar Redmint aan die en opgenomen 2 video's daar te doen.

862
00:50:22,850 --> 00:50:25,240
Maar dat is allemaal onderdeel van de gaming spoor,

863
00:50:25,240 --> 00:50:27,650
en er is ook een volledige track voor algemene app ontwikkeling.

864
00:50:27,650 --> 00:50:29,380
Dat heet Generation App.

865
00:50:29,380 --> 00:50:33,460
Ik zou zeker aanraden dat u ook in aanvulling op de monsters.

866
00:50:33,460 --> 00:50:38,110
>> Er is een hoop video's op een site genaamd Channel 9 ook.

867
00:50:38,110 --> 00:50:42,790
Dat is waarschijnlijk het laatste wat ik zal ook adviseren voordat we hier verder gaan.

868
00:50:42,790 --> 00:50:45,280
Channel9.msdn.com.

869
00:50:45,280 --> 00:50:48,880
Dit is geweldig, want je bent niet van plan om te lezen door ton van white papers.

870
00:50:48,880 --> 00:50:53,880
Het is eigenlijk een veel video's, screencasts en dingen die recht op het punt zijn.

871
00:50:53,880 --> 00:50:57,940
Ik zou niet zeggen dat het altijd recht op het punt. Het hangt ervan af wie er aan het woord.

872
00:50:57,940 --> 00:51:02,290
Maar in het algemeen, is er een aantal echt to-the-point video hier

873
00:51:02,290 --> 00:51:06,230
dat zal u tonen wat bijzonder wat je zou willen leren of zie gedemonstreerd.

874
00:51:06,230 --> 00:51:11,110
Er is ook al onze content van onze conferentie dat een paar weken geleden gebeurd

875
00:51:11,110 --> 00:51:14,380
genaamd Build, en je zult zien dat daar.

876
00:51:14,380 --> 00:51:18,450
Er is kerntechnologieën voor Windows 8 spellen. Daar ga je.

877
00:51:18,450 --> 00:51:23,150
Ik was er, eigenlijk. Je kunt me niet zien. Ik was hier.

878
00:51:23,150 --> 00:51:27,560
Maar goed, dat terzijde, ik zou aanraden dat u een kijkje nemen op die video's te nemen.

879
00:51:27,560 --> 00:51:29,330
Ze zijn erg behulpzaam.

880
00:51:29,330 --> 00:51:32,620
Als je vast zit op iets of wil je gewoon om te zien wat iets kon doen, brand die op.

881
00:51:32,620 --> 00:51:36,890
>> [Guarin] Windows Mail net stuurde me een e-mail met een link naar inhoud

882
00:51:36,890 --> 00:51:42,140
voor studenten om te downloaden met voorbeeldcode en dat soort dingen. >> [Bowen] Great.

883
00:51:42,140 --> 00:51:45,510
Geweldig. Dank je, Edwin.

884
00:51:45,510 --> 00:51:48,320
>> Goed. >> [Student] Ik heb een vraag. >> [Bowen] Oh. Ja, graag.

885
00:51:48,320 --> 00:51:55,030
[Onverstaanbaar student vraag] >> [Bowen] Oh, ik ben blij dat je dat vraagt. Ja.

886
00:51:55,030 --> 00:51:58,940
De vraag was, is er een visuele interface voor mij om dingen te creëren?

887
00:51:58,940 --> 00:52:01,630
Edwin zal je rijkelijk belonen voor die vraag.

888
00:52:01,630 --> 00:52:04,310
Er is een manier om dit te doen.

889
00:52:04,310 --> 00:52:09,040
Moeten we nu doen? We doen het nu.

890
00:52:09,040 --> 00:52:11,780
Ik ga naar het nu.

891
00:52:11,780 --> 00:52:14,070
Eigenlijk, laat me toe te voegen in een ding op deze demo,

892
00:52:14,070 --> 00:52:16,710
en dan zal ik je laten zien de werkelijke antwoord.

893
00:52:16,710 --> 00:52:21,340
Ik was van plan om hier toe te voegen in een beetje meer CSS.

894
00:52:21,340 --> 00:52:23,980
Ik was een beetje korting op raaklijnen hier.

895
00:52:23,980 --> 00:52:26,770
Laat ik in sommige CSS hier om te profiteren

896
00:52:26,770 --> 00:52:29,980
van de klassen die we toegevoegd een tijdje geleden,

897
00:52:29,980 --> 00:52:33,930
op de kop, de mainContent div en vervolgens naar de greetingOutput.

898
00:52:33,930 --> 00:52:37,920
Als ik dat doe en voer het uit, zie je nu hebben we een beetje anders opvulling en marges gekregen,

899
00:52:37,920 --> 00:52:40,310
dus we hebben eigenlijk een aantal offsets hier.

900
00:52:40,310 --> 00:52:44,630
Deze zijn meer in de richting van wat je gaat verwachten van een definitieve gepolijste toepassing.

901
00:52:44,630 --> 00:52:47,770
Maar ik ben gewoon dit laten zien aan u, want het is recht omhoog CSS.

902
00:52:47,770 --> 00:52:51,910
Dus de dingen die je al weet dat je kunt hier gebruiken om de inhoud aan te passen als u wilt.

903
00:52:51,910 --> 00:52:55,100
Je hebt al gezien hoe je de achtergrond veranderen op die manier.

904
00:52:55,100 --> 00:53:02,980
>> Als ik terug naar onze HTML gaan, ga ik in een keer toevoegen meer set van markup,

905
00:53:02,980 --> 00:53:06,140
en dit is in feite gaat om een ​​controle uit WinJS zijn.

906
00:53:06,140 --> 00:53:09,840
Ik ga om te gaan en pak deze, een label. Laat ik zorg ervoor dat ik doe het op de juiste plaats.

907
00:53:09,840 --> 00:53:11,740
Waarschijnlijk goed genoeg.

908
00:53:11,740 --> 00:53:15,590
Hier heb ik net toegevoegd - en we zullen het volledige scherm te gaan, zodat je het hele ding kan zien -

909
00:53:15,590 --> 00:53:18,520
Ik heb een label voor de volgende div toegevoegd.

910
00:53:18,520 --> 00:53:20,890
De div heet ratingControlDiv.

911
00:53:20,890 --> 00:53:23,090
Op zichzelf zal niets doen.

912
00:53:23,090 --> 00:53:28,570
Als u deze openen in een browser, zou je op zoek naar lege, de div zelf.

913
00:53:28,570 --> 00:53:31,820
Maar vanwege die mysterieuze regel code die ik u eerder liet zien,

914
00:53:31,820 --> 00:53:35,650
het proces al, het gaat om te zoeken naar iets dat er zo uitziet -

915
00:53:35,650 --> 00:53:40,380
data-win-controle - en het gaat om te vinden wat er in die parameter.

916
00:53:40,380 --> 00:53:44,560
Het gaat om een ​​geval van wat dat is het wijzend te maken.

917
00:53:44,560 --> 00:53:48,850
In dit geval is het een rating controle, dus ik zeg: "Ga en vervang dit ding

918
00:53:48,850 --> 00:53:51,400
"Met wat je moet doen om een ​​rating controle te maken."

919
00:53:51,400 --> 00:53:56,610
Het zou een flip controle zijn, kan het de voortgang ring of wat besturingselement dat u wilt gebruiken.

920
00:53:56,610 --> 00:53:59,390
Ze gaan allemaal in wezen werken op dezelfde manier.

921
00:53:59,390 --> 00:54:02,920
Je gebruikt standaard HTML5 markup om aan te geven wat je wilt,

922
00:54:02,920 --> 00:54:07,670
en dan zul je een controle te krijgen aan het eind van dit. Laat me dit uitvoeren.

923
00:54:07,670 --> 00:54:12,270
Ik heb net gekopieerd die in, en nu dat markup wordt deze,

924
00:54:12,270 --> 00:54:15,280
dat is eigenlijk heel een aantal HTML-elementen.

925
00:54:15,280 --> 00:54:18,440
Dit zijn allemaal afzonderlijke beelden, en er is divs om hen heen met selectors.

926
00:54:18,440 --> 00:54:22,610
Hopelijk kun je dat zien. Het is een beetje subtiel.

927
00:54:22,610 --> 00:54:27,380
Ik kan zweven over de verschillende items, en het gaat mij toe om de rating hier te zien.

928
00:54:27,380 --> 00:54:31,560
Ik kan op klikken, en onthoudt de rating, maar dat is het zowat.

929
00:54:31,560 --> 00:54:33,100
Het is niet echt iets met de waardering te doen.

930
00:54:33,100 --> 00:54:35,230
>> De ene laatste wat ik wil laten zien op deze

931
00:54:35,230 --> 00:54:37,820
voordat we overschakelen naar een meer visuele design ervaring

932
00:54:37,820 --> 00:54:42,680
is een klein stukje code die ik kan gebruiken om te reageren op deze WinJS controles.

933
00:54:42,680 --> 00:54:47,540
Laat me daar weg, terug uit het volledige scherm,

934
00:54:47,540 --> 00:54:52,690
en schakel over naar JS hier voor de tweede.

935
00:54:52,690 --> 00:54:57,450
Ik kan dit hier doen. Ik denk dat ik dit hele ding vervangen.

936
00:54:57,450 --> 00:55:03,080
Eigenlijk denk ik dat het zal al vervangen, maar we zullen samen uitzoeken.

937
00:55:03,080 --> 00:55:07,350
Ik zal dit hier te plaatsen. Yeah. Ik ga deze ook te verwijderen.

938
00:55:07,350 --> 00:55:11,790
Wat heb ik toevoegen? Het ziet eruit als een hoop. Het is niet veel.

939
00:55:11,790 --> 00:55:14,920
Ik verlengde die lijn van code die ik al eerder over gesproken,

940
00:55:14,920 --> 00:55:18,590
en ik zeg: "Als alles klaar is, wanneer al mijn controles zijn gedaan,

941
00:55:18,590 --> 00:55:23,660
"Dit dan doen." Dus voer deze functie genaamd voltooid.

942
00:55:23,660 --> 00:55:27,080
In dit geval, is dit spul je kunt achterhalen.

943
00:55:27,080 --> 00:55:29,040
Gaan vinden dat div controle.

944
00:55:29,040 --> 00:55:30,790
Eigenlijk is er een ding dat ik zou moeten wijzen.

945
00:55:30,790 --> 00:55:35,630
Dat volgende regel zegt eigenlijk: "Ik heb dat ratingControlDiv gekregen."

946
00:55:35,630 --> 00:55:39,770
"Ik wil het praten alsof het een echte controle, een WinJS controle."

947
00:55:39,770 --> 00:55:42,020
Dus eigenlijk, bent u vragen om dat uit het.

948
00:55:42,020 --> 00:55:44,600
Je zegt: "Ik wil met je praten als een controle."

949
00:55:44,600 --> 00:55:47,810
En dan kun je beginnen te zeggen dingen als: "We gaan naar een luisteraar voor u toevoegen

950
00:55:47,810 --> 00:55:51,430
"Dus als je veranderd bent kunnen we reageren."

951
00:55:51,430 --> 00:55:56,930
En dan kunnen we ook dit soort dingen doen. Eigenlijk is dat de oude code daar.

952
00:55:56,930 --> 00:55:59,600
Ik denk dat ik mis plakken in nog een functie,

953
00:55:59,600 --> 00:56:05,030
en dat zou de eigenlijke functie die zou reageren op de rating controle veranderd zijn.

954
00:56:05,030 --> 00:56:07,710
Laat me pop die in hier beneden,

955
00:56:07,710 --> 00:56:09,840
ergens rond daar.

956
00:56:09,840 --> 00:56:14,930
En in dit geval, het enige dat nieuw is, is het feit dat we gaan in

957
00:56:14,930 --> 00:56:21,000
wat de rating controle vertelt ons en wat we vragen wat de tentativeRating genoemd.

958
00:56:21,000 --> 00:56:23,150
Er is een bos van verschillende andere dingen die die controle die u kan vertellen,

959
00:56:23,150 --> 00:56:25,310
en het gaat controle door controle.

960
00:56:25,310 --> 00:56:29,140
Het is zeer eenvoudig. Je zult in staat om het uit geen enkele moeite mee.

961
00:56:29,140 --> 00:56:34,040
Ik run deze, en nu wanneer ik de ratings en klik op de waardering,

962
00:56:34,040 --> 00:56:36,480
je ziet nu het is eigenlijk erop te reageren.

963
00:56:36,480 --> 00:56:40,280
Het zetten van dat cijfer op het scherm in die anders leeg div-tag

964
00:56:40,280 --> 00:56:42,970
onder de rating controle.

965
00:56:42,970 --> 00:56:46,670
Dat is de magie van een heleboel dingen hier ook.

966
00:56:46,670 --> 00:56:49,580
Dus als je het creëren van applicaties voor de Windows Store,

967
00:56:49,580 --> 00:56:52,930
er is een ton van de controles die je gewoon kunt gebruiken. Ze werken als dit.

968
00:56:52,930 --> 00:56:58,670
>> Laat ik je de visuele kant van het ontwerpen voor deze toepassingen.

969
00:56:58,670 --> 00:57:03,440
Het goede nieuws is dat je al deze tool als je alles installeren

970
00:57:03,440 --> 00:57:06,240
als je naar die te downloaden en je krijgt Visual Studio.

971
00:57:06,240 --> 00:57:09,890
Ik kan rechts klikken op deze. Ik zal niet vergroten

972
00:57:09,890 --> 00:57:12,040
Het zegt enkel Open in Blend.

973
00:57:12,040 --> 00:57:16,040
Blend is een ander instrument dat zij aan zij met Visual Studio werkt

974
00:57:16,040 --> 00:57:19,230
en is veel meer gericht op het ontwerp kant van de dingen,

975
00:57:19,230 --> 00:57:23,660
dus het is echt oppervlakken tools die zijn geoptimaliseerd voor het maken van stijlen,

976
00:57:23,660 --> 00:57:29,720
maken van animaties, het werken met CSS, een heleboel dingen in dat soort ader.

977
00:57:29,720 --> 00:57:36,380
Hier wat moet zeer interessant en vrij duidelijk onmiddellijk we kijken naar de app.

978
00:57:36,380 --> 00:57:40,060
Hopelijk hebben we nog steeds.

979
00:57:40,060 --> 00:57:42,650
In plaats van code die we nog steeds op de bodem,

980
00:57:42,650 --> 00:57:45,350
we zien de werkelijke weergave van de applicatie.

981
00:57:45,350 --> 00:57:49,640
Wat meer is, het is niet alleen een weergave van de app, het is eigenlijk de app draait.

982
00:57:49,640 --> 00:57:52,010
En dat is wat echt aardig over Blend.

983
00:57:52,010 --> 00:57:58,620
Het team heeft veel werk gedaan om HTML-en JavaScript-en CSS in deze tool te brengen.

984
00:57:58,620 --> 00:58:01,930
Nu kun je eigenlijk, als je nieuwsgierig bent, "Wat betekent dat? Wat kan ik doen?"

985
00:58:01,930 --> 00:58:08,310
Ik kan eigenlijk ontwerpen om deze toepassing ook al dit soort dingen niet bestaan ​​in mijn element niet.

986
00:58:08,310 --> 00:58:13,230
Vergeet niet dat cijfer controle? Het was gewoon een div-tag.

987
00:58:13,230 --> 00:58:17,090
Dit spul, die ster, bestaat alleen tijdens runtime. Hoe weet ik dat?

988
00:58:17,090 --> 00:58:20,300
Er is een beetje magie hier.

989
00:58:20,300 --> 00:58:21,700
Zie deze bliksemschichten?

990
00:58:21,700 --> 00:58:25,570
Elke keer zie je een bliksemschicht, dat betekent dat het is gemaakt door iets at runtime.

991
00:58:25,570 --> 00:58:31,770
Sommige JavaScript liep en draaide iets in dit of heeft dit met enige logica.

992
00:58:31,770 --> 00:58:37,100
Die sterren die je daar ziet zijn gemaakt door JavaScript door WinJS.

993
00:58:37,100 --> 00:58:41,800
Het mooie is, het maakt niet uit voor mij, kan ik nog steeds ontwerp het,

994
00:58:41,800 --> 00:58:44,410
Ik kan nog steeds gaan in en verander het, kan ik te weten komen wat er gaande is hier,

995
00:58:44,410 --> 00:58:50,260
Ik kan kijken naar de CSS, kan ik verder gaan en erachter te komen waarom de kleur is zoals het is,

996
00:58:50,260 --> 00:58:54,610
Ik kan beginnen knoeien met dingen en het maken van dingen verschrikkelijk,

997
00:58:54,610 --> 00:58:58,360
wat ik wil doen.

998
00:58:58,360 --> 00:59:01,020
Eigenlijk, zal ik dingen met rust laten.

999
00:59:01,020 --> 00:59:03,980
Maar je kunt hier zien dat het allemaal de NOS en het toont je hier.

1000
00:59:03,980 --> 00:59:10,120
Als ik ga naar daar, het gaat om te laten zien alles wat ze noemen Winnen,

1001
00:59:10,120 --> 00:59:14,850
dus de CSS-regels die de meest specifieke en de meest gekozen voor dat item,

1002
00:59:14,850 --> 00:59:17,110
die heb je waarschijnlijk al voorbij gegaan in uw lessen,

1003
00:59:17,110 --> 00:59:22,000
waar je kunt zeggen dat er een algemeen lettertype dat we toepassen bij alles,

1004
00:59:22,000 --> 00:59:26,860
maar omdat dit een h1 en ik heb een kleur die is gedefinieerd voor H1S,

1005
00:59:26,860 --> 00:59:29,820
het gaat om deze kleur te zijn, en dat is omdat het meer specifiek dan de body1.

1006
00:59:29,820 --> 00:59:32,590
Een ding hier laat je dat allemaal,

1007
00:59:32,590 --> 00:59:35,470
en het is echt krachtig spul als je meer complexe,

1008
00:59:35,470 --> 00:59:38,160
je je afvraagt ​​waarom deze dingen zijn zoals ze zijn.

1009
00:59:38,160 --> 00:59:41,020
Het zal je eigenlijk vertellen, en je kunt een van deze items hier te halen.

1010
00:59:41,020 --> 00:59:43,370
Die kleur is niet al te slecht, eigenlijk.

1011
00:59:43,370 --> 00:59:47,150
U kunt deze selecteren. Hopelijk kun je dit zien.

1012
00:59:47,150 --> 00:59:52,410
Voor alles wat je hebt op uw aanvraag, zie je een hele cascade

1013
00:59:52,410 --> 00:59:56,070
van alle CSS die zouden hebben toegepast op die en die men wint,

1014
00:59:56,070 --> 00:59:58,050
die men eigenlijk voorrang had.

1015
00:59:58,050 --> 01:00:00,930
Deze zijn een beetje saai. Er is niet veel te doen in een aantal van deze.

1016
01:00:00,930 --> 01:00:04,660
Als ik en verander de kleur, dan zul je beginnen te zien wat trapsgewijze daar.

1017
01:00:04,660 --> 01:00:07,760
U kunt ook gebruik maken van HTML hier ook.

1018
01:00:07,760 --> 01:00:12,490
Ik kan gaan en de HTML-eigenschappen voor al deze dingen aan te passen als ik wil.

1019
01:00:12,490 --> 01:00:14,620
Er is gewoon heel veel dingen hier.

1020
01:00:14,620 --> 01:00:18,070
>> Ik wil niet dat je tijd nemen door te gaan door alles hier. Gewoon weet dat het hier.

1021
01:00:18,070 --> 01:00:21,700
Er is veel design-georiënteerde functionaliteit is alleen beschikbaar voor u

1022
01:00:21,700 --> 01:00:26,730
dus je kunt visuele blijven, werken met de applicatie, en niet te veel gissen doen

1023
01:00:26,730 --> 01:00:32,180
dat je zou hebben om normaal en fietsen terug van een browser doe terug in uw ontwerp,

1024
01:00:32,180 --> 01:00:33,940
terug naar de browser.

1025
01:00:33,940 --> 01:00:37,010
Dit is echt cool stuff voor dat, en als je een Windows Store app te ontwikkelen,

1026
01:00:37,010 --> 01:00:39,650
het gaat je veel productiever.

1027
01:00:39,650 --> 01:00:45,150
>> Je zult ook zien dat het volgen van de markup hier en uw CSS

1028
01:00:45,150 --> 01:00:47,270
als je werkt door verschillende dingen.

1029
01:00:47,270 --> 01:00:50,180
Het is waarschijnlijk erg moeilijk voor u om te zien dat, met name op video,

1030
01:00:50,180 --> 01:00:54,680
maar dat is wat er aan de hand hier, en ik zou u bekend bent met dat geworden.

1031
01:00:54,680 --> 01:00:57,240
Het bespaart u een hoop tijd. Dat is Blend.

1032
01:00:57,240 --> 01:01:00,520
Als u wijzigingen hier te maken, worden ze automatisch gaan over de rug dragen

1033
01:01:00,520 --> 01:01:01,870
Visual Studio.

1034
01:01:01,870 --> 01:01:06,590
Het is dezelfde bestanden, het is hetzelfde alles. Ik zal het met rust laten.

1035
01:01:06,590 --> 01:01:08,650
Ik heb een beter voorbeeld dat ik wil laten zien.

1036
01:01:08,650 --> 01:01:11,660
Maar als ik een verandering daar en opgeslagen en ik terug naar Visual Studio kwam, zou het zeggen,

1037
01:01:11,660 --> 01:01:16,390
"He, je gewoon iets veranderd. Kan ik het opnieuw voor u?" Ja.

1038
01:01:16,390 --> 01:01:18,770
En je gebruikt dezelfde dingen daar.

1039
01:01:18,770 --> 01:01:21,320
Dat is het einde van dat monster.

1040
01:01:21,320 --> 01:01:28,170
>> Ik wil je laten zien een hogere end monster alleen maar om u een beeld van andere functionaliteiten geven

1041
01:01:28,170 --> 01:01:30,350
je zou kunnen denken over ook.

1042
01:01:30,350 --> 01:01:32,280
Dit is een voorbeeld app die je kunt downloaden.

1043
01:01:32,280 --> 01:01:35,620
Als je kijkt naar iets genaamd de Windows Camp in a Box,

1044
01:01:35,620 --> 01:01:40,340
er zijn enkele voorbeelden die in die, en een van hen is de Contoso Cookbook.

1045
01:01:40,340 --> 01:01:41,640
Ik kan dit alleen nog maar voor jou.

1046
01:01:41,640 --> 01:01:44,700
Custom splash screen. Dit is de toepassing rasterweergave.

1047
01:01:44,700 --> 01:01:49,590
Ze hebben gebonden aantal aangepaste data hier. U kunt navigeren door dit.

1048
01:01:49,590 --> 01:01:53,090
U kunt gaan en een kijkje nemen op de verschillende dingen die ons hongerig op een vrijdagmiddag zal maken.

1049
01:01:53,090 --> 01:01:57,760
Ik weet het niet. Wat gaat me het meest hongerig?

1050
01:01:57,760 --> 01:02:00,530
Ik weet het niet. Ik ga gewoon een kiezen.

1051
01:02:00,530 --> 01:02:02,460
Je gaat in deze dingen. Het zal u tonen het recept.

1052
01:02:02,460 --> 01:02:04,900
Je zou ook kunnen, in plaats van te klikken op een item,

1053
01:02:04,900 --> 01:02:10,360
kun je recht om die categorie van de inhoud, dat gedeelte van de inhoud.

1054
01:02:10,360 --> 01:02:15,590
In dit geval kunt u tal van nep-Latijn lezen vertellen u alles over deze recepten hier

1055
01:02:15,590 --> 01:02:17,720
en ga dan rechtsaf de specifieke recept.

1056
01:02:17,720 --> 01:02:22,770
Deze ondersteunt ook dingen als de delen die ik je liet zien voordat met de foto's.

1057
01:02:22,770 --> 01:02:26,160
U kunt ook zoeken in deze toepassing ook.

1058
01:02:26,160 --> 01:02:28,880
Het is heel eenvoudig om het zoeken te doen.

1059
01:02:28,880 --> 01:02:31,300
Kortom, je bent net een stukje tekst uit Windows

1060
01:02:31,300 --> 01:02:34,720
en u beslissen hoe u wilt zoeken handgreep met dat.

1061
01:02:34,720 --> 01:02:39,830
Het is een paar regels code om dat te krijgen, en dan wat je ermee doet na dat is helemaal aan jou.

1062
01:02:39,830 --> 01:02:44,180
>> Hier hebben ze ook een app bar waar ze met behulp van een andere functionaliteit.

1063
01:02:44,180 --> 01:02:45,430
Ik zal je precies vertellen wat het is.

1064
01:02:45,430 --> 01:02:48,220
Een herinnering is gaan gebruiken wat een toast kennisgeving genoemd.

1065
01:02:48,220 --> 01:02:52,930
Dit is echt handig voor de gebruiker te laten weten als er dingen zijn gebeurd,

1066
01:02:52,930 --> 01:02:55,850
als een applicatie is geïnstalleerd of iets werd voltooid.

1067
01:02:55,850 --> 01:02:57,950
Het is ook goed voor games ook.

1068
01:02:57,950 --> 01:03:02,360
Als je een persistente wereld of een leaderboard en een dienst die is hosting dat

1069
01:03:02,360 --> 01:03:08,490
misschien op een aparte machine, die kennisgevingen kunnen worden in een machine gestuurd

1070
01:03:08,490 --> 01:03:12,240
en zelfs als de gebruiker niet met behulp van je spel, het spelen van je spel of het runnen van uw app,

1071
01:03:12,240 --> 01:03:15,170
ze kunnen nog steeds meldingen over dit soort gebeurtenissen.

1072
01:03:15,170 --> 01:03:19,350
Dus je zou kunnen zeggen: "Je kasteel is vernietigd of wordt zowat vernietigd."

1073
01:03:19,350 --> 01:03:22,870
"Kom terug en te verdedigen," of iets dergelijks.

1074
01:03:22,870 --> 01:03:26,830
U klikt op de melding, ga je terug in het spel, en je kunt spelen.

1075
01:03:26,830 --> 01:03:32,170
Dus dat soort dingen kan helpen echt mensen te trekken vrij effectief terug in uw app.

1076
01:03:32,170 --> 01:03:37,450
>> Er is ook ondersteuning in deze toepassing voor het gebruik van de microfoon, de webcam,

1077
01:03:37,450 --> 01:03:39,560
video doen en het nemen van foto's.

1078
01:03:39,560 --> 01:03:42,080
U kunt ook pinnen een tweede tegel.

1079
01:03:42,080 --> 01:03:46,760
Het is handig als je wilt gewoon een tegel die gaat recht op bepaalde inhoud.

1080
01:03:46,760 --> 01:03:49,960
In dit geval gaat recht dit recept.

1081
01:03:49,960 --> 01:03:51,300
Alles wat ik vermelden Ik laat

1082
01:03:51,300 --> 01:03:53,270
omdat het dingen die je kunt denken over het gebruik ook.

1083
01:03:53,270 --> 01:03:57,590
Voor het grootste deel zijn ze zeer eenvoudig te gebruiken.

1084
01:03:57,590 --> 01:04:00,070
Ik zou alleen adviseren u brengen dat sample explorer

1085
01:04:00,070 --> 01:04:03,600
en vind een monster dat je kunt laten zien hoe dat te doen.

1086
01:04:03,600 --> 01:04:07,140
Het is vrij eenvoudig om die in je apps daar ook mee te nemen.

1087
01:04:07,140 --> 01:04:11,030
>> Ik ga u iets anders dat is wel cool hier te tonen.

1088
01:04:11,030 --> 01:04:15,230
Ik zal deze toepassing snap, en ik ga terug naar Visual Studio te gaan.

1089
01:04:15,230 --> 01:04:18,870
Deze toepassing wordt uitgevoerd. Het loopt van Visual Studio.

1090
01:04:18,870 --> 01:04:21,370
Ik kan een aantal mooie leuke dingen doen met die.

1091
01:04:21,370 --> 01:04:23,840
Ik heb eigenlijk een optie om een ​​element te selecteren,

1092
01:04:23,840 --> 01:04:28,250
en ik kan hier naar de live applicatie en ik kan zeggen,

1093
01:04:28,250 --> 01:04:34,000
"Ik vraag me af waarom is Bereidingstijd een beetje lichter grijs dan de titel zelf?"

1094
01:04:34,000 --> 01:04:35,680
Ik kan op klikken.

1095
01:04:35,680 --> 01:04:38,080
Het gaat terug in Visual Studio synchroniseren dat,

1096
01:04:38,080 --> 01:04:43,780
en het gaat me precies de gegenereerde inhoud die resulteerde in dat deel van de UI tonen.

1097
01:04:43,780 --> 01:04:47,270
Dus in dit geval, het is post-ondertiteling en h4 dubbele construct,

1098
01:04:47,270 --> 01:04:51,110
en dat waarschijnlijk vertelt ons wat we moeten weten, want als een h4 binnen die context,

1099
01:04:51,110 --> 01:04:53,550
het gaat om een ​​bepaald soort lettertype krijgen.

1100
01:04:53,550 --> 01:04:56,410
Maar als ik weet nog steeds niet waarom, kan ik op Trace Styles.

1101
01:04:56,410 --> 01:05:02,330
Ik kan dan uitbreiden, kleur en ik kan precies te weten waarom die kleur is niet het lichaam kleur

1102
01:05:02,330 --> 01:05:04,640
maar in feite is iets anders.

1103
01:05:04,640 --> 01:05:07,210
Dit is in wezen de dev gereedschappen van Internet Explorer

1104
01:05:07,210 --> 01:05:09,530
tot op zekere hoogte gebracht in Visual Studio.

1105
01:05:09,530 --> 01:05:12,110
Als je hebt gewerkt met de Chrome Dev Gereedschap, Firebug, dat soort dingen,

1106
01:05:12,110 --> 01:05:14,720
dit soort tools die in de browser,

1107
01:05:14,720 --> 01:05:17,340
dat soort functionaliteit is recht in Visual Studio gebracht

1108
01:05:17,340 --> 01:05:22,090
dus je hoeft niet echt om een ​​browser te openen en werken met deze tools afzonderlijk.

1109
01:05:22,090 --> 01:05:24,320
Nu heb ik een Windows Store app alleen rennen,

1110
01:05:24,320 --> 01:05:27,840
en ik kan beginnen met het uit elkaar te trekken en uit te vinden waarom de dingen aan het doen zijn wat ze zijn.

1111
01:05:27,840 --> 01:05:30,440
>> Ik kan dit ook doen het op deze manier ook.

1112
01:05:30,440 --> 01:05:35,020
Ik kan gaan en gewoon iets te halen vanaf de markup en ontdek wat het is

1113
01:05:35,020 --> 01:05:38,560
in de applicatie zelf. Ik denk dat ik ben gegaan door alles.

1114
01:05:38,560 --> 01:05:41,440
Hier ben ik zweefde over dit. Ik kan het selecteren.

1115
01:05:41,440 --> 01:05:45,540
Het gaat om me te tonen in de daadwerkelijke uitvoeren van de toepassing waar dat ding is

1116
01:05:45,540 --> 01:05:48,070
dat ik nu in de markup ben klikken.

1117
01:05:48,070 --> 01:05:49,700
Echt cool stuff.

1118
01:05:49,700 --> 01:05:52,710
Als je probeert te achterhalen wat er aan de hand is en wat HTML doet,

1119
01:05:52,710 --> 01:05:56,080
wat CSS doet, houd hier rekening mee.

1120
01:05:56,080 --> 01:05:58,450
Vergeet niet dat dit hier voor u

1121
01:05:58,450 --> 01:06:02,070
en ook dat Blend kan werken met een live draaiende applicatie.

1122
01:06:02,070 --> 01:06:06,070
>> De ene laatste wat ik wilde laten zien met deze toepassing -

1123
01:06:06,070 --> 01:06:09,290
By the way, het toont u delta's als dingen veranderen ook,

1124
01:06:09,290 --> 01:06:11,160
zodat u kunt kijken voor die gele highlights.

1125
01:06:11,160 --> 01:06:14,060
Dat zijn dingen die gewoon zijn veranderd in de toepassing.

1126
01:06:14,060 --> 01:06:16,350
Maar een laatste ding. Ik wil terug naar Blend gewoon voor een tweede hier.

1127
01:06:16,350 --> 01:06:21,790
We zullen dit open te stellen, Open in Blend, dezelfde app, zelfde alles.

1128
01:06:21,790 --> 01:06:28,660
Ik wil gewoon laten zien van de ervaring hier is niet alleen bent u vast op de homepage

1129
01:06:28,660 --> 01:06:32,880
te kijken naar de dingen die je standaard krijgt als je de app draaien en laat hem daar zitten.

1130
01:06:32,880 --> 01:06:36,490
U kunt ook terecht op dit mooie kleine icoon hier.

1131
01:06:36,490 --> 01:06:38,560
Het heet de interactieve modus.

1132
01:06:38,560 --> 01:06:41,560
U klikt op dat. Het zal brengen uw toepassing.

1133
01:06:41,560 --> 01:06:43,730
Je bent niet in de ontwerpmodus meer, dus je bent niet van plan om te klikken op dingen

1134
01:06:43,730 --> 01:06:47,270
functionaliteit te veranderen, maar je kunt eigenlijk werken met de applicatie nu.

1135
01:06:47,270 --> 01:06:51,560
U kunt doorklikken, kun je doen wat, naar een recept dat u de zorg over

1136
01:06:51,560 --> 01:06:54,810
of aan een categorie. Laten we naar deze categorie.

1137
01:06:54,810 --> 01:06:56,880
Ik zal zeggen: "Oke, hier is waar ik wil ontwerpen."

1138
01:06:56,880 --> 01:06:59,680
Dan moet je nogmaals op die knop, zal het u terug te brengen in het ontwerp oppervlak,

1139
01:06:59,680 --> 01:07:02,130
en nu kun je al die dingen die ik het eerder over had doen.

1140
01:07:02,130 --> 01:07:06,230
Ik zal klikken totdat ik deze gekozen, ontdek de afmetingen,

1141
01:07:06,230 --> 01:07:09,890
vinden van de HTML-code voor het, de CSS voor het

1142
01:07:09,890 --> 01:07:14,990
voor een actieve toepassing, wat later onderdeel van de aanvraag.

1143
01:07:14,990 --> 01:07:17,780
Zeer, zeer nuttig. Ik zal dit laten zien.

1144
01:07:17,780 --> 01:07:21,340
Houd het in gedachten als u op zoek bent naar het schrijven van code met deze

1145
01:07:21,340 --> 01:07:26,070
omdat het gaat scheelt je een hoop gedoe, en het is best goed spul.

1146
01:07:26,070 --> 01:07:32,370
Dat is zo ongeveer alles wat ik wilde laten zien op Blend en Visual Studio voor dat alles.

1147
01:07:32,370 --> 01:07:36,130
>> Heeft u vragen over een van deze tools?

1148
01:07:36,130 --> 01:07:40,000
Helemaal niets? >> [Guarin] Ik heb dingen om uit te geven, zo goed vragen, goed spul.

1149
01:07:40,000 --> 01:07:43,700
>> [Bowen lacht] Ik heb je al laten zien mijn demo's hier.

1150
01:07:43,700 --> 01:07:47,000
Ik ga het op de pagina Resources zetten en zich tot vragen nu.

1151
01:07:47,000 --> 01:07:53,850
Die eerste referentie is dat Generation App site met het spel spoor en de app spoor.

1152
01:07:53,850 --> 01:07:55,040
Aanmelden voor deze.

1153
01:07:55,040 --> 01:07:57,210
Je hoeft niet naar de 30 dagen wachten om de inhoud te krijgen.

1154
01:07:57,210 --> 01:08:00,370
U kunt beginnen te gaan en te kijken naar de inhoud als u wilt.

1155
01:08:00,370 --> 01:08:04,380
Ik begrijp uw tijd frames anders dan misschien - [lacht]

1156
01:08:04,380 --> 01:08:07,780
Dus wanneer is de Hackathon? Dat is een paar weken, toch?

1157
01:08:07,780 --> 01:08:09,620
U hoeft dus niet de 30 dagen te wachten.

1158
01:08:09,620 --> 01:08:13,180
Dus ja, kunt u zich aanmelden voor die en dan gewoon beginnen te trekken van de inhoud ervan.

1159
01:08:13,180 --> 01:08:15,320
Ook de Dev en de Design Centers.

1160
01:08:15,320 --> 01:08:17,620
En ik heb dit niet noemen, maar er is ook de Store Docs.

1161
01:08:17,620 --> 01:08:22,880
Dit zou voor na de Hackathon als je klaar bent om te beginnen met het indienen van uw apps voor de winkel bent.

1162
01:08:22,880 --> 01:08:27,350
Er zijn enkele nuttige tips hier, wat begeleiding over hoe om dingen te krijgen in de winkel,

1163
01:08:27,350 --> 01:08:29,960
een aantal gemeenschappelijke problemen die u zou kunnen struikelen,

1164
01:08:29,960 --> 01:08:32,540
en dat is het einde van deze middelen.

1165
01:08:32,540 --> 01:08:35,300
>> Dus wat zit je dwars? Iets anders dat je -

1166
01:08:35,300 --> 01:08:40,580
[Guarin] Wie is het denken over het doen van een Windows app voor CS50? Cool.

1167
01:08:40,580 --> 01:08:42,200
[Bowen] Cool. Geweldig.

1168
01:08:44,149 --> 01:08:49,410
>> Heeft u vragen over de dingen die je tot nu toe hebt gezien en hoe het op dit?

1169
01:08:49,410 --> 01:08:54,540
Bijvoorbeeld, met meer tijd kon ik een spel dat ik heb geschreven neem

1170
01:08:54,540 --> 01:08:57,310
en dat loopt in de browser en gewoon een soort van gaan door het proces

1171
01:08:57,310 --> 01:08:59,870
brengen die in Visual Studio en waardoor het een Windows Store app.

1172
01:08:59,870 --> 01:09:02,870
Het kost meer tijd dan we hadden echt te omvatten vandaag,

1173
01:09:02,870 --> 01:09:08,010
maar de korte versie is dat het dezelfde code die u heeft uitgevoerd in de browser,

1174
01:09:08,010 --> 01:09:11,680
en de dingen die je veranderen zijn de dingen die u beslist om aan te sluiten bij Windows 8.

1175
01:09:11,680 --> 01:09:16,220
Dus als je wilt charmes te gebruiken, als u wilt zoeken of te delen,

1176
01:09:16,220 --> 01:09:19,899
je nodig hebt om een ​​app bar sommige functies weg te verbergen op dat te maken,

1177
01:09:19,899 --> 01:09:21,939
dat zijn de dingen die je zou veranderen.

1178
01:09:21,939 --> 01:09:25,229
Maar de kern van uw web-app kan intact blijven.

1179
01:09:25,229 --> 01:09:29,590
Nogmaals, zolang het werkt in IE10, gaat het om een ​​heel eenvoudige poort

1180
01:09:29,590 --> 01:09:33,680
dat spul in Visual Studio te brengen, in Blend, en maak er een Windows Store app.

1181
01:09:33,680 --> 01:09:37,500
Nogmaals, de enige dingen die je zult moeten leren zijn die andere functies

1182
01:09:37,500 --> 01:09:41,830
die u kunt gebruiken om licht op een applicatie, zoals een live-tegel en dat soort dingen.

1183
01:09:41,830 --> 01:09:46,899
>> Yeah. >> [Leerling] Mijn vraag gaat over het mobiele werken.

1184
01:09:46,899 --> 01:09:52,210
Dus als je een app die werkt als een app op het bureaublad te maken,

1185
01:09:52,210 --> 01:09:56,480
is het heel gemakkelijk om te dragen naar mobiel, of is er een -

1186
01:09:56,480 --> 01:10:01,270
De vraag is, als ik een Windows Store app die echt geoptimaliseerd is voor deze omgeving

1187
01:10:01,270 --> 01:10:06,430
en ik wil dat het een mobiele wereld te brengen, wat er bij met dat te doen?

1188
01:10:06,430 --> 01:10:10,060
Dat, net als vele vragen, is altijd een voortdurend veranderende antwoord.

1189
01:10:10,060 --> 01:10:16,190
Het goede nieuws is dat als je steken met HTML en JavaScript, CSS,

1190
01:10:16,190 --> 01:10:18,720
als je vanaf een Windows Store app,

1191
01:10:18,720 --> 01:10:20,590
het gaat om u te laten brengen naar het web

1192
01:10:20,590 --> 01:10:24,650
en dan dat soort technieken, zoals media queries en dingen,

1193
01:10:24,650 --> 01:10:27,180
te passen aan verschillende afmetingen apparaten.

1194
01:10:27,180 --> 01:10:29,900
Dat gezegd hebbende, er is altijd kaders en dingen die er

1195
01:10:29,900 --> 01:10:33,450
dat ondersteuning breiden uit verschillende technologieën, verschillende platforms.

1196
01:10:33,450 --> 01:10:35,670
Dat verandert de hele tijd.

1197
01:10:35,670 --> 01:10:40,030
We veranderen ook dingen als we kijken naar wat we nu hebben

1198
01:10:40,030 --> 01:10:42,950
daadwerkelijk met Windows Phone 8.

1199
01:10:42,950 --> 01:10:44,930
We hebben een aantal gedeelde basisinfrastructuur

1200
01:10:44,930 --> 01:10:48,180
aangeboden tussen applicaties voor omgevingen.

1201
01:10:48,180 --> 01:10:51,200
Dus de dingen die je doet om een ​​Windows Store app te creëren,

1202
01:10:51,200 --> 01:10:57,790
een groot deel daarvan kan worden meegedragen in een Windows Phone 8 applicatie.

1203
01:10:57,790 --> 01:11:02,270
Dat is weer een nieuwe verhaal, dus is er een aantal pagina's over die op te bouwen.

1204
01:11:02,270 --> 01:11:06,780
De SDK komt net uit een tijdje geleden. Het was net een tijdje geleden.

1205
01:11:06,780 --> 01:11:09,920
Maar in termen van andere platforms ook,

1206
01:11:09,920 --> 01:11:13,360
u waarschijnlijk tegenkomen veel cross-platform frameworks ook.

1207
01:11:13,360 --> 01:11:16,170
Het goede nieuws is het spul dat je hier doet,

1208
01:11:16,170 --> 01:11:19,620
de kern functionaliteit is recht omhoog web standaard dingen.

1209
01:11:19,620 --> 01:11:24,010
De enige dingen die niet gemakkelijk zou vertalen zijn de dingen die Windows 8 doet,

1210
01:11:24,010 --> 01:11:28,060
maar dat is geen verrassing, want het is een Windows-functie.

1211
01:11:28,060 --> 01:11:34,090
Je gaat niet om het delen of soortgelijke soorten contracten op elke andere platform te vinden.

1212
01:11:34,090 --> 01:11:37,480
Dus dat zijn de dingen die je zou willen van een ontwerp perspectief

1213
01:11:37,480 --> 01:11:40,820
zorg ervoor dat je manieren om soort abstract dat uit, zodat je kunt zeggen:

1214
01:11:40,820 --> 01:11:42,970
"Als ik die op deze, kan ik dat doen."

1215
01:11:42,970 --> 01:11:48,120
Als ik niet, is er een aantal design patterns die je kunt gebruiken om te verbergen dat soort spullen weg.

1216
01:11:48,120 --> 01:11:53,360
Maar houd dat in gedachten. Yeah. Sorry. Ga je gang.

1217
01:11:53,360 --> 01:11:58,130
>> [Student] Als ik wil mijn Windows-applicatie te testen op de top van [onverstaanbaar]

1218
01:11:58,130 --> 01:12:02,310
[Bowen] Ja. Ik sloeg nog een ding ook. Yeah.

1219
01:12:02,310 --> 01:12:04,910
Ik zal uw vraag eerst te beantwoorden, dan zal ik je laten zien een eigenschap die ik vergat te vermelden.

1220
01:12:04,910 --> 01:12:09,220
We hebben wel een aantal machines die lokaal beschikbaar. Het spijt me.

1221
01:12:09,220 --> 01:12:11,240
De vraag was, hoe test ik dingen op apparaten

1222
01:12:11,240 --> 01:12:14,230
als ik niet toevallig een heleboel dingen om uit te kiezen?

1223
01:12:14,230 --> 01:12:17,130
[Guarin] Wij uitgeleend jullie, denk ik, 5 of 6. Hoeveel heb je nodig?

1224
01:12:17,130 --> 01:12:20,940
[Student] We hebben 4 van hen. >> Oke. Jullie hebben 4 leien om mee te spelen.

1225
01:12:20,940 --> 01:12:25,520
Dus zeker iedereen laten weten, alstublieft. [Lacht] >> [Bowen] Awesome.

1226
01:12:25,520 --> 01:12:27,610
Dat is een nog beter antwoord dan ik was van plan om u te geven.

1227
01:12:27,610 --> 01:12:31,250
We hebben een spreekuur voor ontwikkelaars die we doen op ons kantoor

1228
01:12:31,250 --> 01:12:35,110
en nu binnenkort naar de Microsoft Store over bij de Pru,

1229
01:12:35,110 --> 01:12:37,010
maar Edwin heeft al voor je gezorgd.

1230
01:12:37,010 --> 01:12:42,180
Er zijn 4 leien beschikbaar voor uitlenen, voor het testen.

1231
01:12:42,180 --> 01:12:45,440
Daar gaan we. Er is een voorbeeld van een daarboven.

1232
01:12:45,440 --> 01:12:47,340
Dus ja, absoluut. Geweldig.

1233
01:12:47,340 --> 01:12:52,700
Absoluut veruit de beste manier om het te testen is om op een apparaat.

1234
01:12:52,700 --> 01:12:56,810
Als je niet toevallig een nog of je niet wilt over de campus te lopen in de sneeuw

1235
01:12:56,810 --> 01:13:01,130
een of wat grijpen, is een manier om dit terug in Visual Studio do.

1236
01:13:01,130 --> 01:13:10,360
Als ik terug naar waar ik was hier te gaan, hier in plaats van het gebruik van lokale computer,

1237
01:13:10,360 --> 01:13:13,590
je zou kunnen verbinden met Remote Machine, maar dat is niet waar ik het hier over.

1238
01:13:13,590 --> 01:13:16,830
Simulator is het ding dat je zou willen kijken.

1239
01:13:16,830 --> 01:13:22,120
Ik zal dit uitvoeren, en echt wat het is, het is in wezen een venster op uw eigen systeem.

1240
01:13:22,120 --> 01:13:26,260
Hier is eigenlijk mijn systeem draait, draait Contoso,

1241
01:13:26,260 --> 01:13:29,550
maar op een manier die me sommige parameters uitvoering wijzigen

1242
01:13:29,550 --> 01:13:31,060
de milieu-parameters.

1243
01:13:31,060 --> 01:13:34,150
Dus ik kan hier zeggen: "Weet je wat?"

1244
01:13:34,150 --> 01:13:39,240
Oh. Ik al het lopen in een gesimuleerde 27-inch monitor op 2560 resolutie.

1245
01:13:39,240 --> 01:13:44,930
Ik kan gemakkelijk vallen die naar beneden en zie wat mijn aanvraag zou doen met een kleiner scherm

1246
01:13:44,930 --> 01:13:47,480
of door het veranderen van DPI instellingen of wat dan ook.

1247
01:13:47,480 --> 01:13:50,700
Dus op een klein scherm, een 10.6, wat gaat het doen?

1248
01:13:50,700 --> 01:13:53,040
Dat ziet er nog steeds vrij goed, toch?

1249
01:13:53,040 --> 01:13:58,220
U wilt dit doen, vooral als je onderwerpen aan de winkel, want we doen

1250
01:13:58,220 --> 01:14:00,480
als onderdeel van het testproces.

1251
01:14:00,480 --> 01:14:02,400
En als er problemen zijn als dat,

1252
01:14:02,400 --> 01:14:06,160
dan kun je lopen in een probleem krijgen gecertificeerd voor de winkel.

1253
01:14:06,160 --> 01:14:09,240
Maar dat is een deel van de simulator. Echt cool. Zeer gemakkelijk om dat te doen.

1254
01:14:09,240 --> 01:14:11,480
U kunt ook functies zoals draaien ook.

1255
01:14:11,480 --> 01:14:15,650
Ik kan hier op de knop, heb het draaien, kijken wat iemand zou hebben als een ervaring

1256
01:14:15,650 --> 01:14:20,970
roterende hun lei, hun tablet en het gebruik van uw applicatie met dat.

1257
01:14:20,970 --> 01:14:25,060
Er zijn een aantal andere dingen, zoals touch-emulatie en een aantal andere dingen,

1258
01:14:25,060 --> 01:14:27,210
het instellen van GPS.

1259
01:14:27,210 --> 01:14:31,050
Ik kan doen alsof ik op een andere locatie en zien wat mijn applicatie doet

1260
01:14:31,050 --> 01:14:34,690
toen ik beweren dat ik terug ben in Seattle of zoiets.

1261
01:14:34,690 --> 01:14:41,970
Maar het is echt een handige functie, en het is ingebouwd in zowel Visual Studio en in Blend.

1262
01:14:41,970 --> 01:14:44,460
Ja. Uw vraag.

1263
01:14:44,460 --> 01:14:48,530
>> [Student] Als je het schrijven van een spel, heeft Visual Studio hebt ondersteuning voor animatie?

1264
01:14:48,530 --> 01:14:55,550
Yeah. De vraag is rond animatie ondersteuning, met name gaming.

1265
01:14:55,550 --> 01:14:58,380
Het hangt ervan af. [Grinnikt]

1266
01:14:58,380 --> 01:15:06,870
JavaScript zal ik zeggen dat er waarschijnlijk minder steun dan is er op de XAML kant,

1267
01:15:06,870 --> 01:15:11,430
die tijdlijnen heeft, heeft storyboards en dingen die zijn ingebouwd

1268
01:15:11,430 --> 01:15:18,710
Voor animaties op JavaScript apps, ik weet niet hoeveel van een antwoord dat ik je wil geven.

1269
01:15:18,710 --> 01:15:25,110
Ik heb de middelen op mijn blog die verder gaan door een heleboel opties voor zowel natuurkunde animaties,

1270
01:15:25,110 --> 01:15:29,280
opties voor JavaScript-georiënteerde games op Windows 8.

1271
01:15:29,280 --> 01:15:31,300
Ik zou u verwijzen naar die.

1272
01:15:31,300 --> 01:15:34,300
Kortom, er is zo veel keuzes.

1273
01:15:34,300 --> 01:15:37,770
De reden dat ik aarzelend is dat er zo veel keuzes voor het doen van animaties met JavaScript.

1274
01:15:37,770 --> 01:15:44,280
Het zou CSS zijn, het zou kunnen worden van het Canvas-gebaseerd, kan het zijn gewoon basic DOM animaties,

1275
01:15:44,280 --> 01:15:47,470
het zou een heleboel verschillende dingen, dus het is echt afhankelijk van uw keuze.

1276
01:15:47,470 --> 01:15:55,790
Als u besluit om iets als Create.js of kalk of andere vormen van kaders gebruiken -

1277
01:15:55,790 --> 01:15:59,150
Nou, ik weet niet eens of je gaat in staat zijn om een ​​hoger doel framework

1278
01:15:59,150 --> 01:16:01,370
graag Impact of Construct.

1279
01:16:01,370 --> 01:16:07,000
Dat de neiging om meer code dan kunt u overwegen vanaf nul te genereren.

1280
01:16:07,000 --> 01:16:11,730
Maar in die gevallen kan je nog steeds gebruik maken van een simulator, kunt u de omgeving gebruiken,

1281
01:16:11,730 --> 01:16:17,480
en ik de neiging om gewoon gebruik maken van deze omgeving voor mijn testplatform in die gevallen

1282
01:16:17,480 --> 01:16:19,930
want ik ben het ontwikkelen van games.

1283
01:16:19,930 --> 01:16:22,110
Ik heb prima geweest vooral met Canvas animaties,

1284
01:16:22,110 --> 01:16:23,850
dat is waarschijnlijk de meest voorkomende ding.

1285
01:16:23,850 --> 01:16:27,360
De beste je gaat waarschijnlijk vinden is de dev tools in de browser

1286
01:16:27,360 --> 01:16:30,160
en de dev gereedschappen in Visual Studio.

1287
01:16:30,160 --> 01:16:34,610
Kind van een meanderende antwoord daar, maar hopelijk heb ik je antwoord. Ja. Je.

1288
01:16:34,610 --> 01:16:36,470
>> [Student] Wat zijn de opties voor data opslag voor Windows 8 apps?

1289
01:16:36,470 --> 01:16:41,100
Wat zijn de opties voor data opslag voor Windows 8 apps, Windows Store apps?

1290
01:16:41,100 --> 01:16:46,790
Uw opties zijn echt elke toepassing krijgt een eigen pool van lokale opslag

1291
01:16:46,790 --> 01:16:52,150
voor instellingen en voor gegevens, maar het is ook belachelijk makkelijk om roaming-opslag te gebruiken,

1292
01:16:52,150 --> 01:16:54,920
naar cloud-gebaseerde opslag gebruiken. Het is gratis.

1293
01:16:54,920 --> 01:16:58,250
Wat er gebeurt is dat je eigenlijk kiezen voor een andere klasse en je zegt:

1294
01:16:58,250 --> 01:17:03,370
"Roaming Instellingen opslaan, deze bijzondere set van inhoud,"

1295
01:17:03,370 --> 01:17:06,050
en hun Microsoft-account, wat ze in zo hebben ondertekend,

1296
01:17:06,050 --> 01:17:08,620
gaat naar de sleutel voor roaming die informatie rond.

1297
01:17:08,620 --> 01:17:13,790
Dus als ik je spel op mijn laptop en meld ik in met dezelfde account

1298
01:17:13,790 --> 01:17:18,900
en ik het spel op een oppervlak of een tablet te spelen,

1299
01:17:18,900 --> 01:17:23,610
dat automatisch zwerven die instelling en gegevens tussen die machines.

1300
01:17:23,610 --> 01:17:27,550
Dat is een standaard ding. Dat is goed voor bepaalde hoeveelheden data.

1301
01:17:27,550 --> 01:17:30,220
Je zou het niet een enorme database in die.

1302
01:17:30,220 --> 01:17:35,350
Voor dat je moet gaan naar andere soorten oplossingen, zoals een hosted-database in de cloud,

1303
01:17:35,350 --> 01:17:36,690
dat soort dingen.

1304
01:17:36,690 --> 01:17:39,840
Er zijn enkele andere community mogelijkheden rond andere soorten data technologieën.

1305
01:17:39,840 --> 01:17:42,920
Ik heb een aantal SQLite opties in de gemeenschap rond daar gezien ook.

1306
01:17:42,920 --> 01:17:46,690
Zodat meer en meer zijn in opkomst, maar dat zijn de belangrijkste dingen die je zou kijken naar

1307
01:17:46,690 --> 01:17:49,430
voor een spelletje of een app.

1308
01:17:49,430 --> 01:17:50,610
En u een vraag in de rug gehad ook.

1309
01:17:50,610 --> 01:18:02,390
>> [Student] In termen van het netwerk [onverstaanbaar] het uploaden of downloaden van bestanden [onverstaanbaar]

1310
01:18:02,390 --> 01:18:04,870
[Bowen] Is uw vraag hoe kun je zien dat of hoe kun je dat debuggen en testen?

1311
01:18:04,870 --> 01:18:10,630
[Student] Hoe kun je het debuggen [onverstaanbaar]

1312
01:18:10,630 --> 01:18:12,670
Sorry. Ik kan niet alles horen.

1313
01:18:12,670 --> 01:18:16,480
[Student] Hoe krijg je het bug getest en ook [onverstaanbaar]

1314
01:18:16,480 --> 01:18:17,490
Geweldig. Geweldig.

1315
01:18:17,490 --> 01:18:21,860
Hoe werk je met netwerken? Hoe kun je zien wat er aan de hand?

1316
01:18:21,860 --> 01:18:23,620
Er zijn veel verschillende antwoorden op deze,

1317
01:18:23,620 --> 01:18:26,420
maar laat ik je waarschijnlijk de makkelijkste dingen hier.

1318
01:18:26,420 --> 01:18:29,350
Laat me te ontdoen van de simulator voor een tweede.

1319
01:18:29,350 --> 01:18:31,740
Gewoon een paar opties voor foutopsporing voor netwerken.

1320
01:18:31,740 --> 01:18:36,070
Er is een complete netwerk-stack gebakken recht in zowel de WinRT niveau en vanuit WinJS,

1321
01:18:36,070 --> 01:18:42,810
dus je kunt heel gemakkelijk XHR maken, AJAX soort oproepen van je spel of app om dat te doen.

1322
01:18:42,810 --> 01:18:47,250
Vooral, heb ik de neiging om 2 dingen te gebruiken.

1323
01:18:47,250 --> 01:18:53,660
Ik gebruik de werkelijke dev instrumenten zelf, die een netwerk-stack gebakken in hen hebben.

1324
01:18:53,660 --> 01:18:55,870
Laat ik je de Windows home page.

1325
01:18:55,870 --> 01:19:02,730
Ik kan dit brengen, en er is eigenlijk een netwerk proxy gebakken in deze tools hier.

1326
01:19:02,730 --> 01:19:08,390
Dus ik kan dit doen, ik kan de pagina te vernieuwen, en het gaat me al van de interacties te tonen,

1327
01:19:08,390 --> 01:19:14,550
inclusief AJAX vraagt ​​om die sessie, voor de duur van die aanvraag.

1328
01:19:14,550 --> 01:19:17,600
Dit is nuttig. Het zal zeer nuttig zijn voor browser-gebaseerde applicaties te zijn.

1329
01:19:17,600 --> 01:19:20,470
Voor andere vormen van apps, waaronder Windows Store apps,

1330
01:19:20,470 --> 01:19:23,970
Ik gebruik een tool genaamd Fiddler.

1331
01:19:23,970 --> 01:19:29,650
Je gaat om een ​​spel te krijgen in reactie. [Grinnikt]

1332
01:19:29,650 --> 01:19:32,750
Fiddler is een eenvoudige proxy. Ik denk dat ik kan aantonen dat aan jou.

1333
01:19:32,750 --> 01:19:40,190
Het is gewoon GetFiddler.com, die interessant genoeg, ik traceren mijn netwerk stack

1334
01:19:40,190 --> 01:19:41,740
gaat GetFiddler.

1335
01:19:41,740 --> 01:19:45,700
Maar hoe dan ook, Fiddler is geschreven door een van de PM's op het IE-team,

1336
01:19:45,700 --> 01:19:48,290
dus hij weet wat hij doet.

1337
01:19:48,290 --> 01:19:52,630
Dit is een goede proxy die u kunt gebruiken voor het debuggen netwerkverkeer.

1338
01:19:52,630 --> 01:19:55,730
Ik zou adviseren dat. Vraag daar ook.

1339
01:19:55,730 --> 01:19:58,050
>> [Student] Is er een gemakkelijke manier om een ​​vreemde taal ingang te integreren,

1340
01:19:58,050 --> 01:20:00,810
zoals Japanse of Chinese, in Windows apps?

1341
01:20:00,810 --> 01:20:03,240
Ik kan niet zeggen dat ik te veel van het zelf gedaan, maar het is gebakken in

1342
01:20:03,240 --> 01:20:08,470
Er zijn opties voor natuurlijk uitzenden uw aanvraag - Het spijt me, ik heb de vraag niet zeggen -

1343
01:20:08,470 --> 01:20:11,100
opties rond globalisering, lokalisatie van de inhoud,

1344
01:20:11,100 --> 01:20:14,320
ook dingen zoals de mogelijkheid om te verkopen in verschillende markten

1345
01:20:14,320 --> 01:20:19,190
en richten die versie van uw aanvraag voor deze individuele talen

1346
01:20:19,190 --> 01:20:21,080
of culturen of dat soort dingen. Absoluut ingebouwd

1347
01:20:21,080 --> 01:20:22,980
We hebben ondersteuning voor die voor eeuwig had,

1348
01:20:22,980 --> 01:20:26,630
en dat wordt overgenomen in uw opties voor Windows Store.

1349
01:20:26,630 --> 01:20:30,450
U kunt dat doen in de winkel zelf, te verkopen in verschillende markten,

1350
01:20:30,450 --> 01:20:34,050
kun je dat doen in de applicatie en ook met het gebruik van de middelen te definiëren,

1351
01:20:34,050 --> 01:20:42,220
"Als ik ontwikkeld voor deze cultuur, gebruik dan deze bijsturingen voor mijn tekstuele inhoud

1352
01:20:42,220 --> 01:20:44,510
"Of gebruik een van rechts naar links lezer."

1353
01:20:44,510 --> 01:20:51,290
Dat zijn allemaal onderdeel van de standaard WinJS en WinRT API's. Goede vraag.

1354
01:20:51,290 --> 01:20:54,770
>> Hoe doen we het? Elke anderen?

1355
01:20:54,770 --> 01:20:58,850
En als iemand op video heeft vragen, ben ik cbowen @ microsoft,

1356
01:20:58,850 --> 01:21:02,790
dus ik ben blij om al uw vragen te nemen van de toekomst.

1357
01:21:02,790 --> 01:21:05,690
Zeer - Vanaf de toekomst, toekomst [bootst echo].

1358
01:21:05,690 --> 01:21:09,140
Dus hier ben ik. Laat me terug te zetten hier mijn contactgegevens.

1359
01:21:09,140 --> 01:21:11,840
Dus stuur me een briefje, cbowen @ microsoft,

1360
01:21:11,840 --> 01:21:15,190
en ik zal u zo snel als ik kan.

1361
01:21:15,190 --> 01:21:19,010
>> Iets anders dat je je afvraagt? Zijn we goed?

1362
01:21:19,010 --> 01:21:24,050
Geweldig. Oke. Dank u allen zeer. Ik waardeer het. [Applaus]

1363
01:21:24,800 --> 01:21:27,000
>> [CS50.TV]