1
00:00:00,000 --> 00:00:02,420
[Powered by Google Translate] [Séminaire - Windows 8 - Développement App / Jeu avec HTML5]

2
00:00:02,420 --> 00:00:05,090
[Chris Bowen, Edwin Guarin - Université Harvard]

3
00:00:05,090 --> 00:00:07,350
[C'est CS50. - CS50.TV]

4
00:00:07,350 --> 00:00:10,290
>> Hey, tout le monde. Mon nom est Edwin Guarin. C'est Chris Bowen.

5
00:00:10,290 --> 00:00:12,310
Je vais le laisser se présenter dans une seconde.

6
00:00:12,310 --> 00:00:14,100
Je veux juste faire une annonce rapide.

7
00:00:14,100 --> 00:00:18,340
Tout d'abord, tout ce que vous CS50 étudiants obtiennent Windows 8 gratuitement.

8
00:00:18,340 --> 00:00:23,150
Donc, si vous songez à fait l'utiliser pour votre projet final, c'est la vôtre.

9
00:00:23,150 --> 00:00:25,740
Nate enverra un e-mail plus tard pour les instructions.

10
00:00:25,740 --> 00:00:32,850
La deuxième chose est que si vous décidez d'écrire une application Windows 8 pour votre projet final CS50,

11
00:00:32,850 --> 00:00:35,870
nous allons faire quelques cadeaux: une Xbox,

12
00:00:35,870 --> 00:00:38,870
nous pourrions être en mesure de donner une ardoise loin, des trucs comme ça.

13
00:00:38,870 --> 00:00:42,460
Donc, s'il ya quelque chose qui vous retient, laisser Chris ou je sais

14
00:00:42,460 --> 00:00:45,010
comment nous pouvons vous aider à construire quelque chose de vraiment cool.

15
00:00:45,010 --> 00:00:48,580
Donc merci encore d'être venus aujourd'hui, et je vais les remettre à Chris.

16
00:00:48,580 --> 00:00:50,500
>> Merci, Edwin.

17
00:00:51,000 --> 00:00:52,740
Merci, tout le monde, pour se joindre à nous aujourd'hui.

18
00:00:52,740 --> 00:00:55,800
Je suis Chris Bowen. Je suis l'un des collègues de Edwin ici dans le Nord.

19
00:00:55,800 --> 00:00:58,310
Je voulais juste passer un peu de temps avec vous parle

20
00:00:58,310 --> 00:01:03,730
comment faire une application Windows Store avec HTML5, JavaScript et CSS

21
00:01:03,730 --> 00:01:07,310
et le type de obtiennent toutes les questions que vous pourriez avoir à ce sujet ont répondu pour vous

22
00:01:07,310 --> 00:01:12,920
que vous êtes à la recherche vers de penser à peut-être l'utiliser pour un CS50 finales occasion.

23
00:01:12,920 --> 00:01:14,980
>> Cela dit, nous allons plonger en plein dedans

24
00:01:14,980 --> 00:01:17,190
Je vais aller sur des diapositives ici.

25
00:01:17,190 --> 00:01:19,440
Si vous avez des questions, n'hésitez pas à m'envoyer un email.

26
00:01:19,440 --> 00:01:23,460
Je suis cbowen@microsoft.com, et il ya mon blog et mon Twitter.

27
00:01:23,460 --> 00:01:26,330
Cependant, vous souhaitez entrer en contact avec moi, c'est très bien.

28
00:01:26,330 --> 00:01:30,110
J'ai environ une heure de choses, et je veux obtenir vos questions en cours de route,

29
00:01:30,110 --> 00:01:33,720
alors ne soyez pas timide au sujet de questions au cours de cette.

30
00:01:33,720 --> 00:01:36,470
Ils ne peuvent pas voir qui pose les questions sur l'enregistrement,

31
00:01:36,470 --> 00:01:39,090
de sorte que vous serez aussi anonyme que vous voulez être.

32
00:01:39,090 --> 00:01:42,780
>> Permettez-moi de plonger en plein, juste vous donner une rapide introduction à Windows 8,

33
00:01:42,780 --> 00:01:47,400
et vous montrer quelques-unes des choses sur les applications Windows Store que vous pourriez envisager

34
00:01:47,400 --> 00:01:49,530
que vous songez à développer une application.

35
00:01:49,530 --> 00:01:52,660
Nous cherchons à Windows 8. Nous ne sommes pas sortis quelques semaines maintenant.

36
00:01:52,660 --> 00:01:55,810
Beaucoup d'adoption fort là-bas déjà.

37
00:01:55,810 --> 00:01:59,800
Vous avez peut être déjà vu les machines de surface que nous avons ainsi.

38
00:01:59,800 --> 00:02:03,730
Il ya une ici en fait, vous pouvez jeter un oeil à si vous êtes ici en personne.

39
00:02:03,730 --> 00:02:07,530
Je veux vraiment vous parler, de vous montrer un petit peu sur Windows 8.

40
00:02:07,530 --> 00:02:10,759
L'idée avec Windows 8, il n'apporte vraiment en avant toutes les choses que vous savez à propos de Windows

41
00:02:10,759 --> 00:02:16,840
dans de nouvelles expériences - en particulier, des choses comme sur la machine de la surface de contact,

42
00:02:16,840 --> 00:02:20,000
ce type de dispositifs les plus mobiles qui sont maintenant sur le marché,

43
00:02:20,000 --> 00:02:22,360
mais c'est aussi de Windows à sa base.

44
00:02:22,360 --> 00:02:25,850
Donc, cela signifie que vous pouvez l'installer vraiment sur tout ce qui fonctionne sous Windows 7,

45
00:02:25,850 --> 00:02:30,770
à partir de votre plus grand triple SLI jeu plate-forme vers le bas pour votre ordinateur portable

46
00:02:30,770 --> 00:02:36,200
et à vos brillantes nouvelles d'autres appareils que vous pourriez ramasser aujourd'hui.

47
00:02:36,200 --> 00:02:38,450
Ils exécuteront Windows 8.

48
00:02:38,450 --> 00:02:40,530
Je vais vous faire visiter un peu,

49
00:02:40,530 --> 00:02:44,670
et toutes les expériences que vous verrez ici sont des choses que vous pouvez créer.

50
00:02:44,670 --> 00:02:47,760
L'idée est de savoir si il est tactile, souris, clavier,

51
00:02:47,760 --> 00:02:51,870
quel que soit le dispositif que vous utilisez votre application sur, ça va fonctionner très bien.

52
00:02:51,870 --> 00:02:55,180
Windows 8 aidera avec tous ces scénarios.

53
00:02:55,180 --> 00:02:59,600
>> Ces lames de côté, allons-y juste en prenant un coup d'oeil ici.

54
00:02:59,600 --> 00:03:03,270
Permettez-moi de vous montrer autour de mon écran d'accueil. Ceci est mon écran de démarrage.

55
00:03:03,270 --> 00:03:05,810
Je vais vous donner un peu d'un tour ici.

56
00:03:05,810 --> 00:03:09,610
Je suis sur une machine non-contact, donc autant que je veux toucher l'écran de mon ordinateur portable,

57
00:03:09,610 --> 00:03:13,400
il ne fera pas une chose, donc je vais juste faire défiler ici un peu et vous montrer.

58
00:03:13,400 --> 00:03:17,950
Certaines choses que vous remarquerez peut-être sont le fait que ceux-ci ce sont appelées tuiles en direct

59
00:03:17,950 --> 00:03:21,470
en fait peut animer, et ils peuvent fournir des informations pour vous -

60
00:03:21,470 --> 00:03:24,750
peut-être des mises à jour sur les statistiques pour un jeu

61
00:03:24,750 --> 00:03:30,970
ou vous montrer des nouvelles de quelques-unes des applications antérieures qui sont ici sur le côté gauche.

62
00:03:30,970 --> 00:03:35,350
Nous y voilà. Je suis sûr que ce n'est que positif et incroyablement bonnes nouvelles.

63
00:03:35,350 --> 00:03:38,450
Vous pouvez voir ici c'est vraiment d'appeler votre attention sur l'application, en disant:

64
00:03:38,450 --> 00:03:43,010
"Hé, il ya quelque chose de nouveau ici. Jetez un oeil. Revenez et voir ce qui est nouveau pour vous."

65
00:03:43,010 --> 00:03:45,320
C'est ce qu'on appelle live tile, et vous pouvez faire des notifications

66
00:03:45,320 --> 00:03:47,070
soit directement depuis l'application elle-même

67
00:03:47,070 --> 00:03:52,220
ou si vous prenez un coup d'oeil plus en détail, vous découvrirez comment écrire un service distant

68
00:03:52,220 --> 00:03:54,340
qui peut effectivement pousser informations à la tuile,

69
00:03:54,340 --> 00:03:56,520
qui est ce qui se passe avec ces nouvelles applications.

70
00:03:56,520 --> 00:04:00,080
Ils sont en fait avoir des nouvelles de la nuée et de mettre à jour la tuile là

71
00:04:00,080 --> 00:04:03,710
que les gens sachent qu'il ya une raison pour ouvrir l'application et de prendre un coup d'oeil

72
00:04:03,710 --> 00:04:06,950
à ce que les dernières nouvelles est dans l'une de ces

73
00:04:06,950 --> 00:04:10,060
ou si il ya de nouvelles recettes ou un score à battre

74
00:04:10,060 --> 00:04:13,560
ou un ami à jouer ou quoi sur ces applications.

75
00:04:13,560 --> 00:04:15,550
C'est quelque chose pour vous séduire Dans

76
00:04:15,550 --> 00:04:18,640
Voilà donc les tuiles en direct, et il pourrait être une personne, il pourrait être un site Web.

77
00:04:18,640 --> 00:04:20,790
Habituellement, il s'agit d'une application.

78
00:04:20,790 --> 00:04:25,320
>> Quasiment toutes ces choses que j'ai ici proviennent du Windows Store. Je lance ça.

79
00:04:25,320 --> 00:04:27,890
C'est l'une des applications que vous obtenez par défaut

80
00:04:27,890 --> 00:04:30,350
sur n'importe quelle machine qui exécute Windows 8.

81
00:04:30,350 --> 00:04:33,040
Vous pouvez venir ici pour trouver tout ce que vous voudriez,

82
00:04:33,040 --> 00:04:37,240
des choses qui sont mises en évidence à des jeux que je n'ai pas vu avant.

83
00:04:37,240 --> 00:04:39,440
Oh, wow, nous avons un nouveau flipper ici.

84
00:04:39,440 --> 00:04:41,580
Vous pouvez installer ces ici dans le magasin,

85
00:04:41,580 --> 00:04:43,420
et nous allons parler de la façon de les développer.

86
00:04:43,420 --> 00:04:45,670
Vous avez beaucoup de choix dans la façon dont vous les créez.

87
00:04:45,670 --> 00:04:49,020
Nous ferons un point sur l'histoire de JavaScript avec HTML et CSS,

88
00:04:49,020 --> 00:04:52,790
mais à l'utilisateur, à l'acheteur de l'application, ce n'est pas grave ce qu'il a été écrit po

89
00:04:52,790 --> 00:04:54,670
Ils peuvent aller de l'avant et travailler avec elle.

90
00:04:54,670 --> 00:04:57,870
Je suis intrigué par celui-ci, donc j'ai besoin d'ouvrir cette place et jeter un oeil.

91
00:04:57,870 --> 00:05:02,310
Chaque application, y compris ceux que vous pouvez soumettre et vendre ou donner gratuitement,

92
00:05:02,310 --> 00:05:06,240
tout ce que vous voulez faire dans le magasin, vous obtiendrez une page d'accueil comme ceci.

93
00:05:06,240 --> 00:05:10,750
Vous pouvez joindre à votre demande un tas de captures d'écran - vous voyez certains ici -

94
00:05:10,750 --> 00:05:15,970
détails sur l'application, et au fil du temps vous accumulez deux notes -

95
00:05:15,970 --> 00:05:19,020
ils sont fondamentalement juste le nombre d'étoiles - et des critiques,

96
00:05:19,020 --> 00:05:20,690
qui fournissent un peu plus de perspicacité.

97
00:05:20,690 --> 00:05:24,380
En fait, quelqu'un doit taper quelque chose et vous dire combien vous êtes génial,

98
00:05:24,380 --> 00:05:29,300
et qui ira dans votre section Commentaires ici, que je n'ai pas regardé.

99
00:05:29,300 --> 00:05:33,890
Fantastique. "Will même pas ouvrir." Comment grand.

100
00:05:33,890 --> 00:05:39,000
Eh bien, pour les gens pour qui cela n'a ouvert et terme, ils semblent vraiment en profiter. [Rires]

101
00:05:39,000 --> 00:05:43,770
Gardez cela à l'esprit. Internet. N'importe qui peut dire ce qu'ils veulent à propos de votre demande.

102
00:05:43,770 --> 00:05:45,780
Donc, assurez-vous que vous faites un excellent travail avec lui,

103
00:05:45,780 --> 00:05:49,030
assurez-vous que vous faites aussi confortable pour l'utilisateur que vous pouvez

104
00:05:49,030 --> 00:05:52,720
parce qu'ils sont un couple clics de fournir un avis,

105
00:05:52,720 --> 00:05:55,870
et qui accumuler jusqu'à votre note globale d'évaluation.

106
00:05:55,870 --> 00:05:58,990
Et vous voulez faire de votre mieux parce que vous allez être contre d'autres applications.

107
00:05:58,990 --> 00:06:01,830
Il y aura des milliers d'applications déjà dans le magasin,

108
00:06:01,830 --> 00:06:06,880
et les chances sont, il peut y avoir quelque chose qui fait des fonctionnalités similaires à ce que vous faites.

109
00:06:06,880 --> 00:06:12,740
Donc, si vous pouvez vraiment se démarquer de la foule, qui va être à votre avantage, bien sûr.

110
00:06:12,740 --> 00:06:15,300
>> Nous allons entrer dans le magasin un peu plus tard.

111
00:06:15,300 --> 00:06:17,090
Je veux vraiment mettre l'accent sur la création d'applications.

112
00:06:17,090 --> 00:06:20,760
Mais la version courte de la boutique est la distribution dans le monde entier,

113
00:06:20,760 --> 00:06:25,430
il est automatiquement partie de Windows 8, des gens tirent vers le haut et jeter un oeil à diverses applications ici,

114
00:06:25,430 --> 00:06:29,070
vous avez le livre d'autocollants Dress-Up et toutes sortes de différentes applications.

115
00:06:29,070 --> 00:06:33,690
Peinture fraîche, j'utilise ce lot - mal, mais je l'utilise beaucoup.

116
00:06:33,690 --> 00:06:36,080
Il me montrant que je possède déjà.

117
00:06:36,080 --> 00:06:41,280
Laissez-moi vous montrer quelque chose que je n'ai pas - UVideos je n'ai pas de nouvelle.

118
00:06:41,280 --> 00:06:43,660
Vous voyez ici c'est gratuit, et vous pouvez l'installer dès le magasin.

119
00:06:43,660 --> 00:06:46,430
Vous avez le choix aussi. Vous pouvez bien sûr donner.

120
00:06:46,430 --> 00:06:49,660
Vous pouvez mettre de la publicité dans l'application ou jeu.

121
00:06:49,660 --> 00:06:54,770
Vous pouvez également payer pour cela, et vous pourriez très facilement fournir un procès pour l'application ainsi

122
00:06:54,770 --> 00:06:58,220
de sorte que vous pouvez laisser les gens l'essayer pendant une semaine ou ce que vous voulez faire.

123
00:06:58,220 --> 00:07:01,540
C'est juste personnalisable via le portail. Vous n'avez pas à écrire un code pour cela.

124
00:07:01,540 --> 00:07:03,990
Donc, vous dites: «Vous pouvez l'utiliser pour une semaine, puis vous avez eu à l'acheter»,

125
00:07:03,990 --> 00:07:07,130
ou vous pouvez faire des choses comme, «Vous pourriez jouer les 3 premiers niveaux de ce jeu

126
00:07:07,130 --> 00:07:09,820
"Et puis vous avez à acheter pour accéder au reste."

127
00:07:09,820 --> 00:07:12,310
Vous pourriez même faire des achats in-app, ainsi, de sorte que vous pouvez dire,

128
00:07:12,310 --> 00:07:17,880
"Nous avons des aventures ou des ensembles de graphiques ou des choses qui sont débloqués supplémentaires -

129
00:07:17,880 --> 00:07:21,430
"Plus de recettes qui sont débloqués -. Si vous achetez ces ensembles étendus"

130
00:07:21,430 --> 00:07:24,260
Et vous pouvez le faire tout dans l'application ou le jeu lui-même.

131
00:07:24,260 --> 00:07:26,070
Donc, totalement à vous, votre choix.

132
00:07:26,070 --> 00:07:28,070
Il ya beaucoup de choses que vous pouvez faire dans le magasin,

133
00:07:28,070 --> 00:07:31,660
puis, fondamentalement, vous êtes le soumettre à un canal de certification.

134
00:07:31,660 --> 00:07:35,380
Nous pouvons parler tout à ce sujet un peu plus tard, mais c'est le but.

135
00:07:35,380 --> 00:07:40,410
Vous voulez obtenir votre application visibilité dans le monde entier dans le magasin ici.

136
00:07:40,410 --> 00:07:44,170
>> Retour sur l'écran de démarrage ici, je voudrais vous montrer un petit peu plus.

137
00:07:44,170 --> 00:07:50,580
Si je lance ces applications, laissez-moi vous donner un exemple de certaines fonctionnalités cross-application ici.

138
00:07:50,580 --> 00:07:53,070
Pour ce faire, je vais lance Fresh Paint.

139
00:07:53,070 --> 00:07:55,550
Une chose que vous voyez ici est chaque bit de l'écran,

140
00:07:55,550 --> 00:07:58,040
tous les pixels de l'écran, allez à votre application.

141
00:07:58,040 --> 00:08:01,990
Allés sont les jours où vous avez ces frontières autour des fenêtres

142
00:08:01,990 --> 00:08:05,120
avec beaucoup de boutons qui sont toujours là prennent de la place tout le temps.

143
00:08:05,120 --> 00:08:09,430
Maintenant, vous voulez vraiment sortir de cela et avoir juste votre contenu soit le focus.

144
00:08:09,430 --> 00:08:13,710
Nous pouvons faire des choses avec Windows en accédant à d'autres types de menus.

145
00:08:13,710 --> 00:08:16,840
L'un d'eux est en fait ce qu'on appelle la barre des charmes,

146
00:08:16,840 --> 00:08:18,870
et il sort par le côté de l'écran.

147
00:08:18,870 --> 00:08:21,270
Vous pouvez réellement feuilleter depuis le côté si vous avez un écran tactile,

148
00:08:21,270 --> 00:08:24,840
vous pouvez faire un clic droit si vous disposez d'une souris, il ya un raccourci clavier pour cela,

149
00:08:24,840 --> 00:08:29,490
il ya toujours plus d'une façon de faire quelque chose dans l'environnement ici.

150
00:08:29,490 --> 00:08:31,680
Cela apporte un certain nombre de choses que vous pouvez faire.

151
00:08:31,680 --> 00:08:33,870
La plus évidente est que vous pouvez revenir à l'écran de démarrage,

152
00:08:33,870 --> 00:08:36,780
mais les 4 autres sont ce qu'on appelle des charmes.

153
00:08:36,780 --> 00:08:41,059
Ce sont des contrats que vous pouvez brancher en tant que développeur de l'application. Ils sont assez cool.

154
00:08:41,059 --> 00:08:43,340
Recherche, je suis sûr que c'est quelque chose que vous allez faire,

155
00:08:43,340 --> 00:08:44,950
partage, je vous montrerai dans un instant,

156
00:08:44,950 --> 00:08:48,450
et périphériques et paramètres, ce sont toutes les choses que votre application peut se brancher sur

157
00:08:48,450 --> 00:08:51,960
de tirer parti de Windows, de dire: «J'ai fait ma part

158
00:08:51,960 --> 00:08:54,700
"Et je veux Windows pour soutenir d'autres fonctionnalités,

159
00:08:54,700 --> 00:08:56,750
"Et je ne veux pas écrire beaucoup de code pour que cela se produise."

160
00:08:56,750 --> 00:08:59,480
C'est vraiment un avantage de l'utilisation de ces fonctionnalités.

161
00:08:59,480 --> 00:09:01,340
Permettez-moi de vous montrer un.

162
00:09:01,340 --> 00:09:05,170
Pour ce faire, je vais faire une nouvelle peinture.

163
00:09:05,170 --> 00:09:08,240
J'ai également parlé de l'aide chaque pixel pour votre application.

164
00:09:08,240 --> 00:09:11,850
Par défaut, c'est ce que la peinture app ressemble quand vous l'utilisez.

165
00:09:11,850 --> 00:09:14,960
C'est vraiment juste sur ce que vous dessinez, votre contenu.

166
00:09:14,960 --> 00:09:20,850
Je pourrais faire des choses horribles ici. Que dois-je en tirer? Je ne sais pas.

167
00:09:20,850 --> 00:09:23,110
Gribouillis? Oh, génial. Je peux faire des gribouillis. Fantastique.

168
00:09:23,110 --> 00:09:25,130
Une dinde? [Rires]

169
00:09:25,130 --> 00:09:28,500
Il s'agit de la dinde le plus abstrait, vous verrez.

170
00:09:28,500 --> 00:09:31,780
Je peux aussi faire apparaître ce qu'on appelle la barre d'application,

171
00:09:31,780 --> 00:09:33,850
et c'est vraiment l'un des principaux moyens que vous pouvez utiliser

172
00:09:33,850 --> 00:09:37,210
à cacher toutes les choses qui auraient pu être sur votre application ou un jeu avant

173
00:09:37,210 --> 00:09:39,570
juste prendre de place tout le temps.

174
00:09:39,570 --> 00:09:43,270
Alors maintenant, vous pouvez le mettre ici, et c'est vraiment l'un des plus belles expériences

175
00:09:43,270 --> 00:09:46,380
avec la barre d'application que j'ai vu.

176
00:09:46,380 --> 00:09:48,800
Mettez les choix ici pour sélectionner différentes couleurs.

177
00:09:48,800 --> 00:09:54,310
Nous voulions une dinde, donc nous allons mettre un peu brun ici, commencer à mixer dans quelques couleurs.

178
00:09:54,310 --> 00:09:58,790
Nous allons prendre une couleur intermédiaire ici et puis revenir ici.

179
00:09:58,790 --> 00:10:02,990
Vous pouvez commencer à dessiner. Il ya la dinde. Fantastique.

180
00:10:02,990 --> 00:10:07,660
Je ne peux pas dessiner pour commencer, mais de le faire avec un touchpad devant un public, c'est encore mieux.

181
00:10:07,660 --> 00:10:09,640
C'est génial.

182
00:10:09,640 --> 00:10:13,030
L'idée, cependant, c'est tout ce qui m'importe est ici sur la surface.

183
00:10:13,030 --> 00:10:17,060
Disons que je suis satisfait de ce que j'ai à partager avec quelqu'un.

184
00:10:17,060 --> 00:10:19,680
Normalement ce que vous feriez avec d'autres versions de Windows,

185
00:10:19,680 --> 00:10:22,900
vous auriez peut-être prendre une capture d'écran, vous devriez faire un peu de copier-coller votre texte

186
00:10:22,900 --> 00:10:24,950
ou des choses comme ça que vous voulez partager,

187
00:10:24,950 --> 00:10:27,260
et puis aller ouvrir une autre application et mettre en elle.

188
00:10:27,260 --> 00:10:28,630
Ici, vous n'avez pas à le faire.

189
00:10:28,630 --> 00:10:32,400
Vous pouvez effectivement faire ressortir la barre des charmes et dire: «Je veux partager."

190
00:10:32,400 --> 00:10:35,000
A ce stade, il va vous montrer toutes les applications

191
00:10:35,000 --> 00:10:38,080
qui savent comment travailler avec tout ce qui est partagé.

192
00:10:38,080 --> 00:10:41,590
Dans ce cas, il s'agit d'une image, il va dire: «Je vois que vous avez une image."

193
00:10:41,590 --> 00:10:45,590
"Voulez-vous partager?" Vous pouvez voir que l'email me bourrer tout le temps.

194
00:10:45,590 --> 00:10:49,420
Il reconnaît que, et il m'offre que comme un raccourci,

195
00:10:49,420 --> 00:10:53,270
mais il est aussi en me montrant toutes les applications qui sait comment faire face à la prise de vue

196
00:10:53,270 --> 00:10:55,520
et faire quelque chose avec elle.

197
00:10:55,520 --> 00:10:57,890
Ils ont tous indiqué à Windows qu'ils peuvent le faire.

198
00:10:57,890 --> 00:10:59,240
A ce stade, ce n'est Windows.

199
00:10:59,240 --> 00:11:01,680
L'utilisateur choisit simplement ce qu'ils veulent faire avec elle.

200
00:11:01,680 --> 00:11:06,610
Je ferai de mon habitude de PuzzleTouch. Vous pouvez voir que j'ai créé toutes sortes d'énigmes au fil du temps.

201
00:11:06,610 --> 00:11:11,790
Je vais prendre PuzzleTouch et dire: «Je veux partager cette création étonnante avec PuzzleTouch."

202
00:11:11,790 --> 00:11:16,670
Ça va aller de l'avant et dire: «Grand. Vous souhaitez partager? Fantastique."

203
00:11:16,670 --> 00:11:19,260
«Voulez-vous faire un puzzle qui est facile, intermédiaire, quel que soit?"

204
00:11:19,260 --> 00:11:20,800
Je vais faire une intermédiaire ici.

205
00:11:20,800 --> 00:11:24,890
Il rend le puzzle. Ça va être un casse-tête terrible, parce que c'est surtout vide.

206
00:11:24,890 --> 00:11:28,100
Mais il est prêt, et c'est en fait revenir dans l'autre application.

207
00:11:28,100 --> 00:11:32,360
Si je viens ici, je peux le rechercher et de le lancer.

208
00:11:32,360 --> 00:11:38,100
Maintenant, si nous faisons défiler sur un peu ici, nous devrions voir ma création quelque part.

209
00:11:38,100 --> 00:11:42,930
Où suis-je allé? Quel genre de casse-tête ai-je fait? Ai-je fait-il facile?

210
00:11:42,930 --> 00:11:46,110
Oh, il est là, juste là.

211
00:11:46,110 --> 00:11:49,550
[Rires] C'est le casse-tête facilement reconnaissable de dinde qui est ici.

212
00:11:49,550 --> 00:11:52,360
Mais la chose que je veux vous faire remarquer, le truc cool ici

213
00:11:52,360 --> 00:11:54,710
est les applications ne savent rien de l'autre.

214
00:11:54,710 --> 00:11:58,740
Ils ont seulement dit, "j'ai une image à part, et je sais comment faire face à des photos."

215
00:11:58,740 --> 00:12:01,420
Et vous en tant que développeur, vous n'avez pas à écrire ce code.

216
00:12:01,420 --> 00:12:05,350
Quand quelqu'un me demande de partager, je vais mettre des données dans cette petite structure de données

217
00:12:05,350 --> 00:12:06,740
et je suis fait.

218
00:12:06,740 --> 00:12:10,990
L'autre application prend en charge, fait son travail, et c'est la fin de l'expérience de partage.

219
00:12:10,990 --> 00:12:14,550
C'est juste une chose que vous pouvez faire - vraiment, vraiment puissant -

220
00:12:14,550 --> 00:12:17,570
et ça va être une de ces choses qui pourrait vraiment aider à différencier votre application

221
00:12:17,570 --> 00:12:20,090
et aussi votre jeu trop dans le magasin.

222
00:12:20,090 --> 00:12:22,220
Les gens vont être en mesure de dire: «Ceci est vraiment utile."

223
00:12:22,220 --> 00:12:25,430
"J'utilise ce créateur de puzzle tout le temps. C'est fantastique."

224
00:12:25,430 --> 00:12:30,490
>> C'est assez sur un bref aperçu de ce qui se passe ici.

225
00:12:30,490 --> 00:12:33,670
Il ya quelques autres fonctionnalités aussi que peut-être nous allons mettre en évidence que nous avançons dans le code.

226
00:12:33,670 --> 00:12:37,710
Mais je tiens à plonger dans les diapositives, et pour ce faire, je vais aller sur le bureau,

227
00:12:37,710 --> 00:12:40,940
qui est elle-même une autre tuile en direct ici.

228
00:12:40,940 --> 00:12:43,840
Je peux aller sur cette question et, bien sûr, je suis sur mes diapositives,

229
00:12:43,840 --> 00:12:46,320
mais permettez-moi de vous montrer réellement où nous en sommes.

230
00:12:46,320 --> 00:12:48,460
Nous sommes en fait en mode Desktop.

231
00:12:48,460 --> 00:12:52,580
C'est vraiment là où ce que je disais avant sur Windows report

232
00:12:52,580 --> 00:12:54,850
à de nouvelles expériences se montre.

233
00:12:54,850 --> 00:12:56,450
C'est le Windows que vous savez.

234
00:12:56,450 --> 00:12:59,730
Applications Windows sont appelés applications de bureau. Ils courent ici.

235
00:12:59,730 --> 00:13:02,730
Si vous avez des applications existantes et que vous souhaitez les exécuter sur Windows 8,

236
00:13:02,730 --> 00:13:04,710
vous ne pouvez absolument le faire.

237
00:13:04,710 --> 00:13:07,590
Ce ne sont pas les mêmes choses que les applications de stockage, qui sont ici,

238
00:13:07,590 --> 00:13:12,240
comme Peinture fraîche et ces applications NBC News et des choses comme ça. Ceux-ci viennent de la boutique.

239
00:13:12,240 --> 00:13:14,450
Ils peuvent se brancher sur quelques-unes des fonctionnalités que je vous montrais

240
00:13:14,450 --> 00:13:16,620
et d'autres que je ne vous ai pas encore montré tout.

241
00:13:16,620 --> 00:13:21,460
Mais il faut garder cela à l'esprit. Nous avons l'appui de ces deux choses.

242
00:13:21,460 --> 00:13:27,000
Je suis désolé. Est quelque chose de pas s'affiche sur l'écran? J'ai perdu complètement. C'est étrange.

243
00:13:29,000 --> 00:13:31,000
Très bien. Merci pour cette remarque.

244
00:13:31,000 --> 00:13:34,770
Qu'est-ce que vous n'avez pas été voir pendant un certain temps, c'est vous ma montrant que le bureau est ici.

245
00:13:34,770 --> 00:13:37,540
Quelle est la dernière chose que vous avez vu? Avez-vous vu cela?

246
00:13:37,540 --> 00:13:39,490
C'est le bureau. Vous savez déjà à quoi il ressemble.

247
00:13:39,490 --> 00:13:42,070
Il n'y a rien de terriblement inhabituel.

248
00:13:42,070 --> 00:13:46,940
C'est notre réalisation de cette expérience avant pour vous et vous permet d'utiliser les choses que vous avez eu.

249
00:13:46,940 --> 00:13:50,460
Par exemple, je vais vous montre Visual Studio. C'est une application de bureau.

250
00:13:50,460 --> 00:13:52,600
Il va courir dans ce mode.

251
00:13:52,600 --> 00:13:54,960
Il va soutenir un environnement plus complexe

252
00:13:54,960 --> 00:14:01,470
avec beaucoup d'options et de choses comme ça, et il est donc une bonne option comme une application de bureau.

253
00:14:01,470 --> 00:14:04,810
>> Cela dit, passons à lames pour un peu

254
00:14:04,810 --> 00:14:09,720
et vous donner un peu de contenu d'introduction, puis obtenir en fait codage ici.

255
00:14:09,720 --> 00:14:14,070
Les bonnes nouvelles sont que j'ai entendu que vous avez mis l'accent sur un terrain de CSS et JavaScript, HTML.

256
00:14:14,070 --> 00:14:18,110
Toutes ces choses que vous avez appris report directement dans la prise applications Windows Store.

257
00:14:18,110 --> 00:14:22,920
Les choses que vous avez entendu parler d'appliquer les sélecteurs CSS et toutes ces choses

258
00:14:22,920 --> 00:14:27,180
c'est exactement ce que vous faites pour créer une demande ici pour le magasin.

259
00:14:27,180 --> 00:14:29,640
Nous allons passer par les choses petit à petit.

260
00:14:29,640 --> 00:14:34,130
Fondamentalement, je vais construire sur les choses que vous avez déjà pris le temps d'apprendre.

261
00:14:34,130 --> 00:14:36,520
C'est le tableau d'ensemble des technologies que vous pouvez utiliser

262
00:14:36,520 --> 00:14:38,790
de faire des applications pour Windows 8.

263
00:14:38,790 --> 00:14:42,840
Le truc sur la droite, les applications de bureau, c'est vraiment ce que nous savons déjà.

264
00:14:42,840 --> 00:14:46,840
Ce sont des choses qui est vraiment le monde Windows 7 reportées dans Windows 8.

265
00:14:46,840 --> 00:14:51,920
Toutes ces options report: C #, VB, Win32 type de développement.

266
00:14:51,920 --> 00:14:54,450
Grand. Pas de problème. Le nouveau truc est sur le côté gauche.

267
00:14:54,450 --> 00:14:58,220
C'est applications Windows Store, c'est là que je veux que ma demande soit branché sur Windows 8

268
00:14:58,220 --> 00:15:02,300
en utilisant toutes ces fonctionnalités, faites-le dans le magasin, et obtenir cette expérience vraiment cool

269
00:15:02,300 --> 00:15:05,260
des applications Windows Store.

270
00:15:05,260 --> 00:15:10,350
Pour ce faire, vous pouvez le voir ici, vous avez tous vos choix avec XAML, C + +,

271
00:15:10,350 --> 00:15:14,100
C #, VB, vous pourriez faire DirectX, ce genre de choses, des choses qui vont au-delà de la diapositive.

272
00:15:14,100 --> 00:15:18,650
Mais pour nous, nous allons nous concentrer en plein sur le fait que HTML, CSS et JavaScript

273
00:15:18,650 --> 00:15:22,890
sont vraiment un citoyen de première classe pour la réalisation des applications pour Windows 8

274
00:15:22,890 --> 00:15:24,960
et pour le Windows Store.

275
00:15:24,960 --> 00:15:27,950
Donc ce qui est bon pour tout le monde ici et les gens regardent à la vidéo

276
00:15:27,950 --> 00:15:30,760
parce que vous ne pouvez tirer parti de toutes ces expériences que vous avez

277
00:15:30,760 --> 00:15:33,900
et vraiment attacher dans ce que Windows offre.

278
00:15:33,900 --> 00:15:37,870
Vous allez faire que grâce à un ensemble d'API, qui ne devrait pas être une surprise.

279
00:15:37,870 --> 00:15:39,920
Chaque OS a ses propres API.

280
00:15:39,920 --> 00:15:43,530
Nous exposons ce que Windows peut faire à travers ce qu'on appelle WinRT.

281
00:15:43,530 --> 00:15:46,370
C'est un ensemble d'API qui fait juste tout pour vous.

282
00:15:46,370 --> 00:15:51,650
Si vous avez besoin d'ouvrir des fichiers, vous devez utiliser l'appareil photo, la géolocalisation, des choses comme ça,

283
00:15:51,650 --> 00:15:55,700
ils passent par ce que Windows peut vous offrir.

284
00:15:55,700 --> 00:15:59,370
Pour accéder à cela, nous avons un peu plus de JavaScript qui va rendre encore plus facile

285
00:15:59,370 --> 00:16:02,510
pour vous de le faire. Nous y reviendrons dans un instant.

286
00:16:02,510 --> 00:16:04,060
Mais pour l'instant, c'est essentiellement votre feuille de route.

287
00:16:04,060 --> 00:16:06,770
Les choses que vous avez déjà été faites sur le dessus de certaines API

288
00:16:06,770 --> 00:16:11,280
que vous aider à travailler avec Windows équivaut app store.

289
00:16:11,280 --> 00:16:14,210
Et c'est vraiment tout ce que vous devez savoir de haut niveau.

290
00:16:14,210 --> 00:16:17,370
>> Nous allons plonger dans effectivement travailler avec les choses maintenant.

291
00:16:18,940 --> 00:16:21,950
Les choses que vous avez probablement déjà vu un tas de,

292
00:16:21,950 --> 00:16:26,760
avec IE9 un peu en arrière, nous avons introduit un soutien pour beaucoup de l', à l'époque,

293
00:16:26,760 --> 00:16:30,340
nouvelles normes dans le Web, de sorte que beaucoup de nouvelles fonctionnalités CSS,

294
00:16:30,340 --> 00:16:34,380
beaucoup de nouvelles HTML, ECMAScript 5, ce qui est vraiment JavaScript.

295
00:16:34,380 --> 00:16:38,090
Donc tout pour que, sauf pour le mode strict était dans IE9.

296
00:16:38,090 --> 00:16:42,290
Juste une tonne de choses avec CSS, CSS3, tout là-dedans.

297
00:16:42,290 --> 00:16:45,300
Et tout ça reporte dans ce que nous faisons avec Windows 8.

298
00:16:45,300 --> 00:16:49,350
Vous pouvez utiliser ces choses, et vous pouvez utiliser tout ce qui est nouveau dans IE10.

299
00:16:49,350 --> 00:16:54,640
Avec IE10 nous introduisons un soutien pour toutes ces choses ainsi.

300
00:16:54,640 --> 00:16:59,340
Ils sont tous à accélération matérielle, donc si vous êtes sur une machine qui a une sorte de GPU,

301
00:16:59,340 --> 00:17:04,190
qui est probablement à peu près toutes les machines que vous pourriez obtenir dans les 8 dernières années,

302
00:17:04,190 --> 00:17:07,609
vous allez être en mesure d'avoir la sortie de l'accélération matérielle,

303
00:17:07,609 --> 00:17:11,770
sortie visuelle avec CSS, Canvas, SVG.

304
00:17:11,770 --> 00:17:14,339
Toutes ces choses vont passer par l'accélération matérielle

305
00:17:14,339 --> 00:17:16,060
et être beaucoup plus rapide et plus efficace.

306
00:17:16,060 --> 00:17:20,440
La version courte de tout cela - je ne vais pas passer tout seul ici -

307
00:17:20,440 --> 00:17:23,200
si vous le voyez sur cette liste, si vous pouvez le faire dans IE10,

308
00:17:23,200 --> 00:17:25,650
si c'est une application web que vous utilisez qui fonctionne dans IE10,

309
00:17:25,650 --> 00:17:28,640
c'est quelque chose que vous pouvez faire comme une application Windows Store.

310
00:17:28,640 --> 00:17:33,100
Et c'est à peu près tout. Donc, si cela fonctionne dans IE10, il va travailler comme une application Windows Store.

311
00:17:33,100 --> 00:17:36,370
C'est sur la table comme quelque chose que vous pouvez utiliser.

312
00:17:36,370 --> 00:17:40,510
>> Il ya beaucoup de choses ici. Nous n'avons pas jusqu'à minuit, donc je ne peux pas tout revoir ici.

313
00:17:40,510 --> 00:17:44,060
Mais il ya des sites qui vous aideront à comprendre ce que ces choses peuvent faire,

314
00:17:44,060 --> 00:17:45,520
et je vais vous montrer l'un d'eux dans une seconde.

315
00:17:45,520 --> 00:17:48,410
Je voulais juste souligner quelques-unes des principales choses que vous pouvez regarder.

316
00:17:48,410 --> 00:17:51,560
Peut-être que vous avez déjà vu certains de ces derniers dans vos études,

317
00:17:51,560 --> 00:17:56,610
mais ceux-ci sont vraiment utiles, en particulier avec les applications Windows Store, du côté de la CSS.

318
00:17:56,610 --> 00:18:02,420
Donc être capable de faire des transformations et des transitions, fournir des mouvements dans l'animation -

319
00:18:02,420 --> 00:18:07,010
Ils font tous partie de CSS maintenant, et ils sont tous pris en charge par les navigateurs modernes,

320
00:18:07,010 --> 00:18:11,370
et IE10 et IE9 ont ajouté le support au fil du temps pour toutes ces choses.

321
00:18:11,370 --> 00:18:15,220
Et alors pourquoi écrire vous-même, pourquoi passer par tous les ennuis de faire ces choses à la main

322
00:18:15,220 --> 00:18:19,970
lorsque vous pouvez utiliser la transformée d'une simple CSS pour créer un effet 3D pour votre application?

323
00:18:19,970 --> 00:18:22,740
Grand. Voilà comment cela fonctionne.

324
00:18:22,740 --> 00:18:24,530
Je ne peux pas faire plus difficile que cela.

325
00:18:24,530 --> 00:18:28,330
Si vous savez comment le faire en CSS, vous savez comment le faire dans l'application Windows Store.

326
00:18:28,330 --> 00:18:32,080
>> Au-delà de ce que pour la mise en page, des choses comme même l'app store,

327
00:18:32,080 --> 00:18:35,350
mais aller au-delà, en regardant peut-être une application de nouvelles qui vous montrant articles

328
00:18:35,350 --> 00:18:40,160
ou des recettes ou des choses comme ça, ces autres types de fonctionnalités CSS sont vraiment utiles:

329
00:18:40,160 --> 00:18:45,610
Grille, Flexbox, Régions CSS est plus d'une assez nouvelle norme ainsi.

330
00:18:45,610 --> 00:18:51,190
Ces choses vont tous vous aider disposez contenu et des flux de contenus entre les sections,

331
00:18:51,190 --> 00:18:55,470
être capable de faire la pagination et la césure sans avoir à écrire les choses vous-même.

332
00:18:55,470 --> 00:18:57,500
Vous venez de dire, "S'il vous plaît ne le suit pour moi»,

333
00:18:57,500 --> 00:19:00,850
et que l'immobilier de l'écran est différent sur des machines différentes

334
00:19:00,850 --> 00:19:03,850
ou comme vous le verrez dans un instant, que vous prenez une demande

335
00:19:03,850 --> 00:19:07,920
pour avoir de plus petites quantités d'espace sur l'écran, ce n'est pas un problème pour le CSS.

336
00:19:07,920 --> 00:19:11,160
Il peut profiter de - parler We'Ll sur les requêtes des médias dans une seconde -

337
00:19:11,160 --> 00:19:15,880
il peut prendre soin des choses avec le repositionnement de votre contenu, coule contenu des régions

338
00:19:15,880 --> 00:19:21,240
seulement avec ces choses que vous avez peut-être déjà vu avec la technologie Web.

339
00:19:21,240 --> 00:19:25,470
>> Sur le côté HTML5, il ya aussi un tas de choses

340
00:19:25,470 --> 00:19:28,140
qui sera très utile pour vous avec des applications Windows Store.

341
00:19:28,140 --> 00:19:30,980
Encore une fois, nous ne serons pas passer par tout cela, mais ils sont juste ici.

342
00:19:30,980 --> 00:19:35,470
Donc, si vous avez besoin de l'utiliser, audio-vidéo, si vous voulez faire la validation de formulaires,

343
00:19:35,470 --> 00:19:40,570
géolocalisation, toutes les choses que vous pouvez faire en JavaScript avec JavaScript ou ECMAScript 5 5,

344
00:19:40,570 --> 00:19:44,070
IndexedDB pour le stockage local - ce sont toutes les options pour vous.

345
00:19:44,070 --> 00:19:49,300
Si vous êtes à la recherche d'une réponse, il suffit de regarder aux technologies existantes avec HTML5 et CSS

346
00:19:49,300 --> 00:19:53,880
et vous trouverez des réponses plus facile que d'avoir à rouler beaucoup de ce genre de choses vous-même.

347
00:19:53,880 --> 00:19:55,510
Permettez-moi de vous montrer un petit peu ici.

348
00:19:55,510 --> 00:19:57,920
J'ai un site, nous pouvons aller.

349
00:19:57,920 --> 00:20:01,590
Permettez-moi de quitter sur cette diapositive pendant une seconde.

350
00:20:01,590 --> 00:20:06,450
>> Si nous sortons de IETestDrive.com,

351
00:20:06,450 --> 00:20:08,960
Je ne vais pas faire beaucoup d'une démo ici.

352
00:20:08,960 --> 00:20:14,360
IETestDrive.com est vraiment de vous montrer beaucoup de ce qui est nouveau avec IE10,

353
00:20:14,360 --> 00:20:16,220
les choses que vous pouvez faire.

354
00:20:16,220 --> 00:20:19,130
Je trouve que c'est vraiment utile, car au lieu de lire à travers un tas de livres blancs,

355
00:20:19,130 --> 00:20:23,020
Regardons quelques démos, et que cela va vous aider à mettre sur votre propre radar personnel

356
00:20:23,020 --> 00:20:26,620
de savoir si une technologie est logique de même faire plus de recherche avec

357
00:20:26,620 --> 00:20:29,070
afin que vous compreniez, «Je vois ce que c'est pour."

358
00:20:29,070 --> 00:20:32,780
«Je comprends ce Demander animation image fait pour moi."

359
00:20:32,780 --> 00:20:36,900
«Je comprends comment je pourrais utiliser régions ou des filtres SVG."

360
00:20:36,900 --> 00:20:40,190
Vous les voyez en action, les voir sur un exemple ici,

361
00:20:40,190 --> 00:20:44,930
et de décider par vous-même si cela va vous être utile dans vos propres projets et au-delà

362
00:20:44,930 --> 00:20:47,840
que vous continuez à travailler avec la technologie Web.

363
00:20:47,840 --> 00:20:49,900
Ici, je voudrais juste vous encourager à jeter un oeil.

364
00:20:49,900 --> 00:20:52,880
Je ne pense pas que je passe beaucoup de temps en fait l'exécution de ces.

365
00:20:52,880 --> 00:20:56,030
Nous avons assez à montrer avec l'écriture de code.

366
00:20:56,030 --> 00:21:01,640
Vous verrez ici des choses des effets tactiles à des jeux basés sur le toucher de cette section,

367
00:21:01,640 --> 00:21:06,050
animation, animation de l'accélération matérielle très vite là-bas,

368
00:21:06,050 --> 00:21:11,230
certaines optimisations que vous verrez dans certains de ces échantillons ainsi,

369
00:21:11,230 --> 00:21:12,770
et il ya beaucoup, beaucoup plus.

370
00:21:12,770 --> 00:21:15,330
Si vous allez ici et ouvrez la carte du site,

371
00:21:15,330 --> 00:21:19,070
il ya juste un nombre ridicule d'échantillons ici.

372
00:21:19,070 --> 00:21:20,690
Vous pouvez les voir tous ici.

373
00:21:20,690 --> 00:21:22,900
Si vous êtes à la recherche de quelque chose ou vous avez entendu quelque chose

374
00:21:22,900 --> 00:21:25,850
et vous vous demandez peut-être ce serait quelque chose de cool à utiliser dans l'application,

375
00:21:25,850 --> 00:21:31,720
Essayez de regarder ici, et il ya probablement une bonne démo pour vous épargner un temps.

376
00:21:31,720 --> 00:21:35,980
>> D'accord? Une question pour autant pour les gens ici?

377
00:21:35,980 --> 00:21:39,620
Très bien. Nous allons poursuivre ici.

378
00:21:39,620 --> 00:21:41,920
Encore une fois, juste vérifier.

379
00:21:41,920 --> 00:21:45,450
Ils sont les standards du Web, alors allez à d'autres sites de démonstration que vous connaissez

380
00:21:45,450 --> 00:21:50,550
et de voir si ces technologies font sens pour ce que vous essayez de faire.

381
00:21:50,550 --> 00:21:53,190
>> Retour aux diapositives.

382
00:21:53,190 --> 00:22:00,290
Cela dit, vous vous déplacez d'un monde Web pour vraiment un monde d'application local installé,

383
00:22:00,290 --> 00:22:01,850
si il ya des choses à souligner ici.

384
00:22:01,850 --> 00:22:03,690
Tout d'abord, il n'y a pas de serveur Web en cause ici.

385
00:22:03,690 --> 00:22:06,120
Il n'y a pas d'Apache, il n'y a pas exécutant IIS ici

386
00:22:06,120 --> 00:22:10,170
servir des pages à un client distant, à un agent de navigateur distant.

387
00:22:10,170 --> 00:22:13,000
Dans ce cas, vraiment tout est emballé pour vous.

388
00:22:13,000 --> 00:22:16,630
Vous soumettez que votre application à la boutique, il obtient la certification,

389
00:22:16,630 --> 00:22:22,190
c'est dans le magasin, puis des milliers de gens va installer votre jeu ou votre application.

390
00:22:22,190 --> 00:22:24,780
Mais fondamentalement, ils sont tirant vers le bas au niveau local pour leur machine.

391
00:22:24,780 --> 00:22:29,080
Il n'y a pas besoin de sortir pour le Web plus, sauf si vous avez des appels qui ont besoin d'une API à distance,

392
00:22:29,080 --> 00:22:31,790
et c'est tout à fait normal et trop.

393
00:22:31,790 --> 00:22:35,330
Mais ils ne vont pas être dans ce mode où ils doivent aller demande une réponse d'un serveur

394
00:22:35,330 --> 00:22:37,910
pour obtenir la page suivante de leur contenu.

395
00:22:37,910 --> 00:22:41,380
Donc, cela étant dit, il ya quelques différences mineures de l'API. Ce sont incroyablement mineur.

396
00:22:41,380 --> 00:22:46,850
Ils sont peu susceptibles de vous frapper dans votre codage normal, mais ils sont au moins documentées.

397
00:22:46,850 --> 00:22:50,030
Ils genre de cas, il bordent.

398
00:22:50,030 --> 00:22:53,370
>> L'autre chose est intéressant de souligner les différences de fiducie.

399
00:22:53,370 --> 00:22:58,070
Je ne mentionne cela parce que je veux m'assurer que je l'ai dit il

400
00:22:58,070 --> 00:23:01,580
donc si vous avez plus tard, vous pensez, "Chris a dit quelque chose à ce sujet,

401
00:23:01,580 --> 00:23:04,890
"Alors peut-être, oui, d'accord," et puis vous retournez et vous trouverez de quoi il s'agissait.

402
00:23:04,890 --> 00:23:06,480
Contextes d'importance.

403
00:23:06,480 --> 00:23:11,450
Par défaut, nous essayons de protéger l'utilisateur contre les vecteurs d'attaque.

404
00:23:11,450 --> 00:23:13,400
Il ya certaines choses que vous pouvez faire par défaut

405
00:23:13,400 --> 00:23:16,130
et certaines choses que vous devez changer le contexte pour l'activer.

406
00:23:16,130 --> 00:23:19,860
Comme vous utilisez des bibliothèques là-bas - you've déjà travaillé avec jQuery,

407
00:23:19,860 --> 00:23:23,650
mais si vous regardez d'autres bibliothèques là-bas - vous utilisez peut-être certaines fonctionnalités

408
00:23:23,650 --> 00:23:28,000
ce genre de va au-delà l'usage local, ne interactions plus dynamiques

409
00:23:28,000 --> 00:23:30,360
demandes XHR, des choses comme ça.

410
00:23:30,360 --> 00:23:33,090
Parfois, vous trouverez peut-être ceux qui sont désactivées par défaut,

411
00:23:33,090 --> 00:23:37,790
et dans ce cas, il suffit de faire une recherche, chercher contexte local et web,

412
00:23:37,790 --> 00:23:39,560
et vous saurez comment résoudre ce problème.

413
00:23:39,560 --> 00:23:42,580
Assurez-vous que vous saviez à ce sujet que vous commencez à utiliser d'autres cadres,

414
00:23:42,580 --> 00:23:45,720
qui, je dois dire, vous êtes parfaitement capable de faire.

415
00:23:45,720 --> 00:23:49,290
Donc, si vous trouvez un autre cadre - parler We'Ll à ce sujet dans une seconde -

416
00:23:49,290 --> 00:23:54,000
pour le jeu et que vous voulez l'utiliser, vous souhaitez utiliser certaines bibliothèques de contrôle qui sont là

417
00:23:54,000 --> 00:23:57,990
et vous ne voulez pas écrire ce genre de choses vous-même - c'est une bonne idée, non? -

418
00:23:57,990 --> 00:23:59,560
vous ne pouvez absolument utiliser ce genre de choses.

419
00:23:59,560 --> 00:24:03,660
Il n'y a rien qui vous retient d'utiliser n'importe quel type de bibliothèque qui est basé sur JavaScript,

420
00:24:03,660 --> 00:24:05,380
CSS, HTML5.

421
00:24:05,380 --> 00:24:09,740
Encore une fois, si c'est quelque chose que vous pouvez faire dans IE10, qui est un diable de beaucoup ces jours-ci,

422
00:24:09,740 --> 00:24:11,220
vous pouvez le faire.

423
00:24:11,220 --> 00:24:14,800
Tirez dans votre application, référence bibliothèque JavaScript, et l'utiliser dans votre application,

424
00:24:14,800 --> 00:24:19,880
juste garder à l'esprit que vous pourriez frapper un contexte de sécurité de temps en temps - pas très souvent.

425
00:24:19,880 --> 00:24:24,150
>> Et puis, les fonctionnalités, nous allons passer en revue quelques-uns plus de ceux que nous allons.

426
00:24:24,150 --> 00:24:27,500
L'UX vous sorte de s'habituer à que vous voyez de plus en plus d'applications

427
00:24:27,500 --> 00:24:29,250
du Windows Store.

428
00:24:29,250 --> 00:24:33,870
Vous obtenez une idée de comment ils fonctionnent et comment l'esthétique de conception a tendance à travailler

429
00:24:33,870 --> 00:24:37,720
entre différentes applications et ce que les gens seront utilisés pour l'expérience.

430
00:24:37,720 --> 00:24:39,660
C'est vraiment le plus important.

431
00:24:39,660 --> 00:24:42,460
Assurez-vous que quand ils tirent de votre application, ils n'ont pas besoin de lire un manuel,

432
00:24:42,460 --> 00:24:44,300
où ils ne le font jamais, par la manière.

433
00:24:44,300 --> 00:24:46,650
Ils doivent simplement être en mesure de commencer à jouer avec votre demande

434
00:24:46,650 --> 00:24:49,450
et le découvrir sans trop de difficulté.

435
00:24:49,450 --> 00:24:52,660
En collant et en adhérant à un grand nombre de ces pratiques,

436
00:24:52,660 --> 00:24:57,640
vous allez faire vos utilisateurs une grande faveur, ce que plus facile.

437
00:24:57,640 --> 00:25:01,810
>> Très bien. Une dernière chose sur le côté de l'API et puis nous passerons en fait l'écriture de code.

438
00:25:01,810 --> 00:25:05,660
WinJS est cette chose je l'ai dit très brièvement cette diapositive complexe

439
00:25:05,660 --> 00:25:08,850
avec tous ces différents choix que vous avez pour faire des applications.

440
00:25:08,850 --> 00:25:10,890
WinJS, vous pouvez penser que c'est un copain.

441
00:25:10,890 --> 00:25:13,680
C'est à votre ami de vous aider à écrire des choses plus rapidement.

442
00:25:13,680 --> 00:25:18,820
C'est juste JavaScript et CSS. Vous n'avez pas à l'utiliser. Vous pouvez l'utiliser.

443
00:25:18,820 --> 00:25:22,180
Si vous allez à l'appel pour des fonctionnalités de Windows, vous finirez par utiliser,

444
00:25:22,180 --> 00:25:27,210
mais si il ya des choses comme des modèles de conception ou de contrôles que vous ne voulez vraiment pas à utiliser,

445
00:25:27,210 --> 00:25:29,090
vous voulez utiliser autre chose, c'est à vous.

446
00:25:29,090 --> 00:25:32,580
Décidez ce que vous voulez utiliser et les styles que vous souhaitez utiliser.

447
00:25:32,580 --> 00:25:37,250
Les caractéristiques de l'espace de nommage et classe génération - à vous.

448
00:25:37,250 --> 00:25:41,650
Si vous préférez l'un ou l'autre, il est tout à votre choix. C'est encore le JavaScript et CSS.

449
00:25:41,650 --> 00:25:43,860
Mais ça va vous aider à faire beaucoup de choses.

450
00:25:43,860 --> 00:25:47,780
Par exemple, voici un sous-ensemble de ce qu'il peut faire,

451
00:25:47,780 --> 00:25:50,790
des choses comme aider la programmation asynchrone avec des promesses.

452
00:25:50,790 --> 00:25:54,000
Ceux d'entre vous ont entendu ou ont travaillé avec Node.js?

453
00:25:54,000 --> 00:25:59,520
C'est un modèle commun de travailler avec la programmation asynchrone.

454
00:25:59,520 --> 00:26:02,370
Donc, fondamentalement, ce que vous dites, c'est: «Allez faire quelque chose,

455
00:26:02,370 --> 00:26:05,790
"Et vous allez me donner une promesse que vous reviendrez me voir quand vous avez terminé."

456
00:26:05,790 --> 00:26:08,400
C'est essentiellement ce qui se passe.

457
00:26:08,400 --> 00:26:12,400
Donc, vous n'avez pas de figer votre application lorsque l'utilisateur est en cours et le choix d'un fichier

458
00:26:12,400 --> 00:26:15,810
ou quelque chose se coulait à partir du Web.

459
00:26:15,810 --> 00:26:17,210
L'interface utilisateur reste sensible.

460
00:26:17,210 --> 00:26:19,410
Et vous pouvez le faire en utilisant la programmation asynchrone.

461
00:26:19,410 --> 00:26:23,620
Il semble ridiculement complexe, mais il est vraiment facile parce que vous utilisez promesses

462
00:26:23,620 --> 00:26:27,900
et vous venez de dire: «Allez faire cela et lorsque vous avez terminé, rappeler à cette méthode."

463
00:26:27,900 --> 00:26:30,270
C'est à peu près tout. C'est tout intégré à WinJS.

464
00:26:30,270 --> 00:26:35,120
Il va rendre beaucoup plus facile d'écrire des applications très flexibles et puissants.

465
00:26:35,120 --> 00:26:37,870
>> Vous pouvez voir le reste ici, beaucoup d'animations.

466
00:26:37,870 --> 00:26:41,240
Probablement l'une des choses les plus importantes sur cette diapositive sont des contrôles.

467
00:26:41,240 --> 00:26:44,680
Je pense que j'ai un tout - oui, je le fais.

468
00:26:44,680 --> 00:26:48,900
Voici un exemple de quelques-unes des commandes que vous pouvez utiliser dans vos applications.

469
00:26:48,900 --> 00:26:51,060
C'est tout droit vers le haut de WinJS.

470
00:26:51,060 --> 00:26:53,430
Vous n'êtes pas en train d'écrire ces vous-mêmes,

471
00:26:53,430 --> 00:26:55,990
vous venez de dire, "Voici comment je veux composer ma demande."

472
00:26:55,990 --> 00:26:59,420
«Je vais utiliser une vue bascule donc je peux aller entre les différentes photos."

473
00:26:59,420 --> 00:27:03,380
Je ne vous ai pas montré zoom sémantique. Je vais vous montrer que, dans un deuxième.

474
00:27:03,380 --> 00:27:05,700
ListViews. Il ya GridViews.

475
00:27:05,700 --> 00:27:08,680
Vous avez déjà vu une grille dans le cadre de l'application de magasin,

476
00:27:08,680 --> 00:27:12,170
afin d'être en mesure d'utiliser des blocs de contenu et le défilement à travers cela.

477
00:27:12,170 --> 00:27:15,660
Menus volants vous verrez de temps en temps.

478
00:27:15,660 --> 00:27:19,090
La barre d'application je vous ai montré avec cette application de peinture fraîche ainsi,

479
00:27:19,090 --> 00:27:22,190
si vous avez vu comment vous pouvez personnaliser que par la mise boutons sur elle

480
00:27:22,190 --> 00:27:26,360
et ayant que cacher quand vous ne vous souciez pas de l'utiliser.

481
00:27:26,360 --> 00:27:28,120
C'est vraiment totalement à vous d'utiliser.

482
00:27:28,120 --> 00:27:30,210
Ce sont toutes les commandes qui font partie de WinJS.

483
00:27:30,210 --> 00:27:33,640
Je vais vous montrer comment faire ces dans une seconde, mais il ya plus de tout cela,

484
00:27:33,640 --> 00:27:37,060
et l'essentiel est de les utiliser si vous voulez, de gagner du temps.

485
00:27:37,060 --> 00:27:40,830
>> Si vous avez d'autres bibliothèques de contrôle que vous souhaitez utiliser, c'est parfaitement bien aussi.

486
00:27:40,830 --> 00:27:46,300
Des choses comme jQuery UI font beaucoup de ce genre d'idée ainsi,

487
00:27:46,300 --> 00:27:51,280
fournir davantage de contrôles qui s'étendent ce que vous pouvez faire en HTML et JavaScript.

488
00:27:52,690 --> 00:27:55,680
Débutons po je l'ai déjà dit. Utilisez ce que vous souhaitez.

489
00:27:55,680 --> 00:27:59,680
Il suffit de garder à l'esprit que vous pourriez rencontrer quelques problèmes de contexte.

490
00:27:59,680 --> 00:28:03,380
Mais vous pouvez certainement mélanger et assortir n'importe quel type de bibliothèques que vous êtes à l'aise avec,

491
00:28:03,380 --> 00:28:06,770
vous voulez apprendre, vous souhaitez utiliser, pour vous faire gagner du temps.

492
00:28:06,770 --> 00:28:09,850
>> Parlons des outils juste une seconde.

493
00:28:09,850 --> 00:28:12,400
Vous pouvez obtenir ce que vous avez besoin pour commencer à travailler avec les applications Windows Store.

494
00:28:12,400 --> 00:28:17,360
Si je vais revenir en arrière, j'ai trop de choses ici.

495
00:28:17,360 --> 00:28:21,770
Si vous allez à cette page, qui est dev.windows.com,

496
00:28:21,770 --> 00:28:23,300
vous pouvez télécharger tout ce dont vous avez besoin.

497
00:28:23,300 --> 00:28:28,170
En tant qu'étudiants, vous avez accès à plus que le grand public ne,

498
00:28:28,170 --> 00:28:30,670
de sorte que vous pouvez obtenir les versions haut de gamme de Visual Studio.

499
00:28:30,670 --> 00:28:34,090
Edwin dit que vous pouvez déjà obtenir Windows ainsi.

500
00:28:34,090 --> 00:28:36,790
Mais, en général, pour tous les développeurs, vous pouvez aller sur ce site

501
00:28:36,790 --> 00:28:40,380
et télécharger tout ce que vous devez faire une demande, et c'est gratuit.

502
00:28:40,380 --> 00:28:42,460
Donc, il ya une version gratuite de Visual Studio,

503
00:28:42,460 --> 00:28:44,450
il existe des outils qui vont installer à côté de cela -

504
00:28:44,450 --> 00:28:47,240
tout ce que vous avez besoin pour créer et tester votre application.

505
00:28:47,240 --> 00:28:50,130
C'est seulement quand vous allez publier votre application à la boutique

506
00:28:50,130 --> 00:28:52,470
que vous allez avoir besoin d'un compte développeur.

507
00:28:52,470 --> 00:28:56,100
C'est ce que je crois trop est gratuit. Est-ce gratuit pour les étudiants ainsi? >> [Guarin] Lequel?

508
00:28:56,100 --> 00:28:57,970
Le compte de développeur, la soumission réelle. >> [Guarin] Oui.

509
00:28:57,970 --> 00:28:59,580
C'est plus de bonnes nouvelles.

510
00:28:59,580 --> 00:29:00,840
Vous allez regarder cela.

511
00:29:00,840 --> 00:29:03,840
Il va dire à un individu par défaut, il est de 49 $.

512
00:29:03,840 --> 00:29:06,140
Mais ne vous inscrivez pas pour que comme un étudiant.

513
00:29:06,140 --> 00:29:10,250
Nous allons vous obtenir des informations via les programmes que vous pouvez obtenir un compte gratuitement,

514
00:29:10,250 --> 00:29:13,980
et qui vous permettra ensuite de soumettre vos applications jusqu'à la boutique,

515
00:29:13,980 --> 00:29:17,370
autant que vous voulez, et tout cela bonté bientôt suivre.

516
00:29:17,370 --> 00:29:19,710
C'est donc dev.windows.com.

517
00:29:19,710 --> 00:29:22,170
Vous pouvez télécharger les outils que vous pourriez avoir besoin d'ici.

518
00:29:22,170 --> 00:29:25,310
Et si vous le souhaitez, vous pouvez obtenir une version d'essai de Windows ici,

519
00:29:25,310 --> 00:29:27,160
mais encore une fois, vous n'aurez pas besoin de.

520
00:29:27,160 --> 00:29:32,880
>> L'autre site - permettez-moi de celui-ci pour vous rapidement - est design.windows.com.

521
00:29:32,880 --> 00:29:34,770
C'était dev.windows.com.

522
00:29:34,770 --> 00:29:37,770
Design.windows.com, vous pouvez deviner ce que c'est pour.

523
00:29:37,770 --> 00:29:40,380
Il s'agit en fait d'un site assez sympa. Il ya beaucoup de bonnes informations ici.

524
00:29:40,380 --> 00:29:41,770
Vous pouvez travailler à travers elle.

525
00:29:41,770 --> 00:29:43,960
Il va vous donner quelques conseils sur certaines choses

526
00:29:43,960 --> 00:29:46,760
que peut-être vous n'avez pas pensé avant ou dû faire face à avant,

527
00:29:46,760 --> 00:29:50,780
comme la conception pour le toucher, la conception pour différents facteurs de forme,

528
00:29:50,780 --> 00:29:55,310
conception pour les capacités de Windows 8, les choses que j'ai mentionnées avant

529
00:29:55,310 --> 00:29:58,740
comme la recherche et le partage, des choses que je n'ai pas encore parlé.

530
00:29:58,740 --> 00:30:05,570
Ils sont tous énumérés ici, et c'est un très bon jeu de pages de fichiers utiles

531
00:30:05,570 --> 00:30:08,670
qui vous aidera à comprendre comment faire un certain type d'application,

532
00:30:08,670 --> 00:30:14,250
comment faire interaction, la façon de traiter avec l'interface utilisateur et UX de votre demande.

533
00:30:14,250 --> 00:30:18,630
Je vous recommande de jeter un oeil à cela, surtout si vous êtes à un moment donné

534
00:30:18,630 --> 00:30:22,960
l'espoir de publier une application à la boutique.

535
00:30:22,960 --> 00:30:25,250
Vous allez vouloir savoir comment faire une bonne application

536
00:30:25,250 --> 00:30:28,300
parce que je l'ai déjà dit, si vous ne le faites pas, il ya ces avis à nouveau.

537
00:30:28,300 --> 00:30:29,930
Les gens vont être malheureux.

538
00:30:29,930 --> 00:30:32,960
Ils ne seront pas en mesure de trouver des choses qu'ils attendent dans les bons endroits.

539
00:30:32,960 --> 00:30:36,590
Personne ne veut que cela se produise pour vous.

540
00:30:36,590 --> 00:30:39,220
>> Aller de l'avant ici, permettez-moi de conclure que vers le bas.

541
00:30:39,220 --> 00:30:43,700
Maintenant que vous savez où trouver les choses, je vais vous montrer comment commencer à utiliser effectivement des choses.

542
00:30:43,700 --> 00:30:48,520
Pour commencer, je vais effectivement vous montrer ici un exemple d'applications de bureau sur mon écran de démarrage.

543
00:30:48,520 --> 00:30:53,600
Ici vous pouvez voir Visual Studio, vous pouvez voir Blend et d'autres outils de développement que j'ai.

544
00:30:53,600 --> 00:30:55,890
Ils ont un carreau légèrement différente.

545
00:30:55,890 --> 00:30:57,930
C'est parce qu'ils sont des applications de bureau,

546
00:30:57,930 --> 00:31:00,960
et dans ces cas, ils vont tous à lancer de nouveau à mon bureau

547
00:31:00,960 --> 00:31:05,350
vraiment juste que les applications que vous êtes habitué.

548
00:31:05,350 --> 00:31:06,960
Donc, l'expérience Windows, c'est la même chose.

549
00:31:06,960 --> 00:31:12,940
Ils ne sont pas, par exemple, comme armé! ou ces choses. Permettez-moi de lancer l'un rapidement.

550
00:31:12,940 --> 00:31:14,340
En fait, voici une question intéressante.

551
00:31:14,340 --> 00:31:19,210
Cela a été développé par des étudiants travaillant en partenariat à NERD.

552
00:31:19,210 --> 00:31:23,430
Application plein écran, ces sortes d'expériences ici.

553
00:31:23,430 --> 00:31:26,290
Oh, écrans coupées belles et toutes sortes de choses amusantes.

554
00:31:26,290 --> 00:31:34,330
Ils ont développé ce produit. Nous pourrions ainsi montrer le tout pendant que nous y sommes.

555
00:31:37,510 --> 00:31:41,070
En fait, j'ai travaillé avec eux un peu, leur a donné quelques conseils sur les choses

556
00:31:41,070 --> 00:31:44,160
parce qu'ils faisaient JavaScript pour leur application.

557
00:31:44,160 --> 00:31:46,460
S'il vous plaît, je ne suis pas prendre le crédit pour leur travail, ils ont fait tout le travail.

558
00:31:46,460 --> 00:31:48,990
Je les ai juste donné un petit conseil ici et là,

559
00:31:48,990 --> 00:31:52,400
mais ils ont fait de grandes choses en utilisant une extrémité avant JavaScript

560
00:31:52,400 --> 00:31:56,920
et attachant dans certains moteurs de physique et de choses à faire beaucoup de ce travail.

561
00:32:00,120 --> 00:32:03,360
Allez. Voyons voir si cela fonctionne.

562
00:32:03,360 --> 00:32:07,010
Wow, il fonctionnait toujours. Bon, bon. Mais vous avez l'idée.

563
00:32:07,010 --> 00:32:09,350
Une application en plein écran, une très bonne expérience.

564
00:32:09,350 --> 00:32:14,250
Cette stratégie contribue non seulement ma souris et stylo si j'ai des choses comme cela, mais aussi toucher.

565
00:32:14,250 --> 00:32:19,420
Si j'avais un écran tactile, je ne pouvais tirer sur elle et continuer à travailler avec cela.

566
00:32:19,420 --> 00:32:21,440
>> Une chose que je n'ai pas montré, et la raison pour laquelle je soulève cette question

567
00:32:21,440 --> 00:32:23,840
c'est que je voulais avoir une autre application pour vous montrer ce que vous pouvez faire,

568
00:32:23,840 --> 00:32:29,480
vous pouvez effectivement prendre des applications sous Windows et faites-les glisser sur le côté de l'écran.

569
00:32:29,480 --> 00:32:33,070
C'est ce qu'on appelle claquer une application.

570
00:32:33,070 --> 00:32:37,800
Dans ce cas, j'ai pris Inkarus et je l'ai ajouté sur le côté ici.

571
00:32:37,800 --> 00:32:42,990
Il est maintenant en vue Snap, et qui me permet de faire autre chose pendant que sa demande est là.

572
00:32:42,990 --> 00:32:46,210
La plupart des jeux que vous trouverez seront tout simplement une pause.

573
00:32:46,210 --> 00:32:51,090
C'est normalement une chose décente à faire à moins que votre jeu peut en quelque sorte réduire

574
00:32:51,090 --> 00:32:54,210
à ce petit d'une résolution, comme peut-être une sorte de jeux de société

575
00:32:54,210 --> 00:32:55,620
ou des choses comme ça à l'occasion.

576
00:32:55,620 --> 00:32:58,570
Mais en général, la meilleure chose à faire et la chose la plus appropriée de le faire pour les jeux

577
00:32:58,570 --> 00:33:00,620
est de mettre en pause l'application.

578
00:33:00,620 --> 00:33:09,440
Pour des applications telles que de nouvelles applications, si je lance celui-ci et je le casser,

579
00:33:09,440 --> 00:33:16,170
vous verrez qu'il change effectivement de manière significative dans la façon dont il a la présentation des données pour vous.

580
00:33:16,170 --> 00:33:20,070
Ici, il est vous montrant dans une casserole vraiment plus verticale que de l'information,

581
00:33:20,070 --> 00:33:23,340
mais je peux encore utiliser absolument l'application.

582
00:33:23,340 --> 00:33:25,640
Donc, il est toujours très utile.

583
00:33:25,640 --> 00:33:29,870
Le fait que ce soit dans une vue plus petite ne m'empêche pas d'utiliser cette application. Alors, pensez à ce sujet.

584
00:33:29,870 --> 00:33:32,090
C'est quelque chose que vous devez avoir vos applications font dans une certaine mesure,

585
00:33:32,090 --> 00:33:35,370
mais c'est à vous de déterminer comment fonctionnelle vos applications doivent être

586
00:33:35,370 --> 00:33:39,080
dans ce genre de milieu plus petit.

587
00:33:39,080 --> 00:33:44,780
Permettez-moi de conclure que l'une vers le bas et de revenir dans où nous étions ici.

588
00:33:44,780 --> 00:33:48,110
>> Edwin, vous avez ajouté une photo de moi déjà? >> [Guarin] Ouais. >> [Bowen] Regardez ce.

589
00:33:48,110 --> 00:33:51,510
Vous voyez ça? Edwin a ajouté une photo. [Rires]

590
00:33:51,510 --> 00:33:54,410
>> Revenons ici dans Visual Studio. Permettez-moi de lance pour vous.

591
00:33:54,410 --> 00:33:58,170
J'aurais pu cliqué sur le carreau sur cet écran de démarrage.

592
00:33:58,170 --> 00:34:02,630
Il m'a ramené en mode Desktop, et il est le lancement de l'application de bureau de Visual Studio.

593
00:34:02,630 --> 00:34:06,790
C'est le Windows que vous connaissez déjà.

594
00:34:06,790 --> 00:34:09,100
Je peux aller de l'avant et créer un projet ici.

595
00:34:09,100 --> 00:34:11,159
Nous allons nous concentrer à nouveau sur le JavaScript, HTML.

596
00:34:11,159 --> 00:34:16,510
Je vais sortir et sélectionnez ici sous le JavaScript Windows Store.

597
00:34:16,510 --> 00:34:19,010
Il ya un certain nombre de modèles que vous pouvez utiliser.

598
00:34:19,010 --> 00:34:21,710
Pour la productivité, je vous recommande de jeter un oeil à certaines de ces autres ici

599
00:34:21,710 --> 00:34:23,489
comme la grille et le Split.

600
00:34:23,489 --> 00:34:25,270
Ils sont vraiment utile si vous faites une demande

601
00:34:25,270 --> 00:34:28,960
cela va avoir ce genre de conception et de navigation. Vous verrez ces beaucoup.

602
00:34:28,960 --> 00:34:33,070
Celui que je viens de vous montrer était en fait une instance de l'application de la grille.

603
00:34:33,070 --> 00:34:36,880
Donc, si vous pensez que vous allez faire une application de nouvelles ou un lecteur de flux RSS

604
00:34:36,880 --> 00:34:43,120
ou quelque chose comme ça qui traite de plusieurs rubriques pour lesquelles vous souhaitez montrer le détail,

605
00:34:43,120 --> 00:34:45,989
penser à utiliser l'un de ces modèles pour démarrer rapidement

606
00:34:45,989 --> 00:34:48,380
et la personnalisation à partir de là.

607
00:34:48,380 --> 00:34:50,120
Mais juste pour que je puisse vous montrer toutes les pièces mobiles ici

608
00:34:50,120 --> 00:34:56,120
Je vais créer l'application vide, puis nous allons aller un peu plus loin dans les détails.

609
00:34:56,120 --> 00:34:58,690
Je fais juste que l'application vide ici.

610
00:34:58,690 --> 00:35:01,270
Il va créer l'ensemble du projet pour moi.

611
00:35:01,270 --> 00:35:03,290
Je vais ouvrir les choses que je veux vous montrer par défaut.

612
00:35:03,290 --> 00:35:08,550
Permettez-moi simplement un zoom avant un peu pour vous montrer ce qui a créé pour nous ici.

613
00:35:08,550 --> 00:35:11,350
Les choses que vous allez regarder en premier sont tous par défaut nommée.

614
00:35:11,350 --> 00:35:15,970
Donc, vous allez chercher default.html, default.js, et default.css.

615
00:35:15,970 --> 00:35:19,590
L'autre chose à remarquer est que nous avons déjà une référence à ce que j'ai dit avant.

616
00:35:19,590 --> 00:35:24,530
C'est WinJS. Personne ne demande réellement ce long nom ici.

617
00:35:24,530 --> 00:35:27,710
Il est WinJS, la bibliothèque Windows pour JavaScript.

618
00:35:27,710 --> 00:35:29,530
Si vous l'ouvrez, vous pouvez le voir, c'est tout ici.

619
00:35:29,530 --> 00:35:31,820
Il ya différents fichiers CSS, il ya JavaScript.

620
00:35:31,820 --> 00:35:33,520
Il est là pour vous aider.

621
00:35:33,520 --> 00:35:37,190
C'est vraiment là pour fournir des contrôles et des styles et des choses que vous ne pouvez utiliser automatiquement.

622
00:35:37,190 --> 00:35:41,240
Mais encore une fois, si il ya des choses que vous souhaitez utiliser à la place en termes de style et d'autres contrôles,

623
00:35:41,240 --> 00:35:45,600
il est entièrement à vous. Je vais vous montrer comment utiliser un couple de ces choses dès maintenant.

624
00:35:45,600 --> 00:35:51,020
>> Retour sur sur notre gauche, laissez-moi vous montrer la page HTML par défaut.

625
00:35:51,020 --> 00:35:54,490
Vous avez déjà vu les trucs WinJS, et c'est vraiment tout ce qui se passe là-bas

626
00:35:54,490 --> 00:35:59,930
avec ces lignes du milieu de balisage, le simple fait que dans le CSS par défaut

627
00:35:59,930 --> 00:36:02,370
et apportant un couple de fichiers JavaScript à partir WinJS.

628
00:36:02,370 --> 00:36:06,400
Vous n'avez pas besoin d'être maître de ce qui se passe à l'intérieur de ces fichiers.

629
00:36:06,400 --> 00:36:10,110
Il est assez intéressant de jeter un oeil à leur type de revoir ce qui se passe là-bas

630
00:36:10,110 --> 00:36:14,410
parce qu'il ya des techniques intermédiaires et avancés très intéressantes se passent là-bas,

631
00:36:14,410 --> 00:36:18,100
mais la bonne chose est que les développeurs, vous pouvez simplement profiter d'entre eux, il suffit d'utiliser les

632
00:36:18,100 --> 00:36:19,510
et pas vraiment à s'inquiéter à ce sujet.

633
00:36:19,510 --> 00:36:21,960
Vous pouvez toujours conduire une voiture sans avoir à savoir comment il fonctionne, non?

634
00:36:21,960 --> 00:36:24,180
Voilà le genre de chose qui se passe ici.

635
00:36:24,180 --> 00:36:26,930
Il ya des contrôles et des styles et des choses que vous ne pouvez aller de l'avant et à l'utilisation

636
00:36:26,930 --> 00:36:31,460
et le code que vous pouvez utiliser dans une seconde sans avoir à connaître ce qu'il ya dedans.

637
00:36:31,460 --> 00:36:33,200
Voici vos propres fichiers.

638
00:36:33,200 --> 00:36:35,860
Ce sont vos endroits que vous pouvez modifier votre propre CSS

639
00:36:35,860 --> 00:36:38,400
et votre propre JavaScript afin de faire bouger les choses.

640
00:36:38,400 --> 00:36:43,300
Vous serez en ajoutant certainement d'autres fichiers JavaScript et peut-être d'autres fichiers CSS

641
00:36:43,300 --> 00:36:47,480
que votre projet se développe, mais c'est vraiment juste un point de départ.

642
00:36:47,480 --> 00:36:52,570
Voici le Bonjour, équivalent mondial de HTML, de sorte que nous sommes de retour dans la balise body.

643
00:36:52,570 --> 00:36:55,990
Au sommet, par la manière, c'est le doctype HTML5,

644
00:36:55,990 --> 00:37:00,060
si vous reconnaissez que de ce que vous avez travaillé.

645
00:37:00,060 --> 00:37:04,600
Il ya plein IntelliSense ici aussi, donc si vous faites des choses comme le type dans une balise vidéo

646
00:37:04,600 --> 00:37:07,340
et développez, vous avez sans doute appris sur le fait

647
00:37:07,340 --> 00:37:12,760
que vous devez faire de l'encodage de repli pour les balises vidéo en HTML5 - ou peut-être vous avez -

648
00:37:12,760 --> 00:37:17,490
de veiller à ce que les différents navigateurs ont le soutien de votre vidéo.

649
00:37:17,490 --> 00:37:22,610
Nous avons ce genre de choses dans HTML, JavaScript travers, à travers CSS.

650
00:37:22,610 --> 00:37:26,020
Qui est construit, et je vous montrerai CSS dans une seconde.

651
00:37:26,020 --> 00:37:29,430
Ici, vous pouvez aller de l'avant et commencer à modifier le code, le balisage.

652
00:37:29,430 --> 00:37:33,700
En fait, avant que je change quelque chose, je vais courir ce et vous montrer ce que vous obtenez.

653
00:37:33,700 --> 00:37:35,700
Vous allez obtenir un écran d'accueil que vous pouvez personnaliser

654
00:37:35,700 --> 00:37:40,940
et puis vous obtenez la Bonjour, l'expérience du monde ici. C'est fantastique, non?

655
00:37:40,940 --> 00:37:42,640
Allez-y et navire, non?

656
00:37:42,640 --> 00:37:45,970
Contenu va ici. C'est l'élément de base.

657
00:37:45,970 --> 00:37:48,740
Il ne peut que s'améliorer à partir de là.

658
00:37:48,740 --> 00:37:51,300
Nous irons plus loin en ajoutant quelques trucs.

659
00:37:51,300 --> 00:37:53,470
J'ai un peu de balisage Je vais copier ici

660
00:37:53,470 --> 00:37:55,740
juste pour que vous n'avez pas à me regarder taper.

661
00:37:55,740 --> 00:38:02,620
Permettez-moi de faire apparaître la boîte à outils, et je frapperai ce parce que je vais faire à quelques reprises.

662
00:38:02,620 --> 00:38:05,650
Boîte à outils, si vous n'avez pas vu Visual Studio, c'est là que vous allez trouver un tas de contrôles.

663
00:38:05,650 --> 00:38:09,050
Vous pouvez aussi mettre des extraits de code dans ce que vous pouvez réutiliser.

664
00:38:09,050 --> 00:38:16,360
Ici, je vais juste pop dans un autre HTML, rien de très avancé du tout ici.

665
00:38:16,360 --> 00:38:20,170
C'est juste HTML de base en disant que j'ai une entrée où je peux taper,

666
00:38:20,170 --> 00:38:23,860
J'ai un bouton où je peux présenter, puis-je avoir un div qui est essentiellement un espace réservé

667
00:38:23,860 --> 00:38:27,360
que je peux utiliser pour la sortie du "Bonjour, vous tapez cela."

668
00:38:27,360 --> 00:38:32,780
C'est l'introduction à l'exemple HTML.

669
00:38:32,780 --> 00:38:39,340
Si je cours, nous obtenons automatiquement le code HTML, mais nous avons également obtenir automatiquement style.

670
00:38:39,340 --> 00:38:42,270
C'est l'une des choses importantes de WinJS.

671
00:38:42,270 --> 00:38:47,250
Il va vous donner par défaut un certain look qui est vraiment conforme

672
00:38:47,250 --> 00:38:50,520
avec le reste de ce que Windows 8 fait.

673
00:38:50,520 --> 00:38:52,110
Ici vous voyez les choses comme le bouton.

674
00:38:52,110 --> 00:38:55,890
Le bouton par défaut dans HTML n'a pas l'air comme ça, mais il le fait ici

675
00:38:55,890 --> 00:39:00,880
car il se fait que le droit de CSS à partir de ce fichier CSS dans WinJS.

676
00:39:00,880 --> 00:39:04,680
Si vous voulez utiliser autre chose, si vous voulez changer cela, tout à fait bien,

677
00:39:04,680 --> 00:39:06,790
aller de l'avant et faire ce que vous souhaitez. Mais c'est la valeur par défaut.

678
00:39:06,790 --> 00:39:09,610
Ça va être plus familier pour les utilisateurs.

679
00:39:09,610 --> 00:39:13,510
Et bien sûr, ce ne sera pas cela parce que je n'ai pas fait câbler tout type de code

680
00:39:13,510 --> 00:39:16,630
pour répondre à cette question. C'était juste le code HTML.

681
00:39:16,630 --> 00:39:20,630
Donc, je peux me débarrasser de cela, et nous allons revenir dans notre application.

682
00:39:20,630 --> 00:39:25,310
>> Permettez-moi de passer à nos default.js.

683
00:39:25,310 --> 00:39:29,030
Cela semble assez complexe, mais il est juste de faire quelques choses pour vous.

684
00:39:29,030 --> 00:39:33,120
C'est-partout. Ça va être la même dans tous vos projets.

685
00:39:33,120 --> 00:39:36,620
La seule chose que ce fait est juste genre de demander: «Comment ai-je ici?"

686
00:39:36,620 --> 00:39:39,090
et en disant: «Est-ce que vous lancez cette application pour la première fois?"

687
00:39:39,090 --> 00:39:42,640
"Est-ce que vous reprenez l'application de l'avoir suspendu?"

688
00:39:42,640 --> 00:39:44,510
Un couple de choses comme ça.

689
00:39:44,510 --> 00:39:50,300
Vraiment, nous nous concentrons sur ce fichier ici est à peu près ici.

690
00:39:50,300 --> 00:39:54,490
À ce stade, cette seule ligne de code est assez importante.

691
00:39:54,490 --> 00:39:57,070
Il va vraiment aller chercher à travers tout le balisage,

692
00:39:57,070 --> 00:40:01,640
et il va trouver des choses que vous avez demandé à avoir tourné dans les contrôles,

693
00:40:01,640 --> 00:40:07,220
contrôles plus profondes comme un contrôle de notation, comme une vue de grille, comme le menu contextuel

694
00:40:07,220 --> 00:40:09,570
et ces autres choses que je vous ai montré sur cette diapositive avant.

695
00:40:09,570 --> 00:40:12,550
Ils ne sont pas les contrôles HTML indigènes.

696
00:40:12,550 --> 00:40:17,860
Vous n'avez tout simplement pas dire déroulant comme un élément et le faire savoir quoi faire.

697
00:40:17,860 --> 00:40:22,120
Ce que nous faisons est la même chose qui se passe dans d'autres types de cadres de contrôle.

698
00:40:22,120 --> 00:40:26,200
jQuery UI fait le même genre d'approche générale.

699
00:40:26,200 --> 00:40:30,800
Vous utilisez marques dans votre code HTML, puis un peu de JavaScript vient par la suite et dit,

700
00:40:30,800 --> 00:40:35,900
"Oh, je sais ce que c'est. Cela demander ce pour être transformé en ce genre de choses»,

701
00:40:35,900 --> 00:40:39,850
qui est autre HTML plus expressif de faire comme un contrôle des notes,

702
00:40:39,850 --> 00:40:41,790
qui est ce que je vais vous montrer en ce moment.

703
00:40:41,790 --> 00:40:46,140
Cette ligne de code est une promesse qui a dit: «Quand cette promesse est remplie,

704
00:40:46,140 --> 00:40:49,090
"Tout ce que vous avez demandé a alors été créé."

705
00:40:49,090 --> 00:40:52,780
Et c'est tout. Il semble un peu complexe, mais c'est vraiment la même dans chaque projet.

706
00:40:52,780 --> 00:40:56,690
Ici c'est là que vous pouvez commencer à ajouter à tout ce que vous voulez voir se produire,

707
00:40:56,690 --> 00:40:58,280
de sorte que nous reviendrons dans un instant.

708
00:40:58,280 --> 00:41:01,480
>> Tout d'abord, j'ai besoin d'un peu de code qui peut répondre à la réalité

709
00:41:01,480 --> 00:41:03,320
que quelqu'un a cliqué sur le bouton.

710
00:41:03,320 --> 00:41:06,330
Je vais aller de l'avant et mettre cela en bas ici.

711
00:41:06,330 --> 00:41:09,620
Encore une fois, je ne vais pas faire une frappe en face de vous ici.

712
00:41:09,620 --> 00:41:12,560
Très basique JavaScript juste que quand on parle

713
00:41:12,560 --> 00:41:15,270
nous allons fournir quelques détails sur la façon dont nous sommes arrivés ici

714
00:41:15,270 --> 00:41:17,630
et puis nous allons faire quelques choses de base.

715
00:41:17,630 --> 00:41:21,300
Aller trouver la chose dans ma page HTML qui est nommé nameInput,

716
00:41:21,300 --> 00:41:28,490
saisir, prendre sa valeur, claque "Bonjour" à l'avant de celui-ci, et le bâton que chaîne résultante

717
00:41:28,490 --> 00:41:31,960
dans cette balise div que nous avons eu avant que n'avait pas vraiment quoi que ce soit avant.

718
00:41:31,960 --> 00:41:37,220
Maintenant, nous allons trouver cette étiquette et rendre son contenu interne égale à cette chaîne.

719
00:41:37,220 --> 00:41:38,880
Très simple d'activer JavaScript.

720
00:41:38,880 --> 00:41:42,240
J'espère que vous êtes reconnaissant qu'il n'y a vraiment rien d'inhabituel se passe ici.

721
00:41:42,240 --> 00:41:45,360
C'est juste vers le haut HTML et JS ici.

722
00:41:45,360 --> 00:41:48,220
Si je cours maintenant, il n'est toujours pas aller à faire un travail parce que je n'ai pas de câble vers le haut

723
00:41:48,220 --> 00:41:50,030
pour recevoir l'événement.

724
00:41:50,030 --> 00:41:55,710
Pour ce faire, je vais le faire ici, encore une fois de retour à ma boîte à outils,

725
00:41:55,710 --> 00:41:58,730
faire éclater ici.

726
00:41:58,730 --> 00:42:03,060
Je pense que vous avez vu tout ce genre de choses avant, je ne vais pas trop expliquer.

727
00:42:03,060 --> 00:42:05,060
Maintenant, nous allons aller chercher la helloButton.

728
00:42:05,060 --> 00:42:07,730
Nous allons dire, "Button, félicitations."

729
00:42:07,730 --> 00:42:10,130
"Voici un événement que vous répondez à maintenant."

730
00:42:10,130 --> 00:42:13,420
"Lorsque quelqu'un clique sur vous, appeler cette fonction, l'buttonClickHandler."

731
00:42:13,420 --> 00:42:17,070
Et c'est cette fonction que nous venons d'ajouter à droite au bas il. C'est tout.

732
00:42:17,070 --> 00:42:20,980
Alors maintenant, nous avons une demande étonnamment fonctionnel.

733
00:42:20,980 --> 00:42:24,720
Je pense que vous serez vraiment impressionné par cela.

734
00:42:24,720 --> 00:42:32,320
Chris. Attendre. Wow. Très bien. C'est incroyable. [Rires]

735
00:42:32,320 --> 00:42:36,570
Mais il ya plus. Ne pas acheter encore. Attendez.

736
00:42:36,570 --> 00:42:39,610
>> Permettez-moi de vous montrer un peu plus ici et sortir du plein écran.

737
00:42:39,610 --> 00:42:42,690
Nous allons marcher avant de courir.

738
00:42:42,690 --> 00:42:45,530
Laissez-moi aller dans et fait de vous montrer un peu de CSS.

739
00:42:45,530 --> 00:42:49,480
Juste par défaut, si nous regardons en arrière sur la page ici,

740
00:42:49,480 --> 00:42:53,570
chaque fois que nous sommes arrivés à ces choses WinJS et nous avons eu l'ui-foncé,

741
00:42:53,570 --> 00:42:58,550
en fait, vous pouvez changer le réglage par défaut en utilisant l'application de la lumière.

742
00:42:58,550 --> 00:43:03,450
ui-noir est bon pour les applications graphiques comme l'utilisation de beaucoup de photos,

743
00:43:03,450 --> 00:43:05,740
vous montrer beaucoup de contenu visuel.

744
00:43:05,740 --> 00:43:12,560
Si vous faites preuve de beaucoup de contenu textuel, l'ui-lumière est généralement un bon choix.

745
00:43:12,560 --> 00:43:15,160
Vous n'avez pas à choisir, mais j'ai changé de lui

746
00:43:15,160 --> 00:43:17,690
et maintenant vous voyez le même balisage, même tout,

747
00:43:17,690 --> 00:43:20,320
c'est juste en utilisant essentiellement un système inversé ici

748
00:43:20,320 --> 00:43:24,770
où tout est fait le texte noir sur fond blanc.

749
00:43:24,770 --> 00:43:26,460
C'est très bien.

750
00:43:26,460 --> 00:43:30,680
Laissez-moi sortir d'ici, et laissez de fait faire un peu plus avec le CSS.

751
00:43:30,680 --> 00:43:34,830
Je l'ai remis sur l'obscurité parce que je pense que c'est probablement plus facile de voir sur l'écran

752
00:43:34,830 --> 00:43:36,970
quand je commence à faire ces choses.

753
00:43:36,970 --> 00:43:40,150
Je vais remplacer le corps une fois de plus.

754
00:43:40,150 --> 00:43:44,040
Je vais ici. Permettez-moi de ce nuke.

755
00:43:44,040 --> 00:43:48,690
Ramenons dans le corps avec des classes.

756
00:43:48,690 --> 00:43:53,000
Je crois que vous avez fait sélecteurs de base avec CSS et des choses comme ça déjà,

757
00:43:53,000 --> 00:43:55,380
si vous le savez probablement ce qui se passe ici.

758
00:43:55,380 --> 00:43:59,250
Juste attribuer certaines classes à notre tête, et nous créons une nouvelle div

759
00:43:59,250 --> 00:44:04,430
pour envelopper le reste de ce genre de choses que nous pouvons maintenant utiliser pour coiffer tous ensemble.

760
00:44:04,430 --> 00:44:07,760
Donc ce que je peux faire maintenant est d'aller sur notre CSS par défaut.

761
00:44:07,760 --> 00:44:11,900
Avez-vous regardé les requêtes des médias encore? Avez-vous parlé de cela du tout?

762
00:44:11,900 --> 00:44:17,220
Les requêtes d'information font partie de cette tendance émergente -

763
00:44:17,220 --> 00:44:19,660
ou c'est une tendance bien établie maintenant effectivement sur le Web -

764
00:44:19,660 --> 00:44:22,760
pour la conception ou d'adaptation réactive,

765
00:44:22,760 --> 00:44:28,480
et l'idée est que vos applications peuvent vraiment se régler de façon appropriée

766
00:44:28,480 --> 00:44:31,910
sur la base de ce que le dispositif qui ils être affichés sur peut faire.

767
00:44:31,910 --> 00:44:35,040
Donc, si vous êtes sur un appareil mobile, il est évident que vous n'allez pas avoir autant d'écran de l'immobilier

768
00:44:35,040 --> 00:44:41,520
comme vous sur un grand écran de 30 pouces assis avec un ordinateur de bureau, un gros PC comme ça.

769
00:44:41,520 --> 00:44:46,710
Ainsi, la vieille réponse à cette question serait d'avoir 5, 6 versions différentes de la même page

770
00:44:46,710 --> 00:44:51,350
et que vous ouvrez la version qui a été réglé pour que certain taille d'écran.

771
00:44:51,350 --> 00:44:55,420
Pas génial. C'est très, très répétitif et il ya une tonne d'entretien à faire.

772
00:44:55,420 --> 00:44:58,120
Maintenant, nous avons ce qu'on appelle des requêtes de médias CSS,

773
00:44:58,120 --> 00:45:02,530
et nous pouvons l'utiliser pour détecter automatiquement quand il ya certaines tailles

774
00:45:02,530 --> 00:45:07,030
ou certaines utilisations de votre contenu étant effectuées.

775
00:45:07,030 --> 00:45:09,580
Ainsi, vous pouvez répondre à cela et vous pouvez dire: «D'accord, dans ce cas

776
00:45:09,580 --> 00:45:12,580
"Vous n'avez même pas besoin probablement moi de vous dire ce qui se passe ici."

777
00:45:12,580 --> 00:45:18,020
Ceci est juste de dire si cette application est cassé, comme je vous ai montré avant -

778
00:45:18,020 --> 00:45:20,830
saisir et de le mettre sur le côté de l'écran -

779
00:45:20,830 --> 00:45:23,910
alors faisons le style suivant.

780
00:45:23,910 --> 00:45:25,850
Styling n'est pas seulement sur les couleurs et des trucs comme ça.

781
00:45:25,850 --> 00:45:29,860
Il est également sur le dimensionnement et les marges et les rembourrages et les orientations de contenu

782
00:45:29,860 --> 00:45:34,040
ou même désactiver ou d'activer des parties entières de votre page

783
00:45:34,040 --> 00:45:36,420
et, dans ce cas, votre application ou votre jeu ainsi.

784
00:45:36,420 --> 00:45:39,210
Alors là, vous pouvez le faire aussi simple que vous le souhaitez.

785
00:45:39,210 --> 00:45:46,720
Ce ne serait pas utile dans vos applications, mais il est temps de démonstration,

786
00:45:46,720 --> 00:45:50,530
donc je vais aller de l'avant et il suffit d'ajouter dans le sélecteur de base du corps et dire,

787
00:45:50,530 --> 00:45:58,360
"Quand je suis cassé, nous allons aller de l'avant et faire background-color et choisissons quelque chose."

788
00:45:58,360 --> 00:46:00,400
Vous avez IntelliSense ici. C'est en fait vraiment cool.

789
00:46:00,400 --> 00:46:05,720
En 2012, nous avons ajouté beaucoup de choses pour le support des CSS et JavaScript et HTML.

790
00:46:05,720 --> 00:46:08,690
Vous avez bien sûr obtenu déroulante IntelliSense trop, mais ce n'est pas le truc cool.

791
00:46:08,690 --> 00:46:11,730
Le truc cool, c'est que vous avez sélecteurs visuels pour beaucoup de choses.

792
00:46:11,730 --> 00:46:14,120
Ainsi, vous pouvez passer et il suffit de choisir une couleur,

793
00:46:14,120 --> 00:46:17,580
ou vous pouvez sortir et être encore plus précis et vous pouvez choisir -

794
00:46:17,580 --> 00:46:22,330
cela va être terrible. Je vais effectivement choisir une couleur décent ici.

795
00:46:22,330 --> 00:46:26,500
Suivre le balisage aussi, par la manière. C'est votre format standard RGB il.

796
00:46:26,500 --> 00:46:30,780
Mais si je passe l'opacité, il va passer à un sélecteur de canal alpha ici.

797
00:46:30,780 --> 00:46:36,910
Donc vous pouvez voir que la couleur avec essentiellement la transparence pour cent que vous avez pour ce

798
00:46:36,910 --> 00:46:38,860
tout cuit juste là.

799
00:46:38,860 --> 00:46:42,530
Je vais le garder comme 100% et puis quand j'ai fini avec ça, tout va bien et bon.

800
00:46:42,530 --> 00:46:46,160
Maintenant, si je lance l'application et nous prenons l'application et nous le casser,

801
00:46:46,160 --> 00:46:49,000
que la couleur de fond est ajustée automatiquement

802
00:46:49,000 --> 00:46:53,410
juste parce que nous avons un peu de CSS qui dit: «Allez faire cela."

803
00:46:53,410 --> 00:46:55,580
Vous pouvez également écrire JavaScript trop qui va faire la même chose

804
00:46:55,580 --> 00:47:03,010
ou que vous pouvez utiliser pour effectivement mettre en pause un jeu, faire des choses comme ça.

805
00:47:03,010 --> 00:47:04,310
C'est probablement lorsque vous souhaitez utiliser le JavaScript.

806
00:47:04,310 --> 00:47:06,610
Vous souhaitez désactiver la boucle de jeu à ce point.

807
00:47:06,610 --> 00:47:09,970
Vous auriez besoin un peu de JavaScript, car ce ne serait pas quelque chose que vous voulez CSS.

808
00:47:09,970 --> 00:47:11,760
Mais gardez à l'esprit que c'est juste un événement.

809
00:47:11,760 --> 00:47:14,860
Vous pourriez dire: «Lorsque mon application est redimensionnée,

810
00:47:14,860 --> 00:47:17,780
"Voyons si nous sommes cassé net." Et c'est tout.

811
00:47:17,780 --> 00:47:24,440
>> D'accord? J'ai parlé beaucoup. Y at-il des questions à ce jour où nous en sommes? Ouais.

812
00:47:24,440 --> 00:47:29,310
[Élève] Y at-il un tutoriel pour quiconque d'obtenir plus d'informations? >> Oui.

813
00:47:29,310 --> 00:47:33,510
La question est, est-il un tutoriel pour cela? Je vais j'étends de tout.

814
00:47:33,510 --> 00:47:37,490
Il ya quelques choses que vous pouvez aller. Voyons fait sortir de là.

815
00:47:37,490 --> 00:47:40,150
Permettez-moi de revenir ici.

816
00:47:40,150 --> 00:47:45,180
Une chose à souligner est Visual Studio lui-même a des tutoriels construit po

817
00:47:45,180 --> 00:47:47,650
Permettez-moi de me débarrasser de cela.

818
00:47:47,650 --> 00:47:51,520
Si vous allez créer un nouveau projet, ne Fichier, Nouveau projet,

819
00:47:51,520 --> 00:47:56,750
et regarder sur le côté gauche, il ya un noeud en ligne dans ce sélecteur.

820
00:47:56,750 --> 00:47:59,790
Il va prendre un peu. Je suis sur mon MyFi ici.

821
00:47:59,790 --> 00:48:02,300
Mais ça va venir et il va me donner une chance de trouver des modèles

822
00:48:02,300 --> 00:48:05,190
mais aussi, et plus important encore, les échantillons ainsi.

823
00:48:05,190 --> 00:48:06,750
Donc, je peux cliquer sur JavaScript.

824
00:48:06,750 --> 00:48:10,050
Il va trouver des échantillons pour moi. Ma résolution est bien haut ici.

825
00:48:10,050 --> 00:48:15,070
Normalement, vous devriez voir une liste de beaucoup de choses différentes ici.

826
00:48:15,070 --> 00:48:18,280
S'il ya quelque chose que vous voulez essayer, choisir la langue,

827
00:48:18,280 --> 00:48:20,970
JavaScript ici, et dire: «Je ne sais pas comment faire géolocalisation."

828
00:48:20,970 --> 00:48:22,220
"Je ne sais pas comment ouvrir un fichier."

829
00:48:22,220 --> 00:48:25,840
"Je ne sais pas comment tirer parti de la webcam

830
00:48:25,840 --> 00:48:28,290
»Ou optimiser pour le toucher ou des choses comme ça."

831
00:48:28,290 --> 00:48:33,190
Il existe des échantillons pour tout: le partage, la recherche, bars app,

832
00:48:33,190 --> 00:48:37,520
faire des appels à distance à un service, l'encodage JSON.

833
00:48:37,520 --> 00:48:40,390
Toutes ces sortes de choses il ya des échantillons pour ici,

834
00:48:40,390 --> 00:48:44,560
et ils ne sont pas énormes échantillons qui vont vous prendre toute la nuit pour séparer

835
00:48:44,560 --> 00:48:46,820
juste pour savoir qu'il ya une chose que vous vouliez savoir.

836
00:48:46,820 --> 00:48:49,870
Ils sont vraiment bons. Ils sont petits, droit au but types d'échantillons.

837
00:48:49,870 --> 00:48:52,330
J'ai appris une tonne en passant par ces moi,

838
00:48:52,330 --> 00:48:55,260
et c'est pourquoi je recommande que beaucoup comme une chose.

839
00:48:55,260 --> 00:49:01,750
>> Une autre chose à remarquer est aussi bien sûr je vous ai montré dev.windows.com,

840
00:49:01,750 --> 00:49:07,490
donc si vous allez revenir, vous verrez en bas il ya aussi les échantillons ici.

841
00:49:07,490 --> 00:49:12,560
Ainsi, vous pouvez télécharger tous à la fois, mais il ya aussi beaucoup d'autres ressources ici aussi

842
00:49:12,560 --> 00:49:14,400
qui peut vous aider à obtenir de la vitesse.

843
00:49:14,400 --> 00:49:17,870
>> Une autre chose, et je recommande vraiment que vous essayez,

844
00:49:17,870 --> 00:49:24,510
Je l'ai sur mon blog, mais je vais aller droit au but.

845
00:49:24,510 --> 00:49:28,220
Je vais vous montrer. Mon blog a des ressources et des choses comme ça.

846
00:49:28,220 --> 00:49:35,300
Une des choses à souligner, c'est ici, cette chose: votre idée. Votre App. 30 jours.

847
00:49:35,300 --> 00:49:40,960
Si vous cliquez sur ce, il va vous amener à un site vraiment utile.

848
00:49:40,960 --> 00:49:44,650
Cela est beaucoup plus utile que vous pourriez vous attendre.

849
00:49:44,650 --> 00:49:49,040
Cela va être 30 jours de contenu que vous pouvez tout simplement obtenir des conseils et astuces

850
00:49:49,040 --> 00:49:51,990
tout au long de ce processus que vous créez une application.

851
00:49:51,990 --> 00:49:55,980
Et comme vous ne pouvez pas attendre, vous pouvez réellement obtenir pour les jeux trop

852
00:49:55,980 --> 00:49:57,840
et pour les applications de téléphonie, des choses comme ça.

853
00:49:57,840 --> 00:50:01,000
Donc, fondamentalement, vous inscrire à elle, et ils vont vous faire parvenir des trucs et astuces sur,

854
00:50:01,000 --> 00:50:03,010
"Avez-vous pensé à cela? Êtes-vous favorable snap?"

855
00:50:03,010 --> 00:50:04,900
"Voici quelques lignes directrices sur la façon de le faire bien."

856
00:50:04,900 --> 00:50:07,440
«Avez-vous pensé à soumettre à la boutique?"

857
00:50:07,440 --> 00:50:09,370
«Avez-vous pensé à la façon dont vous allez vendre votre demande?"

858
00:50:09,370 --> 00:50:11,490
Il va traverser toutes ces différentes choses.

859
00:50:11,490 --> 00:50:13,380
Et en fait, si vous êtes sur la piste de jeu, à un moment donné

860
00:50:13,380 --> 00:50:17,010
vous allez commencer à reconnaître la personne qui vous parle

861
00:50:17,010 --> 00:50:22,850
parce que j'ai dû aller à Redmint de faire ces deux vidéos enregistrées et là.

862
00:50:22,850 --> 00:50:25,240
Mais tout cela fait partie de la piste de jeu,

863
00:50:25,240 --> 00:50:27,650
et il ya aussi une piste complète pour le développement général de l'application.

864
00:50:27,650 --> 00:50:29,380
C'est ce qu'on appelle App Generation.

865
00:50:29,380 --> 00:50:33,460
Je recommande vivement que pour vous aussi, en plus des échantillons.

866
00:50:33,460 --> 00:50:38,110
>> Il ya beaucoup de vidéos sur un site appelé Canal 9 ainsi.

867
00:50:38,110 --> 00:50:42,790
C'est probablement la dernière chose que je vais recommander aussi bien avant que nous passions ici.

868
00:50:42,790 --> 00:50:45,280
Channel9.msdn.com.

869
00:50:45,280 --> 00:50:48,880
C'est super parce que vous n'allez pas être lu par des tonnes de livres blancs.

870
00:50:48,880 --> 00:50:53,880
Il s'agit essentiellement d'un grand nombre de vidéos, screencasts et ce qui est bien au point.

871
00:50:53,880 --> 00:50:57,940
Je ne devrais pas dire que c'est toujours droit au but. Cela dépend de qui fait parler.

872
00:50:57,940 --> 00:51:02,290
Mais en général, il ya des vidéos vraiment-le-point ici

873
00:51:02,290 --> 00:51:06,230
qui va vous montrer quelque chose en particulier que vous voudrez peut-être d'apprendre ou de voir en démonstration.

874
00:51:06,230 --> 00:51:11,110
Il ya aussi tout notre contenu de notre conférence qui s'est passé il ya quelques semaines

875
00:51:11,110 --> 00:51:14,380
appelé construction, et vous verrez que là.

876
00:51:14,380 --> 00:51:18,450
Il ya des technologies de base pour Windows 8 jeux. Là vous allez.

877
00:51:18,450 --> 00:51:23,150
J'étais là, en fait. Vous ne pouvez pas me voir. J'étais ici.

878
00:51:23,150 --> 00:51:27,560
Mais de toute façon, cela mis à part, je vous recommande de jeter un oeil à ces vidéos.

879
00:51:27,560 --> 00:51:29,330
Ils sont assez utiles.

880
00:51:29,330 --> 00:51:32,620
Si vous êtes coincé sur quelque chose ou que vous voulez juste voir ce que quelque chose pouvait faire, tirer les vers le haut.

881
00:51:32,620 --> 00:51:36,890
>> [Guarin] Windows Mail vient de m'envoyer un email avec un lien vers le contenu

882
00:51:36,890 --> 00:51:42,140
pour les étudiants à télécharger avec le code d'échantillon et des trucs comme ça. >> [Bowen] Grand.

883
00:51:42,140 --> 00:51:45,510
Impressionnant. Merci, Edwin.

884
00:51:45,510 --> 00:51:48,320
>> Bon. >> [L'élève] J'ai une question. >> [Bowen] Oh. Oui, s'il vous plaît.

885
00:51:48,320 --> 00:51:55,030
[Question des étudiants inaudible] >> [Bowen] Oh, je suis heureux que vous posiez. Oui.

886
00:51:55,030 --> 00:51:58,940
La question était, est-il une interface visuelle pour moi de créer des choses?

887
00:51:58,940 --> 00:52:01,630
Edwin vous récompensera grassement pour cette question.

888
00:52:01,630 --> 00:52:04,310
Il ya une façon de le faire.

889
00:52:04,310 --> 00:52:09,040
Devrions-nous faire maintenant? Faisons-le maintenant.

890
00:52:09,040 --> 00:52:11,780
Je vais aller à ce moment.

891
00:52:11,780 --> 00:52:14,070
En fait, permettez-moi d'ajouter une chose dans cette démo,

892
00:52:14,070 --> 00:52:16,710
et puis je vais vous montrer la réponse réelle.

893
00:52:16,710 --> 00:52:21,340
J'allais ajouter un peu plus en CSS ici.

894
00:52:21,340 --> 00:52:23,980
J'étais un peu sur les tangentes ici.

895
00:52:23,980 --> 00:52:26,770
Permettez-moi de mettre en peu de CSS ici pour profiter

896
00:52:26,770 --> 00:52:29,980
des classes que nous avons ajouté un peu plus tôt,

897
00:52:29,980 --> 00:52:33,930
à l'en-tête, pour la div mainContent, puis à la greetingOutput.

898
00:52:33,930 --> 00:52:37,920
Si je fais cela et le lance, vous pouvez voir maintenant que nous avons un remplissage et les marges peu différente,

899
00:52:37,920 --> 00:52:40,310
de sorte que nous avons actuellement quelques décalages ici.

900
00:52:40,310 --> 00:52:44,630
Ce sont plus vers ce que vous allez attendre d'une application finale poli.

901
00:52:44,630 --> 00:52:47,770
Mais je suis en train de montrer cela parce que c'est tout droit CSS.

902
00:52:47,770 --> 00:52:51,910
Donc, les choses que vous savez déjà que vous pouvez utiliser ici d'adapter le contenu que vous souhaitez.

903
00:52:51,910 --> 00:52:55,100
Vous avez déjà vu comment faire le fond changer de cette façon.

904
00:52:55,100 --> 00:53:02,980
>> Si je reviens à notre HTML, je vais ajouter dans un ensemble de balises plus,

905
00:53:02,980 --> 00:53:06,140
et ce qui se passe réellement à un contrôle de WinJS.

906
00:53:06,140 --> 00:53:09,840
Je vais aller attraper ce, une étiquette. Permettez-moi de m'assurer que je fais au bon endroit.

907
00:53:09,840 --> 00:53:11,740
Probablement assez bon.

908
00:53:11,740 --> 00:53:15,590
Ici, je viens d'ajouter - et nous passerons plein écran de sorte que vous pouvez voir toute chose -

909
00:53:15,590 --> 00:53:18,520
J'ai ajouté une étiquette pour la prochaine div.

910
00:53:18,520 --> 00:53:20,890
Le div est appelé ratingControlDiv.

911
00:53:20,890 --> 00:53:23,090
En soi, il ne fera rien.

912
00:53:23,090 --> 00:53:28,570
Si vous ouvrez ce dans un navigateur, vous seriez à la recherche à vide, le div lui-même.

913
00:53:28,570 --> 00:53:31,820
Mais à cause de cette mystérieuse ligne de code que je vous ai montré avant,

914
00:53:31,820 --> 00:53:35,650
tout le processus, il va chercher quelque chose qui ressemble à ceci -

915
00:53:35,650 --> 00:53:40,380
data-win-contrôle - et il va trouver tout ce qui est dans ce paramètre.

916
00:53:40,380 --> 00:53:44,560
Il va faire un exemple de ce que c'est, il pointe vers.

917
00:53:44,560 --> 00:53:48,850
Dans ce cas, il s'agit d'un contrôle de la note, de sorte que je dis, "S'il vous plaît aller et remplacer cette chose

918
00:53:48,850 --> 00:53:51,400
»Avec tout ce que vous devez faire pour faire un contrôle de notation."

919
00:53:51,400 --> 00:53:56,610
Ce pourrait être un contrôle de la médaille, il pourrait être l'anneau de progrès ou quoi contrôle que vous souhaitez utiliser.

920
00:53:56,610 --> 00:53:59,390
Ils vont tous travailler essentiellement de la même façon.

921
00:53:59,390 --> 00:54:02,920
Vous utilisez le balisage HTML5 standard pour indiquer ce que vous voulez,

922
00:54:02,920 --> 00:54:07,670
et puis vous allez obtenir un contrôle à la fin de cette. Permettez-moi de courir ce.

923
00:54:07,670 --> 00:54:12,270
Je viens de copier que, et maintenant que ce balisage devient,

924
00:54:12,270 --> 00:54:15,280
qui est en fait un certain nombre d'éléments HTML.

925
00:54:15,280 --> 00:54:18,440
Ce sont toutes les images individuelles, et il ya div autour d'eux avec sélecteurs.

926
00:54:18,440 --> 00:54:22,610
J'espère que vous pouvez voir. C'est un peu subtil.

927
00:54:22,610 --> 00:54:27,380
Je peux planer sur les différents articles, et ça va me permettre de voir la cote ici.

928
00:54:27,380 --> 00:54:31,560
Je peux cliquer sur, et il se souvient de la note, mais c'est tout.

929
00:54:31,560 --> 00:54:33,100
Ce n'est pas vraiment faire quelque chose avec la note.

930
00:54:33,100 --> 00:54:35,230
>> Une dernière chose que je veux vous montrer sur cette

931
00:54:35,230 --> 00:54:37,820
avant que nous passons dans une expérience de conception plus visuelle

932
00:54:37,820 --> 00:54:42,680
est un peu de code que je peux utiliser pour répondre à ces contrôles WinJS.

933
00:54:42,680 --> 00:54:47,540
Laissez-moi sortir de là, retour sur plein écran,

934
00:54:47,540 --> 00:54:52,690
et passer à JS ici pour la deuxième.

935
00:54:52,690 --> 00:54:57,450
Je peux le faire ici. Je pense que je vais remplacer tout cela.

936
00:54:57,450 --> 00:55:03,080
En fait, je pense que ça va tout remplacer, mais nous allons découvrir ensemble.

937
00:55:03,080 --> 00:55:07,350
Je vais mettre ce ici. Ouais. Je vais supprimer cette trop.

938
00:55:07,350 --> 00:55:11,790
Qu'ai-je ajouter? Il ressemble beaucoup. Ce n'est pas beaucoup.

939
00:55:11,790 --> 00:55:14,920
Je vient de prolonger cette ligne de code que j'ai déjà parlé avant,

940
00:55:14,920 --> 00:55:18,590
et je dis: «Quand tout est fait, quand tous mes contrôles ont été effectués,

941
00:55:18,590 --> 00:55:23,660
», Puis le faire." Alors exécuter cette fonction appelée terminée.

942
00:55:23,660 --> 00:55:27,080
Dans ce cas, ce sont des choses que vous pouvez comprendre.

943
00:55:27,080 --> 00:55:29,040
Allez trouver que le contrôle de div.

944
00:55:29,040 --> 00:55:30,790
En fait, il ya une chose que je tiens à souligner.

945
00:55:30,790 --> 00:55:35,630
Que la ligne suivante est en train de dire, "j'ai que ratingControlDiv."

946
00:55:35,630 --> 00:55:39,770
"Je veux lui parler comme s'il s'agissait d'un véritable contrôle, un contrôle WinJS."

947
00:55:39,770 --> 00:55:42,020
Donc, fondamentalement, vous demandez que de lui.

948
00:55:42,020 --> 00:55:44,600
Vous dites: «Je veux vous parler de contrôle."

949
00:55:44,600 --> 00:55:47,810
Et alors vous pouvez commencer à dire des choses comme, «Nous allons ajouter un écouteur pour vous

950
00:55:47,810 --> 00:55:51,430
"Quand vous êtes changé, nous pouvons répondre à cela."

951
00:55:51,430 --> 00:55:56,930
Et puis, nous pouvons aussi faire des choses de ce genre. En fait, c'est l'ancien code là.

952
00:55:56,930 --> 00:55:59,600
Je pense que je suis absent coller dans une fonction plus,

953
00:55:59,600 --> 00:56:05,030
et que ce serait la fonction réelle qui répondrait à la commande de notation étant changé.

954
00:56:05,030 --> 00:56:07,710
Permettez-moi de pop que dans le droit ici,

955
00:56:07,710 --> 00:56:09,840
quelque part par là.

956
00:56:09,840 --> 00:56:14,930
Et dans ce cas, la seule chose qui est nouveau, c'est le fait que nous allons dans

957
00:56:14,930 --> 00:56:21,000
ce que le contrôle de notation nous dit et nous demander ce que l'on appelle le tentativeRating.

958
00:56:21,000 --> 00:56:23,150
Il ya un tas de différentes autres choses que ce contrôle peut vous dire,

959
00:56:23,150 --> 00:56:25,310
et il va commande par commande.

960
00:56:25,310 --> 00:56:29,140
C'est très simple. Vous serez en mesure de le comprendre sans problème que ce soit.

961
00:56:29,140 --> 00:56:34,040
Je lance ce, et maintenant quand je change les notes et clique sur la note,

962
00:56:34,040 --> 00:56:36,480
vous pouvez voir maintenant c'est en fait à y répondre.

963
00:56:36,480 --> 00:56:40,280
C'est mettre cette note à l'écran dans cette balise div vide sinon

964
00:56:40,280 --> 00:56:42,970
sous la commande de notation.

965
00:56:42,970 --> 00:56:46,670
C'est la magie de beaucoup de choses ici aussi.

966
00:56:46,670 --> 00:56:49,580
Donc, comme vous êtes la création d'applications pour le Windows Store,

967
00:56:49,580 --> 00:56:52,930
il ya une tonne de contrôles que vous pouvez simplement utiliser. Ils travaillent tous comme ça.

968
00:56:52,930 --> 00:56:58,670
>> Permettez-moi de vous montrer le côté visuel de la conception de ces applications.

969
00:56:58,670 --> 00:57:03,440
Les bonnes nouvelles sont que vous aurez déjà cet outil lorsque vous installez tout

970
00:57:03,440 --> 00:57:06,240
si vous allez à ce téléchargement et vous obtenez Visual Studio.

971
00:57:06,240 --> 00:57:09,890
Je peux cliquer droit sur ce. Je ne vais pas agrandir

972
00:57:09,890 --> 00:57:12,040
Il dit juste Open in Blend.

973
00:57:12,040 --> 00:57:16,040
Blend est un autre outil qui travaille côte à côte avec Visual Studio

974
00:57:16,040 --> 00:57:19,230
et se concentre beaucoup plus sur le côté de la conception des choses,

975
00:57:19,230 --> 00:57:23,660
il surfaces vraiment les outils qui sont optimisés pour la création de styles,

976
00:57:23,660 --> 00:57:29,720
la création d'animations, en collaboration avec CSS, beaucoup de choses dans ce genre de veine.

977
00:57:29,720 --> 00:57:36,380
Voici ce qui devrait être très intéressant et assez évident est immédiatement nous sommes à la recherche à l'application.

978
00:57:36,380 --> 00:57:40,060
J'espère que nous sommes encore.

979
00:57:40,060 --> 00:57:42,650
Au lieu de voir le code, que nous ne voyons encore au fond,

980
00:57:42,650 --> 00:57:45,350
nous voyons la représentation réelle de la demande.

981
00:57:45,350 --> 00:57:49,640
Qui plus est, ce n'est pas seulement une représentation de l'application, il est en fait l'application en marche.

982
00:57:49,640 --> 00:57:52,010
Et c'est ce qui est vraiment agréable sur Blend.

983
00:57:52,010 --> 00:57:58,620
L'équipe a fait beaucoup de travail pour amener HTML et JavaScript et CSS dans cet outil.

984
00:57:58,620 --> 00:58:01,930
Maintenant, vous pouvez effectivement, si vous êtes curieux, "Qu'est-ce que ça veut dire? Qu'est-ce que je peux faire?"

985
00:58:01,930 --> 00:58:08,310
Je ne peux réellement concevoir à cette demande même si ce genre de choses n'existent pas dans mon code.

986
00:58:08,310 --> 00:58:13,230
Rappelez-vous que le contrôle de notation? C'était juste une balise div.

987
00:58:13,230 --> 00:58:17,090
Cette substance, cette étoile, existe seulement à l'exécution. Comment je le sais?

988
00:58:17,090 --> 00:58:20,300
Il ya un peu de magie ici.

989
00:58:20,300 --> 00:58:21,700
Voir ces éclairs?

990
00:58:21,700 --> 00:58:25,570
Chaque fois que vous voyez un éclair, ce qui signifie qu'il a été créé par quelque chose à l'exécution.

991
00:58:25,570 --> 00:58:31,770
Certains JavaScript a couru et s'est quelque chose dans ce ou créé ce avec une certaine logique.

992
00:58:31,770 --> 00:58:37,100
Ces étoiles que vous voyez là ont été créés par JavaScript par WinJS.

993
00:58:37,100 --> 00:58:41,800
La bonne chose est, il n'a pas d'importance pour moi, je peux encore concevoir il,

994
00:58:41,800 --> 00:58:44,410
Je peux encore aller et le changer, je peux savoir ce qui se passe ici,

995
00:58:44,410 --> 00:58:50,260
Je peux regarder la CSS, je peux aller de l'avant et de découvrir pourquoi la couleur est la façon dont il est,

996
00:58:50,260 --> 00:58:54,610
Je peux commencer à jouer avec les choses et faire des choses horribles,

997
00:58:54,610 --> 00:58:58,360
tout ce que je veux faire.

998
00:58:58,360 --> 00:59:01,020
En fait, je vais laisser les choses seul.

999
00:59:01,020 --> 00:59:03,980
Mais vous pouvez voir ici c'est tout le CSS et c'est vous montrer ici.

1000
00:59:03,980 --> 00:59:10,120
Si je vais jusque-là, ça va vous montrer tout ce qu'ils appellent Gagner,

1001
00:59:10,120 --> 00:59:14,850
de sorte que les règles CSS qui sont le plus spécifique et le plus choisi pour cet article,

1002
00:59:14,850 --> 00:59:17,110
que vous avez probablement déjà dépassé dans vos classes,

1003
00:59:17,110 --> 00:59:22,000
où vous pouvez dire qu'il ya une police générale que nous appliquons à tout,

1004
00:59:22,000 --> 00:59:26,860
mais parce que c'est un h1 et j'ai une couleur définie pour H1S

1005
00:59:26,860 --> 00:59:29,820
ça va être cette couleur, et c'est parce qu'il est plus spécifique que le body1.

1006
00:59:29,820 --> 00:59:32,590
Cette chose ici, vous tous qui montre,

1007
00:59:32,590 --> 00:59:35,470
et c'est vraiment quelque chose de puissant que vous obtenez plus complexe,

1008
00:59:35,470 --> 00:59:38,160
vous vous demandez pourquoi ces choses sont comme elles sont.

1009
00:59:38,160 --> 00:59:41,020
Il va vraiment vous dire, et vous pouvez choisir n'importe quel de ces articles ici.

1010
00:59:41,020 --> 00:59:43,370
Cette couleur n'est pas trop mal, en fait.

1011
00:59:43,370 --> 00:59:47,150
Vous pouvez les sélectionner. J'espère que vous pouvez voir.

1012
00:59:47,150 --> 00:59:52,410
Pour tout ce que vous avez sur votre application, vous voyez toute une cascade

1013
00:59:52,410 --> 00:59:56,070
de tous les CSS qui auraient appliqué à ce et que l'on est gagnant,

1014
00:59:56,070 --> 00:59:58,050
que l'on a pris effectivement la priorité.

1015
00:59:58,050 --> 01:00:00,930
Ceux-ci sont un peu ennuyeux. Il n'y a pas beaucoup de choses dans certains d'entre eux.

1016
01:00:00,930 --> 01:00:04,660
Si je vais changer la couleur, alors vous allez commencer à voir une certaine cascade il.

1017
01:00:04,660 --> 01:00:07,760
Vous pouvez également utiliser le HTML ici.

1018
01:00:07,760 --> 01:00:12,490
Je peux passer et modifier les propriétés HTML pour toutes ces choses que je veux.

1019
01:00:12,490 --> 01:00:14,620
Il ya juste des tonnes de trucs ici.

1020
01:00:14,620 --> 01:00:18,070
>> Je ne veux pas de prendre votre temps en passant par tout ici. Il suffit de savoir qu'il est là.

1021
01:00:18,070 --> 01:00:21,700
Il ya un grand nombre de fonctionnalités de conception orientée qui est juste disponible pour vous

1022
01:00:21,700 --> 01:00:26,730
de sorte que vous pouvez rester visuelle, travailler avec l'application, et ne pas avoir à faire beaucoup de deviner

1023
01:00:26,730 --> 01:00:32,180
que vous auriez à faire normalement et vélo de retour à partir d'un navigateur de nouveau dans votre conception,

1024
01:00:32,180 --> 01:00:33,940
au navigateur.

1025
01:00:33,940 --> 01:00:37,010
C'est vraiment cool stuff pour cela, et que vous développez une application Windows Store,

1026
01:00:37,010 --> 01:00:39,650
ça va vous faire beaucoup plus productif.

1027
01:00:39,650 --> 01:00:45,150
>> Vous verrez également qu'il est suivi le balisage ici et votre CSS

1028
01:00:45,150 --> 01:00:47,270
que vous travaillez par des choses différentes.

1029
01:00:47,270 --> 01:00:50,180
C'est probablement très difficile pour vous de voir que, en particulier sur la vidéo,

1030
01:00:50,180 --> 01:00:54,680
mais c'est ce qui se passe ici, et je vous recommande de vous familiariser avec cela.

1031
01:00:54,680 --> 01:00:57,240
Elle vous fera économiser beaucoup de temps. C'est Blend.

1032
01:00:57,240 --> 01:01:00,520
Si vous apportez des modifications ici, ils sont automatiquement vont ramener sur

1033
01:01:00,520 --> 01:01:01,870
à Visual Studio.

1034
01:01:01,870 --> 01:01:06,590
C'est les mêmes fichiers, c'est la même chose tout. Je vous laisse seul.

1035
01:01:06,590 --> 01:01:08,650
J'ai un meilleur exemple que je veux vous montrer.

1036
01:01:08,650 --> 01:01:11,660
Mais si j'ai fait un changement là-bas et sauvé et je suis revenu à Visual Studio, il disait,

1037
01:01:11,660 --> 01:01:16,390
"Hé, vous venez de changer quelque chose. Puis-je recharger pour vous?" Oui.

1038
01:01:16,390 --> 01:01:18,770
Et que vous utilisez la même chose là-bas.

1039
01:01:18,770 --> 01:01:21,320
C'est la fin de cet échantillon particulier.

1040
01:01:21,320 --> 01:01:28,170
>> Je veux vous montrer un échantillon haut de gamme juste pour vous donner une vue d'autres fonctionnalités

1041
01:01:28,170 --> 01:01:30,350
vous pourriez penser à ainsi.

1042
01:01:30,350 --> 01:01:32,280
Il s'agit d'un exemple d'application que vous pouvez télécharger.

1043
01:01:32,280 --> 01:01:35,620
Si vous recherchez quelque chose qui s'appelle le Camp Windows dans une boîte,

1044
01:01:35,620 --> 01:01:40,340
il ya quelques échantillons qui sont en ce que l'un d'eux est le Contoso Cookbook.

1045
01:01:40,340 --> 01:01:41,640
Je peux exécuter ce pour vous.

1046
01:01:41,640 --> 01:01:44,700
écran de démarrage personnalisé. C'est l'application de vue Grille.

1047
01:01:44,700 --> 01:01:49,590
Ils ont tenus des données personnalisées ici. Vous pouvez naviguer à travers cela.

1048
01:01:49,590 --> 01:01:53,090
Vous pouvez aller jeter un oeil à différentes choses qui feront de nous de faim sur un vendredi après-midi.

1049
01:01:53,090 --> 01:01:57,760
Je ne sais pas. Qu'est-ce que va me faire le plus faim?

1050
01:01:57,760 --> 01:02:00,530
Je ne sais pas. Je vais en choisir un.

1051
01:02:00,530 --> 01:02:02,460
Vous allez dans ces choses. Il va vous montrer la recette.

1052
01:02:02,460 --> 01:02:04,900
Vous pouvez aussi, au lieu de cliquer sur un élément,

1053
01:02:04,900 --> 01:02:10,360
vous pouvez aller directement à cette catégorie de contenu, la section du contenu.

1054
01:02:10,360 --> 01:02:15,590
Dans ce cas, vous pouvez lire beaucoup de faux latine vous disant tout sur ces recettes ici

1055
01:02:15,590 --> 01:02:17,720
et puis allez à droite dans la recette spécifique.

1056
01:02:17,720 --> 01:02:22,770
Ceci permet aussi des choses comme le partage que je vous ai montré avant avec les images.

1057
01:02:22,770 --> 01:02:26,160
Vous pouvez également rechercher dans la présente demande trop.

1058
01:02:26,160 --> 01:02:28,880
Il est très simple de faire une recherche.

1059
01:02:28,880 --> 01:02:31,300
Fondamentalement, vous êtes juste une chaîne de texte à partir de Windows

1060
01:02:31,300 --> 01:02:34,720
et vous décidez comment vous voulez gérer recherche avec ce.

1061
01:02:34,720 --> 01:02:39,830
C'est quelques lignes de code pour l'obtenir, et puis ce que vous faites avec lui après qui est totalement à vous.

1062
01:02:39,830 --> 01:02:44,180
>> Ici, ils ont également une barre d'application où ils utilisent d'autres fonctionnalités.

1063
01:02:44,180 --> 01:02:45,430
Je vais vous dire ce que c'est.

1064
01:02:45,430 --> 01:02:48,220
Un rappel va utiliser ce qu'on appelle une notification toast.

1065
01:02:48,220 --> 01:02:52,930
C'est vraiment pratique pour laisser l'utilisateur de savoir quand les choses se sont passées,

1066
01:02:52,930 --> 01:02:55,850
comme une application a été installée ou quelque chose a été achevée.

1067
01:02:55,850 --> 01:02:57,950
Il est également bon pour les jeux aussi.

1068
01:02:57,950 --> 01:03:02,360
Si vous avez un monde persistant ou une carte de chef de file et un service qui héberge que

1069
01:03:02,360 --> 01:03:08,490
peut-être sur une machine séparée, les notifications peuvent être envoyées dans une machine

1070
01:03:08,490 --> 01:03:12,240
et même si l'utilisateur n'utilise pas votre jeu, jouer à votre jeu ou le fonctionnement de votre application,

1071
01:03:12,240 --> 01:03:15,170
ils peuvent encore recevoir des notifications au sujet de ces types d'événements.

1072
01:03:15,170 --> 01:03:19,350
Donc, vous pourriez dire: «Votre château a été détruit ou est à peu près détruit."

1073
01:03:19,350 --> 01:03:22,870
"Reviens ici et défendre", ou quelque chose comme ça.

1074
01:03:22,870 --> 01:03:26,830
Vous cliquez sur la notification, vous allez tout de suite dans le jeu, et vous pouvez y jouer.

1075
01:03:26,830 --> 01:03:32,170
Donc, ce genre de choses peuvent vraiment aider à attirer des gens de retour dans votre application assez efficace.

1076
01:03:32,170 --> 01:03:37,450
>> Il ya aussi appuyer dans cette demande pour l'utilisation du microphone, la webcam,

1077
01:03:37,450 --> 01:03:39,560
faire la vidéo et prendre des photos.

1078
01:03:39,560 --> 01:03:42,080
Vous pouvez également épingler une tuile secondaire.

1079
01:03:42,080 --> 01:03:46,760
C'est utile si vous voulez avoir juste une tuile qui va droit à certains contenus.

1080
01:03:46,760 --> 01:03:49,960
Dans ce cas, il va droit à cette recette.

1081
01:03:49,960 --> 01:03:51,300
Tout ce que je mentionner que je suis en train de montrer

1082
01:03:51,300 --> 01:03:53,270
parce que c'est ce que vous pouvez penser à utiliser ainsi.

1083
01:03:53,270 --> 01:03:57,590
Pour la plupart, elles sont très faciles à utiliser.

1084
01:03:57,590 --> 01:04:00,070
Je recommande juste vous mettre cet échantillon explorateur

1085
01:04:00,070 --> 01:04:03,600
et trouver un échantillon qui peut vous montrer comment faire.

1086
01:04:03,600 --> 01:04:07,140
C'est assez simple à traduire les dans vos applications là-bas aussi.

1087
01:04:07,140 --> 01:04:11,030
>> Je voulais vous montrer quelque chose d'autre qui est assez cool ici.

1088
01:04:11,030 --> 01:04:15,230
Je vais claquer cette application, et je vais revenir à Visual Studio.

1089
01:04:15,230 --> 01:04:18,870
Cette application est en cours d'exécution. Il fonctionne à partir de Visual Studio.

1090
01:04:18,870 --> 01:04:21,370
Je peux faire des trucs assez cool avec ça.

1091
01:04:21,370 --> 01:04:23,840
En fait, j'ai une option pour sélectionner un élément,

1092
01:04:23,840 --> 01:04:28,250
et je peux aller ici à l'application en direct et je peux vous dire,

1093
01:04:28,250 --> 01:04:34,000
"Je me demande pourquoi est-Temps de préparation un peu plus léger gris que le titre lui-même?"

1094
01:04:34,000 --> 01:04:35,680
Je peux cliquer dessus.

1095
01:04:35,680 --> 01:04:38,080
Il va synchroniser que de nouveau dans Visual Studio,

1096
01:04:38,080 --> 01:04:43,780
et il va me montrer exactement le contenu généré qui a abouti à cette partie de l'interface utilisateur.

1097
01:04:43,780 --> 01:04:47,270
Donc dans ce cas, c'est l'article sous-titre et h4 à double construction,

1098
01:04:47,270 --> 01:04:51,110
et qui nous dit probablement ce que nous devons savoir, parce que comme h4 dans ce contexte,

1099
01:04:51,110 --> 01:04:53,550
il va y avoir un certain type de police.

1100
01:04:53,550 --> 01:04:56,410
Mais si je ne sais toujours pas pourquoi, je peux cliquer sur Trace Styles.

1101
01:04:56,410 --> 01:05:02,330
Je peux ensuite étendre sur la couleur et je peux savoir exactement pourquoi cette couleur n'est pas la couleur de la carrosserie

1102
01:05:02,330 --> 01:05:04,640
mais en fait, c'est autre chose.

1103
01:05:04,640 --> 01:05:07,210
Il s'agit essentiellement des outils de dev Internet Explorer

1104
01:05:07,210 --> 01:05:09,530
à un degré mis en Visual Studio.

1105
01:05:09,530 --> 01:05:12,110
Si vous avez travaillé avec les outils Chrome Dev, Firebug, des choses comme ça,

1106
01:05:12,110 --> 01:05:14,720
ces types d'outils qui sont dans le navigateur,

1107
01:05:14,720 --> 01:05:17,340
ce genre de fonctionnalité a été apporté à droite dans Visual Studio

1108
01:05:17,340 --> 01:05:22,090
de sorte que vous n'avez pas réellement besoin de lancer un navigateur et de travailler avec ces outils séparément.

1109
01:05:22,090 --> 01:05:24,320
Maintenant, j'ai une application Windows Store juste courir,

1110
01:05:24,320 --> 01:05:27,840
et je peux commencer à tirer à part et de découvrir pourquoi les choses sont en train de faire ce qu'ils sont.

1111
01:05:27,840 --> 01:05:30,440
>> Je peux aussi le faire de cette façon aussi.

1112
01:05:30,440 --> 01:05:35,020
Je peux aller et il suffit de choisir quelque chose de bien à partir du balisage et de savoir ce qu'il est

1113
01:05:35,020 --> 01:05:38,560
dans l'application elle-même. Je pense que je suis allé en tout.

1114
01:05:38,560 --> 01:05:41,440
Ici, je suis planant au-dessus de ce. Je peux sélectionner.

1115
01:05:41,440 --> 01:05:45,540
Il va me montrer dans l'application en cours d'exécution réelle où cette chose est

1116
01:05:45,540 --> 01:05:48,070
que je suis maintenant en cliquant sur dans le balisage.

1117
01:05:48,070 --> 01:05:49,700
Trucs vraiment cool.

1118
01:05:49,700 --> 01:05:52,710
Comme vous êtes à essayer de comprendre ce qui se passe et ce que HTML fait,

1119
01:05:52,710 --> 01:05:56,080
ce CSS est en train de faire, garder cela à l'esprit.

1120
01:05:56,080 --> 01:05:58,450
N'oubliez pas qu'il s'agit ici pour vous

1121
01:05:58,450 --> 01:06:02,070
et aussi que Blend peut travailler avec une application en cours d'exécution en direct.

1122
01:06:02,070 --> 01:06:06,070
>> L'une dernière chose que je voulais vous montrer avec cette application -

1123
01:06:06,070 --> 01:06:09,290
Par ailleurs, il vous montre les deltas comme les choses changent aussi,

1124
01:06:09,290 --> 01:06:11,160
de sorte que vous pouvez regarder les reflets jaunes.

1125
01:06:11,160 --> 01:06:14,060
Ce sont des choses qui viennent de changer dans l'application.

1126
01:06:14,060 --> 01:06:16,350
Mais une dernière chose. Je veux revenir à Mélanger juste une seconde ici.

1127
01:06:16,350 --> 01:06:21,790
Nous ouvrons cette place, ouvert en mélange, même application, même tout.

1128
01:06:21,790 --> 01:06:28,660
Je veux juste vous montrer l'expérience ici n'est pas seulement vous êtes coincé sur la page d'accueil

1129
01:06:28,660 --> 01:06:32,880
en regardant les choses que vous obtenez par défaut lorsque vous exécutez l'application et permettent de se reposer là.

1130
01:06:32,880 --> 01:06:36,490
Vous pouvez également activer cette jolie petite icône ici.

1131
01:06:36,490 --> 01:06:38,560
C'est ce qu'on appelle le mode interactif.

1132
01:06:38,560 --> 01:06:41,560
Vous cliquez sur ce. Il va mettre en place votre demande.

1133
01:06:41,560 --> 01:06:43,730
Vous n'êtes pas en mode Création plus, si vous n'allez pas à cliquer sur les choses

1134
01:06:43,730 --> 01:06:47,270
de changer la fonctionnalité, mais vous pouvez réellement travailler avec l'application maintenant.

1135
01:06:47,270 --> 01:06:51,560
Vous pouvez cliquer sur, vous pouvez faire ce que, arriver à une recette que vous vous souciez

1136
01:06:51,560 --> 01:06:54,810
ou à une catégorie. Allons à cette catégorie.

1137
01:06:54,810 --> 01:06:56,880
Je dis: «Eh bien, voici où je veux concevoir."

1138
01:06:56,880 --> 01:06:59,680
Ensuite, vous cliquez à nouveau sur ce bouton, il vous ramènera dans la surface de conception,

1139
01:06:59,680 --> 01:07:02,130
et maintenant vous pouvez faire toutes ces choses que je parlais avant.

1140
01:07:02,130 --> 01:07:06,230
Je vais garder un clic jusqu'à ce que j'obtienne ce choisi, découvrir ses dimensions,

1141
01:07:06,230 --> 01:07:09,890
trouver le code HTML pour elle, la CSS pour elle

1142
01:07:09,890 --> 01:07:14,990
pour une application en cours d'exécution, une partie ultérieure de l'application.

1143
01:07:14,990 --> 01:07:17,780
Très, très utile. Je vais vous montrer ce à vous.

1144
01:07:17,780 --> 01:07:21,340
S'il vous plaît garder à l'esprit si vous êtes à la recherche dans l'écriture de code avec cette

1145
01:07:21,340 --> 01:07:26,070
parce que ça va vous faire économiser beaucoup de tracas, et c'est assez bonnes choses.

1146
01:07:26,070 --> 01:07:32,370
C'est à peu près tout ce que je voulais vous montrer Blend et Visual Studio pour tout cela.

1147
01:07:32,370 --> 01:07:36,130
>> Une question sur l'un de ces outils?

1148
01:07:36,130 --> 01:07:40,000
Rien du tout? >> [Guarin] J'ai des choses à donner, si les bonnes questions, de bonnes choses.

1149
01:07:40,000 --> 01:07:43,700
>> [Bowen rit] Je vous ai déjà montré mes démos ici.

1150
01:07:43,700 --> 01:07:47,000
Je vais le mettre sur la page Ressources et passer aux questions maintenant.

1151
01:07:47,000 --> 01:07:53,850
Cette première référence est le site App génération avec la piste de jeu et la piste de l'application.

1152
01:07:53,850 --> 01:07:55,040
Inscrivez-vous pour ceux.

1153
01:07:55,040 --> 01:07:57,210
Vous n'avez pas à attendre 30 jours pour obtenir le contenu.

1154
01:07:57,210 --> 01:08:00,370
Vous pouvez commencer à aller et en regardant le contenu que vous souhaitez.

1155
01:08:00,370 --> 01:08:04,380
Je comprends vos délais peuvent être différents de - [rires]

1156
01:08:04,380 --> 01:08:07,780
Alors, quand est le Hackathon? C'est quelques semaines, non?

1157
01:08:07,780 --> 01:08:09,620
Donc, vous n'avez pas 30 jours à attendre.

1158
01:08:09,620 --> 01:08:13,180
Donc oui, vous pouvez vous inscrire pour cela et puis commencer tirant simplement le contenu à partir de lui.

1159
01:08:13,180 --> 01:08:15,320
Aussi la Dev et les centres de conception.

1160
01:08:15,320 --> 01:08:17,620
Et je n'en ai pas parlé, mais il ya aussi le magasin Docs.

1161
01:08:17,620 --> 01:08:22,880
Ce serait pour après le Hackathon que vous êtes prêt à commencer à soumettre vos applications pour la boutique.

1162
01:08:22,880 --> 01:08:27,350
Il ya quelques directives utiles ici, quelques conseils sur la façon de faire avancer les choses dans le magasin,

1163
01:08:27,350 --> 01:08:29,960
certains problèmes courants qui pourraient vous faire trébucher,

1164
01:08:29,960 --> 01:08:32,540
et c'est la fin de ces ressources.

1165
01:08:32,540 --> 01:08:35,300
>> Donc ce qui est sur votre esprit? Tout ce que vous -

1166
01:08:35,300 --> 01:08:40,580
[Guarin] Qui pense à faire une application Windows pour CS50? Cool.

1167
01:08:40,580 --> 01:08:42,200
[Bowen] cool. Grand.

1168
01:08:44,149 --> 01:08:49,410
>> Une question sur les choses que vous avez vu jusqu'à présent et comment il se rapporte à ce sujet?

1169
01:08:49,410 --> 01:08:54,540
Par exemple, plus de temps que je pouvais prendre un jeu que j'ai écrit

1170
01:08:54,540 --> 01:08:57,310
et qui fonctionne dans le navigateur et tout genre de passer par le processus

1171
01:08:57,310 --> 01:08:59,870
de mettre cela dans Visual Studio et en faire une application Windows Store.

1172
01:08:59,870 --> 01:09:02,870
Il prend plus de temps que nous avions vraiment comprendre aujourd'hui,

1173
01:09:02,870 --> 01:09:08,010
mais la version courte est que c'est le même code que vous avez exécuté dans le navigateur,

1174
01:09:08,010 --> 01:09:11,680
et les choses que vous changez les choses que vous décidez de le brancher à Windows 8.

1175
01:09:11,680 --> 01:09:16,220
Donc, si vous souhaitez utiliser charmes, si vous souhaitez rechercher ou partager,

1176
01:09:16,220 --> 01:09:19,899
vous avez besoin pour créer une barre d'application pour cacher certaines fonctionnalités sur que,

1177
01:09:19,899 --> 01:09:21,939
Voilà le genre de choses que vous changeriez.

1178
01:09:21,939 --> 01:09:25,229
Mais le cœur de votre application web peut rester intact.

1179
01:09:25,229 --> 01:09:29,590
Encore une fois, tant que cela fonctionne dans IE10, ça va être un port très facile

1180
01:09:29,590 --> 01:09:33,680
d'apporter ce genre de choses dans Visual Studio, en mélange, et en faire une application Windows Store.

1181
01:09:33,680 --> 01:09:37,500
Encore une fois, les seules choses que vous aurez besoin d'apprendre sont les autres caractéristiques

1182
01:09:37,500 --> 01:09:41,830
que vous pouvez utiliser pour allumer une application, comme une tuile en direct et ce genre de choses.

1183
01:09:41,830 --> 01:09:46,899
>> Ouais. >> [L'élève] Ma question porte sur le travail mobile.

1184
01:09:46,899 --> 01:09:52,210
Donc, si vous faites une application qui fonctionne comme une application sur le bureau,

1185
01:09:52,210 --> 01:09:56,480
est-il vraiment facile de le transférer à mobile, ou est-il un -

1186
01:09:56,480 --> 01:10:01,270
La question est, si je fais une application Windows Store qui est vraiment optimisé pour cet environnement

1187
01:10:01,270 --> 01:10:06,430
et je tiens à porter à un monde mobile, ce qui est impliqué avec cela?

1188
01:10:06,430 --> 01:10:10,060
Que, comme beaucoup de questions, est toujours une réponse en constante évolution.

1189
01:10:10,060 --> 01:10:16,190
Les bonnes nouvelles sont si vous êtes coller avec HTML et JavaScript, CSS,

1190
01:10:16,190 --> 01:10:18,720
si vous êtes à partir d'une application Windows Store,

1191
01:10:18,720 --> 01:10:20,590
il va vous permettre de le mettre sur le Web

1192
01:10:20,590 --> 01:10:24,650
et ensuite utiliser ces types de techniques, telles que les requêtes et les choses médias,

1193
01:10:24,650 --> 01:10:27,180
pour s'adapter à différents dispositifs de taille.

1194
01:10:27,180 --> 01:10:29,900
Cela dit, il ya toujours des cadres et des choses là-bas

1195
01:10:29,900 --> 01:10:33,450
que support s'étendant sur différentes technologies, différentes plates-formes.

1196
01:10:33,450 --> 01:10:35,670
Cela change tout le temps.

1197
01:10:35,670 --> 01:10:40,030
Nous sommes également en train de changer les choses aussi bien que nous nous tournons vers ce que nous avons maintenant

1198
01:10:40,030 --> 01:10:42,950
fait avec Windows Phone 8.

1199
01:10:42,950 --> 01:10:44,930
Nous avons des infrastructures essentielles partagées

1200
01:10:44,930 --> 01:10:48,180
offert entre les applications pour ces environnements.

1201
01:10:48,180 --> 01:10:51,200
Donc, les choses que vous faites pour créer une application Windows Store,

1202
01:10:51,200 --> 01:10:57,790
beaucoup de ces peut se poursuivre dans une application Windows Phone 8 ainsi.

1203
01:10:57,790 --> 01:11:02,270
C'est encore une histoire naissante, donc il ya un peu de contenu à ce sujet à construction.

1204
01:11:02,270 --> 01:11:06,780
Le SDK vient de sortir il ya un peu de temps. Il vient de sortir il ya un peu de temps.

1205
01:11:06,780 --> 01:11:09,920
Mais en termes de plates-formes d'autres aussi,

1206
01:11:09,920 --> 01:11:13,360
vous avez probablement dans de nombreux cadres multi-plateformes ainsi.

1207
01:11:13,360 --> 01:11:16,170
Les bonnes nouvelles sont les choses que vous faites ici,

1208
01:11:16,170 --> 01:11:19,620
la fonctionnalité de base est droite jusqu'à trucs web standard.

1209
01:11:19,620 --> 01:11:24,010
Les seules choses qui ne seraient pas traduire facilement les choses que Windows 8 ne,

1210
01:11:24,010 --> 01:11:28,060
mais ce n'est pas une surprise, car il est une fonctionnalité de Windows.

1211
01:11:28,060 --> 01:11:34,090
Vous n'allez pas trouver le partage ou le même genre de contrats sur tout autre plate-forme.

1212
01:11:34,090 --> 01:11:37,480
Donc, ce sont les choses que vous voudriez dans une perspective de conception

1213
01:11:37,480 --> 01:11:40,820
assurez-vous que vous avez les moyens à type de résumé qui donc vous pouvez dire,

1214
01:11:40,820 --> 01:11:42,970
"Si je cours à ce sujet, je peux le faire."

1215
01:11:42,970 --> 01:11:48,120
Si je ne suis pas, il ya quelques modèles de conception que vous pouvez utiliser pour genre de cacher ce genre de choses là.

1216
01:11:48,120 --> 01:11:53,360
Mais gardez cela à l'esprit. Ouais. Désolé. Allez-y.

1217
01:11:53,360 --> 01:11:58,130
>> [Élève] Si je veux tester mon application Windows sur le dessus de [inaudible]

1218
01:11:58,130 --> 01:12:02,310
[Bowen] Ouais. J'ai sauté une chose trop. Ouais.

1219
01:12:02,310 --> 01:12:04,910
Je vais répondre à votre première question, je vais vous montrer une option J'ai oublié de mentionner.

1220
01:12:04,910 --> 01:12:09,220
Nous avons des machines disponibles localement. Je suis désolé.

1221
01:12:09,220 --> 01:12:11,240
La question était, comment puis-je tester des choses sur les appareils

1222
01:12:11,240 --> 01:12:14,230
si je ne pas arriver à avoir un tas de choses à choisir?

1223
01:12:14,230 --> 01:12:17,130
[Guarin] Nous vous prêté gars, je crois, 5 ou 6. Combien avez-vous besoin?

1224
01:12:17,130 --> 01:12:20,940
[Élève] Nous avons eu 4 d'entre eux. >> Okay. Les gars, c'est 4 ardoises de jouer avec.

1225
01:12:20,940 --> 01:12:25,520
Donc certainement que chacun sache, s'il vous plaît. [Rires] >> [Bowen] impressionnant.

1226
01:12:25,520 --> 01:12:27,610
C'est encore meilleure réponse que je voulais vous donner.

1227
01:12:27,610 --> 01:12:31,250
Nous avons des heures de bureau pour les développeurs que nous faisons à notre bureau

1228
01:12:31,250 --> 01:12:35,110
et maintenant venir bientôt le Microsoft Store sur le Pru,

1229
01:12:35,110 --> 01:12:37,010
mais Edwin a déjà pris soin de vous.

1230
01:12:37,010 --> 01:12:42,180
Il ya 4 ardoises disponibles pour le prêt, pour les tests.

1231
01:12:42,180 --> 01:12:45,440
Nous y voilà. Il ya un exemple de là-haut.

1232
01:12:45,440 --> 01:12:47,340
Donc oui, absolument. Grand.

1233
01:12:47,340 --> 01:12:52,700
Absolument de loin la meilleure façon de le tester est d'être sur un périphérique.

1234
01:12:52,700 --> 01:12:56,810
Si vous n'avez pas la chance d'en avoir un encore ou que vous n'avez pas envie de marcher sur le campus dans la neige

1235
01:12:56,810 --> 01:13:01,130
de saisir un ou que ce soit, il ya un moyen de le faire revenir dans Visual Studio.

1236
01:13:01,130 --> 01:13:10,360
Si je retourne dans où j'étais ici, ici au lieu d'utiliser la machine locale,

1237
01:13:10,360 --> 01:13:13,590
vous pouvez vous connecter à la machine à distance, mais ce n'est pas ce dont je parle ici.

1238
01:13:13,590 --> 01:13:16,830
Simulator est la chose que vous voudrez peut-être examiner.

1239
01:13:16,830 --> 01:13:22,120
Je vais courir ce, et vraiment ce que c'est, c'est essentiellement une fenêtre sur votre propre système.

1240
01:13:22,120 --> 01:13:26,260
Voici en fait mon système en marche, la course Contoso,

1241
01:13:26,260 --> 01:13:29,550
mais d'une manière qui me permet de changer certains paramètres d'exécution,

1242
01:13:29,550 --> 01:13:31,060
les paramètres environnementaux.

1243
01:13:31,060 --> 01:13:34,150
Donc je peux dire ici, "Vous savez quoi?"

1244
01:13:34,150 --> 01:13:39,240
Oh. J'ai déjà en cours d'exécution dans un moniteur 27 pouces simulée à 2560.

1245
01:13:39,240 --> 01:13:44,930
Je peux facilement tomber que vers le bas et voir ce que ma demande serait faire avec un écran plus petit

1246
01:13:44,930 --> 01:13:47,480
ou en modifiant les paramètres DPI ou autre.

1247
01:13:47,480 --> 01:13:50,700
Ainsi, sur un petit écran, un 10,6, ce qui est ce que ça va faire?

1248
01:13:50,700 --> 01:13:53,040
Cela semble encore assez bon, non?

1249
01:13:53,040 --> 01:13:58,220
Vous aurez envie de le faire, surtout si vous vous soumettez à la boutique, parce que nous faisons

1250
01:13:58,220 --> 01:14:00,480
dans le cadre du processus de test.

1251
01:14:00,480 --> 01:14:02,400
Et s'il ya des problèmes de ce genre,

1252
01:14:02,400 --> 01:14:06,160
alors vous pourriez rencontrer un problème d'obtenir la certification pour le magasin.

1253
01:14:06,160 --> 01:14:09,240
Mais cela fait partie du simulateur. Vraiment cool. Très facile à faire.

1254
01:14:09,240 --> 01:14:11,480
Vous pouvez également utiliser des fonctionnalités telles que tourner ainsi.

1255
01:14:11,480 --> 01:14:15,650
Je peux cliquer sur le bouton ici, j'ai il tourner, voir ce qui aurait quelqu'un comme une expérience

1256
01:14:15,650 --> 01:14:20,970
tourner leur ardoise, leur tablette, et en utilisant votre application avec cela.

1257
01:14:20,970 --> 01:14:25,060
Il ya d'autres choses aussi, comme l'émulation de contact et d'autres choses,

1258
01:14:25,060 --> 01:14:27,210
mise GPS.

1259
01:14:27,210 --> 01:14:31,050
Je ne peux prétendre que je suis à un endroit différent et voir ce que mon application ne

1260
01:14:31,050 --> 01:14:34,690
quand je prétends que je suis de retour à Seattle ou quelque chose.

1261
01:14:34,690 --> 01:14:41,970
Mais c'est une fonctionnalité très utile, et il est construit pour Visual Studio et dans Blend.

1262
01:14:41,970 --> 01:14:44,460
Oui. Votre question.

1263
01:14:44,460 --> 01:14:48,530
>> [Élève] Si vous écrivez un jeu, Visual Studio ne dispose pas d'un soutien pour l'animation?

1264
01:14:48,530 --> 01:14:55,550
Ouais. La question est d'environ appui de l'animation, en particulier avec les jeux.

1265
01:14:55,550 --> 01:14:58,380
Cela dépend. [Rires]

1266
01:14:58,380 --> 01:15:06,870
Avec JavaScript, je dirai qu'il ya probablement moins de soutien que il est sur le côté XAML,

1267
01:15:06,870 --> 01:15:11,430
qui a des échéances, a storyboards et les choses qui sont construits po

1268
01:15:11,430 --> 01:15:18,710
Pour les animations sur les applications JavaScript, je ne sais pas combien de réponse, je tiens à vous donner.

1269
01:15:18,710 --> 01:15:25,110
J'ai ressources sur mon blog qui passent par beaucoup d'options pour les animations de physique,

1270
01:15:25,110 --> 01:15:29,280
options pour les jeux JavaScript orientées sur Windows 8.

1271
01:15:29,280 --> 01:15:31,300
Je vous renvoie à celles-ci.

1272
01:15:31,300 --> 01:15:34,300
Fondamentalement, il ya tellement de choix.

1273
01:15:34,300 --> 01:15:37,770
La raison pour laquelle je suis hésitant, c'est qu'il ya tellement de choix pour faire des animations avec JavaScript.

1274
01:15:37,770 --> 01:15:44,280
, Basée toile-Il pourrait être CSS il pourrait être, il pourrait être animations DOM juste de base,

1275
01:15:44,280 --> 01:15:47,470
il pourrait être beaucoup de choses différentes, donc cela dépend vraiment de votre choix.

1276
01:15:47,470 --> 01:15:55,790
Si vous décidez d'utiliser quelque chose comme Create.js ou de chaux ou d'autres types de cadres -

1277
01:15:55,790 --> 01:15:59,150
Eh bien, je ne suis même pas sûr que vous allez être en mesure d'utiliser un cadre haut de gamme

1278
01:15:59,150 --> 01:16:01,370
certainement d'impact ou construire.

1279
01:16:01,370 --> 01:16:07,000
Cela tend à générer plus de code que vous pourriez envisager de partir de zéro.

1280
01:16:07,000 --> 01:16:11,730
Mais dans ces cas, vous pouvez toujours utiliser un simulateur, vous pouvez utiliser les environnements,

1281
01:16:11,730 --> 01:16:17,480
et j'ai tendance à simplement utiliser cet environnement pour ma plate-forme de test dans les cas

1282
01:16:17,480 --> 01:16:19,930
comme je suis le développement de jeux.

1283
01:16:19,930 --> 01:16:22,110
J'ai été très bien surtout avec animations toile,

1284
01:16:22,110 --> 01:16:23,850
qui est probablement la chose la plus commune.

1285
01:16:23,850 --> 01:16:27,360
Le mieux que vous allez probablement dire les outils de dev dans le navigateur

1286
01:16:27,360 --> 01:16:30,160
et les outils de développement Visual Studio.

1287
01:16:30,160 --> 01:16:34,610
Une sorte de réponse méandres là, mais j'espère que j'ai obtenu votre réponse. Oui. Vous.

1288
01:16:34,610 --> 01:16:36,470
>> [Élève] Quelles sont les options de stockage de données pour les applications Windows 8?

1289
01:16:36,470 --> 01:16:41,100
Quelles sont les options de stockage de données pour les applications Windows 8, les applications Windows Store?

1290
01:16:41,100 --> 01:16:46,790
Vos options sont vraiment chaque application possède sa propre piscine de stockage local

1291
01:16:46,790 --> 01:16:52,150
pour les paramètres et des données, mais il est aussi ridiculement facile à utiliser itinérance stockage,

1292
01:16:52,150 --> 01:16:54,920
utiliser le stockage en nuage. C'est gratuit.

1293
01:16:54,920 --> 01:16:58,250
Ce qui se passe est que vous choisissez fondamentalement une classe différente et vous dites,

1294
01:16:58,250 --> 01:17:03,370
"Paramètres d'itinérance, Enregistrer, cet ensemble particulier de contenu»,

1295
01:17:03,370 --> 01:17:06,050
et leur compte Microsoft, ce qu'ils ont signé en tant que,

1296
01:17:06,050 --> 01:17:08,620
va être la clé de l'itinérance que les informations autour.

1297
01:17:08,620 --> 01:17:13,790
Donc, si j'utilise votre jeu sur mon ordinateur portable et je me connecte avec le même compte

1298
01:17:13,790 --> 01:17:18,900
et je joue le jeu sur une surface ou une tablette,

1299
01:17:18,900 --> 01:17:23,610
qui sera automatiquement déplacer ce paramètre et de données entre les machines.

1300
01:17:23,610 --> 01:17:27,550
C'est une chose de défaut. C'est bon pour certaines quantités de données.

1301
01:17:27,550 --> 01:17:30,220
Vous ne mettriez pas une énorme base de données dans ceux-ci.

1302
01:17:30,220 --> 01:17:35,350
Pour cela, vous devez aller à d'autres types de solutions, comme une base de données hébergée dans le nuage,

1303
01:17:35,350 --> 01:17:36,690
des choses comme ça.

1304
01:17:36,690 --> 01:17:39,840
Il existe d'autres options de la communauté autour d'autres types de technologies de données.

1305
01:17:39,840 --> 01:17:42,920
J'ai vu quelques options SQLite dans la communauté autour de là aussi.

1306
01:17:42,920 --> 01:17:46,690
Donc, de plus en plus font leur apparition, mais ce sont les premières choses que vous voulez regarder vers

1307
01:17:46,690 --> 01:17:49,430
pour un jeu ou une application.

1308
01:17:49,430 --> 01:17:50,610
Et vous aviez une question dans le dos aussi.

1309
01:17:50,610 --> 01:18:02,390
>> [Élève] En termes de réseau [inaudible] téléchargement de fichiers [inaudible]

1310
01:18:02,390 --> 01:18:04,870
[Bowen] Votre question est comment pouvez-vous voir ce que ou comment pouvez-vous déboguer et que tester?

1311
01:18:04,870 --> 01:18:10,630
[Élève] Comment pouvez-vous déboguer [inaudible]

1312
01:18:10,630 --> 01:18:12,670
Désolé. Je ne peux pas entendre tout cela.

1313
01:18:12,670 --> 01:18:16,480
[Élève] Comment obtenez-vous ce bug testé et aussi [inaudible]

1314
01:18:16,480 --> 01:18:17,490
Grand. Grand.

1315
01:18:17,490 --> 01:18:21,860
Comment travaillez-vous avec le réseau? Comment pouvez-vous voir ce qui se passe?

1316
01:18:21,860 --> 01:18:23,620
Il ya beaucoup de réponses différentes à celui-ci,

1317
01:18:23,620 --> 01:18:26,420
mais permettez-moi de vous montrer probablement les choses les plus faciles ici.

1318
01:18:26,420 --> 01:18:29,350
Permettez-moi de me débarrasser du simulateur pour une seconde.

1319
01:18:29,350 --> 01:18:31,740
Juste quelques options de débogage pour le réseautage.

1320
01:18:31,740 --> 01:18:36,070
Il ya une pile de réseau complet cuit à droite dans la fois au niveau WinRT et de WinJS,

1321
01:18:36,070 --> 01:18:42,810
de sorte que vous pouvez très facilement faire XHR, de type AJAX appels de votre jeu ou une application à le faire.

1322
01:18:42,810 --> 01:18:47,250
Principalement, j'ai tendance à utiliser deux choses.

1323
01:18:47,250 --> 01:18:53,660
J'utilise les outils de dev réels eux-mêmes, qui ont une pile réseau cuit en eux.

1324
01:18:53,660 --> 01:18:55,870
Permettez-moi de vous montrer la page d'accueil de Windows.

1325
01:18:55,870 --> 01:19:02,730
Je peux apporter cette place, et il ya effectivement un proxy réseau cuit dans ces outils ici.

1326
01:19:02,730 --> 01:19:08,390
Donc, je peux le faire, je peux actualiser la page, et ça va me montrer toutes les interactions,

1327
01:19:08,390 --> 01:19:14,550
y compris les appels AJAX pour cette session, pour la durée de cette demande.

1328
01:19:14,550 --> 01:19:17,600
Ceci est utile. Ça va être très utile pour les applications basées sur un navigateur.

1329
01:19:17,600 --> 01:19:20,470
Pour les autres types d'applications, y compris les applications de Windows Store,

1330
01:19:20,470 --> 01:19:23,970
J'utilise un outil appelé Fiddler.

1331
01:19:23,970 --> 01:19:29,650
Vous allez obtenir un jeu en réponse. [Rires]

1332
01:19:29,650 --> 01:19:32,750
Fiddler est un proxy simple. Je pense que je peux montrer que vous.

1333
01:19:32,750 --> 01:19:40,190
C'est juste GetFiddler.com, qui, curieusement, je traçage ma pile réseau

1334
01:19:40,190 --> 01:19:41,740
aller à GetFiddler.

1335
01:19:41,740 --> 01:19:45,700
Mais de toute façon, Fiddler a été écrit par l'un des Premiers ministres de l'équipe IE,

1336
01:19:45,700 --> 01:19:48,290
donc il sait ce qu'il fait.

1337
01:19:48,290 --> 01:19:52,630
C'est un bon indicateur que vous pouvez utiliser pour le trafic réseau de débogage.

1338
01:19:52,630 --> 01:19:55,730
Je recommande que. Question là-bas aussi.

1339
01:19:55,730 --> 01:19:58,050
>> [Élève] Y at-il un moyen facile d'intégrer entrée de langue étrangère,

1340
01:19:58,050 --> 01:20:00,810
comme le japonais ou le chinois, dans les applications de Windows?

1341
01:20:00,810 --> 01:20:03,240
Je ne peux pas dire que j'ai fait trop de moi-même, mais il est cuit po

1342
01:20:03,240 --> 01:20:08,470
Il ya des options pour l'émission bien sûr votre application - je suis désolé, je n'ai pas dit la question -

1343
01:20:08,470 --> 01:20:11,100
les options sur la mondialisation, la localisation du contenu,

1344
01:20:11,100 --> 01:20:14,320
y compris des choses comme étant en mesure de vendre sur des marchés différents

1345
01:20:14,320 --> 01:20:19,190
et cibler cette version de l'application pour les différentes langues

1346
01:20:19,190 --> 01:20:21,080
ou cultures ou des choses comme ça. Absolument construit po

1347
01:20:21,080 --> 01:20:22,980
Nous avons obtenu un soutien pour que, pour toujours,

1348
01:20:22,980 --> 01:20:26,630
et qui porte en avant dans vos options pour Windows Store.

1349
01:20:26,630 --> 01:20:30,450
Vous pouvez le faire dans le magasin lui-même, de vendre sur des marchés différents,

1350
01:20:30,450 --> 01:20:34,050
vous pouvez le faire dans l'application ainsi trop à l'utilisation des ressources à définir,

1351
01:20:34,050 --> 01:20:42,220
«Si je suis développé pour cette culture, puis utiliser ces dérogations pour mon contenu textuel

1352
01:20:42,220 --> 01:20:44,510
»Ou utiliser un droit de lecteur gauche."

1353
01:20:44,510 --> 01:20:51,290
Ce sont tous partie des WinJS par défaut et WinRT API. Bonne question.

1354
01:20:51,290 --> 01:20:54,770
>> Comment faisons-nous? D'autres?

1355
01:20:54,770 --> 01:20:58,850
Et si quelqu'un a des questions sur la vidéo, je cbowen @ microsoft,

1356
01:20:58,850 --> 01:21:02,790
donc je suis heureux de prendre toutes vos questions de l'avenir.

1357
01:21:02,790 --> 01:21:05,690
Très - De l'avenir, l'avenir [imite écho].

1358
01:21:05,690 --> 01:21:09,140
Donc, ici, c'est moi. Permettez-moi de revenir mon contact ici.

1359
01:21:09,140 --> 01:21:11,840
Alors envoyez-moi une note, cbowen @ microsoft,

1360
01:21:11,840 --> 01:21:15,190
et je vais revenir vers vous dès que possible.

1361
01:21:15,190 --> 01:21:19,010
>> Tout ce que vous vous demandez? Sommes-nous bien?

1362
01:21:19,010 --> 01:21:24,050
Grand. Très bien. Je vous remercie tous beaucoup. Je l'apprécie. [Applaudissements]

1363
01:21:24,800 --> 01:21:27,000
>> [CS50.TV]