1
00:00:00,000 --> 00:00:02,420
[Powered by Google Translate] [Seminar - Windows 8 - App / Game Development 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
[Dette er CS50. - CS50.TV]

4
00:00:07,350 --> 00:00:10,290
>> Hej, alle sammen. Mit navn er Edwin Guarin. Dette er Chris Bowen.

5
00:00:10,290 --> 00:00:12,310
Jeg vil lade ham præsentere sig selv i et sekund.

6
00:00:12,310 --> 00:00:14,100
Jeg ønsker blot at gøre en hurtig meddelelse.

7
00:00:14,100 --> 00:00:18,340
Først og fremmest, alt du CS50 studerende får Windows 8 gratis.

8
00:00:18,340 --> 00:00:23,150
Så hvis du tænker på rent faktisk at bruge det til din endelige projekt, er det dit.

9
00:00:23,150 --> 00:00:25,740
Nate vil sende en e-mail senere for at få instruktioner.

10
00:00:25,740 --> 00:00:32,850
Den anden ting er, hvis du beslutter dig for at skrive en Windows 8 app til din CS50 afsluttende projekt,

11
00:00:32,850 --> 00:00:35,870
vi kommer til at gøre nogle foræring: en Xbox,

12
00:00:35,870 --> 00:00:38,870
vi måske være i stand til at give en skifer væk, den slags.

13
00:00:38,870 --> 00:00:42,460
Så hvis der er noget der holder dig tilbage, lad Chris eller jeg kender

14
00:00:42,460 --> 00:00:45,010
hvordan vi kan hjælpe dig med at opbygge noget virkelig cool.

15
00:00:45,010 --> 00:00:48,580
Så tak igen for at komme i dag, og jeg vil aflevere det til Chris.

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

17
00:00:51,000 --> 00:00:52,740
Tak, alle, for at tilslutte os i dag.

18
00:00:52,740 --> 00:00:55,800
Jeg er Chris Bowen. Jeg er en af ​​Edwins kolleger her i det nordøstlige.

19
00:00:55,800 --> 00:00:58,310
Jeg ville bare bruge en lille smule tid med dig at tale om

20
00:00:58,310 --> 00:01:03,730
hvordan man laver en Windows Store ansøgning med HTML5, JavaScript og CSS

21
00:01:03,730 --> 00:01:07,310
og art få eventuelle spørgsmål, du måtte have om det svarede til dig

22
00:01:07,310 --> 00:01:12,920
som du søger mod tænker måske bruge det til en CS50 finalerne mulighed.

23
00:01:12,920 --> 00:01:14,980
>> Det er sagt, vil vi bare dykke ret i.

24
00:01:14,980 --> 00:01:17,190
Jeg vil gå over til dias herovre.

25
00:01:17,190 --> 00:01:19,440
Hvis du har spørgsmål, er du velkommen til at sende mig en mail.

26
00:01:19,440 --> 00:01:23,460
Jeg cbowen@microsoft.com, og der er min blog og min Twitter.

27
00:01:23,460 --> 00:01:26,330
Men du ønsker at komme i kontakt med mig, det er fint.

28
00:01:26,330 --> 00:01:30,110
Jeg har fået omkring en time af ting, og jeg ønsker at få dine spørgsmål på vejen,

29
00:01:30,110 --> 00:01:33,720
så du skal ikke være genert om at have spørgsmål under dette.

30
00:01:33,720 --> 00:01:36,470
De kan ikke se, hvem der stiller spørgsmålene om registrering,

31
00:01:36,470 --> 00:01:39,090
så du vil være så anonym som du ønsker at være.

32
00:01:39,090 --> 00:01:42,780
>> Lad mig dykke ret i, bare give dig en hurtig introduktion til Windows 8,

33
00:01:42,780 --> 00:01:47,400
og vise dig et par af de ting om Windows Store apps som du måske overveje

34
00:01:47,400 --> 00:01:49,530
som du tænker på at udvikle en applikation.

35
00:01:49,530 --> 00:01:52,660
Vi kigger på Windows 8. Vi har været ude for et par uger nu.

36
00:01:52,660 --> 00:01:55,810
En masse af stærk vedtagelse derude allerede.

37
00:01:55,810 --> 00:01:59,800
Du har måske allerede set overfladen maskiner, som vi har så godt.

38
00:01:59,800 --> 00:02:03,730
Der er en herovre faktisk kan du tage et kig på, hvis du er her i person.

39
00:02:03,730 --> 00:02:07,530
Jeg virkelig ønsker at tale med dig, vise dig rundt en lille smule om Windows 8.

40
00:02:07,530 --> 00:02:10,759
Ideen med Windows 8, det virkelig betyder at fremsætte alle de ting du ved om Windows

41
00:02:10,759 --> 00:02:16,840
ind i nogle nye oplevelser - især ting som på overfladen maskine med touch,

42
00:02:16,840 --> 00:02:20,000
disse slags flere mobile enheder, der nu er på markedet,

43
00:02:20,000 --> 00:02:22,360
men det er også Windows på sin kerne.

44
00:02:22,360 --> 00:02:25,850
Så det betyder, at du kan installere det virkelig på noget, der kører Windows 7,

45
00:02:25,850 --> 00:02:30,770
fra din største triple SLI gaming rig ned til din bærbare computer

46
00:02:30,770 --> 00:02:36,200
og til din skinnende nye andre enheder, som du måske hente i dag.

47
00:02:36,200 --> 00:02:38,450
De vil køre Windows 8.

48
00:02:38,450 --> 00:02:40,530
Jeg vil vise dig rundt bare en lille smule,

49
00:02:40,530 --> 00:02:44,670
og alle de oplevelser, som du vil se her, er ting, som du kan oprette.

50
00:02:44,670 --> 00:02:47,760
Ideen er, om det er touch, mus, tastatur,

51
00:02:47,760 --> 00:02:51,870
hvad enheden er, at du kører din ansøgning på, det kommer til at køre godt.

52
00:02:51,870 --> 00:02:55,180
Windows 8 vil hjælpe med alle disse scenarier.

53
00:02:55,180 --> 00:02:59,600
>> Disse slides bort, lad os bare få ret i at tage et kig rundt her.

54
00:02:59,600 --> 00:03:03,270
Lad mig vise dig rundt i mit hjem skærmen. Dette er min startskærmen.

55
00:03:03,270 --> 00:03:05,810
Jeg vil bare give dig en lille smule af en tur her.

56
00:03:05,810 --> 00:03:09,610
Jeg er på et ikke-touch-maskinen, så meget som jeg ønsker at røre ved min laptop skærm,

57
00:03:09,610 --> 00:03:13,400
vil det ikke gøre en ting, så jeg vil bare rulle rundt her lidt og vise dig.

58
00:03:13,400 --> 00:03:17,950
Nogle ting du måske bemærke er det faktum, at disse såkaldte levende fliser

59
00:03:17,950 --> 00:03:21,470
faktisk kan animere, og de kan give oplysninger til dig -

60
00:03:21,470 --> 00:03:24,750
måske opdateringer på statistikken for et spil

61
00:03:24,750 --> 00:03:30,970
eller vise dig nyheder fra nogle af de tidligere apps, der er her på venstre side.

62
00:03:30,970 --> 00:03:35,350
Der vi går. Jeg er sikker på, det er kun positivt og fantastisk god nyhed.

63
00:03:35,350 --> 00:03:38,450
Du kan se her er det virkelig kalde din opmærksomhed tilbage til app, sagde

64
00:03:38,450 --> 00:03:43,010
"Hey, der er noget nyt her. Tag et kig. Kom tilbage i og se, hvad der er nyt for dig."

65
00:03:43,010 --> 00:03:45,320
Det kaldes levende fliser, og du kan gøre meddelelser

66
00:03:45,320 --> 00:03:47,070
enten lige fra selve programmet

67
00:03:47,070 --> 00:03:52,220
eller hvis du tager et kig nærmere, vil du finde ud af, hvordan man skriver en ekstern tjeneste

68
00:03:52,220 --> 00:03:54,340
der rent faktisk kan skubbe oplysninger til fliser,

69
00:03:54,340 --> 00:03:56,520
hvilket er, hvad der sker med disse nyheder apps.

70
00:03:56,520 --> 00:04:00,080
De er rent faktisk at få nyheder fra skyen og opdatering flisen lige der

71
00:04:00,080 --> 00:04:03,710
så folk ved, at der er en grund til at åbne programmet og tage et kig

72
00:04:03,710 --> 00:04:06,950
uanset på hvilket de seneste nyheder er i nogen af ​​disse

73
00:04:06,950 --> 00:04:10,060
eller hvis der er nye opskrifter eller en ny high score til at slå

74
00:04:10,060 --> 00:04:13,560
eller en ven at spille eller hvad på disse applikationer.

75
00:04:13,560 --> 00:04:15,550
Det er noget at lokke dig igen

76
00:04:15,550 --> 00:04:18,640
Så det er den levende fliser, og det kunne være en person, kunne det være en hjemmeside så godt.

77
00:04:18,640 --> 00:04:20,790
Normalt er det et program.

78
00:04:20,790 --> 00:04:25,320
>> Stort set alle disse ting, som jeg har her kom fra Windows Store. Jeg vil starte der.

79
00:04:25,320 --> 00:04:27,890
Det er en af ​​de applikationer, som du får som standard

80
00:04:27,890 --> 00:04:30,350
på enhver maskine, der kører Windows 8.

81
00:04:30,350 --> 00:04:33,040
Du kan komme her for at finde noget, du gerne vil have,

82
00:04:33,040 --> 00:04:37,240
fra ting, der er fremhævet på spil, som jeg ikke har set før.

83
00:04:37,240 --> 00:04:39,440
Oh, wow, vi har fået en ny pinball her.

84
00:04:39,440 --> 00:04:41,580
Du kan installere disse her fra butikken,

85
00:04:41,580 --> 00:04:43,420
og vi vil tale om, hvordan man kan udvikle disse.

86
00:04:43,420 --> 00:04:45,670
Du har en masse valg i, hvordan du opretter dem.

87
00:04:45,670 --> 00:04:49,020
Vi fokusere på JavaScript-historie med HTML og CSS,

88
00:04:49,020 --> 00:04:52,790
men til brugeren, til køberen af ​​app, det er ligegyldigt, hvad det var skrevet i.

89
00:04:52,790 --> 00:04:54,670
De kan gå videre og arbejde med det.

90
00:04:54,670 --> 00:04:57,870
Jeg fascineret af denne ene, så jeg har brug for at åbne denne op og tage et kig.

91
00:04:57,870 --> 00:05:02,310
Hver app, herunder dem, som du kan indsende og sælge eller give væk gratis,

92
00:05:02,310 --> 00:05:06,240
uanset hvad du ønsker at gøre i butikken, vil få en hjemmeside som denne.

93
00:05:06,240 --> 00:05:10,750
Du kan indsende din ansøgning en flok skærmbilleder - du se nogle her -

94
00:05:10,750 --> 00:05:15,970
oplysninger om programmet, og over tid vil du samle begge ratings -

95
00:05:15,970 --> 00:05:19,020
de er dybest set bare den stjerneklassifikation - og anmeldelser

96
00:05:19,020 --> 00:05:20,690
som giver lidt mere indsigt.

97
00:05:20,690 --> 00:05:24,380
Faktisk, nogen har til at skrive noget, og fortælle dig, hvor fantastisk du er,

98
00:05:24,380 --> 00:05:29,300
og der vil gå ind i din anmeldelser sektion herovre, som jeg ikke har kigget på.

99
00:05:29,300 --> 00:05:33,890
Fantastic. "Vil ikke selv åbne." Hvor stor.

100
00:05:33,890 --> 00:05:39,000
Tja, for de folk, for hvem dette gjorde åbne og køre, synes de at virkelig nyde det. [Griner]

101
00:05:39,000 --> 00:05:43,770
Hold dette i tankerne. Internettet. Alle kan sige, hvad de vil om din ansøgning.

102
00:05:43,770 --> 00:05:45,780
Så sørg for at du laver et stort stykke arbejde med det,

103
00:05:45,780 --> 00:05:49,030
sørg for at du gør det så behageligt for brugeren, som du kan

104
00:05:49,030 --> 00:05:52,720
fordi de er et par klik væk fra at give en bedømmelse,

105
00:05:52,720 --> 00:05:55,870
og der vil akkumulere op til din samlede rating.

106
00:05:55,870 --> 00:05:58,990
Og du ønsker at gøre dit bedste, fordi du kommer til at være op mod andre applikationer.

107
00:05:58,990 --> 00:06:01,830
Der vil være tusindvis af apps allerede i butikken,

108
00:06:01,830 --> 00:06:06,880
og chancerne er, kan der være noget, der gør lignende funktionalitet til, hvad du laver.

109
00:06:06,880 --> 00:06:12,740
Så hvis du virkelig kan skille sig ud fra mængden, der kommer til at være til din fordel, selvfølgelig.

110
00:06:12,740 --> 00:06:15,300
>> Vi vil komme ind i butikken lidt senere.

111
00:06:15,300 --> 00:06:17,090
Jeg virkelig ønsker at fokusere på at skabe apps.

112
00:06:17,090 --> 00:06:20,760
Men den korte version af butikken er verdensomspændende distribution,

113
00:06:20,760 --> 00:06:25,430
det er automatisk en del af Windows 8, folk bare fyre den op og tage et kig på forskellige apps her,

114
00:06:25,430 --> 00:06:29,070
har du Dress-Up Sticker Book og alle former for forskellige apps.

115
00:06:29,070 --> 00:06:33,690
Frisk maling, jeg bruger dette en masse - dårligt, men jeg bruger det meget.

116
00:06:33,690 --> 00:06:36,080
Det viser mig, at jeg allerede ejer det.

117
00:06:36,080 --> 00:06:41,280
Lad mig vise dig noget, jeg ikke har - UVideos Jeg har ikke som helt nye.

118
00:06:41,280 --> 00:06:43,660
Du ser her det er gratis, så du kan installere det lige fra butikken.

119
00:06:43,660 --> 00:06:46,430
Du har valg også. Du kan selvfølgelig give det væk.

120
00:06:46,430 --> 00:06:49,660
Du kan sætte reklamer i app eller spil.

121
00:06:49,660 --> 00:06:54,770
Du kan også oplade for det, og du kan meget nemt give en retssag for ansøgningen samt

122
00:06:54,770 --> 00:06:58,220
så du kan lade folk prøve det i en uge eller hvad du ønsker at gøre.

123
00:06:58,220 --> 00:07:01,540
Det er bare tilpasses gennem portalen. Du behøver ikke skrive noget kode til det.

124
00:07:01,540 --> 00:07:03,990
Så du siger, "Du kan bruge dette for en uge og derefter you got at købe det,"

125
00:07:03,990 --> 00:07:07,130
eller du kan gøre ting som, "du kunne spille de første 3 niveauer i dette spil

126
00:07:07,130 --> 00:07:09,820
"Og så er du nødt til at købe for at få adgang til resten."

127
00:07:09,820 --> 00:07:12,310
Du kan endda gøre in-app køb så godt, så du kan sige,

128
00:07:12,310 --> 00:07:17,880
"Vi har fået yderligere eventyr eller sæt af grafik eller ting, der er låst -

129
00:07:17,880 --> 00:07:21,430
"Flere opskrifter, der er låst -. Hvis du køber disse udvidede sæt"

130
00:07:21,430 --> 00:07:24,260
Og du kan gøre det hele inden app eller et spil i sig selv.

131
00:07:24,260 --> 00:07:26,070
Så helt op til dig, dit valg.

132
00:07:26,070 --> 00:07:28,070
Der er en masse ting, du kan gøre i butikken,

133
00:07:28,070 --> 00:07:31,660
og så dybest set du indsender det til en certificering kanal.

134
00:07:31,660 --> 00:07:35,380
Vi kan tale om, at en lille smule senere, men det er målet.

135
00:07:35,380 --> 00:07:40,410
Du ønsker at få din app på verdensplan synlighed i butikken her.

136
00:07:40,410 --> 00:07:44,170
>> Tilbage på skærmen Start her, vil jeg gerne vise dig rundt en lille smule mere.

137
00:07:44,170 --> 00:07:50,580
Hvis jeg starter disse apps, så lad mig give dig et eksempel på nogle cross-app funktionalitet her.

138
00:07:50,580 --> 00:07:53,070
For at gøre det, vil jeg starte frisk maling.

139
00:07:53,070 --> 00:07:55,550
En ting du kan se her, er hver eneste bit af skærmen,

140
00:07:55,550 --> 00:07:58,040
alle pixels på skærmen, skal du gå til din app.

141
00:07:58,040 --> 00:08:01,990
Borte er de dage, hvor du har disse grænser omkring vinduer

142
00:08:01,990 --> 00:08:05,120
med masser af knapper, der er altid der tager plads hele tiden.

143
00:08:05,120 --> 00:08:09,430
Nu kan du virkelig ønsker at komme væk fra det og bare have dit indhold være i fokus.

144
00:08:09,430 --> 00:08:13,710
Vi kan gøre ting med Windows ved at få adgang til andre former for menuer.

145
00:08:13,710 --> 00:08:16,840
En af dem er faktisk, hvad der kaldes charme bar,

146
00:08:16,840 --> 00:08:18,870
og det kommer ud fra siden af ​​skærmen.

147
00:08:18,870 --> 00:08:21,270
Du kan faktisk bladre fra side, hvis du har en touch skærm,

148
00:08:21,270 --> 00:08:24,840
kan du højreklikke, hvis du har en mus, der er en tastaturgenvej til det,

149
00:08:24,840 --> 00:08:29,490
der er altid mere end én måde at gøre noget i miljøet her.

150
00:08:29,490 --> 00:08:31,680
Det bringer en række ting, du kan gøre.

151
00:08:31,680 --> 00:08:33,870
Det mest oplagte er, at du kan gå tilbage til startskærmen

152
00:08:33,870 --> 00:08:36,780
men de andre 4 er det, der kaldes charme.

153
00:08:36,780 --> 00:08:41,059
De er kontrakter, som du kan sætte ind som en app udvikler. De er temmelig cool.

154
00:08:41,059 --> 00:08:43,340
Søg, jeg er sikker på, det er noget, du vil gøre,

155
00:08:43,340 --> 00:08:44,950
deling jeg vil vise dig i en anden,

156
00:08:44,950 --> 00:08:48,450
og Enheder og indstillinger, disse er alle ting, som din app kan indsættes i

157
00:08:48,450 --> 00:08:51,960
at udnytte Windows, for at sige, "Jeg har gjort min del

158
00:08:51,960 --> 00:08:54,700
"Og jeg vil have Windows til at støtte nogle andre funktioner,

159
00:08:54,700 --> 00:08:56,750
", Og jeg ønsker ikke at skrive en masse kode til at få til at ske."

160
00:08:56,750 --> 00:08:59,480
Det er virkelig en fordel ved at bruge disse funktioner.

161
00:08:59,480 --> 00:09:01,340
Lad mig vise dig en.

162
00:09:01,340 --> 00:09:05,170
For at gøre det, vil jeg lave en ny maleri.

163
00:09:05,170 --> 00:09:08,240
Jeg talte også om at bruge hver pixel til din app.

164
00:09:08,240 --> 00:09:11,850
Som standard er det, hvad malingen app ser ud, når du bruger den.

165
00:09:11,850 --> 00:09:14,960
Det er virkelig bare om hvad du tegner, dit indhold.

166
00:09:14,960 --> 00:09:20,850
Jeg kunne gøre forfærdelige ting her. Hvad skal jeg tegne? Det ved jeg ikke.

167
00:09:20,850 --> 00:09:23,110
Skriblerier? Tiders. Jeg kan gøre skriblerier. Fantastic.

168
00:09:23,110 --> 00:09:25,130
En kalkun? [Griner]

169
00:09:25,130 --> 00:09:28,500
Dette er den mest abstrakte kalkun du vil se.

170
00:09:28,500 --> 00:09:31,780
Jeg kan også bringe op, hvad der kaldes app bar,

171
00:09:31,780 --> 00:09:33,850
og det er virkelig en af ​​de vigtigste måder, du kan bruge

172
00:09:33,850 --> 00:09:37,210
at skjule væk alle de ting, der kunne have været på din app eller spil før

173
00:09:37,210 --> 00:09:39,570
bare optage plads hele tiden.

174
00:09:39,570 --> 00:09:43,270
Så nu kan du sætte det op her, og det er virkelig en af ​​de mere smukke erfaringer

175
00:09:43,270 --> 00:09:46,380
med app bar, jeg har set.

176
00:09:46,380 --> 00:09:48,800
Sæt valg her for at vælge forskellige farver.

177
00:09:48,800 --> 00:09:54,310
Vi ønskede en kalkun, så vi vil sætte nogle brune her, begynder at blande i et par farver.

178
00:09:54,310 --> 00:09:58,790
Vi tager en mellemliggende farve her og derefter komme tilbage her.

179
00:09:58,790 --> 00:10:02,990
Du kan begynde at tegne. Der er din kalkun. Fantastic.

180
00:10:02,990 --> 00:10:07,660
Jeg kan ikke tegne til at begynde med, men at gøre det med en touchpad foran et publikum er endnu bedre.

181
00:10:07,660 --> 00:10:09,640
Det er awesome.

182
00:10:09,640 --> 00:10:13,030
Ideen er dog, alt det, jeg holder af, er lige her på overfladen.

183
00:10:13,030 --> 00:10:17,060
Lad os sige, jeg er så tilfreds med dette, at jeg har fået til at dele det med nogen.

184
00:10:17,060 --> 00:10:19,680
Normalt, hvad du ville gøre med andre versioner af Windows,

185
00:10:19,680 --> 00:10:22,900
ville du måske tage et skærmbillede, ville du gøre nogle copy-paste af din tekst

186
00:10:22,900 --> 00:10:24,950
eller ting som at du vil dele ud,

187
00:10:24,950 --> 00:10:27,260
og derefter gå ud og åbne et andet program og sætte det ind i det.

188
00:10:27,260 --> 00:10:28,630
Her behøver du ikke at gøre det.

189
00:10:28,630 --> 00:10:32,400
Du kan faktisk bringe ud af charms bar og sige, "Jeg ønsker at dele denne."

190
00:10:32,400 --> 00:10:35,000
På dette punkt er det kommer til at vise dig alle de apps

191
00:10:35,000 --> 00:10:38,080
at vide, hvordan man arbejder med, hvad der bliver delt.

192
00:10:38,080 --> 00:10:41,590
I dette tilfælde er det et billede, så det kommer til at sige, "Jeg kan se du har et billede."

193
00:10:41,590 --> 00:10:45,590
"Ønsker du at dele det?" Du kan se, jeg e-mail mig kram hele tiden.

194
00:10:45,590 --> 00:10:49,420
Det erkender det, og det tilbyder mig, at som en genvej,

195
00:10:49,420 --> 00:10:53,270
men det er også at vise mig hver app, der ved, hvordan man skal behandle med at tage et billede

196
00:10:53,270 --> 00:10:55,520
og gøre noget med det.

197
00:10:55,520 --> 00:10:57,890
Disse har alle oplyst til Windows, at de kan gøre det.

198
00:10:57,890 --> 00:10:59,240
På dette tidspunkt er Windows.

199
00:10:59,240 --> 00:11:01,680
Brugeren blot vælger, hvad de vil gøre med det.

200
00:11:01,680 --> 00:11:06,610
Jeg vil gøre mit sædvanlige af PuzzleTouch. Du kan se, jeg har skabt alle former for gåder over tid.

201
00:11:06,610 --> 00:11:11,790
Jeg tager PuzzleTouch og sige, "Jeg ønsker at dele denne fantastiske skabelse med PuzzleTouch".

202
00:11:11,790 --> 00:11:16,670
Det kommer til at gå videre og sige, "Great. Du ønsker at dele denne? Fantastic".

203
00:11:16,670 --> 00:11:19,260
"Ønsker du at lave et puslespil, der er let, mellemliggende, uanset hvad?"

204
00:11:19,260 --> 00:11:20,800
Jeg vil gøre en mellemliggende en her.

205
00:11:20,800 --> 00:11:24,890
Det gør puslespillet. Det kommer til at være en forfærdelig gåde, fordi det er for det meste tomt.

206
00:11:24,890 --> 00:11:28,100
Men det er klar, og det er faktisk tilbage i det andet program.

207
00:11:28,100 --> 00:11:32,360
Hvis jeg kommer ud her, kan jeg søge efter det og starte det.

208
00:11:32,360 --> 00:11:38,100
Nu, hvis vi ruller i løbet af bare en lille smule her, bør vi se min skabelse eller andet sted.

209
00:11:38,100 --> 00:11:42,930
Hvor blev jeg gå? Hvilken slags puslespil gjorde jeg gøre? Har jeg gøre det nemt?

210
00:11:42,930 --> 00:11:46,110
Åh, der er det, lige der.

211
00:11:46,110 --> 00:11:49,550
[Griner] Det er let genkendelig kalkun puslespil, der er her.

212
00:11:49,550 --> 00:11:52,360
Men det, jeg ønsker at påpege over for dig, cool ting her

213
00:11:52,360 --> 00:11:54,710
er de apps ikke vidste noget om hinanden.

214
00:11:54,710 --> 00:11:58,740
De sagde blot: "Jeg har fået et billede til at dele, og jeg ved, hvordan man skal håndtere billeder."

215
00:11:58,740 --> 00:12:01,420
Og du som udvikler, behøver du ikke at skrive, at kode.

216
00:12:01,420 --> 00:12:05,350
Når nogen spørger mig at dele, vil jeg sætte nogle data ind i denne lille datastruktur

217
00:12:05,350 --> 00:12:06,740
og jeg er færdig.

218
00:12:06,740 --> 00:12:10,990
Den anden app overtager, gør sine ting, og det er i slutningen af ​​erfaringsudveksling.

219
00:12:10,990 --> 00:12:14,550
Det er bare én ting, du kan gøre - virkelig, virkelig kraftfuld -

220
00:12:14,550 --> 00:12:17,570
og det kommer til at være en af ​​de ting, der virkelig kan hjælpe med at differentiere din app

221
00:12:17,570 --> 00:12:20,090
og også dit spil også i butikken.

222
00:12:20,090 --> 00:12:22,220
Folk vil være i stand til at sige: "Dette er virkelig nyttige."

223
00:12:22,220 --> 00:12:25,430
"Jeg bruger dette puslespil skaberen hele tiden. Det er fantastisk."

224
00:12:25,430 --> 00:12:30,490
>> Det er nok af en kort oversigt over, hvad der foregår her.

225
00:12:30,490 --> 00:12:33,670
Der er et par andre funktioner også, at måske vil vi fremhæve, når vi går gennem kode.

226
00:12:33,670 --> 00:12:37,710
Men jeg ønsker at dykke ned dias, og at gøre det, vil jeg gå til desktop,

227
00:12:37,710 --> 00:12:40,940
som selv er en anden live flise her.

228
00:12:40,940 --> 00:12:43,840
Jeg kan gå ind i dette, og sikker nok, jeg er på mine dias,

229
00:12:43,840 --> 00:12:46,320
men lad mig vise dig faktisk, hvor vi er.

230
00:12:46,320 --> 00:12:48,460
Vi er faktisk i Desktop mode.

231
00:12:48,460 --> 00:12:52,580
Dette er virkelig, hvor det, jeg sagde før om Windows fremførsel

232
00:12:52,580 --> 00:12:54,850
til nye oplevelser viser sig.

233
00:12:54,850 --> 00:12:56,450
Dette er den Windows du kender.

234
00:12:56,450 --> 00:12:59,730
Windows-programmer kaldes desktop apps. De kører her.

235
00:12:59,730 --> 00:13:02,730
Hvis du har eksisterende apps, og du ønsker at køre dem på Windows 8,

236
00:13:02,730 --> 00:13:04,710
du kan absolut gøre det.

237
00:13:04,710 --> 00:13:07,590
Disse er ikke de samme ting som butikken apps, der er herovre,

238
00:13:07,590 --> 00:13:12,240
som frisk maling, og disse NBC News apps og ting som. De vil komme fra butikken.

239
00:13:12,240 --> 00:13:14,450
De kan sætte ind i nogle af de funktioner, jeg viser dig

240
00:13:14,450 --> 00:13:16,620
og andre, som jeg ikke har vist dig endnu.

241
00:13:16,620 --> 00:13:21,460
Men bare holde det i tankerne. Vi har støtte til begge disse ting så godt.

242
00:13:21,460 --> 00:13:27,000
Undskyld. Er der noget der ikke vises på skærmen? Jeg har mistet det fuldstændigt. Det er underligt.

243
00:13:29,000 --> 00:13:31,000
Okay. Tak for at pege det ud.

244
00:13:31,000 --> 00:13:34,770
Hvad du ikke har set i et stykke tid er min viser dig, at skrivebordet er her.

245
00:13:34,770 --> 00:13:37,540
Hvad er den sidste ting, du så? Vidste du se det her?

246
00:13:37,540 --> 00:13:39,490
Dette er skrivebordet. Du ved allerede, hvad det ligner.

247
00:13:39,490 --> 00:13:42,070
Det er noget forfærdeligt usædvanligt.

248
00:13:42,070 --> 00:13:46,940
Det transporterer vores at erfaring frem for dig og lade dig bruge de ting, du har haft.

249
00:13:46,940 --> 00:13:50,460
For eksempel, vil jeg vise dig Visual Studio. Det er en desktop applikation.

250
00:13:50,460 --> 00:13:52,600
Det kommer til at køre i denne tilstand.

251
00:13:52,600 --> 00:13:54,960
Det kommer til at understøtte et mere komplekst miljø

252
00:13:54,960 --> 00:14:01,470
med en masse muligheder og ting som det, så det gør det til en god mulighed, da en desktop app.

253
00:14:01,470 --> 00:14:04,810
>> Når det er sagt, lad os gå til dias til bare en lille smule

254
00:14:04,810 --> 00:14:09,720
og give dig nogle indledende indhold og derefter komme ind faktisk kodning her.

255
00:14:09,720 --> 00:14:14,070
Den gode nyhed er, at jeg har hørt du har været fokus på en masse af CSS og JavaScript, HTML.

256
00:14:14,070 --> 00:14:18,110
Alle disse ting, som du har været at lære carry direkte til at gøre Windows Store apps.

257
00:14:18,110 --> 00:14:22,920
De ting, du har hørt om med anvendelse af CSS selektorer og alle disse ting

258
00:14:22,920 --> 00:14:27,180
er præcis, hvad du gør for at oprette en ansøgning her for butikken.

259
00:14:27,180 --> 00:14:29,640
Vi vil gå gennem disse ting lidt efter lidt.

260
00:14:29,640 --> 00:14:34,130
Dybest set, jeg bygger på de ting, du allerede har taget sig tid til at lære.

261
00:14:34,130 --> 00:14:36,520
Det er den overordnede diagram af de teknologier, som du kan bruge

262
00:14:36,520 --> 00:14:38,790
at lave applikationer til Windows 8.

263
00:14:38,790 --> 00:14:42,840
De ting på højre, desktop apps, er virkelig, hvad vi allerede ved.

264
00:14:42,840 --> 00:14:46,840
Det er ting, der er virkelig Windows 7 verden overført til Windows 8.

265
00:14:46,840 --> 00:14:51,920
Alle disse muligheder fremføre: C #, VB, Win32 form for udvikling.

266
00:14:51,920 --> 00:14:54,450
Store. Intet problem. Den nye ting er på den venstre side.

267
00:14:54,450 --> 00:14:58,220
Det er Windows Store apps, det er når jeg ønsker at få min ansøgning kablet ind Windows 8

268
00:14:58,220 --> 00:15:02,300
hjælp af alle disse funktioner, få det ind i butikken, og få det virkelig cool oplevelse

269
00:15:02,300 --> 00:15:05,260
af Windows Store-programmer.

270
00:15:05,260 --> 00:15:10,350
For at gøre dette, kan du se her, du har fået alle dine valg med XAML, C + +,

271
00:15:10,350 --> 00:15:14,100
C #, VB, kan du gøre DirectX, ting som, ting, der går ud over diaset.

272
00:15:14,100 --> 00:15:18,650
Men for os, vi kommer til at fokusere lige på, at HTML, CSS, og JavaScript

273
00:15:18,650 --> 00:15:22,890
er virkelig en første klasses borger til at gøre applikationer til Windows 8

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

275
00:15:24,960 --> 00:15:27,950
Så det er godt for alle her, og folk ser på video

276
00:15:27,950 --> 00:15:30,760
fordi du bare kan udnytte alle de oplevelser, som du har

277
00:15:30,760 --> 00:15:33,900
og virkelig binde ind i, hvad Windows tilbyder.

278
00:15:33,900 --> 00:15:37,870
Du kommer til at gøre det gennem et sæt af API'er, der bør ikke være nogen overraskelse.

279
00:15:37,870 --> 00:15:39,920
Hver OS har sine egne API'er.

280
00:15:39,920 --> 00:15:43,530
Vi udsætter hvad Windows kan gøre gennem hvad der kaldes WinRT.

281
00:15:43,530 --> 00:15:46,370
Det er et sæt af API'er, der bare gør alt for dig.

282
00:15:46,370 --> 00:15:51,650
Hvis du har brug for at åbne filer, skal du bruge kameraet, geolocation, ting som det,

283
00:15:51,650 --> 00:15:55,700
de går igennem, hvad Windows kan tilbyde dig.

284
00:15:55,700 --> 00:15:59,370
For at få adgang, at vi har nogle mere JavaScript, der kommer til at gøre det endnu nemmere

285
00:15:59,370 --> 00:16:02,510
for dig at gøre det. Vi vil komme til om et øjeblik.

286
00:16:02,510 --> 00:16:04,060
Men for nu, det er dybest set din køreplan.

287
00:16:04,060 --> 00:16:06,770
De ting, du allerede har gjort på toppen af ​​nogle API'er

288
00:16:06,770 --> 00:16:11,280
som hjælper dig med at arbejde med Windows lig butik ca.

289
00:16:11,280 --> 00:16:14,210
Og det er virkelig alt hvad du behøver at vide fra det høje niveau.

290
00:16:14,210 --> 00:16:17,370
>> Vi vil dykke ned i faktisk arbejder med de ting nu.

291
00:16:18,940 --> 00:16:21,950
De ting, du har sikkert allerede set en flok,

292
00:16:21,950 --> 00:16:26,760
med IE9 lidt tilbage, vi introduceret støtte til en masse af de på det tidspunkt,

293
00:16:26,760 --> 00:16:30,340
nyere standarder i nettet, så en masse nye CSS funktioner,

294
00:16:30,340 --> 00:16:34,380
en masse nye HTML, ECMAScript 5, som er virkelig JavaScript.

295
00:16:34,380 --> 00:16:38,090
Så alt for, at bortset fra streng tilstand var i IE9.

296
00:16:38,090 --> 00:16:42,290
Bare et ton af ting med CSS, CSS3, alle i der.

297
00:16:42,290 --> 00:16:45,300
Og alle disse ting viderefører i, hvad vi laver med Windows 8.

298
00:16:45,300 --> 00:16:49,350
Du kan bruge disse ting, og du kan bruge alt, hvad der er nyt i IE10.

299
00:16:49,350 --> 00:16:54,640
Med IE10 vi indfører støtte til alle disse ting så godt.

300
00:16:54,640 --> 00:16:59,340
De er alle hardware-accelereret, så hvis du er på en maskine, der har en vis form for GPU,

301
00:16:59,340 --> 00:17:04,190
der er sandsynligvis temmelig meget hver maskine, som du kunne få i de seneste 8 år,

302
00:17:04,190 --> 00:17:07,609
du vil være i stand til at have hardware-accelereret output,

303
00:17:07,609 --> 00:17:11,770
visuelt output med CSS, Lærred, SVG.

304
00:17:11,770 --> 00:17:14,339
Alle disse ting vil gå gennem hardware acceleration

305
00:17:14,339 --> 00:17:16,060
og være så meget hurtigere og mere effektiv.

306
00:17:16,060 --> 00:17:20,440
Den korte version af alt dette - jeg ikke kommer til at gå igennem hver enkelt ting her -

307
00:17:20,440 --> 00:17:23,200
hvis du ser det på denne liste, hvis du kan gøre det i IE10,

308
00:17:23,200 --> 00:17:25,650
hvis det er en web-app, som du kører, som virker i IE10,

309
00:17:25,650 --> 00:17:28,640
det er noget du kan gøre som en Windows Store app.

310
00:17:28,640 --> 00:17:33,100
Og det er temmelig meget det. Så hvis det virker i IE10, det kommer til at arbejde som en Windows Store app.

311
00:17:33,100 --> 00:17:36,370
Det er på bordet som noget, du kunne bruge.

312
00:17:36,370 --> 00:17:40,510
>> Der er en masse her. Vi har ikke indtil midnat, så jeg kan ikke gennemgå alt her.

313
00:17:40,510 --> 00:17:44,060
Men der er nogle steder, der vil hjælpe dig med at forstå, hvad disse ting kan gøre,

314
00:17:44,060 --> 00:17:45,520
og jeg vil vise dig en af ​​dem i en anden.

315
00:17:45,520 --> 00:17:48,410
Jeg ville bare pege på et par af de vigtigste ting, som du måske kigge på.

316
00:17:48,410 --> 00:17:51,560
Måske har du allerede set nogle af disse i dine studier,

317
00:17:51,560 --> 00:17:56,610
men disse er virkelig nyttige, især med Windows Store apps, fra CSS side.

318
00:17:56,610 --> 00:18:02,420
Så at være i stand til at gøre transformationer og overgange, giver bevægelse med animation -

319
00:18:02,420 --> 00:18:07,010
disse er alle en del af CSS nu, og de er alle støttet af moderne browsere,

320
00:18:07,010 --> 00:18:11,370
og IE10 og IE9 har tilføjet støtte over tid for alle disse ting.

321
00:18:11,370 --> 00:18:15,220
Og så hvorfor skrive det selv, hvorfor gå igennem alt besværet med at gøre disse ting ved hånden

322
00:18:15,220 --> 00:18:19,970
når du kunne bruge en simpel CSS omdanne at skabe en 3D-effekt til din ansøgning?

323
00:18:19,970 --> 00:18:22,740
Store. Det er, hvordan det fungerer.

324
00:18:22,740 --> 00:18:24,530
Jeg kan ikke gøre det sværere end det.

325
00:18:24,530 --> 00:18:28,330
Hvis du ved hvordan man gør det i CSS, du ved hvordan man gør det i Windows Store app.

326
00:18:28,330 --> 00:18:32,080
>> Går ud over, at for layout, ting som selv butikken app,

327
00:18:32,080 --> 00:18:35,350
men går ud over dette, ser på måske en nyhed app, der er at vise dig artikler

328
00:18:35,350 --> 00:18:40,160
eller opskrifter eller ting som, at disse andre former for funktioner i CSS er virkelig nyttige:

329
00:18:40,160 --> 00:18:45,610
Grid, Flexbox, CSS Regioner er mere af en forholdsvis ny standard så godt.

330
00:18:45,610 --> 00:18:51,190
Disse ting er alle kommer til at hjælpe dig med at lægge indhold ud og flow indhold mellem sektioner,

331
00:18:51,190 --> 00:18:55,470
være i stand til at gøre sidetallet og orddeling, uden at du behøver at skrive de ting selv.

332
00:18:55,470 --> 00:18:57,500
Du skal bare sige, "Please gøre følgende for mig,"

333
00:18:57,500 --> 00:19:00,850
og da skærmplads er forskellig på forskellige maskiner

334
00:19:00,850 --> 00:19:03,850
eller som du kan se i et øjeblik, som du snap en ansøgning

335
00:19:03,850 --> 00:19:07,920
at have mindre mængder af plads på skærmen, det er ikke noget problem for CSS.

336
00:19:07,920 --> 00:19:11,160
Det kan drage fordel af - Vi taler om omkring medier forespørgsler i en anden -

337
00:19:11,160 --> 00:19:15,880
det kan tage sig af ting med repositionering dit indhold, strømmende indhold fra regioner

338
00:19:15,880 --> 00:19:21,240
bare med disse ting, som du måske allerede har set med web-teknologi.

339
00:19:21,240 --> 00:19:25,470
>> På HTML5 side, er der også en masse ting

340
00:19:25,470 --> 00:19:28,140
som vil være meget nyttigt for dig med Windows Store apps.

341
00:19:28,140 --> 00:19:30,980
Igen, vil vi ikke gå igennem alle disse, men de er bare her.

342
00:19:30,980 --> 00:19:35,470
Så hvis du har brug for at bruge det, audio-video, hvis du ønsker at gøre validering fra formularer,

343
00:19:35,470 --> 00:19:40,570
geolocation, alle de ting, du kan gøre i JavaScript med JavaScript 5 eller ECMAScript 5,

344
00:19:40,570 --> 00:19:44,070
IndexedDB for lokal lagring - disse er alle muligheder for dig.

345
00:19:44,070 --> 00:19:49,300
Hvis du leder efter et svar, bare se på eksisterende teknologier med HTML5 og CSS

346
00:19:49,300 --> 00:19:53,880
og du vil finde lettere svar end at skulle rulle en masse af de ting selv.

347
00:19:53,880 --> 00:19:55,510
Lad mig vise dig lidt rundt her.

348
00:19:55,510 --> 00:19:57,920
Jeg har fået et site, vi kan gå til.

349
00:19:57,920 --> 00:20:01,590
Lad mig afslutte ud af dette dias til en anden.

350
00:20:01,590 --> 00:20:06,450
>> Hvis vi går ud til IETestDrive.com,

351
00:20:06,450 --> 00:20:08,960
Jeg vil ikke gøre meget af en demo her.

352
00:20:08,960 --> 00:20:14,360
IETestDrive.com virkelig viser dig en masse af, hvad der er nyt med IE10,

353
00:20:14,360 --> 00:20:16,220
de ting, du kan gøre.

354
00:20:16,220 --> 00:20:19,130
Jeg finder det er virkelig nyttig, fordi stedet for at læse gennem et bundt af hvidbøger,

355
00:20:19,130 --> 00:20:23,020
se på et par demoer, og det kommer til at hjælpe dig med at sætte det på din egen personlige radar

356
00:20:23,020 --> 00:20:26,620
om, hvorvidt en teknologi giver mening at selv gøre mere forskning med

357
00:20:26,620 --> 00:20:29,070
så vil du forstå, "Jeg ser, hvad det er for."

358
00:20:29,070 --> 00:20:32,780
"Jeg forstår, hvad Request animationsramme gør for mig."

359
00:20:32,780 --> 00:20:36,900
"Jeg forstår, hvordan jeg kunne bruge Regioner eller SVG-filtre."

360
00:20:36,900 --> 00:20:40,190
Du ser dem i aktion, se dem på et eksempel her,

361
00:20:40,190 --> 00:20:44,930
og selv bestemme om det vil være nyttigt for dig i dine egne projekter og videre

362
00:20:44,930 --> 00:20:47,840
som du fortsætter med at arbejde med web-teknologi.

363
00:20:47,840 --> 00:20:49,900
Her vil jeg blot opfordre dig til at tage et kig.

364
00:20:49,900 --> 00:20:52,880
Jeg tror ikke, jeg vil bruge meget tid faktisk kører disse.

365
00:20:52,880 --> 00:20:56,030
Vi har fået nok til at vise med at skrive kode.

366
00:20:56,030 --> 00:21:01,640
Du vil se her ting fra touch-effekter til touch-baserede spil i denne sektion,

367
00:21:01,640 --> 00:21:06,050
animation, virkelig hurtig hardware-accelereret animation der,

368
00:21:06,050 --> 00:21:11,230
nogle optimeringer, som du kan se i nogle af disse prøver så godt,

369
00:21:11,230 --> 00:21:12,770
og der er mange, mange flere.

370
00:21:12,770 --> 00:21:15,330
Hvis du går over her og åbne op for oversigtskort,

371
00:21:15,330 --> 00:21:19,070
der er bare et latterligt antal prøver her.

372
00:21:19,070 --> 00:21:20,690
Du kan se dem alle her.

373
00:21:20,690 --> 00:21:22,900
Hvis du kigger på noget eller du hørt om noget

374
00:21:22,900 --> 00:21:25,850
og du spekulerer måske dette ville være noget køligt at bruge i app,

375
00:21:25,850 --> 00:21:31,720
prøv at kigge her, og der er sandsynligvis en temmelig god demo for den for at spare dig selv lidt tid.

376
00:21:31,720 --> 00:21:35,980
>> Okay? Eventuelle spørgsmål, så langt for de folk her?

377
00:21:35,980 --> 00:21:39,620
Okay. Vi vil fortsætte her.

378
00:21:39,620 --> 00:21:41,920
Igen, bare tjek det ud.

379
00:21:41,920 --> 00:21:45,450
De er webstandarder, så gå til andre showcase websteder, som du kender

380
00:21:45,450 --> 00:21:50,550
og se, om disse teknologier gør fornemmelse for, hvad du forsøger at gøre.

381
00:21:50,550 --> 00:21:53,190
>> Tilbage til lysbilleder.

382
00:21:53,190 --> 00:22:00,290
Når det er sagt, er du flytter fra en web-verden til virkelig en installeret lokal anvendelse verden,

383
00:22:00,290 --> 00:22:01,850
så er der nogle ting at påpege her.

384
00:22:01,850 --> 00:22:03,690
Først og fremmest er der ingen webserver involveret her.

385
00:22:03,690 --> 00:22:06,120
Der er ingen Apache, er der ingen IIS kører her

386
00:22:06,120 --> 00:22:10,170
betjener op sider til en ekstern kunde, til en ekstern browser agent.

387
00:22:10,170 --> 00:22:13,000
I dette tilfælde er virkelig alt pakket op for dig.

388
00:22:13,000 --> 00:22:16,630
Du indsender det som din ansøgning til butikken, bliver det certificeret,

389
00:22:16,630 --> 00:22:22,190
det er ude i butikken, og så vil folk i tusindvis vil installere dit spil eller din app.

390
00:22:22,190 --> 00:22:24,780
Men dybest set, de trækker det ned lokalt, for at deres maskine.

391
00:22:24,780 --> 00:22:29,080
Der er ingen grund til at gå ud til nettet længere, medmindre du har opkald, der har brug for en ekstern API,

392
00:22:29,080 --> 00:22:31,790
og det er helt normalt så godt også.

393
00:22:31,790 --> 00:22:35,330
Men de kommer ikke til at være i denne tilstand, hvor de er nødt til at gå svar på anmodning fra en server

394
00:22:35,330 --> 00:22:37,910
for at få den næste side af deres indhold.

395
00:22:37,910 --> 00:22:41,380
Så det sagt, er der et par mindre API forskelle. Disse er utrolig lille.

396
00:22:41,380 --> 00:22:46,850
De er usandsynligt at ramme dig i din normale kodning, men de er i hvert fald dokumenteret.

397
00:22:46,850 --> 00:22:50,030
De slags kant deri.

398
00:22:50,030 --> 00:22:53,370
>> Den anden ting værd at påpege er den tillid forskelle.

399
00:22:53,370 --> 00:22:58,070
Jeg nævner det kun, fordi jeg vil bare være sikker på jeg sagde det

400
00:22:58,070 --> 00:23:01,580
så hvis du løber ind i den senere, vil du tænke, "Chris sagde noget om dette,

401
00:23:01,580 --> 00:23:04,890
"Så måske, ja, okay," og så skal du gå tilbage og du finder ud af, hvad det var.

402
00:23:04,890 --> 00:23:06,480
Sammenhænge noget.

403
00:23:06,480 --> 00:23:11,450
Som standard forsøger vi at beskytte brugeren fra vektorer for angreb.

404
00:23:11,450 --> 00:23:13,400
Der er visse ting, du kan gøre som standard

405
00:23:13,400 --> 00:23:16,130
og visse ting, du har brug for at skifte kontekst at aktivere.

406
00:23:16,130 --> 00:23:19,860
Som du bruger nogle biblioteker derude - Du kan samtidig lade allerede arbejdet med jQuery,

407
00:23:19,860 --> 00:23:23,650
men hvis du søger efter andre biblioteker derude - du måske bruge nogle funktioner

408
00:23:23,650 --> 00:23:28,000
den slags går ud over lokale forbrug, er mere dynamiske interaktioner

409
00:23:28,000 --> 00:23:30,360
XHR anmodninger, ting som.

410
00:23:30,360 --> 00:23:33,090
Nogle gange vil du måske finde dem vil blive deaktiveret som standard,

411
00:23:33,090 --> 00:23:37,790
og i så fald, bare gøre en søgning, kigge efter lokale og web-sammenhæng,

412
00:23:37,790 --> 00:23:39,560
og du vil finde ud af, hvordan du løser det.

413
00:23:39,560 --> 00:23:42,580
Bare sørg for at du vidste om, at når du begynder at bruge andre rammer,

414
00:23:42,580 --> 00:23:45,720
som, jeg bør nævne, er du fuldt ud i stand til at gøre.

415
00:23:45,720 --> 00:23:49,290
Så hvis du finde nogle andre rammer - Vi taler om om dette i en anden -

416
00:23:49,290 --> 00:23:54,000
til spil og du ønsker at bruge det, du ønsker at bruge nogle kontrol biblioteker, der er derude

417
00:23:54,000 --> 00:23:57,990
og du ikke ønsker at skrive at ting selv - det er en god idé, ikke? -

418
00:23:57,990 --> 00:23:59,560
du kan absolut bruge det her.

419
00:23:59,560 --> 00:24:03,660
Der er ikke noget der holder dig tilbage fra at bruge nogen form for bibliotek, der er baseret på JavaScript,

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

421
00:24:05,380 --> 00:24:09,740
Igen, hvis det er noget du kan gøre i IE10, hvilket er en pokkers af en masse i disse dage,

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

423
00:24:11,220 --> 00:24:14,800
Træk det ind i din app, reference, JavaScript bibliotek, og bruge det i din ansøgning,

424
00:24:14,800 --> 00:24:19,880
bare holde i tankerne du måske ramt en sikkerhedssituation en gang imellem - ikke meget ofte.

425
00:24:19,880 --> 00:24:24,150
>> Og så de funktioner, vi vil gå over et par mere af dem, som vi går.

426
00:24:24,150 --> 00:24:27,500
UX du slags vænne sig til som du ser flere og flere ansøgninger

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

428
00:24:29,250 --> 00:24:33,870
Du får en fornemmelse for, hvordan de virker og hvordan design æstetik tendens til at arbejde

429
00:24:33,870 --> 00:24:37,720
tværs af forskellige applikationer, og hvad folk vil blive brugt til at opleve.

430
00:24:37,720 --> 00:24:39,660
Det er virkelig den vigtige del.

431
00:24:39,660 --> 00:24:42,460
Sørg for, at når de fyre op din app de behøver ikke at læse en manual,

432
00:24:42,460 --> 00:24:44,300
som de aldrig gøre, ved den måde.

433
00:24:44,300 --> 00:24:46,650
De skal bare være i stand til at begynde at spille med din ansøgning

434
00:24:46,650 --> 00:24:49,450
og regne det ud uden meget besvær.

435
00:24:49,450 --> 00:24:52,660
Ved at holde sig og overholde en masse af disse praksisser,

436
00:24:52,660 --> 00:24:57,640
du kommer til at gøre dine brugere en stor tjeneste, der gør det nemmere.

437
00:24:57,640 --> 00:25:01,810
>> Okay. En sidste ting på API side og derefter vil vi komme ind rent faktisk at skrive kode.

438
00:25:01,810 --> 00:25:05,660
WinJS er, at ting jeg nævnte meget kort med denne komplekse slide

439
00:25:05,660 --> 00:25:08,850
med alle de forskellige valg, du har for at gøre applikationer.

440
00:25:08,850 --> 00:25:10,890
WinJS, kan du tænke på det som en kammerat.

441
00:25:10,890 --> 00:25:13,680
Det er din ven til at hjælpe dig hurtigere skrive ting.

442
00:25:13,680 --> 00:25:18,820
Det er bare JavaScript og CSS. Du behøver ikke at bruge det. Du kan bruge det.

443
00:25:18,820 --> 00:25:22,180
Hvis du vil være ringer ind til Windows-funktioner, vil du ende med at bruge det,

444
00:25:22,180 --> 00:25:27,210
men hvis der er ting som nogle design mønstre eller kontroller, som du virkelig ikke ønsker at bruge,

445
00:25:27,210 --> 00:25:29,090
du ønsker at bruge noget andet, det er op til dig.

446
00:25:29,090 --> 00:25:32,580
Beslut hvad du vil bruge, og de typografier, du vil bruge.

447
00:25:32,580 --> 00:25:37,250
Funktionerne fra namespacing og klasse generation - op til dig.

448
00:25:37,250 --> 00:25:41,650
Hvis du foretrækker det ene eller det andet, det er helt dit valg. Det er stadig JavaScript og CSS.

449
00:25:41,650 --> 00:25:43,860
Men det kommer til at hjælpe dig med at gøre en masse ting.

450
00:25:43,860 --> 00:25:47,780
For eksempel, her er en delmængde af, hvad det kan gøre,

451
00:25:47,780 --> 00:25:50,790
ting som at hjælpe asynkron programmering med løfter.

452
00:25:50,790 --> 00:25:54,000
Nogen af ​​jer har hørt om eller arbejdet med Node.js?

453
00:25:54,000 --> 00:25:59,520
Det er et fælles mønster for at arbejde med asynkron programmering.

454
00:25:59,520 --> 00:26:02,370
Så dybest set, hvad du siger er, "gå gøre noget,

455
00:26:02,370 --> 00:26:05,790
"Og du kommer til at give mig et løfte, som du vil vende tilbage til mig, når du er færdig."

456
00:26:05,790 --> 00:26:08,400
Det er væsentligt, hvad der foregår.

457
00:26:08,400 --> 00:26:12,400
Så du behøver ikke fryse din ansøgning, mens brugeren går og plukke en fil

458
00:26:12,400 --> 00:26:15,810
eller noget der strømmede ned fra internettet.

459
00:26:15,810 --> 00:26:17,210
Brugergrænsefladen er fortsat lydhør.

460
00:26:17,210 --> 00:26:19,410
Og du kan gøre det ved hjælp asynkron programmering.

461
00:26:19,410 --> 00:26:23,620
Det lyder latterligt kompliceret, men det er virkelig nemt, fordi du bruger løfter

462
00:26:23,620 --> 00:26:27,900
og du bare sige: "Gå gøre dette, og når du er færdig, kan du ringe tilbage til denne metode."

463
00:26:27,900 --> 00:26:30,270
Det er temmelig meget det. Det er alt indbygget i WinJS.

464
00:26:30,270 --> 00:26:35,120
Det kommer til at gøre det meget nemmere at skrive virkelig fleksible og kraftfulde applikationer.

465
00:26:35,120 --> 00:26:37,870
>> Du kan se resten her, en masse animationer.

466
00:26:37,870 --> 00:26:41,240
Sandsynligvis en af ​​de mere vigtige ting på dette dias er kontrol.

467
00:26:41,240 --> 00:26:44,680
Jeg tror, ​​jeg har en hel - Ja, jeg gør.

468
00:26:44,680 --> 00:26:48,900
Her er et eksempel på nogle af de kontrolelementer, du kan bruge i dine applikationer.

469
00:26:48,900 --> 00:26:51,060
Det er alt lige op fra WinJS.

470
00:26:51,060 --> 00:26:53,430
Du er ikke skriver disse selv,

471
00:26:53,430 --> 00:26:55,990
du bare sige, "Her er hvordan jeg vil skrive min ansøgning."

472
00:26:55,990 --> 00:26:59,420
"Jeg vil bruge en flip visning, så jeg kan gå mellem forskellige billeder."

473
00:26:59,420 --> 00:27:03,380
Jeg har ikke vist dig Semantic Zoom. Jeg vil vise dig, at der i et sekund.

474
00:27:03,380 --> 00:27:05,700
Listevisninger. Der er gridviews.

475
00:27:05,700 --> 00:27:08,680
Du har allerede set et gitter som en del af butikken ansøgningen,

476
00:27:08,680 --> 00:27:12,170
så at kunne bruge blokke af indhold og rulle på tværs af det.

477
00:27:12,170 --> 00:27:15,660
Flyout menuer du vil se fra tid til anden.

478
00:27:15,660 --> 00:27:19,090
Den app bar jeg viste dig med at frisk maling ansøgning så godt,

479
00:27:19,090 --> 00:27:22,190
så du så, hvordan du kan tilpasse det ved at sætte knapperne på det

480
00:27:22,190 --> 00:27:26,360
og som har at skjule væk, når du er ligeglad med at bruge den.

481
00:27:26,360 --> 00:27:28,120
Det er virkelig helt op til dig at bruge.

482
00:27:28,120 --> 00:27:30,210
Disse er alle kontroller, der er en del af WinJS.

483
00:27:30,210 --> 00:27:33,640
Jeg vil vise dig hvordan man laver disse i bare et sekund, men der er mere end netop dette,

484
00:27:33,640 --> 00:27:37,060
og det vigtigste er at bruge dem, hvis du ønsker, spare tid.

485
00:27:37,060 --> 00:27:40,830
>> Hvis du har andre kontrolforanstaltninger biblioteker, som du gerne vil bruge, det er helt fint også.

486
00:27:40,830 --> 00:27:46,300
Ting som jQuery UI gør en masse af denne form for idé så godt,

487
00:27:46,300 --> 00:27:51,280
giver flere kontrolelementer, der strækker sig, hvad du kan gøre i HTML og JavaScript.

488
00:27:52,690 --> 00:27:55,680
Lad os dykke i. Jeg har allerede sagt. Brug hvad du gerne vil.

489
00:27:55,680 --> 00:27:59,680
Bare husk, at du kan løbe ind i nogle sammenhæng spørgsmål.

490
00:27:59,680 --> 00:28:03,380
Men du kan helt sikkert mikse og matche, hvad slags biblioteker du er fortrolig med,

491
00:28:03,380 --> 00:28:06,770
du ønsker at lære, du vil bruge, for at spare tid.

492
00:28:06,770 --> 00:28:09,850
>> Lad os tale om redskaber bare for et sekund.

493
00:28:09,850 --> 00:28:12,400
Du kan få hvad du behøver for at begynde at arbejde med Windows Store apps.

494
00:28:12,400 --> 00:28:17,360
Hvis jeg går ud igen, jeg har alt for mange ting heroppe.

495
00:28:17,360 --> 00:28:21,770
Hvis du går til denne side, der er dev.windows.com,

496
00:28:21,770 --> 00:28:23,300
du kan downloade alt hvad du behøver.

497
00:28:23,300 --> 00:28:28,170
Som studerende har du adgang til mere end den brede offentlighed gør,

498
00:28:28,170 --> 00:28:30,670
så du kan få højere ende versioner af Visual Studio.

499
00:28:30,670 --> 00:28:34,090
Edwin nævnt kan du allerede få Windows så godt.

500
00:28:34,090 --> 00:28:36,790
Men generelt for alle udviklere, kan du gå til denne hjemmeside

501
00:28:36,790 --> 00:28:40,380
og hente alt hvad du behøver at gøre et program, og det hele er gratis.

502
00:28:40,380 --> 00:28:42,460
Så der er en gratis version af Visual Studio,

503
00:28:42,460 --> 00:28:44,450
der er nogle værktøjer, der vil installere sammen af ​​det -

504
00:28:44,450 --> 00:28:47,240
alt hvad du behøver for at skabe og teste din ansøgning.

505
00:28:47,240 --> 00:28:50,130
Det er kun, når du kommer til at udgive din ansøgning op til butikken

506
00:28:50,130 --> 00:28:52,470
at du vil få brug for en udvikler konto.

507
00:28:52,470 --> 00:28:56,100
Også jeg tror er gratis. Er det gratis for studerende så godt? >> [Guarin] Hvilken en?

508
00:28:56,100 --> 00:28:57,970
Bygherren konto, faktiske fremlæggelse. >> [Guarin] Ja.

509
00:28:57,970 --> 00:28:59,580
Det er flere gode nyheder.

510
00:28:59,580 --> 00:29:00,840
Du vil gå se på dette.

511
00:29:00,840 --> 00:29:03,840
Det vil sige for en person som standard er det 49 dollars.

512
00:29:03,840 --> 00:29:06,140
Men du behøver ikke tilmelde dig, at som studerende.

513
00:29:06,140 --> 00:29:10,250
Vi får dig nogle oplysninger gennem Deres programmer, du kan få en gratis konto,

514
00:29:10,250 --> 00:29:13,980
og der vil lade dig derefter indsende dine programmer helt op til butikken,

515
00:29:13,980 --> 00:29:17,370
så mange som du vil, og alt dette godhed vil snart følge efter.

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

517
00:29:19,710 --> 00:29:22,170
Du kan hente de værktøjer, som du måske har brug for her.

518
00:29:22,170 --> 00:29:25,310
Og hvis du vil, kan du få en prøveversion af Windows her,

519
00:29:25,310 --> 00:29:27,160
men igen, vil du ikke brug for det.

520
00:29:27,160 --> 00:29:32,880
>> Den anden side - lad mig påpege denne ene ud for dig hurtigt - er 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 gætte, hvad det er for.

523
00:29:37,770 --> 00:29:40,380
Det er faktisk en temmelig venligt websted. Der er en masse god information her.

524
00:29:40,380 --> 00:29:41,770
Du kan arbejde igennem det.

525
00:29:41,770 --> 00:29:43,960
Det kommer til at give dig nogle råd om nogle ting

526
00:29:43,960 --> 00:29:46,760
at måske har du ikke tænkt over før eller måtte beskæftige sig med før,

527
00:29:46,760 --> 00:29:50,780
ligesom designe for touch, designe for forskellige formfaktorer,

528
00:29:50,780 --> 00:29:55,310
designe for funktionerne i Windows 8, de ting, jeg nævnte før

529
00:29:55,310 --> 00:29:58,740
som at lede og deling, nogle ting, som jeg ikke har talt om endnu.

530
00:29:58,740 --> 00:30:05,570
De er alle opført her, og det er en temmelig god sæt nyttige fil sider

531
00:30:05,570 --> 00:30:08,670
som vil hjælpe dig med at forstå, hvordan man laver en vis form for applikation,

532
00:30:08,670 --> 00:30:14,250
hvordan man gør interaktion, hvordan man skal håndtere UI og UX af din ansøgning.

533
00:30:14,250 --> 00:30:18,630
Jeg vil anbefale, at du tager et kig på dette, især hvis du er på et tidspunkt

534
00:30:18,630 --> 00:30:22,960
i håb om at offentliggøre en ansøgning til butikken.

535
00:30:22,960 --> 00:30:25,250
Du kommer til at ønsker at vide, hvordan man laver en god ansøgning

536
00:30:25,250 --> 00:30:28,300
fordi jeg nævnte før, hvis du ikke gør det, er der disse anmeldelser igen.

537
00:30:28,300 --> 00:30:29,930
Folk kommer til at være ulykkelig.

538
00:30:29,930 --> 00:30:32,960
De vil ikke være i stand til at finde ting, som de forventer i de rigtige steder.

539
00:30:32,960 --> 00:30:36,590
Ingen ønsker, at det sker for dig.

540
00:30:36,590 --> 00:30:39,220
>> Vejen frem her, lad mig lukke det ned.

541
00:30:39,220 --> 00:30:43,700
Nu hvor du ved, hvor man kan få ting, vil jeg vise dig, hvordan man rent faktisk begynder at bruge ting.

542
00:30:43,700 --> 00:30:48,520
Til at begynde, vil jeg faktisk vise dig her et eksempel på desktop apps på min startskærmen.

543
00:30:48,520 --> 00:30:53,600
Her kan du se Visual Studio, kan du se Blend og andre udviklingsværktøjer, som jeg har.

544
00:30:53,600 --> 00:30:55,890
De har en lidt anden flise.

545
00:30:55,890 --> 00:30:57,930
Det er fordi de er desktop apps,

546
00:30:57,930 --> 00:31:00,960
og i de tilfælde, de er alle kommer til at lancere tilbage til mit skrivebord

547
00:31:00,960 --> 00:31:05,350
virkelig bare så apps, som du er vant til.

548
00:31:05,350 --> 00:31:06,960
Så Windows-oplevelse, det er det samme.

549
00:31:06,960 --> 00:31:12,940
De er for eksempel ikke, ligesom Armed! eller disse ting. Lad mig starte et hurtigt.

550
00:31:12,940 --> 00:31:14,340
Faktisk, her er interessant.

551
00:31:14,340 --> 00:31:19,210
Det blev udviklet af studerende, der arbejder i partnerskab på NERD.

552
00:31:19,210 --> 00:31:23,430
Fuld skærm ansøgning, er disse former for oplevelser her.

553
00:31:23,430 --> 00:31:26,290
Åh, nice cut-skærme og alle former for sjove ting.

554
00:31:26,290 --> 00:31:34,330
De udviklede dette. Vi kan lige så godt vise det hele, mens vi er ved det.

555
00:31:37,510 --> 00:31:41,070
Faktisk arbejdede jeg med dem en lille smule, gav dem nogle råd om ting

556
00:31:41,070 --> 00:31:44,160
fordi de gjorde JavaScript for deres anvendelse.

557
00:31:44,160 --> 00:31:46,460
Please, jeg tager ikke æren for deres arbejde, de gjorde alt arbejdet.

558
00:31:46,460 --> 00:31:48,990
Jeg bare gav dem en lille smule råd her og der,

559
00:31:48,990 --> 00:31:52,400
men de gjorde nogle gode ting ved hjælp af et JavaScript frontend

560
00:31:52,400 --> 00:31:56,920
og binde i nogle fysik motorer og ting at gøre en masse af dette arbejde.

561
00:32:00,120 --> 00:32:03,360
Go. Lad os se, om det virker.

562
00:32:03,360 --> 00:32:07,010
Wow, det stadig arbejdede. Okay, godt. Men du får den idé.

563
00:32:07,010 --> 00:32:09,350
En fuld skærm app, en rigtig god oplevelse.

564
00:32:09,350 --> 00:32:14,250
Dette støtter ikke kun min mus og pen, hvis jeg har ting som det, men også røre.

565
00:32:14,250 --> 00:32:19,420
Hvis jeg havde en touch screen, kunne jeg bare trække på det og fortsætte med at arbejde med det.

566
00:32:19,420 --> 00:32:21,440
>> En ting jeg ikke vise, og grunden til, at jeg bringer dette op

567
00:32:21,440 --> 00:32:23,840
er jeg ønskede at have en anden app til at vise dig, hvad du kan gøre,

568
00:32:23,840 --> 00:32:29,480
du rent faktisk kan tage programmer i Windows og trække dem til den side af skærmen.

569
00:32:29,480 --> 00:32:33,070
Dette kaldes snapper en ansøgning.

570
00:32:33,070 --> 00:32:37,800
I dette tilfælde har jeg taget Inkarus og jeg har tilføjet det til side her.

571
00:32:37,800 --> 00:32:42,990
Det er nu i Snap mening, og det giver mig mulighed for at gøre noget andet, mens ansøgningen er der.

572
00:32:42,990 --> 00:32:46,210
De fleste spil du finder, vil simpelthen holde pause.

573
00:32:46,210 --> 00:32:51,090
Det er normalt en anstændig ting at gøre, medmindre dit spil eller anden måde kan skalere ned

574
00:32:51,090 --> 00:32:54,210
til det lille af en resolution, som måske en slags brætspil

575
00:32:54,210 --> 00:32:55,620
eller sådan noget på lejlighed.

576
00:32:55,620 --> 00:32:58,570
Men generelt til den letteste ting at gøre, og den mest hensigtsmæssige ting gøre for spil

577
00:32:58,570 --> 00:33:00,620
er at holde pause i programmet.

578
00:33:00,620 --> 00:33:09,440
For applikationer som nyheder apps, hvis jeg starter denne ene og så jeg snap det,

579
00:33:09,440 --> 00:33:16,170
du vil se det faktisk ændrer sig markant i, hvordan det er at præsentere data til dig.

580
00:33:16,170 --> 00:33:20,070
Her det viser dig i virkelig en mere lodret pande, at oplysninger,

581
00:33:20,070 --> 00:33:23,340
men jeg kan stadig absolut bruge programmet.

582
00:33:23,340 --> 00:33:25,640
Så det er stadig meget nyttig.

583
00:33:25,640 --> 00:33:29,870
Det faktum, at det er i en mindre visning ikke holde mig fra at bruge denne app. Så tænk over det.

584
00:33:29,870 --> 00:33:32,090
Det er noget, du skal have dine apps gøre til en vis grad,

585
00:33:32,090 --> 00:33:35,370
men det er op til dig at bestemme, hvordan funktionel dine apps bør være

586
00:33:35,370 --> 00:33:39,080
i den slags en mindre miljø.

587
00:33:39,080 --> 00:33:44,780
Lad mig slutte, at man ned og gå tilbage til hvor vi var her.

588
00:33:44,780 --> 00:33:48,110
>> Edwin, du har tilføjet et billede af mig allerede? >> [Guarin] Ja. >> [Bowen] Se der.

589
00:33:48,110 --> 00:33:51,510
Se det? Edwin tilføjet et foto. [Griner]

590
00:33:51,510 --> 00:33:54,410
>> Lad os gå tilbage herovre i Visual Studio. Lad mig starte dette for dig.

591
00:33:54,410 --> 00:33:58,170
Jeg kunne have klikket på flise på at startskærmen.

592
00:33:58,170 --> 00:34:02,630
Det bragte mig tilbage ind i Desktop mode, og det er at lancere skrivebordet app af Visual Studio.

593
00:34:02,630 --> 00:34:06,790
Dette er de vinduer, du allerede kender.

594
00:34:06,790 --> 00:34:09,100
Jeg kan gå videre og oprette et projekt her.

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

596
00:34:11,159 --> 00:34:16,510
Jeg har tænkt mig at gå ud og vælge op her under JavaScript, Windows Store.

597
00:34:16,510 --> 00:34:19,010
Der er en række skabeloner, som du kan bruge.

598
00:34:19,010 --> 00:34:21,710
For produktivitet, vil jeg anbefale du tager et kig på nogle af disse andre dem her

599
00:34:21,710 --> 00:34:23,489
ligesom Grid og Split.

600
00:34:23,489 --> 00:34:25,270
De er virkelig nyttigt, hvis du laver en ansøgning

601
00:34:25,270 --> 00:34:28,960
der kommer til at have den form for design og navigation. Du vil se disse meget.

602
00:34:28,960 --> 00:34:33,070
Den ene jeg bare viste du var faktisk en forekomst af Grid ansøgning.

603
00:34:33,070 --> 00:34:36,880
Så hvis du tror, ​​du vil være at gøre en nyhed app eller en RSS-læser

604
00:34:36,880 --> 00:34:43,120
eller noget lignende, der beskæftiger sig med flere indgange, som du gerne vil vise detaljer,

605
00:34:43,120 --> 00:34:45,989
tænke på at bruge en af ​​disse skabeloner til at komme hurtigt i gang

606
00:34:45,989 --> 00:34:48,380
og tilpasse den derfra.

607
00:34:48,380 --> 00:34:50,120
Men bare så jeg kan vise dig alle de bevægelige dele her

608
00:34:50,120 --> 00:34:56,120
Jeg har tænkt mig at oprette den tomme app, og så vil vi gå lidt dybere ind i detaljerne.

609
00:34:56,120 --> 00:34:58,690
Jeg laver bare det tomme ansøgning her.

610
00:34:58,690 --> 00:35:01,270
Det kommer til at skabe hele projektet for mig.

611
00:35:01,270 --> 00:35:03,290
Jeg vil åbne op for ting, som jeg ønsker at vise dig som standard.

612
00:35:03,290 --> 00:35:08,550
Lad mig bare zoome ind en lille smule for at vise dig, hvad der er skabt for os her.

613
00:35:08,550 --> 00:35:11,350
De ting, du kommer til at se på først er alle opkaldt standard.

614
00:35:11,350 --> 00:35:15,970
Så du kommer til at se efter default.html, default.js og default.css.

615
00:35:15,970 --> 00:35:19,590
Den anden ting at påpege, er, at vi allerede har en henvisning til det, jeg nævnte før.

616
00:35:19,590 --> 00:35:24,530
Dette er WinJS. Ingen faktisk kalder det dette langt navn her.

617
00:35:24,530 --> 00:35:27,710
Det er WinJS, Windows bibliotek til JavaScript.

618
00:35:27,710 --> 00:35:29,530
Hvis du åbner det op, kan du se det hele her.

619
00:35:29,530 --> 00:35:31,820
Der er forskellige CSS-filer, er der JavaScript.

620
00:35:31,820 --> 00:35:33,520
Det er der for at hjælpe dig ud.

621
00:35:33,520 --> 00:35:37,190
Det er virkelig der for at give kontrol og stilarter og ting, som du bare kan bruge automatisk.

622
00:35:37,190 --> 00:35:41,240
Men igen, hvis der er ting, du ønsker at bruge i stedet i form af styling og andre former for kontrol,

623
00:35:41,240 --> 00:35:45,600
det er helt op til dig. Jeg vil vise dig hvordan du bruger et par af disse ting lige nu.

624
00:35:45,600 --> 00:35:51,020
>> Tilbage over på vores venstre side, lad mig vise dig standard HTML-side.

625
00:35:51,020 --> 00:35:54,490
Du har allerede set WinJS ting, og det er virkelig alt, der foregår der

626
00:35:54,490 --> 00:35:59,930
med disse midterste linjer af markup, bare bringe i CSS som standard

627
00:35:59,930 --> 00:36:02,370
og bringe i et par JavaScript-filer fra WinJS.

628
00:36:02,370 --> 00:36:06,400
Du behøver ikke at være herre over, hvad der foregår inde i disse filer.

629
00:36:06,400 --> 00:36:10,110
Det er temmelig interessant at tage et kig på dem at slags gennemgå, hvad der foregår derinde

630
00:36:10,110 --> 00:36:14,410
fordi der er temmelig interessante mellemliggende og avancerede teknikker foregår derinde,

631
00:36:14,410 --> 00:36:18,100
men det gode er som udviklere, kan du bare tage fordel af dem, bare bruge dem

632
00:36:18,100 --> 00:36:19,510
og ikke virkelig nødt til at bekymre dig om det.

633
00:36:19,510 --> 00:36:21,960
Du kan stadig køre en bil uden at vide, hvordan det fungerer, right?

634
00:36:21,960 --> 00:36:24,180
Så det er den slags ting, der foregår her.

635
00:36:24,180 --> 00:36:26,930
Der er kontrol og stilarter og ting, som du bare kan gå videre og bruge

636
00:36:26,930 --> 00:36:31,460
og kode, som du kan bruge i en anden uden at vide, hvad der er derinde.

637
00:36:31,460 --> 00:36:33,200
Her er dine egne filer.

638
00:36:33,200 --> 00:36:35,860
Disse er dine steder som du kan ændre din egen CSS

639
00:36:35,860 --> 00:36:38,400
og din egen JavaScript for at få tingene rullende.

640
00:36:38,400 --> 00:36:43,300
Du vil løbende tilføje sikkert andre JavaScript-filer og måske andre CSS-filer

641
00:36:43,300 --> 00:36:47,480
som dit projekt vokser, men det er egentlig bare et udgangspunkt.

642
00:36:47,480 --> 00:36:52,570
Her er Hello, world svarer til HTML, så er vi tilbage i kroppen tag.

643
00:36:52,570 --> 00:36:55,990
På toppen, ved den måde, det er HTML5 doctype,

644
00:36:55,990 --> 00:37:00,060
så du kan genkende det fra, hvad du har arbejdet på.

645
00:37:00,060 --> 00:37:04,600
Der er fuld IntelliSense i her så godt, så hvis du gør ting som type i en video-tag

646
00:37:04,600 --> 00:37:07,340
og udvide det ud, har du sikkert lært om det faktum,

647
00:37:07,340 --> 00:37:12,760
at du behøver at gøre fallback kodning til video tags i HTML5 - eller måske har du -

648
00:37:12,760 --> 00:37:17,490
at sikre, at forskellige browsere har support til din video.

649
00:37:17,490 --> 00:37:22,610
Vi har ting som dette på tværs af HTML, på tværs af JavaScript, tværs CSS.

650
00:37:22,610 --> 00:37:26,020
Der er indbygget i, og jeg vil vise dig CSS i et sekund.

651
00:37:26,020 --> 00:37:29,430
Her kan du gå videre og begynde at ændre koden, opmærkningen.

652
00:37:29,430 --> 00:37:33,700
I virkeligheden, før jeg ændre noget, vil jeg køre dette og vise dig, hvad du får.

653
00:37:33,700 --> 00:37:35,700
Du kommer til at få en splash skærm, som du kan tilpasse

654
00:37:35,700 --> 00:37:40,940
og så får du den Hej, verden oplever her. Det er fantastisk, ikke?

655
00:37:40,940 --> 00:37:42,640
Gå videre og skib, ikke?

656
00:37:42,640 --> 00:37:45,970
Indhold går her. Det er den grundlæggende ting.

657
00:37:45,970 --> 00:37:48,740
Det kan kun blive bedre derfra.

658
00:37:48,740 --> 00:37:51,300
Vi vil gå videre og tilføje i nogle ting.

659
00:37:51,300 --> 00:37:53,470
Jeg har en lille smule af markup jeg har tænkt mig at kopiere i her

660
00:37:53,470 --> 00:37:55,740
bare så du ikke behøver at se mig at skrive.

661
00:37:55,740 --> 00:38:02,620
Lad mig gå opdrage værktøjskassen her, og jeg vil pin dette, fordi jeg vil gøre dette et par gange.

662
00:38:02,620 --> 00:38:05,650
Værktøjskasse, hvis du ikke har set Visual Studio, er, hvor du kommer til at finde en masse kontrol.

663
00:38:05,650 --> 00:38:09,050
Du kan også sætte kodestumper ind i det, som du kan genbruge.

664
00:38:09,050 --> 00:38:16,360
Her vil jeg bare pop i en anden HTML, noget forfærdeligt fremskreden på alle her.

665
00:38:16,360 --> 00:38:20,170
Det er bare grundlæggende HTML sige jeg har et input, hvor jeg kan skrive,

666
00:38:20,170 --> 00:38:23,860
Jeg har en knap, hvor jeg kan sende det, og så har jeg en div der er hovedsagelig en pladsholder

667
00:38:23,860 --> 00:38:27,360
at jeg kan bruge til at sende "Hej, du skriver det her."

668
00:38:27,360 --> 00:38:32,780
Det er den intro til HTML-eksempel.

669
00:38:32,780 --> 00:38:39,340
Hvis jeg køre dette, vi automatisk får HTML, men vi også automatisk få styling.

670
00:38:39,340 --> 00:38:42,270
Dette er en af ​​de vigtige ting fra WinJS.

671
00:38:42,270 --> 00:38:47,250
Det kommer til at give dig som standard nogle udseende og der er virkelig konsekvent

672
00:38:47,250 --> 00:38:50,520
med resten af ​​hvad Windows 8 gør.

673
00:38:50,520 --> 00:38:52,110
Her kan du se ting som knappen.

674
00:38:52,110 --> 00:38:55,890
Knappen som standard i HTML ligner ikke det, men det gør her

675
00:38:55,890 --> 00:39:00,880
fordi det bliver at CSS lige fra at CSS-fil i WinJS.

676
00:39:00,880 --> 00:39:04,680
Hvis du ønsker at bruge noget andet, hvis du ønsker at ændre det, helt fint,

677
00:39:04,680 --> 00:39:06,790
gå videre og gøre, hvad du gerne vil. Men det er standard.

678
00:39:06,790 --> 00:39:09,610
Det kommer til at være mere velkendt for brugerne.

679
00:39:09,610 --> 00:39:13,510
Og selvfølgelig vil det ikke gøre noget, fordi jeg faktisk ikke wire op nogen form for kode

680
00:39:13,510 --> 00:39:16,630
til at reagere på det. Det var bare HTML.

681
00:39:16,630 --> 00:39:20,630
Så jeg kan slippe af med det, og vi vil komme tilbage ind i vores ansøgning.

682
00:39:20,630 --> 00:39:25,310
>> Lad mig skifte over til vores default.js.

683
00:39:25,310 --> 00:39:29,030
Det ser temmelig kompliceret, men det er bare at gøre et par ting for dig.

684
00:39:29,030 --> 00:39:33,120
Det er standardtekst. Det kommer til at være den samme i alle dine projekter.

685
00:39:33,120 --> 00:39:36,620
Det eneste, dette gør, er bare lidt at spørge: "Hvordan kom jeg her?"

686
00:39:36,620 --> 00:39:39,090
og sagde: "Er du lancere denne app for første gang?"

687
00:39:39,090 --> 00:39:42,640
"Er du genoptage den app fra at have det suspenderes?"

688
00:39:42,640 --> 00:39:44,510
Et par ting som.

689
00:39:44,510 --> 00:39:50,300
Virkelig, vores fokus på denne fil her er lige om her.

690
00:39:50,300 --> 00:39:54,490
På dette punkt er temmelig vigtigt denne ene linje kode.

691
00:39:54,490 --> 00:39:57,070
Det er faktisk kommer til at gå og se gennem alle dine opmærkning,

692
00:39:57,070 --> 00:40:01,640
og det kommer til at finde ting, som du har bedt om at have forvandlet til kontrol,

693
00:40:01,640 --> 00:40:07,220
dybere kontrol som en rating kontrol, som et gitter visning, ligesom flyout

694
00:40:07,220 --> 00:40:09,570
og de andre ting, som jeg viste dig på det dias før.

695
00:40:09,570 --> 00:40:12,550
De er ikke indfødte HTML kontrol.

696
00:40:12,550 --> 00:40:17,860
Du skal bare ikke sige flyout som et element og har det ved, hvad de skal gøre.

697
00:40:17,860 --> 00:40:22,120
Hvad vi rent faktisk gør, er det samme, der sker i andre former for kontrol rammer.

698
00:40:22,120 --> 00:40:26,200
jQuery UI gør det samme slags generel tilgang.

699
00:40:26,200 --> 00:40:30,800
Du bruger markeringer i din HTML, og derefter nogle JavaScript kommer igennem senere og siger,

700
00:40:30,800 --> 00:40:35,900
"Åh, jeg ved, hvad det er. Det er at bede om dette at blive forvandlet til det her,"

701
00:40:35,900 --> 00:40:39,850
der er andre mere udtryksfuld HTML at gøre som en ratings kontrol

702
00:40:39,850 --> 00:40:41,790
hvilket er, hvad jeg vil vise dig lige nu.

703
00:40:41,790 --> 00:40:46,140
Denne linje kode er et løfte, der siger, "Når dette løfte bliver opfyldt,

704
00:40:46,140 --> 00:40:49,090
"Alt det, du har bedt om er derefter blevet oprettet."

705
00:40:49,090 --> 00:40:52,780
Og det er det. Det ser lidt kompliceret, men det er virkelig det samme i hvert projekt.

706
00:40:52,780 --> 00:40:56,690
Hernede er, hvor du kan begynde at tilføje i hvad du ellers vil have ske,

707
00:40:56,690 --> 00:40:58,280
så vi vil vende tilbage til om et øjeblik.

708
00:40:58,280 --> 00:41:01,480
>> Først og fremmest, jeg har brug for en smule af kode, der kan reagere på det faktum,

709
00:41:01,480 --> 00:41:03,320
at nogen har klikket på knappen.

710
00:41:03,320 --> 00:41:06,330
Jeg har tænkt mig at gå videre og sætte det i hernede.

711
00:41:06,330 --> 00:41:09,620
Igen, jeg ikke kommer til at gøre nogen skrive foran dig her.

712
00:41:09,620 --> 00:41:12,560
Meget grundlæggende JavaScript siger bare når dette kaldes

713
00:41:12,560 --> 00:41:15,270
vi kommer til at blive givet nogle oplysninger om, hvordan vi fik her

714
00:41:15,270 --> 00:41:17,630
og så vil vi gøre et par grundlæggende ting.

715
00:41:17,630 --> 00:41:21,300
Gå ud og find den ting i min HTML-side, der er opkaldt nameInput,

716
00:41:21,300 --> 00:41:28,490
Grib det, tage sin værdi, slap "Hello" på forsiden af ​​det, og holde der følger snor

717
00:41:28,490 --> 00:41:31,960
ind i det div tag, som vi havde før der virkelig ikke har noget før.

718
00:41:31,960 --> 00:41:37,220
Nu vil vi finde, at tag og gøre sin indre indhold svarer til den streng.

719
00:41:37,220 --> 00:41:38,880
Meget simpelt JavaScript.

720
00:41:38,880 --> 00:41:42,240
Forhåbentlig er du erkender, at der er virkelig ikke noget usædvanligt foregår her.

721
00:41:42,240 --> 00:41:45,360
Det er bare lige op HTML og JS her.

722
00:41:45,360 --> 00:41:48,220
Hvis jeg køre dette nu, er det stadig ikke kommer til at gøre noget arbejde, fordi jeg ikke har kabelbaseret det op

723
00:41:48,220 --> 00:41:50,030
at modtage begivenheden.

724
00:41:50,030 --> 00:41:55,710
For at gøre det, vil jeg gøre det lige her, igen at vende tilbage til min værktøjskasse,

725
00:41:55,710 --> 00:41:58,730
popping det her.

726
00:41:58,730 --> 00:42:03,060
Jeg forventer, at du har set alle den slags ting før, så jeg vil ikke over-forklare det.

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

728
00:42:05,060 --> 00:42:07,730
Vi kommer til at sige, "knappen, tillykke."

729
00:42:07,730 --> 00:42:10,130
"Her er en begivenhed, som du nu reagerer på."

730
00:42:10,130 --> 00:42:13,420
"Når nogen klikker på dig, kalder denne funktion, buttonClickHandler".

731
00:42:13,420 --> 00:42:17,070
Og det er denne funktion, vi lige har tilføjet helt ned i bunden der. Det er det.

732
00:42:17,070 --> 00:42:20,980
Så nu har vi fået en utrolig funktionel ansøgning.

733
00:42:20,980 --> 00:42:24,720
Jeg tror du vil blive virkelig imponeret over dette.

734
00:42:24,720 --> 00:42:32,320
Chris. Vent til det. Wow. Okay. Det er fantastisk. [Griner]

735
00:42:32,320 --> 00:42:36,570
Men der er mere. Må ikke købe det endnu. Vent.

736
00:42:36,570 --> 00:42:39,610
>> Lad mig vise dig en lille smule mere her og få ud af fuld skærm.

737
00:42:39,610 --> 00:42:42,690
Vi kommer til at gå, før vi kører.

738
00:42:42,690 --> 00:42:45,530
Lad mig gå ind og faktisk vise dig en lille smule med CSS.

739
00:42:45,530 --> 00:42:49,480
Lige som standard, hvis vi ser tilbage på den side her,

740
00:42:49,480 --> 00:42:53,570
når vi trak i disse ting fra WinJS og vi fik den ui-mørke,

741
00:42:53,570 --> 00:42:58,550
i virkeligheden, kan du ændre det til standard for at bruge lys ansøgning.

742
00:42:58,550 --> 00:43:03,450
ui-mørke er god til grafiske applikationer som bruger en masse billeder,

743
00:43:03,450 --> 00:43:05,740
du viser en masse af visuelt indhold.

744
00:43:05,740 --> 00:43:12,560
Hvis du viser en masse tekstmæssige indhold, UI-lys er generelt et godt valg.

745
00:43:12,560 --> 00:43:15,160
Du behøver ikke at vælge det, men jeg har skiftet til det

746
00:43:15,160 --> 00:43:17,690
og nu er du se den samme markup, samme alting,

747
00:43:17,690 --> 00:43:20,320
det er bare at bruge dybest set en inverteret ordning her

748
00:43:20,320 --> 00:43:24,770
hvor alt er at gøre det sort tekst på hvid.

749
00:43:24,770 --> 00:43:26,460
Det er alt sammen meget godt.

750
00:43:26,460 --> 00:43:30,680
Lad mig komme ud herfra, og lad os rent faktisk gør en lille smule mere med CSS.

751
00:43:30,680 --> 00:43:34,830
Jeg vil sætte det tilbage på mørke, fordi jeg synes, det er nok nemmere at se på skærmen

752
00:43:34,830 --> 00:43:36,970
når jeg begynder at gøre disse ting.

753
00:43:36,970 --> 00:43:40,150
Jeg vil erstatte kroppen en gang mere.

754
00:43:40,150 --> 00:43:44,040
Jeg vil gå her. Lad mig nuke dette.

755
00:43:44,040 --> 00:43:48,690
Lad os bringe i kroppen med klasser.

756
00:43:48,690 --> 00:43:53,000
Jeg tror, ​​du har gjort grundlæggende vælgere med CSS og ting som det allerede,

757
00:43:53,000 --> 00:43:55,380
så du ved sikkert, hvad der foregår her.

758
00:43:55,380 --> 00:43:59,250
Bare tildele nogle klasser til vores header, og vi er ved at oprette en ny div

759
00:43:59,250 --> 00:44:04,430
at ombryde resten af, at ting, som vi nu kan bruge til at style alle sammen.

760
00:44:04,430 --> 00:44:07,760
Så hvad jeg kan gøre nu, er at gå over til vores standard CSS.

761
00:44:07,760 --> 00:44:11,900
Har du kigget på medier forespørgsler endnu? Har du talt om det på alle?

762
00:44:11,900 --> 00:44:17,220
Medier forespørgsler er en del af denne emergent trend -

763
00:44:17,220 --> 00:44:19,660
eller det er en etableret tendens nu faktisk på nettet -

764
00:44:19,660 --> 00:44:22,760
for lydhør design eller adaptive,

765
00:44:22,760 --> 00:44:28,480
og ideen er, at dine programmer kan virkelig tilpasse sig ordentligt

766
00:44:28,480 --> 00:44:31,910
baseret på, hvad den enhed, de bliver vist på kan gøre.

767
00:44:31,910 --> 00:44:35,040
Så hvis du er på en mobil enhed, naturligvis du kommer ikke til at have så meget skærmplads

768
00:44:35,040 --> 00:44:41,520
da du vil på en stor 30-tommer skærm sidder med en stationær, en stor pc som.

769
00:44:41,520 --> 00:44:46,710
Så gamle svar på dette ville være at have 5, 6 forskellige versioner af den samme side

770
00:44:46,710 --> 00:44:51,350
og du vil åbne den version, der var tunet til at vis størrelse skærm.

771
00:44:51,350 --> 00:44:55,420
Ikke stor. Det er meget, meget gentagne og der er et ton af vedligeholdelse for at gøre det.

772
00:44:55,420 --> 00:44:58,120
Nu har vi noget, der hedder CSS medier forespørgsler,

773
00:44:58,120 --> 00:45:02,530
og vi kan bruge dette til automatisk at registrere, når der er bestemte størrelser

774
00:45:02,530 --> 00:45:07,030
eller visse anvendelser af dit indhold, der udføres.

775
00:45:07,030 --> 00:45:09,580
Så du kan reagere på det, og du kan sige, "Okay, i dette tilfælde

776
00:45:09,580 --> 00:45:12,580
"Du sandsynligvis ikke engang brug for mig til at fortælle dig, hvad der foregår her."

777
00:45:12,580 --> 00:45:18,020
Det er bare at sige, om denne ansøgning er knækkede, ligesom jeg viste dig før -

778
00:45:18,020 --> 00:45:20,830
sensationsprægede det og lægge det til side af skærmen -

779
00:45:20,830 --> 00:45:23,910
så lad os gøre følgende styling.

780
00:45:23,910 --> 00:45:25,850
Styling handler ikke kun om farver og den slags.

781
00:45:25,850 --> 00:45:29,860
Det handler også om dimensionering og marginer og polstring og orienteringer af indhold

782
00:45:29,860 --> 00:45:34,040
eller endda invaliderende eller muliggør hele dele af din side

783
00:45:34,040 --> 00:45:36,420
og i dette tilfælde, din app eller dit spil så godt.

784
00:45:36,420 --> 00:45:39,210
Så her kan du gøre så simpelt som du ønsker.

785
00:45:39,210 --> 00:45:46,720
Dette ville ikke være nyttige i dine apps, men det er demo tid,

786
00:45:46,720 --> 00:45:50,530
så jeg har tænkt mig at gå videre og blot tilføje i grundlæggende krop selector og sige,

787
00:45:50,530 --> 00:45:58,360
"Når jeg knækkede, så lad os gå videre og gøre baggrundsfarve og lad os vælge noget."

788
00:45:58,360 --> 00:46:00,400
Du har IntelliSense her. Dette er faktisk virkelig cool.

789
00:46:00,400 --> 00:46:05,720
I 2012 har vi tilføjet en masse ting for CSS-understøttelse og JavaScript og HTML.

790
00:46:05,720 --> 00:46:08,690
Du har selvfølgelig fået drop-down IntelliSense også, men det er ikke cool ting.

791
00:46:08,690 --> 00:46:11,730
Det fede er, at du har fået visuelle selektorer for en masse ting.

792
00:46:11,730 --> 00:46:14,120
Så du kan gå igennem og bare vælge en farve,

793
00:46:14,120 --> 00:46:17,580
eller du kan gå ud og være endnu mere specifik, og du kan vælge -

794
00:46:17,580 --> 00:46:22,330
dette vil være forfærdeligt. Jeg vil faktisk vælge en anstændig farve her.

795
00:46:22,330 --> 00:46:26,500
Se opmærkningen også, ved den måde. Det er din RGB standard format der.

796
00:46:26,500 --> 00:46:30,780
Men hvis jeg skifter opacitet, går det til at skifte over til en alfakanal selector her.

797
00:46:30,780 --> 00:46:36,910
Så du kan se, at farven med væsentlige procent gennemsigtighed, du har for at

798
00:46:36,910 --> 00:46:38,860
alle bagt lige der.

799
00:46:38,860 --> 00:46:42,530
Jeg har tænkt mig at holde det som 100%, og så når jeg er færdig med at alt er godt og rigtigt.

800
00:46:42,530 --> 00:46:46,160
Nu, hvis jeg kører den app, og vi tager den app, og vi snap det,

801
00:46:46,160 --> 00:46:49,000
at baggrundsfarven bliver automatisk justeret

802
00:46:49,000 --> 00:46:53,410
bare fordi vi har nogle CSS, der siger: "Gå gøre."

803
00:46:53,410 --> 00:46:55,580
Du kan også skrive JavaScript også, der vil gøre det samme

804
00:46:55,580 --> 00:47:03,010
eller at du kan bruge til rent faktisk at holde pause et spil, gøre ting som det.

805
00:47:03,010 --> 00:47:04,310
Det er sikkert, når du ville bruge JavaScript.

806
00:47:04,310 --> 00:47:06,610
Du ville slukke for spillet løkke på dette punkt.

807
00:47:06,610 --> 00:47:09,970
Du skulle nogle JavaScript fordi der ikke ville være noget, du ville CSS til.

808
00:47:09,970 --> 00:47:11,760
Men husk på, det er bare en begivenhed.

809
00:47:11,760 --> 00:47:14,860
Man kan sige, "Når min ansøgning er skaleret,

810
00:47:14,860 --> 00:47:17,780
"Lad os se, om vi er knækkede." Og det er det.

811
00:47:17,780 --> 00:47:24,440
>> Okay? Jeg har talt en masse. Er der spørgsmål, så langt på hvor vi er? Ja.

812
00:47:24,440 --> 00:47:29,310
[Studerende] Er der en tutorial for nogen at få flere oplysninger? >> Ja.

813
00:47:29,310 --> 00:47:33,510
Spørgsmålet er, er der en tutorial til dette? Jeg vil bare udvide det til alt.

814
00:47:33,510 --> 00:47:37,490
Der er et par ting, du kan gå til. Lad os faktisk komme ud herfra.

815
00:47:37,490 --> 00:47:40,150
Lad mig gå tilbage herude.

816
00:47:40,150 --> 00:47:45,180
Én ting at påpege, er Visual Studio selv har tutorials bygget i.

817
00:47:45,180 --> 00:47:47,650
Lad mig slippe af med dette.

818
00:47:47,650 --> 00:47:51,520
Hvis du går og oprette et nyt projekt, behøver Filer, Nyt projekt,

819
00:47:51,520 --> 00:47:56,750
og se på den venstre side, der er en online node i denne vælgeren.

820
00:47:56,750 --> 00:47:59,790
Det kommer til at tage en lille smule. Jeg er på min MyFi her.

821
00:47:59,790 --> 00:48:02,300
Men det kommer til at komme op, og det kommer til at give mig en chance for at finde skabeloner

822
00:48:02,300 --> 00:48:05,190
men også endnu vigtigere, prøver så godt.

823
00:48:05,190 --> 00:48:06,750
Så jeg kan klikke på JavaScript.

824
00:48:06,750 --> 00:48:10,050
Det kommer til at finde prøver til mig. Min opløsning er vejen højt her.

825
00:48:10,050 --> 00:48:15,070
Normalt ville du se en liste over en masse forskellige ting her.

826
00:48:15,070 --> 00:48:18,280
Hvis der er noget, du ønsker at prøve, vælge sproget,

827
00:48:18,280 --> 00:48:20,970
JavaScript her, og sige, "Jeg ved ikke, hvordan man gør geolocation".

828
00:48:20,970 --> 00:48:22,220
"Jeg ved ikke, hvordan man åbner en fil."

829
00:48:22,220 --> 00:48:25,840
"Jeg ved ikke, hvordan at drage fordel af webcam

830
00:48:25,840 --> 00:48:28,290
"Eller optimere for touch eller sådan noget."

831
00:48:28,290 --> 00:48:33,190
Der er prøver for alt: deling, søgning, app barer,

832
00:48:33,190 --> 00:48:37,520
gør fjerntliggende opkald til en tjeneste, JSON-kodning.

833
00:48:37,520 --> 00:48:40,390
Alle den slags ting der er prøver til her,

834
00:48:40,390 --> 00:48:44,560
og de er ikke store prøver, der vil tage dig hele natten til at trække fra hinanden

835
00:48:44,560 --> 00:48:46,820
bare for at finde, at én ting, du ønskede at lære.

836
00:48:46,820 --> 00:48:49,870
De er virkelig gode. De er små, ret til det punkt slags prøver.

837
00:48:49,870 --> 00:48:52,330
Jeg har lært en ton ved at gå gennem disse selv,

838
00:48:52,330 --> 00:48:55,260
og så vil jeg anbefale, at et parti som én ting.

839
00:48:55,260 --> 00:49:01,750
>> En anden ting at påpege alt er selvfølgelig jeg viste dig dev.windows.com,

840
00:49:01,750 --> 00:49:07,490
så hvis du går tilbage til det, kan du se i bunden er der også prøver her.

841
00:49:07,490 --> 00:49:12,560
Så du kan downloade dem alle på én gang, men der er også en masse andre ressourcer også her

842
00:49:12,560 --> 00:49:14,400
der kan hjælpe dig med at få op til hastighed.

843
00:49:14,400 --> 00:49:17,870
>> En anden ting, og jeg ville virkelig anbefale, at du forsøger dette,

844
00:49:17,870 --> 00:49:24,510
Jeg har det på min blog, men jeg vil bare gå lige til den.

845
00:49:24,510 --> 00:49:28,220
Jeg vil vise dig. Min blog har ressourcer og ting som.

846
00:49:28,220 --> 00:49:35,300
En af de ting at påpege, er lige her, denne ting: din idé. Din App. 30 dage.

847
00:49:35,300 --> 00:49:40,960
Hvis du klikker på dette, går det til at bringe dig til en virkelig nyttige site.

848
00:49:40,960 --> 00:49:44,650
Dette er meget mere nyttigt, end man kunne forvente.

849
00:49:44,650 --> 00:49:49,040
Dette kommer til at være 30 dage af indhold, som du dybest set kan få tips og tricks

850
00:49:49,040 --> 00:49:51,990
hele denne proces som du opretter en app.

851
00:49:51,990 --> 00:49:55,980
Og som du måske ikke forvente, kan du faktisk få det til spil også

852
00:49:55,980 --> 00:49:57,840
og telefon apps, ting som.

853
00:49:57,840 --> 00:50:01,000
Så dybest set tilmelde dig for det, og de vil sende dig tips og tricks om,

854
00:50:01,000 --> 00:50:03,010
"Har du tænkt på at gøre dette? Støtter du Snap?"

855
00:50:03,010 --> 00:50:04,900
"Her er nogle retningslinjer for, hvordan man gør det godt."

856
00:50:04,900 --> 00:50:07,440
"Har du tænkt på at indsende til butikken?"

857
00:50:07,440 --> 00:50:09,370
"Har du tænkt over, hvordan du vil sælge din ansøgning?"

858
00:50:09,370 --> 00:50:11,490
Det kommer til at gå igennem alle disse forskellige ting.

859
00:50:11,490 --> 00:50:13,380
Og faktisk, hvis du er på gaming sporet, på et tidspunkt

860
00:50:13,380 --> 00:50:17,010
vil du begynde at genkende den person, der taler til dig

861
00:50:17,010 --> 00:50:22,850
fordi jeg havde faktisk gå til Redmint at gøre de og indspillede 2 videoer der.

862
00:50:22,850 --> 00:50:25,240
Men det er alt sammen en del af gaming sporet,

863
00:50:25,240 --> 00:50:27,650
og der er også en fuld track til generel udvikling app.

864
00:50:27,650 --> 00:50:29,380
Det kaldes Generation App.

865
00:50:29,380 --> 00:50:33,460
Jeg ville helt klart anbefale det til dig så godt som supplement til prøverne.

866
00:50:33,460 --> 00:50:38,110
>> Der er en masse videoer på et websted kaldet Channel 9 så godt.

867
00:50:38,110 --> 00:50:42,790
Det er nok det sidste, jeg vil anbefale så godt før vi går videre her.

868
00:50:42,790 --> 00:50:45,280
Channel9.msdn.com.

869
00:50:45,280 --> 00:50:48,880
Det er fantastisk, fordi du ikke kommer til at læse gennem tonsvis af hvidbøger.

870
00:50:48,880 --> 00:50:53,880
Det er dybest set en masse videoer, screencasts og ting, der er lige til sagen.

871
00:50:53,880 --> 00:50:57,940
Jeg skal ikke sige, det er altid ret til det punkt. Det afhænger af, hvem der gør det taler.

872
00:50:57,940 --> 00:51:02,290
Men generelt er der nogle virkelig til-punkt videoer her

873
00:51:02,290 --> 00:51:06,230
der vil vise dig nogle bestemte ting du måske ønsker at lære eller se demoed.

874
00:51:06,230 --> 00:51:11,110
Der er også alt vores indhold fra vores konference, der skete for et par uger siden

875
00:51:11,110 --> 00:51:14,380
kaldet Build, og du vil se, lige der.

876
00:51:14,380 --> 00:51:18,450
Der er kerneteknologier til Windows 8 spil. Værsgo.

877
00:51:18,450 --> 00:51:23,150
Jeg var der, faktisk. Du kan ikke se mig. Jeg var herovre.

878
00:51:23,150 --> 00:51:27,560
Men alligevel, der er afsat, vil jeg anbefale, at du tager et kig på disse videoer.

879
00:51:27,560 --> 00:51:29,330
De er temmelig nyttigt.

880
00:51:29,330 --> 00:51:32,620
Hvis du sidder fast på noget, eller du blot ønsker at se, hvad noget kunne gøre, fyre dem op.

881
00:51:32,620 --> 00:51:36,890
>> [Guarin] Windows Mail lige sendt mig en e-mail med et link til indhold

882
00:51:36,890 --> 00:51:42,140
for de studerende til at downloade med kodeeksempler og den slags. >> [Bowen] Great.

883
00:51:42,140 --> 00:51:45,510
Awesome. Tak, Edwin.

884
00:51:45,510 --> 00:51:48,320
>> Godt. >> [Student] Jeg har et spørgsmål. >> [Bowen] Oh. Ja, tak.

885
00:51:48,320 --> 00:51:55,030
[Uhørligt student spørgsmål] >> [Bowen] Åh, jeg er glad for du spurgte det. Ja.

886
00:51:55,030 --> 00:51:58,940
Spørgsmålet var, er der en visuel grænseflade for mig at skabe ting?

887
00:51:58,940 --> 00:52:01,630
Edwin vil belønne dig klækkeligt for det spørgsmål.

888
00:52:01,630 --> 00:52:04,310
Der er en måde at gøre dette.

889
00:52:04,310 --> 00:52:09,040
Skal vi gøre det nu? Lad os gøre det nu.

890
00:52:09,040 --> 00:52:11,780
Jeg har tænkt mig at gå til det lige nu.

891
00:52:11,780 --> 00:52:14,070
Faktisk, lad mig tilføje en ting mere til denne demo,

892
00:52:14,070 --> 00:52:16,710
og så vil jeg vise dig den faktiske svar.

893
00:52:16,710 --> 00:52:21,340
Jeg skulle til at tilføje lidt mere CSS her.

894
00:52:21,340 --> 00:52:23,980
Jeg var lidt off på tangenter her.

895
00:52:23,980 --> 00:52:26,770
Lad mig sætte i nogle CSS her for at drage fordel

896
00:52:26,770 --> 00:52:29,980
af de klasser, der er føjet et lille stykke tid siden,

897
00:52:29,980 --> 00:52:33,930
til headeren til Punkt WEEE div, og derefter til greetingOutput.

898
00:52:33,930 --> 00:52:37,920
Hvis jeg gør det og køre det, kan du se nu har vi fået en lille smule anderledes polstring og marginer

899
00:52:37,920 --> 00:52:40,310
så vi har faktisk nogle forskydninger her.

900
00:52:40,310 --> 00:52:44,630
Disse er mere i retning af hvad du kommer til at forvente en endelig poleret ansøgning.

901
00:52:44,630 --> 00:52:47,770
Men jeg bare vise det til dig, fordi det er lige op CSS.

902
00:52:47,770 --> 00:52:51,910
Så de ting, du allerede kender, kan du bruge her at justere indholdet, som du ønsker.

903
00:52:51,910 --> 00:52:55,100
Du har allerede set, hvordan at gøre baggrunden skifte ud på den måde.

904
00:52:55,100 --> 00:53:02,980
>> Hvis jeg gå tilbage til vores HTML, vil jeg tilføje et sæt mere af markup,

905
00:53:02,980 --> 00:53:06,140
og det er faktisk kommer til at være en kontrol fra WinJS.

906
00:53:06,140 --> 00:53:09,840
Jeg har tænkt mig at gå ud og fange det, en etiket. Lad mig sørge for jeg gør det på den rigtige plads.

907
00:53:09,840 --> 00:53:11,740
Sandsynligvis godt nok.

908
00:53:11,740 --> 00:53:15,590
Her har jeg netop tilføjet - og vi vil gå i fuld skærm, så du kan se det hele -

909
00:53:15,590 --> 00:53:18,520
Jeg har tilføjet en etiket til næste div.

910
00:53:18,520 --> 00:53:20,890
Div hedder ratingControlDiv.

911
00:53:20,890 --> 00:53:23,090
I sig selv vil det ikke gør noget.

912
00:53:23,090 --> 00:53:28,570
Hvis du åbner dette i en browser, ville du kigge på blank, div selv.

913
00:53:28,570 --> 00:53:31,820
Men på grund af den mystiske linje kode, som jeg viste dig før,

914
00:53:31,820 --> 00:53:35,650
processen alt, går det til at lede efter noget, der ligner det -

915
00:53:35,650 --> 00:53:40,380
data-win-control - og det kommer til at finde hvad der er i denne parameter.

916
00:53:40,380 --> 00:53:44,560
Det kommer til at gøre en instans af, hvad der er det peger på.

917
00:53:44,560 --> 00:53:48,850
I dette tilfælde er det en rating kontrol, så jeg siger, "Please go og erstatte denne ting

918
00:53:48,850 --> 00:53:51,400
"Med hvad du behøver at gøre for at gøre en rating kontrol."

919
00:53:51,400 --> 00:53:56,610
Det kunne være en flip kontrol, kunne det være de fremskridt, ring eller hvad kontrol du vil bruge.

920
00:53:56,610 --> 00:53:59,390
De er alle kommer til at arbejde stort set den samme måde.

921
00:53:59,390 --> 00:54:02,920
Du bruger standard HTML5 markup til at angive, hvad du ønsker,

922
00:54:02,920 --> 00:54:07,670
og så er du nødt til at få en kontrol i slutningen af ​​dette. Lad mig køre dette.

923
00:54:07,670 --> 00:54:12,270
Jeg har lige kopieret det ind, og nu, at markup bliver det,

924
00:54:12,270 --> 00:54:15,280
der er faktisk en lang række af HTML-elementer.

925
00:54:15,280 --> 00:54:18,440
Disse er alle individuelle billeder, og der er divs omkring dem med vælgere.

926
00:54:18,440 --> 00:54:22,610
Forhåbentlig kan du se, at. Det er lidt subtil.

927
00:54:22,610 --> 00:54:27,380
Jeg kan svæve over de forskellige elementer, og det kommer til at tillade mig at se rating her.

928
00:54:27,380 --> 00:54:31,560
Jeg kan klikke på det, og det husker den rating, men det er om det.

929
00:54:31,560 --> 00:54:33,100
Det er ikke rigtig gøre noget med rating.

930
00:54:33,100 --> 00:54:35,230
>> Den ene sidste ting, jeg vil vise dig på denne

931
00:54:35,230 --> 00:54:37,820
før vi skifter til en mere visuel design erfaring

932
00:54:37,820 --> 00:54:42,680
er en lille smule kode, som jeg kan bruge til at reagere på disse WinJS kontrol.

933
00:54:42,680 --> 00:54:47,540
Lad mig komme ud af det, tilbage ud af fuld skærm,

934
00:54:47,540 --> 00:54:52,690
og skifte over til JS her for sekund.

935
00:54:52,690 --> 00:54:57,450
Jeg kan gøre det lige her. Jeg tror jeg vil udskifte det hele.

936
00:54:57,450 --> 00:55:03,080
Faktisk tror jeg, det vil erstatte det hele, men vi vil finde ud af sammen.

937
00:55:03,080 --> 00:55:07,350
Jeg vil sætte det ind her. Ja. Jeg har tænkt mig at slette denne også.

938
00:55:07,350 --> 00:55:11,790
Hvad gjorde jeg tilføje? Det ligner en masse. Det er ikke meget.

939
00:55:11,790 --> 00:55:14,920
Jeg har lige udvidet denne linje kode, som jeg allerede talt om før,

940
00:55:14,920 --> 00:55:18,590
og jeg siger, "Når alt er gjort, når der er foretaget alle mine knapper,

941
00:55:18,590 --> 00:55:23,660
"Så gør det her." Så køre denne funktion kaldes afsluttet.

942
00:55:23,660 --> 00:55:27,080
I dette tilfælde er det ting, du kan regne ud.

943
00:55:27,080 --> 00:55:29,040
Gå ud og find det div kontrol.

944
00:55:29,040 --> 00:55:30,790
Faktisk er der en ting, jeg bør påpege.

945
00:55:30,790 --> 00:55:35,630
Det næste linje er faktisk siger, "Jeg har fået at ratingControlDiv".

946
00:55:35,630 --> 00:55:39,770
"Jeg ønsker at tale med den, som om det var en reel kontrol, en WinJS kontrol."

947
00:55:39,770 --> 00:55:42,020
Så dybest set, du beder om, at der fra det.

948
00:55:42,020 --> 00:55:44,600
Du siger, "Jeg vil gerne tale med dig som en kontrol."

949
00:55:44,600 --> 00:55:47,810
Og så kan du begynde at sige ting som, "Vi kommer til at tilføje en lytter til dig

950
00:55:47,810 --> 00:55:51,430
"Så når du skiftede vi kan reagere på det."

951
00:55:51,430 --> 00:55:56,930
Og så kan vi også gøre ting som dette. Faktisk, det er den gamle kode der.

952
00:55:56,930 --> 00:55:59,600
Jeg tror, ​​jeg mangler indsætning i én funktion mere,

953
00:55:59,600 --> 00:56:05,030
og det ville være den egentlige funktion, der ville reagere på rating kontrol ændres.

954
00:56:05,030 --> 00:56:07,710
Lad mig pop der i lige hernede,

955
00:56:07,710 --> 00:56:09,840
et eller andet sted rundt der.

956
00:56:09,840 --> 00:56:14,930
Og i dette tilfælde er den eneste, der er nyt, er, at vi går ind i

957
00:56:14,930 --> 00:56:21,000
hvad rating kontrol fortæller os, og vi beder om, hvad der kaldes den tentativeRating.

958
00:56:21,000 --> 00:56:23,150
Der er en masse forskellige andre ting, at kontrollen kan fortælle dig,

959
00:56:23,150 --> 00:56:25,310
og det går kontrol kontrol.

960
00:56:25,310 --> 00:56:29,140
Det er meget ligetil. Du vil være i stand til at finde ud af det ingen problemer overhovedet.

961
00:56:29,140 --> 00:56:34,040
Jeg køre dette, og nu når jeg ændre ratings og klik på rating,

962
00:56:34,040 --> 00:56:36,480
du kan se nu er det faktisk at reagere på det.

963
00:56:36,480 --> 00:56:40,280
Det er at sætte denne rating på skærmen i det ellers tomme div tag

964
00:56:40,280 --> 00:56:42,970
under bedømmelse kontrol.

965
00:56:42,970 --> 00:56:46,670
Det er det magiske af en masse ting her også.

966
00:56:46,670 --> 00:56:49,580
Så som du skabe applikationer til Windows Store,

967
00:56:49,580 --> 00:56:52,930
der er et væld af knapper, som du bare kan bruge. De arbejder alle som denne.

968
00:56:52,930 --> 00:56:58,670
>> Lad mig vise dig den visuelle side af at designe for disse applikationer.

969
00:56:58,670 --> 00:57:03,440
Den gode nyhed er, du vil allerede have dette værktøj, når du installerer alt

970
00:57:03,440 --> 00:57:06,240
hvis du går til at downloade, og du får Visual Studio.

971
00:57:06,240 --> 00:57:09,890
Jeg kan højreklikke på dette. Jeg vil ikke zoome ind

972
00:57:09,890 --> 00:57:12,040
Det bare siger Åbn i Blend.

973
00:57:12,040 --> 00:57:16,040
Blend er et andet værktøj, der fungerer side om side med Visual Studio

974
00:57:16,040 --> 00:57:19,230
og er fokuseret meget mere på design side af tingene,

975
00:57:19,230 --> 00:57:23,660
så det virkelig overflader værktøjer, der er optimeret til at skabe stilarter,

976
00:57:23,660 --> 00:57:29,720
skabe animationer, der arbejder med CSS, en masse ting i den slags vene.

977
00:57:29,720 --> 00:57:36,380
Her hvad der skal være meget interessant og temmelig indlysende straks er vi kigger på app.

978
00:57:36,380 --> 00:57:40,060
Forhåbentlig vi stadig er.

979
00:57:40,060 --> 00:57:42,650
I stedet for at kode, som vi stadig kan se forneden,

980
00:57:42,650 --> 00:57:45,350
vi ser den faktiske repræsentation af ansøgningen.

981
00:57:45,350 --> 00:57:49,640
Hvad mere er, det er ikke bare en repræsentation af den app, er det faktisk den app kører.

982
00:57:49,640 --> 00:57:52,010
Og det er hvad der virkelig er rart om Blend.

983
00:57:52,010 --> 00:57:58,620
Teamet har gjort et stort arbejde for at bringe HTML og JavaScript og CSS i dette værktøj.

984
00:57:58,620 --> 00:58:01,930
Nu kan du faktisk, hvis du er nysgerrig: "Hvad betyder det? Hvad kan jeg gøre?"

985
00:58:01,930 --> 00:58:08,310
Jeg kan faktisk designe til denne ansøgning, selv om ting som dette ikke findes i min markup.

986
00:58:08,310 --> 00:58:13,230
Husk, at Ratingen kontrol? Det var bare et div tag.

987
00:58:13,230 --> 00:58:17,090
Denne ting, at stjerne, kun findes på runtime. Hvordan kan jeg vide det?

988
00:58:17,090 --> 00:58:20,300
Der er en lille smule magi herovre.

989
00:58:20,300 --> 00:58:21,700
Se disse lynnedslag?

990
00:58:21,700 --> 00:58:25,570
Hver gang du ser et lyn, der betyder, at det blev skabt af noget på runtime.

991
00:58:25,570 --> 00:58:31,770
Nogle JavaScript løb og vendte noget ind i dette eller skabt dette med en vis logik.

992
00:58:31,770 --> 00:58:37,100
Disse stjerner, som du ser der blev skabt af JavaScript ved WinJS.

993
00:58:37,100 --> 00:58:41,800
Det gode er, betyder det ikke noget for mig, kan jeg stadig designe det,

994
00:58:41,800 --> 00:58:44,410
Jeg kan stadig gå ind og ændre det, kan jeg finde ud af, hvad der foregår her,

995
00:58:44,410 --> 00:58:50,260
Jeg kan se på CSS, kan jeg gå videre og finde ud af, hvorfor farven er den måde, det er,

996
00:58:50,260 --> 00:58:54,610
Jeg kan begynde at rode med ting og gøre tingene forfærdelig,

997
00:58:54,610 --> 00:58:58,360
hvad jeg ønsker at gøre.

998
00:58:58,360 --> 00:59:01,020
Faktisk vil jeg lade tingene alene.

999
00:59:01,020 --> 00:59:03,980
Men du kan se her det er alle de CSS og det viser dig her.

1000
00:59:03,980 --> 00:59:10,120
Hvis jeg gå op til der, det vil vise dig alt, hvad de kalder Winning,

1001
00:59:10,120 --> 00:59:14,850
Så CSS-regler, der er det mest specifikke og den mest valgt til denne post,

1002
00:59:14,850 --> 00:59:17,110
som du har sikkert allerede gået over i dine klasser,

1003
00:59:17,110 --> 00:59:22,000
hvor man kan sige, at der er en generel skrifttype, vi anvender til alt,

1004
00:59:22,000 --> 00:59:26,860
men fordi det er en H1 og jeg har en farve er defineret for H1S,

1005
00:59:26,860 --> 00:59:29,820
det kommer til at være denne farve, og det er fordi det er mere specifik end body1.

1006
00:59:29,820 --> 00:59:32,590
Denne ene ting lige her viser dig alt det,

1007
00:59:32,590 --> 00:59:35,470
og det er virkelig kraftfuld ting, som du får mere komplekse,

1008
00:59:35,470 --> 00:59:38,160
du undrer dig, hvorfor disse ting er den måde, de er.

1009
00:59:38,160 --> 00:59:41,020
Det vil faktisk fortælle dig, og du kan vælge nogen af ​​disse elementer her.

1010
00:59:41,020 --> 00:59:43,370
Denne farve er ikke så slemt, faktisk.

1011
00:59:43,370 --> 00:59:47,150
Du kan vælge dem. Forhåbentlig kan du se dette.

1012
00:59:47,150 --> 00:59:52,410
For alt det, du har på din ansøgning, kan du se en hel kaskade

1013
00:59:52,410 --> 00:59:56,070
af alle de CSS, der kunne have anvendt til, og som man er ved at vinde,

1014
00:59:56,070 --> 00:59:58,050
som man rent faktisk fandt forrang.

1015
00:59:58,050 --> 01:00:00,930
Disse er slags kedelige. Der er ikke meget foregår i nogle af disse.

1016
01:00:00,930 --> 01:00:04,660
Hvis jeg går og ændre farve, så vil du begynde at se nogle cascading der.

1017
01:00:04,660 --> 01:00:07,760
Du kan også bruge HTML her.

1018
01:00:07,760 --> 01:00:12,490
Jeg kan gå igennem og ændre HTML-egenskaber for alle disse ting, som jeg ønsker.

1019
01:00:12,490 --> 01:00:14,620
Der er bare tonsvis af ting her.

1020
01:00:14,620 --> 01:00:18,070
>> Jeg ønsker ikke at tage din tid ved at gå igennem alt her. Bare ved, det er her.

1021
01:00:18,070 --> 01:00:21,700
Der er en masse af design-orienteret funktionalitet, der er bare til rådighed for dig

1022
01:00:21,700 --> 01:00:26,730
så du kan holde visuelle, arbejde med programmet, og ikke er nødt til at gøre en masse for at gætte

1023
01:00:26,730 --> 01:00:32,180
at du ville have at gøre normalt og cykling tilbage fra en browser tilbage i dit design,

1024
01:00:32,180 --> 01:00:33,940
tilbage til browseren.

1025
01:00:33,940 --> 01:00:37,010
Det er virkelig cool ting til det, og efterhånden som du udvikler en Windows Store app,

1026
01:00:37,010 --> 01:00:39,650
det kommer til at gøre dig en masse mere produktive.

1027
01:00:39,650 --> 01:00:45,150
>> Du kan også se det er at spore markup her og din CSS

1028
01:00:45,150 --> 01:00:47,270
som du arbejder gennem forskellige ting.

1029
01:00:47,270 --> 01:00:50,180
Det er sandsynligvis virkelig svært for dig at se, at især på video,

1030
01:00:50,180 --> 01:00:54,680
men det er hvad der foregår her, og jeg vil anbefale dig at blive fortrolig med det.

1031
01:00:54,680 --> 01:00:57,240
Det vil spare dig for en masse tid. Det er Blend.

1032
01:00:57,240 --> 01:01:00,520
Hvis du foretager ændringer her, bliver de automatisk kommer til at bære tilbage over

1033
01:01:00,520 --> 01:01:01,870
til Visual Studio.

1034
01:01:01,870 --> 01:01:06,590
Det er de samme filer, det er det samme alt. Jeg vil overlade det alene.

1035
01:01:06,590 --> 01:01:08,650
Jeg har en bedre eksempel, som jeg vil vise dig.

1036
01:01:08,650 --> 01:01:11,660
Men hvis jeg foretaget en ændring der og gemte det, og jeg kom tilbage til Visual Studio, vil det sige,

1037
01:01:11,660 --> 01:01:16,390
"Hey, du lige ændret noget. Kan jeg genindlæse den for dig?" Ja.

1038
01:01:16,390 --> 01:01:18,770
Og du bruger den samme ting der.

1039
01:01:18,770 --> 01:01:21,320
Det er slutningen af ​​denne særlige prøve.

1040
01:01:21,320 --> 01:01:28,170
>> Jeg vil gerne vise dig en højere ende prøve bare for at give dig et billede af andre funktioner

1041
01:01:28,170 --> 01:01:30,350
du måske tænke så godt.

1042
01:01:30,350 --> 01:01:32,280
Dette er en prøve app, som du kan downloade.

1043
01:01:32,280 --> 01:01:35,620
Hvis du ser noget, der hedder Windows Camp in a Box,

1044
01:01:35,620 --> 01:01:40,340
der er nogle prøver, der er i det, og en af ​​dem er Contoso kogebog.

1045
01:01:40,340 --> 01:01:41,640
Jeg kan bare køre dette for dig.

1046
01:01:41,640 --> 01:01:44,700
Skærmen Brugerdefineret splash. Dette er Grid view ansøgning.

1047
01:01:44,700 --> 01:01:49,590
De har bundet nogle brugerdefinerede data her. Du kan navigere gennem dette.

1048
01:01:49,590 --> 01:01:53,090
Du kan gå og tage et kig på forskellige ting, der vil gøre os sultne på en fredag ​​eftermiddag.

1049
01:01:53,090 --> 01:01:57,760
Det ved jeg ikke. Hvad vil gøre mig mest sulten?

1050
01:01:57,760 --> 01:02:00,530
Det ved jeg ikke. Jeg bare at vælge én.

1051
01:02:00,530 --> 01:02:02,460
Du går ind i disse ting. Det vil vise dig opskriften.

1052
01:02:02,460 --> 01:02:04,900
Du kunne også, i stedet for at klikke på et emne,

1053
01:02:04,900 --> 01:02:10,360
du kan gå ret til denne kategori af indhold, denne del af indholdet.

1054
01:02:10,360 --> 01:02:15,590
I dette tilfælde, kan du læse masser af falske latin fortæller dig alt om disse opskrifter her

1055
01:02:15,590 --> 01:02:17,720
og derefter gå lige ind i bestemt opskrift.

1056
01:02:17,720 --> 01:02:22,770
Dette understøtter også ting som deling, som jeg viste dig før med billederne.

1057
01:02:22,770 --> 01:02:26,160
Du kan også søge ind i denne ansøgning også.

1058
01:02:26,160 --> 01:02:28,880
Det er meget ligetil at gøre søgningen.

1059
01:02:28,880 --> 01:02:31,300
Dybest set, er du bare at få en tekststreng fra Windows

1060
01:02:31,300 --> 01:02:34,720
og du beslutte, hvordan du vil håndtere søgning med det.

1061
01:02:34,720 --> 01:02:39,830
Det er et par linjer kode for at få det, og så hvad du gør med det, efter der er helt op til dig.

1062
01:02:39,830 --> 01:02:44,180
>> Her har de også en app bar, hvor de bruger en anden funktionalitet.

1063
01:02:44,180 --> 01:02:45,430
Jeg vil bare fortælle dig, hvad det er.

1064
01:02:45,430 --> 01:02:48,220
En påmindelse kommer til at bruge, hvad der kaldes en toast meddelelse.

1065
01:02:48,220 --> 01:02:52,930
Dette er virkelig praktisk for at lade brugeren vide, når ting er sket,

1066
01:02:52,930 --> 01:02:55,850
ligesom en ansøgning blev installeret, eller noget var afsluttet.

1067
01:02:55,850 --> 01:02:57,950
Det er også godt for spil også.

1068
01:02:57,950 --> 01:03:02,360
Hvis du har en vedvarende verden eller en pointtavle og en service, der er vært for det

1069
01:03:02,360 --> 01:03:08,490
måske på en separat maskine, kan disse meddelelser sendes i en maskine

1070
01:03:08,490 --> 01:03:12,240
og selvom brugeren ikke bruger dit spil, spille dine spil eller kører din app,

1071
01:03:12,240 --> 01:03:15,170
kan de stadig få meddelelser om disse former for arrangementer.

1072
01:03:15,170 --> 01:03:19,350
Så man kan sige, "Din borg er blevet ødelagt eller er bare om ødelagt."

1073
01:03:19,350 --> 01:03:22,870
"Kom tilbage og forsvare det," eller noget lignende.

1074
01:03:22,870 --> 01:03:26,830
Du klikker på meddelelsen, du går lige tilbage i spillet, og du kan spille det.

1075
01:03:26,830 --> 01:03:32,170
Så den slags ting kan hjælpe virkelig trække folk tilbage i din app temmelig effektivt.

1076
01:03:32,170 --> 01:03:37,450
>> Der er også støtte i denne ansøgning for at bruge mikrofon, webcam,

1077
01:03:37,450 --> 01:03:39,560
laver video og tage billeder.

1078
01:03:39,560 --> 01:03:42,080
Du kan også fastgøre en sekundær flise.

1079
01:03:42,080 --> 01:03:46,760
Det er nyttigt, hvis du bare ønsker at have en flise, der går lige til bestemt indhold.

1080
01:03:46,760 --> 01:03:49,960
I dette tilfælde går det ret til denne opskrift.

1081
01:03:49,960 --> 01:03:51,300
Alt jeg nævne jeg bare vise

1082
01:03:51,300 --> 01:03:53,270
fordi det er ting, du kan tænke på at bruge så godt.

1083
01:03:53,270 --> 01:03:57,590
For det meste, at de er meget enkel at anvende.

1084
01:03:57,590 --> 01:04:00,070
Jeg vil bare anbefale du sætter op at prøve explorer

1085
01:04:00,070 --> 01:04:03,600
og finde en prøve, der kan vise dig, hvordan du gør det.

1086
01:04:03,600 --> 01:04:07,140
Det er temmelig ligetil at bringe dem ind i dine apps der.

1087
01:04:07,140 --> 01:04:11,030
>> Jeg vil vise dig noget andet, der er temmelig cool her.

1088
01:04:11,030 --> 01:04:15,230
Jeg vil snap denne ansøgning, og jeg har tænkt mig at gå tilbage til Visual Studio.

1089
01:04:15,230 --> 01:04:18,870
Denne applikation kører. Det kører fra Visual Studio.

1090
01:04:18,870 --> 01:04:21,370
Jeg kan gøre nogle ret cool ting med det.

1091
01:04:21,370 --> 01:04:23,840
Jeg har faktisk en mulighed for at vælge et element,

1092
01:04:23,840 --> 01:04:28,250
og jeg kan gå over her til live program, og jeg kan sige,

1093
01:04:28,250 --> 01:04:34,000
"Jeg spekulerer på, hvorfor er Tilberedningstid en lille smule lysere grå end selve titlen?"

1094
01:04:34,000 --> 01:04:35,680
Jeg kan klikke på det.

1095
01:04:35,680 --> 01:04:38,080
Det kommer til at synkronisere det tilbage i Visual Studio,

1096
01:04:38,080 --> 01:04:43,780
og det kommer til at vise mig præcis det indhold, der resulterede i, at en del af brugergrænsefladen.

1097
01:04:43,780 --> 01:04:47,270
Så i dette tilfælde, er det post-undertekster og h4 dobbelt konstruktion,

1098
01:04:47,270 --> 01:04:51,110
og at der formentlig fortæller os, hvad vi har brug for at vide, fordi som en h4 inden for denne sammenhæng,

1099
01:04:51,110 --> 01:04:53,550
det kommer til at få en vis form for skrifttype.

1100
01:04:53,550 --> 01:04:56,410
Men hvis jeg stadig ikke ved hvorfor, kan jeg klikke på Trace Styles.

1101
01:04:56,410 --> 01:05:02,330
Jeg kan derefter udvide ud farve og jeg kan finde ud af præcist, hvorfor denne farve ikke er den kropsfarve

1102
01:05:02,330 --> 01:05:04,640
men i virkeligheden er noget andet.

1103
01:05:04,640 --> 01:05:07,210
Det er stort set de dev værktøjer fra Internet Explorer

1104
01:05:07,210 --> 01:05:09,530
til en vis grad bragt i Visual Studio.

1105
01:05:09,530 --> 01:05:12,110
Hvis du har arbejdet med Chrome Dev Tools, Firebug, ting som der,

1106
01:05:12,110 --> 01:05:14,720
den slags værktøjer, der er i browseren,

1107
01:05:14,720 --> 01:05:17,340
den slags funktionalitet er blevet bragt lige ind i Visual Studio

1108
01:05:17,340 --> 01:05:22,090
så du ikke faktisk nødt til at starte en browser og arbejde med disse værktøjer hver for sig.

1109
01:05:22,090 --> 01:05:24,320
Nu har jeg en Windows Store app bare kører,

1110
01:05:24,320 --> 01:05:27,840
og jeg kan begynde at trække det fra hinanden og finde ud af, hvorfor tingene gør, hvad de er.

1111
01:05:27,840 --> 01:05:30,440
>> Jeg kan også gøre det på denne måde også.

1112
01:05:30,440 --> 01:05:35,020
Jeg kan gå og bare hente noget lige fra opmærkningen og finde ud af, hvad det er

1113
01:05:35,020 --> 01:05:38,560
i selve stævningen. Jeg tror, ​​jeg har gået alt.

1114
01:05:38,560 --> 01:05:41,440
Her jeg svæver over dette. Jeg kan vælge den.

1115
01:05:41,440 --> 01:05:45,540
Det kommer til at vise mig i den aktuelle kørende program, hvor at ting er

1116
01:05:45,540 --> 01:05:48,070
at jeg nu har tænkt at klikke på i opmærkningen.

1117
01:05:48,070 --> 01:05:49,700
Virkelig cool stuff.

1118
01:05:49,700 --> 01:05:52,710
Som du forsøger at regne ud, hvad der foregår, og hvad HTML gør,

1119
01:05:52,710 --> 01:05:56,080
hvad CSS gør, holde dette i tankerne.

1120
01:05:56,080 --> 01:05:58,450
Husk dette er her for dig

1121
01:05:58,450 --> 01:06:02,070
og også, at Blend kan arbejde med en levende kørende program.

1122
01:06:02,070 --> 01:06:06,070
>> Den ene sidste ting, jeg ville vise dig med denne ansøgning -

1123
01:06:06,070 --> 01:06:09,290
Af den måde, det viser dig deltaer som tingene ændrer sig også,

1124
01:06:09,290 --> 01:06:11,160
så du kan se for de gule højdepunkter.

1125
01:06:11,160 --> 01:06:14,060
Det er ting, der har lige skiftet i ansøgningen.

1126
01:06:14,060 --> 01:06:16,350
Men en sidste ting. Jeg ønsker at gå tilbage til Blend bare for en anden her.

1127
01:06:16,350 --> 01:06:21,790
Vi åbner dette op, Open i Blend, samme app, samme alt.

1128
01:06:21,790 --> 01:06:28,660
Jeg vil bare gerne vise dig oplevelsen her er ikke bare du sidder fast på hjemmesiden

1129
01:06:28,660 --> 01:06:32,880
kigge på de ting, du får som standard, når du kører app og lad det sidde der.

1130
01:06:32,880 --> 01:06:36,490
Du kan også slå denne temmelig lille ikon op her.

1131
01:06:36,490 --> 01:06:38,560
Det hedder interaktiv tilstand.

1132
01:06:38,560 --> 01:06:41,560
Du klikker på det. Det kommer til at opdrage din ansøgning.

1133
01:06:41,560 --> 01:06:43,730
Du er ikke i designtilstand længere, så du ikke kommer til at være at klikke på ting

1134
01:06:43,730 --> 01:06:47,270
at ændre funktionalitet, men du kan faktisk arbejde med ansøgningen nu.

1135
01:06:47,270 --> 01:06:51,560
Du kan klikke igennem, kan du gøre hvad, komme til en opskrift, der interesserer dig

1136
01:06:51,560 --> 01:06:54,810
eller til en kategori. Lad os gå til denne kategori.

1137
01:06:54,810 --> 01:06:56,880
Jeg vil sige, "Okay, her er hvor jeg ønsker at designe."

1138
01:06:56,880 --> 01:06:59,680
Derefter skal du klikke på denne knap igen, vil det bringe dig tilbage i Design overflade,

1139
01:06:59,680 --> 01:07:02,130
og nu kan du gøre alle de ting, som jeg talte om før.

1140
01:07:02,130 --> 01:07:06,230
Jeg vil holde klikke indtil jeg får dette er valgt, skal du finde ud af dens dimensioner,

1141
01:07:06,230 --> 01:07:09,890
finde ud af HTML for det, CSS for det

1142
01:07:09,890 --> 01:07:14,990
for et kørende program, nogle senere del af ansøgningen.

1143
01:07:14,990 --> 01:07:17,780
Meget, meget nyttig. Jeg vil vise dette til dig.

1144
01:07:17,780 --> 01:07:21,340
Venligst holde det i tankerne, hvis du søger ind at skrive kode med dette

1145
01:07:21,340 --> 01:07:26,070
fordi det kommer til at spare dig for en masse besvær, og det er temmelig god ting.

1146
01:07:26,070 --> 01:07:32,370
Det er temmelig meget alt jeg ville vise dig på Blend og Visual Studio for alt dette.

1147
01:07:32,370 --> 01:07:36,130
>> Eventuelle spørgsmål om nogen af ​​disse værktøjer?

1148
01:07:36,130 --> 01:07:40,000
Noget som helst? >> [Guarin] Jeg har ting til at give ud, så gode spørgsmål, gode ting.

1149
01:07:40,000 --> 01:07:43,700
>> [Bowen griner] Jeg har allerede vist jer mine demoer her.

1150
01:07:43,700 --> 01:07:47,000
Jeg har tænkt mig at sætte den på siden Ressourcer og drej til spørgsmål nu.

1151
01:07:47,000 --> 01:07:53,850
Denne første henvisning er, at Generation App site med spillets sporet og app spor.

1152
01:07:53,850 --> 01:07:55,040
Tilmeld dig for dem.

1153
01:07:55,040 --> 01:07:57,210
Du behøver ikke at vente de 30 dage til at få indholdet.

1154
01:07:57,210 --> 01:08:00,370
Du kan begynde at gå og kigge på indholdet, som du ønsker.

1155
01:08:00,370 --> 01:08:04,380
Jeg forstår dine tidsrammer kan være anderledes end - [griner]

1156
01:08:04,380 --> 01:08:07,780
Så hvornår er det hackathon? Det er et par uger, right?

1157
01:08:07,780 --> 01:08:09,620
Så du behøver ikke have de 30 dage til at vente.

1158
01:08:09,620 --> 01:08:13,180
Så ja, kan du tilmelde dig for, og så bare begynde at trække indholdet ud fra det.

1159
01:08:13,180 --> 01:08:15,320
Også Dev og Design Centers.

1160
01:08:15,320 --> 01:08:17,620
Og jeg nævner ikke dette, men der er også den Store Docs.

1161
01:08:17,620 --> 01:08:22,880
Dette ville være til efter hackathon som du er klar til at begynde at indsende dine apps til butikken.

1162
01:08:22,880 --> 01:08:27,350
Der er nogle nyttige retningslinjer her, nogen vejledning om, hvordan man får tingene ind i butikken,

1163
01:08:27,350 --> 01:08:29,960
nogle almindelige problemer, der kan rejse dig op,

1164
01:08:29,960 --> 01:08:32,540
og det er slutningen af ​​disse ressourcer.

1165
01:08:32,540 --> 01:08:35,300
>> Så hvad der er på dit sind? Alt andet, som du -

1166
01:08:35,300 --> 01:08:40,580
[Guarin] Hvem tænker på at gøre en Windows app til CS50? Fedt.

1167
01:08:40,580 --> 01:08:42,200
[Bowen] Cool. Store.

1168
01:08:44,149 --> 01:08:49,410
>> Eventuelle spørgsmål om de ting, du har set hidtil, og hvordan det relaterer til dette?

1169
01:08:49,410 --> 01:08:54,540
For eksempel, jeg med mere tid kunne tage et spil, som jeg har skrevet

1170
01:08:54,540 --> 01:08:57,310
og der kører i browseren, og lige slags gå gennem processen

1171
01:08:57,310 --> 01:08:59,870
at bringe det ind i Visual Studio og gør det til en Windows Store app.

1172
01:08:59,870 --> 01:09:02,870
Det tager mere tid, end vi egentlig skulle omfatte i dag,

1173
01:09:02,870 --> 01:09:08,010
men den korte version er at det er den samme kode, som du har kørende i browseren,

1174
01:09:08,010 --> 01:09:11,680
og de ting, du ændrer er de ting, du beslutter dig for at tilslutte til Windows 8.

1175
01:09:11,680 --> 01:09:16,220
Så hvis du ønsker at bruge charme, hvis du ønsker at søge eller dele,

1176
01:09:16,220 --> 01:09:19,899
skal du oprette en app bar at gemme væk nogle funktioner på det,

1177
01:09:19,899 --> 01:09:21,939
de er den slags ting, som du ville ændre.

1178
01:09:21,939 --> 01:09:25,229
Men kernen i din web app kan forblive intakt.

1179
01:09:25,229 --> 01:09:29,590
Igen, så længe det fungerer i IE10, går det at være en rigtig nem havn

1180
01:09:29,590 --> 01:09:33,680
at bringe ting ind i Visual Studio, i Blend, og gøre det til en Windows Store app.

1181
01:09:33,680 --> 01:09:37,500
Igen, de eneste ting, du bliver nødt til at lære er de andre funktioner

1182
01:09:37,500 --> 01:09:41,830
som du kan bruge til at lyse op en ansøgning, som en levende fliser og den slags ting.

1183
01:09:41,830 --> 01:09:46,899
>> Ja. >> [Studerende] Mit spørgsmål er om at arbejde mobilt.

1184
01:09:46,899 --> 01:09:52,210
Så hvis du laver en app, der fungerer som en app på skrivebordet,

1185
01:09:52,210 --> 01:09:56,480
er det virkelig nemt at overføre det til mobil, eller er der en -

1186
01:09:56,480 --> 01:10:01,270
Spørgsmålet er, hvis jeg laver en Windows Store app, der er virkelig optimeret til dette miljø

1187
01:10:01,270 --> 01:10:06,430
og jeg ønsker at bringe det til en mobil verden, hvad der er involveret med at gøre det?

1188
01:10:06,430 --> 01:10:10,060
At ligesom mange spørgsmål, er altid en konstant skiftende svar.

1189
01:10:10,060 --> 01:10:16,190
Den gode nyhed er, hvis du stikning med HTML og JavaScript, CSS,

1190
01:10:16,190 --> 01:10:18,720
hvis du starter fra en Windows Store app,

1191
01:10:18,720 --> 01:10:20,590
det kommer til at lade dig bringe det til nettet

1192
01:10:20,590 --> 01:10:24,650
og derefter bruge disse former for teknikker, ligesom medier forespørgsler og ting,

1193
01:10:24,650 --> 01:10:27,180
at tilpasse sig forskellige størrelse enheder.

1194
01:10:27,180 --> 01:10:29,900
Når det er sagt, er der altid rammer og ting derude

1195
01:10:29,900 --> 01:10:33,450
at støtte strækker sig ud af forskellige teknologier, forskellige platforme.

1196
01:10:33,450 --> 01:10:35,670
Det ændrer sig hele tiden.

1197
01:10:35,670 --> 01:10:40,030
Vi er også ændre ting så godt, som vi ser mod hvad vi har nu

1198
01:10:40,030 --> 01:10:42,950
faktisk ud med Windows Phone 8.

1199
01:10:42,950 --> 01:10:44,930
Vi har nogle fælles centrale infrastrukturer

1200
01:10:44,930 --> 01:10:48,180
udbydes mellem applikationer for disse miljøer.

1201
01:10:48,180 --> 01:10:51,200
Så de ting, du gør for at oprette en Windows Store app,

1202
01:10:51,200 --> 01:10:57,790
en masse, der kan bære over i en Windows Phone 8 ansøgning så godt.

1203
01:10:57,790 --> 01:11:02,270
Det er igen en spirende historie, så der er noget indhold om, at der på Bygn.

1204
01:11:02,270 --> 01:11:06,780
SDK lige kommet ud for lidt siden. Det var netop frigivet en lidt siden.

1205
01:11:06,780 --> 01:11:09,920
Men i form af andre platforme,

1206
01:11:09,920 --> 01:11:13,360
du sandsynligvis løbe ind i mange cross-platform rammer så godt.

1207
01:11:13,360 --> 01:11:16,170
Den gode nyhed er de ting, du laver her,

1208
01:11:16,170 --> 01:11:19,620
kernefunktionaliteten er lige op web standard stuff.

1209
01:11:19,620 --> 01:11:24,010
De eneste ting, der ikke ville oversætte let er de ting, Windows 8 gør,

1210
01:11:24,010 --> 01:11:28,060
men det er ingen overraskelse, fordi det er en funktion i Windows.

1211
01:11:28,060 --> 01:11:34,090
Du kommer ikke til at finde deling eller lignende former for kontrakter på hver anden platform.

1212
01:11:34,090 --> 01:11:37,480
Så det er de ting, du ønsker at fra et design perspektiv

1213
01:11:37,480 --> 01:11:40,820
sørg for at have måder at slags abstrakt at ud, så du kan sige,

1214
01:11:40,820 --> 01:11:42,970
"Hvis jeg kører på dette, kan jeg gøre."

1215
01:11:42,970 --> 01:11:48,120
Hvis jeg ikke er, er der nogle design mønstre, du kan bruge til at slags skjule, at ting væk.

1216
01:11:48,120 --> 01:11:53,360
Men holder det i tankerne. Ja. Undskyld. Værsgo.

1217
01:11:53,360 --> 01:11:58,130
>> [Studerende] Hvis jeg ønsker at teste min Windows app oven på [uhørligt]

1218
01:11:58,130 --> 01:12:02,310
[Bowen] Ja. Jeg sprang en ting mere også. Ja.

1219
01:12:02,310 --> 01:12:04,910
Jeg vil besvare dit spørgsmål først, så vil jeg vise dig en funktion, jeg glemte at nævne.

1220
01:12:04,910 --> 01:12:09,220
Vi har nogle maskiner til rådighed lokalt. Undskyld.

1221
01:12:09,220 --> 01:12:11,240
Spørgsmålet var, hvordan kan jeg teste tingene på enheder

1222
01:12:11,240 --> 01:12:14,230
hvis jeg ikke tilfældigvis har en hel masse ting til at vælge fra?

1223
01:12:14,230 --> 01:12:17,130
[Guarin] Vi lånte jer, tror jeg, 5 eller 6. Hvor mange skal du bruge?

1224
01:12:17,130 --> 01:12:20,940
[Studerende] Vi fik 4 af dem. >> Okay. Du fyre fik 4 tavler til at lege med.

1225
01:12:20,940 --> 01:12:25,520
Så helt sikkert lade alle vide, tak. [Griner] >> [Bowen] Awesome.

1226
01:12:25,520 --> 01:12:27,610
Det er en endnu bedre svar end jeg vil give dig.

1227
01:12:27,610 --> 01:12:31,250
Vi har kontortid for udviklere, som vi gør på vores kontor

1228
01:12:31,250 --> 01:12:35,110
og nu kommer snart til Microsoft Store over på Pru,

1229
01:12:35,110 --> 01:12:37,010
men Edwin har allerede taget sig af dig.

1230
01:12:37,010 --> 01:12:42,180
Der er 4 tavler til rådighed for udlåner, til test.

1231
01:12:42,180 --> 01:12:45,440
Der vi går. Der er et eksempel på en deroppe.

1232
01:12:45,440 --> 01:12:47,340
Så ja, absolut. Store.

1233
01:12:47,340 --> 01:12:52,700
Absolut langt den bedste måde at teste det er at være på en enhed.

1234
01:12:52,700 --> 01:12:56,810
Hvis du ikke tilfældigvis har en endnu, eller du ikke ønsker at gå på tværs af campus i sneen

1235
01:12:56,810 --> 01:13:01,130
at få fat i en eller hvad, er der en måde at gøre dette tilbage i Visual Studio.

1236
01:13:01,130 --> 01:13:10,360
Hvis jeg går tilbage til hvor jeg var her, her i stedet for at bruge Local Machine,

1237
01:13:10,360 --> 01:13:13,590
du kunne oprette forbindelse til eksterne maskine, men det er ikke hvad jeg taler om her.

1238
01:13:13,590 --> 01:13:16,830
Simulator er den ting, du måske ønsker at se nærmere på.

1239
01:13:16,830 --> 01:13:22,120
Jeg vil køre dette, og virkelig, hvad det er, det er hovedsagelig et vindue på dit eget system.

1240
01:13:22,120 --> 01:13:26,260
Her er faktisk mit system kører, kører Contoso,

1241
01:13:26,260 --> 01:13:29,550
men på en måde, der lader mig ændre nogle af fuldbyrdelsen parametre,

1242
01:13:29,550 --> 01:13:31,060
de miljømæssige parametre.

1243
01:13:31,060 --> 01:13:34,150
Så jeg kan sige her, "Ved du hvad?"

1244
01:13:34,150 --> 01:13:39,240
Oh. Jeg allerede har det kørende i en simuleret 27-tommer skærm på 2560 opløsning.

1245
01:13:39,240 --> 01:13:44,930
Jeg kan sagtens droppe det ned og se, hvad min ansøgning ville gøre med en mindre skærm

1246
01:13:44,930 --> 01:13:47,480
eller ved at ændre DPI-indstillinger eller hvad.

1247
01:13:47,480 --> 01:13:50,700
Så på en lille skærm, en 10,6, hvad det kommer til at gøre?

1248
01:13:50,700 --> 01:13:53,040
Det ser stadig temmelig godt, right?

1249
01:13:53,040 --> 01:13:58,220
Du ønsker at gøre dette, især hvis du indsender til butikken, fordi vi gør

1250
01:13:58,220 --> 01:14:00,480
som en del af testprocessen.

1251
01:14:00,480 --> 01:14:02,400
Og hvis der er problemer som det,

1252
01:14:02,400 --> 01:14:06,160
så du kan løbe ind i et problem at få certificeret for butikken.

1253
01:14:06,160 --> 01:14:09,240
Men det er en del af simulatoren. Virkelig cool. Meget let at gøre det.

1254
01:14:09,240 --> 01:14:11,480
Du kan også bruge funktioner som at dreje det så godt.

1255
01:14:11,480 --> 01:14:15,650
Jeg kan klikke på knappen her, har det rotere, se hvad nogen ville have som en oplevelse

1256
01:14:15,650 --> 01:14:20,970
roterende deres skifer, deres tablet, og ved hjælp af din ansøgning med det.

1257
01:14:20,970 --> 01:14:25,060
Der er nogle andre ting også som touch emulering og nogle andre ting,

1258
01:14:25,060 --> 01:14:27,210
indstilling GPS.

1259
01:14:27,210 --> 01:14:31,050
Jeg kan foregive jeg er på en anden placering og se, hvad min ansøgning gør

1260
01:14:31,050 --> 01:14:34,690
når jeg lader som om jeg er tilbage i Seattle eller noget.

1261
01:14:34,690 --> 01:14:41,970
Men det er en rigtig nyttig funktion, og det er bygget i både Visual Studio og i Blend.

1262
01:14:41,970 --> 01:14:44,460
Ja. Dit spørgsmål.

1263
01:14:44,460 --> 01:14:48,530
>> [Studerende] Hvis du skriver et spil, er Visual Studio opbakning til animation?

1264
01:14:48,530 --> 01:14:55,550
Ja. Spørgsmålet er omkring animation støtte, især med gaming.

1265
01:14:55,550 --> 01:14:58,380
Det afhænger af. [Griner]

1266
01:14:58,380 --> 01:15:06,870
Med JavaScript vil jeg sige, at der er sandsynligvis mindre støtte end der er på XAML side,

1267
01:15:06,870 --> 01:15:11,430
som har tidslinjer, har storyboards og ting, der er bygget i.

1268
01:15:11,430 --> 01:15:18,710
For animationer på JavaScript apps, jeg ved ikke, hvor meget af et svar, jeg vil give dig.

1269
01:15:18,710 --> 01:15:25,110
Jeg har ressourcer på min blog, der går igennem en masse muligheder for både fysik animationer,

1270
01:15:25,110 --> 01:15:29,280
muligheder for JavaScript-orienterede spil på Windows 8.

1271
01:15:29,280 --> 01:15:31,300
Jeg vil henvise dig til dem.

1272
01:15:31,300 --> 01:15:34,300
Dybest set, er der så mange valg.

1273
01:15:34,300 --> 01:15:37,770
Grunden til jeg tøver er der er så mange muligheder for at gøre animationer med JavaScript.

1274
01:15:37,770 --> 01:15:44,280
Det kunne være CSS kunne det lærred-baserede, kan det være lige grundlæggende DOM animationer

1275
01:15:44,280 --> 01:15:47,470
det kunne være en masse forskellige ting, så det er virkelig afhænger af dit valg.

1276
01:15:47,470 --> 01:15:55,790
Hvis du beslutter at bruge noget som Create.js eller kalk eller andre former for rammer -

1277
01:15:55,790 --> 01:15:59,150
Tja, jeg er ikke engang sikker på, at du vil være i stand til at bruge en højere ende rammer

1278
01:15:59,150 --> 01:16:01,370
gerne Impact eller Construct.

1279
01:16:01,370 --> 01:16:07,000
Har tendens til at generere mere kode end du måske overveje fra bunden.

1280
01:16:07,000 --> 01:16:11,730
Men i disse tilfælde kan du stadig bruge en simulator, kan du bruge de miljøer,

1281
01:16:11,730 --> 01:16:17,480
og jeg har en tendens til at bare bruge dette miljø til min test platform i de tilfælde,

1282
01:16:17,480 --> 01:16:19,930
da jeg er ved at udvikle spil.

1283
01:16:19,930 --> 01:16:22,110
Jeg har været fint især med Canvas animationer,

1284
01:16:22,110 --> 01:16:23,850
der er nok den mest almindelige ting.

1285
01:16:23,850 --> 01:16:27,360
Det bedste du vil sandsynligvis finde er dev værktøjer i browseren

1286
01:16:27,360 --> 01:16:30,160
og dev værktøjer i Visual Studio.

1287
01:16:30,160 --> 01:16:34,610
Slags en bugtet svar der, men forhåbentlig jeg fik dit svar. Ja. Dig.

1288
01:16:34,610 --> 01:16:36,470
>> [Studerende] Hvad er de datalagring muligheder for Windows 8 apps?

1289
01:16:36,470 --> 01:16:41,100
Hvad er de datalagring muligheder for Windows 8 apps, Windows Store apps?

1290
01:16:41,100 --> 01:16:46,790
Dine muligheder er virkelig hvert program får sin egen pulje af lokal lagring

1291
01:16:46,790 --> 01:16:52,150
for indstillingerne, og for data, men det er også latterligt nemt at bruge roaming opbevaring,

1292
01:16:52,150 --> 01:16:54,920
at bruge cloud-baseret storage. Det er gratis.

1293
01:16:54,920 --> 01:16:58,250
Hvad der sker, er du dybest set vælge en anden klasse, og du siger,

1294
01:16:58,250 --> 01:17:03,370
"Roaming-indstillinger, Gem, denne bestemt sæt af indhold,"

1295
01:17:03,370 --> 01:17:06,050
og deres Microsoft-konto, uanset hvad de har logget på som,

1296
01:17:06,050 --> 01:17:08,620
kommer til at være nøglen til roaming, at oplysninger omkring.

1297
01:17:08,620 --> 01:17:13,790
Så hvis jeg bruger dit spil på min bærbare computer og så skal jeg logge ind med den samme konto

1298
01:17:13,790 --> 01:17:18,900
og jeg spiller spillet på en overflade eller en tablet,

1299
01:17:18,900 --> 01:17:23,610
der automatisk vil strejfe denne indstilling og data mellem disse maskiner.

1300
01:17:23,610 --> 01:17:27,550
Det er en standard ting. Det er godt for visse mængder af data.

1301
01:17:27,550 --> 01:17:30,220
Du ville ikke sætte en enorm database i dem.

1302
01:17:30,220 --> 01:17:35,350
For at du har brug for at gå til andre former for løsninger, som en hosted database i skyen,

1303
01:17:35,350 --> 01:17:36,690
ting som.

1304
01:17:36,690 --> 01:17:39,840
Der er nogle andre samfund muligheder omkring andre former for data-teknologier.

1305
01:17:39,840 --> 01:17:42,920
Jeg har set nogle SQLite muligheder i samfundet omkring der også.

1306
01:17:42,920 --> 01:17:46,690
Så flere og flere er på vej, men det er de primære ting, som du ville kigge mod

1307
01:17:46,690 --> 01:17:49,430
for et spil eller en app.

1308
01:17:49,430 --> 01:17:50,610
Og du havde et spørgsmål i ryggen også.

1309
01:17:50,610 --> 01:18:02,390
>> [Studerende] Med hensyn til nettet [uhørligt] uploade eller downloade filer [uhørligt]

1310
01:18:02,390 --> 01:18:04,870
[Bowen] Er dit spørgsmål, hvordan kan du se det eller hvordan kan du debug det og teste det?

1311
01:18:04,870 --> 01:18:10,630
[Studerende] Hvordan kan du debug det [uhørligt]

1312
01:18:10,630 --> 01:18:12,670
Undskyld. Jeg kan ikke høre det hele.

1313
01:18:12,670 --> 01:18:16,480
[Studerende] Hvordan får du det bug testet og også [uhørligt]

1314
01:18:16,480 --> 01:18:17,490
Store. Store.

1315
01:18:17,490 --> 01:18:21,860
Hvordan arbejder du med netværk? Hvordan kan du se, hvad der foregår?

1316
01:18:21,860 --> 01:18:23,620
Der er mange forskellige svar på dette ene,

1317
01:18:23,620 --> 01:18:26,420
men lad mig vise dig sandsynligvis de letteste ting her.

1318
01:18:26,420 --> 01:18:29,350
Lad mig slippe af simulatoren for en anden.

1319
01:18:29,350 --> 01:18:31,740
Bare et par debugging muligheder for networking.

1320
01:18:31,740 --> 01:18:36,070
Der er et komplet netværk stack bagt lige ind i både WinRT niveau og fra WinJS,

1321
01:18:36,070 --> 01:18:42,810
så du kan meget nemt gøre XHR, AJAX typen opkald fra dit spil eller app til at gøre det.

1322
01:18:42,810 --> 01:18:47,250
Primært, jeg har en tendens til at bruge 2 ting.

1323
01:18:47,250 --> 01:18:53,660
Jeg bruger den faktiske dev værktøjer selv, der har et netværk stak bagt ind i dem.

1324
01:18:53,660 --> 01:18:55,870
Lad mig vise dig Windows startside.

1325
01:18:55,870 --> 01:19:02,730
Jeg kan bringe dette op, og der er faktisk et netværk proxy bagt ind i disse værktøjer her.

1326
01:19:02,730 --> 01:19:08,390
Så jeg kan gøre det, kan jeg opdatere siden, og det kommer til at vise mig alle de interaktioner,

1327
01:19:08,390 --> 01:19:14,550
herunder AJAX kræver, at denne session for denne anmodning varighed.

1328
01:19:14,550 --> 01:19:17,600
Dette er nyttigt. Det kommer til at være meget nyttigt for browser-baserede apps.

1329
01:19:17,600 --> 01:19:20,470
For andre former for apps, herunder Windows Store apps,

1330
01:19:20,470 --> 01:19:23,970
Jeg bruger et værktøj kaldet Spillemand.

1331
01:19:23,970 --> 01:19:29,650
Du kommer til at få et spil i svar. [Griner]

1332
01:19:29,650 --> 01:19:32,750
Spillemand er en simpel proxy. Jeg tror, ​​jeg kan vise det til dig.

1333
01:19:32,750 --> 01:19:40,190
Det er bare GetFiddler.com, som interessant nok, jeg spore min netværksstakken

1334
01:19:40,190 --> 01:19:41,740
vil GetFiddler.

1335
01:19:41,740 --> 01:19:45,700
Men alligevel, Spillemand er blevet skrevet af en af ​​PMs på IE teamet,

1336
01:19:45,700 --> 01:19:48,290
så han ved, hvad han laver.

1337
01:19:48,290 --> 01:19:52,630
Dette er en god proxy, som du kan bruge til fejlfinding netværkstrafik.

1338
01:19:52,630 --> 01:19:55,730
Jeg vil anbefale, at. Spørgsmål derovre også.

1339
01:19:55,730 --> 01:19:58,050
>> [Studerende] Er der en nem måde at integrere fremmedsprog input,

1340
01:19:58,050 --> 01:20:00,810
ligesom japansk eller kinesisk, ind i Windows-apps?

1341
01:20:00,810 --> 01:20:03,240
Jeg kan ikke sige, jeg har gjort for meget af det selv, men det er bagt i.

1342
01:20:03,240 --> 01:20:08,470
Der er muligheder for selvfølgelig udsender din ansøgning - Undskyld, jeg ikke sige spørgsmålet -

1343
01:20:08,470 --> 01:20:11,100
muligheder omkring globalisering, lokalisering af indhold,

1344
01:20:11,100 --> 01:20:14,320
herunder ting som at være i stand til at sælge på forskellige markeder

1345
01:20:14,320 --> 01:20:19,190
og målrette den version af din ansøgning til de enkelte sprog

1346
01:20:19,190 --> 01:20:21,080
eller kulturer eller ting som. Absolut bygget i.

1347
01:20:21,080 --> 01:20:22,980
Vi har haft støtte til, at der for evigt,

1348
01:20:22,980 --> 01:20:26,630
og som bærer fremad ind i dine indstillinger for Windows Store.

1349
01:20:26,630 --> 01:20:30,450
Du kan gøre det i selve butikken, sælge på forskellige markeder,

1350
01:20:30,450 --> 01:20:34,050
du kan gøre det i ansøgningen samt også med at bruge ressourcer til at definere,

1351
01:20:34,050 --> 01:20:42,220
"Hvis jeg udviklet til denne kultur, derefter bruge disse beslutninger til min tekstmæssige indhold

1352
01:20:42,220 --> 01:20:44,510
"Eller bruge en højre til venstre læser."

1353
01:20:44,510 --> 01:20:51,290
De er alle en del af de faste WinJS og WinRT API'er. Godt spørgsmål.

1354
01:20:51,290 --> 01:20:54,770
>> Hvordan gør vi? Nogen andre?

1355
01:20:54,770 --> 01:20:58,850
Og hvis nogen på video har spørgsmål, jeg cbowen @ microsoft,

1356
01:20:58,850 --> 01:21:02,790
så jeg er glad for at tage nogen af ​​dine spørgsmål fra fremtiden.

1357
01:21:02,790 --> 01:21:05,690
Meget - fra fremtiden, kommende [efterligner ekko].

1358
01:21:05,690 --> 01:21:09,140
Så her er mig. Lad mig sige tilbage min kontakt her.

1359
01:21:09,140 --> 01:21:11,840
Så bare send mig en note, cbowen @ microsoft,

1360
01:21:11,840 --> 01:21:15,190
og jeg vil vende tilbage til dig, så snart jeg kan.

1361
01:21:15,190 --> 01:21:19,010
>> Alt andet, at du undrer dig over? Er vi gode?

1362
01:21:19,010 --> 01:21:24,050
Store. Ok. Tak alle meget. Jeg sætter pris på det. [Bifald]

1363
01:21:24,800 --> 01:21:27,000
>> [CS50.TV]