[Powered by Google Translate] [Séminaire - Windows 8 - Développement App / Jeu avec HTML5]
[Chris Bowen, Edwin Guarin - Université Harvard]
[C'est CS50. - CS50.TV]
>> Hey, tout le monde. Mon nom est Edwin Guarin. C'est Chris Bowen.
Je vais le laisser se présenter dans une seconde.
Je veux juste faire une annonce rapide.
Tout d'abord, tout ce que vous CS50 étudiants obtiennent Windows 8 gratuitement.
Donc, si vous songez à fait l'utiliser pour votre projet final, c'est la vôtre.
Nate enverra un e-mail plus tard pour les instructions.
La deuxième chose est que si vous décidez d'écrire une application Windows 8 pour votre projet final CS50,
nous allons faire quelques cadeaux: une Xbox,
nous pourrions être en mesure de donner une ardoise loin, des trucs comme ça.
Donc, s'il ya quelque chose qui vous retient, laisser Chris ou je sais
comment nous pouvons vous aider à construire quelque chose de vraiment cool.
Donc merci encore d'être venus aujourd'hui, et je vais les remettre à Chris.
>> Merci, Edwin.
Merci, tout le monde, pour se joindre à nous aujourd'hui.
Je suis Chris Bowen. Je suis l'un des collègues de Edwin ici dans le Nord.
Je voulais juste passer un peu de temps avec vous parle
comment faire une application Windows Store avec HTML5, JavaScript et CSS
et le type de obtiennent toutes les questions que vous pourriez avoir à ce sujet ont répondu pour vous
que vous êtes à la recherche vers de penser à peut-être l'utiliser pour un CS50 finales occasion.
>> Cela dit, nous allons plonger en plein dedans
Je vais aller sur des diapositives ici.
Si vous avez des questions, n'hésitez pas à m'envoyer un email.
Je suis cbowen@microsoft.com, et il ya mon blog et mon Twitter.
Cependant, vous souhaitez entrer en contact avec moi, c'est très bien.
J'ai environ une heure de choses, et je veux obtenir vos questions en cours de route,
alors ne soyez pas timide au sujet de questions au cours de cette.
Ils ne peuvent pas voir qui pose les questions sur l'enregistrement,
de sorte que vous serez aussi anonyme que vous voulez être.
>> Permettez-moi de plonger en plein, juste vous donner une rapide introduction à Windows 8,
et vous montrer quelques-unes des choses sur les applications Windows Store que vous pourriez envisager
que vous songez à développer une application.
Nous cherchons à Windows 8. Nous ne sommes pas sortis quelques semaines maintenant.
Beaucoup d'adoption fort là-bas déjà.
Vous avez peut être déjà vu les machines de surface que nous avons ainsi.
Il ya une ici en fait, vous pouvez jeter un oeil à si vous êtes ici en personne.
Je veux vraiment vous parler, de vous montrer un petit peu sur Windows 8.
L'idée avec Windows 8, il n'apporte vraiment en avant toutes les choses que vous savez à propos de Windows
dans de nouvelles expériences - en particulier, des choses comme sur la machine de la surface de contact,
ce type de dispositifs les plus mobiles qui sont maintenant sur le marché,
mais c'est aussi de Windows à sa base.
Donc, cela signifie que vous pouvez l'installer vraiment sur tout ce qui fonctionne sous Windows 7,
à partir de votre plus grand triple SLI jeu plate-forme vers le bas pour votre ordinateur portable
et à vos brillantes nouvelles d'autres appareils que vous pourriez ramasser aujourd'hui.
Ils exécuteront Windows 8.
Je vais vous faire visiter un peu,
et toutes les expériences que vous verrez ici sont des choses que vous pouvez créer.
L'idée est de savoir si il est tactile, souris, clavier,
quel que soit le dispositif que vous utilisez votre application sur, ça va fonctionner très bien.
Windows 8 aidera avec tous ces scénarios.
>> Ces lames de côté, allons-y juste en prenant un coup d'oeil ici.
Permettez-moi de vous montrer autour de mon écran d'accueil. Ceci est mon écran de démarrage.
Je vais vous donner un peu d'un tour ici.
Je suis sur une machine non-contact, donc autant que je veux toucher l'écran de mon ordinateur portable,
il ne fera pas une chose, donc je vais juste faire défiler ici un peu et vous montrer.
Certaines choses que vous remarquerez peut-être sont le fait que ceux-ci ce sont appelées tuiles en direct
en fait peut animer, et ils peuvent fournir des informations pour vous -
peut-être des mises à jour sur les statistiques pour un jeu
ou vous montrer des nouvelles de quelques-unes des applications antérieures qui sont ici sur le côté gauche.
Nous y voilà. Je suis sûr que ce n'est que positif et incroyablement bonnes nouvelles.
Vous pouvez voir ici c'est vraiment d'appeler votre attention sur l'application, en disant:
"Hé, il ya quelque chose de nouveau ici. Jetez un oeil. Revenez et voir ce qui est nouveau pour vous."
C'est ce qu'on appelle live tile, et vous pouvez faire des notifications
soit directement depuis l'application elle-même
ou si vous prenez un coup d'oeil plus en détail, vous découvrirez comment écrire un service distant
qui peut effectivement pousser informations à la tuile,
qui est ce qui se passe avec ces nouvelles applications.
Ils sont en fait avoir des nouvelles de la nuée et de mettre à jour la tuile là
que les gens sachent qu'il ya une raison pour ouvrir l'application et de prendre un coup d'oeil
à ce que les dernières nouvelles est dans l'une de ces
ou si il ya de nouvelles recettes ou un score à battre
ou un ami à jouer ou quoi sur ces applications.
C'est quelque chose pour vous séduire Dans
Voilà donc les tuiles en direct, et il pourrait être une personne, il pourrait être un site Web.
Habituellement, il s'agit d'une application.
>> Quasiment toutes ces choses que j'ai ici proviennent du Windows Store. Je lance ça.
C'est l'une des applications que vous obtenez par défaut
sur n'importe quelle machine qui exécute Windows 8.
Vous pouvez venir ici pour trouver tout ce que vous voudriez,
des choses qui sont mises en évidence à des jeux que je n'ai pas vu avant.
Oh, wow, nous avons un nouveau flipper ici.
Vous pouvez installer ces ici dans le magasin,
et nous allons parler de la façon de les développer.
Vous avez beaucoup de choix dans la façon dont vous les créez.
Nous ferons un point sur l'histoire de JavaScript avec HTML et CSS,
mais à l'utilisateur, à l'acheteur de l'application, ce n'est pas grave ce qu'il a été écrit po
Ils peuvent aller de l'avant et travailler avec elle.
Je suis intrigué par celui-ci, donc j'ai besoin d'ouvrir cette place et jeter un oeil.
Chaque application, y compris ceux que vous pouvez soumettre et vendre ou donner gratuitement,
tout ce que vous voulez faire dans le magasin, vous obtiendrez une page d'accueil comme ceci.
Vous pouvez joindre à votre demande un tas de captures d'écran - vous voyez certains ici -
détails sur l'application, et au fil du temps vous accumulez deux notes -
ils sont fondamentalement juste le nombre d'étoiles - et des critiques,
qui fournissent un peu plus de perspicacité.
En fait, quelqu'un doit taper quelque chose et vous dire combien vous êtes génial,
et qui ira dans votre section Commentaires ici, que je n'ai pas regardé.
Fantastique. "Will même pas ouvrir." Comment grand.
Eh bien, pour les gens pour qui cela n'a ouvert et terme, ils semblent vraiment en profiter. [Rires]
Gardez cela à l'esprit. Internet. N'importe qui peut dire ce qu'ils veulent à propos de votre demande.
Donc, assurez-vous que vous faites un excellent travail avec lui,
assurez-vous que vous faites aussi confortable pour l'utilisateur que vous pouvez
parce qu'ils sont un couple clics de fournir un avis,
et qui accumuler jusqu'à votre note globale d'évaluation.
Et vous voulez faire de votre mieux parce que vous allez être contre d'autres applications.
Il y aura des milliers d'applications déjà dans le magasin,
et les chances sont, il peut y avoir quelque chose qui fait des fonctionnalités similaires à ce que vous faites.
Donc, si vous pouvez vraiment se démarquer de la foule, qui va être à votre avantage, bien sûr.
>> Nous allons entrer dans le magasin un peu plus tard.
Je veux vraiment mettre l'accent sur la création d'applications.
Mais la version courte de la boutique est la distribution dans le monde entier,
il est automatiquement partie de Windows 8, des gens tirent vers le haut et jeter un oeil à diverses applications ici,
vous avez le livre d'autocollants Dress-Up et toutes sortes de différentes applications.
Peinture fraîche, j'utilise ce lot - mal, mais je l'utilise beaucoup.
Il me montrant que je possède déjà.
Laissez-moi vous montrer quelque chose que je n'ai pas - UVideos je n'ai pas de nouvelle.
Vous voyez ici c'est gratuit, et vous pouvez l'installer dès le magasin.
Vous avez le choix aussi. Vous pouvez bien sûr donner.
Vous pouvez mettre de la publicité dans l'application ou jeu.
Vous pouvez également payer pour cela, et vous pourriez très facilement fournir un procès pour l'application ainsi
de sorte que vous pouvez laisser les gens l'essayer pendant une semaine ou ce que vous voulez faire.
C'est juste personnalisable via le portail. Vous n'avez pas à écrire un code pour cela.
Donc, vous dites: «Vous pouvez l'utiliser pour une semaine, puis vous avez eu à l'acheter»,
ou vous pouvez faire des choses comme, «Vous pourriez jouer les 3 premiers niveaux de ce jeu
"Et puis vous avez à acheter pour accéder au reste."
Vous pourriez même faire des achats in-app, ainsi, de sorte que vous pouvez dire,
"Nous avons des aventures ou des ensembles de graphiques ou des choses qui sont débloqués supplémentaires -
"Plus de recettes qui sont débloqués -. Si vous achetez ces ensembles étendus"
Et vous pouvez le faire tout dans l'application ou le jeu lui-même.
Donc, totalement à vous, votre choix.
Il ya beaucoup de choses que vous pouvez faire dans le magasin,
puis, fondamentalement, vous êtes le soumettre à un canal de certification.
Nous pouvons parler tout à ce sujet un peu plus tard, mais c'est le but.
Vous voulez obtenir votre application visibilité dans le monde entier dans le magasin ici.
>> Retour sur l'écran de démarrage ici, je voudrais vous montrer un petit peu plus.
Si je lance ces applications, laissez-moi vous donner un exemple de certaines fonctionnalités cross-application ici.
Pour ce faire, je vais lance Fresh Paint.
Une chose que vous voyez ici est chaque bit de l'écran,
tous les pixels de l'écran, allez à votre application.
Allés sont les jours où vous avez ces frontières autour des fenêtres
avec beaucoup de boutons qui sont toujours là prennent de la place tout le temps.
Maintenant, vous voulez vraiment sortir de cela et avoir juste votre contenu soit le focus.
Nous pouvons faire des choses avec Windows en accédant à d'autres types de menus.
L'un d'eux est en fait ce qu'on appelle la barre des charmes,
et il sort par le côté de l'écran.
Vous pouvez réellement feuilleter depuis le côté si vous avez un écran tactile,
vous pouvez faire un clic droit si vous disposez d'une souris, il ya un raccourci clavier pour cela,
il ya toujours plus d'une façon de faire quelque chose dans l'environnement ici.
Cela apporte un certain nombre de choses que vous pouvez faire.
La plus évidente est que vous pouvez revenir à l'écran de démarrage,
mais les 4 autres sont ce qu'on appelle des charmes.
Ce sont des contrats que vous pouvez brancher en tant que développeur de l'application. Ils sont assez cool.
Recherche, je suis sûr que c'est quelque chose que vous allez faire,
partage, je vous montrerai dans un instant,
et périphériques et paramètres, ce sont toutes les choses que votre application peut se brancher sur
de tirer parti de Windows, de dire: «J'ai fait ma part
"Et je veux Windows pour soutenir d'autres fonctionnalités,
"Et je ne veux pas écrire beaucoup de code pour que cela se produise."
C'est vraiment un avantage de l'utilisation de ces fonctionnalités.
Permettez-moi de vous montrer un.
Pour ce faire, je vais faire une nouvelle peinture.
J'ai également parlé de l'aide chaque pixel pour votre application.
Par défaut, c'est ce que la peinture app ressemble quand vous l'utilisez.
C'est vraiment juste sur ce que vous dessinez, votre contenu.
Je pourrais faire des choses horribles ici. Que dois-je en tirer? Je ne sais pas.
Gribouillis? Oh, génial. Je peux faire des gribouillis. Fantastique.
Une dinde? [Rires]
Il s'agit de la dinde le plus abstrait, vous verrez.
Je peux aussi faire apparaître ce qu'on appelle la barre d'application,
et c'est vraiment l'un des principaux moyens que vous pouvez utiliser
à cacher toutes les choses qui auraient pu être sur votre application ou un jeu avant
juste prendre de place tout le temps.
Alors maintenant, vous pouvez le mettre ici, et c'est vraiment l'un des plus belles expériences
avec la barre d'application que j'ai vu.
Mettez les choix ici pour sélectionner différentes couleurs.
Nous voulions une dinde, donc nous allons mettre un peu brun ici, commencer à mixer dans quelques couleurs.
Nous allons prendre une couleur intermédiaire ici et puis revenir ici.
Vous pouvez commencer à dessiner. Il ya la dinde. Fantastique.
Je ne peux pas dessiner pour commencer, mais de le faire avec un touchpad devant un public, c'est encore mieux.
C'est génial.
L'idée, cependant, c'est tout ce qui m'importe est ici sur la surface.
Disons que je suis satisfait de ce que j'ai à partager avec quelqu'un.
Normalement ce que vous feriez avec d'autres versions de Windows,
vous auriez peut-être prendre une capture d'écran, vous devriez faire un peu de copier-coller votre texte
ou des choses comme ça que vous voulez partager,
et puis aller ouvrir une autre application et mettre en elle.
Ici, vous n'avez pas à le faire.
Vous pouvez effectivement faire ressortir la barre des charmes et dire: «Je veux partager."
A ce stade, il va vous montrer toutes les applications
qui savent comment travailler avec tout ce qui est partagé.
Dans ce cas, il s'agit d'une image, il va dire: «Je vois que vous avez une image."
"Voulez-vous partager?" Vous pouvez voir que l'email me bourrer tout le temps.
Il reconnaît que, et il m'offre que comme un raccourci,
mais il est aussi en me montrant toutes les applications qui sait comment faire face à la prise de vue
et faire quelque chose avec elle.
Ils ont tous indiqué à Windows qu'ils peuvent le faire.
A ce stade, ce n'est Windows.
L'utilisateur choisit simplement ce qu'ils veulent faire avec elle.
Je ferai de mon habitude de PuzzleTouch. Vous pouvez voir que j'ai créé toutes sortes d'énigmes au fil du temps.
Je vais prendre PuzzleTouch et dire: «Je veux partager cette création étonnante avec PuzzleTouch."
Ça va aller de l'avant et dire: «Grand. Vous souhaitez partager? Fantastique."
«Voulez-vous faire un puzzle qui est facile, intermédiaire, quel que soit?"
Je vais faire une intermédiaire ici.
Il rend le puzzle. Ça va être un casse-tête terrible, parce que c'est surtout vide.
Mais il est prêt, et c'est en fait revenir dans l'autre application.
Si je viens ici, je peux le rechercher et de le lancer.
Maintenant, si nous faisons défiler sur un peu ici, nous devrions voir ma création quelque part.
Où suis-je allé? Quel genre de casse-tête ai-je fait? Ai-je fait-il facile?
Oh, il est là, juste là.
[Rires] C'est le casse-tête facilement reconnaissable de dinde qui est ici.
Mais la chose que je veux vous faire remarquer, le truc cool ici
est les applications ne savent rien de l'autre.
Ils ont seulement dit, "j'ai une image à part, et je sais comment faire face à des photos."
Et vous en tant que développeur, vous n'avez pas à écrire ce code.
Quand quelqu'un me demande de partager, je vais mettre des données dans cette petite structure de données
et je suis fait.
L'autre application prend en charge, fait son travail, et c'est la fin de l'expérience de partage.
C'est juste une chose que vous pouvez faire - vraiment, vraiment puissant -
et ça va être une de ces choses qui pourrait vraiment aider à différencier votre application
et aussi votre jeu trop dans le magasin.
Les gens vont être en mesure de dire: «Ceci est vraiment utile."
"J'utilise ce créateur de puzzle tout le temps. C'est fantastique."
>> C'est assez sur un bref aperçu de ce qui se passe ici.
Il ya quelques autres fonctionnalités aussi que peut-être nous allons mettre en évidence que nous avançons dans le code.
Mais je tiens à plonger dans les diapositives, et pour ce faire, je vais aller sur le bureau,
qui est elle-même une autre tuile en direct ici.
Je peux aller sur cette question et, bien sûr, je suis sur mes diapositives,
mais permettez-moi de vous montrer réellement où nous en sommes.
Nous sommes en fait en mode Desktop.
C'est vraiment là où ce que je disais avant sur Windows report
à de nouvelles expériences se montre.
C'est le Windows que vous savez.
Applications Windows sont appelés applications de bureau. Ils courent ici.
Si vous avez des applications existantes et que vous souhaitez les exécuter sur Windows 8,
vous ne pouvez absolument le faire.
Ce ne sont pas les mêmes choses que les applications de stockage, qui sont ici,
comme Peinture fraîche et ces applications NBC News et des choses comme ça. Ceux-ci viennent de la boutique.
Ils peuvent se brancher sur quelques-unes des fonctionnalités que je vous montrais
et d'autres que je ne vous ai pas encore montré tout.
Mais il faut garder cela à l'esprit. Nous avons l'appui de ces deux choses.
Je suis désolé. Est quelque chose de pas s'affiche sur l'écran? J'ai perdu complètement. C'est étrange.
Très bien. Merci pour cette remarque.
Qu'est-ce que vous n'avez pas été voir pendant un certain temps, c'est vous ma montrant que le bureau est ici.
Quelle est la dernière chose que vous avez vu? Avez-vous vu cela?
C'est le bureau. Vous savez déjà à quoi il ressemble.
Il n'y a rien de terriblement inhabituel.
C'est notre réalisation de cette expérience avant pour vous et vous permet d'utiliser les choses que vous avez eu.
Par exemple, je vais vous montre Visual Studio. C'est une application de bureau.
Il va courir dans ce mode.
Il va soutenir un environnement plus complexe
avec beaucoup d'options et de choses comme ça, et il est donc une bonne option comme une application de bureau.
>> Cela dit, passons à lames pour un peu
et vous donner un peu de contenu d'introduction, puis obtenir en fait codage ici.
Les bonnes nouvelles sont que j'ai entendu que vous avez mis l'accent sur un terrain de CSS et JavaScript, HTML.
Toutes ces choses que vous avez appris report directement dans la prise applications Windows Store.
Les choses que vous avez entendu parler d'appliquer les sélecteurs CSS et toutes ces choses
c'est exactement ce que vous faites pour créer une demande ici pour le magasin.
Nous allons passer par les choses petit à petit.
Fondamentalement, je vais construire sur les choses que vous avez déjà pris le temps d'apprendre.
C'est le tableau d'ensemble des technologies que vous pouvez utiliser
de faire des applications pour Windows 8.
Le truc sur la droite, les applications de bureau, c'est vraiment ce que nous savons déjà.
Ce sont des choses qui est vraiment le monde Windows 7 reportées dans Windows 8.
Toutes ces options report: C #, VB, Win32 type de développement.
Grand. Pas de problème. Le nouveau truc est sur le côté gauche.
C'est applications Windows Store, c'est là que je veux que ma demande soit branché sur Windows 8
en utilisant toutes ces fonctionnalités, faites-le dans le magasin, et obtenir cette expérience vraiment cool
des applications Windows Store.
Pour ce faire, vous pouvez le voir ici, vous avez tous vos choix avec XAML, C + +,
C #, VB, vous pourriez faire DirectX, ce genre de choses, des choses qui vont au-delà de la diapositive.
Mais pour nous, nous allons nous concentrer en plein sur le fait que HTML, CSS et JavaScript
sont vraiment un citoyen de première classe pour la réalisation des applications pour Windows 8
et pour le Windows Store.
Donc ce qui est bon pour tout le monde ici et les gens regardent à la vidéo
parce que vous ne pouvez tirer parti de toutes ces expériences que vous avez
et vraiment attacher dans ce que Windows offre.
Vous allez faire que grâce à un ensemble d'API, qui ne devrait pas être une surprise.
Chaque OS a ses propres API.
Nous exposons ce que Windows peut faire à travers ce qu'on appelle WinRT.
C'est un ensemble d'API qui fait juste tout pour vous.
Si vous avez besoin d'ouvrir des fichiers, vous devez utiliser l'appareil photo, la géolocalisation, des choses comme ça,
ils passent par ce que Windows peut vous offrir.
Pour accéder à cela, nous avons un peu plus de JavaScript qui va rendre encore plus facile
pour vous de le faire. Nous y reviendrons dans un instant.
Mais pour l'instant, c'est essentiellement votre feuille de route.
Les choses que vous avez déjà été faites sur le dessus de certaines API
que vous aider à travailler avec Windows équivaut app store.
Et c'est vraiment tout ce que vous devez savoir de haut niveau.
>> Nous allons plonger dans effectivement travailler avec les choses maintenant.
Les choses que vous avez probablement déjà vu un tas de,
avec IE9 un peu en arrière, nous avons introduit un soutien pour beaucoup de l', à l'époque,
nouvelles normes dans le Web, de sorte que beaucoup de nouvelles fonctionnalités CSS,
beaucoup de nouvelles HTML, ECMAScript 5, ce qui est vraiment JavaScript.
Donc tout pour que, sauf pour le mode strict était dans IE9.
Juste une tonne de choses avec CSS, CSS3, tout là-dedans.
Et tout ça reporte dans ce que nous faisons avec Windows 8.
Vous pouvez utiliser ces choses, et vous pouvez utiliser tout ce qui est nouveau dans IE10.
Avec IE10 nous introduisons un soutien pour toutes ces choses ainsi.
Ils sont tous à accélération matérielle, donc si vous êtes sur une machine qui a une sorte de GPU,
qui est probablement à peu près toutes les machines que vous pourriez obtenir dans les 8 dernières années,
vous allez être en mesure d'avoir la sortie de l'accélération matérielle,
sortie visuelle avec CSS, Canvas, SVG.
Toutes ces choses vont passer par l'accélération matérielle
et être beaucoup plus rapide et plus efficace.
La version courte de tout cela - je ne vais pas passer tout seul ici -
si vous le voyez sur cette liste, si vous pouvez le faire dans IE10,
si c'est une application web que vous utilisez qui fonctionne dans IE10,
c'est quelque chose que vous pouvez faire comme une application Windows Store.
Et c'est à peu près tout. Donc, si cela fonctionne dans IE10, il va travailler comme une application Windows Store.
C'est sur la table comme quelque chose que vous pouvez utiliser.
>> Il ya beaucoup de choses ici. Nous n'avons pas jusqu'à minuit, donc je ne peux pas tout revoir ici.
Mais il ya des sites qui vous aideront à comprendre ce que ces choses peuvent faire,
et je vais vous montrer l'un d'eux dans une seconde.
Je voulais juste souligner quelques-unes des principales choses que vous pouvez regarder.
Peut-être que vous avez déjà vu certains de ces derniers dans vos études,
mais ceux-ci sont vraiment utiles, en particulier avec les applications Windows Store, du côté de la CSS.
Donc être capable de faire des transformations et des transitions, fournir des mouvements dans l'animation -
Ils font tous partie de CSS maintenant, et ils sont tous pris en charge par les navigateurs modernes,
et IE10 et IE9 ont ajouté le support au fil du temps pour toutes ces choses.
Et alors pourquoi écrire vous-même, pourquoi passer par tous les ennuis de faire ces choses à la main
lorsque vous pouvez utiliser la transformée d'une simple CSS pour créer un effet 3D pour votre application?
Grand. Voilà comment cela fonctionne.
Je ne peux pas faire plus difficile que cela.
Si vous savez comment le faire en CSS, vous savez comment le faire dans l'application Windows Store.
>> Au-delà de ce que pour la mise en page, des choses comme même l'app store,
mais aller au-delà, en regardant peut-être une application de nouvelles qui vous montrant articles
ou des recettes ou des choses comme ça, ces autres types de fonctionnalités CSS sont vraiment utiles:
Grille, Flexbox, Régions CSS est plus d'une assez nouvelle norme ainsi.
Ces choses vont tous vous aider disposez contenu et des flux de contenus entre les sections,
être capable de faire la pagination et la césure sans avoir à écrire les choses vous-même.
Vous venez de dire, "S'il vous plaît ne le suit pour moi»,
et que l'immobilier de l'écran est différent sur des machines différentes
ou comme vous le verrez dans un instant, que vous prenez une demande
pour avoir de plus petites quantités d'espace sur l'écran, ce n'est pas un problème pour le CSS.
Il peut profiter de - parler We'Ll sur les requêtes des médias dans une seconde -
il peut prendre soin des choses avec le repositionnement de votre contenu, coule contenu des régions
seulement avec ces choses que vous avez peut-être déjà vu avec la technologie Web.
>> Sur le côté HTML5, il ya aussi un tas de choses
qui sera très utile pour vous avec des applications Windows Store.
Encore une fois, nous ne serons pas passer par tout cela, mais ils sont juste ici.
Donc, si vous avez besoin de l'utiliser, audio-vidéo, si vous voulez faire la validation de formulaires,
géolocalisation, toutes les choses que vous pouvez faire en JavaScript avec JavaScript ou ECMAScript 5 5,
IndexedDB pour le stockage local - ce sont toutes les options pour vous.
Si vous êtes à la recherche d'une réponse, il suffit de regarder aux technologies existantes avec HTML5 et CSS
et vous trouverez des réponses plus facile que d'avoir à rouler beaucoup de ce genre de choses vous-même.
Permettez-moi de vous montrer un petit peu ici.
J'ai un site, nous pouvons aller.
Permettez-moi de quitter sur cette diapositive pendant une seconde.
>> Si nous sortons de IETestDrive.com,
Je ne vais pas faire beaucoup d'une démo ici.
IETestDrive.com est vraiment de vous montrer beaucoup de ce qui est nouveau avec IE10,
les choses que vous pouvez faire.
Je trouve que c'est vraiment utile, car au lieu de lire à travers un tas de livres blancs,
Regardons quelques démos, et que cela va vous aider à mettre sur votre propre radar personnel
de savoir si une technologie est logique de même faire plus de recherche avec
afin que vous compreniez, «Je vois ce que c'est pour."
«Je comprends ce Demander animation image fait pour moi."
«Je comprends comment je pourrais utiliser régions ou des filtres SVG."
Vous les voyez en action, les voir sur un exemple ici,
et de décider par vous-même si cela va vous être utile dans vos propres projets et au-delà
que vous continuez à travailler avec la technologie Web.
Ici, je voudrais juste vous encourager à jeter un oeil.
Je ne pense pas que je passe beaucoup de temps en fait l'exécution de ces.
Nous avons assez à montrer avec l'écriture de code.
Vous verrez ici des choses des effets tactiles à des jeux basés sur le toucher de cette section,
animation, animation de l'accélération matérielle très vite là-bas,
certaines optimisations que vous verrez dans certains de ces échantillons ainsi,
et il ya beaucoup, beaucoup plus.
Si vous allez ici et ouvrez la carte du site,
il ya juste un nombre ridicule d'échantillons ici.
Vous pouvez les voir tous ici.
Si vous êtes à la recherche de quelque chose ou vous avez entendu quelque chose
et vous vous demandez peut-être ce serait quelque chose de cool à utiliser dans l'application,
Essayez de regarder ici, et il ya probablement une bonne démo pour vous épargner un temps.
>> D'accord? Une question pour autant pour les gens ici?
Très bien. Nous allons poursuivre ici.
Encore une fois, juste vérifier.
Ils sont les standards du Web, alors allez à d'autres sites de démonstration que vous connaissez
et de voir si ces technologies font sens pour ce que vous essayez de faire.
>> Retour aux diapositives.
Cela dit, vous vous déplacez d'un monde Web pour vraiment un monde d'application local installé,
si il ya des choses à souligner ici.
Tout d'abord, il n'y a pas de serveur Web en cause ici.
Il n'y a pas d'Apache, il n'y a pas exécutant IIS ici
servir des pages à un client distant, à un agent de navigateur distant.
Dans ce cas, vraiment tout est emballé pour vous.
Vous soumettez que votre application à la boutique, il obtient la certification,
c'est dans le magasin, puis des milliers de gens va installer votre jeu ou votre application.
Mais fondamentalement, ils sont tirant vers le bas au niveau local pour leur machine.
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,
et c'est tout à fait normal et trop.
Mais ils ne vont pas être dans ce mode où ils doivent aller demande une réponse d'un serveur
pour obtenir la page suivante de leur contenu.
Donc, cela étant dit, il ya quelques différences mineures de l'API. Ce sont incroyablement mineur.
Ils sont peu susceptibles de vous frapper dans votre codage normal, mais ils sont au moins documentées.
Ils genre de cas, il bordent.
>> L'autre chose est intéressant de souligner les différences de fiducie.
Je ne mentionne cela parce que je veux m'assurer que je l'ai dit il
donc si vous avez plus tard, vous pensez, "Chris a dit quelque chose à ce sujet,
"Alors peut-être, oui, d'accord," et puis vous retournez et vous trouverez de quoi il s'agissait.
Contextes d'importance.
Par défaut, nous essayons de protéger l'utilisateur contre les vecteurs d'attaque.
Il ya certaines choses que vous pouvez faire par défaut
et certaines choses que vous devez changer le contexte pour l'activer.
Comme vous utilisez des bibliothèques là-bas - you've déjà travaillé avec jQuery,
mais si vous regardez d'autres bibliothèques là-bas - vous utilisez peut-être certaines fonctionnalités
ce genre de va au-delà l'usage local, ne interactions plus dynamiques
demandes XHR, des choses comme ça.
Parfois, vous trouverez peut-être ceux qui sont désactivées par défaut,
et dans ce cas, il suffit de faire une recherche, chercher contexte local et web,
et vous saurez comment résoudre ce problème.
Assurez-vous que vous saviez à ce sujet que vous commencez à utiliser d'autres cadres,
qui, je dois dire, vous êtes parfaitement capable de faire.
Donc, si vous trouvez un autre cadre - parler We'Ll à ce sujet dans une seconde -
pour le jeu et que vous voulez l'utiliser, vous souhaitez utiliser certaines bibliothèques de contrôle qui sont là
et vous ne voulez pas écrire ce genre de choses vous-même - c'est une bonne idée, non? -
vous ne pouvez absolument utiliser ce genre de choses.
Il n'y a rien qui vous retient d'utiliser n'importe quel type de bibliothèque qui est basé sur JavaScript,
CSS, HTML5.
Encore une fois, si c'est quelque chose que vous pouvez faire dans IE10, qui est un diable de beaucoup ces jours-ci,
vous pouvez le faire.
Tirez dans votre application, référence bibliothèque JavaScript, et l'utiliser dans votre application,
juste garder à l'esprit que vous pourriez frapper un contexte de sécurité de temps en temps - pas très souvent.
>> Et puis, les fonctionnalités, nous allons passer en revue quelques-uns plus de ceux que nous allons.
L'UX vous sorte de s'habituer à que vous voyez de plus en plus d'applications
du Windows Store.
Vous obtenez une idée de comment ils fonctionnent et comment l'esthétique de conception a tendance à travailler
entre différentes applications et ce que les gens seront utilisés pour l'expérience.
C'est vraiment le plus important.
Assurez-vous que quand ils tirent de votre application, ils n'ont pas besoin de lire un manuel,
où ils ne le font jamais, par la manière.
Ils doivent simplement être en mesure de commencer à jouer avec votre demande
et le découvrir sans trop de difficulté.
En collant et en adhérant à un grand nombre de ces pratiques,
vous allez faire vos utilisateurs une grande faveur, ce que plus facile.
>> Très bien. Une dernière chose sur le côté de l'API et puis nous passerons en fait l'écriture de code.
WinJS est cette chose je l'ai dit très brièvement cette diapositive complexe
avec tous ces différents choix que vous avez pour faire des applications.
WinJS, vous pouvez penser que c'est un copain.
C'est à votre ami de vous aider à écrire des choses plus rapidement.
C'est juste JavaScript et CSS. Vous n'avez pas à l'utiliser. Vous pouvez l'utiliser.
Si vous allez à l'appel pour des fonctionnalités de Windows, vous finirez par utiliser,
mais si il ya des choses comme des modèles de conception ou de contrôles que vous ne voulez vraiment pas à utiliser,
vous voulez utiliser autre chose, c'est à vous.
Décidez ce que vous voulez utiliser et les styles que vous souhaitez utiliser.
Les caractéristiques de l'espace de nommage et classe génération - à vous.
Si vous préférez l'un ou l'autre, il est tout à votre choix. C'est encore le JavaScript et CSS.
Mais ça va vous aider à faire beaucoup de choses.
Par exemple, voici un sous-ensemble de ce qu'il peut faire,
des choses comme aider la programmation asynchrone avec des promesses.
Ceux d'entre vous ont entendu ou ont travaillé avec Node.js?
C'est un modèle commun de travailler avec la programmation asynchrone.
Donc, fondamentalement, ce que vous dites, c'est: «Allez faire quelque chose,
"Et vous allez me donner une promesse que vous reviendrez me voir quand vous avez terminé."
C'est essentiellement ce qui se passe.
Donc, vous n'avez pas de figer votre application lorsque l'utilisateur est en cours et le choix d'un fichier
ou quelque chose se coulait à partir du Web.
L'interface utilisateur reste sensible.
Et vous pouvez le faire en utilisant la programmation asynchrone.
Il semble ridiculement complexe, mais il est vraiment facile parce que vous utilisez promesses
et vous venez de dire: «Allez faire cela et lorsque vous avez terminé, rappeler à cette méthode."
C'est à peu près tout. C'est tout intégré à WinJS.
Il va rendre beaucoup plus facile d'écrire des applications très flexibles et puissants.
>> Vous pouvez voir le reste ici, beaucoup d'animations.
Probablement l'une des choses les plus importantes sur cette diapositive sont des contrôles.
Je pense que j'ai un tout - oui, je le fais.
Voici un exemple de quelques-unes des commandes que vous pouvez utiliser dans vos applications.
C'est tout droit vers le haut de WinJS.
Vous n'êtes pas en train d'écrire ces vous-mêmes,
vous venez de dire, "Voici comment je veux composer ma demande."
«Je vais utiliser une vue bascule donc je peux aller entre les différentes photos."
Je ne vous ai pas montré zoom sémantique. Je vais vous montrer que, dans un deuxième.
ListViews. Il ya GridViews.
Vous avez déjà vu une grille dans le cadre de l'application de magasin,
afin d'être en mesure d'utiliser des blocs de contenu et le défilement à travers cela.
Menus volants vous verrez de temps en temps.
La barre d'application je vous ai montré avec cette application de peinture fraîche ainsi,
si vous avez vu comment vous pouvez personnaliser que par la mise boutons sur elle
et ayant que cacher quand vous ne vous souciez pas de l'utiliser.
C'est vraiment totalement à vous d'utiliser.
Ce sont toutes les commandes qui font partie de WinJS.
Je vais vous montrer comment faire ces dans une seconde, mais il ya plus de tout cela,
et l'essentiel est de les utiliser si vous voulez, de gagner du temps.
>> Si vous avez d'autres bibliothèques de contrôle que vous souhaitez utiliser, c'est parfaitement bien aussi.
Des choses comme jQuery UI font beaucoup de ce genre d'idée ainsi,
fournir davantage de contrôles qui s'étendent ce que vous pouvez faire en HTML et JavaScript.
Débutons po je l'ai déjà dit. Utilisez ce que vous souhaitez.
Il suffit de garder à l'esprit que vous pourriez rencontrer quelques problèmes de contexte.
Mais vous pouvez certainement mélanger et assortir n'importe quel type de bibliothèques que vous êtes à l'aise avec,
vous voulez apprendre, vous souhaitez utiliser, pour vous faire gagner du temps.
>> Parlons des outils juste une seconde.
Vous pouvez obtenir ce que vous avez besoin pour commencer à travailler avec les applications Windows Store.
Si je vais revenir en arrière, j'ai trop de choses ici.
Si vous allez à cette page, qui est dev.windows.com,
vous pouvez télécharger tout ce dont vous avez besoin.
En tant qu'étudiants, vous avez accès à plus que le grand public ne,
de sorte que vous pouvez obtenir les versions haut de gamme de Visual Studio.
Edwin dit que vous pouvez déjà obtenir Windows ainsi.
Mais, en général, pour tous les développeurs, vous pouvez aller sur ce site
et télécharger tout ce que vous devez faire une demande, et c'est gratuit.
Donc, il ya une version gratuite de Visual Studio,
il existe des outils qui vont installer à côté de cela -
tout ce que vous avez besoin pour créer et tester votre application.
C'est seulement quand vous allez publier votre application à la boutique
que vous allez avoir besoin d'un compte développeur.
C'est ce que je crois trop est gratuit. Est-ce gratuit pour les étudiants ainsi? >> [Guarin] Lequel?
Le compte de développeur, la soumission réelle. >> [Guarin] Oui.
C'est plus de bonnes nouvelles.
Vous allez regarder cela.
Il va dire à un individu par défaut, il est de 49 $.
Mais ne vous inscrivez pas pour que comme un étudiant.
Nous allons vous obtenir des informations via les programmes que vous pouvez obtenir un compte gratuitement,
et qui vous permettra ensuite de soumettre vos applications jusqu'à la boutique,
autant que vous voulez, et tout cela bonté bientôt suivre.
C'est donc dev.windows.com.
Vous pouvez télécharger les outils que vous pourriez avoir besoin d'ici.
Et si vous le souhaitez, vous pouvez obtenir une version d'essai de Windows ici,
mais encore une fois, vous n'aurez pas besoin de.
>> L'autre site - permettez-moi de celui-ci pour vous rapidement - est design.windows.com.
C'était dev.windows.com.
Design.windows.com, vous pouvez deviner ce que c'est pour.
Il s'agit en fait d'un site assez sympa. Il ya beaucoup de bonnes informations ici.
Vous pouvez travailler à travers elle.
Il va vous donner quelques conseils sur certaines choses
que peut-être vous n'avez pas pensé avant ou dû faire face à avant,
comme la conception pour le toucher, la conception pour différents facteurs de forme,
conception pour les capacités de Windows 8, les choses que j'ai mentionnées avant
comme la recherche et le partage, des choses que je n'ai pas encore parlé.
Ils sont tous énumérés ici, et c'est un très bon jeu de pages de fichiers utiles
qui vous aidera à comprendre comment faire un certain type d'application,
comment faire interaction, la façon de traiter avec l'interface utilisateur et UX de votre demande.
Je vous recommande de jeter un oeil à cela, surtout si vous êtes à un moment donné
l'espoir de publier une application à la boutique.
Vous allez vouloir savoir comment faire une bonne application
parce que je l'ai déjà dit, si vous ne le faites pas, il ya ces avis à nouveau.
Les gens vont être malheureux.
Ils ne seront pas en mesure de trouver des choses qu'ils attendent dans les bons endroits.
Personne ne veut que cela se produise pour vous.
>> Aller de l'avant ici, permettez-moi de conclure que vers le bas.
Maintenant que vous savez où trouver les choses, je vais vous montrer comment commencer à utiliser effectivement des choses.
Pour commencer, je vais effectivement vous montrer ici un exemple d'applications de bureau sur mon écran de démarrage.
Ici vous pouvez voir Visual Studio, vous pouvez voir Blend et d'autres outils de développement que j'ai.
Ils ont un carreau légèrement différente.
C'est parce qu'ils sont des applications de bureau,
et dans ces cas, ils vont tous à lancer de nouveau à mon bureau
vraiment juste que les applications que vous êtes habitué.
Donc, l'expérience Windows, c'est la même chose.
Ils ne sont pas, par exemple, comme armé! ou ces choses. Permettez-moi de lancer l'un rapidement.
En fait, voici une question intéressante.
Cela a été développé par des étudiants travaillant en partenariat à NERD.
Application plein écran, ces sortes d'expériences ici.
Oh, écrans coupées belles et toutes sortes de choses amusantes.
Ils ont développé ce produit. Nous pourrions ainsi montrer le tout pendant que nous y sommes.
En fait, j'ai travaillé avec eux un peu, leur a donné quelques conseils sur les choses
parce qu'ils faisaient JavaScript pour leur application.
S'il vous plaît, je ne suis pas prendre le crédit pour leur travail, ils ont fait tout le travail.
Je les ai juste donné un petit conseil ici et là,
mais ils ont fait de grandes choses en utilisant une extrémité avant JavaScript
et attachant dans certains moteurs de physique et de choses à faire beaucoup de ce travail.
Allez. Voyons voir si cela fonctionne.
Wow, il fonctionnait toujours. Bon, bon. Mais vous avez l'idée.
Une application en plein écran, une très bonne expérience.
Cette stratégie contribue non seulement ma souris et stylo si j'ai des choses comme cela, mais aussi toucher.
Si j'avais un écran tactile, je ne pouvais tirer sur elle et continuer à travailler avec cela.
>> Une chose que je n'ai pas montré, et la raison pour laquelle je soulève cette question
c'est que je voulais avoir une autre application pour vous montrer ce que vous pouvez faire,
vous pouvez effectivement prendre des applications sous Windows et faites-les glisser sur le côté de l'écran.
C'est ce qu'on appelle claquer une application.
Dans ce cas, j'ai pris Inkarus et je l'ai ajouté sur le côté ici.
Il est maintenant en vue Snap, et qui me permet de faire autre chose pendant que sa demande est là.
La plupart des jeux que vous trouverez seront tout simplement une pause.
C'est normalement une chose décente à faire à moins que votre jeu peut en quelque sorte réduire
à ce petit d'une résolution, comme peut-être une sorte de jeux de société
ou des choses comme ça à l'occasion.
Mais en général, la meilleure chose à faire et la chose la plus appropriée de le faire pour les jeux
est de mettre en pause l'application.
Pour des applications telles que de nouvelles applications, si je lance celui-ci et je le casser,
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.
Ici, il est vous montrant dans une casserole vraiment plus verticale que de l'information,
mais je peux encore utiliser absolument l'application.
Donc, il est toujours très utile.
Le fait que ce soit dans une vue plus petite ne m'empêche pas d'utiliser cette application. Alors, pensez à ce sujet.
C'est quelque chose que vous devez avoir vos applications font dans une certaine mesure,
mais c'est à vous de déterminer comment fonctionnelle vos applications doivent être
dans ce genre de milieu plus petit.
Permettez-moi de conclure que l'une vers le bas et de revenir dans où nous étions ici.
>> Edwin, vous avez ajouté une photo de moi déjà? >> [Guarin] Ouais. >> [Bowen] Regardez ce.
Vous voyez ça? Edwin a ajouté une photo. [Rires]
>> Revenons ici dans Visual Studio. Permettez-moi de lance pour vous.
J'aurais pu cliqué sur le carreau sur cet écran de démarrage.
Il m'a ramené en mode Desktop, et il est le lancement de l'application de bureau de Visual Studio.
C'est le Windows que vous connaissez déjà.
Je peux aller de l'avant et créer un projet ici.
Nous allons nous concentrer à nouveau sur le JavaScript, HTML.
Je vais sortir et sélectionnez ici sous le JavaScript Windows Store.
Il ya un certain nombre de modèles que vous pouvez utiliser.
Pour la productivité, je vous recommande de jeter un oeil à certaines de ces autres ici
comme la grille et le Split.
Ils sont vraiment utile si vous faites une demande
cela va avoir ce genre de conception et de navigation. Vous verrez ces beaucoup.
Celui que je viens de vous montrer était en fait une instance de l'application de la grille.
Donc, si vous pensez que vous allez faire une application de nouvelles ou un lecteur de flux RSS
ou quelque chose comme ça qui traite de plusieurs rubriques pour lesquelles vous souhaitez montrer le détail,
penser à utiliser l'un de ces modèles pour démarrer rapidement
et la personnalisation à partir de là.
Mais juste pour que je puisse vous montrer toutes les pièces mobiles ici
Je vais créer l'application vide, puis nous allons aller un peu plus loin dans les détails.
Je fais juste que l'application vide ici.
Il va créer l'ensemble du projet pour moi.
Je vais ouvrir les choses que je veux vous montrer par défaut.
Permettez-moi simplement un zoom avant un peu pour vous montrer ce qui a créé pour nous ici.
Les choses que vous allez regarder en premier sont tous par défaut nommée.
Donc, vous allez chercher default.html, default.js, et default.css.
L'autre chose à remarquer est que nous avons déjà une référence à ce que j'ai dit avant.
C'est WinJS. Personne ne demande réellement ce long nom ici.
Il est WinJS, la bibliothèque Windows pour JavaScript.
Si vous l'ouvrez, vous pouvez le voir, c'est tout ici.
Il ya différents fichiers CSS, il ya JavaScript.
Il est là pour vous aider.
C'est vraiment là pour fournir des contrôles et des styles et des choses que vous ne pouvez utiliser automatiquement.
Mais encore une fois, si il ya des choses que vous souhaitez utiliser à la place en termes de style et d'autres contrôles,
il est entièrement à vous. Je vais vous montrer comment utiliser un couple de ces choses dès maintenant.
>> Retour sur sur notre gauche, laissez-moi vous montrer la page HTML par défaut.
Vous avez déjà vu les trucs WinJS, et c'est vraiment tout ce qui se passe là-bas
avec ces lignes du milieu de balisage, le simple fait que dans le CSS par défaut
et apportant un couple de fichiers JavaScript à partir WinJS.
Vous n'avez pas besoin d'être maître de ce qui se passe à l'intérieur de ces fichiers.
Il est assez intéressant de jeter un oeil à leur type de revoir ce qui se passe là-bas
parce qu'il ya des techniques intermédiaires et avancés très intéressantes se passent là-bas,
mais la bonne chose est que les développeurs, vous pouvez simplement profiter d'entre eux, il suffit d'utiliser les
et pas vraiment à s'inquiéter à ce sujet.
Vous pouvez toujours conduire une voiture sans avoir à savoir comment il fonctionne, non?
Voilà le genre de chose qui se passe ici.
Il ya des contrôles et des styles et des choses que vous ne pouvez aller de l'avant et à l'utilisation
et le code que vous pouvez utiliser dans une seconde sans avoir à connaître ce qu'il ya dedans.
Voici vos propres fichiers.
Ce sont vos endroits que vous pouvez modifier votre propre CSS
et votre propre JavaScript afin de faire bouger les choses.
Vous serez en ajoutant certainement d'autres fichiers JavaScript et peut-être d'autres fichiers CSS
que votre projet se développe, mais c'est vraiment juste un point de départ.
Voici le Bonjour, équivalent mondial de HTML, de sorte que nous sommes de retour dans la balise body.
Au sommet, par la manière, c'est le doctype HTML5,
si vous reconnaissez que de ce que vous avez travaillé.
Il ya plein IntelliSense ici aussi, donc si vous faites des choses comme le type dans une balise vidéo
et développez, vous avez sans doute appris sur le fait
que vous devez faire de l'encodage de repli pour les balises vidéo en HTML5 - ou peut-être vous avez -
de veiller à ce que les différents navigateurs ont le soutien de votre vidéo.
Nous avons ce genre de choses dans HTML, JavaScript travers, à travers CSS.
Qui est construit, et je vous montrerai CSS dans une seconde.
Ici, vous pouvez aller de l'avant et commencer à modifier le code, le balisage.
En fait, avant que je change quelque chose, je vais courir ce et vous montrer ce que vous obtenez.
Vous allez obtenir un écran d'accueil que vous pouvez personnaliser
et puis vous obtenez la Bonjour, l'expérience du monde ici. C'est fantastique, non?
Allez-y et navire, non?
Contenu va ici. C'est l'élément de base.
Il ne peut que s'améliorer à partir de là.
Nous irons plus loin en ajoutant quelques trucs.
J'ai un peu de balisage Je vais copier ici
juste pour que vous n'avez pas à me regarder taper.
Permettez-moi de faire apparaître la boîte à outils, et je frapperai ce parce que je vais faire à quelques reprises.
Boîte à outils, si vous n'avez pas vu Visual Studio, c'est là que vous allez trouver un tas de contrôles.
Vous pouvez aussi mettre des extraits de code dans ce que vous pouvez réutiliser.
Ici, je vais juste pop dans un autre HTML, rien de très avancé du tout ici.
C'est juste HTML de base en disant que j'ai une entrée où je peux taper,
J'ai un bouton où je peux présenter, puis-je avoir un div qui est essentiellement un espace réservé
que je peux utiliser pour la sortie du "Bonjour, vous tapez cela."
C'est l'introduction à l'exemple HTML.
Si je cours, nous obtenons automatiquement le code HTML, mais nous avons également obtenir automatiquement style.
C'est l'une des choses importantes de WinJS.
Il va vous donner par défaut un certain look qui est vraiment conforme
avec le reste de ce que Windows 8 fait.
Ici vous voyez les choses comme le bouton.
Le bouton par défaut dans HTML n'a pas l'air comme ça, mais il le fait ici
car il se fait que le droit de CSS à partir de ce fichier CSS dans WinJS.
Si vous voulez utiliser autre chose, si vous voulez changer cela, tout à fait bien,
aller de l'avant et faire ce que vous souhaitez. Mais c'est la valeur par défaut.
Ça va être plus familier pour les utilisateurs.
Et bien sûr, ce ne sera pas cela parce que je n'ai pas fait câbler tout type de code
pour répondre à cette question. C'était juste le code HTML.
Donc, je peux me débarrasser de cela, et nous allons revenir dans notre application.
>> Permettez-moi de passer à nos default.js.
Cela semble assez complexe, mais il est juste de faire quelques choses pour vous.
C'est-partout. Ça va être la même dans tous vos projets.
La seule chose que ce fait est juste genre de demander: «Comment ai-je ici?"
et en disant: «Est-ce que vous lancez cette application pour la première fois?"
"Est-ce que vous reprenez l'application de l'avoir suspendu?"
Un couple de choses comme ça.
Vraiment, nous nous concentrons sur ce fichier ici est à peu près ici.
À ce stade, cette seule ligne de code est assez importante.
Il va vraiment aller chercher à travers tout le balisage,
et il va trouver des choses que vous avez demandé à avoir tourné dans les contrôles,
contrôles plus profondes comme un contrôle de notation, comme une vue de grille, comme le menu contextuel
et ces autres choses que je vous ai montré sur cette diapositive avant.
Ils ne sont pas les contrôles HTML indigènes.
Vous n'avez tout simplement pas dire déroulant comme un élément et le faire savoir quoi faire.
Ce que nous faisons est la même chose qui se passe dans d'autres types de cadres de contrôle.
jQuery UI fait le même genre d'approche générale.
Vous utilisez marques dans votre code HTML, puis un peu de JavaScript vient par la suite et dit,
"Oh, je sais ce que c'est. Cela demander ce pour être transformé en ce genre de choses»,
qui est autre HTML plus expressif de faire comme un contrôle des notes,
qui est ce que je vais vous montrer en ce moment.
Cette ligne de code est une promesse qui a dit: «Quand cette promesse est remplie,
"Tout ce que vous avez demandé a alors été créé."
Et c'est tout. Il semble un peu complexe, mais c'est vraiment la même dans chaque projet.
Ici c'est là que vous pouvez commencer à ajouter à tout ce que vous voulez voir se produire,
de sorte que nous reviendrons dans un instant.
>> Tout d'abord, j'ai besoin d'un peu de code qui peut répondre à la réalité
que quelqu'un a cliqué sur le bouton.
Je vais aller de l'avant et mettre cela en bas ici.
Encore une fois, je ne vais pas faire une frappe en face de vous ici.
Très basique JavaScript juste que quand on parle
nous allons fournir quelques détails sur la façon dont nous sommes arrivés ici
et puis nous allons faire quelques choses de base.
Aller trouver la chose dans ma page HTML qui est nommé nameInput,
saisir, prendre sa valeur, claque "Bonjour" à l'avant de celui-ci, et le bâton que chaîne résultante
dans cette balise div que nous avons eu avant que n'avait pas vraiment quoi que ce soit avant.
Maintenant, nous allons trouver cette étiquette et rendre son contenu interne égale à cette chaîne.
Très simple d'activer JavaScript.
J'espère que vous êtes reconnaissant qu'il n'y a vraiment rien d'inhabituel se passe ici.
C'est juste vers le haut HTML et JS ici.
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
pour recevoir l'événement.
Pour ce faire, je vais le faire ici, encore une fois de retour à ma boîte à outils,
faire éclater ici.
Je pense que vous avez vu tout ce genre de choses avant, je ne vais pas trop expliquer.
Maintenant, nous allons aller chercher la helloButton.
Nous allons dire, "Button, félicitations."
"Voici un événement que vous répondez à maintenant."
"Lorsque quelqu'un clique sur vous, appeler cette fonction, l'buttonClickHandler."
Et c'est cette fonction que nous venons d'ajouter à droite au bas il. C'est tout.
Alors maintenant, nous avons une demande étonnamment fonctionnel.
Je pense que vous serez vraiment impressionné par cela.
Chris. Attendre. Wow. Très bien. C'est incroyable. [Rires]
Mais il ya plus. Ne pas acheter encore. Attendez.
>> Permettez-moi de vous montrer un peu plus ici et sortir du plein écran.
Nous allons marcher avant de courir.
Laissez-moi aller dans et fait de vous montrer un peu de CSS.
Juste par défaut, si nous regardons en arrière sur la page ici,
chaque fois que nous sommes arrivés à ces choses WinJS et nous avons eu l'ui-foncé,
en fait, vous pouvez changer le réglage par défaut en utilisant l'application de la lumière.
ui-noir est bon pour les applications graphiques comme l'utilisation de beaucoup de photos,
vous montrer beaucoup de contenu visuel.
Si vous faites preuve de beaucoup de contenu textuel, l'ui-lumière est généralement un bon choix.
Vous n'avez pas à choisir, mais j'ai changé de lui
et maintenant vous voyez le même balisage, même tout,
c'est juste en utilisant essentiellement un système inversé ici
où tout est fait le texte noir sur fond blanc.
C'est très bien.
Laissez-moi sortir d'ici, et laissez de fait faire un peu plus avec le CSS.
Je l'ai remis sur l'obscurité parce que je pense que c'est probablement plus facile de voir sur l'écran
quand je commence à faire ces choses.
Je vais remplacer le corps une fois de plus.
Je vais ici. Permettez-moi de ce nuke.
Ramenons dans le corps avec des classes.
Je crois que vous avez fait sélecteurs de base avec CSS et des choses comme ça déjà,
si vous le savez probablement ce qui se passe ici.
Juste attribuer certaines classes à notre tête, et nous créons une nouvelle div
pour envelopper le reste de ce genre de choses que nous pouvons maintenant utiliser pour coiffer tous ensemble.
Donc ce que je peux faire maintenant est d'aller sur notre CSS par défaut.
Avez-vous regardé les requêtes des médias encore? Avez-vous parlé de cela du tout?
Les requêtes d'information font partie de cette tendance émergente -
ou c'est une tendance bien établie maintenant effectivement sur le Web -
pour la conception ou d'adaptation réactive,
et l'idée est que vos applications peuvent vraiment se régler de façon appropriée
sur la base de ce que le dispositif qui ils être affichés sur peut faire.
Donc, si vous êtes sur un appareil mobile, il est évident que vous n'allez pas avoir autant d'écran de l'immobilier
comme vous sur un grand écran de 30 pouces assis avec un ordinateur de bureau, un gros PC comme ça.
Ainsi, la vieille réponse à cette question serait d'avoir 5, 6 versions différentes de la même page
et que vous ouvrez la version qui a été réglé pour que certain taille d'écran.
Pas génial. C'est très, très répétitif et il ya une tonne d'entretien à faire.
Maintenant, nous avons ce qu'on appelle des requêtes de médias CSS,
et nous pouvons l'utiliser pour détecter automatiquement quand il ya certaines tailles
ou certaines utilisations de votre contenu étant effectuées.
Ainsi, vous pouvez répondre à cela et vous pouvez dire: «D'accord, dans ce cas
"Vous n'avez même pas besoin probablement moi de vous dire ce qui se passe ici."
Ceci est juste de dire si cette application est cassé, comme je vous ai montré avant -
saisir et de le mettre sur le côté de l'écran -
alors faisons le style suivant.
Styling n'est pas seulement sur les couleurs et des trucs comme ça.
Il est également sur le dimensionnement et les marges et les rembourrages et les orientations de contenu
ou même désactiver ou d'activer des parties entières de votre page
et, dans ce cas, votre application ou votre jeu ainsi.
Alors là, vous pouvez le faire aussi simple que vous le souhaitez.
Ce ne serait pas utile dans vos applications, mais il est temps de démonstration,
donc je vais aller de l'avant et il suffit d'ajouter dans le sélecteur de base du corps et dire,
"Quand je suis cassé, nous allons aller de l'avant et faire background-color et choisissons quelque chose."
Vous avez IntelliSense ici. C'est en fait vraiment cool.
En 2012, nous avons ajouté beaucoup de choses pour le support des CSS et JavaScript et HTML.
Vous avez bien sûr obtenu déroulante IntelliSense trop, mais ce n'est pas le truc cool.
Le truc cool, c'est que vous avez sélecteurs visuels pour beaucoup de choses.
Ainsi, vous pouvez passer et il suffit de choisir une couleur,
ou vous pouvez sortir et être encore plus précis et vous pouvez choisir -
cela va être terrible. Je vais effectivement choisir une couleur décent ici.
Suivre le balisage aussi, par la manière. C'est votre format standard RGB il.
Mais si je passe l'opacité, il va passer à un sélecteur de canal alpha ici.
Donc vous pouvez voir que la couleur avec essentiellement la transparence pour cent que vous avez pour ce
tout cuit juste là.
Je vais le garder comme 100% et puis quand j'ai fini avec ça, tout va bien et bon.
Maintenant, si je lance l'application et nous prenons l'application et nous le casser,
que la couleur de fond est ajustée automatiquement
juste parce que nous avons un peu de CSS qui dit: «Allez faire cela."
Vous pouvez également écrire JavaScript trop qui va faire la même chose
ou que vous pouvez utiliser pour effectivement mettre en pause un jeu, faire des choses comme ça.
C'est probablement lorsque vous souhaitez utiliser le JavaScript.
Vous souhaitez désactiver la boucle de jeu à ce point.
Vous auriez besoin un peu de JavaScript, car ce ne serait pas quelque chose que vous voulez CSS.
Mais gardez à l'esprit que c'est juste un événement.
Vous pourriez dire: «Lorsque mon application est redimensionnée,
"Voyons si nous sommes cassé net." Et c'est tout.
>> D'accord? J'ai parlé beaucoup. Y at-il des questions à ce jour où nous en sommes? Ouais.
[Élève] Y at-il un tutoriel pour quiconque d'obtenir plus d'informations? >> Oui.
La question est, est-il un tutoriel pour cela? Je vais j'étends de tout.
Il ya quelques choses que vous pouvez aller. Voyons fait sortir de là.
Permettez-moi de revenir ici.
Une chose à souligner est Visual Studio lui-même a des tutoriels construit po
Permettez-moi de me débarrasser de cela.
Si vous allez créer un nouveau projet, ne Fichier, Nouveau projet,
et regarder sur le côté gauche, il ya un noeud en ligne dans ce sélecteur.
Il va prendre un peu. Je suis sur mon MyFi ici.
Mais ça va venir et il va me donner une chance de trouver des modèles
mais aussi, et plus important encore, les échantillons ainsi.
Donc, je peux cliquer sur JavaScript.
Il va trouver des échantillons pour moi. Ma résolution est bien haut ici.
Normalement, vous devriez voir une liste de beaucoup de choses différentes ici.
S'il ya quelque chose que vous voulez essayer, choisir la langue,
JavaScript ici, et dire: «Je ne sais pas comment faire géolocalisation."
"Je ne sais pas comment ouvrir un fichier."
"Je ne sais pas comment tirer parti de la webcam
»Ou optimiser pour le toucher ou des choses comme ça."
Il existe des échantillons pour tout: le partage, la recherche, bars app,
faire des appels à distance à un service, l'encodage JSON.
Toutes ces sortes de choses il ya des échantillons pour ici,
et ils ne sont pas énormes échantillons qui vont vous prendre toute la nuit pour séparer
juste pour savoir qu'il ya une chose que vous vouliez savoir.
Ils sont vraiment bons. Ils sont petits, droit au but types d'échantillons.
J'ai appris une tonne en passant par ces moi,
et c'est pourquoi je recommande que beaucoup comme une chose.
>> Une autre chose à remarquer est aussi bien sûr je vous ai montré dev.windows.com,
donc si vous allez revenir, vous verrez en bas il ya aussi les échantillons ici.
Ainsi, vous pouvez télécharger tous à la fois, mais il ya aussi beaucoup d'autres ressources ici aussi
qui peut vous aider à obtenir de la vitesse.
>> Une autre chose, et je recommande vraiment que vous essayez,
Je l'ai sur mon blog, mais je vais aller droit au but.
Je vais vous montrer. Mon blog a des ressources et des choses comme ça.
Une des choses à souligner, c'est ici, cette chose: votre idée. Votre App. 30 jours.
Si vous cliquez sur ce, il va vous amener à un site vraiment utile.
Cela est beaucoup plus utile que vous pourriez vous attendre.
Cela va être 30 jours de contenu que vous pouvez tout simplement obtenir des conseils et astuces
tout au long de ce processus que vous créez une application.
Et comme vous ne pouvez pas attendre, vous pouvez réellement obtenir pour les jeux trop
et pour les applications de téléphonie, des choses comme ça.
Donc, fondamentalement, vous inscrire à elle, et ils vont vous faire parvenir des trucs et astuces sur,
"Avez-vous pensé à cela? Êtes-vous favorable snap?"
"Voici quelques lignes directrices sur la façon de le faire bien."
«Avez-vous pensé à soumettre à la boutique?"
«Avez-vous pensé à la façon dont vous allez vendre votre demande?"
Il va traverser toutes ces différentes choses.
Et en fait, si vous êtes sur la piste de jeu, à un moment donné
vous allez commencer à reconnaître la personne qui vous parle
parce que j'ai dû aller à Redmint de faire ces deux vidéos enregistrées et là.
Mais tout cela fait partie de la piste de jeu,
et il ya aussi une piste complète pour le développement général de l'application.
C'est ce qu'on appelle App Generation.
Je recommande vivement que pour vous aussi, en plus des échantillons.
>> Il ya beaucoup de vidéos sur un site appelé Canal 9 ainsi.
C'est probablement la dernière chose que je vais recommander aussi bien avant que nous passions ici.
Channel9.msdn.com.
C'est super parce que vous n'allez pas être lu par des tonnes de livres blancs.
Il s'agit essentiellement d'un grand nombre de vidéos, screencasts et ce qui est bien au point.
Je ne devrais pas dire que c'est toujours droit au but. Cela dépend de qui fait parler.
Mais en général, il ya des vidéos vraiment-le-point ici
qui va vous montrer quelque chose en particulier que vous voudrez peut-être d'apprendre ou de voir en démonstration.
Il ya aussi tout notre contenu de notre conférence qui s'est passé il ya quelques semaines
appelé construction, et vous verrez que là.
Il ya des technologies de base pour Windows 8 jeux. Là vous allez.
J'étais là, en fait. Vous ne pouvez pas me voir. J'étais ici.
Mais de toute façon, cela mis à part, je vous recommande de jeter un oeil à ces vidéos.
Ils sont assez utiles.
Si vous êtes coincé sur quelque chose ou que vous voulez juste voir ce que quelque chose pouvait faire, tirer les vers le haut.
>> [Guarin] Windows Mail vient de m'envoyer un email avec un lien vers le contenu
pour les étudiants à télécharger avec le code d'échantillon et des trucs comme ça. >> [Bowen] Grand.
Impressionnant. Merci, Edwin.
>> Bon. >> [L'élève] J'ai une question. >> [Bowen] Oh. Oui, s'il vous plaît.
[Question des étudiants inaudible] >> [Bowen] Oh, je suis heureux que vous posiez. Oui.
La question était, est-il une interface visuelle pour moi de créer des choses?
Edwin vous récompensera grassement pour cette question.
Il ya une façon de le faire.
Devrions-nous faire maintenant? Faisons-le maintenant.
Je vais aller à ce moment.
En fait, permettez-moi d'ajouter une chose dans cette démo,
et puis je vais vous montrer la réponse réelle.
J'allais ajouter un peu plus en CSS ici.
J'étais un peu sur les tangentes ici.
Permettez-moi de mettre en peu de CSS ici pour profiter
des classes que nous avons ajouté un peu plus tôt,
à l'en-tête, pour la div mainContent, puis à la greetingOutput.
Si je fais cela et le lance, vous pouvez voir maintenant que nous avons un remplissage et les marges peu différente,
de sorte que nous avons actuellement quelques décalages ici.
Ce sont plus vers ce que vous allez attendre d'une application finale poli.
Mais je suis en train de montrer cela parce que c'est tout droit CSS.
Donc, les choses que vous savez déjà que vous pouvez utiliser ici d'adapter le contenu que vous souhaitez.
Vous avez déjà vu comment faire le fond changer de cette façon.
>> Si je reviens à notre HTML, je vais ajouter dans un ensemble de balises plus,
et ce qui se passe réellement à un contrôle de WinJS.
Je vais aller attraper ce, une étiquette. Permettez-moi de m'assurer que je fais au bon endroit.
Probablement assez bon.
Ici, je viens d'ajouter - et nous passerons plein écran de sorte que vous pouvez voir toute chose -
J'ai ajouté une étiquette pour la prochaine div.
Le div est appelé ratingControlDiv.
En soi, il ne fera rien.
Si vous ouvrez ce dans un navigateur, vous seriez à la recherche à vide, le div lui-même.
Mais à cause de cette mystérieuse ligne de code que je vous ai montré avant,
tout le processus, il va chercher quelque chose qui ressemble à ceci -
data-win-contrôle - et il va trouver tout ce qui est dans ce paramètre.
Il va faire un exemple de ce que c'est, il pointe vers.
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
»Avec tout ce que vous devez faire pour faire un contrôle de notation."
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.
Ils vont tous travailler essentiellement de la même façon.
Vous utilisez le balisage HTML5 standard pour indiquer ce que vous voulez,
et puis vous allez obtenir un contrôle à la fin de cette. Permettez-moi de courir ce.
Je viens de copier que, et maintenant que ce balisage devient,
qui est en fait un certain nombre d'éléments HTML.
Ce sont toutes les images individuelles, et il ya div autour d'eux avec sélecteurs.
J'espère que vous pouvez voir. C'est un peu subtil.
Je peux planer sur les différents articles, et ça va me permettre de voir la cote ici.
Je peux cliquer sur, et il se souvient de la note, mais c'est tout.
Ce n'est pas vraiment faire quelque chose avec la note.
>> Une dernière chose que je veux vous montrer sur cette
avant que nous passons dans une expérience de conception plus visuelle
est un peu de code que je peux utiliser pour répondre à ces contrôles WinJS.
Laissez-moi sortir de là, retour sur plein écran,
et passer à JS ici pour la deuxième.
Je peux le faire ici. Je pense que je vais remplacer tout cela.
En fait, je pense que ça va tout remplacer, mais nous allons découvrir ensemble.
Je vais mettre ce ici. Ouais. Je vais supprimer cette trop.
Qu'ai-je ajouter? Il ressemble beaucoup. Ce n'est pas beaucoup.
Je vient de prolonger cette ligne de code que j'ai déjà parlé avant,
et je dis: «Quand tout est fait, quand tous mes contrôles ont été effectués,
», Puis le faire." Alors exécuter cette fonction appelée terminée.
Dans ce cas, ce sont des choses que vous pouvez comprendre.
Allez trouver que le contrôle de div.
En fait, il ya une chose que je tiens à souligner.
Que la ligne suivante est en train de dire, "j'ai que ratingControlDiv."
"Je veux lui parler comme s'il s'agissait d'un véritable contrôle, un contrôle WinJS."
Donc, fondamentalement, vous demandez que de lui.
Vous dites: «Je veux vous parler de contrôle."
Et alors vous pouvez commencer à dire des choses comme, «Nous allons ajouter un écouteur pour vous
"Quand vous êtes changé, nous pouvons répondre à cela."
Et puis, nous pouvons aussi faire des choses de ce genre. En fait, c'est l'ancien code là.
Je pense que je suis absent coller dans une fonction plus,
et que ce serait la fonction réelle qui répondrait à la commande de notation étant changé.
Permettez-moi de pop que dans le droit ici,
quelque part par là.
Et dans ce cas, la seule chose qui est nouveau, c'est le fait que nous allons dans
ce que le contrôle de notation nous dit et nous demander ce que l'on appelle le tentativeRating.
Il ya un tas de différentes autres choses que ce contrôle peut vous dire,
et il va commande par commande.
C'est très simple. Vous serez en mesure de le comprendre sans problème que ce soit.
Je lance ce, et maintenant quand je change les notes et clique sur la note,
vous pouvez voir maintenant c'est en fait à y répondre.
C'est mettre cette note à l'écran dans cette balise div vide sinon
sous la commande de notation.
C'est la magie de beaucoup de choses ici aussi.
Donc, comme vous êtes la création d'applications pour le Windows Store,
il ya une tonne de contrôles que vous pouvez simplement utiliser. Ils travaillent tous comme ça.
>> Permettez-moi de vous montrer le côté visuel de la conception de ces applications.
Les bonnes nouvelles sont que vous aurez déjà cet outil lorsque vous installez tout
si vous allez à ce téléchargement et vous obtenez Visual Studio.
Je peux cliquer droit sur ce. Je ne vais pas agrandir
Il dit juste Open in Blend.
Blend est un autre outil qui travaille côte à côte avec Visual Studio
et se concentre beaucoup plus sur le côté de la conception des choses,
il surfaces vraiment les outils qui sont optimisés pour la création de styles,
la création d'animations, en collaboration avec CSS, beaucoup de choses dans ce genre de veine.
Voici ce qui devrait être très intéressant et assez évident est immédiatement nous sommes à la recherche à l'application.
J'espère que nous sommes encore.
Au lieu de voir le code, que nous ne voyons encore au fond,
nous voyons la représentation réelle de la demande.
Qui plus est, ce n'est pas seulement une représentation de l'application, il est en fait l'application en marche.
Et c'est ce qui est vraiment agréable sur Blend.
L'équipe a fait beaucoup de travail pour amener HTML et JavaScript et CSS dans cet outil.
Maintenant, vous pouvez effectivement, si vous êtes curieux, "Qu'est-ce que ça veut dire? Qu'est-ce que je peux faire?"
Je ne peux réellement concevoir à cette demande même si ce genre de choses n'existent pas dans mon code.
Rappelez-vous que le contrôle de notation? C'était juste une balise div.
Cette substance, cette étoile, existe seulement à l'exécution. Comment je le sais?
Il ya un peu de magie ici.
Voir ces éclairs?
Chaque fois que vous voyez un éclair, ce qui signifie qu'il a été créé par quelque chose à l'exécution.
Certains JavaScript a couru et s'est quelque chose dans ce ou créé ce avec une certaine logique.
Ces étoiles que vous voyez là ont été créés par JavaScript par WinJS.
La bonne chose est, il n'a pas d'importance pour moi, je peux encore concevoir il,
Je peux encore aller et le changer, je peux savoir ce qui se passe ici,
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,
Je peux commencer à jouer avec les choses et faire des choses horribles,
tout ce que je veux faire.
En fait, je vais laisser les choses seul.
Mais vous pouvez voir ici c'est tout le CSS et c'est vous montrer ici.
Si je vais jusque-là, ça va vous montrer tout ce qu'ils appellent Gagner,
de sorte que les règles CSS qui sont le plus spécifique et le plus choisi pour cet article,
que vous avez probablement déjà dépassé dans vos classes,
où vous pouvez dire qu'il ya une police générale que nous appliquons à tout,
mais parce que c'est un h1 et j'ai une couleur définie pour H1S
ça va être cette couleur, et c'est parce qu'il est plus spécifique que le body1.
Cette chose ici, vous tous qui montre,
et c'est vraiment quelque chose de puissant que vous obtenez plus complexe,
vous vous demandez pourquoi ces choses sont comme elles sont.
Il va vraiment vous dire, et vous pouvez choisir n'importe quel de ces articles ici.
Cette couleur n'est pas trop mal, en fait.
Vous pouvez les sélectionner. J'espère que vous pouvez voir.
Pour tout ce que vous avez sur votre application, vous voyez toute une cascade
de tous les CSS qui auraient appliqué à ce et que l'on est gagnant,
que l'on a pris effectivement la priorité.
Ceux-ci sont un peu ennuyeux. Il n'y a pas beaucoup de choses dans certains d'entre eux.
Si je vais changer la couleur, alors vous allez commencer à voir une certaine cascade il.
Vous pouvez également utiliser le HTML ici.
Je peux passer et modifier les propriétés HTML pour toutes ces choses que je veux.
Il ya juste des tonnes de trucs ici.
>> Je ne veux pas de prendre votre temps en passant par tout ici. Il suffit de savoir qu'il est là.
Il ya un grand nombre de fonctionnalités de conception orientée qui est juste disponible pour vous
de sorte que vous pouvez rester visuelle, travailler avec l'application, et ne pas avoir à faire beaucoup de deviner
que vous auriez à faire normalement et vélo de retour à partir d'un navigateur de nouveau dans votre conception,
au navigateur.
C'est vraiment cool stuff pour cela, et que vous développez une application Windows Store,
ça va vous faire beaucoup plus productif.
>> Vous verrez également qu'il est suivi le balisage ici et votre CSS
que vous travaillez par des choses différentes.
C'est probablement très difficile pour vous de voir que, en particulier sur la vidéo,
mais c'est ce qui se passe ici, et je vous recommande de vous familiariser avec cela.
Elle vous fera économiser beaucoup de temps. C'est Blend.
Si vous apportez des modifications ici, ils sont automatiquement vont ramener sur
à Visual Studio.
C'est les mêmes fichiers, c'est la même chose tout. Je vous laisse seul.
J'ai un meilleur exemple que je veux vous montrer.
Mais si j'ai fait un changement là-bas et sauvé et je suis revenu à Visual Studio, il disait,
"Hé, vous venez de changer quelque chose. Puis-je recharger pour vous?" Oui.
Et que vous utilisez la même chose là-bas.
C'est la fin de cet échantillon particulier.
>> Je veux vous montrer un échantillon haut de gamme juste pour vous donner une vue d'autres fonctionnalités
vous pourriez penser à ainsi.
Il s'agit d'un exemple d'application que vous pouvez télécharger.
Si vous recherchez quelque chose qui s'appelle le Camp Windows dans une boîte,
il ya quelques échantillons qui sont en ce que l'un d'eux est le Contoso Cookbook.
Je peux exécuter ce pour vous.
écran de démarrage personnalisé. C'est l'application de vue Grille.
Ils ont tenus des données personnalisées ici. Vous pouvez naviguer à travers cela.
Vous pouvez aller jeter un oeil à différentes choses qui feront de nous de faim sur un vendredi après-midi.
Je ne sais pas. Qu'est-ce que va me faire le plus faim?
Je ne sais pas. Je vais en choisir un.
Vous allez dans ces choses. Il va vous montrer la recette.
Vous pouvez aussi, au lieu de cliquer sur un élément,
vous pouvez aller directement à cette catégorie de contenu, la section du contenu.
Dans ce cas, vous pouvez lire beaucoup de faux latine vous disant tout sur ces recettes ici
et puis allez à droite dans la recette spécifique.
Ceci permet aussi des choses comme le partage que je vous ai montré avant avec les images.
Vous pouvez également rechercher dans la présente demande trop.
Il est très simple de faire une recherche.
Fondamentalement, vous êtes juste une chaîne de texte à partir de Windows
et vous décidez comment vous voulez gérer recherche avec ce.
C'est quelques lignes de code pour l'obtenir, et puis ce que vous faites avec lui après qui est totalement à vous.
>> Ici, ils ont également une barre d'application où ils utilisent d'autres fonctionnalités.
Je vais vous dire ce que c'est.
Un rappel va utiliser ce qu'on appelle une notification toast.
C'est vraiment pratique pour laisser l'utilisateur de savoir quand les choses se sont passées,
comme une application a été installée ou quelque chose a été achevée.
Il est également bon pour les jeux aussi.
Si vous avez un monde persistant ou une carte de chef de file et un service qui héberge que
peut-être sur une machine séparée, les notifications peuvent être envoyées dans une machine
et même si l'utilisateur n'utilise pas votre jeu, jouer à votre jeu ou le fonctionnement de votre application,
ils peuvent encore recevoir des notifications au sujet de ces types d'événements.
Donc, vous pourriez dire: «Votre château a été détruit ou est à peu près détruit."
"Reviens ici et défendre", ou quelque chose comme ça.
Vous cliquez sur la notification, vous allez tout de suite dans le jeu, et vous pouvez y jouer.
Donc, ce genre de choses peuvent vraiment aider à attirer des gens de retour dans votre application assez efficace.
>> Il ya aussi appuyer dans cette demande pour l'utilisation du microphone, la webcam,
faire la vidéo et prendre des photos.
Vous pouvez également épingler une tuile secondaire.
C'est utile si vous voulez avoir juste une tuile qui va droit à certains contenus.
Dans ce cas, il va droit à cette recette.
Tout ce que je mentionner que je suis en train de montrer
parce que c'est ce que vous pouvez penser à utiliser ainsi.
Pour la plupart, elles sont très faciles à utiliser.
Je recommande juste vous mettre cet échantillon explorateur
et trouver un échantillon qui peut vous montrer comment faire.
C'est assez simple à traduire les dans vos applications là-bas aussi.
>> Je voulais vous montrer quelque chose d'autre qui est assez cool ici.
Je vais claquer cette application, et je vais revenir à Visual Studio.
Cette application est en cours d'exécution. Il fonctionne à partir de Visual Studio.
Je peux faire des trucs assez cool avec ça.
En fait, j'ai une option pour sélectionner un élément,
et je peux aller ici à l'application en direct et je peux vous dire,
"Je me demande pourquoi est-Temps de préparation un peu plus léger gris que le titre lui-même?"
Je peux cliquer dessus.
Il va synchroniser que de nouveau dans Visual Studio,
et il va me montrer exactement le contenu généré qui a abouti à cette partie de l'interface utilisateur.
Donc dans ce cas, c'est l'article sous-titre et h4 à double construction,
et qui nous dit probablement ce que nous devons savoir, parce que comme h4 dans ce contexte,
il va y avoir un certain type de police.
Mais si je ne sais toujours pas pourquoi, je peux cliquer sur Trace Styles.
Je peux ensuite étendre sur la couleur et je peux savoir exactement pourquoi cette couleur n'est pas la couleur de la carrosserie
mais en fait, c'est autre chose.
Il s'agit essentiellement des outils de dev Internet Explorer
à un degré mis en Visual Studio.
Si vous avez travaillé avec les outils Chrome Dev, Firebug, des choses comme ça,
ces types d'outils qui sont dans le navigateur,
ce genre de fonctionnalité a été apporté à droite dans Visual Studio
de sorte que vous n'avez pas réellement besoin de lancer un navigateur et de travailler avec ces outils séparément.
Maintenant, j'ai une application Windows Store juste courir,
et je peux commencer à tirer à part et de découvrir pourquoi les choses sont en train de faire ce qu'ils sont.
>> Je peux aussi le faire de cette façon aussi.
Je peux aller et il suffit de choisir quelque chose de bien à partir du balisage et de savoir ce qu'il est
dans l'application elle-même. Je pense que je suis allé en tout.
Ici, je suis planant au-dessus de ce. Je peux sélectionner.
Il va me montrer dans l'application en cours d'exécution réelle où cette chose est
que je suis maintenant en cliquant sur dans le balisage.
Trucs vraiment cool.
Comme vous êtes à essayer de comprendre ce qui se passe et ce que HTML fait,
ce CSS est en train de faire, garder cela à l'esprit.
N'oubliez pas qu'il s'agit ici pour vous
et aussi que Blend peut travailler avec une application en cours d'exécution en direct.
>> L'une dernière chose que je voulais vous montrer avec cette application -
Par ailleurs, il vous montre les deltas comme les choses changent aussi,
de sorte que vous pouvez regarder les reflets jaunes.
Ce sont des choses qui viennent de changer dans l'application.
Mais une dernière chose. Je veux revenir à Mélanger juste une seconde ici.
Nous ouvrons cette place, ouvert en mélange, même application, même tout.
Je veux juste vous montrer l'expérience ici n'est pas seulement vous êtes coincé sur la page d'accueil
en regardant les choses que vous obtenez par défaut lorsque vous exécutez l'application et permettent de se reposer là.
Vous pouvez également activer cette jolie petite icône ici.
C'est ce qu'on appelle le mode interactif.
Vous cliquez sur ce. Il va mettre en place votre demande.
Vous n'êtes pas en mode Création plus, si vous n'allez pas à cliquer sur les choses
de changer la fonctionnalité, mais vous pouvez réellement travailler avec l'application maintenant.
Vous pouvez cliquer sur, vous pouvez faire ce que, arriver à une recette que vous vous souciez
ou à une catégorie. Allons à cette catégorie.
Je dis: «Eh bien, voici où je veux concevoir."
Ensuite, vous cliquez à nouveau sur ce bouton, il vous ramènera dans la surface de conception,
et maintenant vous pouvez faire toutes ces choses que je parlais avant.
Je vais garder un clic jusqu'à ce que j'obtienne ce choisi, découvrir ses dimensions,
trouver le code HTML pour elle, la CSS pour elle
pour une application en cours d'exécution, une partie ultérieure de l'application.
Très, très utile. Je vais vous montrer ce à vous.
S'il vous plaît garder à l'esprit si vous êtes à la recherche dans l'écriture de code avec cette
parce que ça va vous faire économiser beaucoup de tracas, et c'est assez bonnes choses.
C'est à peu près tout ce que je voulais vous montrer Blend et Visual Studio pour tout cela.
>> Une question sur l'un de ces outils?
Rien du tout? >> [Guarin] J'ai des choses à donner, si les bonnes questions, de bonnes choses.
>> [Bowen rit] Je vous ai déjà montré mes démos ici.
Je vais le mettre sur la page Ressources et passer aux questions maintenant.
Cette première référence est le site App génération avec la piste de jeu et la piste de l'application.
Inscrivez-vous pour ceux.
Vous n'avez pas à attendre 30 jours pour obtenir le contenu.
Vous pouvez commencer à aller et en regardant le contenu que vous souhaitez.
Je comprends vos délais peuvent être différents de - [rires]
Alors, quand est le Hackathon? C'est quelques semaines, non?
Donc, vous n'avez pas 30 jours à attendre.
Donc oui, vous pouvez vous inscrire pour cela et puis commencer tirant simplement le contenu à partir de lui.
Aussi la Dev et les centres de conception.
Et je n'en ai pas parlé, mais il ya aussi le magasin Docs.
Ce serait pour après le Hackathon que vous êtes prêt à commencer à soumettre vos applications pour la boutique.
Il ya quelques directives utiles ici, quelques conseils sur la façon de faire avancer les choses dans le magasin,
certains problèmes courants qui pourraient vous faire trébucher,
et c'est la fin de ces ressources.
>> Donc ce qui est sur votre esprit? Tout ce que vous -
[Guarin] Qui pense à faire une application Windows pour CS50? Cool.
[Bowen] cool. Grand.
>> Une question sur les choses que vous avez vu jusqu'à présent et comment il se rapporte à ce sujet?
Par exemple, plus de temps que je pouvais prendre un jeu que j'ai écrit
et qui fonctionne dans le navigateur et tout genre de passer par le processus
de mettre cela dans Visual Studio et en faire une application Windows Store.
Il prend plus de temps que nous avions vraiment comprendre aujourd'hui,
mais la version courte est que c'est le même code que vous avez exécuté dans le navigateur,
et les choses que vous changez les choses que vous décidez de le brancher à Windows 8.
Donc, si vous souhaitez utiliser charmes, si vous souhaitez rechercher ou partager,
vous avez besoin pour créer une barre d'application pour cacher certaines fonctionnalités sur que,
Voilà le genre de choses que vous changeriez.
Mais le cœur de votre application web peut rester intact.
Encore une fois, tant que cela fonctionne dans IE10, ça va être un port très facile
d'apporter ce genre de choses dans Visual Studio, en mélange, et en faire une application Windows Store.
Encore une fois, les seules choses que vous aurez besoin d'apprendre sont les autres caractéristiques
que vous pouvez utiliser pour allumer une application, comme une tuile en direct et ce genre de choses.
>> Ouais. >> [L'élève] Ma question porte sur le travail mobile.
Donc, si vous faites une application qui fonctionne comme une application sur le bureau,
est-il vraiment facile de le transférer à mobile, ou est-il un -
La question est, si je fais une application Windows Store qui est vraiment optimisé pour cet environnement
et je tiens à porter à un monde mobile, ce qui est impliqué avec cela?
Que, comme beaucoup de questions, est toujours une réponse en constante évolution.
Les bonnes nouvelles sont si vous êtes coller avec HTML et JavaScript, CSS,
si vous êtes à partir d'une application Windows Store,
il va vous permettre de le mettre sur le Web
et ensuite utiliser ces types de techniques, telles que les requêtes et les choses médias,
pour s'adapter à différents dispositifs de taille.
Cela dit, il ya toujours des cadres et des choses là-bas
que support s'étendant sur différentes technologies, différentes plates-formes.
Cela change tout le temps.
Nous sommes également en train de changer les choses aussi bien que nous nous tournons vers ce que nous avons maintenant
fait avec Windows Phone 8.
Nous avons des infrastructures essentielles partagées
offert entre les applications pour ces environnements.
Donc, les choses que vous faites pour créer une application Windows Store,
beaucoup de ces peut se poursuivre dans une application Windows Phone 8 ainsi.
C'est encore une histoire naissante, donc il ya un peu de contenu à ce sujet à construction.
Le SDK vient de sortir il ya un peu de temps. Il vient de sortir il ya un peu de temps.
Mais en termes de plates-formes d'autres aussi,
vous avez probablement dans de nombreux cadres multi-plateformes ainsi.
Les bonnes nouvelles sont les choses que vous faites ici,
la fonctionnalité de base est droite jusqu'à trucs web standard.
Les seules choses qui ne seraient pas traduire facilement les choses que Windows 8 ne,
mais ce n'est pas une surprise, car il est une fonctionnalité de Windows.
Vous n'allez pas trouver le partage ou le même genre de contrats sur tout autre plate-forme.
Donc, ce sont les choses que vous voudriez dans une perspective de conception
assurez-vous que vous avez les moyens à type de résumé qui donc vous pouvez dire,
"Si je cours à ce sujet, je peux le faire."
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à.
Mais gardez cela à l'esprit. Ouais. Désolé. Allez-y.
>> [Élève] Si je veux tester mon application Windows sur le dessus de [inaudible]
[Bowen] Ouais. J'ai sauté une chose trop. Ouais.
Je vais répondre à votre première question, je vais vous montrer une option J'ai oublié de mentionner.
Nous avons des machines disponibles localement. Je suis désolé.
La question était, comment puis-je tester des choses sur les appareils
si je ne pas arriver à avoir un tas de choses à choisir?
[Guarin] Nous vous prêté gars, je crois, 5 ou 6. Combien avez-vous besoin?
[Élève] Nous avons eu 4 d'entre eux. >> Okay. Les gars, c'est 4 ardoises de jouer avec.
Donc certainement que chacun sache, s'il vous plaît. [Rires] >> [Bowen] impressionnant.
C'est encore meilleure réponse que je voulais vous donner.
Nous avons des heures de bureau pour les développeurs que nous faisons à notre bureau
et maintenant venir bientôt le Microsoft Store sur le Pru,
mais Edwin a déjà pris soin de vous.
Il ya 4 ardoises disponibles pour le prêt, pour les tests.
Nous y voilà. Il ya un exemple de là-haut.
Donc oui, absolument. Grand.
Absolument de loin la meilleure façon de le tester est d'être sur un périphérique.
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
de saisir un ou que ce soit, il ya un moyen de le faire revenir dans Visual Studio.
Si je retourne dans où j'étais ici, ici au lieu d'utiliser la machine locale,
vous pouvez vous connecter à la machine à distance, mais ce n'est pas ce dont je parle ici.
Simulator est la chose que vous voudrez peut-être examiner.
Je vais courir ce, et vraiment ce que c'est, c'est essentiellement une fenêtre sur votre propre système.
Voici en fait mon système en marche, la course Contoso,
mais d'une manière qui me permet de changer certains paramètres d'exécution,
les paramètres environnementaux.
Donc je peux dire ici, "Vous savez quoi?"
Oh. J'ai déjà en cours d'exécution dans un moniteur 27 pouces simulée à 2560.
Je peux facilement tomber que vers le bas et voir ce que ma demande serait faire avec un écran plus petit
ou en modifiant les paramètres DPI ou autre.
Ainsi, sur un petit écran, un 10,6, ce qui est ce que ça va faire?
Cela semble encore assez bon, non?
Vous aurez envie de le faire, surtout si vous vous soumettez à la boutique, parce que nous faisons
dans le cadre du processus de test.
Et s'il ya des problèmes de ce genre,
alors vous pourriez rencontrer un problème d'obtenir la certification pour le magasin.
Mais cela fait partie du simulateur. Vraiment cool. Très facile à faire.
Vous pouvez également utiliser des fonctionnalités telles que tourner ainsi.
Je peux cliquer sur le bouton ici, j'ai il tourner, voir ce qui aurait quelqu'un comme une expérience
tourner leur ardoise, leur tablette, et en utilisant votre application avec cela.
Il ya d'autres choses aussi, comme l'émulation de contact et d'autres choses,
mise GPS.
Je ne peux prétendre que je suis à un endroit différent et voir ce que mon application ne
quand je prétends que je suis de retour à Seattle ou quelque chose.
Mais c'est une fonctionnalité très utile, et il est construit pour Visual Studio et dans Blend.
Oui. Votre question.
>> [Élève] Si vous écrivez un jeu, Visual Studio ne dispose pas d'un soutien pour l'animation?
Ouais. La question est d'environ appui de l'animation, en particulier avec les jeux.
Cela dépend. [Rires]
Avec JavaScript, je dirai qu'il ya probablement moins de soutien que il est sur le côté XAML,
qui a des échéances, a storyboards et les choses qui sont construits po
Pour les animations sur les applications JavaScript, je ne sais pas combien de réponse, je tiens à vous donner.
J'ai ressources sur mon blog qui passent par beaucoup d'options pour les animations de physique,
options pour les jeux JavaScript orientées sur Windows 8.
Je vous renvoie à celles-ci.
Fondamentalement, il ya tellement de choix.
La raison pour laquelle je suis hésitant, c'est qu'il ya tellement de choix pour faire des animations avec JavaScript.
, Basée toile-Il pourrait être CSS il pourrait être, il pourrait être animations DOM juste de base,
il pourrait être beaucoup de choses différentes, donc cela dépend vraiment de votre choix.
Si vous décidez d'utiliser quelque chose comme Create.js ou de chaux ou d'autres types de cadres -
Eh bien, je ne suis même pas sûr que vous allez être en mesure d'utiliser un cadre haut de gamme
certainement d'impact ou construire.
Cela tend à générer plus de code que vous pourriez envisager de partir de zéro.
Mais dans ces cas, vous pouvez toujours utiliser un simulateur, vous pouvez utiliser les environnements,
et j'ai tendance à simplement utiliser cet environnement pour ma plate-forme de test dans les cas
comme je suis le développement de jeux.
J'ai été très bien surtout avec animations toile,
qui est probablement la chose la plus commune.
Le mieux que vous allez probablement dire les outils de dev dans le navigateur
et les outils de développement Visual Studio.
Une sorte de réponse méandres là, mais j'espère que j'ai obtenu votre réponse. Oui. Vous.
>> [Élève] Quelles sont les options de stockage de données pour les applications Windows 8?
Quelles sont les options de stockage de données pour les applications Windows 8, les applications Windows Store?
Vos options sont vraiment chaque application possède sa propre piscine de stockage local
pour les paramètres et des données, mais il est aussi ridiculement facile à utiliser itinérance stockage,
utiliser le stockage en nuage. C'est gratuit.
Ce qui se passe est que vous choisissez fondamentalement une classe différente et vous dites,
"Paramètres d'itinérance, Enregistrer, cet ensemble particulier de contenu»,
et leur compte Microsoft, ce qu'ils ont signé en tant que,
va être la clé de l'itinérance que les informations autour.
Donc, si j'utilise votre jeu sur mon ordinateur portable et je me connecte avec le même compte
et je joue le jeu sur une surface ou une tablette,
qui sera automatiquement déplacer ce paramètre et de données entre les machines.
C'est une chose de défaut. C'est bon pour certaines quantités de données.
Vous ne mettriez pas une énorme base de données dans ceux-ci.
Pour cela, vous devez aller à d'autres types de solutions, comme une base de données hébergée dans le nuage,
des choses comme ça.
Il existe d'autres options de la communauté autour d'autres types de technologies de données.
J'ai vu quelques options SQLite dans la communauté autour de là aussi.
Donc, de plus en plus font leur apparition, mais ce sont les premières choses que vous voulez regarder vers
pour un jeu ou une application.
Et vous aviez une question dans le dos aussi.
>> [Élève] En termes de réseau [inaudible] téléchargement de fichiers [inaudible]
[Bowen] Votre question est comment pouvez-vous voir ce que ou comment pouvez-vous déboguer et que tester?
[Élève] Comment pouvez-vous déboguer [inaudible]
Désolé. Je ne peux pas entendre tout cela.
[Élève] Comment obtenez-vous ce bug testé et aussi [inaudible]
Grand. Grand.
Comment travaillez-vous avec le réseau? Comment pouvez-vous voir ce qui se passe?
Il ya beaucoup de réponses différentes à celui-ci,
mais permettez-moi de vous montrer probablement les choses les plus faciles ici.
Permettez-moi de me débarrasser du simulateur pour une seconde.
Juste quelques options de débogage pour le réseautage.
Il ya une pile de réseau complet cuit à droite dans la fois au niveau WinRT et de WinJS,
de sorte que vous pouvez très facilement faire XHR, de type AJAX appels de votre jeu ou une application à le faire.
Principalement, j'ai tendance à utiliser deux choses.
J'utilise les outils de dev réels eux-mêmes, qui ont une pile réseau cuit en eux.
Permettez-moi de vous montrer la page d'accueil de Windows.
Je peux apporter cette place, et il ya effectivement un proxy réseau cuit dans ces outils ici.
Donc, je peux le faire, je peux actualiser la page, et ça va me montrer toutes les interactions,
y compris les appels AJAX pour cette session, pour la durée de cette demande.
Ceci est utile. Ça va être très utile pour les applications basées sur un navigateur.
Pour les autres types d'applications, y compris les applications de Windows Store,
J'utilise un outil appelé Fiddler.
Vous allez obtenir un jeu en réponse. [Rires]
Fiddler est un proxy simple. Je pense que je peux montrer que vous.
C'est juste GetFiddler.com, qui, curieusement, je traçage ma pile réseau
aller à GetFiddler.
Mais de toute façon, Fiddler a été écrit par l'un des Premiers ministres de l'équipe IE,
donc il sait ce qu'il fait.
C'est un bon indicateur que vous pouvez utiliser pour le trafic réseau de débogage.
Je recommande que. Question là-bas aussi.
>> [Élève] Y at-il un moyen facile d'intégrer entrée de langue étrangère,
comme le japonais ou le chinois, dans les applications de Windows?
Je ne peux pas dire que j'ai fait trop de moi-même, mais il est cuit po
Il ya des options pour l'émission bien sûr votre application - je suis désolé, je n'ai pas dit la question -
les options sur la mondialisation, la localisation du contenu,
y compris des choses comme étant en mesure de vendre sur des marchés différents
et cibler cette version de l'application pour les différentes langues
ou cultures ou des choses comme ça. Absolument construit po
Nous avons obtenu un soutien pour que, pour toujours,
et qui porte en avant dans vos options pour Windows Store.
Vous pouvez le faire dans le magasin lui-même, de vendre sur des marchés différents,
vous pouvez le faire dans l'application ainsi trop à l'utilisation des ressources à définir,
«Si je suis développé pour cette culture, puis utiliser ces dérogations pour mon contenu textuel
»Ou utiliser un droit de lecteur gauche."
Ce sont tous partie des WinJS par défaut et WinRT API. Bonne question.
>> Comment faisons-nous? D'autres?
Et si quelqu'un a des questions sur la vidéo, je cbowen @ microsoft,
donc je suis heureux de prendre toutes vos questions de l'avenir.
Très - De l'avenir, l'avenir [imite écho].
Donc, ici, c'est moi. Permettez-moi de revenir mon contact ici.
Alors envoyez-moi une note, cbowen @ microsoft,
et je vais revenir vers vous dès que possible.
>> Tout ce que vous vous demandez? Sommes-nous bien?
Grand. Très bien. Je vous remercie tous beaucoup. Je l'apprécie. [Applaudissements]
>> [CS50.TV]