[Powered by Google Translate] [Seminar - Windows 8 - App / igra razvoj sa HTML5] [Chris Bowen, Edwin Guarin - Sveučilište Harvard] [To je CS50. - CS50.TV] 

Hej, svatko. Moje ime je Edwin Guarin. To je Chris Bowen. Reći ću mu se uvesti u sekundi. Ja samo želim da brzo najavu. Prije svega, sve što CS50 studenti dobili Windows 8 besplatno. Dakle, ako ste razmišljati o zapravo koristeći ga za svoj završni rad, to je tvoje. Nate će poslati e-mail kasnije za upute. Druga stvar je, ako se odlučite za pisanje Windows 8 aplikaciju za vaš CS50 konačnog projekta, idemo raditi neke poklone: ​​Xbox, mogli bismo biti u mogućnosti dati listu daleko, takve stvari. Dakle, ako postoji nešto što vas drži leđa, neka Chris i ja znam kako mi može pomoći izgraditi nešto stvarno cool. Dakle, još jednom hvala što ste došli danas, a ja ću ga predati Chris. 

Hvala vam, Edwin. Hvala svima, za ulazak u nas danas. Ja sam Chris Bowen. Ja sam jedan od Edwin kolega ovdje na sjeveroistoku. Samo sam htio provesti malo vremena s pričaš kako napraviti Windows Store aplikacija s HTML5, JavaScript, CSS i nekako se bilo kakva pitanja vam svibanj imati o tome odgovorio za vas kao da ste u potrazi prema razmišljati o možda i koristeći ga za CS50 finale priliku. 

To je rekao, mi ćemo samo roniti pravo rezervirati Ja ću prijeći na slajdovima ovamo. Ako imate bilo kakvih pitanja, slobodno mi pošaljite e-mail. Ja sam cbowen@microsoft.com, a tu je moj blog i moj Twitter. No želite stupiti u kontakt sa mnom, to je u redu. Imam oko sat vremena od stvari, a ja želim doći na vaša pitanja na tom putu, pa nemojte se sramiti o ima pitanja tijekom ove. Oni ne mogu vidjeti tko pita pitanja na snimanje, tako da ćete biti anonimni kao što želite da bude. 

Dopustite mi roniti u pravu, samo vam dati brzi uvod u Windows 8, i pokazati vam neke od stvari o sustavu Windows Store aplikacije koje biste mogli uzeti u obzir što misliš o razvoju aplikacija. Gledamo Windows 8. Mi smo bili za par tjedana. Mnogo jake usvajanje vani već. Možda ste već vidjeli na površini strojevi koje imamo kao dobro. Ima jedan ovdje zapravo možete pogledati ako ste ovdje u osobi. Stvarno želim razgovarati s vama, da vam pokazati okolo malo o Windows 8. Ideja s Windowsima 8, to stvarno ne iznijeti sve stvari koje znamo o Windowsima u nekim novim iskustvima - naročito, stvari kao što su na površinu stroj s dodirom, Ovakvi više mobilnih uređaja koji su sada na tržištu, ali to je i Windows u svojoj srži. Dakle, to znači da možete ga instalirati stvarno na bilo koji pokreće Windows 7, od svog najvećeg trostruki SLI gaming rig dolje na svoj laptop i svojim sjajnim novim ostalim uređajima koje ste mogli pokupiti danas. Oni će se izvoditi Windows 8. Ja ću vam pokazati okolo samo malo, i sva iskustva koja ćete vidjeti ovdje su stvari koje možete napraviti. Ideja je da li je to dodir, miš, tipkovnica, bez obzira na uređaj koji radite svoj zahtjev, on će se pokrenuti velika. Windows 8 će vam pomoći sa svim tim scenarijima. 

Ovi slajdovi na stranu, neka je samo dobiti pravo na uzimanje pogledati ovdje. Dopustite mi da vam pokazati oko moje početnom zaslonu. Ovo je moj početni zaslon. Samo ću vam dati malo turneju ovdje. Ja sam na ne-touch stroju, pa koliko god sam htio dirati moj laptop zaslon, to ne može učiniti ništa, pa ću samo dođite ovdje malo i pokazati vam. Neke stvari možda se čine Činjenica da se to što se zove live pločice zapravo može animirati, i oni mogu dati podatke za vas - možda ažuriranja na statistike za igru ili vam pokazati vijesti iz nekih ranijih aplikacije koje su ovdje, na lijevoj strani. Tu smo. Siguran sam da je to samo pozitivno i fantastično sjajna vijest. Možete vidjeti ovdje to stvarno zove svoju pozornost natrag na app, govoreći, "Hej, ima nešto novo ovdje. Bacite pogled. Vratite se i pogledajte što je novo za tebe." To se zove live pločice, a vi možete učiniti obavijesti bilo desno od same aplikacije ili ako pogledate detaljnije, znat ćete kako napisati daljinski uslugu koji zapravo može gurnuti informacije na pločici, što je ono što se događa s tim vijestima aplikacije. Oni su zapravo dobivamo vijesti iz oblaka i ažuriranje pločicu tamo tako da ljudi znaju da postoji razlog da se otvori program i pogledati na što god najnovije vijesti u bilo kojem od tih ili ako postoji nove recepte ili novi visoku ocjenu pobijediti ili prijatelj svira ili što već na ovim aplikacijama. To je nešto za vas zavesti natrag u. Dakle, to je živa pločice, a to bi mogao biti osoba, to bi mogao biti web kao dobro. Obično je prijava. 

Više-manje sve ove stvari koje sam ovdje došao iz Windows Store. Ja ću pokrenuti to. To je jedan od programa koji ste dobili po defaultu na stroj koji je s operacijskim sustavom Windows 8. Možete doći ovdje pronaći nešto što biste željeli, od stvari koje su istaknute na igre koje nisam vidio prije. Oh, wow, imamo novu fliper ovdje. Možete instalirati te ovdje iz trgovine, pa ćemo razgovarati o tome kako razvijati to. Imate puno izbora u tome što ih stvaraju. Mi ćemo se usredotočiti na temelju priča JavaScript u HTML i CSS, ali za korisnika, kupcu app, nije važno što je bilo napisano u. Oni mogu ići naprijed i raditi s njim. Ja sam zaintrigiran ovom jednom, tako da moram ovo otvoriti i pogledati. Svaki app, uključujući i one koje mogu podnijeti i prodati ili dati besplatno, sve što želite učiniti u trgovini, će dobiti početnu stranicu kao što je ovaj. Možete poslati uz Vaš zahtjev hrpa zaslon metak - vidite neke ovdje - Detalji o primjeni, a tijekom vremena ćete akumulirati obje ocjene - oni su zapravo samo zvjezdice - i ocjene, koji daju malo više uvida. Zapravo, netko mora nešto tipa i reći vam kako strašan si, i da će otići u svoj odjeljku Recenzije ovamo, koje nisam pogledao. Fantastic. "Neće ni otvoriti." Kako super. Pa, za narod kojemu je ovo učinio otvorenim i trčanje, oni činiti se to stvarno uživati. [Smijeh] Imajte to na umu. Internet. Svatko može reći što hoće o svom zahtjevu. Zato pazite što radite veliki posao s njim, bi bili sigurni da ste čineći ga kao udoban za korisnika, kao što možete jer oni su par klikova daleko od pružanja recenziju, i da će se akumulirati na svoju ukupnu reviziju rejtinga. I što želite učiniti vaš najbolji jer ćete da se protiv drugih aplikacija. Tu će biti tisuće aplikacija već u trgovini, a šanse su, možda postoji nešto što se slične funkcionalnosti na ono što radite. Dakle, ako ste stvarno može stajati iz mnoštva, koje će biti u svoju korist, naravno. 

Mi ćemo doći u dućan malo kasnije. Stvarno želim se usredotočiti na stvaranje aplikacije. No, kratka verzija namirnicama je svjetsku distribuciju, to je automatski dio Windows 8, ljudi jednostavno ga vatra se i pogledati razne aplikacije ovdje, imate Pucnjava naljepnica knjige i sve vrste različitih aplikacija. Svježe boje, koristim to puno - slabo, ali koristim ga puno. To mi pokazuje već sam ga posjedujete. Dopustite mi da vam pokazati nešto nemam - UVideos nemam kao potpuno novi. Vi vidite ovdje je to besplatno, tako da možete ga instalirati izravno iz trgovine. Imate izbor previše. Vi, naravno, možete ga dati. Možete staviti oglašavanje u app ili igru. Također možete naplatiti za to, a ti bi vrlo lako osigurati suđenje za primjenu, kao i tako da se neka ljudi probati za tjedan ili što god želite učiniti. To je samo prilagodljiv preko portala. Vi ne napisati bilo kod za to. Tako ćete reći: "Ovo se može koristiti za tjedan dana i onda moraš kupiti" ili ste mogli napraviti stvari kao što su, "da bi mogao igrati prve tri razine ove igre "I onda moraš kupiti za pristup ostalim." Možete čak i mogao učiniti kupnji u aplikaciji, kao i, tako da se može reći, "Imamo dodatne avanture ili kompleta grafike ili stvari koje su otključana - "Više recepata koje su otključane -. Ako kupite ove proširene skupove" I to je moguće učiniti sve u aplikaciji ili same igre. Dakle, potpuno ovisi o vama, vaš izbor. Postoji mnogo stvari koje možete učiniti u trgovini, a onda zapravo ste ga preda u certifikacijskom kanalu. Možemo razgovarati o tom malo kasnije, ali to je cilj. Vi želite da se vaše app svjetska vidljivost u trgovini ovdje. 

Natrag na početni zaslon ovdje, želio bih vam pokazati okolo malo više. Ako sam pokrenuti ove aplikacije, dopustite mi da vam dati primjer nekog cross-app funkcionalnosti ovdje. Da biste to postigli, ja ću pokrenuti svježe boje. Jedna stvar koju ćete vidjeti ovdje je svaki zalogaj od zaslona, sve piksela na zaslonu, idite na svoj app. Otišli su dani u kojima imate ove granice oko prozora s puno tipki koje su uvijek tu zauzima prostor cijelo vrijeme. Sada zaista žele pobjeći od toga i samo vaš sadržaj bude fokus. Mi možemo raditi stvari s Windowsima pristupanjem druge vrste izbornika. Jedan od njih je zapravo ono što se zove čari bar, i to dolazi iz strani ekrana. Vi zapravo može čitati sa strane, ako imate zaslon osjetljiv na dodir, mogli desni klik, ako imate miš, tu je tipkovnica prečac za to, uvijek postoji više od jednog načina da učinite nešto u okruženju ovdje. To donosi niz stvari koje možete učiniti. Najočitiji je možete vratiti na početni zaslon, ali druga 4 su ono što se zove čari. Oni su ugovori koje možete uključiti u kao programer aplikacije. Oni su prilično cool. Traži, siguran sam da je to nešto što će učiniti, dijeljenje ću vam pokazati u sekundi, i uređaji i postavke, to su sve stvari koje vaš app može uključiti u utjecati na Windows, reći: "Ja sam učinio moj dio "I ja želim Windows podržati neke druge funkcije, "A ja ne želim napisati puno koda da bi se to dogodilo." To je stvarno prednost korištenja ove značajke. Pokazat ću vam jedan. Da biste to postigli, ja ću napraviti novu sliku. Također sam govorio o korištenju svaki piksel za svoju aplikaciju. Po defaultu, to je ono što boja app izgleda kao kad ste ga koristite. To je zapravo samo o tome što god crtanje, vaš sadržaj. Mogao sam učiniti strašne stvari ovdje. Što trebam nacrtati? Ne znam. Scribbles? Oh, sjajno. Ja mogu učiniti crtarije. Fantastic. Purica? [Smijeh] To je najapstraktnija turska vidjet ćete. Ja se također može dovesti do onoga što se zove app bar, i to je stvarno jedan od ključnih načina na koje možete koristiti sakriti sve stvari koje su mogle biti na vašem app ili igru ​​prije samo uzimaju prostor cijelo vrijeme. Dakle, sada možete staviti ga ovdje, a to je stvarno jedan od ljepših iskustava s App bar koje sam vidio. Stavite na izbore ovdje za odabir različitih boja. Željeli smo puricu, pa ćemo staviti neke smeđe ovdje, početi miješanje u nekoliko boja. Uzet ćemo srednji boje ovdje i onda se vratiti ovdje. Možete početi izvlačenje. Tu ti je purica. Fantastic. Ja ne mogu izvući za početak, ali to učiniti s touchpad pred publikom je čak i bolje. Ovo je super. Ideja je, međutim, sve što mi je stalo je upravo ovdje na površini. Recimo ja sam tako zadovoljna s tim da moram to podijeliti s nekim. Obično ono što će učiniti s ostalim verzijama Windowsa, što bi možda uzeti zaslon metak, ti ​​bi napraviti neki copy-paste vašeg teksta ili slične stvari koje biste željeli podijeliti out, , a zatim otići i otvoriti drugu aplikaciju i staviti ga u nju. Ovdje ne morate to učiniti. Možete zapravo izvedeš čari bar i reći, "Želim to podijeliti." U ovom trenutku to će vam pokazati sve aplikacije koji znaju kako raditi s onim što se dijeli. U ovom slučaju to je slika, pa će reći: "Vidim da ste dobili sliku." "Želite li podijeliti to?" Možete vidjeti sam e-mail sebe stvari cijelo vrijeme. Ona priznaje da je, i to me nudi da kao prečac, , ali to je također mi pokazuje svaki app koji zna kako se nositi s fotografiranja i radi nešto s njim. To su sve ukazuje na Windowsima da oni to mogu. U ovom trenutku to je Windows. Korisnik jednostavno odabere ono što želite učiniti s njom. Ja ću napraviti moj uobičajeni od PuzzleTouch. Možete vidjeti da sam stvorio sve vrste zagonetki tijekom vremena. Uzet ću PuzzleTouch i reći: "Želim podijeliti ovu nevjerojatnu stvaranje s PuzzleTouch." To će ići naprijed i reći, "Great. Želite to podijeliti? Fantastično." "Želite li napraviti puzzle koji je jednostavan, srednje, što god?" Ja ću napraviti srednji jednu ovdje. To čini slagalicu. To će biti strašna zagonetka, jer to je uglavnom prazna. No, to je spreman, a to je zapravo povratak u drugu aplikaciju. Ako sam došao ovdje, mogu ga potražiti i pokrenuti ga. Sada, ako smo pomicali tijekom samo malo ovdje, trebali bismo vidjeti moj stvaranje negdje. Gdje sam? Kakve slagalice sam napraviti? Jesam li to lako? Oh, evo ga, upravo tamo. [Nasmijao] To je lako prepoznatljiv turska zagonetka koja je ovdje. Ali stvar koju želim naglasiti da vas, super stvar ovdje Je aplikacije nisu znali ništa o jedni druge. Oni samo je rekao: "Imam sliku za razmjenu, a ja znam kako se nositi sa slikama." A ti kao developer, ne morate pisati taj kod. Kad me netko pita za dijeljenje, idem staviti neke podatke u ovom malom strukture podataka i ja sam gotov. Drugi app preuzima, radi svoj stvar, a to je kraj iskustvo dijeljenja. To je samo jedna stvar koju možete napraviti - jako, jako moćan - i to će biti jedna od onih stvari koje se zaista može pomoći razlikovati svoju aplikaciju i tvoja igra previše u dućan. Ljudi će biti u stanju reći: "Ovo je jako korisno." "Koristim ovu puzzle kreator svih vremena. To je fantastično." 

To je otprilike dovoljno kratak pregled onoga što se ovdje događa. Postoji nekoliko drugih značajki previše da bi možda ćemo istaknuti kako ćemo ići kroz koda. Ali ja želim da se upustim u slajdovima, a za to, ja ću ići na radnu površinu, koji je sam po sebi još jedna live pločica ovdje. Ja mogu ići u to i, naravno, kad sam već na toboganima, , ali dopustite mi da vam pokazati gdje smo zapravo. Mi smo zapravo u desktop modu. To je stvarno, gdje ono što sam govorio prije o Windows nošenje naprijed novim iskustvima i sama pokazuje. To je Windows znate. Windows aplikacije zovu desktop aplikacije. Oni vode ovdje. Ako imate postojeće aplikacije i želite ih izvoditi na Windows 8, se apsolutno može učiniti. To nisu iste stvari kao u dućan aplikacija, koje su ovdje, kao svježe boje i tih NBC News aplikacije i stvari kao što je to. Oni će doći iz trgovine. Oni se uključi u neke od značajki koje sam vam pokazuju a drugi da ti nisam prikazani samo još. No, samo imajte to na umu. Imamo podršku za obje ove stvari kao dobro. Žao mi je. Je li nešto što se ne prikazuju na zaslonu? Ja sam ga potpuno izgubio. To je čudno. Ok. Hvala što pokazuje da se. Ono što nije vidio neko vrijeme je moj vam pokazuje da je desktop je ovdje. Što je posljednja stvar koju ste vidjeli? Jeste li vidjeli ovo? To je desktop. Vi već znate kako to izgleda. Nije to ništa strašno neobično. To je naš nosi taj doživljaj naprijed za vas i tako omogućiti da koristite ono što ste imali. Na primjer, ja ću se prikazuje vam Visual Studio. To je desktop aplikacija. To će se izvoditi u ovom modu. Bit će to podržati složeniji okoliš s puno mogućnosti i stvari kao što je to, tako da je to dobar izbor kao desktop app čini. 

To je rekao, idemo na slajdove za samo malo i vam dati neki uvodni sadržaj, a zatim ući u zapravo kodiranja ovdje. Dobra vijest je da sam čuo da ste bili s naglaskom na puno CSS i JavaScript, HTML. Sve one stvari koje ste bili nositi učenje izravno u izradi Windows Store aplikacije. Stvari koje ste slušali o tome s primjenom CSS selektora i sve one stvari je upravo ono što vam je činiti kako bi stvorili aplikaciju ovdje za dućan. Ići ćemo kroz ove stvari malo po malo. Uglavnom, ja gradim na stvari koje ste već uzeti vremena kako bi naučili. To je ukupni chart od tehnologija koje možete koristiti napraviti aplikacije za Windows 8. Stvari na desnoj strani, desktop aplikacije, stvarno ono što već znamo. To je stvar koja je stvarno Windows 7 svijet prenesena u Windows 8. Sve one mogućnosti nositi naprijed: C #, VB, Win32 vrsta razvoja. Velika. Nema problema. Nova stvar je na lijevoj strani. To je Windows Store aplikacije, to je kad želim dobiti moj zahtjev poslati svoj Windows 8 koristeći sve one osobine, dobiti ga u trgovini, i dobiti taj stvarno super iskustvo od Windows Store aplikacijama. Da biste to postigli, možete vidjeti ovdje imaš sve svoje izbore sa XAML, C + +, C #, VB, što bi mogao učiniti DirectX, takve stvari, stvari koje nadilaze slajd. No, za nas, mi ćemo se usredotočiti pravu na činjenicu da je HTML, CSS i JavaScript su stvarno prvoklasni građanin za izradu aplikacija za Windows 8 i za Windows Store. Dakle, ovo je dobro za sve ovdje i ljudi gledaju na videu jer možete jednostavno iskoristiti sva ona iskustva koja imate i stvarno vezati u ono što Windows nudi. Ti ćeš to učiniti kroz skup API-ja, što bi trebalo biti iznenađenje. Svaki OS ima svoje API-ja. Mi izložiti ono što Windows može učiniti kroz ono što se zove WinRT. To je skup API-ja koji jednostavno radi sve za vas. Ako vam je potrebno za otvaranje datoteke, morate koristiti kameru, Geolocation, takve stvari, oni prolaze kroz ono što Windows može ponuditi na vas. Za pristup da, imamo još malo pravopisa koji će još više olakšati za vas to učiniti. Mi ćemo govoriti u ovom trenutku. No, za sada, to je zapravo vaš road map. Stvari koje ste već radili na vrhu nekih API koji će vam pomoći da rade s Windowsima jednako trgovine app. I to je zapravo o sve što morate znati iz visokoj razini. 

Mi ćemo zaroniti zapravo radi sa stvarima sada. Ono što ste vjerojatno već vidjeli gomilu, s IE9 malo nazad smo uveli podršku za puno, u to vrijeme, noviji standardi u webu, tako puno novih CSS mogućnosti, Mnogo novih HTML, ECMAScript 5, koji je stvarno JavaScript. Dakle, sve što je za to, osim strogog mirovanja bila u IE9. Samo tonu stvari s CSS, CSS3, sve tamo. A sve ovo nosi naprijed u ono što mi radimo s Windowsima 8. Možete koristiti ove stvari, a vi možete koristiti sve što je novo u IE10. S IE10 uvodimo podršku za sve te stvari, kao dobro. Oni su svi hardverski ubrzan, pa ako ste na stroj koji ima neku vrstu GPU, što je vjerojatno prilično mnogo svaki stroj koji bi mogao dobiti u posljednjih 8 godina, ti si idući u biti u mogućnosti da imaju hardverski ubrzani izlaz, Vizualni izlaz s CSS, Canvas, SVG. Sve te stvari će proći kroz hardversko ubrzanje i biti da je puno brže i učinkovitije. Kratka verzija sve to - Ne idem proći kroz svaku stvar ovdje - ako ga vidim na ovom popisu, ako to možete učiniti u IE10, ako je web aplikacija koja radite da radi u IE10, to je nešto što možete učiniti kao Windows Store app. I to je uglavnom to. Dakle, ako se to radi u IE10, to će raditi kao Windows Store app. To je na stolu kao nešto što bi moglo koristiti. 

Ima puno toga ovdje. Nemamo do ponoći, pa ne mogu pregledati sve što je ovdje. Ali postoje neke web stranice koje će vam pomoći da shvatite što se takve stvari mogu napraviti, a ja ću vam pokazati jedan od njih u sekundi. Samo sam htio istaknuti nekoliko ključnih stvari koje biste mogli pogledati. Možda ste već vidjeli neke od njih u svojim studijama, ali to su jako korisne, osobito s Windows Store aplikacija, od CSS strani. Dakle, biti u mogućnosti to učiniti pretvorbe i prijelaze, daju prijedlog s animacijom - to su sve dio CSS sada, a svi oni podržavaju modernim preglednicima, i IE10 i IE9 dodao podršku tijekom vremena za sve te stvari. Pa zašto ga pisati sami, zašto ići kroz sve nevolje radi ove stvari ručno kada bi mogao koristiti jednostavan CSS transformirati stvoriti 3D efekt za svoju aplikaciju? Velika. Tako se to radi. Ja ne mogu učiniti bilo teže od toga. Ako znate kako to učiniti u CSS, znate kako to učiniti u sustavu Windows Store app. 

Iznad da je za izgled, čak i stvari kao što su trgovine app, ali ide dalje od toga, gledajući možda vijesti app koja prikazuje vam članke ili recepte ili slične stvari, ove druge vrste značajki u CSS su stvarno korisne: Grid, Flexbox, CSS Regije je više od relativno novog standarda, kao dobro. Ove stvari sve će vam pomoći da stavi van sadržaja i protok sadržaja između sekcija, biti u mogućnosti to učiniti numeriranje i crtice bez da ste pisati stvari sami. Vi samo reći: "Molim vas, učinite sljedeće za mene" i kao zaslon nekretnina je različit na različitim strojevima ili kao što ćete vidjeti u ovom trenutku, kao što ugriz prijavu imati manje količine prostora na ekranu, to nije problem za CSS. To može iskoristiti - Doći ćemo razgovarati o medijskim upitima u drugi - to može srediti stvari s pomicanjem sadržaja, teče sadržaj iz regije Upravo s tim stvarima koje ste možda već vidjeli s web tehnologije. 

Na HTML5 strane, postoje i hrpa stvari da će biti vrlo korisno za vas s Windows Store aplikacije. Opet, nećemo proći kroz sve to, ali oni su samo ovdje. Dakle, ako vam je potrebna kako bi ga koristiti, audio-video, ako želite napraviti validaciju od oblika, geolokacija, sve stvari koje možete učiniti u JavaScriptu sa JavaScript 5 ili ECMAScript 5, IndexedDB za lokalnu pohranu - sve su opcije za vas. Ako ste u potrazi za odgovor, samo pogled na postojećim tehnologijama s HTML5 i CSS a vi ćete lakše odgovore nego što roll puno te stvari sami. Dopustite mi da vam pokažem malo ovdje. Imam mjesto možemo ići. Dopustite mi da otkaz iz ove slajd na sekundu. 

Ako idemo van IETestDrive.com, Neću učiniti mnogo demo ovdje. IETestDrive.com stvarno pokazuje vam puno što je novo u IE10, stvari koje možete učiniti. Smatram ovo je stvarno korisno, jer umjesto čitanja kroz hrpa bijelih radova, Pogledajmo nekoliko demo, a to će vam pomoći da ga stavi na svoj osobni radara o tome je li tehnologija ima smisla da se čak učiniti bilo više istraživanja s tako da ćete shvatiti, "Vidim što je to za." "Ja razumijem što Zahtjev Animacija Frame radi za mene." "Razumijem kako bih mogao koristiti regijama ili SVG filtre." Možete ih vidjeti u akciji, pogledajte ih na primjer ovdje, i odlučiti za sebe, ako to će biti korisno za vas u svojim projektima i izvan nje kao što ste i dalje raditi s web tehnologije. Ovdje sam samo će vas potaknuti da se pogledati. Ne mislim da ću potrošiti mnogo vremena zapravo radi njih. Imamo dovoljno pokazati s pisanjem koda. Vidjet ćete ovdje stvari iz touch učinaka na dodir-based igre u tom dijelu, animacije, jako brzo hardware-ubrzani animacije postoji, neki optimizacijama koje ćete vidjeti u nekim od tih uzoraka, kao i, a tu je još mnogo, mnogo toga. Ako idete ovamo i otvoriti site map, postoji samo smiješno broj uzoraka ovdje. Vi ih sve možete vidjeti ovdje. Ako ste u potrazi na nešto ili ste čuli o nečemu i pitate se možda da će to biti nešto super koristiti u app, probajte pogledati ovdje, a tu je vjerojatno prilično dobar demo za to da se uštedjeti nešto vremena. 

Ok? Bilo kakva pitanja do sada za narod ovdje? Ok. Mi ćemo provesti ovdje. Opet, samo to provjeriti. Oni su web standardi, pa ići na bilo koji drugi izlog stranice koje znate od i vidjeti ako oni tehnologije smisla za ono što pokušavamo učiniti. 

Povratak na slajdovima. To je rekao, što se kreće s web svijetu da stvarno instaliranom lokalna aplikacija svijeta, tako da postoje neke stvari koje treba istaknuti. Prije svega, nema web poslužitelja koji su uključeni ovdje. Nema Apache, nema IIS trčanje ovdje služeći se stranice na udaljenom klijentu, na udaljeni preglednika agenta. U tom slučaju, zapravo sve je pakirano za vas. Možete podnijeti da je kao svoju aplikaciju u dućan, to dobiva certifikat, to ne dolazi u dućan, a onda ljudi na tisuće će instalirati igru ​​ili svoju aplikaciju. Ali u osnovi, oni su ga vuče dolje lokalno na svoje računalo. Nema potrebe za izlazak na webu više, osim ako imate pozive koje je potrebno daljinski API, i to je sasvim normalno, kao i previše. Ali oni neće biti u tom modu, gdje su ići zahtjev odgovor od poslužitelja da se na sljedećoj stranici njihovog sadržaja. Tako da, rekao je, postoji nekoliko manjih API razlike. To su nevjerojatno male. Oni su vjerojatno da će vas pogoditi u svom uobičajenom kodiranje, ali oni su barem dokumentirati. Oni su neka vrsta ruba slučajeva postoji. 

Druga stvar vrijedi istaknuti je povjerenje razlike. Ja samo spomenuti, jer samo želim da biste bili sigurni da je to rekao pa ako naiđete na to kasnije, da ćete misliti: "Chris je rekao nešto o tome, "Pa možda, da, u redu", a onda se vratiti i saznati što je to bilo. Contexts važno. Po defaultu smo pokušati zaštititi korisnika od vektora napada. Postoje određene stvari koje možete učiniti po defaultu i određene stvari koje trebate promijeniti kontekst omogućiti. Kako budete koristili neke knjižnice vani - you've već je radio s jQuery, ali ako ste u potrazi za drugim knjižnicama vani - možda koristite neke funkcionalnosti takav nadilazi lokalne uporabe, nema više dinamične interakcije XHR zahtjeva, takve stvari. Ponekad možda pronaći one će biti isključen, te u tom slučaju, samo ne traži, tražiti lokalne i web kontekstu, a vi ćete saznati kako to popraviti. Samo pazite da je znao o tome što vam se početi koristiti druge okvire, koji je, treba spomenuti, da ste savršeno sposobni učiniti. Dakle, ako vam neki drugi okvir - Doći ćemo razgovarati o tome u drugom - za igranje i želite koristiti da, želite koristiti neke kontrolne knjižnice koji su vani a vi ne želite pisati te stvari sami - to je dobra ideja, zar ne? - se apsolutno može koristiti ove stvari. Nema ništa vas drži leđa od korištenja bilo koje vrste knjižnica koji se temelji na JavaScript, CSS, HTML5. Opet, ako je to nešto što možete učiniti u IE10, što je ispitati kritički od puno ovih dana, možete to učiniti. Povucite ga u vašem apartmanu, referenca da JavaScript knjižnica, i koristiti ga u svoj program, Upravo imajući na umu što bi moglo pogoditi sigurnosni kontekst s vremena na vrijeme - ne baš često. 

A onda su značajke, mi ćemo ići preko neke više onih što idemo. UX ćete vrsta naviknuti da kao što vidite sve više i više aplikacija iz sustava Windows Store. Možete dobiti osjećaj kako oni rade i kako dizajn estetski sklon raditi različitim aplikacijama i što će ljudi koristiti za doživljava. To je jako važan dio. Pobrinite se da kada se ložiti svoj app ne morate čitati priručnika, koji nikada ne razumiju, usput. Oni samo trebaju biti u mogućnosti zaigrati s prijavom i figuring out bez puno poteškoća. Pridržavaju i držeći se puno tih postupaka, ideš raditi svoje korisnike veliku uslugu, čineći da lakše. 

Ok. Jedna stvar na API strani i onda ćemo ući u zapravo pisanje koda. WinJS je to stvar koju sam spomenuo vrlo kratko s tim složenim slajd sa svim tim različitim izbora koji se imaju za izradu aplikacija. WinJS, možete misliti o njemu kao prijatelj. To je tvoj prijatelj će vam pomoći napisati stvari brže. To je samo JavaScript i CSS. Ne morate ga koristiti. Možete ga koristiti. Ako ćeš se zvati u Windows mogućnosti, što će završiti koristeći ga, ali ako ima nekih stvari kao što je dizajn obrazaca i kontrolama koje se stvarno ne žele koristiti, želite koristiti nešto drugo, to je do vas. Odlučite što želite koristiti i stilova koje želite koristiti. Značajke iz namespacing i klase generacije - na vama. Ako vam je draže jedan ili drugi, to je sasvim tvoj izbor. To je još uvijek JavaScript i CSS. No, to će vam pomoći da učinite mnogo stvari. Na primjer, ovdje je dio onoga što se može učiniti, stvari kao što pomaže asinkrono programiranje s obećanjima. Svaki od vas čuo ili radio s Node.js? To je zajednički uzorak za rad s asinkronim programiranja. Tako je u osnovi ono što si rekao je, "Idi radi nešto, "A ti ćeš mi dati obećanje da ćete se vratiti k meni kada završite." To je u biti ono što se događa. Tako da ne zamrzne svoj zahtjev, a korisnik će i branje datoteku ili nešto se slijevala niz s weba. UI ostaje osjetljiv. I to je moguće učiniti pomoću asinkrono programiranje. Zvuči smiješno složeno, ali to je stvarno lako jer koristi obećanja a ti samo reći, "Go to učiniti i kada završite, nazvati na ovaj način." To je uglavnom to. To je sve izgrađeno na WinJS. To će se učiniti puno lakše napisati jako fleksibilan i moćan aplikacija. 

Možete vidjeti ostatak ovdje, puno animacije. Vjerojatno jedna od važnijih stvari na ovom slajdu su kontrole. Mislim da imam jednu cjelinu - Da, poznajem ga. Evo primjer samo neke od kontrola koje možete koristiti u svojim aplikacijama. To je sve ravno iz WinJS. Niste pisanje tih sebe, ti samo reći: "Evo kako ja želim da sastavite svoju primjenu." "Koristit ću pogled flip, tako da mogu ići između različitih slika." Nisam vam pokazali značenjske Zoom. Ja ću vam pokazati kako se u trenu. ListViews. Postoji GridViews. Već ste vidjeli mrežu kao dio trgovine primjene, tako da ste u mogućnosti koristiti blokove sadržaja i pomicanje preko toga. Flyout izbornici vidjet ćete s vremena na vrijeme. App bar sam ti pokazao s tim svježe boje prijave, kao i, pa ste vidjeli kako se može prilagoditi da stavljanjem tipke na njemu i da ima sakriti kad te nije briga za to iskoristiti. To je zapravo potpuno na vama je da se koristiti. To su sve kontrole koje su dio WinJS. Ja ću vam pokazati kako napraviti to u samo sekundu, ali tu je više nego samo to, a ključna stvar je koristiti ih ako želite, uštedjeti nešto vremena. 

Ukoliko imate i druge kontrole knjižnice koje želite koristiti, to je savršeno u redu previše. Stvari kao što su jQuery UI učiniti puno ovakvom idejom, kao i, pružajući više kontrole koje se protežu što možete učiniti u HTML i JavaScript. Zaronimo u. Već sam rekao da. Koristite ono što želite. Samo imajte na umu da ste mogli upasti u nekom kontekstu pitanja. No, sigurno možete miješati i odgovaraju bez obzira na vrstu knjižnice ste zadovoljni s, Želite li saznati, želite koristiti, kako bi uštedjeti nešto vremena. 

Pričajmo o alatima samo na sekundu. Možete dobiti ono što vam je potrebno za početak rada s Windows Store aplikacije. Ako idem natrag, imam previše stvari ovdje. Ako idete na ovu stranicu, što je dev.windows.com, možete preuzeti sve što vam je potrebno. Kao studenti, imate pristup do više od javnosti radi, tako da možete dobiti veći kraja verzije Visual Studio. Edwin spominje već možete dobiti Windows, kao dobro. No, u cjelini, za sve programere, možete otići na ovu stranicu i preuzeti sve što vam je potrebno da bi zahtjev, i to je sve besplatno. Dakle, tu je besplatna verzija Visual Studio, postoje neki alati koji će se instalirati uz to - sve što je potrebno za stvaranje i testiranje vaš zahtjev. To je samo kada će objaviti svoju prijavu do trgovine da ćete se trebati račun developer. I to vjerujem da je besplatno. Je li to besplatno za studente, kao i? >> [Guarin] Koji? Račun programer, stvarna podnesak. >> [Guarin] Da. To je još dobrih vijesti. Ići ćete pogledati ovo. To će reći za pojedinca po defaultu je 49 dolara. Ali nemojte se prijavili za koje je kao student. Mi ćemo vam se neke informacije kroz svoje programe koje možete dobiti račun za besplatno, i da će vam zatim poslati svoje aplikacije sve do trgovine, onoliko koliko vam se sviđa, a sve to dobrote će uskoro slijediti. Dakle, to je dev.windows.com. Možete preuzeti alate koji vam mogu zatrebati odavde. A ako želite, možete dobiti probnu verziju Windowsa ovdje, ali opet, ne će trebati. 

Druga stranica - dopustite mi naglasiti ovaj put za vas brzo - je design.windows.com. To je dev.windows.com. Design.windows.com, možete pogoditi što je to za. To je zapravo prilično prijateljski stranica. Ima puno dobrih informacija ovdje. Možete raditi kroz njega. To će vam dati neke savjete o nekim stvarima da možda niste mislili o tome prije ili morali baviti prije, kao i projektiranje za dodir, projektiranje za različite faktora forme, projektiranja za mogućnosti sustava Windows 8, stvari koje sam spomenuo prije kao što je pretraživanje i dijeljenje, neke stvari koje nisam govorio o tome još. Oni su svi ovdje navedeni, a to je prilično dobar niz korisnih stranica datoteka koji će vam pomoći da shvatite kako napraviti određenu vrstu primjene, kako to učiniti interakciju, kako se nositi s UI i UX vašeg zahtjeva. Ja bih preporučio da se pogled na to, pogotovo ako ste u nekom trenutku u nadi da će objaviti prijavu u dućan. Vi idete da želite znati kako napraviti dobru aplikaciju zato što sam spomenuo prije, ako ne, nema te recenzije opet. Ljudi će biti nesretan. Oni neće biti u mogućnosti pronaći ono što oni očekuju na pravim mjestima. Nitko ne želi da se to dogodi vama. 

Kreće naprijed ovdje, neka mi zatvoriti to. Sada kada znate gdje da se stvari, ja ću vam pokazati kako zapravo početi koristiti stvari. Za početak, ja zapravo će vam pokazati ovdje je primjer desktop aplikacije na moj početni zaslon. Ovdje možete vidjeti Visual Studio, možete vidjeti spoj i druge razvojne alate koje imam. Oni imaju nešto drugačiju pločicu. To je zato što su desktop aplikacije, te u tim slučajevima svi oni će lansirati natrag na moj desktop zapravo samo kao aplikacije koje ste navikli. Dakle Windows iskustvo, to je ista stvar. Oni nisu, na primjer, kao što je oružanih! ili ove stvari. Dopustite mi da pokrenu jedan brzo. Zapravo, evo jedan zanimljiv. To je razvijen od strane studenata koji rade u partnerstvu na NERD. Cijeli zaslon prijava, ove vrste iskustava ovdje. Oh, lijepo cut ekrani i sve vrste zabave stvari. Oni su razvili to. Mi možda i prikazati cijelu stvar kad smo već kod toga. Naime, radio sam s njima malo, dao im neke savjete o stvarima zato što su radili JavaScript za njihovu primjenu. Molim vas, ne uzimam zasluge za njihov rad, oni sve radove. Samo sam im dao malo savjet tu i tamo, ali jesu neke velike stvari pomoću JavaScript prednji kraj i vezanje u nekim fizike motora i stvari koje treba napraviti puno za ovo djelo. Idi. Da vidimo je li se to radi. Wow, to još uvijek radio. U redu, dobro. No, shvatili ste. Full screen app, jako dobro iskustvo. To podupire ne samo moj miš i olovku ako imam takve stvari, ali i dotaknuti. Ako sam imao zaslon osjetljiv na dodir, samo sam mogao izvući na njega i nastaviti raditi s tim. 

Jedna stvar mi nije pokazao, i razlog zašto vodim ovaj gore je sam željela imati još jedan app koji će vam pokazati što možete učiniti, zapravo možete uzeti aplikacija u Windows i povucite ih na strani ekrana. To se zove lomljenje prijavu. U ovom slučaju, uzeo sam Inkarus i ja sam ga dodao na stranu ovdje. Ona je sada u pogledu Snap, a to mi omogućuje da učinite nešto drugo, a da je zahtjev postoji. Većina igara da ćete pronaći upravo će jednostavno pauzirati. To je inače pristojna stvar za učiniti, osim ako se igra može nekako umanjiti na taj mali od rezolucije, kao što možda neke vrste igara na ploči ili slične stvari na prigodu. No, u cjelini, najjednostavnija stvar za napraviti, a najprikladnija stvar za učiniti za igre je za pauzu aplikaciju. Za aplikacije kao što su vijesti aplikacije, ako sam pokrenuti ovaj i onda sam ga gurnuti, vidjet ćete da je zapravo bitno mijenja u tome kako je predstavljajući podatke za vas. Ovdje vas to pokazuje u stvarno više vertikalnu tavu da se informacije, ali ja još uvijek mogu apsolutno koristiti aplikaciju. Dakle, to je još uvijek vrlo koristan. Činjenica da je u manjim pogledom me ne bi od koristi tu aplikaciju. Dakle, razmišljam o tome. To je nešto što morate imati svoje aplikacije učiniti u određenoj mjeri, , ali to je do vas kako bi se utvrdilo koliko je funkcionalna vaše aplikacije bi trebao biti u toj vrsti manjem okruženju. Dopustite mi zatvoriti jednu dolje i vratiti u kojoj smo bili ovdje. 

Edwin, možete dodati fotografiju mene već? >> [Guarin] Da. >> [Bowen] Pogledajte kako. Jeste li vidjeli? Edwin dodao fotografiju. [Smijeh] 

Idemo natrag ovamo u Visual Studio. Dopustite mi da pokrenu ovo za vas. Mogao sam kliknuo na crijep na taj početni zaslon. To me je vratio u desktop modu, a to je pokretanje desktop aplikaciju za Visual Studio. To je Windows koje već poznaju. Ja mogu ići naprijed i stvoriti projekt ovdje. Mi ćemo ponovno usredotočiti na JavaScript, HTML. Ja ću izaći i odaberite ovdje pod JavaScript, Windows Store. Postoji nekoliko predložaka koje možete koristiti. Za produktivnosti, ja bih preporučio da se pogled na neke od tih drugih one ovdje kao Grid i Splitu. Oni su doista korisno ako ste stvaranje aplikacija koji će imati takav dizajn i navigaciju. Te se puno. Jedan samo sam ti pokazao je zapravo instanca Grid aplikacije. Dakle, ako mislite da ćete biti stvaranje vijesti app ili RSS čitač ili nešto slično da se bavi s više ulazaka za koje biste htjeli pokazati detalj, razmišljati o korištenju jednog od tih predložaka brzo započeti s radom i prilagođavamo od tamo. Ali samo tako mogu vam pokazati sve pokretne dijelove ovdje Ja ću stvoriti prazan app, a onda ćemo otići malo dublje u detalje. Ja sam samo što taj prazan prijavu ovdje. To će stvoriti cijeli projekt za mene. Ja ću otvoriti stvari koje želim da vam pokazati po defaultu. Dopustite mi samo povećavanje malo da vam pokazati ono što je stvorio za nas ovdje. Stvari koje idete pogledati prvi su nazvali zadani. Tako da ideš tražiti default.html, default.js i default.css. Druga stvar za naglasiti je da mi već imamo referencu na ono što sam spomenuo prije. To je WinJS. Nitko zapravo poziva ga na ovaj dugo ime ovdje. To je WinJS, Windows knjižnica za JavaScript. Ako ste ga otvoriti, možete vidjeti da je sve ovdje. Ima različitih CSS datoteke, postoji JavaScript. On je tu da vam pomogne. To je stvarno tu da daju kontrole i stilova i stvari koje jednostavno možete koristiti automatski. Ali opet, ako ima stvari koje želite koristiti, umjesto u smislu stila i druge kontrole, to ovisi samo o vama. Ja ću vam pokazati kako koristiti par tih stvari upravo sada. 

Natrag na na našoj lijevoj strani, dopustite mi da vam pokazati zadani HTML stranicu. Već ste vidjeli WinJS stvari, a to je zapravo sve što se događa tamo s one srednje linije označavanje, samo dovođenje u CSS po defaultu i dovođenja u par JavaScript datotekama iz WinJS. Vi ne morate biti majstor što se događa u tim dokumentima. Prilično je zanimljivo pogledati ih na neki način pregledati što se događa tamo jer ima dosta zanimljivih srednje i napredne tehnike zbiva, ali lijepa stvar je što su programeri, možete jednostavno iskoristiti ih, samo ih koristiti i stvarno ne morate brinuti o tome. Još uvijek možete voziti automobil bez da znaju kako se to radi, zar ne? Dakle, to je vrsta stvar koja se događa ovdje. Postoji kontrole i stilovi i stvari koje možete samo ići naprijed i koristiti i kod koji možete koristiti u drugu, bez da znaju što je unutra. Ovdje su vlastitim datotekama. To su vaši mjesta koja možete izmijeniti vlastite CSS i sami JavaScript da bi stvari valjanje. Vi ćete biti dodajući sigurno druga JavaScript datoteke i možda druge CSS datoteke što je vaš projekt raste, ali to je zapravo samo početna točka. Ovdje je Hello, svijet ekvivalent HTML, tako da smo još u tijelu oznaku. Na vrhu je, usput, to je HTML5 DOCTYPE, pa ćete prepoznati da od onoga što ste radili. Tu je puno IntelliSense ovdje, kao, pa ako to ne učinite stvari kao tipa u video tag i proširiti da se, vjerojatno ste naučili o činjenici što vam je potrebno učiniti rezervnog kodiranje za video tagova u HTML5 - ili možda imate - kako bi se osiguralo da različiti preglednici imaju podršku za svoj video. Imamo nekih stvari kao što je ovaj preko HTML, preko JavaScripta, preko CSS-a. To je izgrađen u, a ja ću vam pokazati CSS u sekundu. Ovdje možete ići naprijed i početi modificiranje kod, oznake. Naime, prije nego što sam išta promijeniti, da ću pokrenuti to i pokazati vam što ste dobili. Ti ćeš dobiti štrcanje zaslon koji možete prilagoditi i onda ćete dobiti Hello, World iskustvo ovdje. Bilo je fantastično, zar ne? Samo naprijed, brod koji je, zar ne? Sadržaj ide ovdje. To je osnovna stvar. To samo može biti bolje od tamo. Mi ćemo ići naprijed i dodati u nekim stvarima. Imam malo označavanje ću kopirati ovdje samo tako da ne morate gledati me tipkanje. Pusti me dovesti do alatni ovdje, a ja ću ustanoviti to, jer ja ću se to nekoliko puta. Kutija za alat, ako niste vidjeli Visual Studio, je mjesto gdje ćete naći hrpu kontrola. Također možete staviti koda u nju da se ponovno koristiti. Ovdje ću samo pop u nekom drugom HTML, ništa strašno napredne uopće ovdje. To je samo osnovni HTML govoreći imam ulaz gdje mogu upisati, Imam gumb gdje to mogu podnijeti, a onda imam div koji je u biti rezervirano da ja mogu koristiti za izlaz "Hello, upišete to." To je uvod u HTML primjer. Ako sam pokrenuti to, mi automatski dobiti HTML, ali mi također automatski dobiti styling. Ovo je jedan od važnih stvari iz WinJS. To će vam dati po defaultu neki izgled i dojam da je stvarno dosljedna s ostatkom ono što Windows 8 radi. Ovdje možete vidjeti stvari poput gumba. Tipka po defaultu u HTML ne izgleda kao da je, ali to ipak ovdje jer to je sve da CSS pravo iz tog CSS datoteke u WinJS. Ako želite koristiti nešto drugo, ako želite to promijeniti, sasvim u redu, ići naprijed i učiniti ono što želite. No, to je default. To će biti više upoznati korisnicima. I, naravno, to ne može učiniti ništa, jer nisam zapravo žice do bilo kakve koda odgovoriti na to. To je bio samo HTML. Dakle, ja mogu dobiti osloboditi od toga, a mi ćemo se vratiti u naš program. 

Dopustite mi prijeći na našim default.js. To izgleda prilično komplicirano, ali samo radi nekoliko stvari za tebe. To je predloženi. To će biti isti u svim svojim projektima. Jedino što to radi je samo vrsta pita, "Kako sam dospio ovdje?" i rekao: "Jeste li pokretanje ovu aplikaciju po prvi put?" "Jeste li nastavka app od toga da bude suspendiran?" Par stvari kao što je to. Doista, naš fokus na ovu sliku ovdje je pravo o ovdje. U ovom trenutku, to je jedan redak koda je prilično važno. To se zapravo događa da ide i gledati kroz sve svoje označavanje, i da će naći ono što ste zamoljeni da su se pretvorili u kontrolama, dublje kontrole poput kontrole ocjenjivanja, kao pogled na mrežu, poput flyout i one druge stvari koje sam ti pokazao na tom slajdu prije. Oni nisu izvorni HTML kontrole. Vi jednostavno ne kažu flyout kao elementa a to su znali što učiniti. Ono što mi zapravo učiniti je ista stvar koja se događa u drugim vrstama kontrole okvira. jQuery UI radi istu vrstu općeg pristupa. Možete koristiti oznake u HTML-u, a zatim neke JavaScript dolazi kroz kasnije i kaže: "Oh, ja znam što je to. Koja traži da se to pretvorilo u ovoj stvari," što je drugi izražajniji HTML napraviti kao gostiju kontrole, što je ono što ću vam pokazati upravo sada. Ova linija koda je obećanje da govori: "Kada se ispune to obećanje, "Sve ono što ste tražili a zatim je stvorio." I to je to. To izgleda malo komplicirano, ali to je stvarno isti u svakom projektu. Ovdje je mjesto gdje možete dodavati u bilo što drugo što želite da se dogodi, pa ćemo se vratiti na to u sekundi. 

Prije svega, treba mi malo koda koji može odgovoriti na to da je netko kliknuo na gumb. Ja ću ići naprijed i staviti to ovdje dolje. Opet, ja ne ću učiniti bilo tipkati ispred vas ovdje. Vrlo osnovni JavaScript jednostavno govoreći, kada se to zove ćemo se osigurati neke detalje o tome kako smo ovdje a onda ćemo napraviti nekoliko osnovnih stvari. Idi pronaći stvar u mom HTML stranicu koja se zove nameInput, iskoristite ga, uzmi svoju vrijednost, slap "Hello" na ispred njega, i staviti onaj koji proizlazi niz u taj div tag koji smo imali prije nego što to doista nije imao ništa prije. Sada ćemo pronaći tu oznaku i čine njegov unutarnji sadržaj jednak tom nizu. Vrlo jednostavno JavaScript. Nadam se da ste priznajući da je stvarno ništa neobično događa ovdje. To je samo ravno HTML i JS ovdje. Ako sam pokrenuti ovaj sada, to još uvijek neće ništa raditi jer ga nisam ožičen primiti događaj. Da biste to postigli, ja ću to učiniti upravo ovdje, ponovno se vraćaju u moj alatni, to iskakanje ovdje. Pretpostavljam da ste vidjeli sve ove vrste stvari prije, pa neću ga pretjerano objašnjavati. Sada ćemo ići dobiti helloButton. Mi ćemo reći: "Button, čestitam." "Ovdje je događaj koji sada reagiraju na." "Kada netko klikne na vas, nazvati tu funkciju, buttonClickHandler." A to je da je funkcija smo samo dodao desno dolje na dnu tamo. To je sve. Tako sada imamo nevjerojatno funkcionalnu primjenu. Mislim da ćete biti jako impresionirani to. Chris. Pričekajte za to. Wow. Ok. To je nevjerojatno. [Smijeh] No, tu je još mnogo toga. Nemojte ga kupiti još. Čekaj. 

Dopustite mi da vam pokazati malo više ovdje i izaći iz cijelog zaslona. Idemo u šetnju prije nego što smo pokrenuti. Pusti me u i zapravo pokazati vam malo s CSS. Samo po defaultu, ako se osvrnemo na stranici ovdje, kad god smo izdvajali u tim stvarima od WinJS i dobili smo ui-mrak, u stvari, možete ga promijeniti zadani za korištenje aplikacije svjetla. ui-tamno je dobar za grafičke aplikacije kao što su pomoću puno slika, koju pokazuje puno vizualnog sadržaja. Ako ste pokazujući puno tekstualnog sadržaja, ui-svjetlo je općenito dobar izbor. Ne morate odabrati ga, ali sam se prebacio na njega i sad vidite istu označavanje, isti sve, to je samo pomoću osnovi obrnuti shemu ovdje gdje sve je što je crni tekst na bijeloj. To je sve dobro i dobro. Dopustite mi da se ovdje, i neka je zapravo napraviti malo više sa CSS. Ja ću ga vratiti na mraku, jer mislim da je to vjerojatno lakše vidjeti na zaslonu kada sam početi raditi te stvari. Idem zamijeniti tijelo još jednom. Ići ću ovdje. Dopustite mi nuke to. Dovedimo u tijelu s nastavom. Vjerujem da ste učinili osnovne selektora sa CSS i stvari kao što je to već, tako da vjerojatno znate što se ovdje događa. Samo dodjeljivanje neke klase našem zaglavlju, a mi stvaramo novu div omotati ostatak te stvari koje sada možemo koristiti za stil svi zajedno. Dakle, ono što ja mogu učiniti sada je otići na našu zadanu CSS. Jeste li gledali na medijske upite još? Jeste li razgovarali o tome uopće? Mediji upiti su dio ovog nastajanju trend - ili je to utvrđeno trend sada zapravo na webu - za odgovarajući dizajn ili prilagodljivo, a ideja je da svoje aplikacije stvarno može se prilagoditi na odgovarajući način na temelju onoga što uređaj koji oni prikazuju na može učiniti. Dakle, ako ste na mobilnom uređaju, očito je da nećeš imati što više zaslona za nekretnine kao što će se na velikom 30-inčni monitor sjedi s desktop, velika računala kao što je to. Dakle stara odgovor na to bi bio da imaju 5, 6 različitih verzija iste stranice a ti bi se otvoriti onu koja je podešen za tu određenu veličinu zaslona. Nije velika. To je vrlo, vrlo ponavljaju i postoji tona održavanja za to. Sada imamo nešto što se zove CSS medijske upite, i možemo koristiti to automatski detektirati kada postoji određena veličina ili neke koristi od svog sadržaja koji se obavlja. Tako da mogu odgovoriti na to, a vi možete reći: "U redu, u ovom slučaju "Vjerojatno ni ne treba mi da vam kažem što se ovdje događa." To samo govori, ako je prijava popucali, kao što sam ti pokazao prije - grabbing i stavljajući ga na strani ekrana - onda ćemo napraviti sljedeće styling. Styling je ne samo o bojama i takvih stvari. To je također o veličini i marži i paddings i opredjeljenja sadržaja ili čak onemogućiti ili omogućiti čitave dijelove vaše stranice i, u ovom slučaju, vaš app ili igru ​​kao dobro. Dakle, ovdje možete učiniti tako jednostavno kao što želite. To ne bi bilo korisno u svojim programima, ali to je demo vrijeme, pa ću ići naprijed i samo dodati u osnovnoj selektor tijela i reći, "Kad sam pukla, idemo naprijed i učiniti pozadine-boja i neka je odabrati nešto." Imaš IntelliSense ovdje. To je zapravo jako cool. U 2012 smo dodano puno stvari za CSS i JavaScript i HTML. Vi ste, naravno, dobio padajući IntelliSense previše, ali to nije cool stvar. Super stvar je što je dobio vizualne selektora za puno stvari, kao dobro. Dakle, moglo bi proći i jednostavno odabrati boju, ili možete ići van i biti još precizniji, a možete birati - to će biti strašno. Ja zapravo ću pokupiti pristojan boju ovdje. Pogledajte označavanje previše, usput. To je tvoj RGB standardni format postoji. Ali, ako sam prebaciti neprozirnost, to će se prebaciti na selektora alfa kanal ovdje. Dakle, možete vidjeti da, boju s suštini posto transparentnosti koje imate za to sve pečena unutra. Ja ću ga zadržati i do 100% i onda kad sam gotov s tim, sve je dobro i dobro. Sada, ako sam pokrenuti aplikaciju i uzmemo aplikaciju i mi ga gurnuti, da je boja pozadine se automatski podešava samo zato što imaju neke CSS koji kaže: "Idi učiniti." Također možete napisati JavaScript također da će učiniti istu stvar ili da bi mogao koristiti da se zapravo pauzirati igru, napraviti takve stvari. To je vjerojatno kada bih koristiti JavaScript. Ti bi isključiti game petlju u tom trenutku. Ti bi trebao malo JavaScript, jer to ne bi bilo nešto što bi CSS za. No, imajte na umu da je to samo događaj. Moglo bi se reći, "Kad je moj zahtjev je mijenjati, "Da vidimo ako smo puklo." I to je to. 

Ok? Razgovarao sam puno. Ima li pitanja koja do sada o tome gdje smo mi? Da. [Student] Ima udžbenik za svakoga da biste dobili više informacija? >> Da. Pitanje je, postoji tutorial za to? Samo ću ga proširiti na sve. Postoji nekoliko stvari koje možete ići. Idemo zapravo odavde. Pustite me da se vratim ovdje. Jedna stvar koju treba naglasiti je i sam Visual Studio ima tutoriali izgrađena rezervirati Dopustite mi da se osloboditi od toga. Ako idete i stvoriti novi projekt, ne File, New Project, i pogledaj na lijevoj strani, tu je Online čvor u ovom selektor. To će potrajati malo. Ja sam na MyFi ovdje. No, to će doći i to će mi dati priliku pronaći predloške ali, što je još važnije, uzorci te. Dakle, ja mogu kliknuti na JavaScript. To se događa kako bi pronašli uzorke za mene. Moj rezolucija je način high ovdje. Normalno, ti bi vidjeli popis puno različitih stvari ovdje. Ako postoji nešto što želite isprobati, pokupiti jezik, JavaScript ovdje i reći: "Ne znam kako to učiniti Geolocation." "Ne znam kako otvoriti datoteku." "Ne znam kako da iskoriste kamere "Ili optimizirati za dodir ili stvari kao što je to." Tu su uzorci za sve: dijeljenje, pretraživanje, cca barovi, što udaljenih poziva na servis, JSON kodiranje. Sve te vrste stvari postoje uzorci za ovdje, a oni nisu veliki uzorci koje će vas cijelu noć kako bi razvlači samo da otkrijete da jedna stvar koju ste željeli naučiti. Oni su stvarno dobri. Oni su mali, pravo na točku vrste uzoraka. Naučio sam tonu prolazi kroz njih osobno, pa preporučujem da puno kao jednu stvar. 

Još jedna stvar koju treba istaknuti je također, naravno, pokazala sam vam dev.windows.com, pa ako vam se vratiti na to, vidjet ćete na dnu tu je i ovdje uzorci. Na taj način možete skinuti sve njih odjednom, ali tu je i puno drugih resursa ovdje koji može vam pomoći doći do brzine. 

Jedna druga stvar, a ja bih stvarno preporučio da pokušate to, Ja sam ga dobio na moj blog, ali ću ići pravo na njega. Ja ću vam pokazati. Moj blog ima resurse i slične stvari. Jedna od stvari koje treba naglasiti je upravo ovdje, to je stvar: Vaša ideja. Vaš App. 30 dana. Ako kliknete na to, to će vas dovesti do jako korisne stranice. To je mnogo više pomoći nego što bi mogli očekivati. To će biti 30 dana od sadržaja koji se u osnovi mogu dobiti savjete i trikove tijekom tog procesa, kao što stvarate aplikaciju. I kao što ne može očekivati, zapravo možete ga dobiti za igre previše i za telefonske aplikacije, takve stvari. Tako je u osnovi se prijavili za to, a oni će biti ti šalju savjete i trikove, "Jeste li razmišljali o tome da to? Podržavate li Snap?" "Ovdje su neke smjernice o tome kako to učiniti dobro." "Jeste li razmišljali o podnošenju u dućan?" "Jeste li razmišljali o tome da ćete prodati svoju aplikaciju?" To će se provesti kroz sve te razne stvari. A zapravo, ako ste na gaming stazi, u nekom trenutku ćete početi prepoznajući osobu s kojom razgovarate vas jer sam zapravo morao ići na Redmint raditi one i snimio dva videa tamo. Ali to je sve dio igre stazi, a tu je i puna staza za opći razvoj aplikacije. To se zove generacija App. Ja bi svakako preporučujemo da na vas kao dobro osim uzoraka. 

Postoji puno videa na mjestu zvanom Kanal 9 kao dobro. To je vjerojatno zadnja stvar koju ću preporučiti kao i prije nego što smo prešli na ovdje. Channel9.msdn.com. To je super, jer ne ide se kroz čitanje tona bijele knjige. To je u osnovi puno video, screencasts i stvari koje su pravo na točku. Ne treba reći da je uvijek u pravu na stvar. To ovisi tko radi govoriti. No, općenito, ima nekih stvarno to-the-point video ovdje koji će vam pokazati neke određenu stvar koju možda želite naučiti ili vidjeti demoed. Tu je i sve naše sadržaje iz naše konferencije koja se dogodila prije par tjedana zove Građa, i vidjet ćete da je upravo tamo. Postoje temeljne tehnologije za Windows 8 utakmica. Postoji li ići. Bio sam tamo, zapravo. Vi me ne možete vidjeti. Bio sam ovdje. No, u svakom slučaju, to na stranu, ja bih preporučio da se pogled na one videa. Oni su prilično korisna. Ako ste zapeli na nešto ili samo želite vidjeti što se nešto može učiniti, otpustiti one gore. 

[Guarin] Windows Mail mi je upravo poslao e-mail s linkom na sadržaj za studente skinuti s uzorkom koda i takvim stvarima. >> [Bowen] Super. Strašan. Hvala vam, Edwin. 

Dobro. >> [Student] imam jedno pitanje. >> [Bowen] Oh. Da, molim te. [Nečujan student Pitanje] >> [Bowen] Oh, drago mi je što ste pitali. Da. Pitanje je, je li vizualno sučelje za mene stvoriti stvari? Edwin će vas nagraditi lijepo za to pitanje. Postoji način da to učinite. Hoćemo li to učiniti sada? Učinimo to sada. Ja ću ići na to upravo sada. Zapravo, dopustite mi dodati još jednu stvar na ovom demo, a onda ću ti pokazati stvarni odgovor. Htjela sam dodati malo više CSS ovdje. Bio sam malo off na tangente ovdje. Dopustite mi da stavi na neki CSS ovdje iskoristiti od klasa koje smo dodali malo prije, zaglavlju, na Maincontent DIV, a zatim se u greetingOutput. Ako sam to učiniti i pokrenuti ga, što možete vidjeti sada imamo malo drugačiji padding i margine, tako da imamo zapravo neki odmaka ovdje. To su više prema ono što očekuje i od konačnog poliranog primjene. No, ja sam samo pokazuje da je to vama, jer to je ravno CSS. Tako su stvari koje već znate da možete koristiti ovdje za podešavanje sadržaja kao što želite. Već smo vidjeli kako napraviti pozadinu promijeniti u tom smjeru. 

Ako idem natrag u našu HTML, ja ću dodati još jedan set označavanje, i to je zapravo će biti kontrolni iz WinJS. Ja ću ići i iskoristite to, naljepnicu. Dopustite mi da provjerite da to činim na pravom mjestu. Vjerojatno dovoljno dobra. Evo upravo sam dodao - a mi ćemo ići preko cijelog zaslona, ​​tako da možete vidjeti cijelu stvar - Ja sam dodao oznaku za sljedeći div. Div zove ratingControlDiv. Samo po sebi to će učiniti ništa. Ako ovo otvoriti u pregledniku, koju biste se gledajući u prazno, sama div. No, zbog tog tajanstvenog linija koda koji sam ti pokazao i prije, Proces svega, da će tražiti nešto što izgleda ovako - data-win-kontrola - i to će se naći sve što je u tom parametru. To će napraviti instancu što god da je to ukazuje na. U ovom slučaju, to je kontrola ocjena, pa sam rekao: "Molim te, idi i zamijeniti ovu stvar "Sve što vam je potrebno učiniti kako bi kontrolu ocjena." To bi mogao biti kontrola Flip, to bi mogao biti prsten napredak ili što god kontrola želite koristiti. Oni svi idu na posao u biti na isti način. Vi koristite standardne HTML5 označavanje naznačiti ono što želite, i onda ćeš dobiti kontrolu na kraju to. Dopustite mi da vodim ovaj. Samo sam kopirao da u, a sada da markup postaje to, koja je zapravo prilično broj HTML elemenata. To su sve pojedinačne slike, a tu je divs oko njih s selektora. Nadam se da možete vidjeti da. To je malo suptilniji. Mogu prelazite preko različitih predmeta, i to će mi dopustiti da se vidi ocjena ovdje. Ja mogu kliknuti na njega, i to pamti rejting, ali to je otprilike to. To nije stvarno radi ništa s rejtinga. 

Jedna stvar želim vam pokazati na ovo Prije nego pređemo na više vizualnog dizajna iskustvo je malo koda koji mogu koristiti kako bi odgovorili na te WinJS kontrolama. Dopustite mi da se od tamo, natrag iz cijelog zaslona, i prijeći na JS ovdje za sekundu. Ja mogu to učiniti upravo ovdje. Mislim da ću zamijeniti cijelu stvar. Zapravo, mislim da će zamijeniti sve to, ali saznat ćemo zajedno. Stavit ću ovo ovdje. Da. Idem obrisati ovo previše. Što sam dodati? To izgleda kao puno. To nije puno. Ja samo produžiti tu liniju koda da sam već prije govorio, i ja govorim, "Kad se sve radi, kad se sve moje kontrole su napravljene, "Onda to učinite." Pa onda pokrenuti ovu funkciju nazvanu završena. U ovom slučaju, to je stvar koju možete shvatiti. Idi pronaći tu kontrolu div. Zapravo, postoji jedna stvar koju treba naglasiti. To sljedeći redak je zapravo rekao: "Imam tu ratingControlDiv." "Želim razgovarati s njim kao da je stvarna kontrola, kontrola WinJS." Tako je u osnovi, vi me pitate za to od njega. Ti govoriš: "Želim s vama razgovarati kao kontrola." A onda možete početi govoriti stvari poput: "Idemo dodati slušatelja za vas "Pa kad ste promijenili možemo odgovoriti na to." A onda možemo raditi stvari kao što je ovaj. Zapravo, to je stara code postoji. Mislim da sam kojega zalijepiti na još jednu funkciju, i to će biti stvarna funkcija koja će odgovoriti na kontrolu ocjenjivanja se mijenja. Dopustite mi da pop koji je u pravu ovdje, negdje postoji. I u ovom slučaju, jedina stvar koja je nova je činjenica da ćemo u ono što nas je kontrola rating govori, a mi smo tražili ono što se zove tentativeRating. Postoji hrpa raznih drugih stvari koje ta kontrola mogu vam reći, i to ide kontrolu kontrolom. To je vrlo jednostavan. Vi ćete biti u mogućnosti to shvatiti bez problema uopće. Trčim to, a sada kada sam promijeniti rejtinge i kliknite na zvjezdicama, možete vidjeti da je sada to je zapravo reagira na to. To je stavljajući tu ocjenu na zaslonu u toj inače praznom div tag ispod kontrole ocjenjivanja. To je čarolija puno stvari ovdje previše. Dakle, kao što ste stvaranje aplikacija za Windows Store, postoji tona kontrola koje možete jednostavno koristiti. Svi oni rade kao što je ovaj. 

Dopustite mi da vam pokažem vizualnu stranu projektiranje za ove aplikacije. Dobra vijest je da je već ćete imati ovaj alat kada ste instalirali sve ako idete na to preuzimanje, a vi dobiti Visual Studio. Mogu desni klik na to. Neću povećavanje u. To samo govori otvoreno u Blend. Blend je još jedan alat koji rame uz rame s Visual Studio radi i usmjeren je puno više na strani dizajn stvari, tako da stvarno površine alate koje su optimizirane za stvaranje stilova, stvaranje animacije, rad s CSS, puno stvari u toj vrsti venu. Evo što bi trebao biti vrlo zanimljiv i prilično očito odmah je gledamo u app. Nadam se da ćemo i dalje. Umjesto gledanja kod, koji se još uvijek ne vidi na dnu, vidimo stvarni prikaz primjene. Što je više, to nije samo prikaz app, to je zapravo app trčanje. I to je ono što je stvarno lijepo o Blend. Tim je učinjeno puno posla kako bi HTML i JavaScript i CSS u ovaj alat. Sada možete zapravo, ako ste znatiželjni, "Što to znači? Što mogu učiniti?" Ja zapravo mogu dizajnirati za ovu aplikaciju, iako se takve stvari ne postoje u mom označavanje. Zapamtite tu kontrolu ocjena? To je bio samo div tag. Ova stvar, da je star, postoji samo za vrijeme izvođenja. Kako ću znati da? Tu je malo magije ovamo. Pogledaj ove munja vijke? Svaki put kad vidim munjom, to znači da je stvorio nešto za vrijeme izvođenja. Neki JavaScript vodio i pretvorio je nešto u ovom ili stvorio ovaj sa nekom logikom. Oni zvijezde koje vidite tu su stvorili JavaScript WinJS. Dobra stvar je, to nije važno za mene, ja još uvijek mogu dizajnirati, Ja još uvijek mogu otići i to promijeniti, ja mogu saznati što se događa ovdje, Ja mogu pogledati na CSS, mogu ići naprijed i saznajte zašto boja je način na koji je, Mogu početi petljaju stvari i što se stvari strašno, sve što želim učiniti. Zapravo, ja ću ostaviti stvari na miru. No, možete vidjeti ovdje je sve CSS i to vam pokazuje ovdje. Ako odem do tamo, to će vam pokazati sve ono što oni zovu Pobjednički, tako su CSS pravila koja su vrlo specifična i najčešće bira za tu stavku, koji ste vjerojatno već prešao u svojim klasama, gdje se može reći da je općenito font koji smo se primjenjuju na sve, nego zato što je to H1 i imam boju definiranu za H1S, to će biti ova boja, a to je zato što je precizniji nego body1. Ovo je jedna stvar ovdje ti sve to pokazuje, i to je jako moćna stvar kao što ste dobili složeniji, da se pitate zašto te stvari su takve kakve jesu. To zapravo će vam reći, a možete odabrati bilo koju od tih stvari ovdje. Ta boja nije previše loš, zapravo. Možete ih odabrati. Nadam se da možete vidjeti. Za sve koje imate u svom zahtjevu, vidite cijelu kaskadu svega CSS koji se mogao primijeniti na to, a koji je pobjedu, kojih je jedan zapravo je prednost. To su vrste dosadno. Ne postoji mnogo događa u nekim od njih. Ako sam otići i promijeniti boju, onda ćete početi dobivati ​​neke kaskada postoji. Također možete koristiti HTML i ovdje. Mogu proći i modificirati HTML svojstva za sve ove stvari što želim. Postoji samo tona stvari ovdje. 

Ne želim da se vaše vrijeme prolazi kroz sve ovdje. Samo znam da je ovdje. Postoji puno projektantskog funkcionalnosti to je samo dostupna za vas tako da možete ostati vizualna, rad s aplikacijom, a da ne morate učiniti mnogo nagađanje da će morati raditi normalno i biciklizmu vratio iz preglednika natrag u svoj dizajn, Povratak u pregledniku. Ovo je stvarno cool stvari za to, a kao što se razvije Windows Store app, to će učiniti puno više produktivni. 

Također ćete vidjeti da je praćenje označavanje ovdje i vaš CSS što radite kroz različite stvari. Vjerojatno je jako teško za vas da se vidi da, pogotovo na videu, ali to je ono što se ovdje događa, a ja bih preporučio da se upoznate s tim. To će vam uštedjeti puno vremena. To je mješavina. Ako bi ovdje bilo kakve promjene, oni se automatski će nositi natrag preko Visual Studio. To je ista slika, to je isto sve. Ja ću ga ostaviti na miru. Imam bolji primjer koji želim vam pokazati. Ali, ako sam napravio promjenu tamo i to spasio i vratio sam se u Visual Studio, što će reći, "Hej, vi samo promijenili nešto. Mogu li ga ponovno za vas?" Da. A vi koristite istu stvari tamo. To je kraj tog uzorka. 

Želim vam pokazati viši kraj uzorak samo da vam pogled na druge funkcionalnosti što mislite o tome što je dobro. Ovo je primjer app koji možete preuzeti. Ako ste u potrazi za nečim što se zove Windows Camp u kutiji, postoje neki uzorci koje su u tome, a jedan od njih je Contoso Kuharica. Ja samo mogu pokrenuti ovo za vas. Custom čuvar zaslona. Ovo je pogled Grid aplikacije. Oni su dužni neke prilagođene podatke ovdje. Možete se kretati kroz to. Možete otići i pogledati razne stvari koje će nas čine gladnima u petak poslijepodne. Ne znam. Što se događa da me najviše gladni? Ne znam. Samo ću odabrati jedan. Možete ići u tim stvarima. To će vam pokazati recept. Mogla bi se također, umjesto da kliknete na stavku, možete ići pravo na tu kategoriju sadržaja, taj dio sadržaja. U tom slučaju, možete pročitati puno lažnih latinskom vam sve govori o tim receptima ovdje i onda ići ravno u određenom receptu. To također podržava stvari poput dijeljenja da sam vam pokazao prije sa slikama. Također možete tražiti u tom zahtjevu previše. To je vrlo jednostavan za napraviti pretraživanja. U osnovi, vi ste samo dobivanje niz teksta iz Windowsa a vi odlučite kako želite nositi pretragu s tim. To je nekoliko linija koda kako bi se to, a onda ono što učiniti s njim nakon toga je potpuno ovisi o vama. 

Ovdje oni također imaju app bar gdje oni koriste neke druge funkcije. Samo ću vam reći što je to. Podsjetnik će se koristiti ono što se zove obavijest tost. To je stvarno zgodan za ostavljajući korisnik znati kada su se dogodile stvari, kao i program je instaliran ili nešto dovršena. To je također dobar za igre previše. Ako imate uporni svijet ili zajednica vođu i uslugu koja će biti voditelj da Možda na posebnom stroju, te obavijesti može biti poslana u stroj pa čak i ako korisnik ne koristi svoju igru, igrati svoju igru ​​i trčanje tvoj app, oni još uvijek mogu dobiti obavijesti o takvim događajima. Dakle, moglo bi se reći, "Vaš dvorac je uništen ili je samo o uništena." "Vrati se i braniti", ili nešto slično. Kliknete na obavijesti, idete pravo vratiti u igru, a možete ga igrati. Dakle, one vrste stvari koje mogu pomoći stvarno privući ljude natrag u svoj app prilično učinkovito. 

Tu je i podrška u ovom zahtjevu za korištenje mikrofona, web-kamere, radi videa i fotografiranje. Također možete prikvačiti srednju pločicu. To je korisno ako želite da se samo pločicu koja ide pravo na određeni sadržaj. U ovom slučaju, to ide na ovom receptu. Sve ću spomenuti ja sam samo pokazuje jer to je ono što možete razmišljati o korištenju, kao dobro. Za veći dio, oni su vrlo jednostavan za korištenje. Ja bih samo preporučio bi se da je uzorak Explorer i naći uzorak koji vam može pokazati kako se to radi. To je prilično jednostavan da bi oni u svoje aplikacije kao i tamo. 

Htjela sam vam pokazati nešto drugo to je baš super ovdje. Ja ću puknuti ovu aplikaciju, a ja ću se vratiti u Visual Studio. Ovaj program je pokrenut. To je trčanje s Visual Studio. Ja mogu napraviti neke prilično kul stvari s tim. Ja zapravo imaju mogućnost odabrati element, i ja mogu ići ovdje na live aplikaciju, a ja mogu reći, "Pitam se zašto je vrijeme pripreme malo svjetlije sivo od samog naslova?" Ja mogu kliknuti na njega. To će se uskladiti da vrati u Visual Studio, i to će mi pokazati točno generiran sadržaj koji je rezultirao u tom dijelu UI. Dakle, u ovom slučaju, to je točka-podnaslov i H4 dvostruki konstrukt, i to je vjerojatno nam govori ono što moramo znati, jer kao H4 u tom kontekstu, to će dobiti određenu vrstu fonta. Ali, ako ja još uvijek ne znam zašto, ja mogu kliknuti na Trace stilova. I onda možete proširiti izvan boju, a ja mogu saznati točno zašto ta boja nije boja karoserije ali u stvari je nešto drugo. To je u biti dev alati iz programa Internet Explorer do stupnja doveo u Visual Studio. Ako ste radili s Chrome Dev alati, palikuća, takve stvari, one vrste alata koji su u pregledniku, koja vrsta funkcionalnost je doveo ravno u Visual Studio tako da zapravo ne moraju pokrenuti preglednik i raditi s tim alatima odvojeno. Sad imam Windows Store app samo trčanje, i ja mogu početi povlačenjem osim i saznate zašto stvari rade ono što su oni. 

Također možete to učiniti na ovaj način previše. Mogu ići i samo pokupiti nešto od samog označavanje i saznati što je to u same aplikacije. Mislim da sam prošao sve. Ovdje sam lebdi iznad toga. Mogu ga odabrali. To će me prikazati u stvarnom trčanje aplikacija, gdje je ta stvar što sam se klikom na na označavanje. Stvarno cool stvari. Kao što ste pokušava shvatiti što se događa i što HTML radi, ono što CSS čini, imajte to na umu. Zapamtite ovo je ovdje za vas i da mješavina može raditi s live trčanje aplikacija. 

Jedna stvar Htio sam ti pokazati s tom zahtjevu - Usput, to pokazuje da delte kao stvari previše promijeniti, tako da možete gledati za one žute naglašava. To su stvari koje su samo promijenili u primjeni. No, jednu stvar. Želim se vratiti u Pomiješajte samo za trenutak. Otvorit ćemo ovo gore, otvoreno u Blend, isto app, isto sve. Ja samo želim pokazati iskustvo ovdje nije samo da ste zapeli na početnoj stranici gleda na stvari koje ćete dobiti po defaultu kada pokrenete aplikaciju i neka ga sjesti tamo. Također možete uključiti na ovom prilično mala ikona ovdje. To se zove interaktivni način rada. Vi kliknite na to. To će donijeti svoj program. Nisi u dizajn modu više, tako da se ne ide da se klikom na stvari mijenjati funkcionalnost, ali zapravo možete raditi s aplikacijom sada. Možete klikati, možete raditi što god, dobiti na recept koje vam je stalo ili u neku kategoriju. Idemo u ovoj kategoriji. Ja ću reći: "U redu, ovdje je mjesto gdje želim dizajnirati." Tada ćete opet kliknite taj gumb, to će vas vratiti u dizajn površinu, i sada možete učiniti sve one stvari koje sam govorio prije. Ja ću držati klik dok ne dobijem taj bira, saznati njegove dimenzije, saznati HTML za njega, CSS za to za trčanje aplikacija, neki kasnije dio zahtjeva. Vrlo, vrlo korisno. Pokazat ću vam to. Molimo imajte na umu da, ako ste u potrazi za pisanje koda s tim jer to će vam uštedjeti puno muke, i to je prilično dobra stvar. To je uglavnom sve htjela sam vam pokazati na Blend i Visual Studio za sve to. 

Bilo kakva pitanja o bilo kojem od tih alata? Bilo što? >> [Guarin] Imam stvari davati, pa dobra pitanja, dobre stvari. 

[Bowen smije] Već sam vam pokazali svoje demo ovdje. Ja ću ga staviti na stranici potencijala i okrenuti se pitanja sada. To je prvi referenca je da generacija App stranica s igrom stazi i app stazi. Prijavite se za njih. Ne morate čekati 30 dana da se sadržaj. Možete početi ide i gleda na sadržaj kao što želite. Razumijem vaše vremenski okviri moglo biti drugačije nego - [smijeh] Dakle, kada je Hackathon? To je prije par tjedana, zar ne? Dakle, ne morate 30 dana čekati. Tako da, možete se prijaviti za to i onda samo početak povlačenjem sadržaja iz njega. Također Dev i dizajn centri. I nisam ovo spomenuo, ali tu je i trgovina Docs. To će biti za poslije Hackathon kao da ste spremni za početak poslali svoje aplikacije za dućan. Postoje neke smjernice za pomoć ovdje, neke smjernice o tome kako da se stvari u trgovini, neke zajedničke pitanja koja bi vas odalo, i to je kraj tih sredstava. 

Pa što ti je na umu? Sve ostalo što - [Guarin] Tko razmišlja o tome radi Windows aplikaciju za CS50? Cool. [Bowen] Cool. Velika. 

Sva pitanja oko stvari koje ste do sada vidjeli i kako se to odnosi na ovo? Na primjer, s više vremena mogao sam uzeti igru ​​koja sam napisao i koji se izvodi u pregledniku, a nekako proći kroz proces dovođenja da u Visual Studio i što je Windows Store app. Potrebno je više vremena nego što smo stvarno morali su danas, ali kratka verzija je da je isti kod koji ste izvodi u pregledniku, i stvari koje mijenjate su stvari koje se odluče priključiti na Windows 8. Dakle, ako želite koristiti čari, ako želite pretraživati ​​i dijeliti, morate stvoriti app bar da sakriti neke funkcije na koje, one su vrste stvari koje će promijeniti. No, srž vašeg web app može ostati netaknut. Opet, koliko god se to radi u IE10, to će biti jako jednostavan luka da bi takve stvari u Visual Studio, u Blend, a čine ga Windows Store app. Opet, jedine stvari koje će vam trebati da biste saznali su one druge značajke koje možete koristiti kako bi upaliti aplikaciju, kao živi pločica i one vrste stvari. 

Da. >> [Student] Moje pitanje je u vezi rada mobitel. Dakle, ako ste napraviti aplikaciju koja radi kao app na radnoj površini, to je stvarno lako prenijeti na mobitel, ili je tu - Pitanje je, ako sam napraviti Windows Store app koji je stvarno optimiziranu za ovo okruženje i želim ga dovesti na mobilnom svijetu, što je uključen u taj događaj? To, kao i mnoga pitanja, uvijek stalno mijenja odgovor. Dobra vijest je, ako ste držati s HTML i JavaScript, CSS, ako ste počevši od Windows Store app, to će vam ga dovesti na webu a zatim koristite one vrste tehnika, kao što su medijske upite i stvari, prilagoditi različite veličine uređaja. To je rekao, tu je uvijek okviri i stvari vani da je podrška se širi iz različitih tehnologija, različite platforme. To mijenja sve vrijeme. Također se mijenjaju stvari, kao i gledamo prema onome što imamo sada zapravo s Windows Phone 8. Mi imamo neke zajedničke temeljne infrastrukture ponudio između aplikacija za okruženja. Dakle, stvari koje radite stvoriti Windows Store app, Puno toga može se prenijeti u Windows Phone 8 primjene, kao dobro. To je opet nastajanju priča, pa postoji neki sadržaj o tome na Build. SDK upravo izašao malo prije. To je upravo objavio malo prije. No, s obzirom na drugim platformama previše, vjerojatno sretala cross-platform okvirima kao dobro. Dobra vijest je stvari koje radite ovdje, osnovna namjena je ravno web standardne stvari. Jedine stvari koje ne bi prevoditi jednostavno su stvari koje Windows 8 nema, ali to ne čudi, jer je Windows značajka. Vi ne ide kako bi pronašli zajedničko korištenje ili slične vrste ugovora na svakoj drugoj platformi. Dakle, to su stvari koje bi željeli da se iz perspektive dizajna pobrinite se da imate načine na koje vrste apstraktno da se tako što može reći, "Ako sam radi na tome, ja to mogu." Ako nisam, postoji neki dizajn obrazaca koje možete koristiti kako bi vrsta skrivati ​​takve stvari daleko. No, imajte to na umu. Da. Oprostite. Samo naprijed. 

[Student] Ako želim testirati svoje Windows aplikaciju na vrhu [nečujan] [Bowen] Da. Sam preskočio još jednu stvar. Da. Odgovorit ću na vaše pitanje prvo, onda ću vam pokazati značajku zaboravio sam spomenuti. Imamo neke strojeve dostupne na lokalnoj razini. Žao mi je. Pitanje je, kako mogu testirati stvari na uređajima ako mi se ne dogodi da imaju puno stvari koje možete izabrati? [Guarin] ti posudio smo dečki, mislim, 5 ili 6. Koliko ti treba? [Student] Imamo 4 od njih. >> Redu. Imate li 4 liste poigrati sa. Dakle, definitivno neka svatko zna, molim te. [Smijeh] >> [Bowen] strašan. To je čak i bolji odgovor nego što sam bio idući u vam dati. Imamo radno vrijeme za programere da radimo u našem uredu i sad uskoro na Microsoft Store preko na Pru, ali Edwin već je preuzeo brigu o vama. Postoje 4 Ploče dostupni za loaning, za testiranje. Tu smo. Tu je primjer jednog tamo gore. Tako da, apsolutno. Velika. Apsolutno je daleko najbolji način da ga se ispitivanje na uređaju. Ako vam se ne dogodi da se jedan još uvijek ili ne žele hodati po kampusu u snijegu zgrabiti jedan ili što god, ne postoji način da to učinite to natrag u Visual Studio. Ako se vratim u kojoj sam bio ovdje, ovdje umjesto korištenja lokalnom računalu, možete spojiti na udaljeno računalo, ali to nije ono što ja govorim o ovdje. Simulator je stvar koju možda želite pogledati u. Pokrenut ću to, i stvarno što je to, to je u biti prozor na svoj sustav. Ovdje je zapravo moj sustav radi, radi Contoso, , ali na način koji omogućuje mi promijeniti neke parametre izvršenja, Parametri okoliša. Dakle, ja mogu reći ovdje, "Znaš što?" Oh. Već sam ga prikazuju u simuliranom 27-inčni monitor na rezoluciji 2560. Ja mogu lako pasti da dolje i vidjeti što je moj zahtjev će učiniti s manjim zaslonom ili promjenom DPI postavke ili bilo što drugo. Dakle, na malom ekranu, 10.6, što će to učiniti? To još uvijek izgleda prilično dobro, zar ne? Vi ćete želite učiniti, pogotovo ako šalješ u dućan, jer nam je činiti kao dio postupka ispitivanja. A ako postoje problemi kao što je to, onda ste mogli upasti u problem dobijanje certifikacije za dućan. No, to je dio simulatora. Stvarno super. Vrlo lako učiniti. Također možete koristiti značajke kao što ga okreće. Ja mogu kliknuti na tipku ovdje su se okretati, vidjeti što će netko imati kao iskustvo rotirajuće njihovu listu, njihov tablet, a koristeći svoj zahtjev s tim. Postoje neke druge stvari previše poput touch emulaciju i nekim drugim stvarima, postavljanje GPS. Mogu se pretvarati da sam na nekom drugom mjestu i vidjeti što je moj zahtjev radi kad sam se pretvarati da sam se vratio u Seattleu ili nešto. Ali to je jako korisna mogućnost, a to je ugrađena u oba Visual Studio i Blend. Da. Vaše pitanje. 

[Student] Ako pišete igru, nema Visual Studio imati podršku za animacije? Da. Pitanje je oko animacije podršku, posebno s igrama. To ovisi. [Nasmijao] Uz JavaScript ću reći da je vjerojatno manje potpore nego što je na XAML strani, koji ima rokove, ima storyboards i stvari koje su ugrađene u. Za animacije JavaScript aplikacija, ne znam koliko odgovora vam želim dati. Imam resurse na mom blogu koji idu kroz mnogo mogućnosti za oba fizike animacije, opcije za JavaScript-orijentiranih igara na Windows 8. Ja bi ti se odnosi na one. U osnovi, postoji toliko mnogo izbora. Razlog sam oklijevao je da ima mnogo mogućnosti za raditi animacije sa JavaScript. To bi mogao biti CSS, to bi mogao biti Canvas-based, to bi mogao biti samo osnovne DOM animacije, to bi mogao biti mnogo različitih stvari, tako da to stvarno ovisi o vašem izboru. Ako se odlučite za nešto poput Create.js ili limete ili druge vrste okvira - Pa, ja nisam ni siguran da ćete biti u mogućnosti koristiti viši kraj okvira Sviđa Impact ili izgradnju. To ima tendenciju da stvaraju više nego kod koje smatrate od nule. No, u tim slučajevima, još uvijek je mogao koristiti simulator, možete koristiti okruženja, i ja imaju tendenciju da se samo koristiti ovu okruženje za moj test platforme u tim slučajevima kao što sam u razvoju igre. Ja sam bio u redu pogotovo s platna animacije, što je vjerojatno najčešći stvar. Najbolje ćete se vjerojatno naći je dev alati u pregledniku i dev alati u Visual Studio. Vrsta krivudavom odgovor postoji, ali nadam se da je dobio svoj odgovor. Da. Vi. 

[Student] Koje su opcije za pohranu podataka za Windows 8 aplikacije? Koje su opcije za pohranu podataka za Windows 8 aplikacije, Windows Store aplikacije? Vaše mogućnosti su stvarno svaka aplikacija dobiva vlastiti bazen lokalne pohrane za postavke i za podatke, ali je isto tako smiješno jednostavan za korištenje roaminga za pohranu, koristiti cloud-based pohranu. To je besplatno. Ono što se događa je što u osnovi odabrati različite klase, a vi kažete, "roaming, snimite, ovaj set sadržaja" i njihov Microsoft računa, bez obzira što ste prijavljeni kao, će biti ključ za roaming tu informaciju oko. Dakle, ako sam koristiti svoju igru ​​na laptopu, a zatim sam se prijaviti s istim računom i ja igrati igru ​​na površinu ili tabletu, koji će se automatski lutaju tu postavku i podataka između tih strojeva. To je zadana stvar. To je dobro za određene količine podataka. Vi ne bi stavio veliku bazu podataka na one. Za to je potrebno ići na druge vrste rješenja, kao domaćin baze podataka u oblaku, takve stvari. Postoje neke druge opcije zajednice oko drugih vrsta podataka tehnologijama. Vidio sam neke SQLite opcije u zajednici oko tamo. Dakle, sve više i više se pojavljuju, ali to su osnovne stvari koje bi gledati prema za igru ​​ili aplikaciju. I što je imao pitanje u leđa previše. 

[Student] U smislu mreže [nečujan] upload ili preuzimanje datoteka [nečujan] [Bowen] Je li vaše pitanje kako možete vidjeti da je ili kako vi to možete debug da i to test? [Student] Kako se vi to debug [nečujan] Oprostite. Ja ne mogu čuti sve to. [Student] Kako ste dobili to bug testirali i [nečujan] Velika. Velika. Kako ćete raditi s umrežavanje? Kako možete vidjeti što se događa? Postoji mnogo različitih odgovora na to jednom, , ali dopustite mi da vam pokazati vjerojatno najlakši stvari ovdje. Dopustite mi da riješiti simulatora za sekundu. Samo par Mogućnosti ispravljanja pogrešaka za umrežavanje. Postoji puna mreža stack pečena pravo u oba razini WinRT i iz WinJS, tako da možete vrlo lako napraviti XHR, tipa AJAX pozive iz svoje igre ili app za to. Prvenstveno, ja imaju tendenciju da koriste dvije stvari. Koristim stvarne dev samih alata, koji imaju mrežni stog pečena u njih. Dopustite mi da vam pokazati početnu stranicu Windows. Ja mogu donijeti ovaj gore, i tu je zapravo mreža proxy pečena u tih alata ovdje. Dakle, ja to mogu, ja mogu osvježiti stranicu, i to će mi pokazati sve interakcije, uključujući AJAX poziva na toj sjednici, za vrijeme trajanja tog zahtjeva je. Ovo je korisno. To će biti vrlo korisno za aplikacije browser-based. Za ostale vrste aplikacija, uključujući Windows Store aplikacije, Ja koristiti alat zvan Fiddler. Ti ćeš dobiti igru ​​u odgovoru. [Nasmijao] Fiddler je jednostavan proxy. Mislim da mogu pokazati da su na vas. To je samo GetFiddler.com, koji, zanimljivo, ja sam prateći moj mrežni stog će GetFiddler. No, u svakom slučaju, Fiddler je napisao jedan od premijerima na IE tima, tako da on zna što radi. To je dobar pokazatelj da se može koristiti za ispravljanje pogrešaka mrežnog prometa. Ja bih preporučio da. Pitanje tamo previše. 

[Student] Da li postoji jednostavan način da se integriraju ulaz stranog jezika, kao što je japanski ili kineski, u Windows aplikacije? Ne mogu reći da sam učinio previše toga osobno, ali to je pečen u. Postoje mogućnosti za naravno emitira svoj zahtjev - Žao mi je, ja nisam rekao na pitanje - opcije oko globalizacije, lokalizacija sadržaja, uključujući i stvari kao što su se mogli prodavati u različitim tržištima i ciljati tu verziju svog zahtjeva za tih pojedinih jezika ili kultura ili slične stvari. Apsolutno izgrađen u. Mi smo imali podršku za to za zauvijek, i da nosi naprijed u svoje mogućnosti za Windows Store. To možete učiniti u samoj trgovini, prodavati u različitim tržištima, što možete učiniti da se u zahtjevu, kao i previše s korištenjem resursa definirati, "Ako sam razvio za tu kulturu, a zatim koristiti ove nadjačava za moj tekstualnog sadržaja "Ili koristiti pravo na lijevo čitatelja." Oni su svi dio zadane WinJS i WinRT API. Dobro pitanje. 

Kako stojimo? Još netko? A ako netko na videu ima pitanja, ja sam cbowen @ microsoft, Tako sam sretan da se bilo koji od vaših pitanja iz budućnosti. Vrlo - Od budućnosti, budući [oponaša jeka]. Dakle, ovdje sam ja. Dopustite mi vratiti moj kontakt ovdje. Dakle, samo mi poslati na znanje, cbowen @ Microsoft, i ja ću se vratiti k vama čim budem mogao. 

Sve ostalo što se pitate? Jesmo li dobro? Velika. U redu. Hvala vam svima zahvaliti. Ja ga cijenim. [Aplauz] 

[CS50.TV]