1
00:00:00,000 --> 00:00:02,420
[Powered by Google Translate] [Seminarium - Windows 8 - App / spelutveckling med 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
[Det här är CS50. - CS50.TV]

4
00:00:07,350 --> 00:00:10,290
>> Hej, alla. Mitt namn är Edwin Guarin. Det här är Chris Bowen.

5
00:00:10,290 --> 00:00:12,310
Jag ska låta honom presentera sig på en sekund.

6
00:00:12,310 --> 00:00:14,100
Jag vill bara göra ett snabbt meddelande.

7
00:00:14,100 --> 00:00:18,340
Först av allt, allt du CS50 studenter får Windows 8 gratis.

8
00:00:18,340 --> 00:00:23,150
Så om du funderar på att faktiskt använda det för ditt slutprojekt, det är ditt.

9
00:00:23,150 --> 00:00:25,740
Nate kommer att skicka ut ett mail senare för instruktioner.

10
00:00:25,740 --> 00:00:32,850
Det andra är om du väljer att skriva en Windows 8 app för din CS50 slutprojekt,

11
00:00:32,850 --> 00:00:35,870
vi kommer att göra några giveaways: en Xbox,

12
00:00:35,870 --> 00:00:38,870
Vi kanske kan ge en skiffer bort, sånt.

13
00:00:38,870 --> 00:00:42,460
Så om det är något som håller dig tillbaka, lät Chris eller jag vet

14
00:00:42,460 --> 00:00:45,010
hur vi kan hjälpa dig att bygga något riktigt coolt.

15
00:00:45,010 --> 00:00:48,580
Så tack igen för att du kom idag, och jag ska lämna över till Chris.

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

17
00:00:51,000 --> 00:00:52,740
Tack, alla, för att gå med oss ​​i dag.

18
00:00:52,740 --> 00:00:55,800
Jag är Chris Bowen. Jag är en av Edwin s kolleger här i nordost.

19
00:00:55,800 --> 00:00:58,310
Jag ville bara tillbringa lite tid med dig att prata om

20
00:00:58,310 --> 00:01:03,730
hur man gör en Windows Store ansökan med HTML5, JavaScript och CSS

21
00:01:03,730 --> 00:01:07,310
och typ av få alla frågor du kan ha om det svarade för dig

22
00:01:07,310 --> 00:01:12,920
som du tittar mot att tänka på kanske använder det för en CS50 finaler tillfälle.

23
00:01:12,920 --> 00:01:14,980
>> Som sagt, vi bara dyka rätt i.

24
00:01:14,980 --> 00:01:17,190
Jag ska gå över till diabilder hit.

25
00:01:17,190 --> 00:01:19,440
Om du har några frågor, tveka inte att skicka mig ett mail.

26
00:01:19,440 --> 00:01:23,460
Jag är cbowen@microsoft.com, och det är min blogg och mitt Twitter.

27
00:01:23,460 --> 00:01:26,330
Men du vill komma i kontakt med mig, det är bra.

28
00:01:26,330 --> 00:01:30,110
Jag har ungefär en timme av saker, och jag vill få dina frågor på vägen,

29
00:01:30,110 --> 00:01:33,720
så var inte blyg om att ha frågor under denna.

30
00:01:33,720 --> 00:01:36,470
De kan inte se vem som ställer frågorna på inspelningen,

31
00:01:36,470 --> 00:01:39,090
så du kommer att vara så anonym som du vill vara.

32
00:01:39,090 --> 00:01:42,780
>> Låt mig dyka rätt i, bara ge dig en snabb introduktion till Windows 8,

33
00:01:42,780 --> 00:01:47,400
och visa dig några av de saker om Windows Store apps som du kan överväga

34
00:01:47,400 --> 00:01:49,530
när du funderar på att utveckla ett program.

35
00:01:49,530 --> 00:01:52,660
Vi tittar på Windows 8. Vi har varit ute för ett par veckor nu.

36
00:01:52,660 --> 00:01:55,810
Många stark adoption där ute redan.

37
00:01:55,810 --> 00:01:59,800
Du kanske redan har sett de Surface maskiner som vi har också.

38
00:01:59,800 --> 00:02:03,730
Det är en hit faktiskt kan du ta en titt på om du är här personligen.

39
00:02:03,730 --> 00:02:07,530
Jag vill verkligen prata med dig, visa dig runt lite om Windows 8.

40
00:02:07,530 --> 00:02:10,759
Tanken med Windows 8, det egentligen lägga fram allt det du vet om Windows

41
00:02:10,759 --> 00:02:16,840
in några nya erfarenheter - särskilt saker som på ytan maskinen med beröring,

42
00:02:16,840 --> 00:02:20,000
denna typ av flera mobila enheter som nu finns på marknaden,

43
00:02:20,000 --> 00:02:22,360
men det är också Windows som kärna.

44
00:02:22,360 --> 00:02:25,850
Så det betyder att du kan installera det verkligen på något som kör Windows 7,

45
00:02:25,850 --> 00:02:30,770
från din största triple SLI gaming rig ner till din bärbara dator

46
00:02:30,770 --> 00:02:36,200
och till din skinande nya andra enheter som du kan plocka upp i dag.

47
00:02:36,200 --> 00:02:38,450
De kommer att köra Windows 8.

48
00:02:38,450 --> 00:02:40,530
Jag ska visa dig runt bara lite,

49
00:02:40,530 --> 00:02:44,670
och alla de upplevelser som du ser här är saker som du kan skapa.

50
00:02:44,670 --> 00:02:47,760
Tanken är om det är touch, mus, tangentbord,

51
00:02:47,760 --> 00:02:51,870
oavsett enhet är att du kör programmet på, det kommer att köra bra.

52
00:02:51,870 --> 00:02:55,180
Windows 8 kommer att hjälpa till med alla dessa scenarier.

53
00:02:55,180 --> 00:02:59,600
>> Dessa glider åt sidan, låt oss bara få rätt i att ta en titt runt här.

54
00:02:59,600 --> 00:03:03,270
Låt mig visa dig runt min startskärmen. Det här är min startskärm.

55
00:03:03,270 --> 00:03:05,810
Jag ska bara ge er en liten bit av en turné här.

56
00:03:05,810 --> 00:03:09,610
Jag är på en icke-touch maskin, så mycket som jag vill beröra min laptop skärm,

57
00:03:09,610 --> 00:03:13,400
det kommer inte att göra en sak, så jag ska bara rulla runt här lite och visa dig.

58
00:03:13,400 --> 00:03:17,950
Några saker som du kanske märker är att dessa så kallade live-plattor

59
00:03:17,950 --> 00:03:21,470
faktiskt kan animera, och de kan ge information till dig -

60
00:03:21,470 --> 00:03:24,750
kanske uppdateringar på statistik för ett spel

61
00:03:24,750 --> 00:03:30,970
eller visa nyheter från några av de tidigare program som är här på vänster sida.

62
00:03:30,970 --> 00:03:35,350
Så där. Jag är säker på att det bara är positivt och fantastiskt goda nyheter.

63
00:03:35,350 --> 00:03:38,450
Du kan se här det verkligen ringa din uppmärksamhet tillbaka till programmet och sade

64
00:03:38,450 --> 00:03:43,010
"Hej, det är något nytt här. Titta. Kom tillbaka in och se vad som är nytt för dig."

65
00:03:43,010 --> 00:03:45,320
Det kallas levande kakel, och du kan göra anmälningar

66
00:03:45,320 --> 00:03:47,070
antingen direkt från själva ansökan

67
00:03:47,070 --> 00:03:52,220
eller om du tar en titt på mer i detalj, får du reda på hur man skriver en fjärrtjänst

68
00:03:52,220 --> 00:03:54,340
som faktiskt kan skjuta information till kakel,

69
00:03:54,340 --> 00:03:56,520
vilket är vad som händer med dessa nyheter apps.

70
00:03:56,520 --> 00:04:00,080
De är faktiskt få nyheter från molnet och uppdatera kakel just där

71
00:04:00,080 --> 00:04:03,710
så att folk vet att det finns en anledning att öppna upp programmet och ta en titt

72
00:04:03,710 --> 00:04:06,950
oavsett på vilken de senaste nyheterna är i någon av dessa

73
00:04:06,950 --> 00:04:10,060
eller om det finns nya recept eller ett nytt rekord att slå

74
00:04:10,060 --> 00:04:13,560
eller en vän spelar eller vad på dessa ansökningar.

75
00:04:13,560 --> 00:04:15,550
Det är något att locka dig igen

76
00:04:15,550 --> 00:04:18,640
Så det är de levande kakel, och det kan vara en person, kan det vara en hemsida också.

77
00:04:18,640 --> 00:04:20,790
Vanligtvis är det ett program.

78
00:04:20,790 --> 00:04:25,320
>> Ganska mycket alla dessa saker som jag har här kom från Windows Store. Jag ska starta det.

79
00:04:25,320 --> 00:04:27,890
Det är ett av de program som du får som standard

80
00:04:27,890 --> 00:04:30,350
på alla maskiner som kör Windows 8.

81
00:04:30,350 --> 00:04:33,040
Du kan komma hit för att hitta något du skulle vilja,

82
00:04:33,040 --> 00:04:37,240
från saker som är markerade med spel som jag inte har sett förut.

83
00:04:37,240 --> 00:04:39,440
Åh, wow, vi har fått en ny flipper här.

84
00:04:39,440 --> 00:04:41,580
Du kan installera dessa rätt här från butiken,

85
00:04:41,580 --> 00:04:43,420
och vi kommer att prata om hur man kan utveckla dessa.

86
00:04:43,420 --> 00:04:45,670
Du har en massa val i hur du skapar dem.

87
00:04:45,670 --> 00:04:49,020
Vi kommer att fokusera på JavaScript historien med HTML och CSS,

88
00:04:49,020 --> 00:04:52,790
men för användaren, till köparen av app, det spelar ingen roll vad det skrevs i.

89
00:04:52,790 --> 00:04:54,670
De kan gå vidare och arbeta med det.

90
00:04:54,670 --> 00:04:57,870
Jag är fascinerad av den här, så jag måste öppna upp detta och ta en titt.

91
00:04:57,870 --> 00:05:02,310
Varje app, inklusive de som du kan skicka in och sälja eller ge bort gratis,

92
00:05:02,310 --> 00:05:06,240
vad du vill göra i butiken, kommer att få en hemsida som denna.

93
00:05:06,240 --> 00:05:10,750
Du kan skicka in din ansökan ett gäng skärmdumpar - du se några här -

94
00:05:10,750 --> 00:05:15,970
information om programmet, och med tiden kommer du att samla både betyg -

95
00:05:15,970 --> 00:05:19,020
de är i princip bara stjärnklassificering - och recensioner,

96
00:05:19,020 --> 00:05:20,690
som ger lite mer insikt.

97
00:05:20,690 --> 00:05:24,380
Egentligen har någon att skriva något och berätta hur fantastisk du är,

98
00:05:24,380 --> 00:05:29,300
och som kommer att gå in i ditt Recensioner avsnitt hit, som jag inte har tittat på.

99
00:05:29,300 --> 00:05:33,890
Fantastiskt. "Kommer inte ens öppna." Hur stor.

100
00:05:33,890 --> 00:05:39,000
Jo, för folk för vilka detta gjorde öppna och köra, verkar de verkligen njuta av det. [Skrattar]

101
00:05:39,000 --> 00:05:43,770
Ha detta i åtanke. Internet. Vem som helst kan säga vad de vill om din ansökan.

102
00:05:43,770 --> 00:05:45,780
Så se till att du gör ett bra jobb med det,

103
00:05:45,780 --> 00:05:49,030
se till att du gör det så bekvämt för användaren som du kan

104
00:05:49,030 --> 00:05:52,720
eftersom de är ett par klick bort från att ge en översyn,

105
00:05:52,720 --> 00:05:55,870
och som kommer att ackumuleras upp till din övergripande betyg översyn.

106
00:05:55,870 --> 00:05:58,990
Och du vill göra ditt bästa för att du kommer att vara upp mot andra applikationer.

107
00:05:58,990 --> 00:06:01,830
Det kommer att finnas tusentals program redan i butiken,

108
00:06:01,830 --> 00:06:06,880
och risken är stor, kan det vara något som gör liknande funktionalitet till vad du gör.

109
00:06:06,880 --> 00:06:12,740
Så om du verkligen kan stå ut från mängden, det kommer att vara till din fördel, förstås.

110
00:06:12,740 --> 00:06:15,300
>> Vi kommer att komma in i butiken lite senare.

111
00:06:15,300 --> 00:06:17,090
Jag vill verkligen fokusera på att skapa appar.

112
00:06:17,090 --> 00:06:20,760
Men den korta versionen av butiken är världsomspännande distribution,

113
00:06:20,760 --> 00:06:25,430
Det är automatiskt en del av Windows 8, folk bara brand det upp och ta en titt på olika appar här,

114
00:06:25,430 --> 00:06:29,070
har du Dress-Up Sticker Book och alla typer av olika appar.

115
00:06:29,070 --> 00:06:33,690
Fresh Paint, använder jag detta mycket - dåligt, men jag använder den mycket.

116
00:06:33,690 --> 00:06:36,080
Det visar att jag redan äger den.

117
00:06:36,080 --> 00:06:41,280
Låt mig visa dig något som jag inte har - UVideos jag inte har så helt nya.

118
00:06:41,280 --> 00:06:43,660
Du ser här att det är gratis, så att du kan installera det direkt från affären.

119
00:06:43,660 --> 00:06:46,430
Du har val också. Du kan givetvis ge bort.

120
00:06:46,430 --> 00:06:49,660
Du kan sätta reklam i appen eller spel.

121
00:06:49,660 --> 00:06:54,770
Du kan också ta betalt för det, och du kan lätt ge en rättegång för programmet samt

122
00:06:54,770 --> 00:06:58,220
så att du kan låta folk prova det i en vecka eller vad du vill göra.

123
00:06:58,220 --> 00:07:01,540
Det är bara anpassningsbar genom portalen. Du behöver inte skriva någon kod för det.

124
00:07:01,540 --> 00:07:03,990
Så du säger, "Du kan använda det här i en vecka och sedan har du fått för att köpa den,"

125
00:07:03,990 --> 00:07:07,130
eller du kan göra saker som, "Du kan spela de tre första nivåerna av detta spel

126
00:07:07,130 --> 00:07:09,820
"Och sedan du måste köpa för att komma åt resten."

127
00:07:09,820 --> 00:07:12,310
Du kan till och med göra i-app inköp också, så du kan säga,

128
00:07:12,310 --> 00:07:17,880
"Vi har ytterligare äventyr eller uppsättningar av grafik eller saker som är upplåsta -

129
00:07:17,880 --> 00:07:21,430
"Fler recept som är upplåsta -. Om du köper dessa utökade uppsättningar"

130
00:07:21,430 --> 00:07:24,260
Och du kan göra det allt inom app eller spelet i sig.

131
00:07:24,260 --> 00:07:26,070
Så, helt upp till dig, ditt val.

132
00:07:26,070 --> 00:07:28,070
Det finns en massa saker som du kan göra i butiken,

133
00:07:28,070 --> 00:07:31,660
och sedan i princip att du skickar in den till en certifiering kanal.

134
00:07:31,660 --> 00:07:35,380
Vi kan prata allt om det lite senare, men det är målet.

135
00:07:35,380 --> 00:07:40,410
Du vill få din app i hela världen synlighet i butiken här.

136
00:07:40,410 --> 00:07:44,170
>> Tillbaka på startskärmen här, skulle jag vilja visa dig runt lite mer.

137
00:07:44,170 --> 00:07:50,580
Om jag startar dessa program, låt mig ge er ett exempel på en cross-app funktionalitet här.

138
00:07:50,580 --> 00:07:53,070
För att göra det, kommer jag att lansera Fresh Paint.

139
00:07:53,070 --> 00:07:55,550
En sak du ser här är varenda bit av skärmen,

140
00:07:55,550 --> 00:07:58,040
alla pixlar på skärmen, gå till din app.

141
00:07:58,040 --> 00:08:01,990
Borta är de dagar då du har dessa gränser runt fönster

142
00:08:01,990 --> 00:08:05,120
med massor av knappar som alltid är det tar upp plats hela tiden.

143
00:08:05,120 --> 00:08:09,430
Nu du verkligen vill komma bort från det och bara ha ditt innehåll vara i fokus.

144
00:08:09,430 --> 00:08:13,710
Vi kan göra saker med Windows genom att gå andra typer av menyer.

145
00:08:13,710 --> 00:08:16,840
En av dem är faktiskt vad som kallas den charm bar,

146
00:08:16,840 --> 00:08:18,870
och det kommer ut från sidan av skärmen.

147
00:08:18,870 --> 00:08:21,270
Du kan faktiskt bläddra från sidan om du har en pekskärm,

148
00:08:21,270 --> 00:08:24,840
du kan högerklicka om du har en mus, det finns ett kortkommando för det,

149
00:08:24,840 --> 00:08:29,490
det finns alltid mer än ett sätt att göra något i miljön här.

150
00:08:29,490 --> 00:08:31,680
Som lyfter fram ett antal saker som du kan göra.

151
00:08:31,680 --> 00:08:33,870
Den mest uppenbara är att du kan gå tillbaka till startskärmen,

152
00:08:33,870 --> 00:08:36,780
men de andra 4 är vad som kallas charm.

153
00:08:36,780 --> 00:08:41,059
De avtal som du kan plugga in som en app utvecklare. De är ganska coolt.

154
00:08:41,059 --> 00:08:43,340
Sök, jag är säker på att det är något du ska göra,

155
00:08:43,340 --> 00:08:44,950
dela Jag ska visa dig i en sekund,

156
00:08:44,950 --> 00:08:48,450
och enheter och inställningar, dessa är alla saker som din app kan kopplas till

157
00:08:48,450 --> 00:08:51,960
att utnyttja Windows, för att säga: "Jag har gjort min del

158
00:08:51,960 --> 00:08:54,700
"Och jag vill att Windows ska stödja vissa andra funktioner,

159
00:08:54,700 --> 00:08:56,750
"Och jag vill inte skriva en massa kod för att förverkliga detta."

160
00:08:56,750 --> 00:08:59,480
Det är verkligen en fördel med att använda dessa funktioner.

161
00:08:59,480 --> 00:09:01,340
Låt mig visa dig något.

162
00:09:01,340 --> 00:09:05,170
För att göra det, ska jag göra en ny målning.

163
00:09:05,170 --> 00:09:08,240
Jag pratade också om att använda varje pixel för din app.

164
00:09:08,240 --> 00:09:11,850
Som standard är detta vad färgen appen ser ut när du använder den.

165
00:09:11,850 --> 00:09:14,960
Det handlar egentligen bara om vad du ritar, ditt innehåll.

166
00:09:14,960 --> 00:09:20,850
Jag skulle kunna göra hemska saker här. Vad ska jag göra? Jag vet inte.

167
00:09:20,850 --> 00:09:23,110
Scribbles? Åh, bra. Jag kan göra klotter. Fantastiskt.

168
00:09:23,110 --> 00:09:25,130
En kalkon? [Skrattar]

169
00:09:25,130 --> 00:09:28,500
Detta är det mest abstrakta kalkon du kommer att se.

170
00:09:28,500 --> 00:09:31,780
Jag kan också ta upp vad som kallas appen bar,

171
00:09:31,780 --> 00:09:33,850
och detta är verkligen en av de viktigaste sätten som du kan använda

172
00:09:33,850 --> 00:09:37,210
att gömma undan alla saker som kan ha varit på din app eller spel innan

173
00:09:37,210 --> 00:09:39,570
bara tar upp plats hela tiden.

174
00:09:39,570 --> 00:09:43,270
Så nu kan du lägga upp den här, och detta är verkligen en av de mer vackra upplevelser

175
00:09:43,270 --> 00:09:46,380
med appen bar som jag har sett.

176
00:09:46,380 --> 00:09:48,800
Sätt de val här för att välja ut olika färger.

177
00:09:48,800 --> 00:09:54,310
Vi ville ha en kalkon, så vi ska lägga lite brun här, börja blanda i ett par färger.

178
00:09:54,310 --> 00:09:58,790
Vi tar en mellanliggande färg här och sedan komma tillbaka hit.

179
00:09:58,790 --> 00:10:02,990
Du kan börja rita. Det är din kalkon. Fantastiskt.

180
00:10:02,990 --> 00:10:07,660
Jag kan inte dra till att börja med, men att göra det med en pekplatta inför en publik är ännu bättre.

181
00:10:07,660 --> 00:10:09,640
Det är häftigt.

182
00:10:09,640 --> 00:10:13,030
Tanken är dock allt som jag bryr mig om är just här på ytan.

183
00:10:13,030 --> 00:10:17,060
Låt oss säga att jag är så nöjd med detta att jag måste dela den med någon.

184
00:10:17,060 --> 00:10:19,680
Normalt vad du skulle göra med andra versioner av Windows,

185
00:10:19,680 --> 00:10:22,900
Du skulle kanske ta en skärmdump, skulle du göra en del copy-pasta av din text

186
00:10:22,900 --> 00:10:24,950
eller saker som det som du vill dela ut,

187
00:10:24,950 --> 00:10:27,260
och sedan gå och öppna ett annat program och lägga den i det.

188
00:10:27,260 --> 00:10:28,630
Här behöver du inte göra det.

189
00:10:28,630 --> 00:10:32,400
Du kan faktiskt ta fram det charm bar och säga, "Jag vill dela det här."

190
00:10:32,400 --> 00:10:35,000
På denna punkt det kommer att visa dig alla appar

191
00:10:35,000 --> 00:10:38,080
som vet hur man arbetar med vad som delas.

192
00:10:38,080 --> 00:10:41,590
I det här fallet är det en bild, så det kommer att säga, "jag ser att du har en bild."

193
00:10:41,590 --> 00:10:45,590
"Vill du dela med dig av det?" Du kan se jag maila mig saker hela tiden.

194
00:10:45,590 --> 00:10:49,420
Man inser att, och det erbjuder mig att som en genväg,

195
00:10:49,420 --> 00:10:53,270
men det har också visat mig varje app som vet hur man handskas med att ta en bild

196
00:10:53,270 --> 00:10:55,520
och göra något med den.

197
00:10:55,520 --> 00:10:57,890
Dessa har alla uppgett för Windows att de kan göra det.

198
00:10:57,890 --> 00:10:59,240
Vid denna punkt är Windows.

199
00:10:59,240 --> 00:11:01,680
Användaren väljer precis vad de vill göra med det.

200
00:11:01,680 --> 00:11:06,610
Jag ska göra mitt vanliga i PuzzleTouch. Du kan se att jag har skapat alla typer av pussel över tiden.

201
00:11:06,610 --> 00:11:11,790
Jag tar PuzzleTouch och säga, "Jag vill dela denna fantastiska skapelse med PuzzleTouch."

202
00:11:11,790 --> 00:11:16,670
Det kommer att gå vidare och säga, "Bra. Vill du dela denna? Fantastiskt."

203
00:11:16,670 --> 00:11:19,260
"Vill du göra ett pussel som är lätt, medel, vad?"

204
00:11:19,260 --> 00:11:20,800
Jag ska göra en mellanliggande en här.

205
00:11:20,800 --> 00:11:24,890
Den gör pusslet. Det kommer att bli en fruktansvärd pussel eftersom det är mestadels tom.

206
00:11:24,890 --> 00:11:28,100
Men det är klart, och det är faktiskt tillbaka i det andra programmet.

207
00:11:28,100 --> 00:11:32,360
Om jag kommer ut här, kan jag söka efter den och starta den.

208
00:11:32,360 --> 00:11:38,100
Om vi ​​nu rulla över bara lite här, ska vi se min skapelse någonstans.

209
00:11:38,100 --> 00:11:42,930
Vart tog jag vägen? Vilken typ av pussel gjorde jag göra? Har jag göra det enkelt?

210
00:11:42,930 --> 00:11:46,110
Åh, det är det, precis där.

211
00:11:46,110 --> 00:11:49,550
[Småskrattar] Det är lätt att känna igen kalkon pussel som är här.

212
00:11:49,550 --> 00:11:52,360
Men jag vill påpeka för er, det häftiga här

213
00:11:52,360 --> 00:11:54,710
är apparna inte visste något om varandra.

214
00:11:54,710 --> 00:11:58,740
De sa bara, "Jag har en bild att dela, och jag vet hur man handskas med bilder."

215
00:11:58,740 --> 00:12:01,420
Och du som utvecklare, behöver du inte att skriva koden.

216
00:12:01,420 --> 00:12:05,350
När någon ber mig att dela, kommer jag att ställa några uppgifter i denna lilla datastruktur

217
00:12:05,350 --> 00:12:06,740
och jag är klar.

218
00:12:06,740 --> 00:12:10,990
Den andra appen tar över, gör sin grej, och det är slutet på erfarenhetsutbyte.

219
00:12:10,990 --> 00:12:14,550
Det är bara en sak som du kan göra - riktigt, riktigt kraftfull -

220
00:12:14,550 --> 00:12:17,570
och det kommer att bli en av de saker som verkligen kan hjälpa skilja din app

221
00:12:17,570 --> 00:12:20,090
och även ditt spel också i butiken.

222
00:12:20,090 --> 00:12:22,220
Folk kommer att kunna säga: "Det här är verkligen användbart."

223
00:12:22,220 --> 00:12:25,430
"Jag använder detta pussel skapare hela tiden. Det är fantastiskt."

224
00:12:25,430 --> 00:12:30,490
>> Det är nog av en kort översikt av vad som händer här.

225
00:12:30,490 --> 00:12:33,670
Det finns ett par andra funktioner också att kanske vi ska lyfta fram när vi går igenom koden.

226
00:12:33,670 --> 00:12:37,710
Men jag vill dyka in i bilderna, och att göra det, kommer jag att gå till skrivbordet,

227
00:12:37,710 --> 00:12:40,940
som i sig är en annan levande kakel här.

228
00:12:40,940 --> 00:12:43,840
Jag kan gå in i detta och, mycket riktigt, jag är på mina bilder,

229
00:12:43,840 --> 00:12:46,320
men låt mig visa dig egentligen var vi är.

230
00:12:46,320 --> 00:12:48,460
Vi är faktiskt i skrivbordsläge.

231
00:12:48,460 --> 00:12:52,580
Detta är verkligen där vad jag sade tidigare om Windows överföring

232
00:12:52,580 --> 00:12:54,850
för nya erfarenheter visar sig.

233
00:12:54,850 --> 00:12:56,450
Detta är det Windows som du vet.

234
00:12:56,450 --> 00:12:59,730
Windows-program kallas skrivbordsprogram. De kör här.

235
00:12:59,730 --> 00:13:02,730
Om du har befintliga program och du vill köra dem på Windows 8,

236
00:13:02,730 --> 00:13:04,710
Du kan absolut göra det.

237
00:13:04,710 --> 00:13:07,590
Dessa är inte samma saker som butiken apps, som är här borta,

238
00:13:07,590 --> 00:13:12,240
som Fresh Paint och dessa NBC News apps och sånt. De kommer att komma från butiken.

239
00:13:12,240 --> 00:13:14,450
De kan plugga in några av de funktioner som jag visar dig

240
00:13:14,450 --> 00:13:16,620
och andra som jag inte har visat er än.

241
00:13:16,620 --> 00:13:21,460
Men bara ha det i åtanke. Vi har stöd för båda dessa saker också.

242
00:13:21,460 --> 00:13:27,000
Jag är ledsen. Är det något som inte visas på skärmen? Jag har tappat det helt. Det är konstigt.

243
00:13:29,000 --> 00:13:31,000
Okej. Tack för upplysningen.

244
00:13:31,000 --> 00:13:34,770
Det du inte har sett på ett tag är mitt visar dig att skrivbordet är här.

245
00:13:34,770 --> 00:13:37,540
Vad är det sista som du såg? Såg du det?

246
00:13:37,540 --> 00:13:39,490
Detta är skrivbordet. Du vet redan hur det ser ut.

247
00:13:39,490 --> 00:13:42,070
Det är inget fruktansvärt ovanligt.

248
00:13:42,070 --> 00:13:46,940
Det är vår bär den erfarenheten framåt för dig och att du kan använda de saker som du har haft.

249
00:13:46,940 --> 00:13:50,460
Till exempel kommer jag att visa dig Visual Studio. Det är ett datorprogram.

250
00:13:50,460 --> 00:13:52,600
Det kommer att köra i det här läget.

251
00:13:52,600 --> 00:13:54,960
Det kommer att stödja en mer komplex miljö

252
00:13:54,960 --> 00:14:01,470
med en hel del alternativ och sånt, så det gör det ett bra alternativ som en desktop app.

253
00:14:01,470 --> 00:14:04,810
>> Som sagt, låt oss gå till diabilder för bara en liten bit

254
00:14:04,810 --> 00:14:09,720
och ge dig några inledande innehåll och sedan komma in faktiskt kodning här.

255
00:14:09,720 --> 00:14:14,070
Den goda nyheten är att jag har hört att du har fokus på en hel del CSS och JavaScript, HTML.

256
00:14:14,070 --> 00:14:18,110
Samtliga av de saker som du har inlärnings bär direkt på att göra Windows Store apps.

257
00:14:18,110 --> 00:14:22,920
De saker som du har hört om med tillämpning av CSS-selektorer och alla dessa saker

258
00:14:22,920 --> 00:14:27,180
är exakt vad du gör för att skapa en ansökan här för butiken.

259
00:14:27,180 --> 00:14:29,640
Vi går igenom dessa saker bit för bit.

260
00:14:29,640 --> 00:14:34,130
I grund och botten, jag bygger på de saker som du redan har tagit sig tid att lära sig.

261
00:14:34,130 --> 00:14:36,520
Detta är den övergripande diagrammet av den teknik som du kan använda

262
00:14:36,520 --> 00:14:38,790
att göra applikationer för Windows 8.

263
00:14:38,790 --> 00:14:42,840
Grejer till höger, de skrivbordsprogram, är egentligen det vi redan vet.

264
00:14:42,840 --> 00:14:46,840
Det är saker som verkligen är Windows 7 världens föras över till Windows 8.

265
00:14:46,840 --> 00:14:51,920
Alla dessa alternativ avdrag: C #, VB, Win32 typ av utveckling.

266
00:14:51,920 --> 00:14:54,450
Bra. Inga problem. Den nya saker är på vänster sida.

267
00:14:54,450 --> 00:14:58,220
Det är Windows Store apps, det är då jag vill få min ansökan fast i Windows 8

268
00:14:58,220 --> 00:15:02,300
att använda alla dessa funktioner, få den in i butiken och få det riktigt cool upplevelse

269
00:15:02,300 --> 00:15:05,260
av Windows Store applikationer.

270
00:15:05,260 --> 00:15:10,350
För att göra det, kan du se här att du har alla dina val med XAML, C + +,

271
00:15:10,350 --> 00:15:14,100
C #, VB, kan du göra DirectX, sådana saker, saker som går utanför bilden.

272
00:15:14,100 --> 00:15:18,650
Men för oss, vi kommer att fokusera rätt på att HTML, CSS och JavaScript

273
00:15:18,650 --> 00:15:22,890
är verkligen en första klassens medborgare för att göra applikationer för Windows 8

274
00:15:22,890 --> 00:15:24,960
och för Windows Store.

275
00:15:24,960 --> 00:15:27,950
Så det här är bra för alla här och folk tittar på video

276
00:15:27,950 --> 00:15:30,760
eftersom du kan bara utnyttja alla de upplevelser som du har

277
00:15:30,760 --> 00:15:33,900
och verkligen knyta till vad Windows erbjuder.

278
00:15:33,900 --> 00:15:37,870
Du kommer att göra det genom en uppsättning API: er, vilket borde vara någon överraskning.

279
00:15:37,870 --> 00:15:39,920
Varje OS har sina egna API: er.

280
00:15:39,920 --> 00:15:43,530
Vi avslöja vad Windows kan göra genom vad som kallas WinRT.

281
00:15:43,530 --> 00:15:46,370
Det är en uppsättning API: er som bara gör allt för dig.

282
00:15:46,370 --> 00:15:51,650
Om du behöver för att öppna filer, måste du använda kameran, geolocation, saker,

283
00:15:51,650 --> 00:15:55,700
de går igenom vad Windows kan erbjuda dig.

284
00:15:55,700 --> 00:15:59,370
För att komma åt det, vi har lite mer Javascript som kommer att göra det ännu enklare

285
00:15:59,370 --> 00:16:02,510
för dig att göra det. Vi kommer till det om en stund.

286
00:16:02,510 --> 00:16:04,060
Men för nu, det är i grunden din färdplan.

287
00:16:04,060 --> 00:16:06,770
De saker som du redan har gjort på toppen av vissa API: er

288
00:16:06,770 --> 00:16:11,280
som hjälper dig att arbeta med Windows lika butiks app.

289
00:16:11,280 --> 00:16:14,210
Och det är egentligen allt du behöver veta från den höga nivån.

290
00:16:14,210 --> 00:16:17,370
>> Vi kommer att dyka in faktiskt arbetar med grejer nu.

291
00:16:18,940 --> 00:16:21,950
De saker som du har säkert redan sett ett gäng,

292
00:16:21,950 --> 00:16:26,760
med IE9 ett tag tillbaka vi infört stöd för en hel del av den, på den tiden,

293
00:16:26,760 --> 00:16:30,340
nyare standarder inom webben, så en hel del nya CSS-funktioner,

294
00:16:30,340 --> 00:16:34,380
en hel del nya HTML, ECMAScript 5, vilket är verkligen JavaScript.

295
00:16:34,380 --> 00:16:38,090
Så allt för att med undantag för strikt läge var i IE9.

296
00:16:38,090 --> 00:16:42,290
Bara massor av saker med CSS, CSS3, allt där.

297
00:16:42,290 --> 00:16:45,300
Och allt det här bär framåt i vad vi gör med Windows 8.

298
00:16:45,300 --> 00:16:49,350
Du kan använda dessa saker, och du kan använda allt som är nytt i IE10.

299
00:16:49,350 --> 00:16:54,640
Med IE10 introducerar vi stöd för alla dessa saker också.

300
00:16:54,640 --> 00:16:59,340
De är alla hårdvaruaccelererad, så om du är på en maskin som har någon form av GPU,

301
00:16:59,340 --> 00:17:04,190
vilket förmodligen är ganska mycket varje maskin som du kan få under de senaste 8 åren,

302
00:17:04,190 --> 00:17:07,609
du kommer att kunna få hårdvaruaccelererad utdata,

303
00:17:07,609 --> 00:17:11,770
visuell utgång med CSS, Canvas, SVG.

304
00:17:11,770 --> 00:17:14,339
Alla dessa saker kommer att gå igenom hårdvaruacceleration

305
00:17:14,339 --> 00:17:16,060
och vara så mycket snabbare och effektivare.

306
00:17:16,060 --> 00:17:20,440
Den korta versionen av allt detta - jag kommer inte att gå igenom varenda sak här -

307
00:17:20,440 --> 00:17:23,200
om du ser den på den här listan, om du kan göra det i IE10,

308
00:17:23,200 --> 00:17:25,650
om det är en webb-app som du kör som fungerar i IE10,

309
00:17:25,650 --> 00:17:28,640
det är något du kan göra som en Windows Store app.

310
00:17:28,640 --> 00:17:33,100
Och det är ganska mycket det. Så om det fungerar i IE10, det kommer att fungera som en Windows Store app.

311
00:17:33,100 --> 00:17:36,370
Det är på bordet som något som du kan använda.

312
00:17:36,370 --> 00:17:40,510
>> Det finns en hel del här. Vi har fram till midnatt, så jag kan inte granska allt här.

313
00:17:40,510 --> 00:17:44,060
Men det finns några webbplatser som hjälper dig att förstå vad dessa saker kan göra,

314
00:17:44,060 --> 00:17:45,520
och jag ska visa dig en av dem i en sekund.

315
00:17:45,520 --> 00:17:48,410
Jag ville bara påpeka några av de viktigaste sakerna som du kan titta på.

316
00:17:48,410 --> 00:17:51,560
Kanske har du redan sett en del av dessa i dina studier,

317
00:17:51,560 --> 00:17:56,610
men dessa är riktigt bra, särskilt med Windows Store apps, från CSS sidan.

318
00:17:56,610 --> 00:18:02,420
Så att kunna göra transformer och övergångar, ger motion med animation -

319
00:18:02,420 --> 00:18:07,010
Dessa är alla en del av CSS nu, och de är alla stöds av moderna webbläsare,

320
00:18:07,010 --> 00:18:11,370
och IE10 och IE9 har lagt till stöd över tiden för alla dessa saker.

321
00:18:11,370 --> 00:18:15,220
Och så varför skriva det själv, varför gå igenom alla besväret att göra dessa saker för hand

322
00:18:15,220 --> 00:18:19,970
när du kan använda en enkel CSS transform för att skapa en 3D-effekt för din ansökan?

323
00:18:19,970 --> 00:18:22,740
Bra. Det är så det fungerar.

324
00:18:22,740 --> 00:18:24,530
Jag kan inte göra det något svårare än så.

325
00:18:24,530 --> 00:18:28,330
Om du vet hur man gör det i CSS, vet du hur man gör det i Windows Store-appen.

326
00:18:28,330 --> 00:18:32,080
>> Att gå längre än så för layout, saker som även butiken app,

327
00:18:32,080 --> 00:18:35,350
men går längre än att titta på kanske en nyhet app som är visar dig artiklar

328
00:18:35,350 --> 00:18:40,160
eller recept eller sånt, de andra typer av funktioner i CSS verkligen är användbara:

329
00:18:40,160 --> 00:18:45,610
Grid, är Flexbox CSS Regioner mer av en relativt ny standard också.

330
00:18:45,610 --> 00:18:51,190
Dessa saker är alla kommer att hjälpa dig att lägga ut innehåll och flödes innehåll mellan sektionerna,

331
00:18:51,190 --> 00:18:55,470
kunna göra sidnumrering och avstavning utan att du behöver skriva grejer själv.

332
00:18:55,470 --> 00:18:57,500
Du bara säga, "Gör följande för mig"

333
00:18:57,500 --> 00:19:00,850
och eftersom skärmen fastigheter är olika på olika maskiner

334
00:19:00,850 --> 00:19:03,850
eller som du ser i ett ögonblick, när du knäppa ett program

335
00:19:03,850 --> 00:19:07,920
att ha mindre mängder utrymme på skärmen, det är inga problem för CSS.

336
00:19:07,920 --> 00:19:11,160
Det kan dra nytta av - we'll prat om medie frågor i en sekund -

337
00:19:11,160 --> 00:19:15,880
det kan ta hand om saker och ting med ompositionering ditt innehåll, strömmande innehåll från regioner

338
00:19:15,880 --> 00:19:21,240
just med dessa saker som du kanske redan har sett med webbteknik.

339
00:19:21,240 --> 00:19:25,470
>> På HTML5 sidan finns det också en massa saker

340
00:19:25,470 --> 00:19:28,140
som kommer att vara till stor hjälp för dig med Windows Store apps.

341
00:19:28,140 --> 00:19:30,980
Återigen kommer vi inte att gå igenom alla dessa, men de är bara här.

342
00:19:30,980 --> 00:19:35,470
Så om du behöver använda den, audio-video, om du vill göra validering av formulär,

343
00:19:35,470 --> 00:19:40,570
geolokalisering, alla de saker du kan göra i JavaScript med JavaScript 5 eller ECMAScript 5,

344
00:19:40,570 --> 00:19:44,070
IndexedDB för lokal lagring - dessa är alla alternativ för dig.

345
00:19:44,070 --> 00:19:49,300
Om du letar efter ett svar, titta bara på befintlig teknik med HTML5 och CSS

346
00:19:49,300 --> 00:19:53,880
och du hittar enklare svar än att behöva rulla en hel del av det där själv.

347
00:19:53,880 --> 00:19:55,510
Låt mig visa dig runt lite här.

348
00:19:55,510 --> 00:19:57,920
Jag har en webbplats som vi kan gå till.

349
00:19:57,920 --> 00:20:01,590
Låt mig sluta ur denna bild för en sekund.

350
00:20:01,590 --> 00:20:06,450
>> Om vi ​​går ut till IETestDrive.com,

351
00:20:06,450 --> 00:20:08,960
Jag kommer inte att göra mycket av en demo här.

352
00:20:08,960 --> 00:20:14,360
IETestDrive.com verkligen visar dig mycket av vad som är nytt med IE10,

353
00:20:14,360 --> 00:20:16,220
de saker som du kan göra.

354
00:20:16,220 --> 00:20:19,130
Jag tycker att detta är verkligen användbart eftersom istället för att läsa igenom en massa vitböcker,

355
00:20:19,130 --> 00:20:23,020
titta på några demos, och det kommer att hjälpa dig att lägga den på din egen personliga radar

356
00:20:23,020 --> 00:20:26,620
om huruvida en teknik är vettigt att ens göra något mer forskning med

357
00:20:26,620 --> 00:20:29,070
så att du förstår, "Jag ser vad det är för."

358
00:20:29,070 --> 00:20:32,780
"Jag förstår vad Begär Animation Frame gör för mig."

359
00:20:32,780 --> 00:20:36,900
"Jag förstår hur jag kunde använda regioner eller SVG-filter."

360
00:20:36,900 --> 00:20:40,190
Du ser dem i aktion, se dem på ett exempel här,

361
00:20:40,190 --> 00:20:44,930
och bestäm själv om det kommer att vara användbart för dig i dina egna projekt och utanför

362
00:20:44,930 --> 00:20:47,840
som du fortsätter att arbeta med webbteknik.

363
00:20:47,840 --> 00:20:49,900
Här vill jag bara uppmuntra dig att ta en titt.

364
00:20:49,900 --> 00:20:52,880
Jag tror inte att jag kommer att spendera mycket tid som faktiskt kör dessa.

365
00:20:52,880 --> 00:20:56,030
Vi har tillräckligt för att visa med att skriva kod.

366
00:20:56,030 --> 00:21:01,640
Du ser här saker från beröringseffekter till touch-baserade spel i det avsnittet,

367
00:21:01,640 --> 00:21:06,050
animation, riktigt snabb hårdvaruaccelererad animering där,

368
00:21:06,050 --> 00:21:11,230
vissa optimeringar som du ser i en del av dessa prover också,

369
00:21:11,230 --> 00:21:12,770
och det finns många, många fler.

370
00:21:12,770 --> 00:21:15,330
Om du går hit och öppna platskartan

371
00:21:15,330 --> 00:21:19,070
det finns bara ett löjligt antal prover här.

372
00:21:19,070 --> 00:21:20,690
Du kan se dem alla här.

373
00:21:20,690 --> 00:21:22,900
Om du tittar på något eller om du hört talas om något

374
00:21:22,900 --> 00:21:25,850
och du undrar kanske detta skulle vara något coolt att använda i appen,

375
00:21:25,850 --> 00:21:31,720
försöka titta här, och det är nog en ganska bra demo för att spara lite tid.

376
00:21:31,720 --> 00:21:35,980
>> Okej? Har du frågor så långt för folk här?

377
00:21:35,980 --> 00:21:39,620
Okej. Vi kommer att fortsätta här.

378
00:21:39,620 --> 00:21:41,920
Återigen, bara kolla som.

379
00:21:41,920 --> 00:21:45,450
De är webbstandarder, så gå till någon annan skyltfönstret på webben som du känner till

380
00:21:45,450 --> 00:21:50,550
och se om dessa tekniker vettigt för vad du försöker göra.

381
00:21:50,550 --> 00:21:53,190
>> Tillbaka till diabilder.

382
00:21:53,190 --> 00:22:00,290
Som sagt, du flyttar från en webbsida världen verkligen en installerad lokalt program värld,

383
00:22:00,290 --> 00:22:01,850
så finns det några saker att påpeka här.

384
00:22:01,850 --> 00:22:03,690
Först av allt, det finns ingen webbserver inblandade här.

385
00:22:03,690 --> 00:22:06,120
Det finns ingen Apache, det finns ingen IIS körs här

386
00:22:06,120 --> 00:22:10,170
betjänar upp sidor till en fjärrklient, till en avlägsen webbläsare agent.

387
00:22:10,170 --> 00:22:13,000
I det här fallet är verkligen allt förpackat upp för dig.

388
00:22:13,000 --> 00:22:16,630
Du anser att din ansökan till butiken, det blir certifierade,

389
00:22:16,630 --> 00:22:22,190
det är ute i butiken, och sedan folk i tusental kommer att installera ditt spel eller din app.

390
00:22:22,190 --> 00:22:24,780
Men i grund och botten, de drar ner det lokalt på sin maskin.

391
00:22:24,780 --> 00:22:29,080
Det finns ingen anledning att gå ut på webben längre om du inte har samtal som behöver en avlägsen API,

392
00:22:29,080 --> 00:22:31,790
och det är helt normalt och också.

393
00:22:31,790 --> 00:22:35,330
Men de kommer inte att vara i det läget där de måste gå förfrågan svar från en server

394
00:22:35,330 --> 00:22:37,910
att få nästa sida av deras innehåll.

395
00:22:37,910 --> 00:22:41,380
Så som sagt, det finns några mindre API skillnader. Dessa är otroligt små.

396
00:22:41,380 --> 00:22:46,850
De är inte troligt att träffa dig i din vanliga kodning, men de är åtminstone dokumenteras.

397
00:22:46,850 --> 00:22:50,030
De är typ av kant fall finns.

398
00:22:50,030 --> 00:22:53,370
>> Den andra saken värt att påpeka är tillförlitlighetsskillnader.

399
00:22:53,370 --> 00:22:58,070
Jag nämner detta eftersom jag vill bara se till att jag sa det

400
00:22:58,070 --> 00:23:01,580
så om du stöter på det senare, kommer du att tänka, "säger Chris något om detta,

401
00:23:01,580 --> 00:23:04,890
"Så kanske, ja, okej," och sedan gå tillbaka och du får reda på vad det var.

402
00:23:04,890 --> 00:23:06,480
Sammanhang roll.

403
00:23:06,480 --> 00:23:11,450
Normalt försöker vi skydda användaren från vektorer för angrepp.

404
00:23:11,450 --> 00:23:13,400
Det finns vissa saker som du kan göra som standard

405
00:23:13,400 --> 00:23:16,130
och vissa saker du behöver ändra sammanhang för att aktivera.

406
00:23:16,130 --> 00:23:19,860
När du använder vissa bibliotek där ute - you've redan arbetat med jQuery,

407
00:23:19,860 --> 00:23:23,650
men om du letar efter andra bibliotek där ute - du kanske använder vissa funktioner

408
00:23:23,650 --> 00:23:28,000
den typen av går utöver lokal användning, inte mer dynamiska interaktioner

409
00:23:28,000 --> 00:23:30,360
XHR förfrågningar, sådana saker.

410
00:23:30,360 --> 00:23:33,090
Ibland kanske du hittar dem inaktiveras som standard,

411
00:23:33,090 --> 00:23:37,790
och i så fall bara göra en sökning, leta efter lokala och webb sammanhang,

412
00:23:37,790 --> 00:23:39,560
och du kommer få reda på hur man fixar det.

413
00:23:39,560 --> 00:23:42,580
Se bara till att du visste om det när du börjar använda andra ramverk,

414
00:23:42,580 --> 00:23:45,720
som jag bör nämna, är du fullt kapabla att göra.

415
00:23:45,720 --> 00:23:49,290
Så om du hittar någon annan ram - we'll prata om det här i en sekund -

416
00:23:49,290 --> 00:23:54,000
för spel och du vill använda det, du vill använda vissa kontrollbibliotek som finns där ute

417
00:23:54,000 --> 00:23:57,990
och du inte vill skriva det där själv - det är en bra idé, eller hur? -

418
00:23:57,990 --> 00:23:59,560
Du kan absolut använda det här.

419
00:23:59,560 --> 00:24:03,660
Det är inget hålla dig tillbaka från att använda någon form av bibliotek som är baserad på JavaScript

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

421
00:24:05,380 --> 00:24:09,740
Återigen, om det är något du kan göra i IE10, vilket är en fan av mycket dessa dagar,

422
00:24:09,740 --> 00:24:11,220
du kan göra det.

423
00:24:11,220 --> 00:24:14,800
Dra in den på din app, referens att JavaScript-bibliotek, och använda det i din ansökan,

424
00:24:14,800 --> 00:24:19,880
just med tanke på att du kanske slå ett säkerhetssammanhang då och då - inte särskilt ofta.

425
00:24:19,880 --> 00:24:24,150
>> Och sedan de funktioner, kommer vi gå igenom några fler av dem som vi går.

426
00:24:24,150 --> 00:24:27,500
Den UX du typ av vänja sig som du ser fler och fler applikationer

427
00:24:27,500 --> 00:24:29,250
från Windows Store.

428
00:24:29,250 --> 00:24:33,870
Du får en känsla för hur de fungerar och hur estetisk design tenderar att fungera

429
00:24:33,870 --> 00:24:37,720
mellan olika applikationer och vad folk kommer att användas för att uppleva.

430
00:24:37,720 --> 00:24:39,660
Det är egentligen den viktigaste delen.

431
00:24:39,660 --> 00:24:42,460
Se till att när de brand upp din app att de inte behöver läsa en manual,

432
00:24:42,460 --> 00:24:44,300
vilket de aldrig gör, förresten.

433
00:24:44,300 --> 00:24:46,650
De bör bara kunna börja spela med din ansökan

434
00:24:46,650 --> 00:24:49,450
och räkna ut det utan stora svårigheter.

435
00:24:49,450 --> 00:24:52,660
Genom att hålla sig och följa en hel del av dessa metoder,

436
00:24:52,660 --> 00:24:57,640
du kommer att göra användarna en stor tjänst, vilket gör det lättare.

437
00:24:57,640 --> 00:25:01,810
>> Okej. En sista sak på API-sidan och sedan får vi komma in faktiskt skriva kod.

438
00:25:01,810 --> 00:25:05,660
WinJS är det där jag nämnde helt kort med den komplexa slide

439
00:25:05,660 --> 00:25:08,850
med alla de olika val som du har för att ansöka.

440
00:25:08,850 --> 00:25:10,890
WinJS, kan du se det som en kompis.

441
00:25:10,890 --> 00:25:13,680
Det är din vän för att hjälpa dig att skriva saker snabbare.

442
00:25:13,680 --> 00:25:18,820
Det är bara Javascript och CSS. Du behöver inte använda den. Du kan använda den.

443
00:25:18,820 --> 00:25:22,180
Om du ska kunna ringa in till Windows-funktioner, kommer du sluta med det,

444
00:25:22,180 --> 00:25:27,210
men om det finns saker som vissa designmönster eller kontroller som du verkligen inte vill använda,

445
00:25:27,210 --> 00:25:29,090
du vill använda något annat, det är upp till dig.

446
00:25:29,090 --> 00:25:32,580
Bestäm vad du vill använda och de stilar som du vill använda.

447
00:25:32,580 --> 00:25:37,250
Funktionerna från namespacing och klass generation - upp till dig.

448
00:25:37,250 --> 00:25:41,650
Om du föredrar det ena eller det andra, det är helt och hållet ditt val. Det är fortfarande Javascript och CSS.

449
00:25:41,650 --> 00:25:43,860
Men det kommer att hjälpa dig att göra en massa saker.

450
00:25:43,860 --> 00:25:47,780
Till exempel, här är en delmängd av vad den kan göra,

451
00:25:47,780 --> 00:25:50,790
saker som att hjälpa asynkron programmering med löften.

452
00:25:50,790 --> 00:25:54,000
Någon av er hört talas om eller arbetat med Node.js?

453
00:25:54,000 --> 00:25:59,520
Det är ett vanligt mönster att arbeta med asynkron programmering.

454
00:25:59,520 --> 00:26:02,370
Så i princip vad du säger är, "Go göra något,

455
00:26:02,370 --> 00:26:05,790
"Och du kommer att ge mig ett löfte om att du kommer tillbaka till mig när du är klar."

456
00:26:05,790 --> 00:26:08,400
Det är i grunden vad som händer.

457
00:26:08,400 --> 00:26:12,400
Så du behöver inte låsa upp din ansökan medan användaren är på väg och plocka en fil

458
00:26:12,400 --> 00:26:15,810
eller något håller strömmade ned från webben.

459
00:26:15,810 --> 00:26:17,210
Användargränssnittet är fortfarande lyhörd.

460
00:26:17,210 --> 00:26:19,410
Och du kan göra det med hjälp av asynkron programmering.

461
00:26:19,410 --> 00:26:23,620
Det låter löjligt komplicerat, men det är verkligen lätt eftersom du använder löften

462
00:26:23,620 --> 00:26:27,900
och du bara säga, "Go gör det och när du är klar, ringa tillbaka till den här metoden."

463
00:26:27,900 --> 00:26:30,270
Det är ganska mycket det. Det är allt inbyggt i WinJS.

464
00:26:30,270 --> 00:26:35,120
Det kommer att göra det mycket enklare att skriva riktigt flexibla och kraftfulla applikationer.

465
00:26:35,120 --> 00:26:37,870
>> Du kan se resten här, en hel del animationer.

466
00:26:37,870 --> 00:26:41,240
Förmodligen en av de viktigare sakerna på den här bilden är kontroller.

467
00:26:41,240 --> 00:26:44,680
Jag tror att jag har en hel - Ja, det gör jag.

468
00:26:44,680 --> 00:26:48,900
Här är ett exempel på några av de kontroller som du kan använda i dina program.

469
00:26:48,900 --> 00:26:51,060
Detta är rakt upp från WinJS.

470
00:26:51,060 --> 00:26:53,430
Du skriver inte dessa själva,

471
00:26:53,430 --> 00:26:55,990
du bara säga, "Så här vill jag skriva min ansökan."

472
00:26:55,990 --> 00:26:59,420
"Jag ska använda en flip vy så jag kan gå mellan olika bilder."

473
00:26:59,420 --> 00:27:03,380
Jag har inte visat er Semantic Zoom. Jag ska visa er att i en sekund.

474
00:27:03,380 --> 00:27:05,700
ListViews. Det finns GridViews.

475
00:27:05,700 --> 00:27:08,680
Du har redan sett ett rutnät som en del av affären ansökan,

476
00:27:08,680 --> 00:27:12,170
så att kunna använda block av innehåll och rulla över det.

477
00:27:12,170 --> 00:27:15,660
Flyout menyer du ser från tid till annan.

478
00:27:15,660 --> 00:27:19,090
Appen bar jag visade dig med att Fresh Paint ansökan också,

479
00:27:19,090 --> 00:27:22,190
så du såg hur du kan anpassa den genom att sätta knappar på den

480
00:27:22,190 --> 00:27:26,360
och med att gömma undan när du inte bryr dig att använda det.

481
00:27:26,360 --> 00:27:28,120
Det är verkligen helt upp till dig att använda.

482
00:27:28,120 --> 00:27:30,210
Dessa är alla kontroller som ingår i WinJS.

483
00:27:30,210 --> 00:27:33,640
Jag ska visa dig hur man gör detta på bara en sekund, men det finns mer än just detta,

484
00:27:33,640 --> 00:27:37,060
och det viktiga är att använda dem om du vill, spara lite tid.

485
00:27:37,060 --> 00:27:40,830
>> Om du har andra kontroll bibliotek som du vill använda, det är väl bra också.

486
00:27:40,830 --> 00:27:46,300
Saker som jQuery UI gör en hel del av denna typ av idé också,

487
00:27:46,300 --> 00:27:51,280
ger fler kontroller som sträcker vad du kan göra i HTML och JavaScript.

488
00:27:52,690 --> 00:27:55,680
Låt oss dyka i. Jag har redan sagt det. Använd vad du vill.

489
00:27:55,680 --> 00:27:59,680
Bara tänk på att du kan stöta på vissa sammanhangsfrågor.

490
00:27:59,680 --> 00:28:03,380
Men du kan säkert blanda och matcha oavsett typ av bibliotek som du är bekväm med,

491
00:28:03,380 --> 00:28:06,770
du vill lära dig, du vill använda för att spara lite tid.

492
00:28:06,770 --> 00:28:09,850
>> Låt oss tala om verktyg bara för en sekund.

493
00:28:09,850 --> 00:28:12,400
Du kan få vad du behöver för att börja arbeta med Windows Store apps.

494
00:28:12,400 --> 00:28:17,360
Om jag går tillbaka ut, jag har för många saker här uppe.

495
00:28:17,360 --> 00:28:21,770
Om du går till den här sidan, vilket är dev.windows.com,

496
00:28:21,770 --> 00:28:23,300
du kan ladda ner allt du behöver.

497
00:28:23,300 --> 00:28:28,170
Som studerande har du tillgång till mer än allmänheten gör,

498
00:28:28,170 --> 00:28:30,670
så att du kan få högre slutet versioner av Visual Studio.

499
00:28:30,670 --> 00:28:34,090
Edwin nämnde du kan redan få Windows också.

500
00:28:34,090 --> 00:28:36,790
Men i allmänhet, för alla utvecklare, kan du gå till denna webbplats

501
00:28:36,790 --> 00:28:40,380
och ladda ner allt du behöver för att göra en ansökan, och det är allt gratis.

502
00:28:40,380 --> 00:28:42,460
Så det finns en gratisversion av Visual Studio,

503
00:28:42,460 --> 00:28:44,450
finns det några verktyg som kommer att installera vid sidan av det -

504
00:28:44,450 --> 00:28:47,240
allt du behöver för att skapa och testa din applikation.

505
00:28:47,240 --> 00:28:50,130
Det är bara när du ska publicera din ansökan fram till affären

506
00:28:50,130 --> 00:28:52,470
att du kommer att behöva en utvecklarkonto.

507
00:28:52,470 --> 00:28:56,100
Även detta tror jag är fri. Är det gratis för studenter också? >> [Guarin] Vilken?

508
00:28:56,100 --> 00:28:57,970
Utvecklaren konto, själva underkastelse. >> [Guarin] Ja.

509
00:28:57,970 --> 00:28:59,580
Det är mer goda nyheter.

510
00:28:59,580 --> 00:29:00,840
Du kommer att gå titta på det här.

511
00:29:00,840 --> 00:29:03,840
Det kommer att säga för en individ som standard det är $ 49.

512
00:29:03,840 --> 00:29:06,140
Men inte registrera dig för att som student.

513
00:29:06,140 --> 00:29:10,250
Vi ska ge dig lite information via dina program som du kan få ett konto gratis,

514
00:29:10,250 --> 00:29:13,980
och som gör att du sedan skicka in dina program ända fram till affären,

515
00:29:13,980 --> 00:29:17,370
så många du vill, och allt detta godhet kommer snart att följa.

516
00:29:17,370 --> 00:29:19,710
Så det är dev.windows.com.

517
00:29:19,710 --> 00:29:22,170
Du kan ladda ner de verktyg som du kan behöva härifrån.

518
00:29:22,170 --> 00:29:25,310
Och om du vill, kan du få en testversion av Windows här,

519
00:29:25,310 --> 00:29:27,160
men återigen, kommer du inte behöver.

520
00:29:27,160 --> 00:29:32,880
>> Den andra platsen - låt mig påpeka detta för dig snabbt - är design.windows.com.

521
00:29:32,880 --> 00:29:34,770
Det var dev.windows.com.

522
00:29:34,770 --> 00:29:37,770
Design.windows.com, kan du gissa vad det är för.

523
00:29:37,770 --> 00:29:40,380
Det är faktiskt en ganska trevlig plats. Det finns en hel del bra information här.

524
00:29:40,380 --> 00:29:41,770
Du kan arbeta igenom det.

525
00:29:41,770 --> 00:29:43,960
Det kommer att ge dig några råd om vissa saker

526
00:29:43,960 --> 00:29:46,760
att du kanske inte har tänkt på tidigare eller haft att göra med tidigare,

527
00:29:46,760 --> 00:29:50,780
som att designa för beröring, designa för olika formfaktorer,

528
00:29:50,780 --> 00:29:55,310
designa för funktionerna i Windows 8, det jag nämnde tidigare

529
00:29:55,310 --> 00:29:58,740
som att söka och dela, en del saker som jag inte har talat om ännu.

530
00:29:58,740 --> 00:30:05,570
De är alla listade här, och det är en ganska bra uppsättning hjälp fil sidor

531
00:30:05,570 --> 00:30:08,670
som hjälper dig att förstå hur man gör en viss typ av program,

532
00:30:08,670 --> 00:30:14,250
hur man gör interaktion, hur man handskas med UI och UX för din ansökan.

533
00:30:14,250 --> 00:30:18,630
Jag skulle rekommendera att du tar en titt på detta, särskilt om du är någon gång

534
00:30:18,630 --> 00:30:22,960
i hopp om att publicera en ansökan till affären.

535
00:30:22,960 --> 00:30:25,250
Du kommer att vilja veta hur man gör en bra ansökan

536
00:30:25,250 --> 00:30:28,300
eftersom jag nämnde tidigare, om du inte gör det, det är dessa recensioner igen.

537
00:30:28,300 --> 00:30:29,930
Folk kommer att bli olycklig.

538
00:30:29,930 --> 00:30:32,960
De kommer inte att kunna hitta saker som de förväntar sig på rätt ställen.

539
00:30:32,960 --> 00:30:36,590
Ingen vill att hända dig.

540
00:30:36,590 --> 00:30:39,220
>> Framåt här, låt mig stänga ner det.

541
00:30:39,220 --> 00:30:43,700
Nu när du vet var du kan få saker och ting, kommer jag visa dig hur man faktiskt börja använda saker.

542
00:30:43,700 --> 00:30:48,520
Till att börja, kommer jag faktiskt visa er här ett exempel på skrivbordsprogram på min startskärm.

543
00:30:48,520 --> 00:30:53,600
Här kan du se Visual Studio, kan du se Blend och andra utvecklingsverktyg som jag har.

544
00:30:53,600 --> 00:30:55,890
De har en något annorlunda platta.

545
00:30:55,890 --> 00:30:57,930
Det beror på att de är skrivbordsprogram,

546
00:30:57,930 --> 00:31:00,960
och i de fall de alla kommer att lansera tillbaka till mitt skrivbord

547
00:31:00,960 --> 00:31:05,350
egentligen bara som apps som du är van vid.

548
00:31:05,350 --> 00:31:06,960
Så Windows-upplevelse, det är samma sak.

549
00:31:06,960 --> 00:31:12,940
De är inte, till exempel, som Armed! eller dessa saker. Låt mig inleda en snabbt.

550
00:31:12,940 --> 00:31:14,340
Egentligen, här är intressant.

551
00:31:14,340 --> 00:31:19,210
Det har utvecklats av studenter som arbetar i partnerskap på NERD.

552
00:31:19,210 --> 00:31:23,430
Helskärm ansökan, dessa typer av erfarenheter här.

553
00:31:23,430 --> 00:31:26,290
Åh, fina snitt skärmar och alla typer av roliga saker.

554
00:31:26,290 --> 00:31:34,330
De utvecklade detta. Vi kan lika gärna visa det hela medan vi ändå håller på.

555
00:31:37,510 --> 00:31:41,070
I själva verket arbetade jag med dem lite, gav dem några råd om saker

556
00:31:41,070 --> 00:31:44,160
eftersom de gjorde JavaScript för deras tillämpning.

557
00:31:44,160 --> 00:31:46,460
Vänligen, jag tar äran för deras arbete, de gjorde allt arbete.

558
00:31:46,460 --> 00:31:48,990
Jag bara gav dem lite råd här och där,

559
00:31:48,990 --> 00:31:52,400
men de gjorde några bra saker med hjälp av en JavaScript-front

560
00:31:52,400 --> 00:31:56,920
och binda i vissa fysikmotorer och saker att göra en hel del av detta arbete.

561
00:32:00,120 --> 00:32:03,360
Go. Få se om det fungerar.

562
00:32:03,360 --> 00:32:07,010
Wow, fortfarande fungerade. Okej, bra. Men du får idén.

563
00:32:07,010 --> 00:32:09,350
En helskärm app, en riktigt bra upplevelse.

564
00:32:09,350 --> 00:32:14,250
Detta stödjer inte bara min mus och penna om jag har sånt men också röra.

565
00:32:14,250 --> 00:32:19,420
Om jag hade en pekskärm, kan jag bara dra på det och fortsätta arbeta med det.

566
00:32:19,420 --> 00:32:21,440
>> En sak jag inte visa, och anledningen till att jag tar upp detta

567
00:32:21,440 --> 00:32:23,840
är jag ville ha en annan app för att visa dig vad du kan göra,

568
00:32:23,840 --> 00:32:29,480
du kan faktiskt ta applikationer i Windows och dra dem till sidan av skärmen.

569
00:32:29,480 --> 00:32:33,070
Detta kallas knäppa en ansökan.

570
00:32:33,070 --> 00:32:37,800
I det här fallet har jag tagit Inkarus och jag har lagt det åt sidan här.

571
00:32:37,800 --> 00:32:42,990
Det är nu i Snap uppfattning, och som tillåter mig att göra något annat när det programmet är där.

572
00:32:42,990 --> 00:32:46,210
De flesta spel som du hittar kommer bara helt enkelt pausa.

573
00:32:46,210 --> 00:32:51,090
Det är normalt en anständig sak att göra om ditt spel på något sätt kan skala ner

574
00:32:51,090 --> 00:32:54,210
till det lilla av en resolution, som kanske någon form av brädspel

575
00:32:54,210 --> 00:32:55,620
eller sådana saker ibland.

576
00:32:55,620 --> 00:32:58,570
Men i allmänhet, att det lättaste att göra och den mest lämpliga sak att göra för spel

577
00:32:58,570 --> 00:33:00,620
är att pausa programmet.

578
00:33:00,620 --> 00:33:09,440
För applikationer som nyheter apps, om jag startar den här och då jag knäppa den,

579
00:33:09,440 --> 00:33:16,170
så ser det faktiskt förändras avsevärt i hur det är att presentera data till dig.

580
00:33:16,170 --> 00:33:20,070
Här är det som visar dig egentligen en mer vertikal pan att information,

581
00:33:20,070 --> 00:33:23,340
men jag kan fortfarande absolut använda programmet.

582
00:33:23,340 --> 00:33:25,640
Så det är fortfarande mycket användbar.

583
00:33:25,640 --> 00:33:29,870
Det faktum att det är i en mindre uppfattning inte hålla mig från att använda denna app. Så tänk på det.

584
00:33:29,870 --> 00:33:32,090
Det är något som du behöver för att få dina apps gör till viss del,

585
00:33:32,090 --> 00:33:35,370
men det är upp till dig att avgöra hur fungerar dina program bör vara

586
00:33:35,370 --> 00:33:39,080
i denna typ av en mindre miljö.

587
00:33:39,080 --> 00:33:44,780
Låt mig avsluta det man ner och gå tillbaka till där vi var här.

588
00:33:44,780 --> 00:33:48,110
>> Edwin, du lagt till ett foto av mig redan? >> [Guarin] Ja. >> [Bowen] Titta där.

589
00:33:48,110 --> 00:33:51,510
Se det? Edwin lagt ett foto. [Skrattar]

590
00:33:51,510 --> 00:33:54,410
>> Låt oss gå tillbaka hit i Visual Studio. Låt mig inleda detta för dig.

591
00:33:54,410 --> 00:33:58,170
Jag kunde ha klickat på brickan på den startskärmen.

592
00:33:58,170 --> 00:34:02,630
Det förde mig tillbaka till skrivbordsläge, och det är att lansera skrivbordet app för Visual Studio.

593
00:34:02,630 --> 00:34:06,790
Detta är det Windows som du redan vet.

594
00:34:06,790 --> 00:34:09,100
Jag kan gå vidare och skapa ett projekt här.

595
00:34:09,100 --> 00:34:11,159
Vi kommer att fokusera igen på JavaScript, HTML.

596
00:34:11,159 --> 00:34:16,510
Jag ska gå ut och markera upp här i JavaScript, Windows Store.

597
00:34:16,510 --> 00:34:19,010
Det finns ett antal mallar som du kan använda.

598
00:34:19,010 --> 00:34:21,710
För produktivitet, skulle jag rekommendera att du tar en titt på några av dessa andra som här

599
00:34:21,710 --> 00:34:23,489
som Grid och Split.

600
00:34:23,489 --> 00:34:25,270
De är verkligen användbart om du gör en ansökan

601
00:34:25,270 --> 00:34:28,960
som kommer att ha den typen av design och navigering. Du ser dem mycket.

602
00:34:28,960 --> 00:34:33,070
Den jag just visade dig var egentligen en instans av Grid ansökan.

603
00:34:33,070 --> 00:34:36,880
Så om du tror att du kommer att göra en nyhet app eller en RSS-läsare

604
00:34:36,880 --> 00:34:43,120
eller något liknande som behandlar flera poster som du vill visa i detalj,

605
00:34:43,120 --> 00:34:45,989
tycker om att använda någon av dessa mallar för att komma igång snabbt

606
00:34:45,989 --> 00:34:48,380
och anpassa det därifrån.

607
00:34:48,380 --> 00:34:50,120
Men bara så att jag kan visa dig alla rörliga delar här

608
00:34:50,120 --> 00:34:56,120
Jag kommer att skapa den tomma app, och sedan kommer vi att gå lite djupare in på detaljerna.

609
00:34:56,120 --> 00:34:58,690
Jag bara gör det tom ansökan här.

610
00:34:58,690 --> 00:35:01,270
Det kommer att skapa hela projektet för mig.

611
00:35:01,270 --> 00:35:03,290
Jag ska öppna upp de saker som jag vill visa som standard.

612
00:35:03,290 --> 00:35:08,550
Låt mig bara zooma in en liten bit för att visa dig vad som skapats för oss här.

613
00:35:08,550 --> 00:35:11,350
De saker som du kommer att titta på först är alla namngivna standard.

614
00:35:11,350 --> 00:35:15,970
Så du kommer att leta efter default.html, default.js och default.css.

615
00:35:15,970 --> 00:35:19,590
Den andra sak att påpeka är att vi redan har en referens till det jag nämnde tidigare.

616
00:35:19,590 --> 00:35:24,530
Detta är WinJS. Ingen faktiskt kallar det här långa namn här.

617
00:35:24,530 --> 00:35:27,710
Det är WinJS, Windows Library for JavaScript.

618
00:35:27,710 --> 00:35:29,530
Om du öppnar upp det, kan du se det är alla här inne.

619
00:35:29,530 --> 00:35:31,820
Det finns olika CSS-filer, finns det JavaScript.

620
00:35:31,820 --> 00:35:33,520
Den finns där för att hjälpa dig.

621
00:35:33,520 --> 00:35:37,190
Det är verkligen där för att ge kontroller och stilar och saker som du bara kan använda automatiskt.

622
00:35:37,190 --> 00:35:41,240
Men återigen, om det finns saker som du vill använda i stället för i form av styling och andra kontroller,

623
00:35:41,240 --> 00:35:45,600
det är helt upp till dig. Jag kommer att visa dig hur du använder några av dessa saker just nu.

624
00:35:45,600 --> 00:35:51,020
>> Tillbaka över på vår vänstra sida, låt mig visa dig standard HTML-sidan.

625
00:35:51,020 --> 00:35:54,490
Du har redan sett den WinJS grejer, och det är egentligen allt som händer där

626
00:35:54,490 --> 00:35:59,930
med de mellersta rader av uppmärkning, bara föra in den CSS som standard

627
00:35:59,930 --> 00:36:02,370
och föra in ett par JavaScript-filer från WinJS.

628
00:36:02,370 --> 00:36:06,400
Du behöver inte vara herre över vad som händer inne i dessa filer.

629
00:36:06,400 --> 00:36:10,110
Det är ganska intressant att ta en titt på dem att slags se över vad som händer i det

630
00:36:10,110 --> 00:36:14,410
eftersom det är ganska intressant mellanliggande och avancerade tekniker som pågår där inne,

631
00:36:14,410 --> 00:36:18,100
men det fina är som utvecklare, du kan bara dra nytta av dem, bara använda dem

632
00:36:18,100 --> 00:36:19,510
och egentligen inte behöver oroa sig för det.

633
00:36:19,510 --> 00:36:21,960
Du kan fortfarande köra bil utan att veta hur det fungerar, eller hur?

634
00:36:21,960 --> 00:36:24,180
Så det är sånt som händer här.

635
00:36:24,180 --> 00:36:26,930
Det finns kontroller och stilar och saker som du bara kan gå vidare och använda

636
00:36:26,930 --> 00:36:31,460
och kod som du kan använda i en sekund utan att veta vad som finns där inne.

637
00:36:31,460 --> 00:36:33,200
Här är dina egna filer.

638
00:36:33,200 --> 00:36:35,860
Dessa är dina platser som du kan ändra din egen CSS

639
00:36:35,860 --> 00:36:38,400
och din egen JavaScript för att få saker rullande.

640
00:36:38,400 --> 00:36:43,300
Du kommer att lägga säkert andra JavaScript-filer och kanske andra CSS-filer

641
00:36:43,300 --> 00:36:47,480
som projektet växer, men det är egentligen bara en utgångspunkt.

642
00:36:47,480 --> 00:36:52,570
Här är Hej, världs motsvarande HTML, så vi är tillbaka i body-taggen.

643
00:36:52,570 --> 00:36:55,990
Högst upp, förresten, det är HTML5 doctype,

644
00:36:55,990 --> 00:37:00,060
så att du känner igen det från vad du har jobbat på.

645
00:37:00,060 --> 00:37:04,600
Det är full IntelliSense in här också, så om du gör saker som typ i en video-taggen

646
00:37:04,600 --> 00:37:07,340
och utöka det ut, har du förmodligen lärt sig om det faktum

647
00:37:07,340 --> 00:37:12,760
att du behöver göra reserv kodning för video-taggar i HTML5 - eller kanske du har -

648
00:37:12,760 --> 00:37:17,490
att se till att olika webbläsare har stöd för din video.

649
00:37:17,490 --> 00:37:22,610
Vi har saker som detta över HTML, över JavaScript över CSS.

650
00:37:22,610 --> 00:37:26,020
Som är byggd på, och jag ska visa dig CSS i en sekund.

651
00:37:26,020 --> 00:37:29,430
Här kan du gå vidare och börja ändra koden, markeringen.

652
00:37:29,430 --> 00:37:33,700
Faktum är att innan jag ändra något, kommer jag att köra detta och visa dig vad du får.

653
00:37:33,700 --> 00:37:35,700
Du kommer att få en startbild som du kan anpassa

654
00:37:35,700 --> 00:37:40,940
och sedan får du Hej världen erfarenhet här. Det är fantastiskt, eller hur?

655
00:37:40,940 --> 00:37:42,640
Gå vidare och fartyg som, eller hur?

656
00:37:42,640 --> 00:37:45,970
Innehåll går här. Det är den grundläggande sak.

657
00:37:45,970 --> 00:37:48,740
Det kan bara bli bättre därifrån.

658
00:37:48,740 --> 00:37:51,300
Vi kommer att gå vidare och lägga in lite grejer.

659
00:37:51,300 --> 00:37:53,470
Jag har lite markup jag ska kopiera in här

660
00:37:53,470 --> 00:37:55,740
bara så att du inte behöver titta på mig att skriva.

661
00:37:55,740 --> 00:38:02,620
Låt mig gå ta fram verktygslådan här, och jag ska klämma fast detta eftersom jag kommer att göra detta några gånger.

662
00:38:02,620 --> 00:38:05,650
Verktygslåda, om du inte har sett Visual Studio, är där du kommer att hitta en massa kontroller.

663
00:38:05,650 --> 00:38:09,050
Du kan också sätta kodsnuttar i det att du kan återanvända.

664
00:38:09,050 --> 00:38:16,360
Här ska jag bara pop på annat HTML, inget hemskt avancerad alls här.

665
00:38:16,360 --> 00:38:20,170
Det är bara grundläggande HTML säger att jag har en ingång där jag kan skriva,

666
00:38:20,170 --> 00:38:23,860
Jag har en knapp där jag kan lämna in den, och då har jag en div som är i huvudsak en platshållare

667
00:38:23,860 --> 00:38:27,360
som jag kan använda för att mata ut "Hej, du skriver det här."

668
00:38:27,360 --> 00:38:32,780
Det är introt till HTML-exempel.

669
00:38:32,780 --> 00:38:39,340
Om jag kör det här, får vi automatiskt HTML, men vi också automatiskt få styling.

670
00:38:39,340 --> 00:38:42,270
Detta är en av de viktigaste sakerna från WinJS.

671
00:38:42,270 --> 00:38:47,250
Det kommer att ge dig som standard en del utseende och känsla som är riktigt konsekvent

672
00:38:47,250 --> 00:38:50,520
med resten av vad Windows 8 gör.

673
00:38:50,520 --> 00:38:52,110
Här ser du saker som knappen.

674
00:38:52,110 --> 00:38:55,890
Knappen som standard i HTML ser inte ut som det, men det gör det här

675
00:38:55,890 --> 00:39:00,880
eftersom det blir att CSS rätt från den CSS-fil i WinJS.

676
00:39:00,880 --> 00:39:04,680
Om du vill använda något annat, om du vill ändra på det, helt bra,

677
00:39:04,680 --> 00:39:06,790
gå vidare och göra vad du vill. Men det är standard.

678
00:39:06,790 --> 00:39:09,610
Det kommer att bli mer bekant för användarna.

679
00:39:09,610 --> 00:39:13,510
Och naturligtvis kommer detta inte att göra något eftersom jag inte faktiskt koppla upp någon form av kod

680
00:39:13,510 --> 00:39:16,630
att svara på det. Det var bara HTML.

681
00:39:16,630 --> 00:39:20,630
Så jag kan bli av med det, och vi kommer tillbaka i vår ansökan.

682
00:39:20,630 --> 00:39:25,310
>> Låt mig gå över till våra default.js.

683
00:39:25,310 --> 00:39:29,030
Det ser ganska komplicerat, men det är bara att göra några saker för dig.

684
00:39:29,030 --> 00:39:33,120
Det är standardtext. Det kommer att vara densamma i alla dina projekt.

685
00:39:33,120 --> 00:39:36,620
Det enda det gör är bara typ av fråga, "Hur hamnade jag här?"

686
00:39:36,620 --> 00:39:39,090
och sade: "Är du lansera denna app för första gången?"

687
00:39:39,090 --> 00:39:42,640
"Ska du återuppta appen från att det är vilande?"

688
00:39:42,640 --> 00:39:44,510
Ett par saker.

689
00:39:44,510 --> 00:39:50,300
Verkligen, är vårt fokus på denna fil här rätt om här.

690
00:39:50,300 --> 00:39:54,490
Vid denna punkt, är ganska viktigt här en rad kod.

691
00:39:54,490 --> 00:39:57,070
Det är faktiskt kommer att gå och titta igenom alla dina markeringar,

692
00:39:57,070 --> 00:40:01,640
och det kommer att hitta saker som du har bett att ha förvandlats till kontroller,

693
00:40:01,640 --> 00:40:07,220
djupare kontroller som ett betyg kontroll, liksom ett rutnät vy, liksom utfällbara

694
00:40:07,220 --> 00:40:09,570
och de andra saker som jag visade dig på den bilden innan.

695
00:40:09,570 --> 00:40:12,550
De är inte infödda HTML-kontroller.

696
00:40:12,550 --> 00:40:17,860
Du bara inte säga flyout som ett element och har det vet vad de ska göra.

697
00:40:17,860 --> 00:40:22,120
Vad vi egentligen gör är samma sak som händer i andra typer av styrramar.

698
00:40:22,120 --> 00:40:26,200
jQuery UI gör samma sorts allmän riktlinje.

699
00:40:26,200 --> 00:40:30,800
Du använder markeringar i HTML, och lite JavaScript kommer genom senare och säger,

700
00:40:30,800 --> 00:40:35,900
"Åh, jag vet vad det är. Som ber om detta för att förvandlas till det här,"

701
00:40:35,900 --> 00:40:39,850
som är av annat mer uttrycks HTML att göra som ett betyg kontroll,

702
00:40:39,850 --> 00:40:41,790
vilket är vad jag ska visa dig just nu.

703
00:40:41,790 --> 00:40:46,140
Denna kodrad är ett löfte som säger, "När detta löfte uppfylls,

704
00:40:46,140 --> 00:40:49,090
"Allt som du har bett om har sedan skapats."

705
00:40:49,090 --> 00:40:52,780
Och det är det. Det ser lite komplicerat, men det är egentligen samma sak i varje projekt.

706
00:40:52,780 --> 00:40:56,690
Här nere är där du kan börja lägga in vad du vill ha hända,

707
00:40:56,690 --> 00:40:58,280
så vi ska återkomma till det i en sekund.

708
00:40:58,280 --> 00:41:01,480
>> Först av allt, jag behöver lite kod som kan svara på det faktum

709
00:41:01,480 --> 00:41:03,320
att någon har klickat på knappen.

710
00:41:03,320 --> 00:41:06,330
Jag kommer att gå vidare och lägga det här nere.

711
00:41:06,330 --> 00:41:09,620
Återigen, jag kommer inte att göra någon typning framför dig här.

712
00:41:09,620 --> 00:41:12,560
Mycket grundläggande JavaScript säger bara om detta är befogat

713
00:41:12,560 --> 00:41:15,270
vi kommer att ges några detaljer om hur vi kom hit

714
00:41:15,270 --> 00:41:17,630
och sedan ska vi göra några grundläggande saker.

715
00:41:17,630 --> 00:41:21,300
Gå hitta sak i min HTML-sida som heter nameInput,

716
00:41:21,300 --> 00:41:28,490
ta tag i det, ta sitt värde, slap "Hej" på framsidan av det, och hålla fast att resultatsträngen

717
00:41:28,490 --> 00:41:31,960
in i den div-tagg som vi hade innan som verkligen inte hade något innan.

718
00:41:31,960 --> 00:41:37,220
Nu ska vi hitta den taggen och göra dess inre innehåll lika sträng.

719
00:41:37,220 --> 00:41:38,880
Mycket enkel JavaScript.

720
00:41:38,880 --> 00:41:42,240
Förhoppningsvis du inser att det finns egentligen inget ovanligt händer här.

721
00:41:42,240 --> 00:41:45,360
Det är bara rakt upp HTML och JS här.

722
00:41:45,360 --> 00:41:48,220
Om jag kör det här nu, det är fortfarande inte att göra något arbete eftersom jag inte har fast det upp

723
00:41:48,220 --> 00:41:50,030
att ta emot händelsen.

724
00:41:50,030 --> 00:41:55,710
För att göra det, jag gör det här, återigen återvänder till min verktygslåda,

725
00:41:55,710 --> 00:41:58,730
poppar den in här.

726
00:41:58,730 --> 00:42:03,060
Jag förväntar mig att du har sett allt här typen av grejer innan, så jag kommer inte över-förklara det.

727
00:42:03,060 --> 00:42:05,060
Nu ska vi gå få helloButton.

728
00:42:05,060 --> 00:42:07,730
Vi kommer att säga, "Button, grattis."

729
00:42:07,730 --> 00:42:10,130
"Här är en händelse som du nu svarar på."

730
00:42:10,130 --> 00:42:13,420
"När någon klickar på dig, kallar denna funktion buttonClickHandler."

731
00:42:13,420 --> 00:42:17,070
Och det är denna funktion som vi lagt till precis rätt ner på botten där. Det var allt.

732
00:42:17,070 --> 00:42:20,980
Så nu har vi en otroligt funktionell applikation.

733
00:42:20,980 --> 00:42:24,720
Jag tror att du kommer att bli riktigt imponerad av detta.

734
00:42:24,720 --> 00:42:32,320
Chris. Vänta på det. Wow. Okej. Det är fantastiskt. [Skrattar]

735
00:42:32,320 --> 00:42:36,570
Men det finns mer. Köp inte det ännu. Vänta.

736
00:42:36,570 --> 00:42:39,610
>> Låt mig visa dig lite mer här och få ut av helskärmsläge.

737
00:42:39,610 --> 00:42:42,690
Vi kommer att gå innan vi kör.

738
00:42:42,690 --> 00:42:45,530
Låt mig gå in och faktiskt visa lite med CSS.

739
00:42:45,530 --> 00:42:49,480
Precis som standard, om vi ser tillbaka på den sidan här,

740
00:42:49,480 --> 00:42:53,570
när vi drog i dessa saker från WinJS och vi fick den ui-mörker,

741
00:42:53,570 --> 00:42:58,550
i själva verket kan du ändra det till standard för att använda ljus applikation.

742
00:42:58,550 --> 00:43:03,450
ui-mörker är bra för grafiska applikationer som använder en massa bilder,

743
00:43:03,450 --> 00:43:05,740
du visar en hel del visuellt innehåll.

744
00:43:05,740 --> 00:43:12,560
Om du visar en hel del textinnehåll, är ui-ljus i allmänhet ett bra val.

745
00:43:12,560 --> 00:43:15,160
Du behöver inte välja det, men jag har bytt till det

746
00:43:15,160 --> 00:43:17,690
och nu du ser samma kod, samma allting,

747
00:43:17,690 --> 00:43:20,320
det är bara att använda i princip en omvänd ordning här

748
00:43:20,320 --> 00:43:24,770
där allt gör det svart text på vit.

749
00:43:24,770 --> 00:43:26,460
Det är allt gott och väl.

750
00:43:26,460 --> 00:43:30,680
Låt mig komma ut hit, och låt oss faktiskt göra lite mer med CSS.

751
00:43:30,680 --> 00:43:34,830
Jag lägger tillbaka den på mörkt eftersom jag tycker det är nog lättare att se på skärmen

752
00:43:34,830 --> 00:43:36,970
när jag börjar göra dessa saker.

753
00:43:36,970 --> 00:43:40,150
Jag ska byta ut kroppen en gång till.

754
00:43:40,150 --> 00:43:44,040
Jag ska gå här. Låt mig nuke detta.

755
00:43:44,040 --> 00:43:48,690
Låt oss ta in kroppen med klasser.

756
00:43:48,690 --> 00:43:53,000
Jag tror att du har gjort grundläggande väljare med CSS och saker som det redan,

757
00:43:53,000 --> 00:43:55,380
så du vet antagligen vad som händer här.

758
00:43:55,380 --> 00:43:59,250
Bara tilldela vissa klasser till vår header, och vi skapar en ny div

759
00:43:59,250 --> 00:44:04,430
att linda resten av det där som vi nu kan använda för att styla alla tillsammans.

760
00:44:04,430 --> 00:44:07,760
Så vad jag kan göra nu är att gå över till vår standard CSS.

761
00:44:07,760 --> 00:44:11,900
Har du tittat på mediafrågor än? Har ni pratat om det alls?

762
00:44:11,900 --> 00:44:17,220
Media frågor är en del av denna framväxande trend -

763
00:44:17,220 --> 00:44:19,660
eller det är en etablerad trend nu faktiskt på webben -

764
00:44:19,660 --> 00:44:22,760
för lyhörd design eller adaptiv,

765
00:44:22,760 --> 00:44:28,480
och tanken är att dina program verkligen kan ställa sig på lämpligt sätt

766
00:44:28,480 --> 00:44:31,910
baserat på vad den enhet som de är som visas på kan göra.

767
00:44:31,910 --> 00:44:35,040
Så om du är på en mobil enhet, självklart att du inte kommer att ha så mycket skärmyta

768
00:44:35,040 --> 00:44:41,520
när du kommer på en stor 30-tums bildskärm som sitter med ett skrivbord, en stor dator så.

769
00:44:41,520 --> 00:44:46,710
Så det gamla svaret på det skulle vara att ha fem, sex olika versioner av samma sida

770
00:44:46,710 --> 00:44:51,350
och du skulle öppna upp den version som var inställd för att viss storlek skärm.

771
00:44:51,350 --> 00:44:55,420
Inte bra. Det är mycket, mycket repetitiva och det finns massor av underhåll för att göra det.

772
00:44:55,420 --> 00:44:58,120
Nu har vi något som kallas CSS mediafrågor,

773
00:44:58,120 --> 00:45:02,530
och vi kan använda detta för att automatiskt upptäcka när det finns vissa storlekar

774
00:45:02,530 --> 00:45:07,030
eller viss användning av ditt innehåll som utförs.

775
00:45:07,030 --> 00:45:09,580
Så du kan svara på det, och du kan säga, "Okej, i detta fall

776
00:45:09,580 --> 00:45:12,580
"Du förmodligen inte ens behöver mig för att berätta vad som händer här."

777
00:45:12,580 --> 00:45:18,020
Det är bara att säga om denna ansökan knäppte, som jag visade tidigare -

778
00:45:18,020 --> 00:45:20,830
ta tag i den och sätta den på sidan av skärmen -

779
00:45:20,830 --> 00:45:23,910
så låt oss göra följande styling.

780
00:45:23,910 --> 00:45:25,850
Styling handlar inte bara om färger och sånt.

781
00:45:25,850 --> 00:45:29,860
Det handlar också om dimensionering och marginaler och stoppningar och inriktningar av innehåll

782
00:45:29,860 --> 00:45:34,040
eller inaktivera eller aktivera hela delar av din sida

783
00:45:34,040 --> 00:45:36,420
och, i detta fall, din app eller ditt spel också.

784
00:45:36,420 --> 00:45:39,210
Så här kan du göra så enkelt som du vill.

785
00:45:39,210 --> 00:45:46,720
Detta skulle inte vara användbart i dina appar, men det är demotiden,

786
00:45:46,720 --> 00:45:50,530
så jag ska gå vidare och bara lägga in grundläggande kroppen väljare och säga,

787
00:45:50,530 --> 00:45:58,360
"När jag gick av, låt oss gå vidare och göra bakgrundsfärg och låt oss välja något."

788
00:45:58,360 --> 00:46:00,400
Du har IntelliSense här. Det här är faktiskt riktigt coolt.

789
00:46:00,400 --> 00:46:05,720
Under 2012 har vi lagt till en hel del saker till stöd för CSS och JavaScript och HTML.

790
00:46:05,720 --> 00:46:08,690
Du har naturligtvis fått list IntelliSense också, men det är inte det häftiga.

791
00:46:08,690 --> 00:46:11,730
Det häftiga är att du har visuella väljare för en massa saker också.

792
00:46:11,730 --> 00:46:14,120
Så du kan gå igenom och bara välja en färg,

793
00:46:14,120 --> 00:46:17,580
eller så kan du gå ut och vara ännu mer specifik och du kan välja -

794
00:46:17,580 --> 00:46:22,330
detta kommer att bli fruktansvärt. Jag ska faktiskt plocka en anständig färg här.

795
00:46:22,330 --> 00:46:26,500
Titta på uppmärkning också, förresten. Det är din RGB-standardformat där.

796
00:46:26,500 --> 00:46:30,780
Men om jag byta opacitet, det kommer att gå över till en alfakanal väljare här.

797
00:46:30,780 --> 00:46:36,910
Så du kan se att färgen med i huvudsak procent transparens som du har för att

798
00:46:36,910 --> 00:46:38,860
alla bakade rätt i det.

799
00:46:38,860 --> 00:46:42,530
Jag kommer att hålla det som 100% och sedan när jag är klar med det, är allt gott och väl.

800
00:46:42,530 --> 00:46:46,160
Nu om jag kör programmet och vi tar appen och vi knäppa den,

801
00:46:46,160 --> 00:46:49,000
att bakgrundsfärg håller på att justeras automatiskt

802
00:46:49,000 --> 00:46:53,410
bara för att vi har en del CSS som säger, "Go gör det."

803
00:46:53,410 --> 00:46:55,580
Du kan också skriva JavaScript för att kommer att göra samma sak

804
00:46:55,580 --> 00:47:03,010
eller som du kan använda för att faktiskt pausa ett spel, gör saker.

805
00:47:03,010 --> 00:47:04,310
Det är förmodligen när du skulle använda JavaScript.

806
00:47:04,310 --> 00:47:06,610
Du skulle stänga av spelslingan vid den punkten.

807
00:47:06,610 --> 00:47:09,970
Du skulle behöva lite JavaScript, eftersom det inte skulle vara något du skulle CSS för.

808
00:47:09,970 --> 00:47:11,760
Men kom ihåg att det är bara en händelse.

809
00:47:11,760 --> 00:47:14,860
Man kan säga, "När min ansökan ändrar storlek,

810
00:47:14,860 --> 00:47:17,780
"Låt oss se om vi brast." Och det är det.

811
00:47:17,780 --> 00:47:24,440
>> Okej? Jag har pratat en hel del. Finns det frågor så långt på var vi är? Yeah.

812
00:47:24,440 --> 00:47:29,310
[Elev] Finns det en handledning för alla att få mer information? >> Ja.

813
00:47:29,310 --> 00:47:33,510
Frågan är, finns det en tutorial för detta? Jag ska bara förlänga den till allt.

814
00:47:33,510 --> 00:47:37,490
Det finns några saker som du kan gå till. Låt oss faktiskt härifrån.

815
00:47:37,490 --> 00:47:40,150
Låt mig gå tillbaka hit.

816
00:47:40,150 --> 00:47:45,180
En sak att påpeka är Visual Studio själv har tutorials inbyggda i.

817
00:47:45,180 --> 00:47:47,650
Låt mig bli av med detta.

818
00:47:47,650 --> 00:47:51,520
Om du går och skapa ett nytt projekt, behöver Arkiv, Nytt projekt,

819
00:47:51,520 --> 00:47:56,750
och titta på den vänstra sidan, det finns en online-nod i den här väljaren.

820
00:47:56,750 --> 00:47:59,790
Det kommer att ta en liten bit. Jag är på MyFi här.

821
00:47:59,790 --> 00:48:02,300
Men det kommer att komma upp och det kommer att ge mig en chans att hitta mallar

822
00:48:02,300 --> 00:48:05,190
men också, vilket är viktigare, prover också.

823
00:48:05,190 --> 00:48:06,750
Så jag kan klicka på JavaScript.

824
00:48:06,750 --> 00:48:10,050
Det kommer att hitta prover för mig. Min upplösning är så hög här.

825
00:48:10,050 --> 00:48:15,070
Normalt skulle du se en lista på en massa olika saker här.

826
00:48:15,070 --> 00:48:18,280
Om det är något du vill prova, plocka språket,

827
00:48:18,280 --> 00:48:20,970
JavaScript här, och säga, "Jag vet inte hur man gör geolokalisering."

828
00:48:20,970 --> 00:48:22,220
"Jag vet inte hur man öppnar en fil."

829
00:48:22,220 --> 00:48:25,840
"Jag vet inte hur man kan dra nytta av webbkameran

830
00:48:25,840 --> 00:48:28,290
"Eller optimera för beröring eller sånt."

831
00:48:28,290 --> 00:48:33,190
Det finns prover för allt: dela, söka, app barer,

832
00:48:33,190 --> 00:48:37,520
göra fjärrsamtal till en tjänst, JSON-kodning.

833
00:48:37,520 --> 00:48:40,390
Alla sådana saker det finns prover för här,

834
00:48:40,390 --> 00:48:44,560
och de är inte enorma prover som kommer att ta dig hela natten för att dra isär

835
00:48:44,560 --> 00:48:46,820
bara för att finna att en sak som du ville lära.

836
00:48:46,820 --> 00:48:49,870
De är riktigt bra. De är små, rakt på sak typer av prover.

837
00:48:49,870 --> 00:48:52,330
Jag har lärt mig massor genom att gå igenom dessa själv,

838
00:48:52,330 --> 00:48:55,260
och så rekommenderar jag att en hel del som en sak.

839
00:48:55,260 --> 00:49:01,750
>> En annan sak att påpeka är också klart att jag visade dig dev.windows.com,

840
00:49:01,750 --> 00:49:07,490
så om du går tillbaka till det, ser du längst ner finns även proverna här.

841
00:49:07,490 --> 00:49:12,560
Så du kan ladda ner dem alla på en gång, men det finns också en hel del andra resurser här också

842
00:49:12,560 --> 00:49:14,400
som kan hjälpa dig att få upp farten.

843
00:49:14,400 --> 00:49:17,870
>> En annan sak, och jag skulle verkligen rekommendera att du prova detta,

844
00:49:17,870 --> 00:49:24,510
Jag har det på min blogg, men jag ska bara gå rätt till det.

845
00:49:24,510 --> 00:49:28,220
Jag ska visa dig. Min blogg har resurser och sådana saker.

846
00:49:28,220 --> 00:49:35,300
En av de saker att påpeka är just här, den här saken: Din idé. Din App. 30 Dagar.

847
00:49:35,300 --> 00:49:40,960
Om du klickar på det här, det kommer att ta dig till en riktigt bra plats.

848
00:49:40,960 --> 00:49:44,650
Detta är mycket mer användbar än du kanske tror.

849
00:49:44,650 --> 00:49:49,040
Detta kommer att bli 30 dagar av innehåll som du i princip kan få tips och tricks

850
00:49:49,040 --> 00:49:51,990
hela denna process som du skapar en app.

851
00:49:51,990 --> 00:49:55,980
Och eftersom du inte kan räkna med, kan du faktiskt få det för spel också

852
00:49:55,980 --> 00:49:57,840
och för telefon apps, sådana saker.

853
00:49:57,840 --> 00:50:01,000
Så i princip registrera dig för det, och de kommer att skicka dig tips och tricks om,

854
00:50:01,000 --> 00:50:03,010
"Har du tänkt på att göra det här? Stöder du Snap?"

855
00:50:03,010 --> 00:50:04,900
"Här är några riktlinjer för hur man gör det bra."

856
00:50:04,900 --> 00:50:07,440
"Har du tänkt på att skicka in till affären?"

857
00:50:07,440 --> 00:50:09,370
"Har du tänkt på hur du ska sälja din ansökan?"

858
00:50:09,370 --> 00:50:11,490
Det kommer att gå igenom alla dessa olika saker.

859
00:50:11,490 --> 00:50:13,380
Och faktiskt, om du är på spelspåret, någon gång

860
00:50:13,380 --> 00:50:17,010
du börjar känna igen den som talar till dig

861
00:50:17,010 --> 00:50:22,850
eftersom jag faktiskt tvungen att gå till Redmint att göra dessa och inspelade 2 videor där.

862
00:50:22,850 --> 00:50:25,240
Men det är en del av spelspåret,

863
00:50:25,240 --> 00:50:27,650
och det finns också en hel bana för allmän applikationsutveckling.

864
00:50:27,650 --> 00:50:29,380
Det kallas Generation App.

865
00:50:29,380 --> 00:50:33,460
Jag skulle definitivt rekommendera det till dig också förutom proverna.

866
00:50:33,460 --> 00:50:38,110
>> Det finns en hel del filmer på en plats som kallas Kanal 9 också.

867
00:50:38,110 --> 00:50:42,790
Det är nog det sista jag kommer att rekommendera och innan vi går vidare här.

868
00:50:42,790 --> 00:50:45,280
Channel9.msdn.com.

869
00:50:45,280 --> 00:50:48,880
Detta är bra eftersom du inte kommer att läsa igenom massor av vitböcker.

870
00:50:48,880 --> 00:50:53,880
Det är i princip en hel del videor, screencasts och saker som är rakt på sak.

871
00:50:53,880 --> 00:50:57,940
Jag skulle inte säga att det är alltid rätt på sak. Det beror vem som gör snacket.

872
00:50:57,940 --> 00:51:02,290
Men i allmänhet, det finns några riktigt till-punkt video här

873
00:51:02,290 --> 00:51:06,230
som visar dig någon särskild sak du kanske vill lära sig eller se demoed.

874
00:51:06,230 --> 00:51:11,110
Det finns också allt vårt innehåll från vår konferens som hände ett par veckor sedan

875
00:51:11,110 --> 00:51:14,380
heter Build, och du ser att just där.

876
00:51:14,380 --> 00:51:18,450
Det finns kärnteknologier för Windows 8 spel. Varsågod.

877
00:51:18,450 --> 00:51:23,150
Jag var där, faktiskt. Du kan inte se mig. Jag var här.

878
00:51:23,150 --> 00:51:27,560
Men hur som helst, bortsett från, skulle jag rekommendera att du tar en titt på dessa filmer.

879
00:51:27,560 --> 00:51:29,330
De är ganska bra.

880
00:51:29,330 --> 00:51:32,620
Om du har fastnat på något eller om du bara vill se vad något kan göra, skjuta upp dem.

881
00:51:32,620 --> 00:51:36,890
>> [Guarin] Windows Mail skickade bara mig ett mail med en länk till innehåll

882
00:51:36,890 --> 00:51:42,140
för studenter att ladda ner med exempelkod och sånt. >> [Bowen] Stort.

883
00:51:42,140 --> 00:51:45,510
Awesome. Tack, Edwin.

884
00:51:45,510 --> 00:51:48,320
>> Bra. >> [Elev] Jag har en fråga. >> [Bowen] Oh. Ja, tack.

885
00:51:48,320 --> 00:51:55,030
[Ohörbart elev fråga] >> [Bowen] Åh, jag är glad att du frågar det. Ja.

886
00:51:55,030 --> 00:51:58,940
Frågan var, är det ett visuellt gränssnitt för mig att skapa saker och ting?

887
00:51:58,940 --> 00:52:01,630
Edwin kommer att belöna dig generöst för den frågan.

888
00:52:01,630 --> 00:52:04,310
Det finns ett sätt att göra detta.

889
00:52:04,310 --> 00:52:09,040
Ska vi göra det nu? Låt oss göra det nu.

890
00:52:09,040 --> 00:52:11,780
Jag ska gå till det just nu.

891
00:52:11,780 --> 00:52:14,070
Egentligen vill jag lägga in en sak till denna demo,

892
00:52:14,070 --> 00:52:16,710
och sedan ska jag visa dig det verkliga svaret.

893
00:52:16,710 --> 00:52:21,340
Jag hade tänkt att lägga i lite mer CSS här.

894
00:52:21,340 --> 00:52:23,980
Jag var lite off på tangenter här.

895
00:52:23,980 --> 00:52:26,770
Låt mig sätta i vissa CSS här för att ta tillvara

896
00:52:26,770 --> 00:52:29,980
av de klasser som vi lagt till en liten stund sedan,

897
00:52:29,980 --> 00:52:33,930
till huvudet, till Maincontent div, och sedan till den greetingOutput.

898
00:52:33,930 --> 00:52:37,920
Om jag gör det och kör det, kan du se nu har vi en lite annorlunda stoppning och marginaler,

899
00:52:37,920 --> 00:52:40,310
så vi har faktiskt en del förskjutningar här.

900
00:52:40,310 --> 00:52:44,630
Dessa är mer mot vad du kommer att förvänta sig av ett slutligt polerad ansökan.

901
00:52:44,630 --> 00:52:47,770
Men jag bara visa detta för dig eftersom det är rakt upp CSS.

902
00:52:47,770 --> 00:52:51,910
Så de saker som du redan vet att du kan använda här för att anpassa innehållet som du vill.

903
00:52:51,910 --> 00:52:55,100
Du har redan sett hur man gör bakgrunden ändras på det sättet.

904
00:52:55,100 --> 00:53:02,980
>> Om jag går tillbaka ut till vår HTML, kommer jag att lägga in ytterligare en uppsättning av markeringar,

905
00:53:02,980 --> 00:53:06,140
och det faktiskt kommer att bli en kontroll från WinJS.

906
00:53:06,140 --> 00:53:09,840
Jag ska gå och ta tag i detta, en etikett. Låt mig se till att jag gör det på rätt plats.

907
00:53:09,840 --> 00:53:11,740
Förmodligen tillräckligt bra.

908
00:53:11,740 --> 00:53:15,590
Här har jag bara lagt till - och vi ska gå hela skärmen så att du kan se det hela -

909
00:53:15,590 --> 00:53:18,520
Jag har lagt till en etikett för nästa div.

910
00:53:18,520 --> 00:53:20,890
Den div heter ratingControlDiv.

911
00:53:20,890 --> 00:53:23,090
I sig själv det kommer att göra någonting.

912
00:53:23,090 --> 00:53:28,570
Om du öppnar det i en webbläsare, skulle du titta på tomt, div själv.

913
00:53:28,570 --> 00:53:31,820
Men på grund av den mystiska kodrad som jag visade dig tidigare,

914
00:53:31,820 --> 00:53:35,650
processen allt, det kommer att leta efter något som ser ut så här -

915
00:53:35,650 --> 00:53:40,380
uppgifter-win-kontroll - och det kommer att hitta allt som finns i den parametern.

916
00:53:40,380 --> 00:53:44,560
Det kommer att göra ett exempel på vad som är det pekar på.

917
00:53:44,560 --> 00:53:48,850
I det här fallet är det en rating kontroll, så jag säger, "Gå och byt ut den här saken

918
00:53:48,850 --> 00:53:51,400
"Med vad du behöver göra för att göra en rating kontroll."

919
00:53:51,400 --> 00:53:56,610
Det kan vara en flip-kontroll, kan det vara de framsteg ring eller vad kontroll som du vill använda.

920
00:53:56,610 --> 00:53:59,390
De kommer alla att arbeta i stort sett samma sätt.

921
00:53:59,390 --> 00:54:02,920
Du använder standarden HTML5 markup för att ange vad du vill ha,

922
00:54:02,920 --> 00:54:07,670
och då du kommer att få en kontroll i slutet av det här. Låt mig köra.

923
00:54:07,670 --> 00:54:12,270
Jag kopierade det in, och nu när uppmärkning blir detta,

924
00:54:12,270 --> 00:54:15,280
vilket är faktiskt ganska många HTML-element.

925
00:54:15,280 --> 00:54:18,440
Dessa är alla enskilda bilder, och det finns divar runt dem med väljare.

926
00:54:18,440 --> 00:54:22,610
Förhoppningsvis kan du se det. Det är lite subtil.

927
00:54:22,610 --> 00:54:27,380
Jag kan sväva över olika objekt, och det kommer att tillåta mig att se märk här.

928
00:54:27,380 --> 00:54:31,560
Jag kan klicka på det, och det kommer ihåg det betyg men det är om det.

929
00:54:31,560 --> 00:54:33,100
Det är egentligen inte gör något med betyg.

930
00:54:33,100 --> 00:54:35,230
>> Den sista jag vill visa dig på detta

931
00:54:35,230 --> 00:54:37,820
innan vi byter till en mer visuell design erfarenhet

932
00:54:37,820 --> 00:54:42,680
är lite kod som jag kan använda för att svara på dessa WinJS kontroller.

933
00:54:42,680 --> 00:54:47,540
Låt mig få ut av det, tillbaka ut hela skärmen,

934
00:54:47,540 --> 00:54:52,690
och växla över till JS här för sekund.

935
00:54:52,690 --> 00:54:57,450
Jag kan göra det här. Jag tror att jag ska byta ut det hela.

936
00:54:57,450 --> 00:55:03,080
Egentligen tror jag att det kommer att ersätta allt det, men vi ska ta reda på tillsammans.

937
00:55:03,080 --> 00:55:07,350
Jag ska sätta detta i här. Yeah. Jag ska ta bort den här också.

938
00:55:07,350 --> 00:55:11,790
Vad gjorde jag till? Det ser ut som en hel del. Det är inte mycket.

939
00:55:11,790 --> 00:55:14,920
Jag förlängde den kodrad som jag redan talat om tidigare,

940
00:55:14,920 --> 00:55:18,590
och jag säger, "När allt är klart, när alla mina kontroller har gjorts,

941
00:55:18,590 --> 00:55:23,660
"Så gör det." Så då kör denna funktion kallas färdig.

942
00:55:23,660 --> 00:55:27,080
I detta fall är det här du kan lista ut.

943
00:55:27,080 --> 00:55:29,040
Gå finna att div kontroll.

944
00:55:29,040 --> 00:55:30,790
Faktiskt, det är en sak jag vill påpeka.

945
00:55:30,790 --> 00:55:35,630
Att nästa rad faktiskt säger, "Jag har fått det ratingControlDiv."

946
00:55:35,630 --> 00:55:39,770
"Jag vill tala med den som om det vore en verklig kontroll, en WinJS kontroll."

947
00:55:39,770 --> 00:55:42,020
Så i princip, du ber om det från det.

948
00:55:42,020 --> 00:55:44,600
Du säger, "Jag vill prata med dig som en kontroll."

949
00:55:44,600 --> 00:55:47,810
Och sedan kan du börja säga saker som, "Vi kommer att lägga till en avlyssnare för dig

950
00:55:47,810 --> 00:55:51,430
"Så när du bytte vi kan svara på det."

951
00:55:51,430 --> 00:55:56,930
Och då kan vi också göra saker som detta. Faktiskt, det är den gamla koden där.

952
00:55:56,930 --> 00:55:59,600
Jag tror att jag saknar klistrar in ytterligare en funktion,

953
00:55:59,600 --> 00:56:05,030
och det skulle vara den verkliga funktionen som skulle svara på rankingkontrollen ändras.

954
00:56:05,030 --> 00:56:07,710
Låt mig dyker det i rätt ned här,

955
00:56:07,710 --> 00:56:09,840
någonstans runt där.

956
00:56:09,840 --> 00:56:14,930
Och i detta fall, är det enda som är nytt det faktum att vi kommer in i

957
00:56:14,930 --> 00:56:21,000
vad rankingkontrollen berättar och vi ber för det som kallas tentativeRating.

958
00:56:21,000 --> 00:56:23,150
Det finns en massa olika andra saker som att kontrollen kan berätta för dig,

959
00:56:23,150 --> 00:56:25,310
och den går kontroll genom kontroll.

960
00:56:25,310 --> 00:56:29,140
Det är mycket enkelt. Du kommer att kunna lista ut det inga som helst problem.

961
00:56:29,140 --> 00:56:34,040
Jag kör det här, och nu när jag ändrar betyg och klicka på betyg,

962
00:56:34,040 --> 00:56:36,480
du kan se nu är det faktiskt svara på det.

963
00:56:36,480 --> 00:56:40,280
Det är att sätta det betyg på skärmen i det annars tomma div-taggen

964
00:56:40,280 --> 00:56:42,970
nedanför rankingkontrollen.

965
00:56:42,970 --> 00:56:46,670
Det är magin i en massa saker här också.

966
00:56:46,670 --> 00:56:49,580
Så när du skapar applikationer för Windows Store,

967
00:56:49,580 --> 00:56:52,930
det finns massor av kontroller som du bara kan använda. Alla arbetar så här.

968
00:56:52,930 --> 00:56:58,670
>> Låt mig visa dig den visuella sidan av att designa för dessa applikationer.

969
00:56:58,670 --> 00:57:03,440
Den goda nyheten är att du redan har detta verktyg när du installerar allt

970
00:57:03,440 --> 00:57:06,240
om du går till den nedladdning och du får Visual Studio.

971
00:57:06,240 --> 00:57:09,890
Jag kan högerklicka på denna. Jag kommer inte att zooma in

972
00:57:09,890 --> 00:57:12,040
Det står bara öppen i Blend.

973
00:57:12,040 --> 00:57:16,040
Blend är ett annat verktyg som arbetar sida vid sida med Visual Studio

974
00:57:16,040 --> 00:57:19,230
och fokuserar mycket mer på utformningen sidan av saken,

975
00:57:19,230 --> 00:57:23,660
så det verkligen ytor verktyg som är optimerade för att skapa stilar,

976
00:57:23,660 --> 00:57:29,720
skapa animationer, arbeta med CSS, en massa saker i den typen av venen.

977
00:57:29,720 --> 00:57:36,380
Här vad som borde vara mycket intressant och ganska självklart omedelbart är vi tittar på appen.

978
00:57:36,380 --> 00:57:40,060
Förhoppningsvis är vi fortfarande.

979
00:57:40,060 --> 00:57:42,650
Istället för att se koden, vilken vi fortfarande ser i botten,

980
00:57:42,650 --> 00:57:45,350
vi ser den verkliga representationen av ansökan.

981
00:57:45,350 --> 00:57:49,640
Vad är mer, det är inte bara en representation av app, det är faktiskt appen igång.

982
00:57:49,640 --> 00:57:52,010
Och det är det som verkligen är trevligt om Blend.

983
00:57:52,010 --> 00:57:58,620
Laget har gjort en hel del arbete för att få HTML och Javascript och CSS i detta verktyg.

984
00:57:58,620 --> 00:58:01,930
Nu kan du faktiskt, om du är nyfiken, "Vad betyder det? Vad kan jag göra?"

985
00:58:01,930 --> 00:58:08,310
Jag kan faktiskt utforma till denna ansökan, även om saker som detta inte finns i min kod.

986
00:58:08,310 --> 00:58:13,230
Kom ihåg att betyg kontroll? Det var bara en div-tagg.

987
00:58:13,230 --> 00:58:17,090
Det här, att stjärnan, existerar endast vid körning. Hur vet jag det?

988
00:58:17,090 --> 00:58:20,300
Det är lite av magi här.

989
00:58:20,300 --> 00:58:21,700
Se dessa blixtar?

990
00:58:21,700 --> 00:58:25,570
Varje gång du ser en blixt, innebär att det skapades av något vid körning.

991
00:58:25,570 --> 00:58:31,770
Vissa JavaScript sprang och vände något i detta eller skapat detta med en viss logik.

992
00:58:31,770 --> 00:58:37,100
De stjärnor som du ser det skapades av JavaScript genom WinJS.

993
00:58:37,100 --> 00:58:41,800
Det fina är, det spelar ingen roll för mig, kan jag fortfarande utforma det,

994
00:58:41,800 --> 00:58:44,410
Jag kan fortfarande gå in och ändra det, kan jag ta reda på vad som händer här,

995
00:58:44,410 --> 00:58:50,260
Jag kan titta på CSS, kan jag gå vidare och ta reda på varför färgen är så det är,

996
00:58:50,260 --> 00:58:54,610
Jag kan börja jävlas med saker och göra saker hemsk,

997
00:58:54,610 --> 00:58:58,360
vad jag vill göra.

998
00:58:58,360 --> 00:59:01,020
Faktiskt, jag lämnar saker ensam.

999
00:59:01,020 --> 00:59:03,980
Men du kan se här är det all CSS och det visar du här.

1000
00:59:03,980 --> 00:59:10,120
Om jag går upp till det, det kommer att visa dig allt som de kallar Winning,

1001
00:59:10,120 --> 00:59:14,850
så de CSS-regler som är det mest specifika och det mest valda för det objektet,

1002
00:59:14,850 --> 00:59:17,110
som du har förmodligen redan gått över i dina klasser,

1003
00:59:17,110 --> 00:59:22,000
där man kan säga att det finns en allmän typsnitt som vi söker till allt,

1004
00:59:22,000 --> 00:59:26,860
men eftersom detta är en h1 och jag har en färg som definierats för H1S,

1005
00:59:26,860 --> 00:59:29,820
det kommer att bli den här färgen, och det är för att det är mer specifik än body1.

1006
00:59:29,820 --> 00:59:32,590
Det här en sak här visar allt detta,

1007
00:59:32,590 --> 00:59:35,470
och det är verkligen kraftfulla saker som du får mer komplexa,

1008
00:59:35,470 --> 00:59:38,160
du undrar varför dessa saker är som de är.

1009
00:59:38,160 --> 00:59:41,020
Det kommer faktiskt berätta för dig, och du kan välja någon av dessa poster här.

1010
00:59:41,020 --> 00:59:43,370
Den färgen är inte så illa, faktiskt.

1011
00:59:43,370 --> 00:59:47,150
Du kan välja dem. Förhoppningsvis kan du se här.

1012
00:59:47,150 --> 00:59:52,410
För allt som du har på din ansökan, ser du en hel kaskad

1013
00:59:52,410 --> 00:59:56,070
av all CSS som skulle ha tillämpats på det och vilken som vinner,

1014
00:59:56,070 --> 00:59:58,050
som man faktiskt tog företräde.

1015
00:59:58,050 --> 01:00:00,930
Dessa är typ av tråkigt. Det finns inte mycket händer i några av dessa.

1016
01:00:00,930 --> 01:00:04,660
Om jag går och ändra färg, så kommer du att börja se några kaskad där.

1017
01:00:04,660 --> 01:00:07,760
Du kan också använda HTML här.

1018
01:00:07,760 --> 01:00:12,490
Jag kan gå igenom och ändra HTML-egenskaper för alla dessa saker som jag önskar.

1019
01:00:12,490 --> 01:00:14,620
Det finns bara massor av saker här.

1020
01:00:14,620 --> 01:00:18,070
>> Jag vill inte ta din tid genom att gå igenom allt här. Bara vet att det är här.

1021
01:00:18,070 --> 01:00:21,700
Det finns en hel del designorienterat funktionalitet som är bara tillgänglig för dig

1022
01:00:21,700 --> 01:00:26,730
så att du kan hålla visuell, arbeta med programmet, och inte göra en massa gissa

1023
01:00:26,730 --> 01:00:32,180
att du måste göra normalt och cykla tillbaka från en webbläsare tillbaka in i din design,

1024
01:00:32,180 --> 01:00:33,940
tillbaka till webbläsaren.

1025
01:00:33,940 --> 01:00:37,010
Detta är verkligen coola grejer för det, och när du utvecklar en Windows Store app,

1026
01:00:37,010 --> 01:00:39,650
det kommer att göra dig mycket mer produktiv.

1027
01:00:39,650 --> 01:00:45,150
>> Du kan också se det spåra uppmärkning här och din CSS

1028
01:00:45,150 --> 01:00:47,270
när du arbetar med olika saker.

1029
01:00:47,270 --> 01:00:50,180
Det är nog väldigt svårt för dig att se det, speciellt på video,

1030
01:00:50,180 --> 01:00:54,680
men det är vad som händer här, och jag skulle rekommendera dig att bli bekant med det.

1031
01:00:54,680 --> 01:00:57,240
Det kommer att spara mycket tid. Det är Blend.

1032
01:00:57,240 --> 01:01:00,520
Om du gör några ändringar här, de automatiskt kommer att föra tillbaka över

1033
01:01:00,520 --> 01:01:01,870
till Visual Studio.

1034
01:01:01,870 --> 01:01:06,590
Det är samma filer, det är samma allting. Jag lämnar den ensam.

1035
01:01:06,590 --> 01:01:08,650
Jag har ett bättre exempel som jag vill visa dig.

1036
01:01:08,650 --> 01:01:11,660
Men om jag gjorde en förändring där och räddade det och jag kom tillbaka till Visual Studio, skulle den säga,

1037
01:01:11,660 --> 01:01:16,390
"Hej, bara förändrats något. Kan jag ladda om den för dig?" Ja.

1038
01:01:16,390 --> 01:01:18,770
Och du använder samma grejer där.

1039
01:01:18,770 --> 01:01:21,320
Det är slutet av denna speciella prov.

1040
01:01:21,320 --> 01:01:28,170
>> Jag vill visa dig en högre slutet prov bara för att ge dig en bild av andra funktioner

1041
01:01:28,170 --> 01:01:30,350
du kanske tycker om också.

1042
01:01:30,350 --> 01:01:32,280
Detta är ett urval app som du kan ladda ner.

1043
01:01:32,280 --> 01:01:35,620
Om du letar efter något som kallas Windows Camp i en låda,

1044
01:01:35,620 --> 01:01:40,340
det inte finns några prover som finns i det, och ett av dem är Contoso kokbok.

1045
01:01:40,340 --> 01:01:41,640
Jag kan bara köra det här för dig.

1046
01:01:41,640 --> 01:01:44,700
Egen startbild. Detta är stödrastervyn ansökan.

1047
01:01:44,700 --> 01:01:49,590
De har bundna några egna data här. Du kan navigera genom detta.

1048
01:01:49,590 --> 01:01:53,090
Du kan gå och titta på olika saker som gör oss hungriga på en fredag ​​eftermiddag.

1049
01:01:53,090 --> 01:01:57,760
Jag vet inte. Vad kommer att göra mig mest hungrig?

1050
01:01:57,760 --> 01:02:00,530
Jag vet inte. Jag kommer bara att plocka en.

1051
01:02:00,530 --> 01:02:02,460
Du går in i dessa saker. Det kommer att visa dig receptet.

1052
01:02:02,460 --> 01:02:04,900
Du kan också, istället för att klicka på ett objekt,

1053
01:02:04,900 --> 01:02:10,360
du kan gå rätt till denna kategori av innehåll, den del av innehåll.

1054
01:02:10,360 --> 01:02:15,590
I så fall kan du läsa massor av falska Latin berätta allt om dessa recept här

1055
01:02:15,590 --> 01:02:17,720
och sedan gå rakt in i specifika recept.

1056
01:02:17,720 --> 01:02:22,770
Det stöder också saker som att dela som jag visade dig tidigare med bilderna.

1057
01:02:22,770 --> 01:02:26,160
Du kan också söka i denna ansökan också.

1058
01:02:26,160 --> 01:02:28,880
Det är mycket enkelt att göra sökningen.

1059
01:02:28,880 --> 01:02:31,300
I grund och botten är du bara få en textsträng från Windows

1060
01:02:31,300 --> 01:02:34,720
och du bestämmer hur du vill hantera söka med det.

1061
01:02:34,720 --> 01:02:39,830
Det är några få rader kod för att få det, och sedan vad du gör med det när det är helt upp till dig.

1062
01:02:39,830 --> 01:02:44,180
>> Här har de också en app bar där de använder en annan funktion.

1063
01:02:44,180 --> 01:02:45,430
Jag ska bara berätta vad det är.

1064
01:02:45,430 --> 01:02:48,220
En påminnelse kommer att använda vad som kallas en skål anmälan.

1065
01:02:48,220 --> 01:02:52,930
Detta är verkligen praktiskt för att låta användaren veta när saker har hänt,

1066
01:02:52,930 --> 01:02:55,850
som ett program har installerats eller har något klar.

1067
01:02:55,850 --> 01:02:57,950
Det är också bra för spel också.

1068
01:02:57,950 --> 01:03:02,360
Om du har en ihållande värld eller en ledartavla och en tjänst som är värd att

1069
01:03:02,360 --> 01:03:08,490
kanske på en separat maskin, kan dessa meddelanden skickas i en maskin

1070
01:03:08,490 --> 01:03:12,240
och även om användaren inte använder ditt spel, spela ditt spel eller köra din app,

1071
01:03:12,240 --> 01:03:15,170
de kan fortfarande få meddelanden om dessa typer av evenemang.

1072
01:03:15,170 --> 01:03:19,350
Så man kan säga, "Ditt slott har förstörts eller är nästan förstörd."

1073
01:03:19,350 --> 01:03:22,870
"Kom tillbaka och försvara den," eller något liknande.

1074
01:03:22,870 --> 01:03:26,830
Du klickar på anmälan, går du tillbaka in i spelet, och du kan spela det.

1075
01:03:26,830 --> 01:03:32,170
Så sådana saker kan hjälpa verkligen dra folk tillbaka in i din app ganska effektivt.

1076
01:03:32,170 --> 01:03:37,450
>> Det finns också stöd i denna ansökan för att använda mikrofonen, webbkameran,

1077
01:03:37,450 --> 01:03:39,560
gör video och ta foton.

1078
01:03:39,560 --> 01:03:42,080
Du kan också fästa en sekundär sida vid sida.

1079
01:03:42,080 --> 01:03:46,760
Det är användbart om du vill bara ha en bricka som går rätt till visst innehåll.

1080
01:03:46,760 --> 01:03:49,960
I detta fall går det rätt att detta recept.

1081
01:03:49,960 --> 01:03:51,300
Allt jag nämner jag bara visar

1082
01:03:51,300 --> 01:03:53,270
eftersom det är saker som du kan tänka på att använda också.

1083
01:03:53,270 --> 01:03:57,590
För det mesta, är de mycket enkla att använda.

1084
01:03:57,590 --> 01:04:00,070
Jag skulle bara rekommendera att du tar upp det provet explorer

1085
01:04:00,070 --> 01:04:03,600
och hitta ett prov som kan visa dig hur man gör det.

1086
01:04:03,600 --> 01:04:07,140
Det är ganska enkelt att ställa de in i dina program där också.

1087
01:04:07,140 --> 01:04:11,030
>> Jag ska visa dig något annat som är ganska coolt här.

1088
01:04:11,030 --> 01:04:15,230
Jag ska knäppa denna ansökan, och jag kommer att gå tillbaka till Visual Studio.

1089
01:04:15,230 --> 01:04:18,870
Detta program körs. Det körs från Visual Studio.

1090
01:04:18,870 --> 01:04:21,370
Jag kan göra några ganska häftiga saker med det.

1091
01:04:21,370 --> 01:04:23,840
Jag har faktiskt en möjlighet att välja ett element,

1092
01:04:23,840 --> 01:04:28,250
och jag kan gå hit till live ansökan och jag kan säga,

1093
01:04:28,250 --> 01:04:34,000
"Jag undrar varför är förberedelsetiden lite ljusare grå än titeln i sig?"

1094
01:04:34,000 --> 01:04:35,680
Jag kan klicka på den.

1095
01:04:35,680 --> 01:04:38,080
Det kommer att synkronisera det tillbaka in i Visual Studio,

1096
01:04:38,080 --> 01:04:43,780
och det kommer att visa mig exakt genererat innehåll som resulterade i den delen av UI.

1097
01:04:43,780 --> 01:04:47,270
Så i detta fall, är det posten-textning och h4 dubbel konstruktion,

1098
01:04:47,270 --> 01:04:51,110
och som förmodligen säger oss vad vi behöver veta för som en H4 i det sammanhanget,

1099
01:04:51,110 --> 01:04:53,550
det kommer att få en viss typ av teckensnitt.

1100
01:04:53,550 --> 01:04:56,410
Men om jag vet fortfarande inte varför, kan jag klicka på Trace Styles.

1101
01:04:56,410 --> 01:05:02,330
Jag kan expandera ut färg och jag kan ta reda på exakt varför den färgen är inte kroppen färg

1102
01:05:02,330 --> 01:05:04,640
men i själva verket är något annat.

1103
01:05:04,640 --> 01:05:07,210
Detta är i huvudsak de dev verktyg från Internet Explorer

1104
01:05:07,210 --> 01:05:09,530
till en grad tas i Visual Studio.

1105
01:05:09,530 --> 01:05:12,110
Om du har arbetat med Chrome Dev Tools, Firebug, saker,

1106
01:05:12,110 --> 01:05:14,720
dessa typer av verktyg som finns i webbläsaren,

1107
01:05:14,720 --> 01:05:17,340
den typen av funktionalitet har kommit rätt in i Visual Studio

1108
01:05:17,340 --> 01:05:22,090
så du behöver faktiskt inte för att starta en webbläsare och arbeta med dessa verktyg för sig.

1109
01:05:22,090 --> 01:05:24,320
Nu har jag en Windows Store app bara kör,

1110
01:05:24,320 --> 01:05:27,840
och jag kan börja dra isär den och ta reda på varför saker gör vad de är.

1111
01:05:27,840 --> 01:05:30,440
>> Jag kan också göra det här sättet också.

1112
01:05:30,440 --> 01:05:35,020
Jag kan gå och bara plocka något rätt från uppmärkning och ta reda på vad det är

1113
01:05:35,020 --> 01:05:38,560
i själva ansökan. Jag tror att jag har gått med allt.

1114
01:05:38,560 --> 01:05:41,440
Här är jag svävar över detta. Jag kan välja det.

1115
01:05:41,440 --> 01:05:45,540
Det kommer att visa mig i själva driften program där det där är

1116
01:05:45,540 --> 01:05:48,070
att jag nu jag klickar på i markeringen.

1117
01:05:48,070 --> 01:05:49,700
Riktigt coola grejer.

1118
01:05:49,700 --> 01:05:52,710
När du försöker lista ut vad som händer och vad som HTML gör,

1119
01:05:52,710 --> 01:05:56,080
vad CSS gör, ha detta i åtanke.

1120
01:05:56,080 --> 01:05:58,450
Kom ihåg att detta är här för dig

1121
01:05:58,450 --> 01:06:02,070
och även att Blend kan arbeta med en live-program som körs.

1122
01:06:02,070 --> 01:06:06,070
>> Den sista jag ville visa dig med det här programmet -

1123
01:06:06,070 --> 01:06:09,290
Förresten, det visar du deltan som saker förändras också,

1124
01:06:09,290 --> 01:06:11,160
så att du kan titta på för de gula höjdpunkter.

1125
01:06:11,160 --> 01:06:14,060
De är saker som bara har ändrats i ansökan.

1126
01:06:14,060 --> 01:06:16,350
Men en sista sak. Jag vill gå tillbaka till Blend bara för en sekund här.

1127
01:06:16,350 --> 01:06:21,790
Vi kommer att öppna upp detta, Öppna i Blend, samma app, samma allting.

1128
01:06:21,790 --> 01:06:28,660
Jag vill bara visa dig erfarenhet här är inte bara du har fastnat på hemsidan

1129
01:06:28,660 --> 01:06:32,880
titta på de saker du får som standard när du kör programmet och låta det sitta där.

1130
01:06:32,880 --> 01:06:36,490
Du kan också vända på det här ganska liten ikon upp här.

1131
01:06:36,490 --> 01:06:38,560
Det kallas interaktivt läge.

1132
01:06:38,560 --> 01:06:41,560
Du klickar på det. Det kommer att ta upp din ansökan.

1133
01:06:41,560 --> 01:06:43,730
Du är inte i Design-läge längre, så att du inte kommer att klicka på saker

1134
01:06:43,730 --> 01:06:47,270
att ändra funktionalitet, men du kan faktiskt jobba med programmet nu.

1135
01:06:47,270 --> 01:06:51,560
Du kan klicka dig fram, du kan göra vad som helst, få till ett recept som du bryr dig om

1136
01:06:51,560 --> 01:06:54,810
eller till en kategori. Låt oss gå till denna kategori.

1137
01:06:54,810 --> 01:06:56,880
Jag säger, "Okej, här är där jag vill utforma."

1138
01:06:56,880 --> 01:06:59,680
Klicka sedan på dig att knappen igen, kommer det att ta dig tillbaka till Designytan,

1139
01:06:59,680 --> 01:07:02,130
och nu kan du göra alla de saker som jag talade om tidigare.

1140
01:07:02,130 --> 01:07:06,230
Jag ska hålla klicka tills jag får detta markerat, ta reda på dess dimensioner,

1141
01:07:06,230 --> 01:07:09,890
ta reda på HTML för det, CSS för det

1142
01:07:09,890 --> 01:07:14,990
för ett program som körs, något senare delen av ansökan.

1143
01:07:14,990 --> 01:07:17,780
Mycket, mycket användbart. Jag ska visa det här för dig.

1144
01:07:17,780 --> 01:07:21,340
Vänligen ha det i åtanke om du tittar på att skriva kod med detta

1145
01:07:21,340 --> 01:07:26,070
eftersom det kommer att spara dig mycket krångel, och det är ganska bra grejer.

1146
01:07:26,070 --> 01:07:32,370
Det är ganska mycket allt jag ville visa dig på Blend och Visual Studio för allt detta.

1147
01:07:32,370 --> 01:07:36,130
>> Har du frågor om något av dessa verktyg?

1148
01:07:36,130 --> 01:07:40,000
Vad som helst? >> [Guarin] Jag har saker att ge ut, så bra frågor, bra grejer.

1149
01:07:40,000 --> 01:07:43,700
>> [Bowen skrattar] Jag har redan visat er mina demos här.

1150
01:07:43,700 --> 01:07:47,000
Jag kommer att lägga den på sidan Resurser och vända på frågor nu.

1151
01:07:47,000 --> 01:07:53,850
Det första referens är att Generation App webbplats med spellåtar och app spåret.

1152
01:07:53,850 --> 01:07:55,040
Anmäl dig för dem.

1153
01:07:55,040 --> 01:07:57,210
Du behöver inte vänta 30 dagar för att få innehållet.

1154
01:07:57,210 --> 01:08:00,370
Du kan börja gå och titta på det innehåll som du vill.

1155
01:08:00,370 --> 01:08:04,380
Jag förstår dina tidsramar kan vara annorlunda än - [skrattar]

1156
01:08:04,380 --> 01:08:07,780
Så när är det Hackathon? Det är ett par veckor, eller hur?

1157
01:08:07,780 --> 01:08:09,620
Så du har inte de 30 dagar att vänta.

1158
01:08:09,620 --> 01:08:13,180
Så ja, kan du anmäla dig till det och sedan bara börja dra innehållet ut ur det.

1159
01:08:13,180 --> 01:08:15,320
Även Dev och designcenter.

1160
01:08:15,320 --> 01:08:17,620
Och jag nämnde det inte, men det finns också butik Docs.

1161
01:08:17,620 --> 01:08:22,880
Detta skulle vara för efter Hackathon när du är redo att börja skicka in dina appar för butiken.

1162
01:08:22,880 --> 01:08:27,350
Det finns några användbara riktlinjer här, viss vägledning om hur man får saker och ting in i butiken,

1163
01:08:27,350 --> 01:08:29,960
några vanliga problem som kan resa dig upp,

1164
01:08:29,960 --> 01:08:32,540
och det är i slutet av dessa resurser.

1165
01:08:32,540 --> 01:08:35,300
>> Så vad har du på hjärtat? Något annat som du -

1166
01:08:35,300 --> 01:08:40,580
[Guarin] Vem funderar på att göra en Windows-app för CS50? Cool.

1167
01:08:40,580 --> 01:08:42,200
[Bowen] Cool. Bra.

1168
01:08:44,149 --> 01:08:49,410
>> Eventuella frågor om de saker som du har sett hittills och hur den förhåller sig till detta?

1169
01:08:49,410 --> 01:08:54,540
Till exempel, med mer tid jag kunde ta ett spel som jag har skrivit

1170
01:08:54,540 --> 01:08:57,310
och som körs i webbläsare och bara typ av gå igenom processen

1171
01:08:57,310 --> 01:08:59,870
att föra in det i Visual Studio och gör det till en Windows Store app.

1172
01:08:59,870 --> 01:09:02,870
Det tar mer tid än vad vi egentligen hade att inkludera i dag,

1173
01:09:02,870 --> 01:09:08,010
men den korta versionen är att det är samma kod som du har körs i webbläsaren,

1174
01:09:08,010 --> 01:09:11,680
och de saker som du ändrar är de saker som du väljer att ansluta till Windows 8.

1175
01:09:11,680 --> 01:09:16,220
Så om du vill använda charm, om du vill söka eller dela,

1176
01:09:16,220 --> 01:09:19,899
du behöver för att skapa en app bar för att gömma undan en del funktioner på det,

1177
01:09:19,899 --> 01:09:21,939
de är den typen av saker som du vill ändra.

1178
01:09:21,939 --> 01:09:25,229
Men kärnan i din webbprogram kan förbli intakt.

1179
01:09:25,229 --> 01:09:29,590
Återigen, så länge som det fungerar i IE10, det kommer att bli en riktigt enkel port

1180
01:09:29,590 --> 01:09:33,680
att få det där i Visual Studio, i Blend, och göra det till en Windows Store app.

1181
01:09:33,680 --> 01:09:37,500
Återigen, det enda du behöver för att lära sig är de andra funktioner

1182
01:09:37,500 --> 01:09:41,830
som du kan använda för att lysa upp ett program, som en levande kakel och sådana saker.

1183
01:09:41,830 --> 01:09:46,899
>> Yeah. >> [Elev] Min fråga handlar om att arbeta mobilt.

1184
01:09:46,899 --> 01:09:52,210
Så om du gör en app som fungerar som en app på skrivbordet,

1185
01:09:52,210 --> 01:09:56,480
är det verkligen lätt att överföra den till mobil, eller finns det en -

1186
01:09:56,480 --> 01:10:01,270
Frågan är, om jag gör en Windows Store app som verkligen är optimerad för denna miljö

1187
01:10:01,270 --> 01:10:06,430
och jag vill ta med den till en mobil värld, vad det innebär med att göra det?

1188
01:10:06,430 --> 01:10:10,060
Det, liksom många frågor, är alltid en ständigt föränderlig svar.

1189
01:10:10,060 --> 01:10:16,190
Den goda nyheten är om du fastnar med HTML och JavaScript, CSS,

1190
01:10:16,190 --> 01:10:18,720
om du börjar från en Windows Store app,

1191
01:10:18,720 --> 01:10:20,590
det kommer att låta dig ta med den till webben

1192
01:10:20,590 --> 01:10:24,650
och sedan använda dessa typer av tekniker, såsom media frågor och saker,

1193
01:10:24,650 --> 01:10:27,180
att anpassa sig till olika storleksenheter.

1194
01:10:27,180 --> 01:10:29,900
Som sagt, det finns alltid ramar och saker där ute

1195
01:10:29,900 --> 01:10:33,450
det stöd som sträcker sig ut olika tekniker, olika plattformar.

1196
01:10:33,450 --> 01:10:35,670
Det ändras hela tiden.

1197
01:10:35,670 --> 01:10:40,030
Vi är också förändra saker och vi ser mot vad vi har nu

1198
01:10:40,030 --> 01:10:42,950
faktiskt ut med Windows Phone 8.

1199
01:10:42,950 --> 01:10:44,930
Vi har några gemensamma grundläggande infrastruktur

1200
01:10:44,930 --> 01:10:48,180
erbjuds mellan program för sådana miljöer.

1201
01:10:48,180 --> 01:10:51,200
Så de saker som du ska göra för att skapa en Windows Store app,

1202
01:10:51,200 --> 01:10:57,790
en hel del som kan föra över till en Windows Phone 8 program också.

1203
01:10:57,790 --> 01:11:02,270
Det är återigen en framväxande berättelse, så det finns en del innehåll om det på Build.

1204
01:11:02,270 --> 01:11:06,780
SDK fick bara ut en liten stund sedan. Det var precis släppt en liten stund sedan.

1205
01:11:06,780 --> 01:11:09,920
Men när det gäller andra plattformar också,

1206
01:11:09,920 --> 01:11:13,360
du kör förmodligen på många plattformar ramar också.

1207
01:11:13,360 --> 01:11:16,170
Den goda nyheten är de saker som du gör här,

1208
01:11:16,170 --> 01:11:19,620
kärnfunktioner är rakt upp web standard grejer.

1209
01:11:19,620 --> 01:11:24,010
De enda som inte skulle översätta lätt är de saker som Windows 8 gör,

1210
01:11:24,010 --> 01:11:28,060
men det är ingen överraskning att det är en Windows-funktion.

1211
01:11:28,060 --> 01:11:34,090
Du kommer inte att hitta delning eller liknande typer av kontrakt på vartannat plattform.

1212
01:11:34,090 --> 01:11:37,480
Så de är de saker som du skulle vilja ur ett designperspektiv

1213
01:11:37,480 --> 01:11:40,820
se till att du har sätt att slags abstrakt som ut så att du kan säga,

1214
01:11:40,820 --> 01:11:42,970
"Om jag kör på det, kan jag göra det."

1215
01:11:42,970 --> 01:11:48,120
Om jag inte är, det finns vissa designmönster som du kan använda för typ av gömma det där borta.

1216
01:11:48,120 --> 01:11:53,360
Men ha det i åtanke. Yeah. Ursäkta. Varsågod.

1217
01:11:53,360 --> 01:11:58,130
>> [Elev] Om jag vill testa min Windows-applikation ovanpå [ohörbart]

1218
01:11:58,130 --> 01:12:02,310
[Bowen] Ja. Jag hoppade över en sak också. Yeah.

1219
01:12:02,310 --> 01:12:04,910
Jag ska svara på din fråga först, så ska jag visa dig en funktion som jag glömde att nämna.

1220
01:12:04,910 --> 01:12:09,220
Vi har några maskiner tillgängliga lokalt. Jag är ledsen.

1221
01:12:09,220 --> 01:12:11,240
Frågan var, hur ska jag testa saker på enheter

1222
01:12:11,240 --> 01:12:14,230
om jag inte råkar ha en hel del saker att välja på?

1223
01:12:14,230 --> 01:12:17,130
[Guarin] Vi lånade er, tror jag, 5 eller 6. Hur många behöver du?

1224
01:12:17,130 --> 01:12:20,940
[Elev] Vi har 4 av dem. >> Okej. Ni fick 4 skiffer att leka med.

1225
01:12:20,940 --> 01:12:25,520
Så definitivt låta alla veta, tack. [Skrattar] >> [Bowen] Awesome.

1226
01:12:25,520 --> 01:12:27,610
Det är en ännu bättre svar än vad jag skulle ge dig.

1227
01:12:27,610 --> 01:12:31,250
Vi har kontorstid för utvecklare som vi gör på vårt kontor

1228
01:12:31,250 --> 01:12:35,110
och nu kommer snart till Microsoft Store över i Pru,

1229
01:12:35,110 --> 01:12:37,010
men Edwin har redan tagit hand om dig.

1230
01:12:37,010 --> 01:12:42,180
Det finns 4 griffeltavlor som kan låna, för att testa.

1231
01:12:42,180 --> 01:12:45,440
Så där. Det är ett exempel på en uppe.

1232
01:12:45,440 --> 01:12:47,340
Så ja, absolut. Bra.

1233
01:12:47,340 --> 01:12:52,700
Absolut överlägset bästa sättet att testa det är att vara på en enhet.

1234
01:12:52,700 --> 01:12:56,810
Om du inte råkar ha en ännu eller om du inte vill gå över campus i snön

1235
01:12:56,810 --> 01:13:01,130
att ta en eller vad som helst, det finns ett sätt att göra detta tillbaka i Visual Studio.

1236
01:13:01,130 --> 01:13:10,360
Om jag går tillbaka till där jag var här, här istället för att använda Lokal dator,

1237
01:13:10,360 --> 01:13:13,590
du kan ansluta till fjärrdatorn, men det är inte det jag pratar om här.

1238
01:13:13,590 --> 01:13:16,830
Simulator är det som du kanske vill titta på.

1239
01:13:16,830 --> 01:13:22,120
Jag ska köra det här, och egentligen vad det är, det är i grunden ett fönster på ditt eget system.

1240
01:13:22,120 --> 01:13:26,260
Här är faktiskt mitt system igång, kör Contoso,

1241
01:13:26,260 --> 01:13:29,550
men på ett sätt som låter mig ändra några av de parametrar utförande,

1242
01:13:29,550 --> 01:13:31,060
miljöparametrar.

1243
01:13:31,060 --> 01:13:34,150
Så jag kan säga här, "Vet du vad?"

1244
01:13:34,150 --> 01:13:39,240
Oh. Jag redan har det igång i en simulerad 27-tums bildskärm med 2560 upplösning.

1245
01:13:39,240 --> 01:13:44,930
Jag kan lätt släppa ner det och se vad min ansökan skulle göra med en mindre skärm

1246
01:13:44,930 --> 01:13:47,480
eller genom att ändra DPI-inställningar eller vad som helst.

1247
01:13:47,480 --> 01:13:50,700
Så på en liten skärm, en 10,6, vad kommer det att göra?

1248
01:13:50,700 --> 01:13:53,040
Det ser fortfarande ganska bra, eller hur?

1249
01:13:53,040 --> 01:13:58,220
Du vill göra det här, speciellt om du skickar in till butiken, eftersom vi gör

1250
01:13:58,220 --> 01:14:00,480
som en del av testprocessen.

1251
01:14:00,480 --> 01:14:02,400
Och om det finns problem som detta,

1252
01:14:02,400 --> 01:14:06,160
då kanske du stöter på ett problem att få certifierade för butiken.

1253
01:14:06,160 --> 01:14:09,240
Men det är en del av simulatorn. Riktigt coolt. Mycket lätt att göra det.

1254
01:14:09,240 --> 01:14:11,480
Du kan även använda funktioner som att vrida det också.

1255
01:14:11,480 --> 01:14:15,650
Jag kan klicka på knappen här, har det roterar, se vad någon skulle ha som en upplevelse

1256
01:14:15,650 --> 01:14:20,970
roterande deras skiffer, deras tablet, och med hjälp av din ansökan med det.

1257
01:14:20,970 --> 01:14:25,060
Det finns en del andra saker också som beröring emulering och en del andra saker,

1258
01:14:25,060 --> 01:14:27,210
inställning GPS.

1259
01:14:27,210 --> 01:14:31,050
Jag kan låtsas att jag är på en annan plats och se vad min ansökan gör

1260
01:14:31,050 --> 01:14:34,690
när jag låtsas att jag är tillbaka i Seattle eller något.

1261
01:14:34,690 --> 01:14:41,970
Men det är en riktigt användbar funktion, och det är byggt i både Visual Studio och Blend.

1262
01:14:41,970 --> 01:14:44,460
Ja. Din fråga.

1263
01:14:44,460 --> 01:14:48,530
>> [Elev] Om du skriver ett spel, inte Visual Studio har något stöd för animering?

1264
01:14:48,530 --> 01:14:55,550
Yeah. Frågan är runt animering stöd, framför allt med spel.

1265
01:14:55,550 --> 01:14:58,380
Det beror på. [Småskrattar]

1266
01:14:58,380 --> 01:15:06,870
Med JavaScript-Jag kommer att säga att det är nog mindre stöd än det finns på XAML sidan,

1267
01:15:06,870 --> 01:15:11,430
som har tidslinjer, har storyboards och saker som är byggda i.

1268
01:15:11,430 --> 01:15:18,710
För animeringar på JavaScript-program, jag vet inte hur mycket av ett svar jag vill ge dig.

1269
01:15:18,710 --> 01:15:25,110
Jag har resurser på min blogg som går igenom en hel del alternativ för både fysik animationer,

1270
01:15:25,110 --> 01:15:29,280
alternativ för JavaScript-orienterade spel på Windows 8.

1271
01:15:29,280 --> 01:15:31,300
Jag hänvisar till dem.

1272
01:15:31,300 --> 01:15:34,300
I grund och botten, det finns så många val.

1273
01:15:34,300 --> 01:15:37,770
Anledningen till att jag tvekar är att det finns så många alternativ för att göra animationer med JavaScript.

1274
01:15:37,770 --> 01:15:44,280
Det kan vara CSS, den kunde Tote-baserade, kan det vara bara grundläggande DOM-animationer,

1275
01:15:44,280 --> 01:15:47,470
det kan vara en massa olika saker, så det är beroende på ditt val.

1276
01:15:47,470 --> 01:15:55,790
Om du väljer att använda något som Create.js eller lime eller andra typer av ramar -

1277
01:15:55,790 --> 01:15:59,150
Tja, jag är inte ens säker på att du kommer att kunna använda en högre ram slut

1278
01:15:59,150 --> 01:16:01,370
gillar Impact eller Construct.

1279
01:16:01,370 --> 01:16:07,000
Det tenderar att generera mer kod än du kanske tänka om från början.

1280
01:16:07,000 --> 01:16:11,730
Men i sådana fall kan du fortfarande använda en simulator, som du kan använda miljöer,

1281
01:16:11,730 --> 01:16:17,480
och jag brukar bara använda denna miljö för min testplattform i de fall

1282
01:16:17,480 --> 01:16:19,930
som jag utvecklar spel.

1283
01:16:19,930 --> 01:16:22,110
Jag har varit bra, särskilt med Canvas animationer,

1284
01:16:22,110 --> 01:16:23,850
som förmodligen är den vanligaste sak.

1285
01:16:23,850 --> 01:16:27,360
Det bästa du kommer att förmodligen hitta är de dev verktygen i webbläsaren

1286
01:16:27,360 --> 01:16:30,160
och dev verktygen i Visual Studio.

1287
01:16:30,160 --> 01:16:34,610
Typ av en slingrande svar där, men förhoppningsvis jag fick ditt svar. Ja. Du.

1288
01:16:34,610 --> 01:16:36,470
>> [Elev] Vilka är alternativen för datalagring för Windows 8 appar?

1289
01:16:36,470 --> 01:16:41,100
Vilka alternativ för datalagring för Windows 8 program, Windows Store apps?

1290
01:16:41,100 --> 01:16:46,790
Dina alternativ verkligen är varje program får en egen pool av lokal lagring

1291
01:16:46,790 --> 01:16:52,150
för inställningar och för uppgifter, men det är också löjligt enkel att använda roaming lagring,

1292
01:16:52,150 --> 01:16:54,920
att använda molnbaserad lagring. Det är gratis.

1293
01:16:54,920 --> 01:16:58,250
Vad som händer är att du i princip välja en annan klass och du säger,

1294
01:16:58,250 --> 01:17:03,370
"Roaming Inställningar, Spara, denna uppsättning av innehåll,"

1295
01:17:03,370 --> 01:17:06,050
och deras Microsoft-konto, oavsett vad de har loggat in som,

1296
01:17:06,050 --> 01:17:08,620
kommer att vara nyckeln till roaming informationen runt.

1297
01:17:08,620 --> 01:17:13,790
Så om jag använder ditt spel på min laptop och jag loggar in med samma konto

1298
01:17:13,790 --> 01:17:18,900
och jag spelar spelet på en yta eller en tablett,

1299
01:17:18,900 --> 01:17:23,610
som automatiskt strövar den inställningen och data mellan dessa maskiner.

1300
01:17:23,610 --> 01:17:27,550
Det är en standard sak. Det är bra för vissa mängder data.

1301
01:17:27,550 --> 01:17:30,220
Du skulle inte sätta en enorm databas till dem.

1302
01:17:30,220 --> 01:17:35,350
För att du behöver gå till andra typer av lösningar, som en värd databas i molnet,

1303
01:17:35,350 --> 01:17:36,690
sånt.

1304
01:17:36,690 --> 01:17:39,840
Det finns några andra samhälls alternativ runt andra typer av datatekniker.

1305
01:17:39,840 --> 01:17:42,920
Jag har sett några SQLite alternativ i samhället runt där också.

1306
01:17:42,920 --> 01:17:46,690
Så mer och mer växer fram, men dessa är de primära saker som du skulle titta mot

1307
01:17:46,690 --> 01:17:49,430
för ett spel eller en app.

1308
01:17:49,430 --> 01:17:50,610
Och du hade en fråga i ryggen också.

1309
01:17:50,610 --> 01:18:02,390
>> [Elev] När det gäller nätverket [ohörbart] uppladdning eller nedladdning av filer [ohörbart]

1310
01:18:02,390 --> 01:18:04,870
[Bowen] Är din fråga hur kan du se det, eller hur kan du felsöka den och testa den?

1311
01:18:04,870 --> 01:18:10,630
[Elev] Hur kan du felsöka det [ohörbart]

1312
01:18:10,630 --> 01:18:12,670
Ursäkta. Jag kan inte höra allt.

1313
01:18:12,670 --> 01:18:16,480
[Elev] Hur får man det bugg testas och även [ohörbart]

1314
01:18:16,480 --> 01:18:17,490
Bra. Bra.

1315
01:18:17,490 --> 01:18:21,860
Hur arbetar ni med nätverk? Hur kan du se vad som händer?

1316
01:18:21,860 --> 01:18:23,620
Det finns många olika svar på den här,

1317
01:18:23,620 --> 01:18:26,420
men låt mig visa dig förmodligen den enklaste saker här.

1318
01:18:26,420 --> 01:18:29,350
Låt mig bli av simulatorn för en sekund.

1319
01:18:29,350 --> 01:18:31,740
Bara ett par felsökningsalternativ för nätverk.

1320
01:18:31,740 --> 01:18:36,070
Det finns en fullständig nätverksstacken bakas direkt i både WinRT nivå och från WinJS,

1321
01:18:36,070 --> 01:18:42,810
så du kan lätt göra XHR, samtal AJAX typ från ditt spel eller ett program för att göra det.

1322
01:18:42,810 --> 01:18:47,250
I första hand brukar jag använda 2 saker.

1323
01:18:47,250 --> 01:18:53,660
Jag använder den faktiska dev verktyg själva, som har en nätverksstacken bakas in i dem.

1324
01:18:53,660 --> 01:18:55,870
Låt mig visa dig Windows hemsida.

1325
01:18:55,870 --> 01:19:02,730
Jag kan ta upp detta, och det finns faktiskt en nätverksproxy bakas in i dessa verktyg här.

1326
01:19:02,730 --> 01:19:08,390
Så jag kan göra det här, jag kan uppdatera sidan, och det kommer att visa mig alla interaktioner,

1327
01:19:08,390 --> 01:19:14,550
inklusive AJAX kräver den sessionen, för att begäran varaktighet.

1328
01:19:14,550 --> 01:19:17,600
Detta är användbart. Det kommer att vara mycket användbart för webbläsarbaserade applikationer.

1329
01:19:17,600 --> 01:19:20,470
För andra typer av program, inklusive Windows Store apps,

1330
01:19:20,470 --> 01:19:23,970
Jag använder ett verktyg som heter Fiddler.

1331
01:19:23,970 --> 01:19:29,650
Du kommer att få ett spel som svar. [Småskrattar]

1332
01:19:29,650 --> 01:19:32,750
Fiddler är en enkel proxy. Jag tror att jag kan visa det för er.

1333
01:19:32,750 --> 01:19:40,190
Det är bara GetFiddler.com, som, intressant nog, jag spåra min nätverksstacken

1334
01:19:40,190 --> 01:19:41,740
går till GetFiddler.

1335
01:19:41,740 --> 01:19:45,700
Men hur som helst, har Fiddler skrivits av en av PM på IE laget,

1336
01:19:45,700 --> 01:19:48,290
så han vet vad han gör.

1337
01:19:48,290 --> 01:19:52,630
Detta är en bra proxy som du kan använda för felsökning nätverkstrafik.

1338
01:19:52,630 --> 01:19:55,730
Jag skulle rekommendera det. Fråga där borta också.

1339
01:19:55,730 --> 01:19:58,050
>> [Elev] Finns det ett enkelt sätt att integrera främmande språk ingång,

1340
01:19:58,050 --> 01:20:00,810
som japanska eller kinesiska, i Windows-program?

1341
01:20:00,810 --> 01:20:03,240
Jag kan inte säga att jag har gjort för mycket av det själv, men det är bakat i.

1342
01:20:03,240 --> 01:20:08,470
Det finns alternativ för naturligtvis avger din ansökan - Jag är ledsen, det gjorde jag inte säga i frågan -

1343
01:20:08,470 --> 01:20:11,100
alternativ runt globalisering, lokalisering av innehåll,

1344
01:20:11,100 --> 01:20:14,320
inklusive saker som att kunna sälja på olika marknader

1345
01:20:14,320 --> 01:20:19,190
och rikta den versionen av programmet för de enskilda språk

1346
01:20:19,190 --> 01:20:21,080
eller kulturer eller saker. Absolut inbyggd

1347
01:20:21,080 --> 01:20:22,980
Vi har haft stöd för det för evigt,

1348
01:20:22,980 --> 01:20:26,630
och som bär framåt i dina alternativ för Windows Store.

1349
01:20:26,630 --> 01:20:30,450
Du kan göra det i själva butiken, sälja på olika marknader,

1350
01:20:30,450 --> 01:20:34,050
du kan göra det i ansökan och också med hjälp av resurser för att definiera,

1351
01:20:34,050 --> 01:20:42,220
"Om jag är utvecklat för denna kultur, sedan använda sådana avvikelser för min textinnehåll

1352
01:20:42,220 --> 01:20:44,510
"Eller använda en höger till vänster-läsare."

1353
01:20:44,510 --> 01:20:51,290
De är alla en del av standard WinJS och WinRT API: er. Bra fråga.

1354
01:20:51,290 --> 01:20:54,770
>> Hur gör vi? Några andra?

1355
01:20:54,770 --> 01:20:58,850
Och om någon på video har frågor, jag cbowen @ microsoft,

1356
01:20:58,850 --> 01:21:02,790
så jag är glad att ta någon av dina frågor från framtiden.

1357
01:21:02,790 --> 01:21:05,690
Mycket - Från framtiden, framtids [härmar echo].

1358
01:21:05,690 --> 01:21:09,140
Så här är jag. Låt mig lägga tillbaka min kontakt här.

1359
01:21:09,140 --> 01:21:11,840
Så bara skicka mig ett meddelande, cbowen @ microsoft,

1360
01:21:11,840 --> 01:21:15,190
och jag återkommer till dig så fort jag kan.

1361
01:21:15,190 --> 01:21:19,010
>> Något annat som du undrar? Är vi bra?

1362
01:21:19,010 --> 01:21:24,050
Bra. Okej. Tack alla så mycket. Jag uppskattar det. [Applåder]

1363
01:21:24,800 --> 01:21:27,000
>> [CS50.TV]