[Powered by Google Translate] [Seminari - Windows 8 - desenvolupament d'aplicacions / jocs amb HTML5] [Chris Bowen, Edwin Guarin - Universitat de Harvard] [Aquest és CS50. - CS50.TV] 

Hey, tothom. El meu nom és Edwin Guarin. Aquest és Chris Bowen. Deixaré que presentar-se a si mateix en un segon. Només vull fer un anunci ràpid. En primer lloc, tot el que els estudiants CS50 Obtingui Windows 8 gratis. Així que si vostè està pensant en realitat a usar-lo per al seu projecte final, és teu. Nate enviarà un correu electrònic més tard per obtenir instruccions. La segona cosa és que si vostè decideix escriure una aplicació de Windows 8 per al seu projecte final CS50, estarem fent alguns regals: una Xbox, podríem ser capaços de donar una pissarra de distància, coses així. Així que si hi ha alguna cosa que et deté, anem a Chris o ho sé com podem ajudar a crear alguna cosa realment bo. Així que gràcies de nou per venir avui, i vaig a lliurar a Chris. 

Gràcies, Edwin. Gràcies a tots per estar avui amb nosaltres. Sóc Chris Bowen. Sóc un dels col · legues d'Edwin aquí al nord-est. Volia simplement passar una mica de temps amb vostè parlant com fer una aplicació de Windows Store amb HTML5, JavaScript i CSS i el tipus de aconseguir les preguntes que pugui tenir al respecte van respondre per a vostè com vostè està mirant cap pensant potser d'usar-lo per a una fase final oportunitat CS50. 

Dit això, anem a bussejar a la dreta dins Vaig a anar més a les diapositives aquí. Si vostè té alguna pregunta, no dubteu a enviar-me un correu electrònic. Estic cbowen@microsoft.com, i no és el meu blog i el meu Twitter. No obstant això, vostè vol posar-se en contacte amb mi, això està bé. Tinc al voltant d'una hora de coses, i vull arribar a les seves preguntes en el camí, així que no tingui por de tenir preguntes durant aquest. Ells no poden veure qui està fent les preguntes relatives al registre, per la qual cosa serà tan anònim com vostè vol ser. 

Déjame bussejar en dret, només li donarà una introducció ràpida a Windows 8, i us mostra algunes de les coses sobre Windows Store aplicacions que vostè podria considerar i quan vostè està pensant en desenvolupar una aplicació. Estem pensant en Windows 8. Hem estat fora per un parell de setmanes. Una gran quantitat d'adopció ferma per aquí ja. És possible que hagi vist les màquines de superfície que tenim també. Hi ha un aquí realment pots fer una ullada a si vostè està aquí en persona. Tinc moltes ganes de parlar amb tu, t'ensenyaré una mica sobre Windows 8. La idea amb Windows 8, el que realment es presentarà tota la matèria que vostè sap sobre Windows en algunes noves experiències - en particular, les coses com en la màquina de la superfície amb un toc, aquest tipus de dispositius més mòbils que estan ara en el mercat, però també és de Windows en el seu nucli. Així que això significa que vostè pot instal · lar realment en qualsevol cosa que funciona amb Windows 7, de la seva major SLI triple plataforma de jocs al seu ordinador portàtil i per als seus nous i lluents altres dispositius que es pot recollir a l'actualitat. Les tasques s'executaran en Windows 8. Et vaig a mostrar tot una mica, i totes les experiències que vostè veu aquí són coses que es poden crear. La idea és si és tàctil, ratolí, teclat, sigui quin sigui el dispositiu és que vostè està funcionant el seu aplicació sobre, que funcionarà molt bé. Windows 8 ajudarà amb tots aquests escenaris. 

Aquestes diapositives de banda, tindrem dret a fer una ullada per aquí. Deixa mostrar la meva pantalla d'inici. Aquest és la meva pantalla d'inici. Només et donaré una mica d'un tour aquí. Estic en una màquina que no toqui, per tant com jo vull tocar la pantalla del meu ordinador portàtil, no farà res, així que vaig a desplaçar-se per aquí una mica i mostrar. Algunes coses que vostè pot notar és el fet que aquestes ho són anomenats live tiles realment pot animar, i poden proporcionar informació a vostè - potser les actualitzacions en les estadístiques d'un joc o mostrar notícies d'algunes de les aplicacions anteriors que són aquí a la banda esquerra. Això és. Estic segur que és només positiu i fantàsticament gran notícia. Es pot veure aquí és realment cridar la seva atenció de nou a l'aplicació, dient: "Escolta, hi ha alguna cosa nova aquí. Fes una ullada. Torna dins i veure què hi ha de nou." D'això se'n diu live tile, i vostè pot fer les notificacions ja sigui des de la pròpia aplicació o si vostè pren un aspecte a més detall, t'adonaràs de com escriure un servei remot que en realitat es pot inserir informació de la rajola, que és el que està passant amb aquestes aplicacions de notícies. Ells en realitat estan rebent notícies del núvol i l'actualització de la rajola allà que la gent sàpiga que hi ha una raó per obrir l'aplicació i fer una ullada qualsevol que sigui l'última notícia és en qualsevol d'aquests o si hi ha noves receptes o la seva nova puntuació per vèncer o un amic de joc o el que sigui en aquestes aplicacions. És una cosa per atreure de tornada polz Així que això és les rajoles en viu, i podria ser una persona, que podria ser un lloc web també. En general, es tracta d'una aplicació. 

Gairebé totes aquestes coses que tinc aquí van venir de la Botiga Windows. Em llançaré això. És una de les aplicacions que s'obté per defecte en qualsevol màquina que executa Windows 8. Vostè pot venir aquí per trobar tot el que vulguis, de les coses que es destaquen als jocs que no he vist abans. Oh, wow, tenim un nou pinball aquí. Podeu instal · lar aquests aquí a la botiga, i parlarem sobre com desenvolupar aquests. Vostè té un munt d'opcions en la forma en què els crea. Ens enfocarem en la història en JavaScript amb HTML i CSS, però per a l'usuari, el comprador de l'aplicació, no importa el que estava escrit polz Ells poden seguir endavant i treballar amb ell. Estic intrigat per aquesta, així que he de obrir això i fer una ullada. Totes les aplicacions, inclosos els que es poden enviar i vendre o regalar de forma gratuïta, tot el que vols fer a la botiga, obtindrà una pàgina d'inici com aquest. Vostè pot presentar amb la sol · licitud un munt de captures de pantalla - que es veu una mica d'aquí - detalls sobre l'aplicació, i amb el temps aniràs acumulant ambdues qualificacions - que són, bàsicament, només el nombre d'estrelles - i opinions, que proporcionen una mica més penetració. En realitat, algú ha d'escriure alguna cosa i et diuen el meravellós que ets, i que entrarà en la seva secció de comentaris aquí, que jo no he mirat. Fantàstic. "Ni tan sols vaig a obrir." Que gran. Bé, per a la gent per a qui aquesta es va obrir i córrer, sembla que realment gaudir-ne. [Rialles] Tingueu això en compte. La Internet. Qualsevol pot dir el que vulguin sobre la seva aplicació. Així que assegura't que estàs fent un gran treball amb ell, assegurar-se que està fent el més còmode per a l'usuari com sigui possible perquè són un parell de clics de distància de proporcionar una opinió, i que s'acumularan fins que la seva valoració global de revisió. I vostè vol fer el millor perquè vas a estar en contra d'altres aplicacions. Hi haurà milers d'aplicacions que ja estan a la botiga, i les ocasions són, pot haver alguna cosa que el fa una funcionalitat similar al que estàs fent. Així que si vostè realment pot destacar entre la multitud, que serà al seu avantatge, és clar. 

Anem a entrar a la botiga una mica més tard. Realment em vull centrar en la creació d'aplicacions. Però la versió curta de la botiga és de distribució mundial, és automàticament part de Windows 8, la gent simplement disparen cap amunt i mirin diverses aplicacions aquí, vostè té el Sticker Book Dress-Up i tot tipus d'aplicacions diferents. Pintura fresca, jo faig servir molt això - mal, però el faig servir molt. M'està mostrant que ja tinc. Et vaig a ensenyar una cosa que no tinc - UVideos no tinc com nou. Aquí es pot apreciar que és gratis, així que vostè pot instal · lar des del magatzem. Vostè té opcions també. Per descomptat, pot donar a les escombraries. Vostè pot posar publicitat en l'aplicació o joc. També pot cobrar per ell, i que podria proporcionar fàcilment un judici per a l'aplicació, així pel que pot deixar a la gent provar durant una setmana o el que vulguis fer. Això és personalitzable a través del portal. No escriu cap codi per això. Així que vostè diu, "Vostè pot utilitzar això per una setmana i després has de comprar-lo" o vostè podria fer coses com: "Vostè podria jugar els 3 primers nivells d'aquest joc "I llavors vostè ha de comprar per accedir als altres." Vostè podria fins i tot fer compres a l'aplicació, així que es pot dir, "Tenim aventures o jocs de gràfics o coses que es desbloquegen addicionals - "Més receptes que es desbloquegen -. Si vostè compra aquests conjunts estesos" I vostè pot fer que tots dins de l'aplicació o el joc en si. Per tant, totalment de vostè, la seva elecció. Hi ha un munt de coses que es poden fer a la botiga, i després, bàsicament, li vas a enviar a un canal de certificació. Podem parlar de tot això una mica més tard, però aquesta és la meta. Vostè vol aconseguir la seva visibilitat a tot el món d'aplicacions a la botiga aquí. 

De tornada a la pantalla d'inici aquí, m'agradaria que li mostri tot una mica més. Si llanço aquestes aplicacions, et vaig a donar un exemple de funcionalitat creuada aplicació aquí. Per fer això, jo llançaré Fresh Paint. Una cosa que vostè veu aquí és cada bit de la pantalla, tots els píxels de la pantalla, aneu a la seva aplicació. Enrere han quedat els dies en que vostè té aquestes fronteres al voltant de les finestres amb un munt de botons que sempre hi són ocupant espai tot el temps. Ara vostè realment vol allunyar d'això i tenir el seu contingut sigui l'enfocament. Podem fer coses amb Windows mitjançant l'accés a altres tipus de menús. Un d'ells és en realitat el que s'anomena la barra d'encants, i que surt des del costat de la pantalla. En realitat es pot pel · lícula des del costat si té una pantalla tàctil, vostè pot fer clic dret si té un ratolí, hi ha una drecera de teclat perquè, sempre hi ha més d'una manera de fer alguna cosa en l'ambient aquí. Això porta a terme una sèrie de coses que vostè pot fer. La més òbvia és que pugui tornar a la pantalla d'inici, però els altres 4 són el que s'anomenen encants. Són contractes que es pot connectar a com un desenvolupador d'aplicacions. Estan molt bé. Cercar, estic segur que això és una cosa que faràs, compartint Et vaig a mostrar en un segon, i Dispositius i Configuració, aquestes són totes les coses que la seva aplicació es pot inserir per aprofitar Windows, per dir: "Jo he fet la meva part "I vull que Windows admet alguna altra funcionalitat, "I jo no vull escriure un munt de codi per fer que això passi." Això és realment un benefici de l'ús d'aquestes característiques. Et vaig a ensenyar un. Per fer això, faré una nova pintura. També vaig parlar sobre l'ús de cada píxel per a la seva aplicació. Per defecte, això és el que l'aplicació de la pintura es veu com quan vostè ho està utilitzant. És realment sobre el que està dibuixant, el teu lloc. Podia fer coses horribles aquí. Què he de dibuixar? No. Garabatos? Oh, genial. Jo puc fer gargots. Fantàstic. Un gall dindi? [Rialles] Aquest és el més abstracte del gall dindi veurà. També puc portar el que s'anomena la barra de l'aplicació, i això és realment una de les principals formes que es poden utilitzar amagar lluny de totes les coses que podria haver estat en la seva aplicació o joc abans simplement ocupant espai tot el temps. Així que ara vostè pot posar aquí, i això és realment una de les més belles experiències amb la barra de l'aplicació que he vist. Poseu les opcions aquí per seleccionar diferents colors. Volíem un gall dindi, així que posarem una mica de cafè aquí, començar a barrejar en un parell de colors. Anem a prendre un color intermedi aquí i després torna aquí. Vostè pot començar a dibuixar. Aquí està el seu gall dindi. Fantàstic. No puc dibuixar, per començar, però fer-ho amb un touchpad al davant d'una audiència és fins i tot millor. Això és impressionant. La idea, però, és tot el que m'importa és aquí mateix a la superfície. Diguem que estic molt satisfet amb això que he de compartir amb algú. Normalment el que es pot fer amb altres versions de Windows, vostè potser prendre una captura de pantalla, que li fa una mica de copy-paste del text o coses per l'estil que voleu compartir a terme, i després anar i obrir una altra aplicació i el va posar en ella. Aquí no ha de fer això. En realitat es pot posar de manifest la barra d'encants i dir: "Vull compartir això." En aquest punt es va a mostrar totes les aplicacions que saben com treballar amb el que està sent compartida. En aquest cas es tracta d'una imatge, de manera que dirà: "Veig que tens una imatge." "Vols compartir això?" Vostè pot veure que l'email a mi mateix coses tot el temps. Reconeix que, i m'està oferint que com un accés directe, Però també em va mostrar totes les aplicacions que sap com tractar amb la presa d'una imatge i fer alguna cosa amb ella. Tots ells han indicat a Windows que puguin fer això. En aquest punt es tracta de Windows. L'usuari simplement tria el que vol fer amb ella. Vaig a fer la meva habitual d'PuzzleTouch. Es pot veure que he creat tot tipus de trencaclosques en el temps. Prendré PuzzleTouch i dir: "Vull compartir aquesta creació increïble amb PuzzleTouch." Es seguirà endavant i dir: "Molt bé. Vols compartir això? Fantàstic." "Vols fer un trencaclosques que és fàcil, intermedi, el que sigui?" Vaig a fer una intermèdia aquí. Això fa que el trencaclosques. Serà un gran trencaclosques, perquè és majoritàriament en blanc. Però és llest, i de fet és nou en l'altra aplicació. Si vinc aquí, puc buscar i llançar. Ara bé, si ens desplacem durant només una mica aquí, hauríem de veure la meva creació en algun lloc. Què vaig fer? Quin tipus de trencaclosques ho faig? He fet que sigui fàcil? Oh, aquí està, aquí mateix. [Rialles] És el trencaclosques de gall dindi fàcilment reconeixible que és aquí. Però el que vull assenyalar a vostè, el bo aquí es les aplicacions no sabien res l'un de l'altre. Només va dir: "Tinc una idea per compartir, i sé com tractar amb les imatges." I vostè, com a desenvolupador, vostè no ha d'escriure aquest codi. Quan algú em demana que compartir, em vaig a posar algunes dades en aquesta petita estructura de dades i he acabat. L'altra aplicació es fa càrrec, fa la seva cosa, i aquest és el final de l'experiència de compartir. Això és una cosa que vostè pot fer - molt, molt potent - i que serà una d'aquelles coses que realment podria ajudar a diferenciar la seva aplicació i també el seu joc massa a la botiga. La gent serà capaç de dir: "Això és realment útil." "Jo ús aquest creador de trencaclosques tot el temps. És fantàstic." 

Això és suficient d'una breu descripció del que està passant aquí. Hi ha un parell d'altres característiques també que potser anem a destacar a mesura que avancem a través de codi. Però vull bussejar en les diapositives, i per fer això, jo vaig a anar a escriptori, que és al seu torn una altra fitxa en viu aquí. Puc entrar en això i, per descomptat, estic en els meus diapositives, però m'ho dius a mi que et ensenyi realment on som. En realitat estem en la manera d'escriptori. Això és realment on el que estava dient abans sobre Windows tirar endavant a noves experiències es mostra. Aquest és el de Windows ja saps. Aplicacions de Windows s'anomenen aplicacions d'escriptori. Corren aquí. Si has aplicacions existent i desitja executar en Windows 8, tot es pot fer això. Aquestes no són les mateixes coses que les aplicacions de la botiga, que són d'aquí, com pintura fresca i aquestes aplicacions i coses així NBC News. Aquells provindrà de la botiga. Poden connectar-se a algunes de les característiques que m'estava mostrant que i altres que no t'he mostrat encara. Però així que tingues en compte. Tenim el suport per a aquestes dues coses també. Ho sento. Hi ha res que no apareix a la pantalla? He perdut completament. Això és estrany. Okay. Gràcies per assenyalar-ho. El que no ha estat veient durant un temps és el meu mostrant que l'escriptori és aquí. Què és l'últim que has vist? Has vist això? Aquest és l'escriptori. Vostè ja sap el que sembla. No és gens terriblement inusual. És la nostra experiència que porta endavant per a vostè i que li permet usar les coses que vostè ha tingut. Per exemple, vaig a estar mostrant Visual Studio. És una aplicació d'escriptori. Es va a executar en aquesta manera. Es va a donar suport a un entorn més complex amb un munt d'opcions i coses per l'estil, per la qual cosa es converteix en una bona opció com una aplicació d'escriptori. 

Dit això, anem a anar a les diapositives per una mica i li donarà una mica de contingut introductori i després entrar en la realitat de codificació aquí. La bona notícia és que he sentit que has estat enfocant en un munt de CSS i JavaScript, HTML. Totes aquestes coses que has estat aprenent equipatge directament en la fabricació de finestres de la botiga d'aplicacions. Les coses que has estat sentint sobre l'aplicació dels selectors CSS i totes aquestes coses és exactament el que fer per crear una aplicació aquí per a la botiga. Anem a anar a través d'aquestes coses a poc a poc. Bàsicament, estic construint en les coses que ja s'han pres el temps per aprendre. Aquesta és la carta de l'tecnologies que pot utilitzar per fer aplicacions per Windows 8. La matèria de la dreta, les aplicacions d'escriptori, és realment el que ja sabem. Això és una cosa que és realment el món de Windows 7 es va arrossegar a Windows 8. Totes aquestes opcions es traslladen al futur: C #, VB, Win32 tipus de desenvolupament. Gran. No hi ha problema. El nou material està al costat de la mà esquerra. Això és de Windows per emmagatzemar aplicacions, que és quan jo vull fer la meva sol · licitud de cablejat en Windows 8 utilitzant totes aquestes característiques, ho aconsegueix a la botiga, i aconseguir que l'experiència realment genial de les aplicacions de Windows Store. Per fer això, vostè pot veure aquí tens totes les opcions amb XAML, C + +, C #, VB, podeu fer DirectX, coses així, coses que van més enllà de la diapositiva. Però per a nosaltres, ens centrarem en la dreta en el fet que l'HTML, CSS i JavaScript són realment un ciutadà de primera classe per fer aplicacions per Windows 8 i per a la Windows Store. Així que això és bo per a tothom aquí i la gent veient en vídeo ja que només pot aprofitar totes aquestes experiències que tens i realment lligar en el que ofereix de Windows. Vas a fer que a través d'un conjunt d'API, que hauria de ser una sorpresa. Cada sistema operatiu té les seves pròpies APIs. Exposem el que Windows pot fer a través del que s'anomena WinRT. És un conjunt d'API que només ho fa tot per vostè. Si vostè necessita per obrir els arxius, necessita utilitzar la càmera, geolocalització, coses per l'estil, passen de manera que Windows pot oferir a vostè. Per accedir a això, tenim una mica més de JavaScript que farà que sigui encara més fàcil perquè vostè faci això. Anem a arribar a això en un moment. Però per ara, això és, bàsicament, el seu full de ruta. Les coses que vostè ja ha estat fent a la part superior d'algunes API que l'ajuden a treballar amb Windows és igual a la botiga d'aplicacions. I això és realment tot el que has de saber de l'alt nivell. 

Anem a submergir-nos en realitat treballen amb les coses ara. Les coses que vostè probablement ha vist un munt de, amb IE9 fa una estona ens introdueix suport per a una gran quantitat de la, en aquest moment, nous estàndards en la web, de manera que una gran quantitat de noves característiques de CSS, una gran quantitat de nou HTML, ECMAScript 5, que és realment JavaScript. Així que tot el necessari perquè a excepció de manera estricta era a IE9. Només un munt de coses amb CSS, CSS3, tot aquí. I tot això tira endavant en el que estem fent amb Windows 8. Vostè pot utilitzar aquestes coses, i es pot utilitzar tot el que hi ha de nou en IE10. Amb IE10 introduïm el suport a totes aquestes coses també. Són tots amb acceleració per maquinari, així que si estàs en un equip que té algun tipus de GPU, que és probablement gairebé totes les màquines que es podia aconseguir en els últims 8 anys, vostè serà capaç de tenir la sortida accelerada de maquinari, sortida visual amb CSS, Canvas, SVG. Totes aquestes coses van a anar a través de l'acceleració de maquinari i ser molt més ràpid i més eficient. La versió curta de tot això - jo no vaig a anar a través de cada cosa aquí - si ho veus en aquesta llista, si pot fer-ho en IE10, si es tracta d'una aplicació web que s'està executant que funciona a IE10, que és una cosa que pot fer com una aplicació de Windows Store. I això és pràcticament tot. Així que si funciona en IE10, que treballarà com una aplicació de Windows Store. És en la taula com una cosa que es pot utilitzar. 

Hi ha molt aquí. No tenim fins a la mitjanit, així que no puc opinar sobre tot el d'aquí. No obstant això, hi ha alguns llocs que l'ajudaran a entendre el que aquestes coses es poden fer, i jo et vaig a mostrar una d'elles en un segon. Jo només volia assenyalar algunes de les coses claus que vostè pot veure. Potser vostè ja ha vist alguns d'aquests en els seus estudis, però aquests són realment útils, en particular amb el Windows Store aplicacions, des del costat CSS. Així de ser capaç de fer les transformacions i transicions, proporcionar el moviment amb l'animació - Tots ells formen part de la CSS ara, i estan tots suportats pels navegadors moderns, i IE10 i IE9 ha afegit suport a través del temps per a totes aquestes coses. I per què escriu vostè mateix, per què anar per tots els problemes de fer aquestes coses amb la mà quan es podria utilitzar un simple CSS transformen per crear un efecte 3D per a la seva aplicació? Gran. Així és com funciona. No puc fer que sigui més difícil que això. Si vostè sap com fer-ho en CSS, ja saps com fer-ho en l'aplicació de Windows Store. 

Més enllà que per al disseny, fins i tot coses com l'App Store, però va més enllà d'això, mirant potser una aplicació de notícies que t'està mostrant articles o receptes o coses per l'estil, aquests altres tipus de característiques en CSS són realment útils: Quadrícula, Flexbox CSS Regions és més d'un bastant nou estàndard també. Aquestes coses estan anant per ajudar a vostè presenta contingut i contingut entre seccions de flux, ser capaç de fer la paginació i divisió de paraules sense haver d'escriure les coses un mateix. Vostè acaba de dir: "Si us plau, feu el següent per a mi" i com l'espai en pantalla és diferent en diferents màquines o com ho veurà en un moment, com trona una aplicació tenir una menor quantitat d'espai a la pantalla, això no és problema per CSS. Es pot aprofitar - xerrada We'Ll sobre les consultes de mitjans de comunicació en un segon - que pot fer-se càrrec de les coses amb el reposicionament del seu contingut, que flueix el contingut de les regions només amb aquestes coses que vostès ja han vist amb la tecnologia web. 

Pel costat de HTML5, també hi ha un munt de coses que serà molt útil per a vostè amb el Windows Store aplicacions. Un cop més, no anem a anar a través de tots ells, però són només aquí. Així que si cal usar-la, àudio-vídeo, si vostè vol fer la validació de formularis, geolocalització, totes les coses que pots fer en JavaScript amb JavaScript o 5 ECMAScript 5, IndexedDB per a emmagatzematge local - aquestes són totes les opcions per a vostè. Si vostè està buscant una resposta, només cal veure les tecnologies existents amb HTML5 i CSS i trobareu les respostes més fàcil que haver de treure un munt d'aquestes coses a tu mateix. Et vaig a ensenyar tot una mica aquí. Tinc un lloc que podem anar. Vaig a deixar de sortir d'aquesta diapositiva per un segon. 

Si sortim a IETestDrive.com, No faré molt d'una demo aquí. IETestDrive.com està realment mostrant molt del que hi ha de nou amb IE10, les coses que vostè pot fer. Em sembla que això és realment útil perquè en lloc de llegir a través d'un munt de llibres blancs, un cop d'ull a un parell de donem, i això ajudarà a posar en el seu propi radar personal sobre si una tecnologia té sentit fins i tot fer més recerca amb perquè entenguis, "Veig el que és això." "Entenc el que fa trama de petició d'Animació per a mi." "Entenc com podria utilitzar Regions o filtres SVG." Se'ls veu en acció, veure-les en un exemple aquí, i decidir per tu mateix si això serà útil per a vostè en els seus propis projectes i més enllà a mesura que continuï treballant amb la tecnologia web. Aquí m'agradaria simplement animo a fer una ullada. No crec que vaig a passar molt de temps que en realitat executa aquests. Tenim prou per mostrar amb l'escriptura de codi. Vostè veurà aquí les coses dels efectes tàctils de jocs basada en el contacte d'aquesta secció, animació, animació i accelerada de maquinari molt ràpid allà, algunes optimitzacions que es veuen en algunes d'aquestes mostres, així, i hi ha molts, molts més. Si es passa d'aquí i obre el mapa del lloc, només hi ha un nombre ridícul de mostres aquí. Pots veure'ls tots aquí. Si vostè està a la recerca d'alguna cosa o es va assabentar d'alguna cosa i vostè s'està preguntant potser això seria una cosa genial per a usar en l'aplicació, Intenta buscar aquí, i és probable que hi hagi una molt bona demostració que estalviar una mica de temps. 

¿D'acord? Qualsevol pregunta fins al moment per a la gent aquí? Okay. Nosaltres seguirem aquí. Una vegada més, només comprovar que fos. Són els estàndards web, de manera que anar a qualsevol altre lloc d'aparador, que vostè sàpiga i veure si aquestes tecnologies tenen sentit per al que estàs tractant de fer. 

Còpia de les diapositives. Dit això, si es desplaça d'un món web realment un món d'aplicació local instal · lada, així que hi ha coses que comentar aquí. En primer lloc, no hi ha cap servidor web involucrada aquí. No hi ha Apache, no cal executa IIS aquí servir les pàgines a un client remot, a un agent de navegador remot. En aquest cas, en realitat tot el que s'empaqueta per a vostè. Vostè envia que, com la seva aplicació a la botiga, que es va certificar, que està fora de la botiga, i després la gent per milers larà el joc o l'aplicació. Però, bàsicament, estan tirant d'ella cap avall a nivell local per al seu màquina. No hi ha necessitat de sortir al web ia menys que tingui les trucades que necessiten una API remota, i això és perfectament normal, així també. Però no estaran en aquesta manera en el qual han d'anar petició resposta d'un servidor per obtenir la pàgina següent del seu contingut. Així que dit això, hi ha algunes diferències de menor importància de l'API. Aquests són increïblement menor. Són poc probable que el va colpejar en la seva codificació normal, però són almenys documentats. Són una mena de primera línia dels casos allà. 

L'altra cosa és d'assenyalar les diferències de confiança. Només esmento això perquè jo només vull assegurar-me que ho vaig dir així que si arribes a tenir més tard, vostè pensarà, "Chris va dir alguna cosa, "Així que potser, sí, està bé", i després tornar enrere i esbrinar de què es tractava. Els contextos són importants. Per defecte tractem de protegir l'usuari dels vectors d'atac. Hi ha diverses coses que vostè pot fer per defecte i certes coses que cal canviar el context per habilitar. Com vostè està utilitzant algunes biblioteques per aquí - vostè ja s'ha estat treballant amb jQuery, però si es mira d'altres biblioteques per aquí - que pugui estar utilitzant algunes funcions aquest tipus de va més enllà dels usos locals, té interaccions més dinàmiques Peticions XHR, coses així. Algunes vegades vostè pot trobar als es desactivaran per defecte, i en aquest cas, només cal fer una cerca, busqui context local i web, i trobarà la manera d'arreglar això. Només assegureu-vos que vostè sabia que a mesura que comenci a utilitzar altres marcs, la qual, he de dir, ets perfectament capaç de fer. Així que si vostè troba algun altre marc - xerrada We'Ll sobre això en un segon - per als jocs i vols utilitzar això, vol utilitzar algunes llibreries de control que hi són fora i vostè no desitja escriure aquestes coses a tu mateix - que és una bona idea, oi? - pot utilitzar absolutament aquest material. No hi ha res et deté l'ús de qualsevol tipus de biblioteca que està basada en JavaScript CSS, HTML5. Un cop més, si és una cosa que pots fer a IE10, que és un heck de molt en aquests dies, vostè pot fer-ho. Tiri d'ella en la seva aplicació, la referència que la biblioteca de JavaScript, i l'utilitzen en la seva aplicació, només tenint en compte que pot pegar-li a un context de seguretat de tant en tant - no gaire sovint. 

I a continuació, les característiques, anem a repassar uns quants més dels que a mesura que avancem. El UX et tipus de acostumar-se a com es veu més i més aplicacions de la botiga de Windows. Vostè obté una idea de com funcionen i com el disseny estètic tendeix a treballar a través de diferents aplicacions i el que la gent pot utilitzar per experimentar. Això és realment la part més important. Assegureu-vos que quan el foc de la seva aplicació no necessiten llegir un manual, que mai ho fan, per cert. Ells només han de poder començar a jugar amb el seu sol · licitud i calcular cap a fora sense gaire dificultat. En seguir i adherir-se a una gran quantitat d'aquestes pràctiques, que farà als seus usuaris un gran favor, fent que sigui més fàcil. 

Okay. Una última cosa al costat de l'API i després ens ficarem en realitat l'escriptura de codi. WinJS és que ho he esmentat molt breument amb aquesta diapositiva complexa amb totes aquestes diferents opcions que té per fer les aplicacions. WinJS, es pot pensar en ell com un amic. És el seu amic per ajudar a escriure les coses més ràpidament. És només JavaScript i CSS. No ha de fer-lo servir. Vostè pot utilitzar-lo. Si vostè va a estar trucant a les característiques de Windows, que acabarà d'usar-lo, però si hi ha coses com alguns patrons de disseny o controls que vostè realment no voleu utilitzar, voleu utilitzar una altra cosa, li toca a vostè. Decidiu el que vol utilitzar i els estils que voleu utilitzar. Les característiques de la generació d'espais de nom i classe - depèn de vostè. Si prefereix una o altra, és totalment la seva decisió. Encara és JavaScript i CSS. Però això va a ajudar a fer un munt de coses. Per exemple, aquí hi ha un subconjunt del que pot fer, coses com ajudar a la programació asincrònica amb promeses. O molts de vostès sentit a parlar o treballar amb Node.js? És un patró comú per treballar amb la programació asincrònica. Així que bàsicament el que està dient és: "Vés a fer alguna cosa, "I vostè em donarà una promesa que tornaràs a mi quan hagis acabat." Això és essencialment el que està passant. Així que no es congelen fins a la seva aplicació, mentre que l'usuari va i recollint un arxiu o alguna cosa està sent transmès des de la web. La interfície d'usuari segueix sent sensible. I vostè pot fer-ho mitjançant l'ús de programació asincrònica. Sona ridículament complexa, però és molt fàcil, perquè vostè està utilitzant promeses i que acaba de dir: "Vés a fer això i quan hagi acabat, tornar a trucar a aquest mètode." Això és pràcticament tot. Això és tot integrat en WinJS. Això farà que sigui molt més fàcil escriure aplicacions realment flexibles i potents. 

Pots veure la resta aquí, un munt d'animacions. Probablement una de les coses més importants en aquesta diapositiva són controls. Crec que tinc un tot - Sí, ho crec. Heus aquí un exemple d'alguns dels controls que pot utilitzar en les seves aplicacions. Això és tot en línia recta des WinJS. No està escrivint aquests mateixos, Acabes de dir, "Així és com jo vull compondre meva sol · licitud." "Vaig a utilitzar una vista flip per poder anar entre les diferents imatges." Jo no t'he mostrat zoom semàntic. Et vaig a mostrar que en un segon. Listviews. Hi ha GridViews. Ja ha vist una reixeta en el marc de l'aplicació d'emmagatzematge, així que la possibilitat d'utilitzar blocs de contingut i el desplaçament a través d'això. Menús menú lateral veuràs de tant en tant. La barra de l'aplicació que et va mostrar amb l'aplicació de la pintura fresca, així, pel que va veure com es poden personalitzar els botons que en posar-hi i que ha d'ocultar lluny quan no t'importa utilitzar això. Això és realment totalment de vostè per al seu ús. Aquests són tots els controls que formen part de WinJS. Et vaig a mostrar com fer això en tan sols uns segons, però no hi ha molt més que això, i la clau és usar-los si vols, estalviar una mica de temps. 

Si vostè té altres biblioteques de control que li agradaria utilitzar, això és perfectament bé també. Coses com jQuery UI fan una gran quantitat d'aquest tipus d'idea, així, proporcionar més controls que s'estenen més del que pot fer en HTML i JavaScript. Anem a bussejar polz Ja he dit això. Utilitza el que t'agradaria. Hem de tenir en compte que vostè podria trobar-se amb alguns problemes de context. Però que sens dubte pot barrejar i combinar qualsevol tipus de biblioteques que se senti còmode, vols aprendre, que voleu utilitzar, per estalviar una mica de temps. 

Anem a parlar sobre les eines només per un segon. Vostè pot aconseguir el que necessita per començar a treballar amb Windows Store aplicacions. Si vaig a sortir, tinc massa coses per aquí. Si vas a aquesta pàgina, que és dev.windows.com, es pot descarregar tot el necessari. Com estudiants, vostè té accés a més de la població en general ho fa, perquè pugui obtenir les versions de gamma alta de Visual Studio. Edwin va esmentar que ja es pot obtenir Windows també. Però, en general, a creadors, pot anar a aquest lloc i descarregar tot el que necessita per fer una aplicació, i tot és gratis. Així que hi ha una versió gratuïta de Visual Studio, hi ha algunes eines que instal · laran al costat d'això - tot el que necessita per crear i provar l'aplicació. És només quan vostè va a publicar l'aplicació a la botiga que vostè va a necessitar un compte de desenvolupador. Això també crec que és gratis. És gratuït per als estudiants, així? >> [Guarin] Quin? El compte de desenvolupador, la presentació efectiva. >> [Guarin] Sí Aquesta és una altra bona notícia. Aniràs mira això. Es dirà que un individu per defecte és de $ 49. Però no inscriure perquè quan era estudiant. Li donarem una mica d'informació a través dels seus programes que vostè pot obtenir un compte gratuïta, i que li permetrà després enviar les seves sol · licituds fins al magatzem, com totes les que vulguis, i tota aquesta bondat seguiran aviat. Així que això és dev.windows.com. Podeu descarregar les eines que pugui necessitar d'aquí. I si ho desitja, pot obtenir una versió de prova de Windows aquí, però de nou, no serà necessari fer-ho. 

L'altre lloc - me assenyalar aquest és per a tu ràpidament - és design.windows.com. Això va ser dev.windows.com. Design.windows.com, vostè pot endevinar per a què serveix. En realitat és un lloc bastant agradable. Hi ha un munt de bona informació aquí. Vostè pot treballar a través d'ell. Es va a donar un consell en algunes coses que potser no han pensat abans o que han hagut de fer front a abans, com el disseny per al tacte, el disseny dels diferents factors de forma, dissenyar per a les capacitats de Windows 8, les coses que he esmentat abans com la recerca i l'intercanvi, algunes coses que no he parlat encara. Tots estan llistats aquí, i és un molt bon conjunt de pàgines d'arxius útils que l'ajudarà a entendre com fer un determinat tipus d'aplicació, com fer la interacció, com fer front a la UI i UX de la seva sol.licitud. Jo recomano que facis un cop d'ull a això, especialment si vostè està en un cert punt amb l'esperança de publicar una aplicació a la botiga. Vostè va a voler saber com fer una bona aplicació ja he esmentat abans, si no ho fa, no hi ha aquests exàmens de nou. La gent va a ser infeliç. No seran capaços de trobar les coses que esperen en els llocs correctes. Ningú vol que això li passi a vostè. 

El camí cap endavant aquí, permetin-me concloure això. Ara que vostè sap on aconseguir les coses, jo et mostraré com començar utilitzar realment les coses. Per començar, vaig a realment mostrar aquí un exemple de les aplicacions d'escriptori a la pantalla d'inici. Aquí es pot veure Visual Studio, es pot veure Blend i altres eines de desenvolupament que tinc. Tenen una rajola lleugerament diferent. Això és degut a que són aplicacions d'escriptori, i en aquells casos en què tots van a posar en marxa de nou al meu escriptori realment només com aplicacions que vostè està acostumat. Així que l'experiència de Windows, que és la mateixa cosa. No són, per exemple, com armat! o aquestes coses. Permetin-me llançar 01:00 ràpidament. En realitat, això és molt interessant. Aquest va ser desenvolupat pels estudiants que treballen en cooperació al NERD. Aplicació a pantalla completa, aquest tipus d'experiències aquí. Oh, bones pantalles de tall i tot tipus de coses divertides. Van desenvolupar això. També podríem mostrar tota la cosa mentre estem en això. De fet, he treballat amb ells una mica, els va donar alguns consells sobre coses perquè estaven fent JavaScript per a la seva aplicació. Si us plau, no m'estic prenent el crèdit pel seu treball, sinó que van fer tota la feina. Jo només els vaig donar una mica de consell aquí i allà, però ho van fer algunes grans coses mitjançant l'ús d'una interfície JavaScript i empatant en alguns motors de la física i coses a fer un munt d'aquest treball. Vagi. A veure si funciona. Wow, que encara funcionava. Molt bé, molt bé. Però s'entén la idea. Una aplicació de pantalla completa, una experiència molt bona. Això es recolza no només el ratolí i el llapis si tinc coses per l'estil, però també toco. Si tingués una pantalla tàctil, tan sols pogués dibuixar sobre ell i seguir treballant amb això. 

Una cosa que no es va presentar, i la raó per la qual estic tocant el tema és que em volia tenir una altra aplicació per mostrar el que pot fer, vostè pot prendre les aplicacions de Windows i arrossegar cap al costat de la pantalla. Això es diu trencar-se una aplicació. En aquest cas, he pres Inkarus i he afegit a un costat aquí. Ara està a la vista Snap, i que em permet fer una altra cosa mentre que l'aplicació hi és. La majoria dels jocs que trobaràs seran simplement fer una pausa. Això és normalment una cosa decent de fer a menys que el seu joc d'alguna manera es pot escalar cap avall perquè els petits d'una resolució, com potser algun tipus de jocs de taula o coses per l'estil en l'ocasió. Però, en general, la cosa més fàcil de fer i el més apropiat per fer per jocs és per fer una pausa l'aplicació. Per a aplicacions com a aplicacions de notícies, si llanço aquesta un i després em Snap, veuràs que en realitat canvia de manera significativa en com es presenten les dades per a vostè. Aquí li està mostrant en realitat una cassola més vertical que la informació, però encara puc utilitzar absolutament l'aplicació. Per tant, segueix sent molt útil. El fet que es troba en un punt de vista més petit no em inhabilita l'ús d'aquesta aplicació. Així que pensar en això. És una cosa que vostè necessita tenir les seves aplicacions fan fins a cert punt, però li toca a vostè per determinar la forma funcional han de ser les seves aplicacions en aquest tipus d'un entorn més petit. Permetin-me concloure que un cap avall i tornar a on érem aquí. 

Edwin, que ha afegit una foto de mi ja? >> [Guarin] Sí >> [Bowen] Mira això. Veus això? Edwin ha afegit una foto. [Rialles] 

Tornem aquí a Visual Studio. Vaig a llançar això per a vostè. Jo podria haver fet clic al taulell en aquesta pantalla d'inici. Em va portar de tornada a manera d'escriptori, i és el llançament de l'aplicació d'escriptori de Visual Studio. Es tracta dels de Windows que vostè ja coneix. Puc seguir endavant i crear un projecte aquí. Ens centrarem més en JavaScript, HTML. Vaig a sortir i seleccionar fins aquí baix JavaScript, Windows Store. Hi ha una sèrie de plantilles que es poden utilitzar. Per a la productivitat, li recomano que mireu alguns d'aquests altres aquí com el Grid i Split. Són molt útils si vostè està fent una aplicació això va a tenir aquest tipus de disseny i navegació. Veureu aquestes molt. El que jo acabo de mostrar era en realitat una instància de l'aplicació Grid. Així que si creus que vas a estar fent una aplicació de notícies o un lector de RSS o alguna cosa per l'estil que s'ocupa de múltiples entrades per a les que li agradaria mostrar el detall, considerar l'ús d'una d'aquestes plantilles per començar a treballar ràpidament i la personalització d'allà. Però perquè jo pugui mostrar totes les parts en moviment aquí Vaig a crear l'aplicació en blanc, i després anirem una mica més profund en els detalls. Només estic fent que l'aplicació en blanc aquí. Es crearà tot el projecte per a mi. Obriré les coses que vull que li mostri per defecte. Permetin-me el zoom en una mica per mostrar el que es crea per a nosaltres aquí. Les coses que vostè va a mirar primer són tots cridats per defecte. Així que vas a buscar default.html, default.js i default.css. L'altra cosa a destacar és que ja tenim una referència al que he esmentat abans. Aquest és WinJS. En realitat, ningú ho diu aquest llarg nom aquí. És WinJS, la Biblioteca de Windows per JavaScript. Si l'obres, es pot veure que és tot aquí. Hi ha diferents arxius CSS, hi ha JavaScript. Hi és per ajudar-te. És realment allà per proporcionar controls i estils i aquestes coses que només pot utilitzar automàticament. Però, de nou, si hi ha coses que voleu utilitzar en el seu lloc en termes d'estil i altres controls, és totalment de vostè. Jo et mostraré com utilitzar un parell d'aquestes coses ara. 

Tornar per sobre al nostre costat esquerre, deixa mostrar la pàgina HTML per defecte. Ja has vist les coses WinJS, i això és realment tot el que està passant allà amb les línies mitjanes de marcat, només amb el que en el CSS per defecte i el que en un parell d'arxius JavaScript des WinJS. Vostè no necessita ser amo del que està passant dins d'aquests arxius. És bastant interessant fer una ullada a ells per revisar alguna cosa del que està passant allà dins perquè hi ha força interessants tècniques de nivell intermedi i avançat passant aquí, però el millor és que els desenvolupadors, pot simplement prendre avantatge d'ells, només els utilitzen i realment no ha de preocupar per això. Encara es pot conduir un cotxe sense haver de saber com funciona, no? Així que aquest és el tipus de cosa que està passant aquí. Hi ha controls i estils i aquestes coses que vostè pot seguir endavant i utilitzar i el codi que es pot utilitzar en un segon sense necessitat de saber el que hi ha. Aquí estan els seus propis arxius. Aquests són els seus llocs que vostè pot modificar el seu propi CSS i la seva pròpia habilitat perquè tot funcioni. Se li afegeix certament altres arxius JavaScript i potser altres arxius CSS que el projecte creix, però això és només un punt de partida. Aquí hi ha el Hola, equivalent al món d'HTML, així que estem de tornada en el cos de l'etiqueta. A la part superior, per cert, és el doctype HTML5, per el que va a reconèixer que a partir del que has estat treballant. Hi ha plena IntelliSense aquí també, així que si vostè fa les coses com el tipus en una etiqueta de vídeo i ampliar això, del que has après sobre el fet que cal fer reserva de codificació per a les etiquetes de vídeo en HTML5 - o potser vostè té - per assegurar que els diferents navegadors tenen suport per al vídeo. Tenim aquest tipus de coses a través d'HTML, mitjançant JavaScript, a través de CSS. Això es basa en, i et mostro CSS en un segon. Aquí vostè pot seguir endavant i començar a modificar el codi, el marcatge. De fet, abans que canviï res, vaig a executar aquest i li mostrarà el que hi ha. Vostè tindrà una pantalla de presentació que pot personalitzar i després s'obté el Hola, l'experiència del món aquí. És fantàstic, oi? Vagi per davant i vaixell, oi? El contingut va aquí. Això és el bàsic. Això només pot millorar a partir d'aquí. Seguirem endavant i afegir en algunes coses. Tinc una mica de marge de benefici que vaig a copiar aquí només perquè vostè no ha de veure escrivint. Déjame anar a obrir la caixa d'eines aquí, i vaig a Pin això perquè vaig a estar fent això un parell de vegades. Caixa d'eines, si vostè no ha vist Visual Studio, és on trobaràs un munt de controls. També es pot posar fragments de codi en ell que es pot reutilitzar. Aquí només vaig a esclatar en algun altre HTML, res terriblement avançat en absolut aquí. És només l'HTML bàsic dient que tinc una entrada on puc escriure, Tinc un botó on puc presentar-la, i després tinc un div que és essencialment un marcador de posició que puc fer servir per emetre el "Hola, que escriu això." És la introducció d'exemple HTML. Si executo això, s'obté automàticament l'HTML, però també es rep automàticament l'estil. Aquesta és una de les coses importants de WinJS. Es donarà per defecte alguns aparença és realment consistent amb la resta del que està fent Windows 8. Aquí podeu veure les coses com el botó. El botó per defecte en HTML no s'assembla a això, sinó que ho fa aquí perquè s'està fent aquest dret CSS d'aquest arxiu CSS a WinJS. Si voleu utilitzar una altra cosa, si vostè vol canviar això, totalment bé, seguir endavant i fer el que li agradaria. Però aquest és el valor predeterminat. Serà més familiar per als usuaris. I per descomptat, això no farà res perquè jo en realitat no el cable fins a qualsevol tipus de codi per respondre a això. Era només el codi HTML. Així que puc desfer-me d'això, i tornarem a la nostra aplicació. 

Déjame canviar als nostres default.js. Això sembla bastant complex, però només està fent algunes coses per a tu. És repetitiu. Serà la mateixa en tots els seus projectes. L'única cosa que això està fent és només una mica de preguntar: "Com he arribat fins aquí?" i dient: "Està iniciant aquesta aplicació per primera vegada?" "Està vostè de reprendre l'aplicació d'haver de ser suspès?" Un parell de coses per l'estil. En realitat, el nostre enfocament en aquesta imatge aquí és just aquí. En aquest punt, aquesta línia de codi és força important. En realitat va a anar a buscar a través de tots els del seu marge de benefici, i que va a trobar coses que t'he demanat que s'han convertit en els controls, controls més profunds, com un control de classificació, com una vista de quadrícula, com el menú lateral i aquestes altres coses que els vaig mostrar en aquesta diapositiva abans. No són controls HTML natives. Vostè simplement no dir flotant com un element i fer que sabia què fer. El que es fa realment és el mateix que succeeix en altres tipus de marcs de control. jQuery UI fa el mateix tipus d'enfocament general. Utilitzeu les marques en el codi HTML, i una mica més tard a través de JavaScript ve i diu: "Oh, jo sé el que és això. Això és demanar perquè això es va convertir en aquestes coses" que és una altra d'HTML més expressiu per fer com un control de les qualificacions, que és el que et vaig a mostrar ara. Aquesta línia de codi és una promesa que està dient: "Quan es compleixi aquesta promesa, "Tot el que li has demanat a continuació ha estat creat." I això és tot. Es veu una mica complex, però en realitat és el mateix en cada projecte. Aquí sota és on vostè pot començar a afegir en qualsevol altra cosa que volem que passi, així que anem a tornar a això en un segon. 

En primer lloc, necessito una mica de codi que pot respondre al fet que algú ha fet clic al botó. Vaig a seguir endavant i posar això en aquí baix. Un cop més, jo no faré cap escrivint davant vostre aquí. JavaScript Molt bàsic només dir quan això es diu anem a proporcionar alguns detalls sobre com hem arribat fins aquí i després farem algunes coses bàsiques. Aneu a buscar la cosa a la meva pàgina d'HTML que s'anomena nameInput, agafar, prengui el seu valor, slap "Hola" al capdavant de la mateixa, i s'adhereixen aquesta cadena resultant en aquesta etiqueta div que teníem abans que realment no tenien res abans. Ara ens trobarem amb aquesta etiqueta i fer el seu contingut interior igual a la cadena. JavaScript Molt simple. Esperem que està reconeixent que no hi ha res inusual està passant aquí. És només cap amunt HTML i JS aquí. Si em quedo això ara, encara no farà cap treball, perquè no he lligat amb filferro cap amunt per rebre l'esdeveniment. Per fer això, faré això aquí, un cop més tornar a la meva caixa d'eines, apareixent a aquí. Espero que hagis vist tot aquest tipus de coses abans, així que no vaig massa explicar-ho. Ara anirem a buscar el helloButton. Anem a dir, "Button, felicitacions." "Aquest és un esdeveniment que ara està responent." "Quan algú fa clic en la seva àrea, truqueu a aquesta funció, el buttonClickHandler." I és que la funció que acaba d'afegir a la dreta a baix al fons allà. Això és tot. Així que ara tenim una aplicació increïblement funcional. Crec que estaràs molt impressionat amb això. Chris. Esperi per això. Wow. Okay. Això és increïble. [Rialles] Però hi ha més. No ho compri encara. Esperi. 

Et vaig a ensenyar una mica més aquí i sortir de la pantalla completa. Anem a caminar abans de córrer. Déjame anar a i en realitat et ensenyi una mica amb CSS. Només per defecte, si mirem cap enrere en la pàgina d'aquí, cada vegada que ens vam aturar en aquestes coses de WinJS i vam aconseguir el ui-fosc, de fet, es pot canviar el valor per defecte per a l'ús d'aplicació de la llum. ui-negre és bo per a aplicacions gràfiques com l'ús d'una gran quantitat d'imatges, vostè està mostrant una gran quantitat de contingut visual. Si vostè està mostrant una gran quantitat de contingut textual, el ui-llum és generalment una bona opció. No ha de triar, però he canviat al i ara que estem veient el mateix marge de benefici, tot igual, és només utilitzant bàsicament un esquema invertit aquí on tot és el que és text negre sobre fons blanc. Això és tot bé i bo. Anem a veure aquí, i farem realitat una mica més amb el CSS. El posaré de nou en la foscor, perquè crec que és probable que sigui més fàcil de veure a la pantalla quan començo a fer aquestes coses. Vaig a canviar el cos un cop més. Vaig a anar aquí. Permetin-me Nuke això. Anem a portar el cos amb classes. Crec que has fet selectors bàsics amb CSS i coses com que ja, pel que vostè probablement sap el que està passant aquí. Simplement assignar algunes classes al nostre encapçalat, i estem creant un nou div per embolicar la resta d'aquestes coses que ara podem fer servir l'estil de tots plegats. Llavors, què puc fer ara és anar al nostre CSS per defecte. Has mirat a les consultes dels mitjans de comunicació encara? Ha parlat d'això en absolut? Consultes dels mitjans de comunicació són part d'aquesta tendència emergent - o és una tendència establerta ara en realitat a la web - per al disseny de resposta o d'adaptació, i la idea és que les seves aplicacions realment poden ajustar apropiadament basat en el que el dispositiu que estan sent mostrats en pot fer. Així que si estàs en un dispositiu mòbil, és obvi que no tindràs béns arrels tant la pantalla com es pot en un gran monitor de 30 polzades d'estar amb un escriptori, un gran PC així. Així que la resposta a aquesta edat seria tenir 5, 6 versions diferents de la mateixa pàgina i que li obre la versió que s'ajusta perquè certa grandària de la pantalla. No gaire bé. És molt, molt repetitiu i hi ha un munt de manteniment per fer això. Ara tenim una cosa anomenada consultes de mitjans CSS, i podem usar això per detectar automàticament quan hi ha certs mides o certs usos del seu contingut que es duen a terme. Així que vostè pot respondre a això i vostè pot dir: "Bé, en aquest cas "És probable que ni tan sols cal que li digui el que està passant aquí". Això és només dir si es va prendre aquesta aplicació, com he mostrat abans - agafar i posar-lo al costat de la pantalla - a continuació, farem el següent estil. Styling no és només sobre els colors i coses així. Es tracta també de mida i marges i farcits i orientacions de contingut o fins i tot desactivar o activar parts senceres de la seva pàgina i, en aquest cas, la seva aplicació o el seu joc també. Així que aquí vostè pot fer tan simple com vostè vol. Això no seria útil en les seves aplicacions, però és hora de demostració, així que vaig a seguir endavant i només ha d'afegir al gestor de cos bàsic i dir: "Quan estic vaig clavar, seguirem endavant i fer background-color i anem a triar una cosa." Tens IntelliSense aquí. Això és realment genial. El 2012 hem afegit un munt de coses per al suport CSS i JavaScript i HTML. Vostè ha suposat tens IntelliSense desplegable també, però això no és el bo. El millor és que tens selectors visuals per a un munt de coses també. Pel que podria passar i simplement triar un color, o pot sortir i ser encara més específic i es pot triar - això serà terrible. Jo realment Tria un color decent aquí. Mira l'marcat també, per cert. Aquest és el format estàndard RGB allà. Però si em canvi l'opacitat, que canviarà a un selector de canal alfa aquí. Així es pot veure que, el color amb essencialment el percentatge de transparència que té perquè tot al forn ben aquí. Vaig a mantenir-lo com el 100% i després, quan he acabat amb això, tot està bé i bo. Ara bé, si executo l'aplicació i ens prenc la aplicació i Snap, aquest color de fons s'ajusta automàticament només perquè tenim una mica de CSS que diu: "Vés a fer això." També pot escriure JavaScript també que va a fer el mateix o que es pot utilitzar per fer una pausa en realitat un joc, fer coses com aquesta. Això és probablement quan s'hauria d'utilitzar JavaScript. Es podria desactivar el bucle de joc en aquest punt. Vostè necessita una mica de JavaScript, ja que no seria una cosa que li CSS per. Fixeu-vos que és només un esdeveniment. Vostè podria dir: "Quan es canvia la mida de la meva sol · licitud, "Anem a veure si ens vam trencar." I això és tot. 

¿D'acord? He estat parlant molt. Hi ha preguntes fins ara on som? Sí [Estudiant] Hi ha un tutorial perquè qualsevol pugui obtenir més informació? Sí >>. La pregunta és, hi ha un tutorial per això? Vaig a estenc a tot. Hi ha algunes coses que vostè pot anar. Anem realment a sortir d'aquí. Déjame tornar aquí. Una cosa a destacar és propi Visual Studio té tutorials construït endins Déjame desfer-me d'això. Si et vas a crear un nou projecte, no en Arxiu, Nou projecte, i veure el costat de la mà esquerra, hi ha un node en línia en aquest selector. Va a prendre una mica. Estic en el meu MyFi aquí. Però vindrà i que em donarà l'oportunitat de trobar plantilles però també, el més important, les mostres així. Així que pot fer clic en JavaScript. Va a trobar les mostres per a mi. El meu resolució és molt més gran aquí. Normalment, hauria d'aparèixer una llista d'un munt de coses diferents aquí. Si hi ha alguna cosa que vols provar, triar l'idioma, JavaScript aquí, i dir: "Jo no sé com fer-ho geolocalització." "No sé com obrir un arxiu." "No sé com prendre avantatge de la càmera web "O optimitzar per el tacte o coses per l'estil." Hi ha mostres de tot: l'intercanvi, recerca, bars d'aplicacions, fer trucades remotes a un servei, codificació JSON. Tots els tipus de coses que hi ha mostres que aquí, i no són enormes mostres que es prendran tota la nit a separar només per trobar que una cosa que volia aprendre. Són molt bons. Són petits, dret a les classes punts de les mostres. He après un munt passant a través d'aquests mateix, i pel que recomano que molts com una cosa. 

Una altra cosa a destacar és també, per descomptat, et vaig mostrar dev.windows.com, així que si vostè va de nou a aquest, veuràs a la part inferior també hi ha les mostres aquí. Així que vostè pot descarregar a tots ells alhora, però també hi ha un munt d'altres recursos també aquí que poden ajudar a posar-se al dia. 

Una altra cosa, i realment m'agradaria recomanar que vostè intenti això, Ja ho tinc al meu blog, però em vaig a anar per feina. Et vaig a mostrar. El meu blog té els recursos i coses per l'estil. Una de les coses que assenyalar és aquí, aquesta cosa: la seva idea. La seva aplicació. 30 dies. Si fa clic en aquest, que portarà a un lloc realment útil. Això és molt més útil que es podria esperar. Això serà de 30 dies de contingut que vostè pot obtenir bàsicament consells i trucs al llarg d'aquest procés crearà una aplicació. I ja que no pot esperar, en realitat es pot aconseguir per jocs també i per a aplicacions de telèfon, coses així. Així que, bàsicament, s'inscriuen en ella, i que seran l'enviament de consells i trucs, "Has pensat en fer això? Recolza Snap?" "Aquí hi ha algunes pautes sobre com fer-ho bé." "Has pensat en sotmetre a la botiga?" "Has pensat en com va a vendre la seva aplicació?" Es va a caminar a través de totes aquestes coses diferents. I, de fet, si vostè està a la pista de joc, en algun moment vostè començarà a reconèixer a la persona parlar amb vostè perquè en realitat havia d'anar a Redmint fer aquestes i gravades 2 vídeos allà. Però tot això és part de la pista de joc, i també hi ha una pista completa per al desenvolupament general de l'aplicació. Això es diu Generació App Sens dubte, recomanaria que a vostè també, a més de les mostres. 

Hi ha una gran quantitat de vídeos a un lloc anomenat Canal 9 també. Això és probablement l'últim que vaig a recomanar, així abans de passar aquí. Channel9.msdn.com. Això és gran perquè vostè no serà la lectura a través de tones de llibres blancs. Es tracta bàsicament d'una gran quantitat de vídeos, screencasts i coses que són directe al gra. Jo no hauria de dir que és sempre directe al gra. Depèn de qui està fent el parlar. Però, en general, hi ha una mica de vídeos realment to-the-punt aquí que li mostrarà alguna cosa en particular és possible que vulgueu aprendre o veure donem. També hi ha tot el nostre contingut de la nostra conferència que va succeir fa un parell de setmanes anomenat Build, i veuràs que allà mateix. Hi ha tecnologies Core per Windows 8 jocs. Aquí el tens. Jo hi era, en realitat. No em pot veure. Jo era aquí. Però de totes maneres, a part d'això, jo recomanaria que vostè fes un cop d'ull als vídeos. Són molt útils. Si vostè està encallat en alguna cosa o el que desitja és veure el que alguna cosa es podria fer, acomiadar els de dalt. 

[Guarin] Windows Mail m'acaba d'enviar un correu electrònic amb un enllaç al contingut perquè els estudiants descàrrega amb codi d'exemple i coses per l'estil. >> [Bowen] Gran. Impressionant. Gràcies, Edwin. 

Bé. >> [Estudiant] Tinc una pregunta. >> [Bowen] Oh. Sí, si us plau. [Pregunta estudiant inaudible] >> [Bowen] Oh, m'alegra que el preguntis això. Sí La pregunta era, hi ha una interfície visual per a mi per crear coses? Edwin et recompensarà generosament per aquesta pregunta. Hi ha una manera de fer això. Cal fer-ho ara? Anem a fer-ho ara. Vaig a anar-hi ara mateix. En realitat, permetin-me afegir en una cosa més en aquesta demo, i després et vaig a mostrar la resposta real. Anava a afegir una mica més de CSS aquí. Jo estava una mica per la tangent aquí. Permetin-me dir-ho d'alguna CSS aquí per aprofitar de les classes que hem afegit fa poc, a la capçalera, a la div mainContent i, a continuació, a la greetingOutput. Si faig això i executar-lo, es pot veure que ara tenim a una altra persona amb el farciment i els marges poc, pel que tenim en realitat algunes compensacions aquí. Aquests són més cap al que vas a esperar d'una aplicació de polit final. Però només estic mostrant això a vostè perquè és cap amunt CSS. Així que les coses que vostè ja sap que vostè pot utilitzar per ajustar el contingut al seu gust. Ja has vist com fer que el fons canviï d'aquesta manera. 

Si retorn al nostre HTML, vaig a afegir en un conjunt més de marge de benefici, i això és en realitat serà un control d'WinJS. Vaig a anar i agafar això, una etiqueta. Vull estar segur que ho estic fent en el lloc correcte. Probablement prou bo. Aquí he Acabo d'afegir - i ens anem de pantalla completa perquè pugui veure tot l'assumpte - He afegit una etiqueta per a la propera div. El div es diu ratingControlDiv. Per si mateix no farà res. Si obriu aquest en un navegador, vostè estaria mirant en blanc, el mateix div. Però com que la misteriosa línia de codi que he mostrat abans, tot el procés, que va a buscar alguna cosa que s'assembla a això - control de guany de dades - i que va a trobar el que està en aquest paràmetre. Es va a fer un exemple del que sigui que està assenyalant. En aquest cas, es tracta d'un control de classificació, pel que estic dient, "Si us plau, vagi i torni a posar aquesta cosa "Amb el que vostè necessita fer per fer un control de classificació." Podria tractar-se d'un control de la moneda, que podria ser l'anell de progrés o el que sigui el control que voleu utilitzar. Tots ells treballaran essencialment de la mateixa manera. Vostè està utilitzant marcat estàndard HTML5 per indicar el que vol, i després et vas a aconseguir un control al final d'aquest. Déjame córrer això. He copiat que en, i ara que el marcat es converteix en això, que és en realitat un bon nombre d'elements HTML. Aquestes són totes les imatges individuals, i hi ha al voltant d'ells divs amb selectors. Esperem que vostè pot veure això. És una mica més subtil. Puc surar sobre els diferents conceptes, i que permetrà que vegi la classificació aquí. Puc fer clic, i que recorda la qualificació, però això és tot. No està fent res amb la qualificació. 

L'última cosa que vull mostrar en aquesta abans que ens canviem a una experiència de disseny més visual és una mica de codi que pugui utilitzar per respondre a aquests WinJS controls. Vaig a sortir d'allà, de nou fora de la pantalla completa, i canviar a JS aquí per segon. Jo puc fer això aquí. Crec que vaig a substituir tot aquest assumpte. En realitat, crec que va a substituir tot, però vaig a esbrinar junts. Vaig a posar això aquí. Sí Vaig a eliminar aquest també. Què puc afegir? Sembla que molt. No és molt. Acabo estendre aquesta línia de codi que ja vaig parlar abans, i jo dic, "Quan tot està fet, quan s'han fet tots els meus controls, "I després fer això." Així que a continuació, executeu aquesta funció anomenada completada. En aquest cas, això és una cosa que vostè pot imaginar. Aneu a buscar aquest control div. En realitat, hi ha una cosa que vull assenyalar. Aquesta línia següent en realitat està dient, "He de ratingControlDiv." "Vull parlar amb ell com si es tractés d'un veritable control, un control WinJS." Així que, bàsicament, que està demanant que a partir d'ella. Vostè està dient: "Jo vull parlar amb vostè com un control." I llavors vostè pot començar a dir coses com: "Anem a afegir un detector per a vostè "Així que quan vostè està canviat podem respondre a això." I llavors nosaltres també podem fer coses com aquesta. En realitat, aquest és el vell codi allà. Crec que em falta enganxar en una funció més, i que seria la funció real que respongui a el control de classificació que es canvia. Permetin-me que en el pop just aquí sota, en algun lloc per allà. I en aquest cas, l'únic que és nou és el fet que estem entrant en qual cosa el control de classificació ens diu i ens estem preguntant per què es diu la tentativeRating. Hi ha un munt de diferents altres coses que aquest control li pot dir, i no cal de control per control. És molt senzill. Vostè serà capaç de resoldre cap problema en absolut. Executo això, i ara quan canvi les valoracions i feu clic a la qualificació, es pot veure ara en realitat és la resposta a aquesta. És posar aquesta qualificació a la pantalla en aquesta etiqueta div altres buit a continuació el control de classificació. Aquesta és la màgia d'un munt de coses aquí també. Així com vostè està creant aplicacions per al Windows Store, hi ha un munt de controls que vostè pot utilitzar. Tots ells treballen d'aquesta manera. 

Et vaig a ensenyar la part visual de disseny per a aquestes aplicacions. La bona notícia és que vostè ja tindrà aquesta eina quan instal tot si vas a la descàrrega i obtens Visual Studio. Puc fer clic dret en aquest. No vaig a fer més gran Només diu Obrir en Blend. Blend és una altra eina que treballa braç a braç amb Visual Studio i se centra molt més en el costat del disseny de les coses, pel que realment Superfícies eines optimitzades per a la creació d'estils, la creació d'animacions, el treball amb CSS, un munt de coses en aquest tipus de vena. Aquí el que ha de ser molt interessant i bastant obvi immediatament és que estem veient l'aplicació. Esperem que encara estem. En lloc de veure el codi, que encara veiem a la part inferior, estem veient la representació real de l'aplicació. El que és més, no és només una representació de l'aplicació, que és en realitat l'aplicació en execució. I això és el que realment és bo de Blend. L'equip ha fet un munt de treball per dur HTML i JavaScript i CSS en aquesta eina. Ara vostè pot, si tens curiositat, "Què vol dir això? Què puc fer jo?" De fet, puc dissenyar a aquesta aplicació tot i que aquest tipus de coses no existeixen en el meu marcat. Recordeu que el control de qualificació? Era només una etiqueta div. Aquesta cosa, aquesta estrella, només existeix en temps d'execució. Com ho sé? Hi ha una mica de màgia per aquí. Vegeu aquests raigs? Cada vegada que vegis un llampec, que significa que va ser creat per alguna cosa en temps d'execució. Alguns JavaScript córrer i es va tornar una mica en això o creat això amb una mica de lògica. Aquestes estrelles que es veuen allí van ser creats per JavaScript mitjançant WinJS. El millor és que no m'importa, encara pot dissenyar, Encara puc entrar i canviar, puc descobrir el que està passant aquí, Puc mirar la CSS, puc seguir endavant i descobrir per què el color és la manera que sigui, Puc començar a jugar amb les coses i fent coses horribles, el que jo vull fer. En realitat, vaig a deixar les coses en pau. Però es pot veure aquí és tot el CSS i t'està mostrant aquí. Si vaig fins allà, es mostrarà tot el que ells anomenen Guanyar, de manera que les regles CSS que són els més específics i el més triat per a aquest article, que probablement ja has anat una altra vegada en les seves classes, on es pot dir que hi ha una font general que estem aplicant a tot, sinó perquè es tracta d'un h1 i tinc un color definit per H1S, que serà d'aquest color, i això és perquè és més específica que la cuerpo1. Però una cosa aquí que tots els que mostra, i és realment una cosa molt poderós a mesura que es tornen més complexos, t'estàs preguntant per què aquestes coses són com són. És en realitat li dirà, i es pot triar qualsevol d'aquests articles aquí. Aquest color no és tan dolent, de fet. Pot seleccionar-los. Esperem que vostè pot veure això. Per tot el que vostè té en la seva aplicació, veureu una cascada de tot el CSS que podria haver aplicat a això i quin és guanyar, que un realment va prendre precedència. Aquests són una mica avorrit. No hi ha molt a fer en algunes d'elles. Si me'n vaig i canvi el color, llavors vostè començarà a veure alguns en cascada allà. També podeu utilitzar HTML aquí també. Puc anar a través i modificar les propietats de l'HTML per a totes aquestes coses com jo vull. Només hi ha un munt de coses aquí. 

No vull portar un temps anant a través de tot aquí. Només sé que és aquí. Hi ha una gran quantitat de funcionalitat orientada al disseny que és només disponible per a vostè perquè pugui mantenir-visual, treballar amb l'aplicació, i no haver de fer un munt de conjectures que tindria a veure amb normalitat i fan cicles tornant des d'un navegador de nou al seu disseny, de tornada al navegador. Això és realment coses interessants per això, i mentre desenvolupa una aplicació de Windows Store, que farà un munt més productiu. 

També veurà que està seguint el marcat aquí i tu CSS com el que està treballant a través de diferents coses. És probable que sigui molt difícil per a vostè veure que, sobretot al vídeo, però això és el que està passant aquí, i l'hi recomanaria a familiaritzar-se amb això. Això li estalviarà molt de temps. Això és Blend. Si realitza canvis aquí, van automàticament a portar de tornada al llarg a Visual Studio. Són els mateixos arxius, que és el mateix tot. Ho deixo sol. Tinc un exemple millor que jo vull mostrar. Però si he fet un canvi allà i vaig guardar i vaig tornar a Visual Studio, es diria, "Hey, que acaba de canviar alguna cosa. Puc tornar a carregar per a vostè?" Sí I feu servir el mateix material allà. Aquest és el final d'aquesta mostra particular. 

Jo vull mostrar una mostra de gamma alta només per donar-li una vista d'una altra funcionalitat és possible pensar també. Aquesta és una aplicació d'exemple que es pot descarregar. Si vostè busca alguna cosa que es diu el Camp de Windows en una caixa, hi ha algunes mostres que estan en això, i un d'ells és El llibre de cuina de Contoso. Jo només puc córrer això per a vostè. Pantalla de benvinguda personalitzada. Aquesta és l'aplicació vista de quadrícula. Han obligats algunes dades personalitzats aquí. Vostè pot navegar a través d'aquest. Vostè pot anar i fer una ullada a diverses coses que ens faran fam en una tarda de divendres. No. Què va a fer-me el més fam? No. Jo només vaig a triar un. Et fiques en aquestes coses. Se li mostrarà la recepta. Vostè també podria, en lloc de fer clic en un element, es pot arribar directament a la categoria de contingut, aquesta secció de contingut. En aquest cas, es pot llegir un munt de falsos Amèrica que explicar tot sobre aquestes receptes aquí i després anar a la dreta a la recepta específica. Això també és compatible amb coses com l'intercanvi que he mostrat abans, amb les fotos. També pot buscar en aquesta aplicació també. És molt senzill de fer la cerca. Bàsicament, vostè acaba d'entrar una cadena de text des de Windows i vostè decideix com vol gestionar cerca amb això. Està a unes poques línies de codi per aconseguir això, i llavors, què es fa amb ell després d'això és totalment de vostè. 

Aquí també tenen una barra de l'aplicació on s'està utilitzant alguna altra funcionalitat. Només et diré el que és. Un recordatori va a utilitzar el que s'anomena una notificació brindis. Això és molt pràctic per deixar que l'usuari saber quan les coses han succeït, com una aplicació s'ha instal · lat o es va completar alguna cosa. També és bo per als jocs també. Si vostè té un món persistent o una taula de líders i un servei que ha de hosting que potser en un equip diferent, les notificacions es poden enviar en una màquina i fins i tot si l'usuari no està utilitzant el seu joc, jugar el joc o el funcionament de la seva aplicació, encara poden rebre notificacions sobre aquest tipus d'esdeveniments. Així que es podria dir, "El teu castell ha estat destruït o està a punt de destruir." "Torna aquí i defensar-la", o alguna cosa per l'estil. Fa clic a la notificació, aneu a la dreta de nou en el joc, i es pot jugar. Així que aquest tipus de coses poden realment ajudar a atraure la gent de nou en la seva aplicació molt efectiva. 

També hi ha suport en aquesta aplicació per utilitzar el micròfon, la càmera web, fent vídeo i fer fotos. També pot ancorar una fitxa secundària. És útil si vostè vol tenir només una fitxa que va a la dreta a determinats continguts. En aquest cas, es va a la dreta a aquesta recepta. Tot el que estic esmentant només estic mostrant perquè és el que vostè pot pensar sobre l'ús també. En la seva major part, són molt fàcil d'utilitzar. M'acaba de recomanar que aparegui que l'explorador mostra i trobar una mostra que pot mostrar com fer-ho. És bastant senzill de portar els en les seves aplicacions allà també. 

Em vaig a mostrar una cosa que és bastant fresc aquí. Jo trencaré aquesta aplicació, i vaig a tornar a Visual Studio. Aquesta aplicació s'està executant. Està funcionant des Visual Studio. Puc fer algunes coses bastant bé amb això. De fet, tinc una opció per seleccionar un element, i puc anar d'aquí a l'aplicació en viu i el que puc dir, "Em pregunto per què és Temps de preparació una mica gris més clar que el títol en si mateix?" Puc fer clic. Es va a sincronitzar aquest nou en Visual Studio, i que em va a mostrar exactament el contingut generat pel que va donar lloc al fet que una part de la interfície d'usuari. Així que en aquest cas, és element h4-subtítols i doble construcció, i que, probablement, ens diu el que necessitem saber, perquè com h4 dins d'aquest context, que va a obtenir un determinat tipus de font. Però si encara no sé per què, puc fer clic a Rastrejar estils. Llavors puc expandir el color i puc esbrinar exactament per què aquest color no és el color de la carrosseria però en realitat és una altra cosa. Això és essencialment les eines dev des d'Internet Explorer fins a cert punt posat en Visual Studio. Si vostè ha treballat amb les eines de Chrome Dev, Firebug, coses així, aquest tipus d'eines que es troben en el navegador, aquest tipus de funcionalitat s'ha portat a la dreta en Visual Studio pel que en realitat no ha de llançar un navegador i treballar amb aquestes eines per separat. Ara tinc una aplicació de Windows Store només córrer, i puc començar a tirar el diferencia i descobrir per què les coses estan fent el que són. 

També puc fer-ho d'aquesta manera també. Puc anar i només has de triar alguna cosa bé a partir del marcatge i esbrinar de què es tracta en la pròpia aplicació. Crec que he passat per tot. Sóc aquí surant sobre això. Puc seleccionar-lo. Es em va a mostrar en l'aplicació en execució real on aquesta cosa és que estic ara fent clic en el marcat. Coses realment interessants. Com vostè està tractant d'esbrinar el que està passant i el que està fent HTML, el CSS està fent, tingui això en compte. Recordeu que això està aquí per a vostè i també que Blend pot treballar amb una aplicació en execució en viu. 

L'última cosa que volia mostrar amb aquesta aplicació - Per cert, es nota que els deltes com les coses canvien massa, perquè pugui veure per aquests reflexos grocs. Aquestes són les coses que han canviat només en l'aplicació. Però una última cosa. Vull tornar a Barregi només per un segon aquí. Obrirem això, Obrir en Blend, mateixa aplicació, tot igual. Només vull que li mostri l'experiència aquí no és només vostè està encallat a la pàgina principal mirant les coses que vostè aconseguirà per defecte quan s'executa l'aplicació i deixar reposar allà. També pot activar aquesta força petita icona aquí. Es diu manera Interactiu. Fa clic a això. Es va a obrir l'aplicació. No està en la manera de disseny més, així que vostè no serà fer clic a les coses per canviar la funcionalitat, però en realitat es pot treballar amb l'aplicació ara. Podeu fer clic a través de, vostè pot fer el que sigui, arribar a una recepta que vostè es preocupa per oa una categoria. Anem a anar a aquesta categoria. Jo li dic: "Bé, aquí és on vull dissenyar". Després fer clic en aquest botó, que el portarà de tornada a la superfície de disseny, i ara vostè pot fer totes aquestes coses que els que parlava abans. Vaig a seguir fent clic fins que arribo aquest seleccionat, esbrinar les seves dimensions, esbrinar el codi HTML per a ell, el CSS perquè per a una aplicació en execució, una part posterior de l'aplicació. Molt, molt útil. Et vaig a mostrar això a vostè. Si us plau, tingui en compte si vostè està buscant en l'escriptura de codi amb aquest perquè va a estalviar un munt de problemes, i és bastant bo. Això és gairebé tot el que volia mostrar a Blend i en Visual Studio per a tot això. 

Teniu alguna pregunta respecte qualsevol d'aquestes eines? Qualsevol cosa? >> [Guarin] Tinc coses per donar a conèixer, de manera que les bones preguntes, coses bones. 

[Bowen riu] Ja t'he mostrat meus donem aquí. Vaig a posar-ho en la pàgina dels Recursos i giri a preguntes ara. Aquesta primera referència és que la Generació App lloc amb la pista de joc i la pista d'aplicació. Registra't en aquells. No ha d'esperar els 30 dies per obtenir el contingut. Vostè pot començar a anar i mirar el contingut al seu gust. Entenc els seus marcs de temps poden ser diferents de - [rialles] Per això, quan és el hackathon? Això és un parell de setmanes, no? Així que vostè no té els 30 dies per esperar. Així que sí, es pot inscriure en això i llavors simplement començar a retirar el contingut d'ella. També el Dev i els Centres de Disseny. I no he esmentat això, però també hi ha la botiga Docs. Això seria per després de la hackathon que vostè està preparat per començar a enviar les seves aplicacions per a la botiga. Hi ha algunes pautes útils aquí, alguna orientació sobre com fer les coses a la botiga, alguns problemes comuns que puguis ensopegar i caure, i aquest és el final d'aquests recursos. 

Llavors, què tens en ment? Qualsevol altra cosa que vostè - [Guarin] Qui està pensant en fer una aplicació de Windows per CS50? Genial. [Bowen] fresc. Gran. 

Una pregunta sobre les coses que has vist fins ara i com es relaciona amb això? Per exemple, amb més temps podria prendre un joc que he escrit i que s'executa en el navegador i només una mica d'anar a través del procés de posar això en Visual Studio i el que és una aplicació de Windows Store. Es triga més temps del que realment calia incloure avui dia, però la versió curta és que és el mateix codi que s'estiguin executant en el navegador, i les coses que vostè canvia són les coses que vostè decideixi per connectar a Windows 8. Així que si vol utilitzar encants, si vol buscar o compartir, que necessita per crear una barra de l'aplicació per amagar algunes funcions que, aquests són els tipus de coses que canviaria. Però el nucli de la teva aplicació web pot romandre intacte. Un cop més, sempre que es treballa en IE10, que serà un port molt fàcil per portar aquestes coses en Visual Studio, en Blend, i convertir-la en una aplicació de Windows Store. Un cop més, les úniques coses que vostè haurà d'aprendre són les altres característiques que es pot utilitzar per il · luminar una aplicació, com una rajola en viu i aquest tipus de coses. 

Sí >> [Estudiant] La meva pregunta és sobre el treball mòbil. Així que si vostè fa una aplicació que funciona com una aplicació d'escriptori, ¿És realment fàcil de transferir a mòbil, o hi ha una - La pregunta és, si faig una aplicació de Windows Store que realment està optimitzat per a aquest entorn i vull portar-lo a un món mòbil, el que està involucrat en fer això? Això, igual que moltes preguntes, és sempre una resposta constant canvi. La bona notícia és que si vostè s'està enganxant amb HTML i JavaScript, CSS, si estàs començant des d'una aplicació de Windows Store, que permetrà que vostè ho porta a la web i després utilitzar aquest tipus de tècniques, com les consultes i les coses dels mitjans, per adaptar-se a diferents dispositius de mida. Dit això, sempre hi ha marcs i coses per aquí que el suport que s'estén a terme diferents tecnologies, les diferents plataformes. Això canvia tot el temps. També estem canviant les coses tan bé com nosaltres mirem cap al que tenim ara realitat amb Windows Phone 8. Tenim algunes infraestructures bàsiques compartides ofert entre les aplicacions per a aquests entorns. Així que les coses que vostè està fent per crear una aplicació de Windows Store, molt d'això es pot traslladar a una aplicació de Windows Phone 8 també. Això és una altra vegada una història emergent, de manera que hi ha una mica de contingut d'això en Generar. El SDK acaba de sortir fa una estona. S'acaba de publicar fa una estona. Però en termes d'altres plataformes també, vostè probablement es troba amb molts marcs de plataforma creuada també. La bona notícia és que les coses que vostè està fent aquí, la funcionalitat principal és cap amunt coses estàndard web. Les úniques coses que no es traduirien fàcilment són les coses que Windows 8 fa, però això no és una sorpresa ja que és una característica de Windows. No trobaràs compartint o tipus similars de contractes en qualsevol altra plataforma. Així que aquestes són les coses que vostè desitjaria des d'una perspectiva de disseny segur de tindre formes de tipus de resum que fos així que vostè pot dir, "Si estic corrent en això, jo puc fer això." Si no estic, hi ha alguns patrons de disseny que pot utilitzar per ocultar tipus d'aquestes coses de distància. Però cal tenir això en ment. Sí Ho sento. Endavant. 

[Estudiant] Si vull provar el meu aplicació de Windows a la part superior de [inaudible] [Bowen] Sí Em vaig saltar una cosa més també. Sí Vaig a respondre a la seva pregunta en primer lloc, a continuació, et vaig a mostrar una característica que em vaig oblidar d'esmentar. Tenim algunes màquines disponibles localment. Ho sento. La pregunta era, com puc provar les coses en els dispositius si no passa que té un munt de coses per triar? [Guarin] Li prestem nois, crec, 5 o 6. Quants necessita? [Estudiant] Tenim 4 d'ells. >> Okay. Tenen 4 pissarres per jugar. Així que sens dubte que tots ho sàpiguen, si us plau. [Rialles] >> [Bowen] Impressionant. Aquesta és una resposta encara millor del que em donaria. Tenim horari d'oficina per als desenvolupadors que fem a la nostra oficina i ara pròximament a la botiga de Microsoft sobre el Pru, però Edwin ja ha pres la cura de vostè. Hi ha 4 pissarres disponibles per a préstec, per a la prova. Això és. Hi ha un exemple d'un allà. Així que sí, absolutament. Gran. Absolutament, amb molt, la millor manera de provar que és estar en un dispositiu. Si no passa que té un encara o no volen caminar pel campus a la neu prendre un o el que sigui, hi ha una manera de fer això de nou en Visual Studio. Si torno a anar a on jo era aquí, aquí en comptes d'usar la màquina local, vostè pot connectar-se a la màquina remota, però això no és el que estic parlant aquí. Simulador és el que vostè pot desitjar mirar. Vaig a córrer això, i realment el que és, és essencialment una finestra al seu propi sistema. Aquí és en realitat el meu sistema en funcionament, corrent Contoso, però d'una manera que em permet canviar alguns dels paràmetres d'execució, els paràmetres ambientals. Així que puc dir aquí, "Saps què?" Oh. Ja he funcionant en una simulació de monitor de 27 polzades en 2560 resolució. Puc caure fàcilment que cap avall i veure el que la meva aplicació faria amb una pantalla més petita o canviar la configuració PPP o el que sigui. Així que en una petita pantalla, un 10,6, què farà? Això encara es veu molt bé, oi? Vostè voldrà fer això, especialment si vas a enviar a la botiga, perquè fem com a part del procés de proves. I si hi ha problemes com aquests, llavors vostè podria trobar-se amb un problema d'obtenir la certificació per a la botiga. Però això és part del simulador. Realment bo. Molt fàcil de fer això. També pot utilitzar funcions com girar també. Puc fer clic al botó, feu que la gira, veure què algú hauria com una experiència girant la seva pissarra, el seu tablet, i l'ús de l'aplicació amb això. Hi ha algunes altres coses també, com l'emulació de contacte i algunes altres coses, AJUST GPS. Puc fingir que estic en un lloc diferent i veure el que la meva aplicació quan fingeixo que estic de tornada a Seattle o alguna cosa així. Però és una característica molt útil, i està integrat en Visual Studio i en Blend. Sí La teva pregunta. 

[Estudiant] Si estàs escrivint un joc, no Visual Studio cap suport per a l'animació? Sí La pregunta és d'al voltant d'ajuda de l'animació, sobretot amb els jocs. Depèn. [Rialles] Amb JavaScript vaig a dir que probablement hi ha menys suport que hi ha al costat XAML, que compta amb línies de temps, compta amb storyboards i coses que es construeixen polz Per animacions en aplicacions de JavaScript, no sé quina part de la resposta que vull donar. Tinc els recursos al meu blog que passen per un munt d'opcions per a tots dos animacions físiques, opcions per a jocs orientats Javascript al Windows 8. Em remeto a aquells. Bàsicament, hi ha tantes opcions. La raó per la qual estic dubtant és que hi ha tantes opcions per fer animacions amb JavaScript. Podria ser CSS, podria basar-Lona, podria ser simplement animacions bàsiques de DOM, que podria ser un munt de coses diferents, així que realment depèn de la seva elecció. Si vostè decideix utilitzar alguna cosa com Create.js o calç o altres tipus de marcs - Bé, ni tan sols estic segur que seràs capaç d'utilitzar un marc de gamma alta agradaria Impacte o Construir. Això tendeix a generar més codi que vostè podria considerar a partir de zero. Però en aquests casos, encara es podia utilitzar un simulador, pot utilitzar els entorns, i tendeixo a utilitzar aquest entorn per la meva plataforma de proves en els casos com que estic desenvolupant jocs. He estat bé, especialment amb les animacions de lona, que és probablement la cosa més comú. El millor que trobaràs és probablement les eines dev al navegador i les eines dev en Visual Studio. Una mena de resposta meandres allà, però espero que em van donar la resposta. Sí Vostè. 

[Estudiant] Quines són opcions d'emmagatzematge de dades per a aplicacions de Windows 8? Quines són les opcions d'emmagatzematge de dades per a aplicacions de Windows 8, Windows Store apps? Les seves opcions són en realitat cada aplicació té el seu propi estany d'emmagatzematge local per la configuració i les dades, però també és ridículament fàcil d'utilitzar la itinerància d'emmagatzematge, per utilitzar l'emmagatzematge basat en el núvol. És gratuït. El que passa és que, bàsicament, triar una classe diferent i vostè diu, "Configuració de Roaming, Desa, aquest conjunt particular de contingut" i el seu compte de Microsoft, el que han signat amb el nom, serà la clau de la itinerància que la informació al voltant. Així que si ús el joc en el meu ordinador portàtil i després obro una sessió amb el mateix compte com jo jugar el joc en una superfície o una tauleta, que va a vagar automàticament aquesta configuració i dades entre les màquines. Això és una cosa predeterminat. Això és bo per a determinades quantitats de dades. No posaria una enorme base de dades en aquells. Perquè vostè necessita per anar a un altre tipus de solucions, com una base de dades allotjada en el núvol, coses així. Hi ha algunes altres opcions a la comunitat al voltant d'altres tipus de tecnologies de dades. He vist algunes de les opcions de SQLite a la comunitat al voltant d'allà també. Així que cada vegada més estan sorgint, però aquestes són les coses principals que vostè vol mirar cap per a un joc o una aplicació. I hi havia una pregunta en la part posterior també. 

[Estudiant] Quant a la xarxa de [inaudible] pujar o descarregar arxius [inaudible] [Bowen] És la teva pregunta com es pot veure que, o com es pot depurar i provar que ell? [Estudiant] Com pots depurar [inaudible] Ho sento. No puc sentir tot. [Estudiant] Com ho aconsegueix provat error i també [inaudible] Gran. Gran. Com es treballa amb les xarxes? Com es pot veure el que està passant? Hi ha moltes respostes diferents a aquesta, però deixam que et ensenyi probablement les coses més fàcils aquí. Déjame desfer del simulador per un segon. Opcions de depuració Només un parell de xarxes. Hi ha una pila de xarxa completa al forn a la dreta en tant el nivell WinRT i des WinJS, pel que vostè pot fer molt fàcilment XHR, tipus AJAX trucades del seu joc o aplicació per fer això. En primer lloc, jo tendeixo a utilitzar 2 coses. Jo ús dels propis eines dev reials, que tenen una pila de xarxa al forn a aquests. Et vaig a ensenyar la pàgina d'inici de Windows. Jo puc parlar d'això, i no hi ha realment un proxy de xarxa al forn a aquestes eines aquí. Així que jo puc fer això, puc actualitzar la pàgina, i que va a mostrar totes les interaccions, incloent trucades AJAX per a aquesta sessió, la durada d'aquesta sol · licitud. Això és útil. Serà molt útil per a aplicacions basades en navegador. Per a altres tipus d'aplicacions, com Windows per emmagatzemar aplicacions, Jo faig servir una eina anomenada Fiddler. Aconseguiràs un joc en resposta. [Rialles] Fiddler és un proxy simple. Crec que puc demostrar que a vostè. És només GetFiddler.com, que, curiosament, estic traçant la meva pila de xarxa va a GetFiddler. Però de totes maneres, El violinista ha estat escrit per un dels PMS en l'equip de l'IE, així que ell sap el que està fent. Això és un bon indicador que es pot utilitzar per al trànsit de la xarxa de depuració. Jo recomanaria que. Pregunta per aquí també. 

[Estudiant] Hi ha una manera fàcil d'integrar a l'entrada de llengües estrangeres, com el japonès o el xinès, en aplicacions de Windows? No puc dir que he fet massa de mi mateix, sinó que és al forn polz Hi ha opcions per, per descomptat, que emet la seva aplicació - Ho sento, jo no he dit la pregunta - opcions al voltant de la globalització, la localització dels continguts, incloent coses com la capacitat de vendre en diferents mercats i apuntar que la versió de la seva aplicació per a les llengües individuals o cultures o coses per l'estil. Absolutament construït endins Hem tingut el suport perquè per sempre, i que porta endavant en les seves opcions per a la Windows Store. Vostè pot fer això en la pròpia botiga, vendre en diferents mercats, que pot fer que, en la sol · licitud, així també amb l'ús dels recursos per definir, "Si em vaig desenvolupar per aquesta cultura, a continuació, utilitzar aquests reemplaçaments per al contingut textual "O utilitzar un dret de lector de l'esquerra." Aquests són tots part dels WinJS predeterminats i APIs WinRT. Bona pregunta. 

Com ho estem fent? Algun altre? I si algú al vídeo té preguntes, estic cbowen @ microsoft, així que estic feliç de prendre qualsevol de les seves preguntes des del futur. Molt - Des del futur, [fet imita] futures. Així que aquí sóc jo. Permetin-me tornar vaig posar el meu contacte aquí. Així que m'acaba d'enviar una nota, cbowen @ microsoft, i jo posarem en contacte amb vostè tan aviat com pugui. 

Qualsevol altra cosa que vostè s'està preguntant? Estem bé? Gran. Està bé. Gràcies a tots molt. T'ho agraeixo. [Aplaudiments] 

[CS50.TV]