[Powered by Google Translate] [Seminář - Windows 8 - App / vývoj her s HTML5]
[Chris Bowen, Edwin Guarin - Harvard University]
[To je CS50. - CS50.TV]
>> Ahoj, všichni. Jmenuji se Edwin Guarin. To je Chris Bowen.
Nechám ho představit sám sebe ve vteřině.
Já jen chci, aby se rychle oznámení.
Za prvé, všechno, co CS50 studentům získat Windows 8 zdarma.
Takže pokud uvažujete o skutečně používat jej pro svůj konečný projekt, je to tvoje.
Nate se odeslat e-mail později na pokyny.
Druhá věc je, pokud se rozhodnete napsat Windows 8 aplikace pro váš CS50 závěrečný projekt,
budeme dělat nějaké dárky: Xbox,
bychom mohli dát břidlici pryč, věci, jako že.
Takže pokud je tu něco drží zpátky, nechal Chris a já vím,
Jak vám můžeme pomoci postavit něco opravdu cool.
Takže ještě jednou díky za přichází dnes, a já ji předal Chris.
>> Děkuji, Edwin.
Díky všem za nás spojování dnes.
Jsem Chris Bowen. Jsem jeden z kolegů Edwin je tady na severovýchodě.
Jen jsem chtěl strávit trochu času s tebou mluvit o
jak vytvořit aplikace Windows Store s HTML5, JavaScript a CSS
a trochu si jakékoliv dotazy můžete mít o něm zodpovězeny pro vás
jak se díváte směrem přemýšlet o tom, možná používat pro CS50 finále příležitost.
>> To znamená, že budeme jen ponořit dovnitř
Půjdu se k sklíčka sem.
Pokud máte jakékoli dotazy, neváhejte a pošlete mi e-mail.
Jsem cbowen@microsoft.com, a tam je můj blog a můj Twitter.
Si však chcete dostat do kontaktu se mnou, to je v pořádku.
Mám o hodinu věci, a chci se dostat na vaše dotazy v cestě,
takže se nemusíte stydět o tom mít otázky v průběhu této.
Nemohou vidět, kdo se ptá na otázky týkající se záznamu,
takže budete mít tak anonymní, jak chcete být.
>> Dovolte mi, abych ponořit přímo, jen dát rychlý úvod do Windows 8,
a ukázat vám některé z věcí, o Windows Store aplikace, které byste mohli zvážit
jak si myslíte o vývoji aplikace.
Díváme se na Windows 8. Byli jsme se na pár týdnů.
Hodně silný přijetí tam již.
Možná jste viděli již na povrchu stroje, které máme stejně.
Je tu ještě jedna tady vlastně můžeš podívat na, pokud jsi tady osobně.
Opravdu chci si s tebou promluvit, ukázat vám kolem trochu o Windows 8.
Nápad s Windows 8, je to opravdu předložit všechno, co víte o Windows
do některých nových zážitků - zejména, co chtěli na povrchu stroji s nádechem,
tento druh více mobilních zařízení, které jsou nyní na trhu,
ale je to také Windows v jeho jádru.
Takže to znamená, že jej můžete nainstalovat opravdu na cokoliv, co běží Windows 7,
od svého největšího triple SLI herní plošinu dolů k notebooku
a zbrusu novou jiných zařízení, která můžete vyzvednout dnes.
Ty poběží Windows 8.
Ukážu vám asi jen trochu,
a všechny zkušenosti, které uvidíte, jsou zde věci, které můžete vytvořit.
Myšlenka je, zda je to dotek, myš, klávesnice,
bez ohledu na zařízení, které jste spuštění aplikace na, bude to běží skvěle.
Windows 8 vám pomůže se všemi těmito scénáři.
>> Stranou Tyto skluzavky, prostě dostanete přímo na to podívat tady.
Dovolte mi ukázat vám kolem domovské obrazovce. To je moje obrazovka Start.
Budu jen vám trochu turné zde.
Jsem na bezdotykové přístroje, aby stejně jako já chci dotknout mého notebooku displej,
to nebude dělat vůbec nic, tak jsem si jen vyberte tu trochu a ukázat vám.
Některé věci si můžete všimnout, je skutečnost, že se jedná, co se nazývá živé dlaždice
ve skutečnosti můžete animovat, a mohou poskytnout informace pro vás -
možná aktualizace na statistiky na hru
nebo ukážu zprávy z některé z dřívějších aplikací, které jsou zde na levé straně.
Tam jdeme. Jsem si jistý, že je to jen pozitivní a fantasticky skvělá zpráva.
Si můžete prohlédnout zde je to opravdu volá svou pozornost zpět do aplikace, řka:
"Hele, je tu něco nového zde. Podívejte se. Vrať se a zjistit, co je nového u tebe."
Tomu se říká živé dlaždice, a co můžete udělat oznámení
buď přímo od samotné aplikace
nebo pokud se podíváte podrobněji, zjistíte, jak napsat vzdálené služby
, které mohou skutečně přenosu informací na dlaždice,
což je to, co se děje s těmito zprávami aplikace.
Jsou to vlastně dostat zprávy z oblaku a aktualizaci dlaždice tady
aby lidé věděli, že je to důvod, proč otevřít aplikaci a podívat se
na co nejnovější zprávy je v každém z nich
nebo v případě, že je nové recepty, nebo nové vysoké skóre porazit
nebo přítel hraní nebo cokoliv na těchto žádostí.
Je to něco, co vás lákat zpět dovnitř
Tak to je živé dlaždice, a mohlo by to být člověk, může to být webové stránky, stejně.
Obvykle je to aplikace.
>> Skoro všechny tyto věci, které jsem sem přišel z Windows Store. Budu spustit to.
Je to jedna z aplikací, které vám ve výchozím nastavení
na každém počítači, který je spuštěn Windows 8.
Můžete sem najít něco, co byste chtěli,
z věcí, které jsou zvýrazněny, aby hry, které jsem ještě neviděl.
Oh, wow, máme nový pinball zde.
Můžete nainstalovat ty tady z obchodu,
a promluvíme si o tom, jak rozvíjet tyto.
Máte spoustu možností, jak si je vytvořit.
Budeme zaměřit se na příběhu JavaScript s HTML a CSS,
ale pro uživatele, aby kupujícímu aplikace, nezáleží na tom, co to bylo psáno palců
Mohou pokračovat a pracovat s ním.
Jsem překvapený tímto jeden, takže musím otevřít toto nahoru a podívat se.
Každá aplikace, včetně těch, které si můžete podat a prodat, nebo dát zadarmo,
co chcete dělat v obchodě, získáte domovskou stránku, jako je tento.
Můžete odeslat s vaší žádosti banda snímků obrazovky - můžete vidět některé zde -
Podrobnosti o aplikaci, a časem budete hromadit obě hodnocení -
jsou to v podstatě jen hvězdičky - a hodnocení,
které poskytují trochu větší vhled.
Vlastně, někdo musí něco psát a řeknu vám, jak úžasné jste,
a že půjde do svého Recenze části sem, který jsem se podíval na.
Fantastic. "Nebude ani otevřít." Jak velký.
No, pro lidi, pro které to udělal otevřený a běh, ale zdá se, že opravdu si to. [Směje se]
Mějte to na paměti. Internet. Každý může říct, co chtějí o vaší žádosti.
Takže ujistěte se, že děláte skvělou práci s ním,
ujistěte se, že budete dělat to tak pohodlné pro uživatele, jak můžete
proto, že jsou pár kliknutí od poskytování hodnocení,
a že se hromadí až do celkové přezkoumání hodnocení.
A chcete to nejlepší, protože budete mít proti jiným aplikacím.
Tam budou tisíce aplikací již v obchodě,
a je velká šance, že může být něco, co dělá podobné funkce s tím, co děláte.
Takže pokud jste si opravdu vyčnívat z davu, že se to být vaše výhoda, samozřejmě.
>> Dostaneme se do obchodu trochu později.
Opravdu se chci zaměřit na vytváření aplikací.
Ale krátká verze obchodu je celosvětově distribuce,
je automaticky součástí systému Windows 8, lidé prostě vyhodit ho a podívat se na různé aplikace zde,
Máte Dress-Up Sticker Book a všechny druhy různých aplikací.
Fresh Paint, já používám to hodně - špatně, ale já používám to hodně.
Je to ukazuje mi, že už ji vlastní.
Dovolte mi, abych vám ukázat něco, co nemají - UVideos nemám jako zbrusu nové.
Vidíte, tady je to zdarma, takže si jej můžete nainstalovat přímo ze skladu.
Máte možnosti taky. Můžete si samozřejmě dát pryč.
Můžete dát reklamu v aplikaci nebo hru.
Můžete se také poplatek za to, a můžete velmi snadno poskytnout soud pro použití, jakož
takže si můžete nechat lidi si to vyzkoušet po dobu jednoho týdne, nebo co chcete dělat.
To je jen přizpůsobitelné přes portál. Nemusíte psát žádný kód, který.
Takže říkáte, "můžete použít po dobu jednoho týdne, a pak máte koupit,"
nebo byste mohli dělat věci jako: "Ty by mohly hrát první tři úrovně této hry
"A pak jste se dostal ke koupi přístup k odpočinku."
Dalo by se dokonce udělat in-app nákupy, stejně tak můžete říct,
"Máme další dobrodružství nebo sady grafiky nebo věci, které jsou odemčené -
"Další recepty, které jsou odemčené -. Pokud si koupíte tyto rozšířené sady"
A můžete to udělat vše v rámci aplikace nebo hry samotné.
Takže, zcela na vás, vaše volba.
Je tu spousta věcí, které můžete udělat v obchodě,
a pak v podstatě jste předložením certifikační kanálu.
Můžeme mluvit jen o tom trochu později, ale to je cíl.
Chcete-li dostat app po celém světě viditelnost v obchodě zde.
>> Zpět na úvodní obrazovce tady, rád bych vám ukázat, asi trochu víc.
Mám-li spustit tyto aplikace, dovolte mi, abych vám příklad některých funkcí cross-app zde.
K tomu, že budu spustit čerstvou barvou.
Jedna věc, kterou uvidíte, je zde každý jednotlivý bit obrazovky,
všechny pixely na obrazovce, přejděte na aplikaci.
Pryč jsou dny, kdy budete muset tyto hranice kolem oken
se spoustou tlačítek, které jsou vždy tam zabírají místo po celou dobu.
Nyní si opravdu chcete dostat pryč od toho a jen váš obsah bude zaměření.
Můžeme dělat věci s Windows přístupem jiných druhů menu.
Jedním z nich je vlastně to, co se nazývá kouzlo bar,
a vychází z části obrazovky.
Můžete si skutečně šlehat ze strany pokud máte dotykovou obrazovku,
můžete pravým tlačítkem myši, pokud máte myš, tam je klávesová zkratka pro to,
tam je vždy více než jeden způsob, jak to udělat něco pro životní prostředí zde.
To přináší řadu věcí, které můžete udělat.
Nejviditelnější je můžete vrátit na úvodní obrazovku,
ale ostatní 4 jsou tím, co se říká kouzlo.
Jsou to smlouvy, které můžete zapojit do jako app developer. Jsou to docela v pohodě.
Vyhledávání, jsem si jistý, že je to něco, co se chystáte udělat,
sdílení já vám ukážu, ve chvíli,
a zařízení a nastavení, to všechno jsou věci, které vaše aplikace můžete zapojit do
využít systému Windows, říkat, "já jsem udělal svůj díl
"A já chci Windows podporovat některé další funkce,
"A já nechci psát spoustu kódu, aby se to stalo."
To je opravdu výhoda použití těchto funkcí.
Dovolte mi, abych vám ukázat jeden.
K tomu, že budu dělat nový obraz.
Také jsem mluvil o použití každý pixel pro vaši aplikaci.
Ve výchozím nastavení je to, co barva aplikace vypadá, když budete používat.
Je to opravdu jen o tom, co kreslíte, váš obsah.
Nemohl jsem dělat hrozné věci tady. Co mám nakreslit? Nevím.
Čmáranice? Oh, skvělé. Můžu dělat klikyháky. Fantastic.
Krůtí? [Směje se]
To je nejvíce abstraktní krůtí uvidíte.
I může také přinést to, co se nazývá app bar,
a to je opravdu jeden z klíčových způsobů, které můžete použít
schovat všechny věci, které by byly na aplikaci nebo hru před
jen zabírají místo po celou dobu.
Takže teď si můžete dát to tady, a to je opravdu jeden z více krásných zážitků
s app baru, který jsem viděl.
Dejte volby zde pro výběr různé barvy.
Chtěli jsme krocana, tak dáme nějaký hnědý zde, spusťte míchání během několika barvách.
Budeme odměřit barvu tady a pak se vrátit sem.
Můžete začít kreslit. Tady je váš krocan. Fantastic.
Nemůžu kreslit začít, ale to s touchpadem před publikem je ještě lepší.
To je úžasné.
Myšlenka, i když je vše, co mě zajímá je tady na povrchu.
Řekněme, že jsem tak spokojen s tím, že mám o něj podělit s někým.
Za normálních okolností to, co by udělal s jinými verzemi systému Windows,
byste možná pořídit snímek obrazovky, měli byste udělat nějaké copy-paste vašeho textu
nebo podobné věci, které chcete sdílet se,
a pak jít a otevřít jinou aplikaci a dát ji do něj.
Zde nemusíte dělat, že.
Můžete si skutečně, aby se na kouzlu baru a říká: "Chci se podělit o to."
V tomto bodě to vám ukážu všechny aplikace
že vědí, jak pracovat s tím, co je sdílena.
V tomto případě je to obraz, tak to bude říkat: "Vidím, že máš obraz."
"Chceš se podělit, že?" Můžete vidět, jsem e-mail sám věci po celou dobu.
Uznává se, že i mě to nabízí, že jako zástupce,
ale to mi také ukazuje každou aplikaci, která ví, jak se vypořádat s pořízením snímku
a něco s ním.
Ty všechny je uvedeno na Windows, které mohou dělat, že.
Na tomto místě je Windows.
Uživatel pouze vybere to, co chtějí dělat s ním.
Budu dělat moje obvyklá PuzzleTouch. Můžete vidět, co jsem stvořil všechny druhy hádanek v průběhu času.
Vezmu PuzzleTouch a říct, "Chci sdílet tento úžasný stvoření s PuzzleTouch."
Je to jít dál a říct, "Skvělé. Chceš se podělit? Vynikající."
"Chcete, aby se o puzzle, které je snadné, střední, co?"
Udělám prostřední jej zde.
To je puzzle. Je to bude hrozný puzzle, protože je to většinou prázdný.
Ale je to hotový, a je to vlastně zpět do jiné aplikace.
Kdybych sem ven, mohu hledat pro ni a spusťte jej.
Nyní, když jsme se procházet po jen trochu tady, bychom měli vidět mou tvorbu někde.
Kde jsem jít? Jaký druh puzzle jsem udělat? Řekl jsem, aby to snadné?
Tady to je, tady.
[Smích] Je to snadno rozpoznatelné krůtí puzzle, které je tady.
Ale věc, kterou chci poukázat na to, super věc zde
je, že aplikace nevěděl nic o sobě.
Oni jen řekl: "Já jsem dostal snímek, který chcete sdílet, a já vím, jak se vypořádat s obrázky."
A jako vývojář, nemusíte psát, že kód.
Když se mě někdo zeptá, sdílet, jdu dát nějaké údaje do této malé datové struktury
a já jsem udělal.
Další aplikace převezme, dělá svou věc, a to je konec sdílení zkušeností.
To je jen jedna věc, kterou můžete udělat - opravdu, ale opravdu silný -
a to bude jedna z těch věcí, které by mohly skutečně pomoci odlišit vaši aplikaci
a také vaše hra příliš v obchodě.
Lidé budou moci říci: "To je opravdu užitečné."
"Používám tuto hádanku Creator po celou dobu. To je fantastické."
>> To je dost o stručného přehledu o tom, co se tady děje.
Je tu pár dalších funkcí také, že možná budeme zdůraznit, jak jsme se projít kódu.
Ale chci se ponořit do snímků, a to, že budu chodit na plochu,
, který je sám o sobě další živé dlaždice zde.
Můžu jít do toho a opravdu, jsem na svých snímcích,
ale dovolte mi ukázat vám, vlastně tam, kde jsme.
Jsme vlastně v režimu Desktop.
To je opravdu, kde to, co jsem říkal předtím, než o Windows převod
nových zkušeností ukazuje sám.
Jedná se o Windows víte.
Windows aplikace se nazývají desktop aplikace. Vedou zde.
Máte-li stávající aplikace a chcete jim běžet na Windows 8,
můžete absolutně udělat.
Nejedná se o stejné věci jako úložiště aplikací, které jsou tady,
jako Fresh Paint a těchto aplikací a podobné věci NBC News. Ti, kteří přijdou z obchodu.
Mohou se zapojit do některé z funkcí, které jsem ukáže vám,
a další, které jsem ti zobrazeny jen zatím.
Ale jen mějte na paměti, že. Máme podporu pro obě tyto věci stejně.
Je mi to líto. Je něco, co není zobrazeno na obrazovce? Ztratil jsem ho úplně. To je zvláštní.
Dobře. Díky za ukázal, že se.
Co jste nebyli vidět za chvíli je můj ukazuje, že desktop je tady.
Co je poslední věc, kterou jsi viděl? Viděli jste to?
To je desktop. Vy už víte, jak to vypadá.
Není to nic strašně neobvyklého.
Je to naše účetní, že zkušenosti vpřed pro vás a umožní vám používat věci, které jste měli.
Například, budu vám ukazovat Visual Studio. To je desktopová aplikace.
Bude to běh v tomto režimu.
Bude podporovat složitější prostředí
se spoustou možností a podobné věci, takže je to dobrá volba jako desktop aplikace.
>> To znamená, že, pojďme se skluzavkami pro jen trochu
a dá vám nějaké úvodní obsah a pak se dostat do skutečně tady kódování.
Dobrou zprávou je, že jsem slyšel, že jste se zaměřit na mnoha CSS a JavaScriptu, HTML.
Všechny ty věci, které jste se učí nést přímo do výroby Windows Store aplikace.
Věci, které jste slyšeli o s použitím CSS selektory a všechny ty věci,
je přesně to, co udělat pro to, vytvořit aplikaci zde pro úložiště.
Půjdeme přes tyto věci, kousek po kousku.
V podstatě, já stavím na věci, které jste už vzali čas se učit.
To je celkový graf z technologií, které byste mohli použít
aby aplikace pro Windows 8.
Věci na pravé straně, desktopových aplikací, je opravdu to, co už víme.
To je věc, která je opravdu Windows 7 svět převedený do Windows 8.
Všechny tyto možnosti převést: C #, VB, Win32 druh vývoje.
Skvělé. V pořádku. Nový materiál je na levé straně.
To je Windows Store aplikace, to je, když chci, aby se moje žádost zapojen do Windows 8
s využitím všech těchto funkcí, dostat ji do obchodu, a získat opravdu cool zážitek
z aplikací Windows Store.
K tomu si můžete prohlédnout zde máš všechny své možnosti s XAML, C + +,
C #, VB, jsi to mohl udělat DirectX, takové věci, věci, které jdou nad rámec snímku.
Ale pro nás, budeme se soustředit přímo na skutečnost, že HTML, CSS a JavaScript
jsou opravdu prvotřídní občan pro vytváření aplikací pro systém Windows 8.
a pro Windows Store.
Tak to je dobré pro každého zde a lidé sledovali na videu
protože můžete prostě využít všechny ty zkušenosti, které máte
a opravdu svázat do toho, co Windows nabízí.
Budeš k tomu, že přes sadu rozhraní API, které by měly být žádným překvapením.
Každý OS má své vlastní API.
My odhalit, co Windows může dělat přes to, co se nazývá WinRT.
Je to sada rozhraní API, která jen dělá všechno pro Vás.
Pokud potřebujete otevřít soubory, musíte použít fotoaparát, Geolocation, takové věci,
jdou přes to, co Windows může nabídnout.
Pro přístup se, že máme trochu víc JavaScript, co se děje, aby to ještě jednodušší
pro vás udělat, že. Dostaneme se k tomu za chvíli.
Ale teď, to je v podstatě váš plán.
Věci, které jste již dělali na vrcholu některých API
které vám pomohou pracovat s Windows rovná app store.
A to je opravdu o vše, co musíte vědět, z vysoké úrovni.
>> Budeme se ponořit do skutečnosti pracovat s věcí nyní.
Věci, které jste pravděpodobně již viděli spoustu,
s IE9 chvíli zpět jsme zavedli podporu pro mnoho, v té době,
novější standardy webu, takže mnoho nových vlastností CSS,
mnoho nových HTML, ECMAScript 5, který je opravdu JavaScript.
Takže všechno pro to, s výjimkou přísném režimu byl v IE9.
Jen tuny věcí s CSS, CSS3, všichni tam.
A tohle všechno navazuje na to, co děláme s Windows 8.
Můžete použít tyto věci, a můžete použít vše, co je nového v IE10.
S IE10 jsme zavedli podporu pro všechny tyto věci stejně.
Jsou to všechno hardwarovou akcelerací, takže pokud jste na počítači, který má nějaký GPU,
což je asi skoro každý stroj, který jste mohli získat v posledních 8 let,
budete mít možnost hardwarově akcelerované výstup,
vizuální výstup s CSS, Canvas, SVG.
Všechny tyto věci se projít hardwarovou akcelerací
a být tak mnohem rychlejší a efektivnější.
Krátká verze toho všeho - Nepůjdu projít každou věc zde -
pokud ho vidíte na tomto seznamu, pokud můžete to udělat v IE10,
pokud je to webová aplikace, která vedete, který pracuje v IE10,
je to něco, co můžete udělat jako aplikace Windows Store.
A to je docela hodně to. Takže pokud to funguje v IE10, že to bude fungovat jako aplikace Windows Store.
Je to na stole jako něco, co byste mohli použít.
>> Je tu spousta zde. Nemáme až do půlnoci, takže nemohu zkontrolovat všechno tady.
Ale tam jsou některé stránky, které vám pomohou pochopit, co tyto věci můžete dělat,
a já vám ukážu jeden z nich ve vteřině.
Jen jsem chtěl poukázat na některé z klíčových věcí, které byste mohli podívat.
Možná jste již viděli některé z nich ve svých studiích,
ale ty jsou velmi užitečné, a to zejména s Windows Store aplikace, ze CSS strany.
Tak budou moci udělat transformace a přechody, poskytují pohybu s animací -
To vše jsou součástí CSS teď, a všechny jsou podporovány moderní prohlížeče,
a IE10 a IE9 přidali podporu v průběhu času na všech těchto věcech.
A tak proč psát sami, proč jít přes všechny potíže dělat tyto věci po ruce
když můžete použít jednoduchý CSS transformace vytvořit 3D efekt pro vaši aplikaci?
Skvělé. To je, jak to funguje.
Nemůžu dělat nic víc těžší než to.
Pokud víte, jak to udělat v CSS, víte, jak to udělat v aplikaci Windows Store.
>> Nad rámec, který pro rozvržení, věci, jako je i na app store,
ale nad rámec, při pohledu na možná tiskové aplikace, která se ukazuje vám články
nebo recepty nebo věci, jako je to, že tyto jiné druhy vlastností v CSS jsou opravdu užitečné:
Grid, Flexbox, CSS oblasti je spíše poměrně nový standard stejně.
Tyto věci jsou všichni ti pomůže vyložit obsah a tok obsahu mezi úseky,
být schopni to udělat stránkování a dělení slov, aniž byste museli psát věci sami.
Stačí říct: "Prosím, proveďte následující kroky pro mě,"
a jako obrazovka nemovitostí se liší na různých strojích
nebo jak uvidíte za chvíli, jak jste snap aplikace
mají menší množství prostoru na obrazovce, to není žádný problém pro CSS.
Je možné využít - Budeme mluvit o tom, dotazy médií na druhý -
to může postarat se o věci s přemístěním obsah, tekoucí obsah z regionů
právě s těmito věcmi, které jste již viděli u webové technologie.
>> Na straně HTML5, jsou zde i spoustu věcí,
že bude velmi užitečné pro vás s Windows Store aplikace.
Opět platí, že nebudeme procházet všechny z nich, ale jsou to jen tady.
Takže pokud budete muset použít, audio-video, pokud chcete udělat ověření z forem,
Geolocation, všechny ty věci, které můžete udělat v JavaScriptu pomocí JavaScriptu 5 nebo ECMAScript 5,
IndexedDB pro místní úložiště - to všechno jsou možnosti pro vás.
Pokud hledáte odpověď, stačí se podívat na stávajících technologiích s HTML5 a CSS
a zjistíte, jednodušší odpovědi, než by museli vrátit hodně té věci sám.
Dovolte mi ukázat vám kolem trochu zde.
Mám stránky můžeme jít.
Dovolte mi, abych přestal z tohoto snímku na druhý.
>> Pokud bychom vyšli IETestDrive.com,
Nebudu dělat hodně demo zde.
IETestDrive.com opravdu vám ukazuje hodně o tom, co je nového s IE10,
věci, které můžete udělat.
Zjistil jsem, je to opravdu užitečné, protože místo čtení přes spoustu bílých papírů,
podívejte se na několik ukázek, a to se děje, které vám pomohou dát na svůj vlastní osobní radaru
o tom, zda technologie smysl ještě dělat žádné další výzkum s
takže si budete rozumět, "vidím, co to je za."
"Chápu, co Dotaz Animace Frame dělá pro mě."
"Chápu, jak bych mohl použít regionů nebo SVG filtrů."
Můžete vidět v akci, je vidět na příkladu zde,
a sami rozhodnout, jestli to bude užitečné pro vás ve vašich vlastních projektů a za
jak si i nadále spolupracovat s webové technologie.
Zde bych jen povzbudit, abyste se podívat.
Nemyslím si, že budu trávit hodně času ve skutečnosti běží to.
Máme dost ukázat se psaní kódu.
Uvidíte zde věci z dotykových efektů do hry dotek založené na tomto úseku,
animace, opravdu rychle hardwarově akcelerované tam animace,
některé optimalizace, které uvidíte v některé z těchto vzorků stejně,
a tam je mnoho, mnoho dalších.
Vydáte-li se sem a otevřít mapu stránek,
je to prostě směšné počet vzorků zde.
Všechny si můžete prohlédnout zde.
Pokud jste při pohledu na něco, nebo jste slyšeli o něčem
a přemýšlíte, možná by to bylo něco, co v pohodě použít v aplikaci,
zkuste se podívat sem, a je to asi docela dobrý demo pro to, aby ušetřit nějaký čas.
>> Jo? Jakékoliv dotazy zatím pro lidi tady?
Dobře. Budeme pokračovat zde.
Opět, stačí si, že ven.
Jsou to webové standardy, tak jděte na jakékoli jiné ukázkových stránek, které znáte z
a zjistit, zda tyto technologie smysl pro to, co se snažíte udělat.
>> Zálohování na diapozitivy.
To znamená, že se stěhujete z webového světa opravdu nainstalované lokální aplikace světě,
takže tam jsou některé věci, poukázat zde.
Za prvé, neexistuje žádný web server se zde jedná.
Není Apache, není IIS běží zde
servírují stránky do vzdáleného klienta ke vzdálenému prohlížeče agenta.
V tomto případě je opravdu vše, co je v balení pro vás.
Ty tvrdí, že jako aplikace do obchodu, dostane osvědčení,
je to v obchodě, a pak lidé po tisících se nainstalovat hru nebo vaše aplikace.
Ale v podstatě, oni tahem dolů lokálně na svém počítači.
Není třeba jít ven na webu už pokud máte volání, které potřebují vzdálené API,
a to je naprosto normální, stejně příliš.
Ale oni to nebude v tomto režimu, kdy mají jít požadavek odpověď ze serveru
dostat na další stránku jejich obsah.
Tak to znamená, že tam je několik rozdílů menších API. Jedná se o neuvěřitelně malá.
Jsou nepravděpodobné, že by vás zasáhnout do normálního kódování, ale jsou alespoň dokumentován.
Jsou trochu hrana případy tam.
>> Další věc, kterou stojí za to zdůraznit, je, že rozdíly důvěryhodnosti.
Pouze Zmiňuji se o tom proto, že chci, aby se ujistil, že jsem, že to
takže pokud se dostanete do něj později, budete přemýšlet, "řekl Chris něco o tom,
"Takže možná, jo, jo," a pak se vrátit zpět a zjistit, co to bylo.
Kontexty nezáleží.
Ve výchozím nastavení se snažíme chránit uživatele z vektorů útoku.
Jsou určité věci, které můžete udělat ve výchozím nastavení
a některé věci, které je třeba změnit kontext povolit.
Jak používáte některé knihovny venku - Tys už pracují s jQuery,
ale když se podíváte na ostatní knihovny tam - můžete používat některé funkce
že druh přesahuje místní použití, se více dynamické interakce
Požadavky XHR, takové věci.
Někdy můžete najít ty, bude ve výchozím nastavení zakázána,
a v tomto případě, jen to hledání, podívejte se na místní a webové kontextu,
a zjistíte, jak to opravit.
Jen ujistěte se, že víte o tom, jak začnete používat jiné rámce,
které bych měl zmínit, že jste dokonale schopni udělat.
Takže pokud zjistíte, že nějaký jiný rámec - Budeme o tom mluvit v druhé -
pro hraní her a chcete používat, že chcete použít nějaký ovládací knihovny, které jsou tam
a nechcete psát takové věci sami - je to dobrý nápad, ne? -
můžete absolutně použít tohle.
Neexistuje nic, co drží zpátky od použití jakékoli knihovny, který je založený na JavaScriptu,
CSS, HTML5.
Opět platí, že pokud je to něco, co můžete udělat, IE10, což je sakra hodně v těchto dnech,
můžete to udělat.
Vytáhněte ji do vaší aplikace, reference, které knihovna JavaScript, a použít jej v aplikaci,
jen udržet v paměti, které by vás mohly zasáhnout bezpečnostní kontext jednou za čas - ne moc často.
>> A pak funkce, půjdeme přes několik dalších z těch, co to je.
UX budete trochu zvyknout, jak vidíte, stále více a více aplikací,
z Windows Store.
Můžete získat pocit, pro to, jak fungují a jak estetický design inklinuje k práci
napříč různými aplikacemi a to, co lidé budou použity k prožívání.
To je opravdu důležitá část.
Ujistěte se, že když se oheň do své aplikace, které nepotřebujete číst manuál,
které nikdy dělat, mimochodem.
Měly by být jen mohli začít hrát s aplikací
a přijít na to bez větších obtíží.
Pokud se budete držet a držet se mnoho z těchto postupů,
budete dělat svým uživatelům velkou laskavost, by to jednodušší.
>> Dobře. Jedna poslední věc, na straně API a pak se dostaneme do skutečnosti psaní kódu.
WinJS je to, že věc, kterou jsem zmínil velmi stručně s tímto komplexním skluzavkou
se všemi těmi různých možností, které máte k podání žádosti.
WinJS, můžete si ji představit jako kamaráda.
Je to váš přítel, které vám pomohou psát věci mnohem rychleji.
Je to jen JavaScript a CSS. Nemusíte ji používat. Můžete ji použít.
Pokud budete volat do funkcí systému Windows, budete nakonec používat to,
ale v případě, že je takové věci některých návrhových vzorů nebo ovládacích prvků, které si opravdu nechcete používat,
Chcete-li použít něco jiného, ​​je to jen na vás.
Rozhodněte se, co chcete použít a styly, které chcete použít.
Funkce z namespacing a třídy generace - záleží na vás.
Pokud dáváte přednost jedno nebo druhé, je to zcela na vás. Je to stále JavaScript a CSS.
Ale bude to, které vám pomohou udělat spoustu věcí.
Například, tady je podmnožinou toho, co to může udělat,
věci, jako je pomoc asynchronní programování sliby.
Každý z vás slyšel nebo pracoval s Node.js?
Je to obyčejný vzor pro práci s asynchronním programováním.
Takže v podstatě to, co říkáš je, "Jdi dělat něco,
"A budete mi dát slib, že budete vrátit ke mně, když budete hotovi."
To je v podstatě to, co se děje.
Takže nemusíte mrznout vaší žádosti, zatímco uživatel se děje a vyzvednutí soubor
nebo něco, co je tekly z webu.
UI zůstává citlivý.
A můžete to udělat pomocí asynchronní programování.
Zní to směšně složité, ale je to opravdu snadné, protože budete používat sliby
a to právě řekl: "Jdi to udělat, a když budete hotovi, zavolejte do této metody."
To je docela hodně to. To je vše postaveno do WinJS.
Bude to dělat to mnohem jednodušší napsat opravdu flexibilní a výkonné aplikace.
>> Můžete vidět zbytek tady, spoustu animací.
Pravděpodobně jeden z více důležitých věcí na tomto snímku jsou ovládací prvky.
Myslím, že mám jeden celek - jo, já.
Zde je příklad jen některé z prvků, které můžete použít ve svých aplikacích.
To vše je rovně nahoru od WinJS.
Nejste psaní těchto sami,
stačí říct, "Tady je návod, jak chci skládat mé žádosti."
"Budu používat zobrazení fanda, takže můžu jít mezi různými obrazy."
I neprokázaly vám sémantické zoom. Já ti to ukázat ve vteřině.
ListViews. K dispozici je GridViews.
Už jste viděli mřížku jako součást žádosti o obchodu,
tak budou moci používat bloky obsahu a posouvání přes to.
Plovoucím menu uvidíte čas od času.
Aplikace bar ukázal jsem vám, že Fresh Paint aplikace stejně,
aby jste viděli, jak si můžete přizpůsobit, že tím, že tlačítka na něj
a mající že schovat, když vás nezajímá použít to.
To je opravdu zcela na vás použít.
To jsou všechny ovládací prvky, které jsou součástí WinJS.
Já vám ukážu, jak udělat to pár sekund, ale tam je víc, než jen to,
a hlavní věc je použít, pokud chcete, ušetřit čas.
>> Máte-li další kontrolní knihovny, které byste chtěli používat, je to naprosto v pořádku taky.
Věci jako jQuery UI dělat spoustu tohoto druhu myšlenky stejně,
poskytuje další ovládací prvky, které přesahují to, co můžete udělat v HTML a JavaScript.
Pojďme se ponořit dovnitř jsem již řekl, že. Použít to, co byste chtěli.
Jen mějte na paměti, že byste mohli narazit na některých kontextových otázek.
Ale můžete samozřejmě kombinovat bez ohledu na druh knihoven vám vyhovuje,
Chcete-li se dozvědět, který chcete použít, ušetřit nějaký čas.
>> Pojďme mluvit o nástroje, jen na vteřinu.
Můžete se dostat to, co potřebujete začít pracovat s Windows Store aplikace.
Mám-li se vrátit ven, mám příliš mnoho věcí tady.
Vydáte-li se na tuto stránku, která je dev.windows.com,
Zde si můžete stáhnout vše, co potřebujete.
Jak studenti, máte přístup k více než široká veřejnost dělá,
takže se můžete dostat vyšší-end verze Visual Studio.
Edwin zmínil už můžete získat Windows stejně.
Ale obecně, pro všechny vývojáře, můžete jít na tuto stránku
a stahovat vše, co potřebujete pro podání žádosti, a to vše zdarma.
Takže tam je bezplatná verze Visual Studio,
tam jsou některé nástroje, které se bude instalovat vedle toho -
vše, co potřebujete k vytvoření a testování aplikace.
Je to pouze tehdy, když budete publikovat své aplikace do obchodu
které budete potřebovat pro vývojáře účet.
To také věřím, že je zdarma. Je to zdarma pro studenty stejně? >> [Guarin] Který z nich?
Developer účet, skutečný podání. >> [Guarin] Ano.
To je další dobrá zpráva.
Půjdete se podívat na tohle.
Je to řeknu pro jednotlivce ve výchozím nastavení je to 49 dolarů.
Ale nenechte zaregistrujte se, že jako student.
Seženu ti nějaké informace prostřednictvím vašich programů, které můžete získat účet zdarma,
a že vám umožní poté odeslat aplikací přímo do obchodu,
tolik, jak se vám líbí, a všechny ty dobroty budou brzy následovat.
Tak to je dev.windows.com.
Zde si můžete stáhnout nástroje, které byste mohli potřebovat odtud.
A pokud budete chtít, můžete získat zkušební verzi systému Windows zde,
ale zase nebudete muset.
>> Další stránka - dovolte mi, abych se rychle poukázat tohle pro vás - je design.windows.com.
To bylo dev.windows.com.
Design.windows.com, můžete hádat, co to je za.
Je to vlastně docela příjemné místo. Je tu spousta dobrých informací zde.
Můžete pracovat přes něj.
Bude vám nějakou radu na některých věcech
že možná jste uvažovali o před nebo musel vypořádat s dříve,
jako návrh na dotek, navrhování pro různé tvarových faktorů,
navrhování pro funkce systému Windows 8, věci, které jsem zmínil dříve
jako je vyhledávání a sdílení, některé věci, které jsem mluvil o dosud.
Všichni jsou zde uvedeny, a to je docela dobrý soubor užitečných stránek souborů
který vám pomůže pochopit, jak udělat určitý druh aplikace,
jak to udělat interakce, jak se vypořádat s UI a UX vaší aplikace.
Doporučila bych, že jste se podívat na to, zvláště pokud jste na nějakém místě
doufat, že publikovat aplikace do obchodu.
Budeš chtít vědět, jak udělat dobrou aplikaci
protože jsem se již zmínil, pokud ne, je tu tato recenze znovu.
Lidé se bude nešťastný.
Nebudou moci najít věci, které se očekávají na správných místech.
Nikdo nechce, aby se to stalo vám.
>> Pohybující se dopředu tady, dovolte mi uzavřít, že dolů.
Nyní, když víte, kde sehnat věci, ukážu vám, jak vlastně začít používat věci.
Chcete-li začít, já vlastně ukáže, zde příklad desktopových aplikací na mé obrazovce Start.
Zde si můžete prohlédnout Visual Studio, můžete vidět Blend a další vývojářské nástroje, které mám.
Mají trochu jiný dlaždice.
To je proto, že jsou desktopové aplikace,
a v těch případech, že jsou všichni chystá spustit zpátky do svého počítače
opravdu jen jako aplikace, které jste zvyklí.
Takže zkušenosti Windows, je to totéž.
Jsou to například jako Armed! nebo tyto věci. Dovolte mi zahájit jedno rychle.
Vlastně, tady je zajímavý.
Toto byl vyvinut studenty pracující ve spolupráci na NERD.
Aplikace na celou obrazovku, tyto druhy zážitků zde.
Oh, pěkné střih obrazovky a všechny druhy zábavné věci.
Oni vyvinuli tento. Můžeme také zobrazit celou věc, když už jsme u toho.
Ve skutečnosti, jsem pracoval s nimi trochu, dal jim několik rad na věci
protože oni dělali JavaScript pro jejich uplatnění.
Prosím, neberu zásluhy za jejich práci, oni dělali všechnu práci.
Jen jsem jim dal trochu rad sem a tam,
ale oni dělali nějaké velké věci pomocí předního konce JavaScript
a vázání v některých fyzikálních motorů a věcí, které udělat hodně práce.
Go. Uvidíme, jestli to funguje.
Wow, to ještě fungovalo. Dobře, dobře. Ale dostanete nápad.
Aplikace na celou obrazovku, opravdu dobré zkušenosti.
To podporuje nejen myš a pero, když mám takové věci, ale také dotknout.
Kdybych měl dotykový displej, mohl jsem čerpat na něj a pokračovat v práci s tím.
>> Jedna věc, kterou jsem neukázal, a důvod, proč jsem to přináší až
Je Chtěl jsem mít další aplikace, které vám ukáže, co můžete udělat,
můžete skutečně vzít aplikacím v systému Windows a přetáhněte je na straně obrazovky.
To se nazývá přitahování aplikace.
V tomto případě, jsem vzal Inkarus a já jsem přidal na stranu zde.
Nyní je na Snap pohledu, a to mi umožňuje dělat něco jiného a zároveň, že aplikace je zde.
Většina her, které najdete bude prostě pauzu.
To je obvykle slušná věc, kterou udělat, pokud vaše hra může nějak omezit
na tak malé rozlišení, stejně jako možná nějaké deskové hry
nebo podobné věci, které na příležitosti.
Ale obecně platí, že nejjednodušší a nejvhodnější věc pro hry
je pozastavit aplikaci.
Pro aplikace, jako je zpravodajské aplikace, když jsem spustit tento jeden, a pak snap jsem ho,
uvidíte, že ve skutečnosti výrazně mění, jak je to s údaji na vás.
Tady to ukazuje vás opravdu větší vertikální pánev, že informace,
ale já jsem stále naprosto používat aplikaci.
Takže je to stále velmi užitečné.
Skutečnost, že je to v menším zobrazení nebude držet mě od použití této aplikace. Tak si o tom myslíte.
Je to něco, co musíte mít vaše aplikace to do určité míry,
ale je to jen na vás zjistit, jak funkční, vaše aplikace by měla být
v takovém menší prostředí.
Dovolte mi, že jeden ukončit a vrátit se do, kde jsme byli tady.
>> Edwin, jste přidali fotku mě už? >> [Guarin] Jo. >> [Bowen] Podívejte se na to.
Vidíš to? Edwin přidal fotografii. [Směje se]
>> Vraťme se zpátky sem do Visual Studio. Dovolte mi zahájit za vás.
Mohl jsem kliknul na dlaždice na této obrazovce Start.
To mě přivedlo zpět do režimu Desktop, a to zahájením desktop aplikaci Visual Studio.
Jedná se o Windows, které již znají.
Můžu jít dál a vytvořit projekt zde.
Budeme se opět zaměřit na JavaScriptu, HTML.
Chystám se jít ven a vybrat až tady v JavaScriptu, Windows Store.
K dispozici je řada šablon, které můžete použít.
Pro produktivitu, doporučil bych vám podívat se na některé z nich ty ostatní zde
jako mřížku a Splitu.
Jsou to opravdu užitečné, pokud jste podání žádosti
že to bude mít takovou konstrukci a navigace. Uvidíte tyto hodně.
Ten jsem vám ukázal, byl vlastně instance aplikace Grid.
Takže pokud si myslíte, že bude dělat novinky aplikaci nebo čtečku RSS
nebo něco takového, který se zabývá více položek, pro které byste chtěli ukázat, detail,
přemýšlet o použití jednoho z těchto šablon, abyste mohli začít rychle
a přizpůsobení se odtud.
Ale jen proto, abych vám ukázat všechny pohyblivé díly zde
Chystám se vytvořit prázdnou aplikaci, a pak se půjdeme trochu hlouběji do detailů.
Já jen aby ten prázdný aplikace zde.
Bude to vytvořit celý projekt pro mě.
Otevřu si věci, které chci vám ukázat, ve výchozím nastavení.
Dovolte mi přiblížit trochu vám ukázat, co je vytvořeno pro nás.
Věci, které budete vypadat na první pohled jsou všechny pojmenované výchozí.
Takže budete hledat default.html, default.js a default.css.
Další věc, kterou zdůraznit, je, že už máme odkaz na to, co jsem se zmínil dříve.
To je WinJS. Nikdo ve skutečnosti požaduje, aby jí tento dlouhý název zde.
Je WinJS, Knihovna Windows pro JavaScript.
Pokud otevřete ji, můžete vidět, že je to všechno tady.
Je tu různé CSS soubory, tam je JavaScript.
Je to tam, aby vám pomohl ven.
Je to tam opravdu poskytnout ovládací prvky a styly a věci, které můžete jen použít automaticky.
Ale opět, je-li to, co chcete místo toho použít, pokud jde o styl a jiných kontrol,
to je zcela na vás. Ukážu vám, jak používat pár těch věcí právě teď.
>> Zpět na na naší levé straně, dovolte mi ukázat vám výchozí stránku HTML.
Už jste viděli WinJS věci, a to je opravdu všechno, co se tam děje
s těmi střední řady značek, jen přináší v CSS standardně
a přináší pár JavaScriptu souborů z WinJS.
Nemusíte být mistr, co se děje uvnitř těchto souborů.
Je to docela zajímavé podívat se na ně tak nějak zkontrolovat, co se tam děje
protože je to docela zajímavé středně pokročilé a pokročilé techniky se děje tam,
ale pěkná věc je, jak vývojáři, můžete prostě využít z nich, stačí použít
a opravdu si s tím dělat starosti.
Stále můžete řídit auto, aniž by museli vědět, jak to funguje, ne?
Tak to je to věc, která se tady děje.
K dispozici je ovládání a styly a věci, které můžete prostě jít dopředu a použití
a kód, který můžete použít do druhé, aniž by museli vědět, co tam je.
Zde jsou vaše vlastní soubory.
To jsou vaše místa, která si můžete upravit svůj vlastní CSS
a vlastní JavaScript, aby se věci válcování.
Budete přidávat jistě další soubory JavaScriptu a možná další soubory CSS
jak váš projekt roste, ale to je opravdu jen výchozí bod.
Zde je Hello, world ekvivalent HTML, takže jsme zpátky v tagu body.
Na vrcholu, mimochodem, je to HTML5 doctype,
takže poznáte, že z toho, co jste pracovali.
K dispozici je plně IntelliSense i zde, takže pokud budete dělat věci jako typ ve video tagu
a rozšířit, aby se, pravděpodobně jste se dozvěděl o tom,
, že musíte udělat záložní kódování pro video tagů v HTML5 - nebo možná budete mít -
aby bylo zajištěno, že různé prohlížeče mají podporu pro vaše video.
Máme takové věci přes HTML, přes JavaScript, přes CSS.
To je postaven v roce, a já vám ukážu, CSS ve vteřině.
Zde se můžete jít dopředu a začít změnou kód, značky.
Ve skutečnosti, než jsem cokoli změnit, budu běžet to a ukázat vám, co dostanete.
Budeš si úvodní obrazovku, která můžete přizpůsobit
a pak dostanete Hello, world zkušenosti zde. Je to fantastické, ne?
Nestyď se a loď, že jo?
Obsah jde zde. To je základní věc.
To může jen lepšit odtamtud.
Budeme pokračovat a přidat nějaké věci.
Mám trochu značky budu kopírovat sem
jen tak nemusíte sledovat mě psaní.
Nech mě jít, aby se na panelu nástrojů tady, a budu pin to proto, že budu dělat to několikrát.
Toolbox, pokud jste ho ještě neviděli Visual Studio, je místo, kde budete najít spoustu ovládacích prvků.
Můžete také dát kódu, který umístíte na něj, že můžete znovu použít.
Zde budu jen pop v nějakém jiném formátu HTML, nic strašně pokročilé vůbec zde.
Je to jen základní HTML říct, že jsem si vstup, kde bych mohl zadat,
Mám tlačítko, kde bych mohl předložit ji, a pak jsem si div, který je v podstatě zástupný symbol
že mohu použít k výstupu "Dobrý den, píšete to."
Je to úvod do HTML příkladu.
Mám-li spustit tento, automaticky se HTML, ale také automaticky dostanete styl.
To je jedna z důležitých věcí, z WinJS.
Bude to tak, aby vám ve výchozím nějaký vzhled a pocit, že je opravdu v souladu
se zbytkem toho, co Windows 8 se dělá.
Zde vidíte věci, jako tlačítko.
Tlačítko standardně v HTML tak nevypadá, ale to dělá tady
protože je to stále ten CSS právo z tohoto souboru CSS v WinJS.
Pokud chcete používat něco jiného, ​​pokud chcete změnit to, že úplně v pohodě,
jděte do toho a dělat to, co byste chtěli. Ale to je výchozí.
Bude to, aby se více seznámit uživatelům.
A samozřejmě to nebude dělat nic, protože jsem neměl vlastně zapojit do jakékoliv kódu
v reakci na to. Bylo to jen HTML.
Tak jsem se zbavit toho, a vrátíme se do naší aplikace.
>> Dovolte mi přejít na našich default.js.
To vypadá docela složité, ale je to prostě dělá pár věcí pro vás.
Je to často používaný. Bude to mít stejný ve všech svých projektech.
Jediné, co to dělá, je jen trochu ptát, "Jak jsem se sem dostal?"
a řekl: "Jsi spouštíte tuto aplikaci poprvé?"
"Jste obnovení aplikace z nutnosti, že byla přerušena?"
Pár věcí, jako je to.
Opravdu, naše zaměření na tento soubor je zde přímo o tu.
V tomto okamžiku, to jeden řádek kódu je velmi důležitá.
Je to vlastně jít a podívat se přes všechny své značky,
a bude to najít věci, které jste žádali, aby se obrátili na kontroly,
hlubší kontroly, jako je kontrola klientů, jako je zobrazení mřížky, jako plovoucí nabídky
a ty ostatní věci, které jsem vám ukázal na tento snímek před.
Jsou to není nativní ovládací prvky HTML.
Vy prostě říct, plovoucí jako prvek a mají to vědět, co dělat.
Co jsme vlastně udělat, je totéž, co se děje v ostatních druhů kontrolních rámců.
jQuery UI dělá stejný druh obecného přístupu.
Můžete použít značky v HTML, a pak některé JavaScript přichází skrze později a říká,
"Jo, já vím, co to je. To žádá o to, aby se proměnila v této věci,"
což je další výraznější HTML, aby jako kontrolní hodnocení,
což je to, co já vám ukážu, hned teď.
Tento řádek kódu je slib, který říká, "Je-li splněna tato slib,
"Vše, co jste požádal pak byla vytvořena."
A to je vše. Vypadá to trochu složité, ale je to opravdu stejné v každém projektu.
Tady je místo, kde můžete začít přidávat na cokoli jiného, ​​co chcete, aby se stalo,
tak se vrátíme k tomu ve vteřině.
>> Za prvé, musím trochu kódu, který může reagovat na skutečnost,
že někdo klikne na tlačítko.
Chystám se jít dopředu a dát, že tady dole.
Opět platí, že nebudu dělat žádné psaní před vámi zde.
Nejzákladnější JavaScript jen říkám, když to se nazývá
budeme být některé detaily o tom, jak jsme se sem dostali
a pak budeme dělat několik základních věcí.
Jděte si tu věc v mém HTML stránky s názvem nameInput,
chytit ho, vezměte si jeho hodnotu, plácnutí "ahoj" na před ním, a držet, že výsledný řetězec
do tohoto tagu div, že jsme měli před tím opravdu neměl nic předtím.
Nyní budeme hledat tu značku a provést jeho vnitřní obsah rovná řetězci.
Velmi jednoduchý JavaScript.
Doufám, že jste uznal, že tam opravdu není nic neobvyklého děje.
Je to jen rovně nahoru HTML a JS zde.
Mám-li spustit to teď, je to stále nebude dělat žádnou práci, protože jsem kabelové ji
přijímat události.
K tomu, udělám to tady, opět vrací do svého panelu nástrojů,
objevovat to tady.
Předpokládám, že jste viděli všechno tento druh věcí dříve, takže nebudu přes-to vysvětlit.
Nyní budeme pokračovat dostat helloButton.
Budeme říkat, "tlačítko, gratuluji."
"Tady je událost, která se nyní reagují na."
"Když někdo klikne na vás, volat tuto funkci, buttonClickHandler."
A to je to, že funkce jsme právě přidali vpravo dolů na tam dole. To je to.
Takže teď máme překvapivě funkční aplikaci.
Myslím, že budete opravdu ohromeni tím.
Chris. Počkejte na to. Wow. Dobře. To je úžasné. [Směje se]
Ale je tu víc. Nekupujte to ještě. Počkejte.
>> Dovolte mi, abych vám ukázat trochu více zde a dostat se z celé obrazovce.
Jdeme na procházku, než jsme se spustit.
Nech mě jít, a skutečně ukázat vám trochu s CSS.
Jen tím, že ve výchozím nastavení, podíváme-li se zpět na stránce zde,
když jsme zastavili na těchto věcech z WinJS a dostali jsme se ui-tmavé,
ve skutečnosti, můžete jej změnit na výchozí nastavení pro použití světelné aplikace.
ui-tma je dobrá pro grafické aplikace, jako je použití spoustu obrázků,
budete ukazovat hodně vizuálního obsahu.
Pokud ukazuje spoustu textového obsahu, ui-světlo je obecně dobrá volba.
Nemáte na výběr, ale já jsem přešel k ní
a teď vidíte stejné značky, stejné všechno,
je to jen za použití v podstatě obrácený režim zde
kde je vše dělat to černý text na bílém pozadí.
To je všechno v pořádku.
Dovolte mi, abych se sem dostal ven, a pojďme skutečně udělat trochu víc s CSS.
Dám ho zpátky na tmě, protože si myslím, že je to asi jednodušší vidět na obrazovce
když jsem se začít dělat tyto věci.
Chystám se vyměnit tělo ještě jednou.
Půjdu zde. Dovolte mi, abych atomovku to.
Pojďme přinést v těle s třídami.
Věřím, že jsi udělal základní selektory s CSS a podobné věci už,
takže už asi víte, co se tady děje.
Jen přiřazení některé třídy naší záhlaví, a budeme vytvářet nový div
zabalit zbytek těch věcí, které můžeme nyní použít na styl dohromady.
Takže to, co můžu udělat, je jít na naši výchozí CSS.
Už jste se podíval na dotazy médií? Mluvil jste o tom vůbec?
Mediální dotazy jsou součástí tohoto naléhavého trendu -
nebo je založena trend nyní skutečně na webu -
pro citlivou design nebo adaptivní,
a myšlenka je, že vaše aplikace může opravdu vhodně přizpůsobit se
na základě toho, co zařízení, které na ně bude někdo jsme si to.
Takže pokud jste v mobilním zařízení, zřejmě nebudete mít tolik obrazovky nemovitostí
jak budete na velkém 30 palcovém monitoru posezení s desktop, velký PC takhle.
Takže starý Odpověď na tuto otázku by bylo mít 5, 6 různých verzí stejné stránky
a vy byste otevřít verzi, která byla naladěn pro tuto určitou velikost obrazovky.
Nic moc. Je to velmi, velmi repetitivní a tam je tuna údržby k tomu, že.
Nyní máme něco jako CSS mediální dotazy,
a můžeme použít k automatické detekci, kdy je určité velikosti
nebo některá použití vašeho obsahu probíhá.
Takže můžete reagovat na to a můžete říci: "Dobře, v tomto případě
"Pravděpodobně ani nemusíte mi říct, co se tady děje."
To je jen říkám, je-li tato žádost prasklo, jak jsem vám ukázal před -
sebral, a uvedení na straně obrazovky -
pak se pojďme udělat následující styl.
Styling není jen o barvách a tak podobně.
Je to také o dimenzování a marže a dámských vložek a orientací na obsah
nebo dokonce zakázání nebo povolení celé části stránky
a, v tomto případě, vaše aplikace nebo vaše hra stejně.
Tak tady si můžete udělat tak jednoduché, jak budete chtít.
To by nemělo být užitečné ve vašich aplikací, ale je to demo čas,
tak já jdu do toho a přidejte do základní voliče těla a říct,
"Když jsem odsekl, pojďme do toho a dělat background-color a pojďme vybrat něco."
Máte IntelliSense zde. To je ve skutečnosti opravdu cool.
V roce 2012 jsme přidali spoustu věcí pro podporu CSS a JavaScriptu a HTML.
Vy jste samozřejmě mám drop-down IntelliSense taky, ale to není super věc.
Super věc je, že máš vizuální selektory pro spoustu věcí stejně.
Takže jste mohli projít, a stačí si jen vybrat barvu,
nebo můžete jít ven a být ještě konkrétnější, a můžete si vybrat -
to bude hrozné. Budu opravdu vybrat tu slušnou barvu.
Podívejte se na značky moc, mimochodem. To je vaše standardní formát RGB tam.
Ale, když přejdu na krytí, je to chystá přejít k výběru zde alfa kanálu.
Takže vidíte, že barvy se v podstatě transparentnosti procent, že máte na to
vše pečené přímo tam.
Budu si to jako 100%, a pak, když jsem udělal s tím, všechno je v pořádku.
Nyní, když jsem spustit aplikaci a my se aplikace a to snap my,
, že barva pozadí se automaticky nastaví
jen proto, že máme nějaké CSS, který říká: "Jdi to udělat."
Můžete také napsat JavaScript, také, že bude dělat to samé
nebo které byste mohli použít skutečně pozastavit hru, dělat takové věci.
To je asi, když byste používat JavaScript.
Ty by se vypnout herní smyčku v tomto bodě.
Budete potřebovat nějakou JavaScript, protože by to nemělo být něco, co byste CSS pro.
Ale mějte na paměti, že je to jen událost.
Dalo by se říct, "Je-li moje žádost změně velikosti,
"Uvidíme, jestli nám to prasklo." A to je vše.
>> Jo? Mluvil jsem hodně. Existují otázky, tak daleko, kde jsme? Jo.
[Student] Je tam návod pro každého, kdo se získat více informací? >> Jo.
Otázkou je, je tam návod na to? Budu jen ji prodloužit na všechno.
Existuje několik věcí, které můžete jít. Pojďme vlastně odsud.
Dovolte mi vrátit se sem.
Jedna věc je poukázat na to, je samo o sobě Visual Studio má tutoriály zabudovaných
Dovolte mi, abych se zbavil toho.
Vydáte-li se a vytvořit nový projekt, do souboru, New Project,
a podívejte se na levé straně, tam je Online uzel v tomto voliče.
Bude to trvat trochu. Jsem na MyFi zde.
Ale to přijde a bude to Dej mi šanci najít šablony
, ale také, což je důležitější, že vzorky stejně.
Tak jsem si klikněte na JavaScriptu.
Bude to najít vzorky pro mě. Moje řešení je způsob, jak vysoká zde.
Za normálních okolností byste vidět seznam mnoha různých věcí zde.
Pokud existuje něco, co si chcete vyzkoušet, vyberte jazyk,
JavaScript tu, a řekl: "Já nevím, jak to udělat Geolocation."
"Já nevím, jak otevřít soubor."
"Nevím, jak využít webové kamery
"Nebo optimalizovat pro dotek nebo podobné věci."
K dispozici jsou vzorky pro všechno: sdílení, vyhledávání, app bary,
Díky vzdálené volání služby, kódování JSON.
Všechny tyto druhy věcí, tam jsou vzorky tady,
a že to není velké vzorky, které se chystáte, aby vás celou noc na sebe vytáhnout
jen aby zjistil, že jedna věc, kterou byste chtěli naučit.
Jsou to opravdu dobré. Jsou malé, přímo k věci druhy vzorků.
Naučil jsem se spoustu tím, že jde přes to sám,
a proto doporučuji, aby hodně jako jednu věc.
>> Další věc, kterou poukázat také je samozřejmě bych vám ukázal dev.windows.com,
takže pokud se k tomu vrátit, uvidíte v dolní části je tu i ukázky zde.
Takže si můžete stáhnout všechny najednou, ale je tu i spousta jiných zdrojů, i zde
které vám pomohou dostat až na rychlost.
>> Ještě jedna věc, a já bych opravdu doporučuji, abyste zkusit,
Mám to na mém blogu, ale půjdu rovnou k věci.
Já vám ukážu. Můj blog má prostředky a podobné věci.
Jedna z věcí, které upozorňují je tady, tahle věc: tvůj nápad. Váš App. 30 dní.
Pokud kliknete na to, že to bude, aby vám opravdu užitečné stránky.
To je mnohem užitečnější než byste mohli očekávat.
To bude 30 dnů od obsahu, který můžete v podstatě získat tipy a triky
v průběhu tohoto procesu, kterou vytváříte app.
A jak si nemusí čekat, můžete skutečně dostat na hry taky
a pro telefonní aplikace, podobné věci.
Takže v podstatě zaregistrovat na to, a oni budou posílat vám tipy a triky,
"Už jste si mysleli o tom to? Myslíte si, podporovat Snap?"
"Zde jsou některé pokyny o tom, jak to udělat dobře."
"Už jste si mysleli o podání do obchodu?"
"Už jste přemýšleli o tom, jak budete prodávat své aplikace?"
Bude to projít všechny tyto různé věci.
A skutečně, pokud jste na herní trati, v určitém okamžiku
začnete rozpoznávat osoby, mluví k vám
protože jsem vlastně musel jít do Redmint dělat ty a zaznamenané 2 videa tam.
Ale to vše je součástí herního trati,
a tam je také plná dráha pro celkový rozvoj app.
Tomu se říká Generace App.
Já bych určitě doporučil, že pro vás, stejně kromě vzorků.
>> Je tu spousta videí na místě zvaném Channel 9 stejně.
To je asi to poslední, co bych si doporučit i předtím, než budeme pokračovat tady.
Channel9.msdn.com.
To je skvělé, protože nejste bude číst přes tuny bílých papírů.
Je to v podstatě hodně videa, screencasty a věci, které jsou přímo k věci.
Neměl bych, že je to vždy přímo k věci. Záleží na tom, kdo mluví.
Ale obecně, tam je nějaké opravdu na-na-bod videa zde
který vám ukáže nějaké konkrétní věc, budete chtít se učit nebo vidět demoed.
K dispozici je také všechny naše obsahu z naší konference, která se stala před pár týdny
s názvem Build, a uvidíte, že právě tam.
K dispozici je základní technologie pro Windows 8 her. Tady to je.
Byl jsem tam, ve skutečnosti. Nemůžeš mě vidět. Byl jsem tady.
Ale v každém případě, že stranou, doporučil bych vám, že jste se podívat na ty videa.
Jsou to docela užitečné.
Pokud jste přilepená na něco, nebo si jen chcete vidět, co se může něco udělat, střílet ty nahoru.
>> [Guarin] Windows Mail mi poslal e-mail s odkazem na obsah
pro studenty ke stažení se ukázkový kód a tak podobně. >> [Bowen] Skvělé.
Úžasné. Děkuji, Edwin.
>> Dobrá. >> [Student] Mám dotaz. >> [Bowen] Oh. Jo, prosím.
[Neslyšitelný studenta otázka] >> [Bowen] Oh, jsem rád, že se ptáš, že. Ano.
Otázkou bylo, je tu vizuální rozhraní pro mě vytvářet věci?
Edwin vás odmění štědře za tuto otázku.
Existuje způsob, jak to udělat.
Měli bychom to udělat teď? Pojďme to udělat teď.
Chystám se jít do toho hned.
Ve skutečnosti, dovolte mi přidat ještě jednu věc na tomto demu,
a pak budu vám ukázat skutečnou odpověď.
Chtěl jsem přidat trochu více CSS zde.
Byl jsem trochu mimo na tečen zde.
Dovolte mi, abych v nějakém CSS zde využít
tříd, které jsme přidali před chvílí,
záhlaví, na maincontent div, a pak na greetingOutput.
Kdybych to udělal, a spusťte jej můžete vidět nyní máme trochu jiný polstrování a okraje,
takže máme vlastně nějaké posuny zde.
Jedná se spíše na to, co budete čekat na konečné leštěného aplikace.
Ale já jsem jen ukazuje to na vás, protože to je rovně nahoru CSS.
Takže věci, které už vědí, můžete použít zde upravit obsah, jak si přejete.
Už jste viděli, jak udělat pozadí změnit tímto způsobem.
>> Pokud jdu zpátky k našemu HTML, jdu přidat ještě jednu sadu značek,
a to je vlastně bude ovládání z WinJS.
Chystám se jít a chytit to, štítek. Dovolte mi, abych se ujistil, dělám to na správném místě.
Asi dost dobrý.
Tady jsem jen přidal - a půjdeme na celou obrazovku, takže můžete vidět celou věc -
Přidal jsem štítek pro příští div.
Div se nazývá ratingControlDiv.
Sám o sobě to bude dělat nic.
Pokud otevřete to v prohlížeči, měli byste být při pohledu na prázdné, div sám.
Ale protože z té tajemné řádek kódu, který jsem vám ukázal dříve,
Proces všichni, že to bude hledat něco, co vypadá jako toto -
data-win-control - a bude to najít vše, co je v tomto parametru.
Bude to dělat instance, co že je to ukázal na.
V tomto případě je kontrola hodnocení, tak říkám: "Prosím, jděte a nahraďte tuto věc
"S tím, co je potřeba udělat, aby se řízení ohodnocení."
Mohlo by to být kontrola fanda, mohlo by to být pokrok kroužek nebo co kontrola, kterou chcete použít.
Jsou to všechno bude fungovat v podstatě stejným způsobem.
Vy používáte standardní značky HTML5 uvést, co chcete,
a pak budete mít kontrolu na konci tohoto. Dovolte mi, abych spustit to.
Jen jsem kopírovány, že v roce, a teď, že značky se stane to,
který je ve skutečnosti celá řada prvků HTML.
To vše jsou jednotlivé obrazy, a tam je divs kolem nich s voliči.
Doufejme, že můžete vidět, že. Je to trochu jemnější.
Mohu vznášet se nad různými předměty, a bude to dovolit, abych viděl hodnocení tady.
I na něj kliknete, a to si pamatuje hodnocení, ale to je o tom.
Není to opravdu něco dělat s hodnocením.
>> Jedna poslední věc, kterou vám chci ukázat na to
než se přepnete do více vizuální zážitek designu
je trochu kódu, který mohu použít k řešení těchto WinJS kontrol.
Dovolte mi, abych se odtamtud, zpět z režimu celé obrazovky,
a přejít na JS tu sekundu.
Můžu to udělat právě zde. Myslím, že budu nahradit celou tu věc.
Vlastně si myslím, že to nahradí všechno, ale budeme si spolu.
Dám to sem. Jo. Budu toto hodnocení smazat taky.
Co jsem dodat? Vypadá to, že hodně. Není to hodně.
Jen jsem rozšířila tento řádek kódu, který jsem už mluvil o před,
a já říkám: "Když je vše hotovo, pokud byly provedeny všechny mé kontroly,
"Pak to udělat." Tak spusťte tuto funkci s názvem dokončena.
V tomto případě, je to věc, můžete zjistit.
Jdi si, že kontrola div.
Vlastně, je tu ještě jedna věc, kterou bych měl poukázat.
To je další řádek je ve skutečnosti říká, "mám tu ratingControlDiv."
"Chci s ním mluvit, jako kdyby se jednalo o skutečná kontrola, kontrola WinJS."
Takže v podstatě, vy se ptáte na to z něj.
Říkáte: "Chci si s tebou promluvit jako kontrola."
A pak se můžete začít říkat věci jako: "Chystáme se přidat posluchače pro vás
"Takže, když jste změnili můžeme reagovat na to."
A pak také můžeme dělat věci, jako je tento. Ve skutečnosti, to je starý kód zde.
Myslím, že jsem chybí vkládání do ještě jednu funkci,
a že by se skutečná funkce, která by reagovala na ovládání ratingu byl změněn.
Dovolte mi, abych pop, že tady vpravo dole,
někde tam.
A v tomto případě, jediná věc, která je nová, je skutečnost, že jdeme do
co nás ovládací hodnocení říká, a my se ptáte na to, co se nazývá tentativeRating.
Je tu spousta různých dalších věcí, že kontrola může říct,
a to jde kontrolu prostřednictvím kontroly.
Je to velmi jednoduché. Budete mít možnost přijít na to žádné problémy vůbec.
Vedu to, a teď, když jsem se změnit hodnocení a klikněte na hodnocení,
můžete vidět, teď je to vlastně reakce na něj.
Je to uvedení, že hodnocení na obrazovce do té jinak prázdného tagu div
pod kontrolou klientů.
To je kouzlo spoustu věcí i zde.
Takže, jak jste vytváření aplikací pro Windows Store,
tam je tuna ovládacích prvků, které můžete právě použít. Všichni pracují takhle.
>> Dovolte mi, abych vám ukázat vizuální stránku navrhnout pro tyto aplikace.
Dobrou zprávou je, že již budete mít tento nástroj při instalaci vše
pokud jdete do té stažení a dostanete Visual Studio.
Mohu pravým tlačítkem myši na toto téma. Nebudu zoom palců
Je to jen říká, Otevřít v programu Blend.
Blend je další nástroj, který pracuje bok po boku s Visual Studio
a je zaměřen mnohem více na designu stránku věci,
takže je to opravdu povrchy nástrojů, které jsou optimalizovány pro vytváření stylů,
vytváření animací, práce s CSS, spousta věcí v tomto druhu žíly.
Tady to, co by mělo být velmi zajímavé a docela zřejmé ihned je díváme aplikace.
Doufejme, že jsme stále ještě jsou.
Místo toho, aby viděl kód, který se stále ještě vidět v dolní části,
vidíme skutečnou reprezentaci aplikace.
A co víc, že ​​to není jen reprezentace app, to je ve skutečnosti aplikace běží.
A to je to, co je opravdu pěkné o Blend.
Tým odvedl hodně práce, aby HTML a JavaScript a CSS do tohoto nástroje.
Nyní můžete ve skutečnosti, pokud jste zvědaví, "Co to má znamenat? Co mám dělat?"
Já si skutečně vytvořit k této žádosti, i když takové věci neexistují v mé značky.
Nezapomeňte, že kontrola hodnocení? Bylo to jen tag div.
Tohle, že hvězda, existuje pouze za běhu. Jak mám vědět, že?
Tam je to trochu magie tady.
Vidíte ty blesky?
Kdykoliv uvidíte blesk, to znamená, že byl vytvořen něco za běhu.
Některé JavaScript běžel a obrátil se něco do této nebo vytvořené to s nějakou logiku.
Tyto hvězdy, které vidíte byly vytvořeny JavaScript podle WinJS.
Pěkná věc je, že nezáleží na tom, aby mě, můžu ještě navrhnout to,
Můžu ještě jít a změnit ji, mohu zjistit, co se tu děje,
Jsem se podívat na CSS, můžu jít dál a zjistit, proč barva je tak, jak to je,
Můžu začít probírat s věcmi a dělat věci hrozné,
co chci udělat.
Vlastně, nechám věci sám.
Ale tady vidíte, že je to všechno CSS a je tu ukáže vám.
Pokud jsem se jít až tam, to vám ukážu všechno, co říkají zvítězit,
takže pravidla CSS, která jsou nejvíce specifické a nejvíce vybrán pro tuto položku,
které pravděpodobně jste již přešli do svých tříd,
kde si můžete říct, že je to obecně písmo, které se ucházíte, aby všechno,
ale proto, že je to h1 a mám barvu definovanou pro H1S,
to bude to barva, a to proto, že je to přesnější než body1.
Tato jedna věc, tady vám všechny, který ukazuje,
a je to opravdu velice silná věc, jak si získat složitější,
Pokud jste zvědaví, proč se tyto věci jsou takové, jaké jsou.
To bude skutečně říct, a můžete si vybrat některý z těchto předmětů zde.
Že barva není tak špatné, ve skutečnosti.
Můžete si je vybrat. Doufejme, že můžete vidět.
Pro všechno, co máte na vaší aplikaci, uvidíte celou kaskádu
ze všech CSS, které by mohly použít na to a který z nich je vítězství,
který z nich vlastně měl přednost.
Jedná se o druh nudné. Není toho hodně děje v některých z nich.
Pokud bych jít a změnit barvu, pak začnete vidět nějaké kaskádové tam.
Můžete také použít HTML i zde.
Můžu projít a upravit vlastnosti HTML pro všechny tyto věci, jak bych rád.
Je tu jen spoustu věcí zde.
>> Nechci, aby svůj čas tím, že jde přes všechno tady. Jen vím, že je to tady.
Je tu spousta funkcí designu orientovaného to je právě k dispozici pro vás
takže můžete zůstat vizuální, pracovat s aplikací, a nebudou se muset dělat spoustu hádání
že budete muset dělat normálně a na kole zpět z prohlížeče zpět do svého návrhu,
zpět do prohlížeče.
To je opravdu super věci za to, a jak vytvořit aplikace Windows Store,
to bude, aby se vám mnohem více produktivní.
>> Budete také vidět, že to sledování značky zde a vaše CSS
jak budete procházet různé věci.
Je to asi opravdu těžké pro vás vidět, že zejména na videu,
ale to je to, co se tady děje, a já bych vám doporučit seznámit se s tím.
To vám ušetří spoustu času ušetřit. To je Blend.
Pokud provedete zde nějaké změny, jsou automaticky bude pokračovat zpět na
Visual Studio.
Je to stejné soubory, je to to samé všechno. Nechám to být.
Mám lepší příklad, který chci ukázat.
Ale když jsem udělal změnu tam a chytá a vrátil jsem se do Visual Studio, by to řekl,
"Hele, jen si něco změnit. Mohu znovu ho pro vás?" Ano.
A vy používáte stejné věci tam.
To je konec daného vzorku.
>> Chci vám ukázat vyšší konec vzorku, jen aby vám pohled na další funkce
můžete přemýšlet o tom, jak dobře.
Toto je ukázka aplikace, která si můžete stáhnout.
Podíváte-li se pro něco, co nazývá Windows Camp v krabici,
tam jsou některé vzorky, které jsou v tom, že, a jeden z nich je Contoso Cookbook.
Můžu jen běžet za vás.
Vlastní úvodní obrazovka. To je aplikace pohled Grid.
Už vázán nějaké vlastní data zde. Můžete procházet tento.
Můžete jít a podívat se na různé věci, které se dělají nám hlad v pátek odpoledne.
Nevím. Co se děje, aby se mi nejvíc hlad?
Nevím. Jdu jen vybrat jeden.
Můžete jít do těchto věcí. To vám ukáže recept.
Dalo by se také, namísto klepnutí na položku,
můžete jít přímo do této kategorie obsahu, té části obsahu.
V tomto případě, si můžete přečíst spoustu falešných latiny říkám vám všem tady o těchto receptů
a pak jít přímo do konkrétního receptu.
To také podporuje věci, jako je sdílení, které jsem vám ukázal dříve, než se obrázky.
Můžete také hledat v této aplikaci také.
Je to velmi jednoduché udělat vyhledávání.
V podstatě jste jen dostat řetězec textu z Windows
a vy se rozhodnete, jak chcete zpracovat hledání s tím.
Je to jen pár řádků kódu, aby si to, a pak to, co s tím dělat poté, co je zcela na vás.
>> Zde mají také app bar, kde oni jsou pomocí některé další funkce.
Budu jen říct, co to je.
Připomínka bude používat, co se nazývá oznámení přípitek.
To je opravdu šikovný nechal uživatel vědět, když se něco se stalo,
jako aplikace byla nainstalována, nebo něco, co byla dokončena.
Je to také dobré pro hry taky.
Pokud máte trvalý svět, nebo vůdce desky a služby, které je hosting, který
možná na samostatném stroji, se oznámení může být odeslán do stroje
a to i v případě, že uživatel nepoužívá svou hru, hrát svou hru, nebo spuštěním aplikace,
oni mohou ještě dostat oznámení o tyto druhy akcí.
Takže by se dalo říct, "Váš hrad byl zničen nebo se jen o zničena."
"Vrať se a bránit ho," nebo něco takového.
Můžete kliknout na oznámení, můžete přejít přímo zpět do hry a můžete hrát.
Takže ty druhy věcí může pomoci opravdu kreslit lidi zpět do vaší aplikace docela efektivně.
>> K dispozici je také podpořit v této žádosti o použití mikrofon, webovou kameru,
dělat videa a pořizování fotografií.
Můžete také pin sekundární dlaždice.
Je to užitečné, pokud chcete jen mít kartičku, která vede přímo k určitému obsahu.
V tomto případě, to jde přímo na tento recept.
Všechno, co jsem zmínil jsem jen ukazovat
protože je to věcí, které můžete přemýšlet o použití stejně.
Z velké části, které jsou velmi jednoduché na použití.
Jen bych Doporučuji vám, aby se ten vzorek explorer
a najít vzorek, který může ukázat, jak to udělat.
Je to docela jednoduché, aby ti do vašich aplikací tam stejně.
>> Chtěl jsem vám ukázat něco, co je docela v pohodě zde.
Budu snap tuto aplikaci, a já půjdu zpátky do Visual Studio.
Tato aplikace je spuštěna. Je to běží z aplikace Visual Studio.
Mohu udělat něco docela cool věci s tím.
Já vlastně mají možnost vybrat prvek,
a můžu jít sem na živé aplikace, a mohu říci,
"Zajímalo by mě, proč je Doba přípravy trochu světlejší šedé než samotný název?"
Můžu na něj klikněte.
Bude to synchronizovat, že zpět do Visual Studio,
a bude to, aby mi ukázal přesně generovaný obsah, který vyústil v této části uživatelského rozhraní.
Takže v tomto případě, je to položka, titulky a h4 dvojité konstrukce,
a že nám asi řekne, co potřebujeme vědět, protože jako h4 v této souvislosti,
to bude mít určitý druh písma.
Ale když jsem pořád nevím proč, mohu kliknout na Trace styly.
I pak může rozšířit ven barvu a můžu to zjistit přesně proč, že barva není barva tělo
ale ve skutečnosti je něco jiného.
To je v podstatě Vývojové nástroje z Internet Exploreru
do té míry, přinesl do Visual Studio.
Pokud jste pracovali s Chrome Dev Tools, Firebug a podobné věci,
tyto druhy nástrojů, které jsou v prohlížeči,
tento druh funkcí byla podána přímo do Visual Studia
takže nemusíte skutečně spustit prohlížeč a pracovat s těmito nástroji samostatně.
Teď mám aplikaci Windows Store právě běží,
a můžu začít tahem od sebe a zjistit, proč se věci dělají, co mají.
>> Mohu také udělat to takhle taky.
Můžu jít a prostě vybrat něco, co hned od značky a zjistit, co to je
v samotné žalobě. Myslím, že jsem pryč od všeho.
Tady jsem vznášející se nad to. Umím zvolit ji.
Bude to, aby mi ukázal ve skutečném běhu aplikace, kde to, co je
že jsem se kliknutím na na značky.
Opravdu cool věci.
Jak se snažíte přijít na to, co se děje a co je to HTML dělá,
co CSS dělá, mějte na paměti.
Nezapomeňte, je to tu pro vás
a také to, že směs může pracovat s živým spuštěné aplikace.
>> Jedna poslední věc, kterou jsem chtěl ukázat vám s touto aplikací -
Mimochodem, to vám ukáže, delty, jak se věci mění příliš,
takže můžete sledovat na těchto žlutých světlech.
To jsou věci, které se právě změnily v aplikaci.
Ale jedna poslední věc. Chci se vrátit do Blend jen pro druhý tady.
Budeme to otevřít se, Open in Blend, stejné aplikace, stejné všechno.
Chci jen, aby vám ukázat zkušenosti zde není jen jste přilepená na domovskou stránku
při pohledu na to, co budete mít ve výchozím nastavení při spuštění aplikace, a nechat ho sedět tam.
Můžete se také obrátit na tomto poměrně malou ikonku tady.
Je to tzv. režim Interactive.
Kliknete na to. To se děje, aby se vaše aplikace.
Nejsi v návrhovém režimu už, tak už nebude Kliknutím na věci
změnit funkčnost, ale můžete skutečně pracovat s aplikací nyní.
Můžete proklikat, můžete udělat cokoliv, dostanete na recept, který vám záleží
nebo do kategorie. Pojďme do této kategorie.
Já řeknu: "Dobře, tady je místo, kde chci navrhnout."
Pak se ještě jednou kliknete na toto tlačítko, přinese vám zpět do designu povrchu,
a teď můžete dělat všechny ty věci, které jsem mluvil předtím.
Budu klikání, dokud jsem si to vybrali, zjistit jeho rozměry,
zjistit HTML pro to, CSS pro něj
pro běžící aplikace, některé později součástí žádosti.
Velmi, velmi užitečné. Ukážu vám to.
Prosím, mějte na paměti, pokud hledáte na psaní kódu s tímto
, protože to bude vám ušetří spoustu potíží, a je to docela dobrá věc.
To je docela hodně jsem chtěl ukázat na Blend a Visual Studio pro všechny, že.
>> Jakékoliv dotazy týkající se některého z těchto nástrojů?
Vůbec něco? >> [Guarin] Mám věci dát ven, takže dobré otázky, dobré věci.
>> [Bowen směje se] Už jsem ti je znázorněno mé ukázky zde.
Chystám se dát na straně zdrojů a obrátit se na otázky nyní.
Ten první odkaz je, že místo generování aplikace s herní trati a app trati.
Zaregistrujte se pro ty, kteří.
Nemusíte čekat 30 dní, aby se obsah.
Můžete začít chodit a dívat se na obsah, jak si přejete.
Chápu vaše časové rámce může být jiný, než - [smích]
Takže když je Hackathon? Je to pár týdnů, ne?
Takže nemusíte mít 30 dní počkat.
Tak jo, můžete se zaregistrovat na to a pak už jen začít tahem obsah z ní.
Také Dev a Centra designu.
A já jsem nezmínil, ale je tu také obchod Docs.
To by bylo pro po Hackathon, jak jste připraveni začít odesláním své aplikace pro úložiště.
Tam jsou některé užitečné pokyny zde, některé pokyny o tom, jak dostat věci do skladu,
některé společné problémy, které by mohly výlet vás,
a to je konec těchto zdrojů.
>> Takže to, co je na vaší mysli? Cokoliv jiného, ​​co -
[Guarin] Kdo je přemýšlet o tom, je aplikace Windows pro CS50? V pohodě.
[Bowen] cool. Skvělé.
>> Veškeré otázky týkající se věci, které jste doposud viděli a jak to souvisí s to?
Například, více času jsem mohl vzít hru, která jsem napsal
a že běží v prohlížeči a jen tak projít procesem
přinášení, že do Visual Studio a dělat to app Windows Store.
To zabere více času, než jsme ve skutečnosti měli zahrnout dnes,
ale krátká verze je, že je to stejný kód, který jste běží v prohlížeči,
a věci, které změnit jsou věci, které jste se rozhodnou zapojit do Windows 8.
Takže pokud chcete použít kouzla, pokud chcete hledat, nebo sdílet,
Potřebujete vytvořit aplikaci pruh schovat některé funkce na to,
to jsou ty druhy věcí, které byste změnit.
Ale jádro vaší webové aplikace může zůstat beze změny.
Opět platí, že tak dlouho, jak to funguje v IE10, že to bude rychlé portu
k uvedení věci do Visual Studia, do Blend, a učinit z něj aplikace Windows Store.
Opět platí, že jediné, co budete muset naučit, jsou ty další funkce
které můžete použít k rozsvítit aplikace, jako živé dlaždice a ty druhy věcí.
>> Jo. >> [Student] Moje otázka je o práci mobilní.
Takže pokud uděláte aplikaci, která funguje jako aplikace na ploše,
je to opravdu snadné převést na mobil, nebo je tam -
Otázkou je, jestli udělám aplikace Windows Store, který je opravdu optimalizované pro toto prostředí
a chci, aby to na mobilním světě, co se podílí na tom, že?
To, stejně jako mnoho otázek, je vždy neustále mění odpověď.
Dobrou zprávou je, pokud máte držet s HTML a JavaScript, CSS,
pokud začínáte z aplikace Windows Store,
to bude nechat ji, aby na webu
a pak používat tyto druhy technik, jako jsou dotazy médií a věcí,
přizpůsobit se různým velikosti zařízení.
To znamená, že tam je vždy rámce a věci tam venku
že podpora rozšíření z různých technologií, různých platforem.
To se mění po celou dobu.
Jsme také mění věci, stejně jako se díváme k tomu, co máme teď
ve skutečnosti se s Windows Phone 8.
Máme některé společné základní infrastruktury
nabídl mezi aplikacemi pro těchto prostředích.
Takže věci, které děláte vytvořit aplikace Windows Store,
hodně z toho může přenést do telefonu 8 aplikace Windows stejně.
To je opět rozvíjející příběh, takže tam je nějaký obsah o tom na sestavení.
SDK právě dostal už před chvílí. To byl právě propuštěn před chvílí.
Ale co se týče ostatních platforem taky,
pravděpodobně jste narazit na mnoho cross-platformní rámců stejně.
Dobrou zprávou je, věci, které děláte tady,
základní funkce je rovnou do webové standardní věci.
Jediné věci, které by se snadno překládat, jsou věci, které Windows 8 dělá,
ale to není překvapení, protože je to funkce systému Windows.
Nebudete najít sdílení nebo podobné typy smluv, na každé jiné platformě.
Takže to jsou věci, které byste chtěli, aby z hlediska designu
ujistěte se, že máte cesty k druhu abstraktní, že, takže můžete říct,
"Pokud Běžím na to, můžu to udělat."
Pokud nejsem, tam je několik návrhové vzory, které můžete použít na druh skrýt ty věci pryč.
Ale mějte na paměti, že. Jo. Promiňte. Jen do toho.
>> [Student] Pokud chci vyzkoušet svou aplikaci Windows na vrcholu [neslyšitelné]
[Bowen] Jo. Přeskočil jsem ještě jednu věc příliš. Jo.
Budu odpověď na vaši otázku, pak já ti ukážu funkci Zapomněl jsem se zmínit.
Máme některé stroje jsou k dispozici na místě. Je mi to líto.
Otázkou bylo, jak jsem test věci na zařízení
jestli nemám náhodou mají spoustu věcí z čeho vybírat?
[Guarin] půjčil jsme ti kluci, myslím, 5 nebo 6. Kolik potřebujete?
[Student] Dostali jsme čtyři z nich. >> Dobře. Vy jste dostal 4 břidlice hrát s kolem.
Tak určitě ať všichni vědí, prosím. [Směje se] >> [Bowen] Skvělé.
To je ještě lepší odpověď, než jsem chtěl dát.
Máme úřední hodiny pro vývojáře, které děláme v naší kanceláři
a nyní přichází brzy Microsoft Store přes na Pru,
ale Edwin již postaráno o vás.
K dispozici jsou 4 břidlice jsou k dispozici pro půjčování, pro testování.
Tam jdeme. Tam je příklad tam jeden nahoru.
Tak jo, naprosto. Skvělé.
Rozhodně zdaleka nejlepší způsob, jak to vyzkoušet je, aby se na zařízení.
Pokud nemáte náhodou ještě jeden nebo nechcete chodit po areálu ve sněhu
chytit jednoho nebo cokoliv, je způsob, jak dělat to zpátky v aplikaci Visual Studio.
Mám-li se vrátit do, kde jsem byl tady, tady namísto použití místní stroj,
můžete se připojit ke vzdálenému stroji, ale to není to, co jsem zde mluvil.
Simulátor je věc, kterou budete chtít podívat do.
Budu spustit to, a opravdu to, co to je, to je v podstatě okno do vašeho vlastního systému.
Tady je vlastně můj systém běží, běží Contoso,
ale způsobem, který mi umožňuje změnit některé z exekučních parametrů,
parametry životního prostředí.
Takže můžu říct, tady, "Víš, co?"
Oh. Už jsem si to běží v simulovaném 27-palcový monitor s rozlišením 2560.
Mohu snadno klesnout, že dolů a vidět to, co moje žádost bude dělat s menší obrazovkou
nebo změnou nastavení DPI nebo cokoliv jiného.
Takže na malé obrazovce, 10.6, co se to bude dělat?
Že stále vypadá docela dobře, ne?
Budete chtít to udělat, a to zejména pokud jste podání do obchodu, protože děláme
jako součást procesu testování.
A pokud tam jsou problémy, jako je to,
pak byste měli narazit na problém, jak se certifikovaný pro úložiště.
Ale to je součástí simulátoru. Opravdu cool. Velmi snadné to udělat.
Můžete také použít funkce, jako je otáčení je stejně.
Mohu klikněte na tlačítko tady se to otočit, co někdo bude mít jako zážitek
otáčení jejich břidlice, jejich tablet, a pomocí aplikace s tím.
Tam jsou některé další věci, jako je příliš emulaci dotykové a některé další věci,
nastavení GPS.
Nemůžu předstírat, že jsem na jiném místě a vidět, co dělá moje žádost
když jsem se předstírat, že jsem zpátky v Seattlu, nebo tak něco.
Ale je to opravdu užitečná funkce, a to postavený v jak Visual Studio a Blend.
Ano. Váš dotaz.
>> [Student] Pokud píšete hru, nemá Visual Studio žádnou podporu pro animace?
Jo. Otázkou je kolem podpory animace, a to zejména s hraní her.
To záleží na okolnostech. [Smích]
S JavaScriptu řeknu, že je to pravděpodobně méně podpory než je na XAML straně,
která má časové osy, má storyboardy a věci, které jsou postaveny palců
Pro animace na apps JavaScript, já nevím, jak moc odpověď chci dát.
Mám zdrojů na mém blogu, které jdou přes mnoho možností pro oba animací fyziky,
Volby pro JavaScript orientovaných hry na Windows 8.
Já bych si odkázat na ty.
V podstatě, tam je tolik možností.
Důvod, proč jsem váhala, je tu tolik možností pro dělání animací pomocí JavaScriptu.
Mohlo by to být CSS, by to mohlo být na plátně, na základě, mohlo by to být jen základní DOM animace,
to by mohlo být mnoho různých věcí, takže to opravdu záleží na vaší volbě.
Pokud se rozhodnete použít něco jako Create.js nebo vápnem nebo jinými druhy rámců -
No, nejsem si jistý, budete moci použít vyšší konec rámce
Líbí se mi Impact nebo Construct.
Který má tendenci vytvářet více kódu, než byste mohli zvážit od nuly.
Ale v těchto případech, můžete i nadále používat simulátor, můžete použít prostředí,
a mám tendenci používat jen toto prostředí pro mé zkušební platformy v těch případech,
jak jsem vyvíjet hry.
Byl jsem v pohodě, zejména s plachtou animace,
což je asi nejčastější věc.
Nejlepší budete pravděpodobně zjistíte, je dev nástroje v prohlížeči
a dev nástroje v aplikaci Visual Studio.
Druh meandrující odpověď zde, ale doufejme, že mám odpověď. Ano. Vy.
>> [Student] Jaké jsou možnosti pro Windows 8 aplikace pro ukládání dat?
Jaké jsou možnosti pro Windows 8 aplikace pro ukládání dat, systém Windows Store aplikace?
Vaše možnosti jsou opravdu každá aplikace má svůj vlastní bazén místního úložiště
pro nastavení a dat, ale je to také směšně snadné používat roaming skladování,
využívat cloud-based úložiště. Je to zdarma.
Co se stane, je, v podstatě zvolit jinou třídu a říkáte,
"Nastavení roamingu, Uložit, tento konkrétní soubor obsahu,"
a jejich účtu Microsoft, co se jim už podepsal se jako,
bude klíčem k roamingu, že informace kolem.
Takže pokud mohu použít svou hru na mém notebooku, a pak jsem se přihlásit pomocí stejného účtu
a hraju hru na povrch nebo na tabletu,
který bude automaticky přecházet toto nastavení a data mezi těmito stroji.
To je výchozí věc. To je dobré pro určité množství dat.
Ty by se dal obrovskou databázi do nich.
K tomu budete muset přejít na jiné druhy řešení, jako jsou hostované databáze v cloudu,
podobné věci.
Tam jsou některé další možnosti komunity kolem jiných druhů datových technologií.
Viděl jsem nějaké SQLite možnosti v komunitě kolem tam taky.
Takže stále více a více se objevují, ale to jsou základní věci, které byste hledat směrem
na hru nebo aplikaci.
A vy jste měl otázku na zadní straně taky.
>> [Student] Z hlediska sítě [neslyšitelný] nahrávání nebo stahování souborů [neslyšitelný]
[Bowen] Je vaše otázka, jak můžete vidět, že ani jak můžete ladit to a vyzkoušet?
[Student] Jak to můžete ladit [neslyšitelný]
Promiňte. Nemůžu slyšet všechno.
[Student] Jak se vám to chyba testováno a také [neslyšitelný]
Skvělé. Skvělé.
Jak pracovat se sítí? Jak můžete vidět, co se děje?
Tam je mnoho různých odpovědí na tuto jednu,
ale dovolte mi ukázat vám pravděpodobně nejjednodušší věci tady.
Dovolte mi, abych se zbavil simulátoru za vteřinu.
Jen pár možnosti ladění sítě.
K dispozici je kompletní síťový zásobník pečené přímo do jak na úrovni WinRT a od WinJS,
takže můžete velmi snadno udělat XHR, typ AJAX volání z vaší hry nebo aplikace k tomu, že.
Především, mám tendenci používat dvě věci.
Já používám skutečné dev samotné nástroje, které mají síťový stack pečené do nich.
Dovolte mi, abych vám ukázal domovskou stránku Windows.
Můžu přinést toto nahoru, a tam je vlastně síť proxy server pečené do těchto nástrojů zde.
Tak jsem si to, můžu aktualizovat stránku, a to se děje, aby mi ukázal všechny interakce,
včetně AJAX volání pro danou relaci, za dobu trvání této žádosti je.
To je užitečné. Bude to velmi užitečné pro aplikace na bázi prohlížeče.
Pro ostatní druhy aplikací, včetně Windows Store aplikace,
I používat nástroj nazvaný Šumař.
Budeš si hrát v odezvě. [Smích]
Šumař je jednoduchý proxy. Myslím, že mohu ukázat, že na vás.
Je to jen GetFiddler.com, které, kupodivu, jsem trasování svou síťovou vrstvu
bude GetFiddler.
Ale v každém případě, Šumař byl napsán jednou PMS v týmu IE,
takže ví, co dělá.
To je dobrým ukazatelem, který můžete použít pro ladění síťového provozu.
Doporučoval bych, že. Otázka tam taky.
>> [Student] Existuje jednoduchý způsob, jak integrovat cizí jazyk zadávání,
jako japonské nebo čínské, do aplikací systému Windows?
Nemůžu říct, že jsem udělal příliš mnoho z toho sám, ale to se peče palců
K dispozici jsou možnosti samozřejmě emitující Vaši žádost - omlouvám se, jsem neřekl otázku -
Možnosti kolem globalizace, lokalizace obsahu,
včetně věcí, jako je budou moci prodávat na různých trzích
a zaměřit se, že verze aplikace pro ty jednotlivé jazyky
nebo kultury nebo podobné věci. Absolutně zabudovaný
Měli jsme podporu, které pro věčně,
a které navazuje na své možnosti pro Windows Store.
Můžete to udělat v obchodě sám, prodávat na různých trzích,
můžete to udělat v aplikaci stejně i s využitím prostředků k definování,
"Pokud jsem vytvořil pro tuto kulturu, pak použijte tyto případy odchýlení od mé textového obsahu
"Nebo použít právo na levém čtenáře."
Ti, kteří jsou součástí výchozí WinJS a WinRT API. Dobrá otázka.
>> Jak jsme na tom? Nějaké další?
A pokud někdo na videu má otázky, jsem cbowen @ microsoft,
takže jsem rád, že se některý z vašich otázek z budoucnosti.
Velmi - Z budoucnosti, budoucí [napodobuje echo].
Tak mě tady je. Dovolte mi, abych dal svůj kontakt sem.
Takže mi stačí poslat poznámku, cbowen @ microsoft,
a já se vrátím k vám co nejdříve to půjde.
>> Cokoliv jiného, ​​že jste přemýšlel? Jsme dobrý?
Skvělé. Dobrá. Děkuji vám všem moc. Vážím si toho. [Potlesk]
>> [CS50.TV]