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
>> Hei, alle sammen. Mitt navn er Edwin Guarin. Dette er Chris Bowen.

5
00:00:10,290 --> 00:00:12,310
Jeg lar ham presentere seg i et sekund.

6
00:00:12,310 --> 00:00:14,100
Jeg ønsker bare å foreta en rask kunngjøring.

7
00:00:14,100 --> 00:00:18,340
Først av alt, alt du CS50 elevene få Windows 8 for gratis.

8
00:00:18,340 --> 00:00:23,150
Så hvis du har planer om å faktisk bruke den for det endelige prosjektet, er den din.

9
00:00:23,150 --> 00:00:25,740
Nate vil sende ut en e-post senere på for å få instruksjoner.

10
00:00:25,740 --> 00:00:32,850
Den andre tingen er hvis du bestemmer deg for å skrive en Windows 8 app for CS50 endelige prosjektet,

11
00:00:32,850 --> 00:00:35,870
vi kommer til å gjøre noen giveaways: en Xbox,

12
00:00:35,870 --> 00:00:38,870
vi kan være i stand til å gi en skifer bort, sånne ting.

13
00:00:38,870 --> 00:00:42,460
Så hvis det er noe som holder deg tilbake, la Chris eller jeg vet

14
00:00:42,460 --> 00:00:45,010
hvordan vi kan hjelpe deg med å bygge noe virkelig kult.

15
00:00:45,010 --> 00:00:48,580
Så takk igjen for at du kom i dag, og jeg vil overlate den til Chris.

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

17
00:00:51,000 --> 00:00:52,740
Takk, alle sammen, for å bli med oss ​​i dag.

18
00:00:52,740 --> 00:00:55,800
Jeg er Chris Bowen. Jeg er en av Edwins kolleger her i nordøst.

19
00:00:55,800 --> 00:00:58,310
Jeg ønsket bare å tilbringe litt tid med det du snakker om

20
00:00:58,310 --> 00:01:03,730
hvordan å lage en Windows Store-program med HTML5, Javascript og CSS

21
00:01:03,730 --> 00:01:07,310
og får slags eventuelle spørsmål du måtte ha om det svarte for deg

22
00:01:07,310 --> 00:01:12,920
som du ser mot tenker kanskje å bruke det for en CS50 finalen mulighet.

23
00:01:12,920 --> 00:01:14,980
>> Når det er sagt, vil vi bare stupe rett i.

24
00:01:14,980 --> 00:01:17,190
Jeg skal gå over til lysbilder over her.

25
00:01:17,190 --> 00:01:19,440
Hvis du har noen spørsmål, kan du gjerne sende meg en e-post.

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

27
00:01:23,460 --> 00:01:26,330
Men du ønsker å komme i kontakt med meg, er det helt greit.

28
00:01:26,330 --> 00:01:30,110
Jeg har omtrent en time av ting, og jeg ønsker å få dine spørsmål i underveis,

29
00:01:30,110 --> 00:01:33,720
så ikke vær sjenert om å ha spørsmål under dette.

30
00:01:33,720 --> 00:01:36,470
De kan ikke se hvem som stiller spørsmålene på opptaket,

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

32
00:01:39,090 --> 00:01:42,780
>> La meg hoppe rett i, bare gi deg en rask innføring i Windows 8,

33
00:01:42,780 --> 00:01:47,400
og vise deg noen av de tingene om Windows Store apps som du kan vurdere

34
00:01:47,400 --> 00:01:49,530
som du har planer om å utvikle en applikasjon.

35
00:01:49,530 --> 00:01:52,660
Vi ser på Windows 8. Vi har vært ute i et par uker nå.

36
00:01:52,660 --> 00:01:55,810
Mange sterke adopsjon der ute allerede.

37
00:01:55,810 --> 00:01:59,800
Du har kanskje sett allerede overflaten maskiner som vi har i tillegg.

38
00:01:59,800 --> 00:02:03,730
Det er en over her faktisk du kan ta en titt på hvis du er her i person.

39
00:02:03,730 --> 00:02:07,530
Jeg har veldig lyst til å snakke med deg, vise deg rundt litt om Windows 8.

40
00:02:07,530 --> 00:02:10,759
Ideen med Windows 8, det virkelig bringer frem alle de tingene du vet om Windows

41
00:02:10,759 --> 00:02:16,840
inn noen nye erfaringer - særlig ting som på overflaten maskin med touch,

42
00:02:16,840 --> 00:02:20,000
disse slags flere mobile enheter som nå er på markedet,

43
00:02:20,000 --> 00:02:22,360
men det er også Windows i kjernen.

44
00:02:22,360 --> 00:02:25,850
Så det betyr at du kan installere det virkelig på noe som kjører Windows 7,

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

46
00:02:30,770 --> 00:02:36,200
og til skinnende nye andre enheter som du kan plukke opp i dag.

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

48
00:02:38,450 --> 00:02:40,530
Jeg skal vise deg rundt bare en liten bit,

49
00:02:40,530 --> 00:02:44,670
og alle de opplevelsene som du får se her er ting som du kan opprette.

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
hva enheten er at du kjører programmet på, det kommer til å kjøre stor.

52
00:02:51,870 --> 00:02:55,180
Windows 8 vil hjelpe deg med alle disse scenariene.

53
00:02:55,180 --> 00:02:59,600
>> Disse lysbildene til side, la oss bare komme rett inn å ta en titt rundt her.

54
00:02:59,600 --> 00:03:03,270
La meg vise deg rundt mitt hjem-skjermen. Dette er min startskjermen.

55
00:03:03,270 --> 00:03:05,810
Jeg vil bare gi deg en liten bit av en tur her.

56
00:03:05,810 --> 00:03:09,610
Jeg er på en ikke-touch maskin, så så mye som jeg ønsker å røre min laptop-skjermen,

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

58
00:03:13,400 --> 00:03:17,950
Noen ting du kanskje legge merke til er det faktum at disse såkalte levende brikker

59
00:03:17,950 --> 00:03:21,470
faktisk kan animere, og de kan gi informasjon til deg -

60
00:03:21,470 --> 00:03:24,750
kanskje oppdateringer på statistikk for et spill

61
00:03:24,750 --> 00:03:30,970
eller vise deg nyheter fra noen av de tidligere apps som er her på venstre side.

62
00:03:30,970 --> 00:03:35,350
Det vi går. Jeg er sikker på at det er bare positivt og utrolig gode nyheter.

63
00:03:35,350 --> 00:03:38,450
Du kan se her er det virkelig kalle din oppmerksomhet tilbake til app, sa

64
00:03:38,450 --> 00:03:43,010
"Hei, det er noe nytt her. Ta en titt. Kom tilbake og se hva som er nytt for deg."

65
00:03:43,010 --> 00:03:45,320
Det kalles levende fliser, og du kan gjøre varslinger

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

67
00:03:47,070 --> 00:03:52,220
eller hvis du tar en titt i mer detalj, vil du finne ut hvordan du skal skrive en ekstern tjeneste

68
00:03:52,220 --> 00:03:54,340
som faktisk kan overføre informasjon til flis,

69
00:03:54,340 --> 00:03:56,520
som er hva som skjer med disse nyhetene apps.

70
00:03:56,520 --> 00:04:00,080
De er faktisk å få nyheter fra skyen og oppdatering av flis rett der

71
00:04:00,080 --> 00:04:03,710
slik at folk vet at det er en grunn til å åpne opp programmet og ta en titt

72
00:04:03,710 --> 00:04:06,950
på hva de siste nyhetene er i noen av disse

73
00:04:06,950 --> 00:04:10,060
eller om det er nye oppskrifter eller en ny rekord å slå

74
00:04:10,060 --> 00:04:13,560
eller en venn spille eller hva på disse programmene.

75
00:04:13,560 --> 00:04:15,550
Det er noe å friste deg tilbake igjen

76
00:04:15,550 --> 00:04:18,640
Så det er de levende brikker, og det kan være en person, kan det være en nettside også.

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

78
00:04:20,790 --> 00:04:25,320
>> Stort sett alle disse tingene som jeg har her kom fra Windows Store. Jeg skal starte det.

79
00:04:25,320 --> 00:04:27,890
Det er et av de programmene som du får som standard

80
00:04:27,890 --> 00:04:30,350
på hvilken som helst maskin som kjører Windows 8.

81
00:04:30,350 --> 00:04:33,040
Du kan komme hit for å finne noe du ønsker,

82
00:04:33,040 --> 00:04:37,240
fra ting som er uthevet til spill som jeg ikke har sett før.

83
00:04:37,240 --> 00:04:39,440
Åh, wow, vi har fått 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 skal snakke om hvordan å utvikle disse.

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

87
00:04:45,670 --> 00:04:49,020
Vi vil fokusere på Java historien med HTML og CSS,

88
00:04:49,020 --> 00:04:52,790
men til brukeren, til kjøperen av app, det spiller ingen rolle hva det ble skrevet i.

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

90
00:04:54,670 --> 00:04:57,870
Jeg er fascinert av dette, så jeg trenger å åpne dette opp og ta en titt.

91
00:04:57,870 --> 00:05:02,310
Hver app, inkludert de som du kan sende og selge eller gi bort gratis,

92
00:05:02,310 --> 00:05:06,240
hva du ønsker å gjøre i butikken, vil få en hjemmeside som dette.

93
00:05:06,240 --> 00:05:10,750
Du kan sende med søknaden en haug med skjermbilder - du se noen her -

94
00:05:10,750 --> 00:05:15,970
detaljer om programmet, og over tid vil du akkumulere begge rangeringer -

95
00:05:15,970 --> 00:05:19,020
de er i utgangspunktet bare stjerneklassifisering - og vurderinger,

96
00:05:19,020 --> 00:05:20,690
som gir litt mer innsikt.

97
00:05:20,690 --> 00:05:24,380
Egentlig har noen til å skrive noe og fortelle deg hvor fantastisk du er,

98
00:05:24,380 --> 00:05:29,300
og som vil gå inn i dine vurderinger delen over her, som jeg ikke har sett på.

99
00:05:29,300 --> 00:05:33,890
Fantastisk. "Vil ikke engang åpne." Hvor stor.

100
00:05:33,890 --> 00:05:39,000
Vel, for folk for hvem dette gjorde åpen og kjøre, synes de å virkelig nyte det. [Ler]

101
00:05:39,000 --> 00:05:43,770
Ha dette i bakhodet. Internett. Alle kan si hva de vil om søknaden din.

102
00:05:43,770 --> 00:05:45,780
Så sørg for at du gjør en god jobb med det,

103
00:05:45,780 --> 00:05:49,030
sørg for at du gjør det så behagelig for brukeren som du kan

104
00:05:49,030 --> 00:05:52,720
fordi de er et par klikk unna fra å gi en evaluering,

105
00:05:52,720 --> 00:05:55,870
og som vil samle opp til generelle rangering.

106
00:05:55,870 --> 00:05:58,990
Og du ønsker å gjøre ditt beste, fordi du kommer til å være opp mot andre applikasjoner.

107
00:05:58,990 --> 00:06:01,830
Det vil være tusenvis av apps som allerede er i butikken,

108
00:06:01,830 --> 00:06:06,880
og sjansene er, det kan være noe som gjør lignende funksjonalitet til hva du gjør.

109
00:06:06,880 --> 00:06:12,740
Så hvis du virkelig kan skille seg ut fra mengden, som kommer til å være til din fordel, selvfølgelig.

110
00:06:12,740 --> 00:06:15,300
>> Vi får inn i butikken litt senere.

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

112
00:06:17,090 --> 00:06:20,760
Men den korte versjonen av butikken er verdensomspennende distribusjon,

113
00:06:20,760 --> 00:06:25,430
det er automatisk en del av Windows 8, folk bare fyre den opp og ta en titt på ulike apps her,

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

115
00:06:29,070 --> 00:06:33,690
Fresh Paint, jeg bruker dette mye - dårlig, men jeg bruker det mye.

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

117
00:06:36,080 --> 00:06:41,280
La meg vise deg noe jeg ikke har - UVideos jeg ikke har så splitter nye.

118
00:06:41,280 --> 00:06:43,660
Du ser her det er gratis, slik at du kan installere det rett fra butikken.

119
00:06:43,660 --> 00:06:46,430
Du har valg også. Du kan selvfølgelig gi den bort.

120
00:06:46,430 --> 00:06:49,660
Du kan legge reklame i app eller spill.

121
00:06:49,660 --> 00:06:54,770
Du kan også ta betalt for det, og du kan veldig lett gi en rettssak for programmet samt

122
00:06:54,770 --> 00:06:58,220
slik at du kan la folk prøve det for en uke eller hva du ønsker å gjøre.

123
00:06:58,220 --> 00:07:01,540
Det er bare passelig gjennom portalen. Du trenger ikke skrive noen kode for det.

124
00:07:01,540 --> 00:07:03,990
Så du sier, "Du kan bruke dette for en uke, og da har du til å kjøpe den,"

125
00:07:03,990 --> 00:07:07,130
eller du kan gjøre ting som "Du kan spille de første tre nivåene av dette spillet

126
00:07:07,130 --> 00:07:09,820
"Og så har du å kjøpe for å få tilgang til resten."

127
00:07:09,820 --> 00:07:12,310
Du kan selv gjøre in-app kjøp også, så du kan si,

128
00:07:12,310 --> 00:07:17,880
"Vi har fått flere opplevelser eller sett av grafikk eller ting som er låst opp -

129
00:07:17,880 --> 00:07:21,430
"Flere oppskrifter som er låst opp -. Hvis du kjøper disse utvidede sett"

130
00:07:21,430 --> 00:07:24,260
Og du kan gjøre det hele i app eller spillet selv.

131
00:07:24,260 --> 00:07:26,070
Så, helt opp til deg, ditt valg.

132
00:07:26,070 --> 00:07:28,070
Det er mange ting du kan gjøre i butikken,

133
00:07:28,070 --> 00:07:31,660
og deretter i utgangspunktet du sende det til en sertifisering kanal.

134
00:07:31,660 --> 00:07:35,380
Vi kan snakke om at et litt senere, men dette er målet.

135
00:07:35,380 --> 00:07:40,410
Du ønsker å få din app verdensomspennende synlighet i butikken her.

136
00:07:40,410 --> 00:07:44,170
>> Tilbake på startskjermen her, vil jeg gjerne vise deg rundt litt mer.

137
00:07:44,170 --> 00:07:50,580
Hvis jeg starter disse programmene, la meg gi deg et eksempel på noen kryss-app funksjonalitet her.

138
00:07:50,580 --> 00:07:53,070
For å gjøre det, vil jeg lansere Fresh Paint.

139
00:07:53,070 --> 00:07:55,550
En ting du vil se her er hver eneste bit av skjermen,

140
00:07:55,550 --> 00:07:58,040
alle piksler på skjermen, gå til programmet ditt.

141
00:07:58,040 --> 00:08:01,990
Borte er de dagene der du har disse grensene rundt vinduer

142
00:08:01,990 --> 00:08:05,120
med mange knapper som er alltid der tar opp plass hele tiden.

143
00:08:05,120 --> 00:08:09,430
Nå er du virkelig ønsker å komme bort fra det og bare ha innholdet være fokus.

144
00:08:09,430 --> 00:08:13,710
Vi kan gjøre ting med Windows ved å gå andre typer menyer.

145
00:08:13,710 --> 00:08:16,840
En av dem er faktisk det som kalles sjarm bar,

146
00:08:16,840 --> 00:08:18,870
og det kommer ut fra den side av skjermen.

147
00:08:18,870 --> 00:08:21,270
Du kan faktisk bla fra side hvis du har en berøringsskjerm,

148
00:08:21,270 --> 00:08:24,840
du kan høyreklikke hvis du har en mus, det er en hurtigtast for det,

149
00:08:24,840 --> 00:08:29,490
det er alltid mer enn én måte å gjøre noe i miljøet her.

150
00:08:29,490 --> 00:08:31,680
Det bringer ut en rekke ting du kan gjøre.

151
00:08:31,680 --> 00:08:33,870
Den mest åpenbare er at du kan gå tilbake til startskjermen,

152
00:08:33,870 --> 00:08:36,780
men de andre fire er det som kalles sjarm.

153
00:08:36,780 --> 00:08:41,059
De er kontrakter som du kan plugge inn som en app-utvikler. De er ganske kult.

154
00:08:41,059 --> 00:08:43,340
Søk, er jeg sikker på at det er noe du kommer til å gjøre,

155
00:08:43,340 --> 00:08:44,950
deling Jeg skal vise deg i et sekund,

156
00:08:44,950 --> 00:08:48,450
og enheter og innstillinger, disse er alle ting som programmet ditt kan plugge inn

157
00:08:48,450 --> 00:08:51,960
å utnytte Windows, for å si: "Jeg har gjort min del

158
00:08:51,960 --> 00:08:54,700
"Og jeg vil at Windows skal støtte noen annen funksjonalitet,

159
00:08:54,700 --> 00:08:56,750
"Og jeg ønsker ikke å skrive mye kode for å gjøre det skje."

160
00:08:56,750 --> 00:08:59,480
Det er egentlig en fordel å bruke disse funksjonene.

161
00:08:59,480 --> 00:09:01,340
La meg vise deg en.

162
00:09:01,340 --> 00:09:05,170
For å gjøre det, vil jeg gjøre et nytt maleri.

163
00:09:05,170 --> 00:09:08,240
Jeg har også snakket om å bruke hver piksel for programmet ditt.

164
00:09:08,240 --> 00:09:11,850
Som standard er dette hva malingen app ser ut når du bruker det.

165
00:09:11,850 --> 00:09:14,960
Det er egentlig bare om hva du tegner, innholdet.

166
00:09:14,960 --> 00:09:20,850
Jeg kunne gjøre forferdelige ting her. Hva skal jeg tegne? Jeg vet ikke.

167
00:09:20,850 --> 00:09:23,110
Skriblerier? Oh, great. Jeg kan gjøre skriblerier. Fantastisk.

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

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å ta opp det som kalles app bar,

171
00:09:31,780 --> 00:09:33,850
og dette er virkelig en av de viktigste måtene du kan bruke

172
00:09:33,850 --> 00:09:37,210
å gjemme bort alle ting som kan ha vært på din app eller spill før

173
00:09:37,210 --> 00:09:39,570
bare tar opp plass hele tiden.

174
00:09:39,570 --> 00:09:43,270
Så nå kan du sette den opp her, og dette er virkelig en av de mer vakre opplevelser

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

176
00:09:46,380 --> 00:09:48,800
Sett valgene her for å velge forskjellige farger.

177
00:09:48,800 --> 00:09:54,310
Vi ønsket en kalkun, så vil vi sette noen brune her, begynner å blande i et par farger.

178
00:09:54,310 --> 00:09:58,790
Vi vil ta en mellomtid farge her og deretter komme tilbake hit.

179
00:09:58,790 --> 00:10:02,990
Du kan begynne å tegne. Det er kalkun. Fantastisk.

180
00:10:02,990 --> 00:10:07,660
Jeg kan ikke tegne til å begynne med, men å gjøre det med en touchpad foran et publikum er enda bedre.

181
00:10:07,660 --> 00:10:09,640
Dette er kjempebra.

182
00:10:09,640 --> 00:10:13,030
Ideen, skjønt, er alt jeg bryr meg om er riktig her på overflaten.

183
00:10:13,030 --> 00:10:17,060
La oss si jeg er så fornøyd med dette at jeg har fått til å dele det med noen.

184
00:10:17,060 --> 00:10:19,680
Normalt hva du vil gjøre med andre versjoner av Windows,

185
00:10:19,680 --> 00:10:22,900
du vil kanskje ta et skjermbilde, vil du gjøre noen copy-paste av din tekst

186
00:10:22,900 --> 00:10:24,950
eller ting som det som du ønsker å dele ut,

187
00:10:24,950 --> 00:10:27,260
og deretter gå og åpne opp et annet program og sette det inn i den.

188
00:10:27,260 --> 00:10:28,630
Her trenger du ikke å gjøre det.

189
00:10:28,630 --> 00:10:32,400
Du kan faktisk få ut det charms bar og si, "Jeg ønsker å dele dette."

190
00:10:32,400 --> 00:10:35,000
På dette punktet kommer det til å vise deg alle apps

191
00:10:35,000 --> 00:10:38,080
som vet hvordan man skal arbeide med hva som blir delt.

192
00:10:38,080 --> 00:10:41,590
I dette tilfellet er det et bilde, så det kommer til å si: "Jeg ser du har fått et bilde."

193
00:10:41,590 --> 00:10:45,590
"Ønsker du å dele det?" Du kan se jeg sende meg ting hele tiden.

194
00:10:45,590 --> 00:10:49,420
Det erkjenner at, og det tilbyr meg at som en snarvei,

195
00:10:49,420 --> 00:10:53,270
men det er også viser meg hver app som vet hvordan man skal forholde seg til å ta et bilde

196
00:10:53,270 --> 00:10:55,520
og gjør noe med det.

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

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

199
00:10:59,240 --> 00:11:01,680
Brukeren velger akkurat hva de vil gjøre med det.

200
00:11:01,680 --> 00:11:06,610
Jeg skal gjøre mitt vanlige av PuzzleTouch. Du kan se jeg har laget alle typer oppgaver over tid.

201
00:11:06,610 --> 00:11:11,790
Jeg tar PuzzleTouch og si, "Jeg ønsker å dele denne fantastiske skapelsen med PuzzleTouch."

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

203
00:11:16,670 --> 00:11:19,260
"Ønsker du å lage et puslespill som er lett, middels, hva?"

204
00:11:19,260 --> 00:11:20,800
Jeg skal lage en mellom en her.

205
00:11:20,800 --> 00:11:24,890
Det gjør puslespillet. Det kommer til å bli en forferdelig oppgave fordi det er for det meste tomt.

206
00:11:24,890 --> 00:11:28,100
Men det er klart, og det er faktisk tilbake i det andre programmet.

207
00:11:28,100 --> 00:11:32,360
Hvis jeg kommer ut her, kan jeg søke etter den og starte den.

208
00:11:32,360 --> 00:11:38,100
Nå hvis vi blar over bare en liten bit her, bør vi se min skapelse sted.

209
00:11:38,100 --> 00:11:42,930
Hvor gikk jeg? Hva slags puslespill har jeg gjøre? Hadde jeg gjøre det enkelt?

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

211
00:11:46,110 --> 00:11:49,550
[Humrer] Det er den lett gjenkjennelig kalkun puslespill som er her.

212
00:11:49,550 --> 00:11:52,360
Men det jeg ønsker å påpeke til deg, den kule ting her

213
00:11:52,360 --> 00:11:54,710
Er apps ikke visste noe om hverandre.

214
00:11:54,710 --> 00:11:58,740
De bare sa: "Jeg har fått et bilde du vil dele, og jeg vet hvordan de skal forholde seg til bilder."

215
00:11:58,740 --> 00:12:01,420
Og du som utvikler, trenger du ikke å skrive denne koden.

216
00:12:01,420 --> 00:12:05,350
Når noen spør meg om å dele, kommer jeg til å sette noen data inn i denne lille datastruktur

217
00:12:05,350 --> 00:12:06,740
og jeg er ferdig.

218
00:12:06,740 --> 00:12:10,990
Det andre programmet tar over, gjør sin ting, og det er slutten av erfaringsutveksling.

219
00:12:10,990 --> 00:12:14,550
Det er bare én ting som du kan gjøre - veldig, veldig kraftig -

220
00:12:14,550 --> 00:12:17,570
og det kommer til å være en av de tingene som kan virkelig bidra til å differensiere din app

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

222
00:12:20,090 --> 00:12:22,220
Folk kommer til å være i stand til å si: "Dette er virkelig nyttig."

223
00:12:22,220 --> 00:12:25,430
"Jeg bruker dette pusle skaperen hele tiden. Det er fantastisk."

224
00:12:25,430 --> 00:12:30,490
>> Det er omtrent nok for en kort oversikt over hva som skjer her.

225
00:12:30,490 --> 00:12:33,670
Det er et par andre funksjoner også at vi kanskje vil fremheve som vi går gjennom koden.

226
00:12:33,670 --> 00:12:37,710
Men jeg ønsker å dykke inn lysbilder, og for å gjøre det, kommer jeg til å gå til skrivebordet,

227
00:12:37,710 --> 00:12:40,940
som selv er en annen levende ruten her.

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

229
00:12:43,840 --> 00:12:46,320
men la meg vise deg faktisk der vi er.

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

231
00:12:48,460 --> 00:12:52,580
Dette er virkelig der det jeg sa tidligere om Windows fremføring

232
00:12:52,580 --> 00:12:54,850
til nye opplevelser viser seg.

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

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

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

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

237
00:13:04,710 --> 00:13:07,590
Dette er ikke de samme tingene som de store apps, som er over her,

238
00:13:07,590 --> 00:13:12,240
som Fresh Paint og disse NBC News apps og sånt. De kommer fra butikken.

239
00:13:12,240 --> 00:13:14,450
De kan plugge inn i noen av de funksjonene som jeg ble vist deg

240
00:13:14,450 --> 00:13:16,620
og andre som jeg ikke har vist dere ennå.

241
00:13:16,620 --> 00:13:21,460
Men bare ha det i bakhodet. Vi har støtte for begge disse tingene også.

242
00:13:21,460 --> 00:13:27,000
Jeg beklager. Er det noe som ikke vises på skjermen? Jeg har mistet det helt. Det er rart.

243
00:13:29,000 --> 00:13:31,000
Ok. Takk for å peke det ut.

244
00:13:31,000 --> 00:13:34,770
Det du ikke har vært å se på en stund er min viser du at skrivebordet er her.

245
00:13:34,770 --> 00:13:37,540
Hva er det siste du så? Visste du dette?

246
00:13:37,540 --> 00:13:39,490
Dette er skrivebordet. Du vet allerede hvordan det ser ut.

247
00:13:39,490 --> 00:13:42,070
Det er ikke noe veldig uvanlig.

248
00:13:42,070 --> 00:13:46,940
Det er vår bærer den erfaringen videre for deg og lar deg bruke de tingene som du har hatt.

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

250
00:13:50,460 --> 00:13:52,600
Det kommer til å kjøre i denne modusen.

251
00:13:52,600 --> 00:13:54,960
Det kommer til å støtte et mer komplekst miljø

252
00:13:54,960 --> 00:14:01,470
med en rekke alternativer og sånt, så det gjør det et godt alternativ som en desktop app.

253
00:14:01,470 --> 00:14:04,810
>> Når det er sagt, la oss gå til slides for bare en liten bit

254
00:14:04,810 --> 00:14:09,720
og gi deg noen innledende innhold og deretter komme inn faktisk koding her.

255
00:14:09,720 --> 00:14:14,070
Den gode nyheten er at jeg har hørt at du har vært fokus på en rekke CSS og Javascript, HTML.

256
00:14:14,070 --> 00:14:18,110
Alle de tingene som du har vært å lære carry direkte inn å gjøre Windows Store apps.

257
00:14:18,110 --> 00:14:22,920
De tingene som du har hørt om med å bruke CSS velgere og alle de tingene

258
00:14:22,920 --> 00:14:27,180
er akkurat hva du gjør for å lage et program her for butikken.

259
00:14:27,180 --> 00:14:29,640
Vi vil gå gjennom disse tingene litt etter litt.

260
00:14:29,640 --> 00:14:34,130
I utgangspunktet, jeg bygger på ting som du allerede har tatt deg tid til å lære.

261
00:14:34,130 --> 00:14:36,520
Dette er den generelle diagram av de teknologiene som du kan bruke

262
00:14:36,520 --> 00:14:38,790
å lage applikasjoner for Windows 8.

263
00:14:38,790 --> 00:14:42,840
Ting på den rette, de stasjonære apps, er egentlig det vi allerede vet.

264
00:14:42,840 --> 00:14:46,840
Det er ting som er virkelig Windows 7 verden fremføring i Windows 8.

265
00:14:46,840 --> 00:14:51,920
Alle disse alternativene fremføring: C #, VB, Win32 slags utvikling.

266
00:14:51,920 --> 00:14:54,450
Flott. Ikke noe problem. Den nye ting er på venstre side.

267
00:14:54,450 --> 00:14:58,220
Det er Windows Store apps, det er da jeg ønsker å få min søknad kablet til Windows 8

268
00:14:58,220 --> 00:15:02,300
ved hjelp av alle disse funksjonene, få det inn i butikken, og få som virkelig kul opplevelse

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

270
00:15:05,260 --> 00:15:10,350
For å gjøre det, kan du se her du har alle dine valg med XAML, C + +,

271
00:15:10,350 --> 00:15:14,100
C #, VB, kan du gjøre DirectX, sånne ting, ting som går utover lysbildet.

272
00:15:14,100 --> 00:15:18,650
Men for oss, kommer vi til å fokusere rett inn på det faktum at HTML, CSS og Javascript

273
00:15:18,650 --> 00:15:22,890
er egentlig en første-klasse statsborger for å lage applikasjoner for 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å dette er bra for alle her, og folk ser på video

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

277
00:15:30,760 --> 00:15:33,900
og virkelig knytte til hva Windows tilbyr.

278
00:15:33,900 --> 00:15:37,870
Du kommer til å gjøre det gjennom et sett med APIer, som bør ikke være noen overraskelse.

279
00:15:37,870 --> 00:15:39,920
Hvert OS har sine egne APIer.

280
00:15:39,920 --> 00:15:43,530
Vi utsetter hva Windows kan gjøre gjennom det som kalles WinRT.

281
00:15:43,530 --> 00:15:46,370
Det er et sett med APIer som bare gjør alt for deg.

282
00:15:46,370 --> 00:15:51,650
Hvis du trenger å åpne filer, må du bruke kameraet, geolocation, ting som det,

283
00:15:51,650 --> 00:15:55,700
de går gjennom hva Windows kan tilby deg.

284
00:15:55,700 --> 00:15:59,370
For å få tilgang til det, har vi litt mer Java som kommer til å gjøre det enda enklere

285
00:15:59,370 --> 00:16:02,510
for deg å gjøre det. Vi får til det i et øyeblikk.

286
00:16:02,510 --> 00:16:04,060
Men for nå, er at utgangspunktet ditt veikart.

287
00:16:04,060 --> 00:16:06,770
De tingene som du allerede har gjort på toppen av noen APIer

288
00:16:06,770 --> 00:16:11,280
som hjelper deg å arbeide med Windows tilsvarer butikkapplikasjon.

289
00:16:11,280 --> 00:16:14,210
Og det er virkelig om alt du trenger å vite fra det høye nivået.

290
00:16:14,210 --> 00:16:17,370
>> Vi skal dykke inn faktisk jobber med ting nå.

291
00:16:18,940 --> 00:16:21,950
De tingene du har sikkert allerede sett en haug med,

292
00:16:21,950 --> 00:16:26,760
med IE9 en liten stund tilbake vi innført støtte for mye av, på den tiden,

293
00:16:26,760 --> 00:16:30,340
nyere standarder i nettet, så mange nye CSS funksjoner,

294
00:16:30,340 --> 00:16:34,380
mye ny HTML, ECMAScript 5, som er virkelig Javascript.

295
00:16:34,380 --> 00:16:38,090
Så alt for at med unntak for streng modus var i IE9.

296
00:16:38,090 --> 00:16:42,290
Bare massevis av ting med CSS, CSS3, alt der inne.

297
00:16:42,290 --> 00:16:45,300
Og alt dette bærer frem til hva vi gjør med Windows 8.

298
00:16:45,300 --> 00:16:49,350
Du kan bruke disse tingene, og du kan bruke alt som er nytt i IE10.

299
00:16:49,350 --> 00:16:54,640
Med IE10 introduserer vi støtte for alle disse tingene også.

300
00:16:54,640 --> 00:16:59,340
De er alle hardware-akselerert, så hvis du er på en maskin som har en slags GPU,

301
00:16:59,340 --> 00:17:04,190
som sannsynligvis er ganske mye hver maskin som du kan få i de siste åtte årene,

302
00:17:04,190 --> 00:17:07,609
du kommer til å være i stand til å ha maskinvare-akselerert produksjon,

303
00:17:07,609 --> 00:17:11,770
visuelt resultat med CSS, Canvas, SVG.

304
00:17:11,770 --> 00:17:14,339
Alle disse tingene vil gå gjennom maskinvareakselerasjon

305
00:17:14,339 --> 00:17:16,060
og være så mye raskere og mer effektiv.

306
00:17:16,060 --> 00:17:20,440
Den korte versjonen av alt dette - jeg kommer ikke til å gå gjennom hver eneste ting her -

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

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

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

310
00:17:28,640 --> 00:17:33,100
Og det er ganske mye det. Så hvis det fungerer i IE10, det kommer til å fungere som en Windows Store-app.

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

312
00:17:36,370 --> 00:17:40,510
>> Det er mye her. Vi har frem til midnatt, så jeg kan ikke se gjennom alt her.

313
00:17:40,510 --> 00:17:44,060
Men det er noen nettsteder som vil hjelpe deg å forstå hva disse tingene kan gjøre,

314
00:17:44,060 --> 00:17:45,520
og jeg skal vise deg en av dem i et sekund.

315
00:17:45,520 --> 00:17:48,410
Jeg ville bare påpeke noen av de viktigste tingene som du kan se på.

316
00:17:48,410 --> 00:17:51,560
Kanskje du allerede har sett noen av disse i dine studier,

317
00:17:51,560 --> 00:17:56,610
men disse er veldig nyttig, spesielt med Windows Store apps, fra CSS side.

318
00:17:56,610 --> 00:18:02,420
Så å være i stand til å gjøre forvandler og overganger, gi bevegelse med animasjon -

319
00:18:02,420 --> 00:18:07,010
disse er alle en del av CSS nå, og de er alle støttet av moderne nettlesere,

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

321
00:18:11,370 --> 00:18:15,220
Og så hvorfor skrive det selv, hvorfor gå gjennom alle problemer med å gjøre disse tingene for hånd

322
00:18:15,220 --> 00:18:19,970
når du kan bruke en enkel CSS forvandle å skape en 3D-effekt for søknaden din?

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

324
00:18:22,740 --> 00:18:24,530
Jeg kan ikke gjøre det noe vanskeligere enn det.

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

326
00:18:28,330 --> 00:18:32,080
>> Går utover at for layout, ting som selv de store app,

327
00:18:32,080 --> 00:18:35,350
men utover det, ser på kanskje en nyhets app som er som viser deg artikler

328
00:18:35,350 --> 00:18:40,160
eller oppskrifter eller ting som det, disse andre typer funksjoner i CSS er veldig nyttig:

329
00:18:40,160 --> 00:18:45,610
Grid, Flexbox, er CSS Regioner mer av en ganske ny standard også.

330
00:18:45,610 --> 00:18:51,190
Disse tingene er alle kommer til å hjelpe deg med å legge ut innhold og strømme innhold mellom seksjonene,

331
00:18:51,190 --> 00:18:55,470
være i stand til å gjøre sidetall og orddeling uten at du trenger å skrive ting selv.

332
00:18:55,470 --> 00:18:57,500
Du bare sier, "Vennligst gjør følgende for meg,"

333
00:18:57,500 --> 00:19:00,850
og som skjermen eiendomsmegling er forskjellig på forskjellige maskiner

334
00:19:00,850 --> 00:19:03,850
eller som du vil se i et øyeblikk, som du snapper en søknad

335
00:19:03,850 --> 00:19:07,920
å ha mindre mengder plass på skjermen, det er ikke noe problem for CSS.

336
00:19:07,920 --> 00:19:11,160
Det kan dra nytte av - Vi finner oss ikke snakke om mediespørringer i en andre -

337
00:19:11,160 --> 00:19:15,880
det kan ta vare på ting med reposisjonering innholdet, flyter innhold fra regionene

338
00:19:15,880 --> 00:19:21,240
bare med disse tingene som du kanskje allerede har sett med web-teknologi.

339
00:19:21,240 --> 00:19:25,470
>> På HTML5 side, er det også en haug med ting

340
00:19:25,470 --> 00:19:28,140
som vil være svært nyttig for deg med Windows Store apps.

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

342
00:19:30,980 --> 00:19:35,470
Så hvis du trenger å bruke den, audio-video, hvis du ønsker å gjøre validering fra skjemaer,

343
00:19:35,470 --> 00:19:40,570
geolocation, alle de tingene du kan gjøre i Java med Java 5 eller ECMAScript 5,

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

345
00:19:44,070 --> 00:19:49,300
Hvis du leter etter et svar, bare se til eksisterende teknologier med HTML5 og CSS

346
00:19:49,300 --> 00:19:53,880
og du vil finne enklere svar enn å måtte rulle mye av de greiene selv.

347
00:19:53,880 --> 00:19:55,510
La meg vise deg litt rundt her.

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

349
00:19:57,920 --> 00:20:01,590
La meg avslutte ut av dette lysbildet for et sekund.

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

351
00:20:06,450 --> 00:20:08,960
Jeg vil ikke gjøre mye av en demo her.

352
00:20:08,960 --> 00:20:14,360
IETestDrive.com er virkelig viser deg mye om hva som er nytt med IE10,

353
00:20:14,360 --> 00:20:16,220
de tingene som du kan gjøre.

354
00:20:16,220 --> 00:20:19,130
Jeg synes dette er veldig nyttig fordi stedet for å lese gjennom en haug med stortingsmeldinger,

355
00:20:19,130 --> 00:20:23,020
se på noen demoer, og det kommer til å hjelpe deg med å sette den på din egen personlige radar

356
00:20:23,020 --> 00:20:26,620
om hvorvidt en teknologi er fornuftig å selv gjøre noe mer forskning med

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

358
00:20:29,070 --> 00:20:32,780
"Jeg forstår hva Request Animasjon Frame gjør for meg."

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

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

361
00:20:40,190 --> 00:20:44,930
og bestemme selv om det kommer til å være nyttig for deg i dine egne prosjekter og utover

362
00:20:44,930 --> 00:20:47,840
som du fortsetter å jobbe med web-teknologi.

363
00:20:47,840 --> 00:20:49,900
Her vil jeg bare oppfordre deg til å ta en titt.

364
00:20:49,900 --> 00:20:52,880
Jeg tror ikke jeg kommer til å tilbringe mye tid faktisk kjører disse.

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

366
00:20:56,030 --> 00:21:01,640
Du vil se her ting fra touch-effekter til touch-baserte spill i denne delen,

367
00:21:01,640 --> 00:21:06,050
animasjon, veldig rask maskinvare-akselerert animasjon der,

368
00:21:06,050 --> 00:21:11,230
noen optimaliseringer som du vil se i noen av disse prøvene i tillegg,

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

370
00:21:12,770 --> 00:21:15,330
Hvis du går over her og åpne opp kartet,

371
00:21:15,330 --> 00:21:19,070
det er bare et latterlig antall 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 ser på noe eller du har hørt om noe

374
00:21:22,900 --> 00:21:25,850
og du lurer kanskje dette ville være noe kult å bruke i programmet,

375
00:21:25,850 --> 00:21:31,720
prøv å se her, og det er sannsynligvis en ganske god demo for det å spare tid.

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

377
00:21:35,980 --> 00:21:39,620
Ok. Vi vil fortsette her.

378
00:21:39,620 --> 00:21:41,920
Igjen, bare sjekk det ut.

379
00:21:41,920 --> 00:21:45,450
De er web-standarder, så gå til noen andre showcase nettsteder som du vet om

380
00:21:45,450 --> 00:21:50,550
og se om disse teknologiene gir mening for hva du prøver å gjøre.

381
00:21:50,550 --> 00:21:53,190
>> Tilbake til lysbilder.

382
00:21:53,190 --> 00:22:00,290
Når det er sagt, er du flytter fra en Web-verden for å virkelig en installert lokal applikasjon verden,

383
00:22:00,290 --> 00:22:01,850
så er det noen ting å påpeke her.

384
00:22:01,850 --> 00:22:03,690
Først av alt, det er ingen webserver involvert her.

385
00:22:03,690 --> 00:22:06,120
Det er ingen Apache, det er ingen IIS kjører her

386
00:22:06,120 --> 00:22:10,170
tjene opp sider til en ekstern klient, til en ekstern nettleser agent.

387
00:22:10,170 --> 00:22:13,000
I dette tilfellet, er egentlig alt pakket opp for deg.

388
00:22:13,000 --> 00:22:16,630
Du sender det som din søknad til butikken, det blir sertifisert,

389
00:22:16,630 --> 00:22:22,190
det er ut i butikken, og deretter folk i tusentall vil installere spillet eller programmet ditt.

390
00:22:22,190 --> 00:22:24,780
Men i utgangspunktet, de drar det ned lokalt til maskinen sin.

391
00:22:24,780 --> 00:22:29,080
Det er ingen grunn til å gå ut på weben lenger med mindre du har samtaler som trenger en ekstern API,

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

393
00:22:31,790 --> 00:22:35,330
Men de ikke kommer til å være i denne modusen hvor de må gå forespørsel respons fra en server

394
00:22:35,330 --> 00:22:37,910
å få den neste siden av deres innhold.

395
00:22:37,910 --> 00:22:41,380
Så som sagt, det er noen mindre API forskjeller. Disse er utrolig små.

396
00:22:41,380 --> 00:22:46,850
De er lite sannsynlig å treffe deg i din normal koding, men de er i det minste dokumentert.

397
00:22:46,850 --> 00:22:50,030
De er slags kant tilfeller der.

398
00:22:50,030 --> 00:22:53,370
>> Den andre tingen verdt å påpeke er klarerings forskjeller.

399
00:22:53,370 --> 00:22:58,070
Jeg bare nevner dette fordi jeg vil bare sørge for at jeg sa det

400
00:22:58,070 --> 00:23:01,580
så hvis du kjører inn i det senere, vil du tenke, "Chris sa noe om dette,

401
00:23:01,580 --> 00:23:04,890
"Så kanskje, ja, ok," og deretter gå tilbake og finne ut hva det var.

402
00:23:04,890 --> 00:23:06,480
Sammenhenger saken.

403
00:23:06,480 --> 00:23:11,450
Som standard prøver vi å beskytte brukeren mot vektorer av angrep.

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

405
00:23:13,400 --> 00:23:16,130
og visse ting du må endre konteksten for å aktivere.

406
00:23:16,130 --> 00:23:19,860
Som du bruker noen biblioteker der ute - you've allerede jobbet med jQuery,

407
00:23:19,860 --> 00:23:23,650
men hvis du ser etter andre bibliotek der ute - du kanskje bruker noe av funksjonaliteten

408
00:23:23,650 --> 00:23:28,000
den slags går utover lokal bruk, betyr mer dynamiske interaksjoner

409
00:23:28,000 --> 00:23:30,360
XHR forespørsler, sånne ting.

410
00:23:30,360 --> 00:23:33,090
Noen ganger kan du finne de som vil bli deaktivert som standard,

411
00:23:33,090 --> 00:23:37,790
og i så fall, bare gjør et søk, se etter lokale og web sammenheng,

412
00:23:37,790 --> 00:23:39,560
og du vil finne ut hvordan du kan fikse det.

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

414
00:23:42,580 --> 00:23:45,720
som jeg bør nevne, er du helt i stand til å gjøre.

415
00:23:45,720 --> 00:23:49,290
Så hvis du finner noen andre rammeverk - Vi finner oss ikke snakke om dette i et sekund -

416
00:23:49,290 --> 00:23:54,000
for spill og du ønsker å bruke den, vil du bruke noen kontroll bibliotekene som er der ute

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

418
00:23:57,990 --> 00:23:59,560
du kan absolutt bruke denne ting.

419
00:23:59,560 --> 00:24:03,660
Det er ingenting som holder deg tilbake fra å bruke noen form for bibliotek som er basert på Javascript,

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

421
00:24:05,380 --> 00:24:09,740
Igjen, hvis det er noe du kan gjøre i IE10, som er en pokker for mye i disse dager,

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

423
00:24:11,220 --> 00:24:14,800
Trekk det inn i programmet ditt, referanse at Javascript-bibliotek, og bruke det i søknaden din,

424
00:24:14,800 --> 00:24:19,880
bare husk at du kan treffe en sikkerhetskontekst en gang i blant - ikke veldig ofte.

425
00:24:19,880 --> 00:24:24,150
>> Og da de funksjonene, vil vi gå over noen flere av de som vi går.

426
00:24:24,150 --> 00:24:27,500
UX du typen blir vant til som du ser flere og flere programmer

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 følelse for hvordan de fungerer og hvordan den estetiske utformingen har en tendens til å jobbe

429
00:24:33,870 --> 00:24:37,720
på tvers av ulike programmer og hva folk vil bli brukt til å oppleve.

430
00:24:37,720 --> 00:24:39,660
Det er egentlig den viktigste delen.

431
00:24:39,660 --> 00:24:42,460
Pass på at når de fyrer opp din app de ikke trenger å lese en manual,

432
00:24:42,460 --> 00:24:44,300
som de ikke gjør det, for øvrig.

433
00:24:44,300 --> 00:24:46,650
De skal bare være i stand til å begynne å spille med søknaden

434
00:24:46,650 --> 00:24:49,450
og finne det ut uten store problemer.

435
00:24:49,450 --> 00:24:52,660
Ved å stikke og forholde seg til en rekke av disse øvelsene,

436
00:24:52,660 --> 00:24:57,640
du kommer til å gjøre brukerne en stor tjeneste, noe som gjør at enklere.

437
00:24:57,640 --> 00:25:01,810
>> Ok. En siste ting på API side og så får vi komme inn faktisk skrive kode.

438
00:25:01,810 --> 00:25:05,660
WinJS er den tingen jeg nevnte veldig kort med det komplekse lysbilde

439
00:25:05,660 --> 00:25:08,850
med alle de forskjellige valgene du har for å lage applikasjoner.

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

441
00:25:10,890 --> 00:25:13,680
Det er din venn til å hjelpe deg å skrive ting raskere.

442
00:25:13,680 --> 00:25:18,820
Det er bare Javascript og CSS. Du trenger ikke å bruke den. Du kan bruke den.

443
00:25:18,820 --> 00:25:22,180
Hvis du kommer til å være å kalle inn til Windows-funksjoner, vil du ende opp med å bruke det,

444
00:25:22,180 --> 00:25:27,210
men hvis det er ting som enkelte design patterns eller kontroller som du egentlig ikke ønsker å bruke,

445
00:25:27,210 --> 00:25:29,090
du ønsker å bruke noe annet, er det opp til deg.

446
00:25:29,090 --> 00:25:32,580
Bestem deg for hva du vil bruke, og stiler som du vil bruke.

447
00:25:32,580 --> 00:25:37,250
Funksjonene fra namespacing og klasse generasjon - opp til deg.

448
00:25:37,250 --> 00:25:41,650
Hvis du foretrekker det ene eller det andre, det er helt og holdent ditt valg. Det er fortsatt Javascript og CSS.

449
00:25:41,650 --> 00:25:43,860
Men det kommer til å hjelpe deg å gjøre en masse ting.

450
00:25:43,860 --> 00:25:47,780
For eksempel, her er en undergruppe av hva den kan gjøre,

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

452
00:25:50,790 --> 00:25:54,000
Noen av dere hørt om eller jobbet med Node.js?

453
00:25:54,000 --> 00:25:59,520
Det er et felles mønster å jobbe med asynkron programmering.

454
00:25:59,520 --> 00:26:02,370
Så i utgangspunktet det du sier er: "Gå og gjør noe,

455
00:26:02,370 --> 00:26:05,790
"Og du kommer til å gi meg et løfte om at du kommer tilbake til meg når du er ferdig."

456
00:26:05,790 --> 00:26:08,400
Det er i hovedsak hva som skjer.

457
00:26:08,400 --> 00:26:12,400
Så du trenger ikke fryse opp søknaden din mens brukeren går og plukke en fil

458
00:26:12,400 --> 00:26:15,810
eller noe blir streamet ned fra nettet.

459
00:26:15,810 --> 00:26:17,210
Grensesnittet er fortsatt responsive.

460
00:26:17,210 --> 00:26:19,410
Og du kan gjøre det ved hjelp av asynkron programmering.

461
00:26:19,410 --> 00:26:23,620
Det høres latterlig komplisert, men det er veldig lett fordi du bruker løfter

462
00:26:23,620 --> 00:26:27,900
og du bare si: "Gå og gjør dette, og når du er ferdig, kan du ringe tilbake til denne metoden."

463
00:26:27,900 --> 00:26:30,270
Det er ganske mye det. Det er alt bygget inn i WinJS.

464
00:26:30,270 --> 00:26:35,120
Det kommer til å gjøre det mye enklere å skrive virkelig fleksible og kraftige programmer.

465
00:26:35,120 --> 00:26:37,870
>> Du kan se resten her, mye animasjoner.

466
00:26:37,870 --> 00:26:41,240
Sannsynligvis en av de mer viktige ting på dette lysbildet er kontroller.

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

468
00:26:44,680 --> 00:26:48,900
Her er et eksempel på nettopp noen av de kontroller som du kan bruke i dine applikasjoner.

469
00:26:48,900 --> 00:26:51,060
Dette er alt rett opp fra WinJS.

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

471
00:26:53,430 --> 00:26:55,990
du bare si: "Her er hvordan jeg vil skrive min søknad."

472
00:26:55,990 --> 00:26:59,420
"Jeg skal bruke en flip visning slik at jeg kan gå mellom forskjellige bilder."

473
00:26:59,420 --> 00:27:03,380
Jeg har ikke vist deg Semantisk Zoom. Jeg skal vise deg at i et sekund.

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

475
00:27:05,700 --> 00:27:08,680
Du har allerede sett et rutenett som en del av butikken søknaden,

476
00:27:08,680 --> 00:27:12,170
så å kunne bruke blokker av innhold og ruller over det.

477
00:27:12,170 --> 00:27:15,660
Flyout menyer du ser fra tid til annen.

478
00:27:15,660 --> 00:27:19,090
Programmet bar jeg viste deg med at Fresh Paint-programmet i tillegg,

479
00:27:19,090 --> 00:27:22,190
så du så hvordan du kan tilpasse det ved å legge knappene på det

480
00:27:22,190 --> 00:27:26,360
og å ha det gjemme bort når du ikke bryr deg å bruke det.

481
00:27:26,360 --> 00:27:28,120
Det er egentlig helt opp til deg å bruke.

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

483
00:27:30,210 --> 00:27:33,640
Jeg skal vise deg hvordan du kan lage disse i bare et sekund, men det er mer enn bare dette,

484
00:27:33,640 --> 00:27:37,060
og det viktigste er å bruke dem hvis du ønsker, spare litt tid.

485
00:27:37,060 --> 00:27:40,830
>> Hvis du har andre kontrollbiblioteker som du ønsker å bruke, er det helt greit også.

486
00:27:40,830 --> 00:27:46,300
Ting som jQuery UI gjør mye av denne type idé også,

487
00:27:46,300 --> 00:27:51,280
gi flere kontroller som strekker hva du kan gjøre i HTML og Javascript.

488
00:27:52,690 --> 00:27:55,680
La oss dykke i. Jeg har allerede sagt det. Bruk det du ønsker.

489
00:27:55,680 --> 00:27:59,680
Bare husk at du kan kjøre inn i noen sammenheng problemer.

490
00:27:59,680 --> 00:28:03,380
Men du kan sikkert mikse og matche hva slags bibliotek du er komfortabel med,

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

492
00:28:06,770 --> 00:28:09,850
>> La oss snakke om verktøy bare for et sekund.

493
00:28:09,850 --> 00:28:12,400
Du kan få det du trenger for å begynne å jobbe med Windows Store apps.

494
00:28:12,400 --> 00:28:17,360
Hvis jeg går ut igjen, jeg har for mange ting her oppe.

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

496
00:28:21,770 --> 00:28:23,300
du kan laste ned alt du trenger.

497
00:28:23,300 --> 00:28:28,170
Som studenter, har du tilgang til mer enn allmennheten gjør,

498
00:28:28,170 --> 00:28:30,670
slik at du kan få høyere end versjoner av Visual Studio.

499
00:28:30,670 --> 00:28:34,090
Edwin nevnt kan du allerede få Windows også.

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

501
00:28:36,790 --> 00:28:40,380
og laste ned alt du trenger for å lage et program, og det er helt gratis.

502
00:28:40,380 --> 00:28:42,460
Så det er en gratis versjon av Visual Studio,

503
00:28:42,460 --> 00:28:44,450
er det noen verktøy som vil installere sammen av det -

504
00:28:44,450 --> 00:28:47,240
alt du trenger for å lage og teste din søknad.

505
00:28:47,240 --> 00:28:50,130
Det er bare når du kommer til å publisere din søknad opp til butikken

506
00:28:50,130 --> 00:28:52,470
at du kommer til å trenge en utvikler-konto.

507
00:28:52,470 --> 00:28:56,100
Også dette tror jeg er gratis. Er det gratis for studenter så vel? >> [Guarin] Hvem av dem?

508
00:28:56,100 --> 00:28:57,970
Utvikleren konto, den faktiske innlevering. >> [Guarin] Ja.

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

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 si for et individ som standard det er $ 49.

512
00:29:03,840 --> 00:29:06,140
Men ikke registrere deg for at som student.

513
00:29:06,140 --> 00:29:10,250
Vi skal få deg litt informasjon gjennom dine programmer som du kan få en konto for gratis,

514
00:29:10,250 --> 00:29:13,980
og som vil la deg deretter sende inn søknader helt frem til butikken,

515
00:29:13,980 --> 00:29:17,370
så mange du vil, og alle som godhet vil snart følge etter.

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 laste ned verktøy som du kanskje trenger herfra.

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

519
00:29:25,310 --> 00:29:27,160
men igjen, vil du ikke trenger det.

520
00:29:27,160 --> 00:29:32,880
>> Det andre området - la meg påpeke dette ut for deg raskt - 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 gjette hva det er for.

523
00:29:37,770 --> 00:29:40,380
Det er faktisk en ganske vennlig nettsted. Det er mye bra informasjon her.

524
00:29:40,380 --> 00:29:41,770
Du kan jobbe oss gjennom det.

525
00:29:41,770 --> 00:29:43,960
Det kommer til å gi deg noen råd om noen ting

526
00:29:43,960 --> 00:29:46,760
at kanskje du ikke har tenkt på før eller måtte forholde seg til før,

527
00:29:46,760 --> 00:29:50,780
som å designe for berøring, designe for ulike formfaktorer,

528
00:29:50,780 --> 00:29:55,310
designe for egenskapene til Windows 8, de tingene jeg nevnte tidligere

529
00:29:55,310 --> 00:29:58,740
lignende søking og deling, noen ting som jeg ikke har snakket om ennå.

530
00:29:58,740 --> 00:30:05,570
De er alle oppført her, og det er et ganske godt sett med nyttige fil sider

531
00:30:05,570 --> 00:30:08,670
som vil hjelpe deg å forstå hvordan å lage en bestemt type søknad,

532
00:30:08,670 --> 00:30:14,250
hvordan du gjør samhandling, hvordan man skal håndtere brukergrensesnittet og UX av søknaden din.

533
00:30:14,250 --> 00:30:18,630
Jeg vil anbefale at du tar en titt på dette, spesielt hvis du er på et tidspunkt

534
00:30:18,630 --> 00:30:22,960
håper å publisere en søknad til butikken.

535
00:30:22,960 --> 00:30:25,250
Du kommer til å ønske å vite hvordan å lage en god søknad

536
00:30:25,250 --> 00:30:28,300
fordi jeg nevnte tidligere hvis du ikke gjør det, det er de vurderinger igjen.

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

538
00:30:29,930 --> 00:30:32,960
De vil ikke være i stand til å finne ting som de forventer på de riktige stedene.

539
00:30:32,960 --> 00:30:36,590
Ingen ønsker at det skal skje med deg.

540
00:30:36,590 --> 00:30:39,220
>> Flytte her fremover, la meg lukke det ned.

541
00:30:39,220 --> 00:30:43,700
Nå som du vet hvor du skal få ting, vil jeg vise deg hvordan du faktisk begynne å bruke ting.

542
00:30:43,700 --> 00:30:48,520
Til å begynne, vil jeg faktisk vise deg her et eksempel på desktop apps på min startskjermen.

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

544
00:30:53,600 --> 00:30:55,890
De har en litt annen side ved side.

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

546
00:30:57,930 --> 00:31:00,960
og i de tilfeller de er alle kommer til å lansere tilbake til skrivebordet mitt

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

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

549
00:31:06,960 --> 00:31:12,940
De er ikke, for eksempel slik væpnet! eller disse tingene. La meg starte en raskt.

550
00:31:12,940 --> 00:31:14,340
Egentlig, her er en interessant én.

551
00:31:14,340 --> 00:31:19,210
Dette ble utviklet av studenter som arbeider i partnerskap på NERD.

552
00:31:19,210 --> 00:31:23,430
Full skjerm søknad, slike opplevelser her.

553
00:31:23,430 --> 00:31:26,290
Oh, fine kutt skjermer og alle slags morsomme ting.

554
00:31:26,290 --> 00:31:34,330
De utviklet dette. Vi kan like godt vise hele greia mens vi er i gang.

555
00:31:37,510 --> 00:31:41,070
Faktisk, jobbet jeg med dem litt, ga dem noen råd om ting

556
00:31:41,070 --> 00:31:44,160
fordi de gjorde Javascript for sin søknad.

557
00:31:44,160 --> 00:31:46,460
Vær så snill, jeg tar ikke æren for sitt arbeid, de gjorde alt arbeidet.

558
00:31:46,460 --> 00:31:48,990
Jeg bare ga dem et litt råd her og der,

559
00:31:48,990 --> 00:31:52,400
men de gjorde noen store ting ved å bruke en Java front end

560
00:31:52,400 --> 00:31:56,920
og binde i noen fysikkmotorer og ting å gjøre mye av dette arbeidet.

561
00:32:00,120 --> 00:32:03,360
Gå. La oss se om det fungerer.

562
00:32:03,360 --> 00:32:07,010
Wow, det fortsatt arbeidet. Greit, bra. Men du skjønner poenget.

563
00:32:07,010 --> 00:32:09,350
En fullskjerm app, en virkelig god opplevelse.

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

565
00:32:14,250 --> 00:32:19,420
Hvis jeg hadde en berøringsskjerm, kunne jeg bare trekke på det og jobbe videre med det.

566
00:32:19,420 --> 00:32:21,440
>> En ting jeg ikke viste, og grunnen til at jeg tar dette opp

567
00:32:21,440 --> 00:32:23,840
er jeg ønsket å ha en annen app for å vise deg hva du kan gjøre,

568
00:32:23,840 --> 00:32:29,480
du kan faktisk ta programmer i Windows, og drar dem til siden av skjermen.

569
00:32:29,480 --> 00:32:33,070
Dette kalles knipser et program.

570
00:32:33,070 --> 00:32:37,800
I dette tilfellet har jeg tatt Inkarus og jeg har lagt den til side her.

571
00:32:37,800 --> 00:32:42,990
Det er nå i Snap visning, og som tillater meg å gjøre noe annet mens det programmet er der.

572
00:32:42,990 --> 00:32:46,210
De fleste spill kommer du vil rett og slett ta en pause.

573
00:32:46,210 --> 00:32:51,090
Det er normalt en anstendig ting å gjøre med mindre spillet kan liksom skalere ned

574
00:32:51,090 --> 00:32:54,210
til at små for en resolusjon, som kanskje en slags brettspill

575
00:32:54,210 --> 00:32:55,620
eller ting som det på anledningen.

576
00:32:55,620 --> 00:32:58,570
Men generelt, til den enkleste ting å gjøre, og den mest hensiktsmessige ting gjør for spill

577
00:32:58,570 --> 00:33:00,620
er å ta en pause i programmet.

578
00:33:00,620 --> 00:33:09,440
For programmer som nyheter apps, hvis jeg starter denne og da jeg snapper den,

579
00:33:09,440 --> 00:33:16,170
du får se det faktisk endres vesentlig i hvordan det er å presentere dataene til deg.

580
00:33:16,170 --> 00:33:20,070
Her er det som viser deg i virkelig en mer vertikal pan som informasjon,

581
00:33:20,070 --> 00:33:23,340
men jeg kan likevel absolutt bruke programmet.

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

583
00:33:25,640 --> 00:33:29,870
Det faktum at det er i mindre format ikke holde meg fra å bruke det programmet. Så tenk på det.

584
00:33:29,870 --> 00:33:32,090
Det er noe som du må ha dine apps gjør til en viss grad,

585
00:33:32,090 --> 00:33:35,370
men det er opp til deg å bestemme hvordan funksjonelle dine apps bør være

586
00:33:35,370 --> 00:33:39,080
i denne typen av en mindre miljø.

587
00:33:39,080 --> 00:33:44,780
La meg lukke at man ned og gå tilbake til der vi var her.

588
00:33:44,780 --> 00:33:48,110
>> Edwin, du har lagt et bilde av meg allerede? >> [Guarin] Yeah. >> [Bowen] Se på det.

589
00:33:48,110 --> 00:33:51,510
Ser du det? Edwin lagt et bilde. [Ler]

590
00:33:51,510 --> 00:33:54,410
>> La oss gå tilbake hit i Visual Studio. La meg starte dette for deg.

591
00:33:54,410 --> 00:33:58,170
Jeg kunne ha klikket på flisen på at Start-skjermen.

592
00:33:58,170 --> 00:34:02,630
Det brakte meg tilbake til Desktop-modus, og det er å lansere den desktop app for Visual Studio.

593
00:34:02,630 --> 00:34:06,790
Dette er Windows som du allerede vet.

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

595
00:34:09,100 --> 00:34:11,159
Vi vil fokusere på nytt på Javascript, HTML.

596
00:34:11,159 --> 00:34:16,510
Jeg kommer til å gå ut og velge opp her i henhold til Javascript, Windows Store.

597
00:34:16,510 --> 00:34:19,010
Det er en rekke maler som du kan bruke.

598
00:34:19,010 --> 00:34:21,710
For produktivitet, vil jeg anbefale at du tar en titt på noen av disse andre som her

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

600
00:34:23,489 --> 00:34:25,270
De er virkelig nyttig hvis du gjør en søknad

601
00:34:25,270 --> 00:34:28,960
som kommer til å ha den slags design og navigasjon. Du vil se disse mye.

602
00:34:28,960 --> 00:34:33,070
Den jeg bare viste du var faktisk en forekomst av Grid-programmet.

603
00:34:33,070 --> 00:34:36,880
Så hvis du tror du kommer til å være å lage en nyhets app eller en RSS-leser

604
00:34:36,880 --> 00:34:43,120
eller noe sånt som omhandler flere oppføringer som du ønsker å vise detaljer,

605
00:34:43,120 --> 00:34:45,989
tenke på å bruke en av disse malene for å komme raskt 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 deg alle bevegelige deler her

608
00:34:50,120 --> 00:34:56,120
Jeg kommer til å lage den tomme app, og så får vi gå litt dypere inn i detaljene.

609
00:34:56,120 --> 00:34:58,690
Jeg bare gjør det blank søknad her.

610
00:34:58,690 --> 00:35:01,270
Det kommer til å skape hele prosjektet for meg.

611
00:35:01,270 --> 00:35:03,290
Jeg vil åpne opp de tingene som jeg ønsker å vise deg som standard.

612
00:35:03,290 --> 00:35:08,550
La meg bare zoome inn litt for å vise deg hva som er opprettet for oss her.

613
00:35:08,550 --> 00:35:11,350
De tingene som du kommer til å se på første er alle oppkalt standard.

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

615
00:35:15,970 --> 00:35:19,590
Den andre tingen å påpeke er at vi allerede har en referanse til det jeg nevnte tidligere.

616
00:35:19,590 --> 00:35:24,530
Dette er WinJS. Ingen egentlig kaller det denne lange navn her.

617
00:35:24,530 --> 00:35:27,710
Det er WinJS, Windows Library for Javascript.

618
00:35:27,710 --> 00:35:29,530
Hvis du åpner den opp, kan du se det er alt her.

619
00:35:29,530 --> 00:35:31,820
Det er ulike CSS-filer, det er Script.

620
00:35:31,820 --> 00:35:33,520
Det er der for å hjelpe deg ut.

621
00:35:33,520 --> 00:35:37,190
Det er egentlig der for å gi kontroller og stiler og ting som du bare kan bruke automatisk.

622
00:35:37,190 --> 00:35:41,240
Men igjen, hvis det er ting du ønsker å bruke i stedet i form av styling og andre kontroller,

623
00:35:41,240 --> 00:35:45,600
det er helt opp til deg. Jeg vil vise deg hvordan du kan bruke et par av de tingene akkurat nå.

624
00:35:45,600 --> 00:35:51,020
>> Tilbake over på vår venstre side, la meg vise deg standard HTML-side.

625
00:35:51,020 --> 00:35:54,490
Du har allerede sett WinJS ting, og det er egentlig alt som skjer der

626
00:35:54,490 --> 00:35:59,930
med de midterste linjene av markup, bare bringe i CSS som standard

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

628
00:36:02,370 --> 00:36:06,400
Du trenger ikke å være herre over hva som skjer i disse filene.

629
00:36:06,400 --> 00:36:10,110
Det er ganske interessant å ta en titt på dem til slags vurdere hva som skjer i det

630
00:36:10,110 --> 00:36:14,410
fordi det er ganske interessante middels og avanserte teknikker som skjer der inne,

631
00:36:14,410 --> 00:36:18,100
men det fine er som utviklere, du kan bare dra nytte av dem, bare bruke dem

632
00:36:18,100 --> 00:36:19,510
og egentlig ikke trenger å bekymre deg for det.

633
00:36:19,510 --> 00:36:21,960
Du kan fortsatt kjøre bil uten å vite hvordan det fungerer, ikke sant?

634
00:36:21,960 --> 00:36:24,180
Så det er den type ting som skjer her.

635
00:36:24,180 --> 00:36:26,930
Det er kontroller og stiler og ting som du kan bare gå videre og bruke

636
00:36:26,930 --> 00:36:31,460
og kode som du kan bruke i en andre uten å vite hva som er der.

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

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

639
00:36:35,860 --> 00:36:38,400
og din egen Javascript for å få ting rullende.

640
00:36:38,400 --> 00:36:43,300
Du vil være å legge sikkert andre Javascript-filer og kanskje andre CSS-filer

641
00:36:43,300 --> 00:36:47,480
som prosjektet vokser, men dette er egentlig bare et utgangspunkt.

642
00:36:47,480 --> 00:36:52,570
Her er Hello, world tilsvarende HTML, så vi er tilbake i body-koden.

643
00:36:52,570 --> 00:36:55,990
På toppen, forresten, det er HTML5 DOCTYPE,

644
00:36:55,990 --> 00:37:00,060
så du vil kjenne at fra hva du har jobbet med.

645
00:37:00,060 --> 00:37:04,600
Det er full IntelliSense i her også, så hvis du gjør ting som å skrive inn en video tag

646
00:37:04,600 --> 00:37:07,340
og utvide det ut, har du sannsynligvis lært om det faktum

647
00:37:07,340 --> 00:37:12,760
at du trenger å gjøre fallback koding for video koder i HTML5 - eller kanskje du har -

648
00:37:12,760 --> 00:37:17,490
for å sikre at ulike nettlesere har støtte for video.

649
00:37:17,490 --> 00:37:22,610
Vi har ting som dette på tvers av HTML, på tvers av Javascript, på tvers av CSS.

650
00:37:22,610 --> 00:37:26,020
Som er innebygd, og jeg skal vise deg CSS i et sekund.

651
00:37:26,020 --> 00:37:29,430
Her kan du gå videre og begynne å endre kode, markeringen.

652
00:37:29,430 --> 00:37:33,700
Faktisk, før jeg endre noe, kommer jeg til å kjøre dette og vise deg hva du får.

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

654
00:37:35,700 --> 00:37:40,940
og da får du Hei, verden opplever her. Det er fantastisk, ikke sant?

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

656
00:37:42,640 --> 00:37:45,970
Innhold går her. Det er den grunnleggende ting.

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

658
00:37:48,740 --> 00:37:51,300
Vi vil gå videre og legge inn noen ting.

659
00:37:51,300 --> 00:37:53,470
Jeg har en liten bit av markup jeg kommer til å kopiere inn her

660
00:37:53,470 --> 00:37:55,740
bare så du ikke trenger å se meg skrive.

661
00:37:55,740 --> 00:38:02,620
La meg gå få opp verktøykassen her, og jeg vil peke dette fordi jeg kommer til å gjøre dette et par ganger.

662
00:38:02,620 --> 00:38:05,650
Verktøykasse, hvis du ikke har sett Visual Studio, er der du kommer til å finne en haug med kontroller.

663
00:38:05,650 --> 00:38:09,050
Du kan også sette kodesnutter inn i det at du kan gjenbruke.

664
00:38:09,050 --> 00:38:16,360
Her skal jeg bare stikke innom noen andre HTML, ikke noe veldig avansert i det hele tatt her.

665
00:38:16,360 --> 00:38:20,170
Det er bare grunnleggende HTML si jeg har en inngang hvor jeg kan skrive,

666
00:38:20,170 --> 00:38:23,860
Jeg har en knapp hvor jeg kan sende den inn, og da har jeg en div som er essensielt en plassholder

667
00:38:23,860 --> 00:38:27,360
som jeg kan bruke til å sende ut "Hei, du skriver dette."

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

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

670
00:38:39,340 --> 00:38:42,270
Dette er en av de viktigste tingene fra WinJS.

671
00:38:42,270 --> 00:38:47,250
Det kommer til å gi deg som standard noen utseende som er veldig konsistent

672
00:38:47,250 --> 00:38:50,520
med resten av hva Windows 8 gjør.

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

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

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

676
00:39:00,880 --> 00:39:04,680
Hvis du ønsker å bruke noe annet, hvis du ønsker å endre det, helt greit,

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

678
00:39:06,790 --> 00:39:09,610
Det kommer til å bli mer kjent for brukerne.

679
00:39:09,610 --> 00:39:13,510
Og dette vil selvsagt ikke gjøre noe fordi jeg ikke egentlig wire opp noen form for kode

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

681
00:39:16,630 --> 00:39:20,630
Så jeg kan bli kvitt det, og vi vil komme tilbake til vår søknad.

682
00:39:20,630 --> 00:39:25,310
>> La meg bytte over til våre default.js.

683
00:39:25,310 --> 00:39:29,030
Dette ser ganske komplisert, men det er bare å gjøre et par ting for deg.

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

685
00:39:33,120 --> 00:39:36,620
Det eneste dette gjør er bare slags spørre: "Hvordan havnet jeg her?"

686
00:39:36,620 --> 00:39:39,090
og sa: "Er du lansere dette programmet for første gang?"

687
00:39:39,090 --> 00:39:42,640
"Er du gjenoppta app fra å ha det som blir suspendert?"

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

689
00:39:44,510 --> 00:39:50,300
Virkelig, vårt fokus på denne filen her er rett om her.

690
00:39:50,300 --> 00:39:54,490
På dette punktet, er dette en linje med kode ganske viktig.

691
00:39:54,490 --> 00:39:57,070
Det er faktisk kommer til å gå og se gjennom alle markup,

692
00:39:57,070 --> 00:40:01,640
og det kommer til å finne ting som du har bedt om å få omgjort til kontroller,

693
00:40:01,640 --> 00:40:07,220
dypere kontroller som en alderskontroll, som en rutenettvisning, som flyout

694
00:40:07,220 --> 00:40:09,570
og de andre tingene som jeg viste deg på dette lysbildet før.

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

696
00:40:12,550 --> 00:40:17,860
Du bare ikke si flyout som et element, og har det vet hva de skal gjøre.

697
00:40:17,860 --> 00:40:22,120
Hva vi faktisk gjør er det samme som skjer i andre typer kontroll rammer.

698
00:40:22,120 --> 00:40:26,200
jQuery UI gjør det samme slags generell tilnærming.

699
00:40:26,200 --> 00:40:30,800
Du bruker markeringer i HTML, og deretter noen Java kommer gjennom senere og sier,

700
00:40:30,800 --> 00:40:35,900
"Å, jeg vet hva det er. Det er å be for at dette skal bli omgjort til slike ting,"

701
00:40:35,900 --> 00:40:39,850
som er andre mer uttrykks HTML for å gjøre som en vurderinger kontroll,

702
00:40:39,850 --> 00:40:41,790
som er det jeg vil vise deg akkurat nå.

703
00:40:41,790 --> 00:40:46,140
Dette kodelinje er et løfte som sier: "Når dette løftet er oppfylt,

704
00:40:46,140 --> 00:40:49,090
"Alt du har bedt om har deretter blitt opprettet."

705
00:40:49,090 --> 00:40:52,780
Og det er det. Det ser litt komplisert, men det er egentlig det samme i hvert prosjekt.

706
00:40:52,780 --> 00:40:56,690
Ned her er hvor du kan begynne å legge inn noe annet du vil ha skje,

707
00:40:56,690 --> 00:40:58,280
så vi vil komme tilbake til det i et sekund.

708
00:40:58,280 --> 00:41:01,480
>> Først av alt må jeg litt kode som kan svare på det faktum

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

710
00:41:03,320 --> 00:41:06,330
Jeg kommer til å gå videre og sette det i her nede.

711
00:41:06,330 --> 00:41:09,620
Igjen, jeg kommer ikke til å gjøre noe typing foran deg her.

712
00:41:09,620 --> 00:41:12,560
Veldig grunnleggende Java bare si når dette kalles

713
00:41:12,560 --> 00:41:15,270
vi kommer til å bli gitt noen detaljer om hvordan vi kom hit

714
00:41:15,270 --> 00:41:17,630
og da skal vi gjøre noen grunnleggende ting.

715
00:41:17,630 --> 00:41:21,300
Gå finne ting i min HTML-side som heter nameInput,

716
00:41:21,300 --> 00:41:28,490
ta tak i det, ta sin verdi, slap "Hallo" på forsiden av det, og hold deg at resulterende strengen

717
00:41:28,490 --> 00:41:31,960
inn at div tag som vi hadde før som egentlig ikke har noe før.

718
00:41:31,960 --> 00:41:37,220
Nå skal vi finne den koden og gjøre sin indre innhold lik som streng.

719
00:41:37,220 --> 00:41:38,880
Veldig enkel Javascript.

720
00:41:38,880 --> 00:41:42,240
Forhåpentligvis du erkjenner at det er egentlig ikke noe uvanlig skjer her.

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

722
00:41:45,360 --> 00:41:48,220
Hvis jeg kjører dette nå, er det fortsatt ikke til å gjøre noe arbeid fordi jeg ikke har kablet det opp

723
00:41:48,220 --> 00:41:50,030
å motta hendelse.

724
00:41:50,030 --> 00:41:55,710
For å gjøre det, vil jeg gjøre det akkurat her, igjen tilbake til min verktøykasse,

725
00:41:55,710 --> 00:41:58,730
spratt den inn her.

726
00:41:58,730 --> 00:42:03,060
Jeg forventer at du har sett alt denne type ting før, så jeg vil ikke over-forklare det.

727
00:42:03,060 --> 00:42:05,060
Nå skal vi gå får helloButton.

728
00:42:05,060 --> 00:42:07,730
Vi kommer til å si, "-knappen, gratulerer."

729
00:42:07,730 --> 00:42:10,130
"Her er en hendelse som du nå er å svare på."

730
00:42:10,130 --> 00:42:13,420
"Når noen klikker på deg, kaller denne funksjonen, buttonClickHandler."

731
00:42:13,420 --> 00:42:17,070
Og det er den funksjonen vi nettopp lagt helt ned på bunnen der. Det var det.

732
00:42:17,070 --> 00:42:20,980
Så nå har vi fått en utrolig funksjonell applikasjon.

733
00:42:20,980 --> 00:42:24,720
Jeg tror du vil bli veldig imponert av dette.

734
00:42:24,720 --> 00:42:32,320
Chris. Vent til det. Wow. Ok. Det er utrolig. [Ler]

735
00:42:32,320 --> 00:42:36,570
Men det er mer. Ikke kjøp det ennå. Vent.

736
00:42:36,570 --> 00:42:39,610
>> La meg vise deg litt mer her og komme ut av fullskjerm.

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

738
00:42:42,690 --> 00:42:45,530
La meg gå inn og faktisk vise deg litt med CSS.

739
00:42:45,530 --> 00:42:49,480
Akkurat som standard, hvis vi ser tilbake på den siden her,

740
00:42:49,480 --> 00:42:53,570
når vi dro i disse tingene fra WinJS og vi fikk ui-mørk,

741
00:42:53,570 --> 00:42:58,550
faktisk, kan du endre det til standard for bruk av lys-programmet.

742
00:42:58,550 --> 00:43:03,450
ui-mørket er bra for grafiske applikasjoner som bruker mange bilder,

743
00:43:03,450 --> 00:43:05,740
du viser mye av visuelt innhold.

744
00:43:05,740 --> 00:43:12,560
Hvis du viser mye av tekstlig innhold, er ui-lys generelt et godt valg.

745
00:43:12,560 --> 00:43:15,160
Du trenger ikke å velge det, men jeg har byttet til det

746
00:43:15,160 --> 00:43:17,690
og nå du ser det samme markup, samme alt,

747
00:43:17,690 --> 00:43:20,320
det er bare å bruke i utgangspunktet en omvendt ordning her

748
00:43:20,320 --> 00:43:24,770
der alt er å gjøre det svart tekst på hvit.

749
00:43:24,770 --> 00:43:26,460
Det er alt vel og bra.

750
00:43:26,460 --> 00:43:30,680
La meg komme ut her, og la oss faktisk gjøre litt mer med CSS.

751
00:43:30,680 --> 00:43:34,830
Jeg skal sette den tilbake på mørk fordi jeg tror det er nok lettere å se på skjermen

752
00:43:34,830 --> 00:43:36,970
når jeg begynner å gjøre disse tingene.

753
00:43:36,970 --> 00:43:40,150
Jeg kommer til å erstatte den kroppen en gang til.

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

755
00:43:44,040 --> 00:43:48,690
La oss få inn kroppen med klasser.

756
00:43:48,690 --> 00:43:53,000
Jeg tror du har gjort grunnleggende velgere med CSS og sånt allerede,

757
00:43:53,000 --> 00:43:55,380
så har du sannsynligvis vet hva som skjer her.

758
00:43:55,380 --> 00:43:59,250
Bare tildele noen klasser til vår header, og vi skaper en ny div

759
00:43:59,250 --> 00:44:04,430
å pakke resten av at ting som vi nå kan bruke til å style alt sammen.

760
00:44:04,430 --> 00:44:07,760
Så det jeg kan gjøre nå er å gå over til vår standard CSS.

761
00:44:07,760 --> 00:44:11,900
Har du sett på mediespørringer ennå? Har du snakket om det i det hele tatt?

762
00:44:11,900 --> 00:44:17,220
Mediespørringer er en del av denne økende graden -

763
00:44:17,220 --> 00:44:19,660
eller det er en etablert trend nå faktisk på nettet -

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

765
00:44:22,760 --> 00:44:28,480
og tanken er at programmene dine kan virkelig justere seg riktig

766
00:44:28,480 --> 00:44:31,910
basert på hva enheten at de blir vist på kan gjøre.

767
00:44:31,910 --> 00:44:35,040
Så hvis du er på en mobil enhet, åpenbart at du ikke kommer til å ha så mye skjermen eiendomsmegling

768
00:44:35,040 --> 00:44:41,520
som du vil på en stor 30-tommers skjerm sitter med en stasjonær, en stor PC sånn.

769
00:44:41,520 --> 00:44:46,710
Slik at den gamle svar på det ville være å ha 5, 6 forskjellige versjoner av samme side

770
00:44:46,710 --> 00:44:51,350
og du vil åpne opp den versjonen som ble innstilt for at viss størrelse skjermen.

771
00:44:51,350 --> 00:44:55,420
Ikke bra. Det er veldig, veldig repeterende og det er massevis av vedlikehold for å gjøre det.

772
00:44:55,420 --> 00:44:58,120
Nå har vi noe som kalles CSS mediehenvendelser,

773
00:44:58,120 --> 00:45:02,530
og vi kan bruke dette til å automatisk oppdage når det er visse størrelser

774
00:45:02,530 --> 00:45:07,030
eller en viss bruk av innholdet som blir utført.

775
00:45:07,030 --> 00:45:09,580
Så du kan svare på det, og du kan si: "Ok, i dette tilfellet

776
00:45:09,580 --> 00:45:12,580
"Du sannsynligvis ikke engang trenger meg til å fortelle dere hva som skjer her."

777
00:45:12,580 --> 00:45:18,020
Dette er bare å si om dette programmet er snappet, som jeg viste deg før -

778
00:45:18,020 --> 00:45:20,830
ta tak i det og sette den til side av skjermen -

779
00:45:20,830 --> 00:45:23,910
så la oss gjøre følgende styling.

780
00:45:23,910 --> 00:45:25,850
Styling er ikke bare om farger og sånt.

781
00:45:25,850 --> 00:45:29,860
Det handler også om dimensjonering og marginer og polstringer og orienteringer av innhold

782
00:45:29,860 --> 00:45:34,040
eller deaktivere eller aktivere hele deler av siden

783
00:45:34,040 --> 00:45:36,420
og, i dette tilfellet, din app eller spillet ditt også.

784
00:45:36,420 --> 00:45:39,210
Så her kan du gjøre så enkelt som du vil.

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

786
00:45:46,720 --> 00:45:50,530
så jeg kommer til å gå videre og bare legge på grunnleggende kroppen velger og si,

787
00:45:50,530 --> 00:45:58,360
"Når jeg klikket, la oss gå videre og gjøre background-color og la oss velge noe."

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

789
00:46:00,400 --> 00:46:05,720
I 2012 har vi lagt til en masse ting for CSS-støtte og Javascript og HTML.

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

791
00:46:08,690 --> 00:46:11,730
Det kule er at du har fått visuelle velgere for mange ting i tillegg.

792
00:46:11,730 --> 00:46:14,120
Så du kan gå gjennom og bare velge en farge,

793
00:46:14,120 --> 00:46:17,580
eller du kan gå ut og være enda mer spesifikk, og du kan velge -

794
00:46:17,580 --> 00:46:22,330
dette kommer til å bli forferdelig. Jeg vil faktisk plukke en anstendig farge her.

795
00:46:22,330 --> 00:46:26,500
Se markering også, forresten. Det er din RGB standard format der.

796
00:46:26,500 --> 00:46:30,780
Men hvis jeg bytter opacity, det kommer til å bytte over til en alfakanalvelger her.

797
00:46:30,780 --> 00:46:36,910
Så du kan se at fargen med i hovedsak de prosent gjennomsiktighet som du har for at

798
00:46:36,910 --> 00:46:38,860
alle bakt rett i det.

799
00:46:38,860 --> 00:46:42,530
Jeg kommer til å holde det som 100%, og deretter når jeg er ferdig med det, er alt vel og bra.

800
00:46:42,530 --> 00:46:46,160
Nå hvis jeg kjører programmet og vi tar app og vi snapper den,

801
00:46:46,160 --> 00:46:49,000
at bakgrunnsfargen blir automatisk justert

802
00:46:49,000 --> 00:46:53,410
bare fordi vi har noen CSS som sier: "Gå og gjør det."

803
00:46:53,410 --> 00:46:55,580
Du kan også skrive Java altfor som vil gjøre det samme

804
00:46:55,580 --> 00:47:03,010
eller at du kan bruke til å faktisk ta en pause et spill, gjør ting som det.

805
00:47:03,010 --> 00:47:04,310
Det er nok når du vil bruke Javascript.

806
00:47:04,310 --> 00:47:06,610
Du ville slå av spillet sløyfe på det tidspunktet.

807
00:47:06,610 --> 00:47:09,970
Du ville trenge litt Java fordi det ikke ville være noe du ville CSS for.

808
00:47:09,970 --> 00:47:11,760
Men husk det er bare en hendelse.

809
00:47:11,760 --> 00:47:14,860
Du kan si: "Når søknaden min blir forandra

810
00:47:14,860 --> 00:47:17,780
"La oss se om vi knakk." Og det er det.

811
00:47:17,780 --> 00:47:24,440
>> Ok? Jeg har snakket mye. Er det spørsmål så langt på hvor vi er? Yeah.

812
00:47:24,440 --> 00:47:29,310
[Student] Er det en tutorial for alle å få mer informasjon? >> Ja.

813
00:47:29,310 --> 00:47:33,510
Spørsmålet er, er det en tutorial for dette? Jeg vil bare forlenge den til alt.

814
00:47:33,510 --> 00:47:37,490
Det er noen ting som du kan gå til. La oss faktisk komme oss ut herfra.

815
00:47:37,490 --> 00:47:40,150
La meg gå tilbake her ute.

816
00:47:40,150 --> 00:47:45,180
En ting å påpeke er Visual Studio selv har tutorials bygget i.

817
00:47:45,180 --> 00:47:47,650
La meg bli kvitt dette.

818
00:47:47,650 --> 00:47:51,520
Hvis du går og opprette et nytt prosjekt, gjør File, New Project,

819
00:47:51,520 --> 00:47:56,750
og se på venstre side, det er en Online node i denne velgeren.

820
00:47:56,750 --> 00:47:59,790
Det kommer til å ta en liten bit. Jeg er på min MyFi her.

821
00:47:59,790 --> 00:48:02,300
Men det kommer til å komme opp og det kommer til å gi meg en sjanse til å finne maler

822
00:48:02,300 --> 00:48:05,190
men også enda viktigere, prøver også.

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 å finne eksempler for meg. Min løsning er veien høyt her.

825
00:48:10,050 --> 00:48:15,070
Normalt vil du se en liste over mange forskjellige ting her.

826
00:48:15,070 --> 00:48:18,280
Hvis det er noe du ønsker å prøve, velge språk,

827
00:48:18,280 --> 00:48:20,970
Java her, og si: "Jeg vet ikke hvordan du gjør geolocation."

828
00:48:20,970 --> 00:48:22,220
"Jeg vet ikke hvordan du åpner en fil."

829
00:48:22,220 --> 00:48:25,840
"Jeg vet ikke hvordan de skal dra nytte av webkamera

830
00:48:25,840 --> 00:48:28,290
"Eller optimalisere for berøring eller ting som det."

831
00:48:28,290 --> 00:48:33,190
Det er prøver for alt: deling, søking, app barer,

832
00:48:33,190 --> 00:48:37,520
gjør eksterne samtaler til en tjeneste, JSON-koding.

833
00:48:37,520 --> 00:48:40,390
Alle slike ting er det prøver for her,

834
00:48:40,390 --> 00:48:44,560
og de er ikke store prøvene som kommer til å ta deg hele natten for å trekke fra hverandre

835
00:48:44,560 --> 00:48:46,820
bare for å finne at en ting du ønsket å lære.

836
00:48:46,820 --> 00:48:49,870
De er veldig bra. De er små, rett til poenget typer prøver.

837
00:48:49,870 --> 00:48:52,330
Jeg har lært massevis ved å gå gjennom disse selv,

838
00:48:52,330 --> 00:48:55,260
og så jeg anbefaler at mye som en ting.

839
00:48:55,260 --> 00:49:01,750
>> En annen ting å påpeke også er selvfølgelig jeg viste deg dev.windows.com,

840
00:49:01,750 --> 00:49:07,490
så hvis du går tilbake til det, vil du se nederst er det også prøvene her.

841
00:49:07,490 --> 00:49:12,560
Så du kan laste dem alle på en gang, men det er også en rekke andre ressurser her også

842
00:49:12,560 --> 00:49:14,400
som kan hjelpe deg å få opp til hastighet.

843
00:49:14,400 --> 00:49:17,870
>> En annen ting, og jeg vil virkelig anbefale at du prøver dette,

844
00:49:17,870 --> 00:49:24,510
Jeg har fått det på bloggen min, men jeg skal bare gå rett til det.

845
00:49:24,510 --> 00:49:28,220
Jeg skal vise deg. Min blogg har ressurser og sånt.

846
00:49:28,220 --> 00:49:35,300
En av de tingene til å påpeke er akkurat her, denne tingen: Din idé. Din App. 30 dager.

847
00:49:35,300 --> 00:49:40,960
Hvis du klikker på dette, det kommer til å bringe deg til en virkelig nyttig nettsted.

848
00:49:40,960 --> 00:49:44,650
Dette er mye mer nyttig enn du kanskje forventer.

849
00:49:44,650 --> 00:49:49,040
Dette kommer til å bli 30 dager med innhold som du i utgangspunktet kan få tips og triks

850
00:49:49,040 --> 00:49:51,990
gjennom den prosessen som du oppretter en app.

851
00:49:51,990 --> 00:49:55,980
Og som du kanskje ikke forvente, kan du faktisk få det for spill også

852
00:49:55,980 --> 00:49:57,840
og for telefon apps, sånne ting.

853
00:49:57,840 --> 00:50:01,000
Så i utgangspunktet registrere deg for det, og de kommer til å være å sende deg tips og triks om,

854
00:50:01,000 --> 00:50:03,010
"Har du tenkt på å gjøre dette? Støtter dere Snap?"

855
00:50:03,010 --> 00:50:04,900
"Her er noen retningslinjer for hvordan å gjøre det bra."

856
00:50:04,900 --> 00:50:07,440
"Har du tenkt på å sende inn til butikken?"

857
00:50:07,440 --> 00:50:09,370
"Har du tenkt på hvordan du skal selge din søknad?"

858
00:50:09,370 --> 00:50:11,490
Det kommer til å gå gjennom alle disse forskjellige tingene.

859
00:50:11,490 --> 00:50:13,380
Og faktisk, hvis du er på gaming spor, på et tidspunkt

860
00:50:13,380 --> 00:50:17,010
du vil begynne å gjenkjenne en person som snakker til deg

861
00:50:17,010 --> 00:50:22,850
fordi jeg faktisk måtte gå til Redmint å gjøre disse og innspilte to videoer der.

862
00:50:22,850 --> 00:50:25,240
Men det er alle en del av gaming spor,

863
00:50:25,240 --> 00:50:27,650
og det er også en full spor for generell app utvikling.

864
00:50:27,650 --> 00:50:29,380
Det kalles Generation App.

865
00:50:29,380 --> 00:50:33,460
Jeg vil absolutt anbefale det til deg, så vel i tillegg til prøvene.

866
00:50:33,460 --> 00:50:38,110
>> Det er en masse videoer på et nettsted som heter Channel 9 også.

867
00:50:38,110 --> 00:50:42,790
Det er nok det siste jeg vil anbefale så vel 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
Dette er bra fordi du ikke kommer til å være å lese gjennom tonnevis av stortingsmeldinger.

870
00:50:48,880 --> 00:50:53,880
Det er i utgangspunktet en masse videoer, screencasts og ting som er rett til poenget.

871
00:50:53,880 --> 00:50:57,940
Jeg skal ikke si det er alltid rett til poenget. Det avhenger av hvem som gjør snakkingen.

872
00:50:57,940 --> 00:51:02,290
Men generelt, det er noen virkelig to-the-point-videoer her

873
00:51:02,290 --> 00:51:06,230
som vil vise deg noen spesielle ting du kanskje ønsker å lære eller se demoed.

874
00:51:06,230 --> 00:51:11,110
Det er også alt av vårt innhold fra vår konferanse som skjedde for et par uker siden

875
00:51:11,110 --> 00:51:14,380
kalt Build, og du vil se at akkurat der.

876
00:51:14,380 --> 00:51:18,450
Det er Core teknologi for Windows 8 spill. Der du går.

877
00:51:18,450 --> 00:51:23,150
Jeg var der, faktisk. Du kan ikke se meg. Jeg var over her.

878
00:51:23,150 --> 00:51:27,560
Men uansett, det til side, jeg vil anbefale at du tar en titt på disse videoene.

879
00:51:27,560 --> 00:51:29,330
De er ganske nyttig.

880
00:51:29,330 --> 00:51:32,620
Hvis du står fast på noe eller du bare ønsker å se hva noe kunne gjøre, skyte dem opp.

881
00:51:32,620 --> 00:51:36,890
>> [Guarin] Windows Mail nettopp sendt meg en e-post med en link til innholdet

882
00:51:36,890 --> 00:51:42,140
for studenter å laste ned med eksempelkode og sånn. >> [Bowen] Flott.

883
00:51:42,140 --> 00:51:45,510
Awesome. Takk, Edwin.

884
00:51:45,510 --> 00:51:48,320
>> Bra. >> [Student] Jeg har et spørsmål. >> [Bowen] Oh. Ja, takk.

885
00:51:48,320 --> 00:51:55,030
[Uhørbart student spørsmål] >> [Bowen] Å, jeg er glad du stilte det. Ja.

886
00:51:55,030 --> 00:51:58,940
Spørsmålet var, er det et visuelt grensesnitt for meg å lage ting?

887
00:51:58,940 --> 00:52:01,630
Edwin vil belønne deg vakkert for det spørsmålet.

888
00:52:01,630 --> 00:52:04,310
Det er en måte å gjøre dette.

889
00:52:04,310 --> 00:52:09,040
Skal vi gjøre det nå? La oss gjøre det nå.

890
00:52:09,040 --> 00:52:11,780
Jeg kommer til å gå til det akkurat nå.

891
00:52:11,780 --> 00:52:14,070
Egentlig, la meg legge inn en ting til denne demoen,

892
00:52:14,070 --> 00:52:16,710
og så skal jeg vise deg den faktiske svar.

893
00:52:16,710 --> 00:52:21,340
Jeg hadde tenkt å legge i litt mer CSS her.

894
00:52:21,340 --> 00:52:23,980
Jeg var litt ut på tangenter her.

895
00:52:23,980 --> 00:52:26,770
La meg legge på noen CSS her for å dra nytte

896
00:52:26,770 --> 00:52:29,980
av de klassene som vi har lagt en liten stund siden,

897
00:52:29,980 --> 00:52:33,930
til den øverste del, til Maincontent div, og deretter til greetingOutput.

898
00:52:33,930 --> 00:52:37,920
Hvis jeg gjør det og kjøre det, kan du se nå har vi fått en litt annerledes padding og marginer,

899
00:52:37,920 --> 00:52:40,310
så vi har faktisk noen forskyvninger her.

900
00:52:40,310 --> 00:52:44,630
Disse er mer mot hva du skal forvente av en endelig polert søknad.

901
00:52:44,630 --> 00:52:47,770
Men jeg prøver bare å vise dette til deg fordi det er rett opp CSS.

902
00:52:47,770 --> 00:52:51,910
Så de tingene som du allerede vet at du kan bruke her for å justere innholdet som du ønsker.

903
00:52:51,910 --> 00:52:55,100
Du har allerede sett hvordan du gjør bakgrunnen endres ut på den måten.

904
00:52:55,100 --> 00:53:02,980
>> Hvis jeg går ut igjen til våre HTML, kommer jeg til å legge inn ett mer sett av markup,

905
00:53:02,980 --> 00:53:06,140
og dette er faktisk kommer til å være en kontroll fra WinJS.

906
00:53:06,140 --> 00:53:09,840
Jeg kommer til å gå og ta dette, en etikett. La meg se om jeg gjør det på rett sted.

907
00:53:09,840 --> 00:53:11,740
Sannsynligvis god nok.

908
00:53:11,740 --> 00:53:15,590
Her har jeg bare lagt til - og vi vil gå i full skjerm så du kan se hele greia -

909
00:53:15,590 --> 00:53:18,520
Jeg har lagt til en etikett for neste div.

910
00:53:18,520 --> 00:53:20,890
Div kalles ratingControlDiv.

911
00:53:20,890 --> 00:53:23,090
I seg selv vil det ikke gjøre noe.

912
00:53:23,090 --> 00:53:28,570
Hvis du åpner denne i en nettleser, vil du være å se på tomt, div selv.

913
00:53:28,570 --> 00:53:31,820
Men på grunn av den mystiske kodelinje som jeg viste deg før,

914
00:53:31,820 --> 00:53:35,650
prosessen alt, det kommer til å se etter noe som ser ut som dette -

915
00:53:35,650 --> 00:53:40,380
data-vinn-kontroll - og det kommer til å finne alt som er i denne parameteren.

916
00:53:40,380 --> 00:53:44,560
Det kommer til å gjøre en forekomst av hva som er den peker til.

917
00:53:44,560 --> 00:53:48,850
I dette tilfellet er det en vurdering kontroll, så jeg sier, "Vennligst gå og erstatte denne tingen

918
00:53:48,850 --> 00:53:51,400
"Med det du trenger å gjøre for å gjøre en vurdering kontroll."

919
00:53:51,400 --> 00:53:56,610
Det kan være en flip-kontroll, kan det være fremdriften ring eller hva kontrollen du ønsker å bruke.

920
00:53:56,610 --> 00:53:59,390
De kommer alle til å jobbe hovedsak på samme måte.

921
00:53:59,390 --> 00:54:02,920
Du bruker standard HTML5 markup for å indikere hva du vil,

922
00:54:02,920 --> 00:54:07,670
og så kommer du til å få en kontroll på slutten av dette. La meg kjøre dette.

923
00:54:07,670 --> 00:54:12,270
Jeg bare kopierte det inn, og nå som markup blir dette,

924
00:54:12,270 --> 00:54:15,280
som er faktisk ganske mange av HTML-elementer.

925
00:54:15,280 --> 00:54:18,440
Disse er alle enkeltbilder, og det er divs rundt dem med velgere.

926
00:54:18,440 --> 00:54:22,610
Forhåpentligvis kan du se det. Det er litt subtil.

927
00:54:22,610 --> 00:54:27,380
Jeg kan sveve over de ulike elementene, og det kommer til å tillate meg å se vurdering her.

928
00:54:27,380 --> 00:54:31,560
Jeg kan klikke på det, og det husker vurdering, men det er omtrent det.

929
00:54:31,560 --> 00:54:33,100
Det er egentlig ikke gjør noe med ratingen.

930
00:54:33,100 --> 00:54:35,230
>> Den en siste ting jeg vil vise deg på dette

931
00:54:35,230 --> 00:54:37,820
før vi bytte til en mer visuell design erfaring

932
00:54:37,820 --> 00:54:42,680
er en liten bit av kode som jeg kan bruke til å svare på disse WinJS kontrollene.

933
00:54:42,680 --> 00:54:47,540
La meg komme ut av det, tilbake ut av fullskjerm,

934
00:54:47,540 --> 00:54:52,690
og bytte over til JS her for andre.

935
00:54:52,690 --> 00:54:57,450
Jeg kan gjøre dette her. Jeg tror jeg skal bytte ut hele greia.

936
00:54:57,450 --> 00:55:03,080
Egentlig tror jeg det vil erstatte alt av det, men vi vil finne ut sammen.

937
00:55:03,080 --> 00:55:07,350
Jeg skal sette dette inn her. Yeah. Jeg kommer til å slette denne også.

938
00:55:07,350 --> 00:55:11,790
Hva gjorde jeg legge til? Det ser ut som mye. Det er ikke mye.

939
00:55:11,790 --> 00:55:14,920
Jeg bare forlenget den linjen med kode som jeg allerede snakket om før,

940
00:55:14,920 --> 00:55:18,590
og jeg sier: "Når alt er gjort, når alle mine kontroller har blitt gjort,

941
00:55:18,590 --> 00:55:23,660
"Så gjør dette." Så da kjøre denne funksjonen kalt fullført.

942
00:55:23,660 --> 00:55:27,080
I dette tilfellet, er dette ting du kan finne ut.

943
00:55:27,080 --> 00:55:29,040
Gå finne at div kontroll.

944
00:55:29,040 --> 00:55:30,790
Egentlig, det er en ting jeg skal peke ut.

945
00:55:30,790 --> 00:55:35,630
Det neste linje er faktisk sier, "Jeg har fått det ratingControlDiv."

946
00:55:35,630 --> 00:55:39,770
"Jeg ønsker å snakke med den som om det var en reell kontroll, en WinJS kontroll."

947
00:55:39,770 --> 00:55:42,020
Så i utgangspunktet, er du ber for at fra det.

948
00:55:42,020 --> 00:55:44,600
Du sier: "Jeg ønsker å snakke med deg som en kontroll."

949
00:55:44,600 --> 00:55:47,810
Og så kan du begynne å si ting som: "Vi kommer til å legge en lytter for deg

950
00:55:47,810 --> 00:55:51,430
"Så når du endret vi kan svare på det."

951
00:55:51,430 --> 00:55:56,930
Og da kan vi også gjøre ting som dette. Egentlig er det den gamle koden der.

952
00:55:56,930 --> 00:55:59,600
Jeg tror jeg mangler lime inn én funksjon,

953
00:55:59,600 --> 00:56:05,030
og som ville være den faktiske funksjon som ville svare på rating kontroll blir endret.

954
00:56:05,030 --> 00:56:07,710
La meg pop som i rett ned her,

955
00:56:07,710 --> 00:56:09,840
et sted rundt der.

956
00:56:09,840 --> 00:56:14,930
Og i dette tilfellet, er det eneste som er nytt det faktum at vi går inn i

957
00:56:14,930 --> 00:56:21,000
hva rating kontroll forteller oss, og vi ber for det som kalles tentativeRating.

958
00:56:21,000 --> 00:56:23,150
Det er en haug med forskjellige andre ting som at kontrollen kan fortelle deg,

959
00:56:23,150 --> 00:56:25,310
og det går kontroll av kontroll.

960
00:56:25,310 --> 00:56:29,140
Det er veldig grei. Du vil være i stand til å finne ut av det ingen problemer overhodet.

961
00:56:29,140 --> 00:56:34,040
Jeg kjører dette, og nå når jeg endrer ratingen og klikk på rating,

962
00:56:34,040 --> 00:56:36,480
du kan se nå er det faktisk å svare på det.

963
00:56:36,480 --> 00:56:40,280
Det er å sette den vurderingen på skjermen inn i det ellers tomme div tag

964
00:56:40,280 --> 00:56:42,970
under alderskontroll.

965
00:56:42,970 --> 00:56:46,670
Det er magi av en masse ting her også.

966
00:56:46,670 --> 00:56:49,580
Så som du lager applikasjoner for Windows Store,

967
00:56:49,580 --> 00:56:52,930
det er massevis av kontroller at du bare kan bruke. De virker som dette.

968
00:56:52,930 --> 00:56:58,670
>> La meg vise deg den visuelle siden av å designe for disse programmene.

969
00:56:58,670 --> 00:57:03,440
Den gode nyheten er at du allerede har dette verktøyet når du installerer alt

970
00:57:03,440 --> 00:57:06,240
hvis du går til at nedlasting og du får Visual Studio.

971
00:57:06,240 --> 00:57:09,890
Jeg kan høyreklikke på dette. Jeg vil ikke zoome inn

972
00:57:09,890 --> 00:57:12,040
Den sier bare Åpne i Blend.

973
00:57:12,040 --> 00:57:16,040
Blend er et annet verktøy som fungerer side om side med Visual Studio

974
00:57:16,040 --> 00:57:19,230
og er fokusert mye mer på design siden av ting,

975
00:57:19,230 --> 00:57:23,660
så det virkelig overflater verktøy som er optimalisert for å skape stiler,

976
00:57:23,660 --> 00:57:29,720
lage animasjoner, jobbe med CSS, en masse ting i den slags blodåre.

977
00:57:29,720 --> 00:57:36,380
Her hva som bør være svært interessant og ganske opplagt umiddelbart er vi ser på programmet.

978
00:57:36,380 --> 00:57:40,060
Forhåpentligvis er vi fortsatt.

979
00:57:40,060 --> 00:57:42,650
I stedet for å se koden, som vi fremdeles kan se nederst

980
00:57:42,650 --> 00:57:45,350
vi ser den faktiske representasjon av søknaden.

981
00:57:45,350 --> 00:57:49,640
Hva mer er, er det ikke bare en representasjon av programmet, er det faktisk app kjører.

982
00:57:49,640 --> 00:57:52,010
Og det er det som virkelig er fint om Blend.

983
00:57:52,010 --> 00:57:58,620
Teamet har gjort mye arbeid for å bringe HTML og Javascript og CSS i dette verktøyet.

984
00:57:58,620 --> 00:58:01,930
Nå kan du faktisk, hvis du er nysgjerrig, "Hva betyr det? Hva kan jeg gjøre?"

985
00:58:01,930 --> 00:58:08,310
Jeg kan faktisk designe til denne søknaden, selv om ting som dette ikke eksisterer i min markup.

986
00:58:08,310 --> 00:58:13,230
Husk at alderskontroll? Det var bare en div tag.

987
00:58:13,230 --> 00:58:17,090
Denne ting, eksisterer den stjernen kun under kjøring. Hvordan vet jeg det?

988
00:58:17,090 --> 00:58:20,300
Det er en liten bit av magi over her.

989
00:58:20,300 --> 00:58:21,700
Se disse lyn?

990
00:58:21,700 --> 00:58:25,570
Hver gang du ser et lyn, betyr at det ble skapt av noe under kjøring.

991
00:58:25,570 --> 00:58:31,770
Noen Java løp og slått noe inn i denne eller skapt dette med noen logikk.

992
00:58:31,770 --> 00:58:37,100
Disse stjernene som du ser det ble skapt av Javascript ved WinJS.

993
00:58:37,100 --> 00:58:41,800
Det fine er, det spiller ingen rolle for meg, kan jeg fortsatt lage det,

994
00:58:41,800 --> 00:58:44,410
Jeg kan fortsatt gå inn og endre det, kan jeg finne ut hva som skjer her,

995
00:58:44,410 --> 00:58:50,260
Jeg kan se på CSS, kan jeg gå videre og finne ut hvorfor fargen er slik det er,

996
00:58:50,260 --> 00:58:54,610
Jeg kan begynne å rote med ting og gjøre ting fryktelig,

997
00:58:54,610 --> 00:58:58,360
hva jeg ønsker å gjøre.

998
00:58:58,360 --> 00:59:01,020
Egentlig, vil jeg la ting alene.

999
00:59:01,020 --> 00:59:03,980
Men du kan se her er det all CSS og det viser du her.

1000
00:59:03,980 --> 00:59:10,120
Hvis jeg går opp til det, det kommer til å vise deg alt som de kaller Winning,

1001
00:59:10,120 --> 00:59:14,850
så de CSS-regler som er den mest konkrete og mest valgt for dette elementet,

1002
00:59:14,850 --> 00:59:17,110
som du sikkert allerede har gått over i klassene,

1003
00:59:17,110 --> 00:59:22,000
der du kan si det er en generell font som vi søker til alt,

1004
00:59:22,000 --> 00:59:26,860
men fordi dette er en h1 og jeg har en farge som er definert for H1S,

1005
00:59:26,860 --> 00:59:29,820
det kommer til å være denne fargen, og det er fordi det er mer spesifikk enn body1.

1006
00:59:29,820 --> 00:59:32,590
Denne ene tingen her viser deg alt dette,

1007
00:59:32,590 --> 00:59:35,470
og det er virkelig kraftige ting som du får mer kompleks,

1008
00:59:35,470 --> 00:59:38,160
du lurer på hvorfor disse tingene er slik de er.

1009
00:59:38,160 --> 00:59:41,020
Det vil faktisk fortelle deg, og du kan plukke noen av disse elementene her.

1010
00:59:41,020 --> 00:59:43,370
At fargen er ikke så ille, faktisk.

1011
00:59:43,370 --> 00:59:47,150
Du kan velge dem. Forhåpentligvis kan du se dette.

1012
00:59:47,150 --> 00:59:52,410
For alt som du har på søknaden din, vil du se en hel kaskade

1013
00:59:52,410 --> 00:59:56,070
av alle CSS som kunne ha brukt på det og hvilken som er å vinne,

1014
00:59:56,070 --> 00:59:58,050
som man faktisk tok forrang.

1015
00:59:58,050 --> 01:00:00,930
Disse er litt kjedelig. Det er ikke mye som skjer i noen av disse.

1016
01:00:00,930 --> 01:00:04,660
Hvis jeg går og endre fargen, så vil du begynne å se noen gjennomgripende der.

1017
01:00:04,660 --> 01:00:07,760
Du kan også bruke HTML her også.

1018
01:00:07,760 --> 01:00:12,490
Jeg kan gå gjennom og endre HTML-egenskaper for alle disse tingene som jeg ønsker.

1019
01:00:12,490 --> 01:00:14,620
Det er bare tonnevis av ting her.

1020
01:00:14,620 --> 01:00:18,070
>> Jeg ønsker ikke å ta deg god tid ved å gå gjennom alt her. Bare vet det er her.

1021
01:00:18,070 --> 01:00:21,700
Det er mye av design-orientert funksjonalitet som er bare tilgjengelig for deg

1022
01:00:21,700 --> 01:00:26,730
slik at du kan holde visuell, jobbe med søknaden, og ikke trenger å gjøre mye for å gjette

1023
01:00:26,730 --> 01:00:32,180
at du ville ha å gjøre normalt og sykling tilbake fra en nettleser tilbake i design,

1024
01:00:32,180 --> 01:00:33,940
tilbake til nettleseren.

1025
01:00:33,940 --> 01:00:37,010
Dette er virkelig kule ting for det, og som du utvikler en Windows Store-app,

1026
01:00:37,010 --> 01:00:39,650
det kommer til å gjøre deg mye mer produktiv.

1027
01:00:39,650 --> 01:00:45,150
>> Du vil også se det er sporing markeringen her og CSS

1028
01:00:45,150 --> 01:00:47,270
som du arbeider gjennom ulike ting.

1029
01:00:47,270 --> 01:00:50,180
Det er sikkert veldig vanskelig for deg å se at, spesielt på video,

1030
01:00:50,180 --> 01:00:54,680
men det er det som skjer her, og jeg vil anbefale deg å bli kjent med det.

1031
01:00:54,680 --> 01:00:57,240
Det vil spare deg for mye tid. Det er Blend.

1032
01:00:57,240 --> 01:01:00,520
Hvis du gjør noen endringer her, blir de automatisk kommer til å bære tilbake 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 filene, det er det samme alt. Jeg skal la det være.

1035
01:01:06,590 --> 01:01:08,650
Jeg har et bedre eksempel som jeg vil vise deg.

1036
01:01:08,650 --> 01:01:11,660
Men hvis jeg har gjort en endring der og lagret det, og jeg kom tilbake til Visual Studio, vil det si,

1037
01:01:11,660 --> 01:01:16,390
"Hei, du nettopp endret noe. Kan jeg laste det for deg?" Ja.

1038
01:01:16,390 --> 01:01:18,770
Og du bruker de samme tingene der.

1039
01:01:18,770 --> 01:01:21,320
Det er slutten av den aktuelle prøven.

1040
01:01:21,320 --> 01:01:28,170
>> Jeg ønsker å vise deg en høyere slutten prøve bare for å gi deg en oversikt over annen funksjonalitet

1041
01:01:28,170 --> 01:01:30,350
du kan tenke på i tillegg.

1042
01:01:30,350 --> 01:01:32,280
Dette er et eksempel app som du kan laste ned.

1043
01:01:32,280 --> 01:01:35,620
Hvis du ser etter noe som heter Windows Camp i boks,

1044
01:01:35,620 --> 01:01:40,340
er det noen prøver som er i den, og en av dem er The Contosos Cookbook.

1045
01:01:40,340 --> 01:01:41,640
Jeg kan bare kjøre dette for deg.

1046
01:01:41,640 --> 01:01:44,700
Custom splash screen. Dette er programmet Grid view.

1047
01:01:44,700 --> 01:01:49,590
De har bundet noen tilpassede data her. Du kan navigere gjennom dette.

1048
01:01:49,590 --> 01:01:53,090
Du kan gå og ta en titt på ulike ting som vil gjøre oss sultne på en fredag ​​ettermiddag.

1049
01:01:53,090 --> 01:01:57,760
Jeg vet ikke. Hva kommer til å gjøre meg mest sulten?

1050
01:01:57,760 --> 01:02:00,530
Jeg vet ikke. Jeg skal bare plukke en.

1051
01:02:00,530 --> 01:02:02,460
Du går inn i disse tingene. Den vil vise deg oppskriften.

1052
01:02:02,460 --> 01:02:04,900
Du kan også, i stedet for å klikke på et element,

1053
01:02:04,900 --> 01:02:10,360
du kan gå rett til den kategorien av innhold, som del av innholdet.

1054
01:02:10,360 --> 01:02:15,590
I dette tilfellet, kan du lese masse falske Latin fortelle deg alt om disse oppskriftene her

1055
01:02:15,590 --> 01:02:17,720
og deretter gå rett inn i den spesifikke oppskriften.

1056
01:02:17,720 --> 01:02:22,770
Dette støtter også ting som deling som jeg viste deg før med bildene.

1057
01:02:22,770 --> 01:02:26,160
Du kan også søke på dette programmet også.

1058
01:02:26,160 --> 01:02:28,880
Det er veldig enkelt å gjøre søking.

1059
01:02:28,880 --> 01:02:31,300
I utgangspunktet, du bare får en tekststreng fra Windows

1060
01:02:31,300 --> 01:02:34,720
og du bestemmer deg for hvordan du ønsker å håndtere søk med det.

1061
01:02:34,720 --> 01:02:39,830
Det er noen få linjer med kode for å få det, og deretter hva du gjør med det etter det er helt opp til deg.

1062
01:02:39,830 --> 01:02:44,180
>> Her har de også en app bar hvor de bruker en annen funksjonalitet.

1063
01:02:44,180 --> 01:02:45,430
Jeg vil bare fortelle deg hva det er.

1064
01:02:45,430 --> 01:02:48,220
En påminnelse kommer til å bruke det som kalles en toast varsling.

1065
01:02:48,220 --> 01:02:52,930
Dette er veldig praktisk for å la brukeren få vite når ting har skjedd,

1066
01:02:52,930 --> 01:02:55,850
som et program ble installert eller noe ble fullført.

1067
01:02:55,850 --> 01:02:57,950
Det er også bra for spill også.

1068
01:02:57,950 --> 01:03:02,360
Hvis du har en vedvarende verden eller en ledertavle og en tjeneste som er vert at

1069
01:03:02,360 --> 01:03:08,490
kanskje på en separat maskin, kan de varslinger bli sendt inn i en maskin

1070
01:03:08,490 --> 01:03:12,240
og selv om brukeren ikke bruker ditt spill, spille spill eller kjører programmet ditt,

1071
01:03:12,240 --> 01:03:15,170
de kan fortsatt få meldinger om slike hendelser.

1072
01:03:15,170 --> 01:03:19,350
Så du kan si, "Din slottet er blitt ødelagt eller er omtrent ødelagt."

1073
01:03:19,350 --> 01:03:22,870
"Kom tilbake og forsvare det," eller noe sånt.

1074
01:03:22,870 --> 01:03:26,830
Du klikker på meldingen, går du rett tilbake inn i spillet, og du kan spille det.

1075
01:03:26,830 --> 01:03:32,170
Så slike ting kan hjelpe virkelig trekke folk tilbake til din app ganske effektivt.

1076
01:03:32,170 --> 01:03:37,450
>> Det er også støtte i dette programmet for å bruke mikrofon, webkamera,

1077
01:03:37,450 --> 01:03:39,560
gjør video og ta bilder.

1078
01:03:39,560 --> 01:03:42,080
Du kan også feste en sekundær flis.

1079
01:03:42,080 --> 01:03:46,760
Det er nyttig hvis du ønsker å bare ha en brikke som går rett til bestemt innhold.

1080
01:03:46,760 --> 01:03:49,960
I dette tilfelle går det med en til denne oppskrift.

1081
01:03:49,960 --> 01:03:51,300
Alt jeg nevner jeg bare vise

1082
01:03:51,300 --> 01:03:53,270
fordi det er ting som du kan tenke på å bruke også.

1083
01:03:53,270 --> 01:03:57,590
For det meste er de svært enkel å bruke.

1084
01:03:57,590 --> 01:04:00,070
Jeg vil bare anbefale at du tar opp at utvalgs explorer

1085
01:04:00,070 --> 01:04:03,600
og finne en prøve som kan vise deg hvordan du gjør det.

1086
01:04:03,600 --> 01:04:07,140
Det er ganske enkelt å bringe dem inn dine apps der ute også.

1087
01:04:07,140 --> 01:04:11,030
>> Jeg hadde tenkt å vise deg noe annet som er ganske kult her.

1088
01:04:11,030 --> 01:04:15,230
Jeg skal knipse dette programmet, og jeg kommer til å gå tilbake til Visual Studio.

1089
01:04:15,230 --> 01:04:18,870
Dette programmet kjører. Det kjører fra Visual Studio.

1090
01:04:18,870 --> 01:04:21,370
Jeg kan gjøre noen ganske kule ting med det.

1091
01:04:21,370 --> 01:04:23,840
Jeg har faktisk en mulighet til å velge et element,

1092
01:04:23,840 --> 01:04:28,250
og jeg kan gå over her til live-programmet og jeg kan si,

1093
01:04:28,250 --> 01:04:34,000
"Jeg lurer på hvorfor er forberedelsestiden litt lysere grå enn tittelen i seg selv?"

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 å synkronisere den tilbake i Visual Studio,

1096
01:04:38,080 --> 01:04:43,780
og det kommer til å vise meg nøyaktig generert innhold som resulterte i at en del av UI.

1097
01:04:43,780 --> 01:04:47,270
Så i dette tilfellet, er det element teksting og h4 dobbel konstruksjon,

1098
01:04:47,270 --> 01:04:51,110
og som trolig forteller oss hva vi trenger å vite, fordi som en h4 innenfor den konteksten,

1099
01:04:51,110 --> 01:04:53,550
det kommer til å få en viss form for skrift.

1100
01:04:53,550 --> 01:04:56,410
Men hvis jeg fortsatt ikke vet hvorfor, kan jeg klikke på Spor Styles.

1101
01:04:56,410 --> 01:05:02,330
Jeg kan deretter utvider ut farge og jeg kan finne ut nøyaktig hvorfor denne fargen ikke bilens farge

1102
01:05:02,330 --> 01:05:04,640
men i virkeligheten er noe annet.

1103
01:05:04,640 --> 01:05:07,210
Dette er i hovedsak de dev verktøy fra Internet Explorer

1104
01:05:07,210 --> 01:05:09,530
til en viss grad brakt inn Visual Studio.

1105
01:05:09,530 --> 01:05:12,110
Hvis du har jobbet med Chrome Dev Tools, Firebug, ting som det,

1106
01:05:12,110 --> 01:05:14,720
slike verktøy som er i nettleseren,

1107
01:05:14,720 --> 01:05:17,340
den slags funksjonalitet har blitt brakt rett inn i Visual Studio

1108
01:05:17,340 --> 01:05:22,090
slik at du ikke egentlig har å lansere en nettleser og jobbe med disse verktøyene separat.

1109
01:05:22,090 --> 01:05:24,320
Nå har jeg en Windows Store-app bare å kjøre,

1110
01:05:24,320 --> 01:05:27,840
og jeg kan begynne å trekke den fra hverandre og finne ut hvorfor ting er å gjøre det de er.

1111
01:05:27,840 --> 01:05:30,440
>> Jeg kan også gjøre det på denne måten også.

1112
01:05:30,440 --> 01:05:35,020
Jeg kan gå og bare plukke noe rett fra markeringen, og finne ut hva det er

1113
01:05:35,020 --> 01:05:38,560
i selve søknaden. Jeg tror jeg har gått alt.

1114
01:05:38,560 --> 01:05:41,440
Her Jeg svever over dette. Jeg kan velge det.

1115
01:05:41,440 --> 01:05:45,540
Det kommer til å vise meg i selve driften programmet der at ting er

1116
01:05:45,540 --> 01:05:48,070
at jeg nå klikke på i markeringen.

1117
01:05:48,070 --> 01:05:49,700
Virkelig kule ting.

1118
01:05:49,700 --> 01:05:52,710
Som du prøver å finne ut hva som skjer og hva som HTML gjør,

1119
01:05:52,710 --> 01:05:56,080
hva CSS gjør, ha dette i bakhodet.

1120
01:05:56,080 --> 01:05:58,450
Husk dette er her for deg

1121
01:05:58,450 --> 01:06:02,070
og også at Blend kan arbeide med en levende kjører programmet.

1122
01:06:02,070 --> 01:06:06,070
>> Den en siste ting jeg ønsket å vise deg med dette programmet -

1123
01:06:06,070 --> 01:06:09,290
Forresten, viser det du deltaer som ting endrer seg også,

1124
01:06:09,290 --> 01:06:11,160
slik at du kan se etter de gule høydepunkter.

1125
01:06:11,160 --> 01:06:14,060
De er ting som bare er endret i programmet.

1126
01:06:14,060 --> 01:06:16,350
Men en siste ting. Jeg ønsker å gå tilbake til Blend bare for et sekund her.

1127
01:06:16,350 --> 01:06:21,790
Vi vil åpne opp dette, Open i Blend, samme app, samme alt.

1128
01:06:21,790 --> 01:06:28,660
Jeg vil bare vise deg den opplevelsen her er ikke bare du sitter fast på hjemmesiden

1129
01:06:28,660 --> 01:06:32,880
ser på de tingene du får som standard når du kjører programmet og la det sitte der.

1130
01:06:32,880 --> 01:06:36,490
Du kan også slå på denne ganske lite ikon opp her.

1131
01:06:36,490 --> 01:06:38,560
Det kalles interaktiv modus.

1132
01:06:38,560 --> 01:06:41,560
Du klikker på det. Det kommer til å ta opp søknaden din.

1133
01:06:41,560 --> 01:06:43,730
Du er ikke i Design modus lenger, så du ikke kommer til å være å klikke på ting

1134
01:06:43,730 --> 01:06:47,270
å endre funksjonalitet, men du kan faktisk jobbe med søknaden nå.

1135
01:06:47,270 --> 01:06:51,560
Du kan klikke seg gjennom, kan du gjøre hva, få til en oppskrift som du bryr deg om

1136
01:06:51,560 --> 01:06:54,810
eller til en kategori. La oss gå til denne kategorien.

1137
01:06:54,810 --> 01:06:56,880
Jeg vil si: "Ok, her hvor jeg ønsker å designe."

1138
01:06:56,880 --> 01:06:59,680
Deretter klikker du på den knappen igjen, vil det bringe deg tilbake i Design overflaten,

1139
01:06:59,680 --> 01:07:02,130
og nå kan du gjøre alle de tingene som jeg snakket om før.

1140
01:07:02,130 --> 01:07:06,230
Jeg skal holde klikke før jeg får dette merket, finne ut sine dimensjoner,

1141
01:07:06,230 --> 01:07:09,890
finne ut HTML for det, CSS for det

1142
01:07:09,890 --> 01:07:14,990
for et program som kjører, noen senere del av søknaden.

1143
01:07:14,990 --> 01:07:17,780
Veldig, veldig nyttig. Jeg skal vise dette til deg.

1144
01:07:17,780 --> 01:07:21,340
Vennligst holde det i bakhodet hvis du ser inn å skrive kode med dette

1145
01:07:21,340 --> 01:07:26,070
fordi det kommer til å spare deg for mye stress, og det er ganske bra ting.

1146
01:07:26,070 --> 01:07:32,370
Det er ganske mye alt jeg ønsket å vise deg på Blend og i Visual Studio for alt dette.

1147
01:07:32,370 --> 01:07:36,130
>> Eventuelle spørsmål om noen av disse verktøyene?

1148
01:07:36,130 --> 01:07:40,000
Noe som helst? >> [Guarin] Jeg har ting å gi ut, så gode spørsmål, gode ting.

1149
01:07:40,000 --> 01:07:43,700
>> [Bowen ler] Jeg har allerede vist deg mine demoer her.

1150
01:07:43,700 --> 01:07:47,000
Jeg kommer til å sette det på ressurssiden og slå til spørsmål nå.

1151
01:07:47,000 --> 01:07:53,850
Det første referansen er at Generation App nettsted med låter og app spor.

1152
01:07:53,850 --> 01:07:55,040
Registrer deg for dem.

1153
01:07:55,040 --> 01:07:57,210
Du trenger ikke å vente de 30 dager på å få innholdet.

1154
01:07:57,210 --> 01:08:00,370
Du kan begynne å gå og se på innholdet som du ønsker.

1155
01:08:00,370 --> 01:08:04,380
Jeg forstår dine tidsrammer kan være annerledes enn - [latter]

1156
01:08:04,380 --> 01:08:07,780
Så da er det Hackathon? Det er et par uker, ikke sant?

1157
01:08:07,780 --> 01:08:09,620
Så du ikke har de 30 dager på å vente.

1158
01:08:09,620 --> 01:08:13,180
Så ja, kan du registrere deg for det, og så bare begynne å trekke innholdet ut fra det.

1159
01:08:13,180 --> 01:08:15,320
Også Dev og designsentre.

1160
01:08:15,320 --> 01:08:17,620
Og jeg nevner ikke dette, men det er også Store Docs.

1161
01:08:17,620 --> 01:08:22,880
Dette ville være for etter Hackathon som du er klar til å begynne å sende dine apps for butikken.

1162
01:08:22,880 --> 01:08:27,350
Det er noen nyttige retningslinjer her, litt veiledning om hvordan å få ting inn i butikken,

1163
01:08:27,350 --> 01:08:29,960
noen vanlige problemer som kan reise deg opp,

1164
01:08:29,960 --> 01:08:32,540
og det er slutten av disse ressursene.

1165
01:08:32,540 --> 01:08:35,300
>> Så hva tenker du på? Noe annet som du -

1166
01:08:35,300 --> 01:08:40,580
[Guarin] Hvem tenker på å gjøre en Windows app for CS50? Cool.

1167
01:08:40,580 --> 01:08:42,200
[Bowen] Cool. Flott.

1168
01:08:44,149 --> 01:08:49,410
>> Eventuelle spørsmål om ting som du har sett så langt, og hvordan den forholder seg til dette?

1169
01:08:49,410 --> 01:08:54,540
For eksempel, med mer tid jeg kunne ta et spill som jeg har skrevet

1170
01:08:54,540 --> 01:08:57,310
og som kjøres i nettleseren, og bare slags gå gjennom prosessen

1171
01:08:57,310 --> 01:08:59,870
å bringe det inn i Visual Studio og gjør det til en Windows Store-app.

1172
01:08:59,870 --> 01:09:02,870
Det tar mer tid enn vi egentlig hadde å inkludere i dag,

1173
01:09:02,870 --> 01:09:08,010
men den korte versjonen er at det er den samme koden som du har kjører i nettleseren,

1174
01:09:08,010 --> 01:09:11,680
og de tingene som du endre er de tingene som du bestemmer deg for å koble til Windows 8.

1175
01:09:11,680 --> 01:09:16,220
Så hvis du ønsker å bruke charms, hvis du vil søke etter eller dele,

1176
01:09:16,220 --> 01:09:19,899
du trenger for å lage en app bar å gjemme bort noe av funksjonaliteten på det,

1177
01:09:19,899 --> 01:09:21,939
de er den slags ting som du vil endre.

1178
01:09:21,939 --> 01:09:25,229
Men kjernen i din web app kan forbli intakt.

1179
01:09:25,229 --> 01:09:29,590
Igjen, så lenge det fungerer i IE10, det kommer til å være en veldig enkel port

1180
01:09:29,590 --> 01:09:33,680
å bringe de greiene i Visual Studio, i Blend, og gjøre det til en Windows Store-app.

1181
01:09:33,680 --> 01:09:37,500
Igjen, det eneste du trenger å lære er de andre funksjonene

1182
01:09:37,500 --> 01:09:41,830
som du kan bruke til å lyse opp et program, som en levende fliser og slike ting.

1183
01:09:41,830 --> 01:09:46,899
>> Yeah. >> [Student] Mitt spørsmål er om å jobbe mobilt.

1184
01:09:46,899 --> 01:09:52,210
Så hvis du gjør en app som fungerer som en app på skrivebordet,

1185
01:09:52,210 --> 01:09:56,480
er det veldig enkelt å overføre den til mobilen, eller er det en -

1186
01:09:56,480 --> 01:10:01,270
Spørsmålet er, hvis jeg gjør en Windows Store-applikasjon som er virkelig optimalisert for dette miljøet

1187
01:10:01,270 --> 01:10:06,430
og jeg ønsker å bringe den til en mobil verden, hva som er involvert med å gjøre det?

1188
01:10:06,430 --> 01:10:10,060
Det, i likhet med mange spørsmål, er alltid et stadig skiftende svar.

1189
01:10:10,060 --> 01:10:16,190
Den gode nyheten er hvis du stikker 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 å la deg ta den med til Web

1192
01:10:20,590 --> 01:10:24,650
og deretter bruke disse typer teknikker, som mediespørringer og ting,

1193
01:10:24,650 --> 01:10:27,180
til å tilpasse seg ulike størrelse enheter.

1194
01:10:27,180 --> 01:10:29,900
Når det er sagt, er det alltid rammer og ting der ute

1195
01:10:29,900 --> 01:10:33,450
at støtte som strekker seg ut forskjellige teknologier, ulike plattformer.

1196
01:10:33,450 --> 01:10:35,670
Det forandrer seg hele tiden.

1197
01:10:35,670 --> 01:10:40,030
Vi er også i endring ting, så vel som vi ser mot det vi har nå

1198
01:10:40,030 --> 01:10:42,950
faktisk ut med Windows Phone 8.

1199
01:10:42,950 --> 01:10:44,930
Vi har noen felles kjerne infrastrukturer

1200
01:10:44,930 --> 01:10:48,180
tilbudt mellom programmer for disse miljøene.

1201
01:10:48,180 --> 01:10:51,200
Så ting som du gjør for å skape en Windows Store-app,

1202
01:10:51,200 --> 01:10:57,790
mye som kan bære over i en Windows Phone 8-programmet også.

1203
01:10:57,790 --> 01:11:02,270
Det igjen er en ny historie, så det er noe innhold om at på Bygg.

1204
01:11:02,270 --> 01:11:06,780
Den SDK bare fikk ut en liten stund siden. Det ble nettopp lansert en liten stund siden.

1205
01:11:06,780 --> 01:11:09,920
Men i form av andre plattformer også,

1206
01:11:09,920 --> 01:11:13,360
du sannsynligvis kjøre inn mange kryssplattform rammeverk også.

1207
01:11:13,360 --> 01:11:16,170
Den gode nyheten er det ting som du gjør her,

1208
01:11:16,170 --> 01:11:19,620
kjernefunksjonaliteten er rett opp web standard ting.

1209
01:11:19,620 --> 01:11:24,010
Det eneste som ikke ville oversette lett er det ting som Windows 8 gjør,

1210
01:11:24,010 --> 01:11:28,060
men det er ingen overraskelse fordi det er en Windows-funksjon.

1211
01:11:28,060 --> 01:11:34,090
Du kommer ikke til å finne deling eller lignende typer kontrakter på hver plattform.

1212
01:11:34,090 --> 01:11:37,480
Så de er de tingene som du ønsker å fra et designperspektiv

1213
01:11:37,480 --> 01:11:40,820
sørg for at du har måter å slags abstrakt at ut slik at du kan si,

1214
01:11:40,820 --> 01:11:42,970
"Hvis jeg kjører på dette, kan jeg gjøre det."

1215
01:11:42,970 --> 01:11:48,120
Hvis jeg ikke, det er noen design mønstre du kan bruke til å slags skjule at ting unna.

1216
01:11:48,120 --> 01:11:53,360
Men hold det i tankene. Yeah. Unnskyld. Gå fremover.

1217
01:11:53,360 --> 01:11:58,130
>> [Student] Hvis jeg ønsker å teste min Windows app på toppen av [uhørbart]

1218
01:11:58,130 --> 01:12:02,310
[Bowen] Yeah. Jeg hoppet over en ting også. Yeah.

1219
01:12:02,310 --> 01:12:04,910
Jeg skal svare på spørsmålet ditt først, så skal jeg vise deg en funksjon jeg glemte å nevne.

1220
01:12:04,910 --> 01:12:09,220
Vi har noen maskiner tilgjengelig lokalt. Jeg beklager.

1221
01:12:09,220 --> 01:12:11,240
Spørsmålet var, hvordan kan jeg teste ting på enheter

1222
01:12:11,240 --> 01:12:14,230
hvis jeg ikke tilfeldigvis har en hel masse ting å velge mellom?

1223
01:12:14,230 --> 01:12:17,130
[Guarin] Vi lånte dere, tror jeg, fem eller seks. Hvor mange trenger du?

1224
01:12:17,130 --> 01:12:20,940
[Student] Vi fikk fire av dem. >> Ok. Dere fikk fire slates å leke seg med.

1225
01:12:20,940 --> 01:12:25,520
Så definitivt la alle vite, takk. [Ler] >> [Bowen] Awesome.

1226
01:12:25,520 --> 01:12:27,610
Det er en enda bedre svar enn jeg hadde tenkt å gi deg.

1227
01:12:27,610 --> 01:12:31,250
Vi har kontortid for utviklere som vi gjør på vårt kontor

1228
01:12:31,250 --> 01:12:35,110
og nå kommer snart til Microsoft Store over på Pru,

1229
01:12:35,110 --> 01:12:37,010
men Edwin har allerede tatt vare på deg.

1230
01:12:37,010 --> 01:12:42,180
Det er fire slates tilgjengelige for loaning, for testing.

1231
01:12:42,180 --> 01:12:45,440
Det vi går. Det er et eksempel på en opp der.

1232
01:12:45,440 --> 01:12:47,340
Så ja, absolutt. Flott.

1233
01:12:47,340 --> 01:12:52,700
Absolutt den klart beste måten å teste det er å være på en enhet.

1234
01:12:52,700 --> 01:12:56,810
Hvis du ikke tilfeldigvis har en ennå, eller du ikke ønsker å gå over campus i snøen

1235
01:12:56,810 --> 01:13:01,130
å hente en eller hva, det er en måte å gjøre dette tilbake i Visual Studio.

1236
01:13:01,130 --> 01:13:10,360
Hvis jeg går tilbake til der jeg var her, her i stedet for å bruke Local Machine,

1237
01:13:10,360 --> 01:13:13,590
du kunne koble til ekstern maskin, men det er ikke det jeg snakker om her.

1238
01:13:13,590 --> 01:13:16,830
Simulator er det ting som du kanskje ønsker å se nærmere på.

1239
01:13:16,830 --> 01:13:22,120
Jeg skal kjøre dette, og egentlig hva det er, det er egentlig et vindu på ditt eget system.

1240
01:13:22,120 --> 01:13:26,260
Her er faktisk mitt system løping, løping Contoso,

1241
01:13:26,260 --> 01:13:29,550
men på en måte som lar meg endre noen av henrettelsen parametere,

1242
01:13:29,550 --> 01:13:31,060
miljøparametrene.

1243
01:13:31,060 --> 01:13:34,150
Så jeg kan si her, "Vet du hva?"

1244
01:13:34,150 --> 01:13:39,240
Oh. Jeg allerede har det kjører i et simulert 27-tommers skjerm på 2560-oppløsning.

1245
01:13:39,240 --> 01:13:44,930
Jeg kan lett slippe det ned og se hva søknaden min ville gjøre med en mindre skjerm

1246
01:13:44,930 --> 01:13:47,480
eller ved å endre DPI-innstillinger eller hva.

1247
01:13:47,480 --> 01:13:50,700
Så på en liten skjerm, en 10,6, hva går det å gjøre?

1248
01:13:50,700 --> 01:13:53,040
Som fortsatt ser ganske bra, ikke sant?

1249
01:13:53,040 --> 01:13:58,220
Det er lurt å gjøre dette, spesielt hvis du sender inn til butikken, fordi vi gjør

1250
01:13:58,220 --> 01:14:00,480
som en del av testprosessen.

1251
01:14:00,480 --> 01:14:02,400
Og hvis det er problemer som det,

1252
01:14:02,400 --> 01:14:06,160
så du kan kjøre inn i et problem å få sertifisert for butikken.

1253
01:14:06,160 --> 01:14:09,240
Men det er en del av simulatoren. Skikkelig kult. Veldig lett å gjøre det.

1254
01:14:09,240 --> 01:14:11,480
Du kan også bruke funksjoner som å rotere det også.

1255
01:14:11,480 --> 01:14:15,650
Jeg kan klikke på knappen her, har det rotere, se hva noen ville ha som en opplevelse

1256
01:14:15,650 --> 01:14:20,970
roterende deres skifer, deres tablet, og ved hjelp av din søknad med det.

1257
01:14:20,970 --> 01:14:25,060
Det er noen andre ting også som berørings emulering og noen andre ting,

1258
01:14:25,060 --> 01:14:27,210
sette GPS.

1259
01:14:27,210 --> 01:14:31,050
Jeg kan late som jeg er på et annet sted og se hva søknaden min gjør

1260
01:14:31,050 --> 01:14:34,690
når jeg later som jeg er tilbake i Seattle eller noe.

1261
01:14:34,690 --> 01:14:41,970
Men det er en veldig nyttig funksjon, og det er bygget inn i både Visual Studio og i Blend.

1262
01:14:41,970 --> 01:14:44,460
Ja. Spørsmålet ditt.

1263
01:14:44,460 --> 01:14:48,530
>> [Student] Hvis du skriver et spill, ikke Visual Studio har noen støtte for animasjon?

1264
01:14:48,530 --> 01:14:55,550
Yeah. Spørsmålet er rundt animasjon støtte, særlig med gaming.

1265
01:14:55,550 --> 01:14:58,380
Det spørs. [Humrer]

1266
01:14:58,380 --> 01:15:06,870
Med Javascript vil jeg si det er trolig mindre støtte enn det er på XAML side,

1267
01:15:06,870 --> 01:15:11,430
som har tidslinjer, har storyboards og ting som er bygget i.

1268
01:15:11,430 --> 01:15:18,710
For animasjoner på Javascript apps, jeg vet ikke hvor mye av et svar jeg ønsker å gi deg.

1269
01:15:18,710 --> 01:15:25,110
Jeg har ressurser på bloggen min som går gjennom en rekke alternativer for både fysikk animasjoner,

1270
01:15:25,110 --> 01:15:29,280
alternativer for Javascript-orientert spill på Windows 8.

1271
01:15:29,280 --> 01:15:31,300
Jeg vil henvise deg til dem.

1272
01:15:31,300 --> 01:15:34,300
I utgangspunktet, det er så mange valg.

1273
01:15:34,300 --> 01:15:37,770
Grunnen til at jeg nøler er det er så mange valg for å gjøre animasjoner med Javascript.

1274
01:15:37,770 --> 01:15:44,280
Det kan være CSS, det kunne være Canvas-basert, kan det være like grunnleggende DOM animasjoner,

1275
01:15:44,280 --> 01:15:47,470
det kan være mange forskjellige ting, så det er egentlig avhengig av ditt valg.

1276
01:15:47,470 --> 01:15:55,790
Hvis du bestemmer deg for å bruke noe sånt Create.js eller Lime eller andre typer rammer -

1277
01:15:55,790 --> 01:15:59,150
Vel, jeg er ikke engang sikker på at du kommer til å være i stand til å bruke en høyere slutten rammeverk

1278
01:15:59,150 --> 01:16:01,370
liker Impact eller Construct.

1279
01:16:01,370 --> 01:16:07,000
Som har en tendens til å generere mer kode enn du kanskje vurdere fra scratch.

1280
01:16:07,000 --> 01:16:11,730
Men i disse tilfellene, kan du fortsatt bruke en simulator, du kan bruke de miljøene,

1281
01:16:11,730 --> 01:16:17,480
og jeg har en tendens til å bare bruke dette miljøet for min test plattform i de tilfeller

1282
01:16:17,480 --> 01:16:19,930
som jeg utvikle spill.

1283
01:16:19,930 --> 01:16:22,110
Jeg har vært fint, spesielt med Canvas animasjoner,

1284
01:16:22,110 --> 01:16:23,850
som sannsynligvis er den mest vanlige ting.

1285
01:16:23,850 --> 01:16:27,360
Det beste du kommer til sannsynligvis finne er dev verktøy i nettleseren

1286
01:16:27,360 --> 01:16:30,160
og dev verktøy i Visual Studio.

1287
01:16:30,160 --> 01:16:34,610
Slag av en buktende svaret der, men forhåpentligvis fikk jeg svaret. Ja. Du.

1288
01:16:34,610 --> 01:16:36,470
>> [Student] Hva er lagringsalternativer for Windows 8 apps?

1289
01:16:36,470 --> 01:16:41,100
Hva er lagringsalternativer for Windows 8 apps, Windows Store apps?

1290
01:16:41,100 --> 01:16:46,790
Alternativene virkelig er hvert program får sin egen pool av lokal lagring

1291
01:16:46,790 --> 01:16:52,150
for innstillinger og for data, men det er også latterlig enkelt å bruke roaming lagring,

1292
01:16:52,150 --> 01:16:54,920
å bruke cloud-basert lagring. Det er gratis.

1293
01:16:54,920 --> 01:16:58,250
Hva som skjer er du i utgangspunktet velge en annen klasse, og du sier,

1294
01:16:58,250 --> 01:17:03,370
"roaming-innstillinger, lagre, dette spesielt sett med innhold,"

1295
01:17:03,370 --> 01:17:06,050
og deres Microsoft-konto, uansett hva de har logget på som,

1296
01:17:06,050 --> 01:17:08,620
kommer til å være nøkkelen til roaming slik informasjon rundt.

1297
01:17:08,620 --> 01:17:13,790
Så hvis jeg bruker spillet på min laptop, og da jeg logger på med samme konto

1298
01:17:13,790 --> 01:17:18,900
og jeg spiller spillet på en overflate eller en tablett,

1299
01:17:18,900 --> 01:17:23,610
som automatisk vil streife at innstillingen og data mellom disse maskinene.

1300
01:17:23,610 --> 01:17:27,550
Det er en standard ting. Det er bra for visse mengder data.

1301
01:17:27,550 --> 01:17:30,220
Du ville ikke sette en stor database til disse.

1302
01:17:30,220 --> 01:17:35,350
For at du trenger å gå til andre typer løsninger, som en hosted database i skyen,

1303
01:17:35,350 --> 01:17:36,690
ting som det.

1304
01:17:36,690 --> 01:17:39,840
Det er noen andre samfunns alternativer rundt andre typer datateknologi.

1305
01:17:39,840 --> 01:17:42,920
Jeg har sett noen SQLite alternativer i samfunnet rundt det også.

1306
01:17:42,920 --> 01:17:46,690
Så mer og mer dukker opp, men de er de viktigste tingene som du ville se mot

1307
01:17:46,690 --> 01:17:49,430
for et spill eller en applikasjon.

1308
01:17:49,430 --> 01:17:50,610
Og du hadde et spørsmål i ryggen også.

1309
01:17:50,610 --> 01:18:02,390
>> [Student] I forhold til nettverket [uhørbart] laster opp eller ned filer [uhørbart]

1310
01:18:02,390 --> 01:18:04,870
[Bowen] Er spørsmålet ditt hvordan kan du se det, eller hvordan du kan feilsøke det og teste det?

1311
01:18:04,870 --> 01:18:10,630
[Student] Hvordan kan du debugge det [uhørbart]

1312
01:18:10,630 --> 01:18:12,670
Unnskyld. Jeg kan ikke høre alt sammen.

1313
01:18:12,670 --> 01:18:16,480
[Student] Hvordan får du det bug testet og også [uhørbart]

1314
01:18:16,480 --> 01:18:17,490
Flott. Flott.

1315
01:18:17,490 --> 01:18:21,860
Hvordan jobber du med nettverk? Hvordan kan du se hva som skjer?

1316
01:18:21,860 --> 01:18:23,620
Det er mange forskjellige svar på dette,

1317
01:18:23,620 --> 01:18:26,420
men la meg vise deg trolig den enkleste ting her.

1318
01:18:26,420 --> 01:18:29,350
La meg bli kvitt den simulator for et sekund.

1319
01:18:29,350 --> 01:18:31,740
Bare et par debugging alternativer for nettverksbygging.

1320
01:18:31,740 --> 01:18:36,070
Det er et komplett nettverk stack bakt rett inn både WinRT nivå og fra WinJS,

1321
01:18:36,070 --> 01:18:42,810
slik at du kan veldig lett gjøre XHR, kaller AJAX type fra spillet eller applikasjonen til å gjøre det.

1322
01:18:42,810 --> 01:18:47,250
Primært, jeg pleier å bruke to ting.

1323
01:18:47,250 --> 01:18:53,660
Jeg bruker den faktiske dev verktøy selv, som har et nettverk stack bakt inn i dem.

1324
01:18:53,660 --> 01:18:55,870
La meg vise deg Windows hjemmesiden.

1325
01:18:55,870 --> 01:19:02,730
Jeg kan ta dette opp, og det er faktisk et nettverk proxy bakt inn i disse verktøyene her.

1326
01:19:02,730 --> 01:19:08,390
Så jeg kan gjøre dette, jeg kan oppdatere siden, og det kommer til å vise meg alle de interaksjoner,

1327
01:19:08,390 --> 01:19:14,550
inkludert AJAX kaller for den økten, for at forespørselen varighet.

1328
01:19:14,550 --> 01:19:17,600
Dette er nyttig. Det kommer til å være svært nyttig for nettleserbaserte applikasjoner.

1329
01:19:17,600 --> 01:19:20,470
For andre typer programmer, inkludert Windows Store apps,

1330
01:19:20,470 --> 01:19:23,970
Jeg bruker et verktøy som heter Fiddler.

1331
01:19:23,970 --> 01:19:29,650
Du kommer til å få et spill som svar. [Humrer]

1332
01:19:29,650 --> 01:19:32,750
Fiddler er en enkel proxy. Jeg tror jeg kan vise det til deg.

1333
01:19:32,750 --> 01:19:40,190
Det er bare GetFiddler.com, som interessant nok, jeg spore min nettverksstakken

1334
01:19:40,190 --> 01:19:41,740
kommer til å GetFiddler.

1335
01:19:41,740 --> 01:19:45,700
Men hvertfall, Fiddler har blitt skrevet av en av de PMs på IE-teamet,

1336
01:19:45,700 --> 01:19:48,290
så han vet hva han gjør.

1337
01:19:48,290 --> 01:19:52,630
Dette er en god proxy som du kan bruke til feilsøking nettverkstrafikk.

1338
01:19:52,630 --> 01:19:55,730
Jeg vil anbefale det. Spørsmål der borte også.

1339
01:19:55,730 --> 01:19:58,050
>> [Student] Er det en enkel måte å integrere fremmedspråk innspill,

1340
01:19:58,050 --> 01:20:00,810
liker japansk eller kinesisk, inn i Windows-programmer?

1341
01:20:00,810 --> 01:20:03,240
Jeg kan ikke si jeg har gjort for mye av det selv, men det er bakt i.

1342
01:20:03,240 --> 01:20:08,470
Det finnes alternativer for selvfølgelig emitting søknaden din - Jeg beklager, jeg ikke si spørsmålet -

1343
01:20:08,470 --> 01:20:11,100
alternativer rundt globalisering, lokalisering av innhold,

1344
01:20:11,100 --> 01:20:14,320
inkludert ting som å kunne selge i ulike markeder

1345
01:20:14,320 --> 01:20:19,190
og målrette den versjonen av din søknad for de enkelte språk

1346
01:20:19,190 --> 01:20:21,080
eller kulturer eller sånne ting. Absolutt bygget i.

1347
01:20:21,080 --> 01:20:22,980
Vi har hatt støtte for det for alltid,

1348
01:20:22,980 --> 01:20:26,630
og som bærer frem til alternativene for Windows Store.

1349
01:20:26,630 --> 01:20:30,450
Du kan gjøre det i butikken selv, selge i ulike markeder,

1350
01:20:30,450 --> 01:20:34,050
du kan gjøre det i søknaden så vel også med å bruke ressurser på å definere,

1351
01:20:34,050 --> 01:20:42,220
"Hvis jeg er utviklet for denne kulturen, og deretter bruke disse overstyringer for min tekstlig innhold

1352
01:20:42,220 --> 01:20:44,510
"Eller bruke en høyre til venstre leseren."

1353
01:20:44,510 --> 01:20:51,290
De er alle en del av standard WinJS og WinRT API. Godt spørsmål.

1354
01:20:51,290 --> 01:20:54,770
>> Hvordan gjør vi? Noen andre?

1355
01:20:54,770 --> 01:20:58,850
Og hvis noen på video har spørsmål, jeg cbowen @ microsoft,

1356
01:20:58,850 --> 01:21:02,790
så jeg er glad for å ta noen av dine spørsmål fra fremtiden.

1357
01:21:02,790 --> 01:21:05,690
Veldig - Fra fremtiden, fremtidig [ligner ekko].

1358
01:21:05,690 --> 01:21:09,140
Så her er meg. La meg sette tilbake min kontakt her.

1359
01:21:09,140 --> 01:21:11,840
Så bare send meg et notat, cbowen @ microsoft,

1360
01:21:11,840 --> 01:21:15,190
og jeg vil komme tilbake til deg så snart jeg kan.

1361
01:21:15,190 --> 01:21:19,010
>> Noe annet som du lurer på? Er vi gode?

1362
01:21:19,010 --> 01:21:24,050
Flott. OK. Takk så mye. Jeg setter pris på det. [Applaus]

1363
01:21:24,800 --> 01:21:27,000
>> [CS50.TV]