[Powered by Google Translate] [Seminar - Windows 8 - Dezvoltare App / joc cu HTML5] [Chris Bowen, Edwin Guarin - Universitatea Harvard] [Acest lucru este CS50. - CS50.TV] 

Hei, toată lumea. Numele meu este Edwin Guarin. Acest lucru este Chris Bowen. Voi lăsa să se prezinte într-o secundă. Vreau doar să fac un anunț rapid. Mai întâi de toate, tot ce CS50 elevii obține Windows 8 pentru gratuit. Deci, dacă te gândești de fapt, folosind-o pentru proiectul final, ea ta. Nate va trimite un e-mail mai târziu pentru instrucțiuni. Al doilea lucru este în cazul în care vă decideți să scrie o aplicatie pentru Windows 8 pentru proiectul final CS50, vom face unele cadouri: un Xbox, am putea fi în măsură să dea un ardezie departe, chestii de genul asta. Deci, dacă există ceva te reține, să Chris sau știu cum putem ajuta să construiască ceva foarte cool. Asa ca va multumesc din nou venit azi, și voi preda la Chris. 

Mulțumesc, Edwin. Mulțumesc, toată lumea, alături de noi astăzi. Sunt Chris Bowen. Eu sunt unul dintre colegii lui Edwin aici, în nord-est. Am vrut doar să-și petreacă un pic de timp cu tine vorbind despre cum să faci o aplicație pentru Windows Store cu HTML5, JavaScript, CSS și și un fel de a lua orice întrebări ați putea avea despre el a răspuns pentru tine cum sunteți în căutarea spre gândesc poate că folosind-o pentru o CS50 finala oportunitate. 

Acestea fiind spuse, vom arunca cu capul doar dreptul inch Voi merge pe la diapozitive pe aici. Dacă aveți întrebări, nu ezitați să-mi trimiteți un e-mail. Sunt cbowen@microsoft.com, și nu e blog-ul meu și Twitter meu. Cu toate acestea doriți să luați legătura cu mine, asta e bine. Am aproximativ o oră de lucruri, și vreau să ajung la întrebările dumneavoastră în de-a lungul drum, asa ca nu fi timid despre care au întrebări în timpul acest lucru. Ei nu pot vedea cine pune întrebările pe înregistrarea, astfel încât veți fi la fel de anonim ca vrei sa fii. 

Permiteți-mi să se arunca cu capul în dreapta, vă dau doar o scurtă introducere la Windows 8, și să vă arate câteva din lucrurile despre Windows Store aplicații pe care le-ar putea lua în considerare ca te gandesti la dezvoltarea unei aplicatii. Ne uitam la Windows 8. Am fost pentru câteva săptămâni acum. O mulțime de adoptare puternic acolo deja. Este posibil să fi văzut deja mașinile de suprafață pe care le avem la fel de bine. E unul pe aici de fapt, aveți posibilitatea să luați o privire la dacă sunteți aici în persoană. Eu chiar vreau să vorbesc cu tine, ți arăt în jurul valorii de un pic despre Windows 8. Ideea cu Windows 8, chiar nu prezinte toate lucrurile pe care le stiti despre Windows în unele experiente noi - în special, lucruri ca pe masina de suprafață cu atingere, aceste tipuri de mai multe dispozitive mobile, care sunt acum pe piață, dar este, de asemenea, Windows, la miezul său. Deci, aceasta înseamnă că puteți să-l instalați într-adevăr pe ceva care ruleaza Windows 7, de la cel mai mare triplu SLI platformă de joc în jos pentru a laptop-ul și a strălucitoare alte noi dispozitive de pe care s-ar putea ridica azi. Acestea vor rula Windows 8. O să-ți arăt doar un pic, și toate experiențele pe care le veți vedea aici sunt lucruri pe care le puteți crea. Ideea este dacă este tactil, mouse-ul, tastatura, indiferent de dispozitivul este că rulați aplicații pe, se va rula mare. Windows 8 va ajuta cu toate aceste scenarii. 

Aceste slide-uri deoparte, hai să obține dreptul în a lua o privire pe aici. Lasă-mă să-ți arăt în jurul valorii de ecran de casa mea. Acest lucru este ecranul Start. O să vă dau doar un pic de un tur aici. Sunt pe o mașină non-touch, astfel încât la fel de mult ca vreau sa ating ecranul laptop-ul meu, acesta nu va face nimic, așa că voi defila doar în jurul valorii de aici un pic și-ți arăt. Unele lucruri pe care le-ar putea observa este faptul că acestea ceea ce sunt numite placi vii de fapt, pot anima, și ele pot oferi informații la tine - poate actualizări privind statisticile pentru un joc sau a vă arăta de știri de la unele dintre aplicațiile anterioare, care sunt aici pe partea stângă. Acolo mergem. Sunt sigur că e doar pozitiv și o veste fantastic de mare. Puteți vedea aici este într-adevăr atrage atenția înapoi la app, spunând, "Hei, nu e ceva nou aici. Uită-te. Întoarce-te și vezi ce mai e nou pentru tine." Asta se numește țiglă vii, și le puteți face notificări fie chiar de la aplicarea în sine sau dacă luați o privire mai în detaliu, veți afla cum să scrie un serviciu de la distanță care poate împinge de fapt, informații la țiglă, care este ceea ce se întâmplă cu aceste aplicații de știri. Ei de fapt obtinerea de știri din nor și actualizarea țiglă acolo astfel încât oamenii să știe că există un motiv pentru a deschide aplicația și să ia o privire indiferent de cele mai noi stiri este, în oricare dintre aceste sau în cazul în care nu există rețete noi sau un nou scor mare pentru a bate sau un prieten de joc sau orice pe aceste aplicații. Este ceva pentru a vă atrage înapoi inch Deci, asta e gresie vii, și ar putea fi o persoană, ar putea fi un site web, de asemenea. De obicei, aceasta este o aplicație. 

Destul de mult toate aceste lucruri pe care le am aici, venit din Windows Store. Voi lansa asta. Este una din aplicațiile pe care le obține în mod implicit pe orice mașină care rulează Windows 8. Puteți veni aici pentru a afla tot ce vrea, de la lucrurile care sunt evidențiate la jocuri pe care nu le-am văzut înainte. Oh, wow, avem un nou pinball aici. Puteți instala astea de aici de la magazin, și vom vorbi despre modul în care să se dezvolte acestea. Aveți o mulțime de opțiuni în modul în care le creați. Ne vom concentra in pe povestea de activarea JavaScript-cu HTML și CSS, dar pentru utilizator, pentru a cumpărătorului de app, nu contează ceea ce a fost scris inch Ei pot merge mai departe și de a lucra cu el. Sunt intrigat de asta, așa că am nevoie pentru a deschide asta și să ia o privire. Fiecare aplicație, inclusiv cele pe care le puteți trimite și vinde sau da gratis, ce vrei să faci în magazin, va primi o pagină de pornire ca aceasta. Vă puteți depune dosarul de candidatură un buchet de capturi de ecran - vedeți ceva aici - detalii despre cererea, și-a lungul timpului vei acumula ambele ratinguri - ele sunt de fapt doar de rating stele - și comentarii, care oferă un pic mai mult înțelegere. De fapt, cineva trebuie să tastați ceva și să vă spun cât de minunat esti, și care va intra în secțiunea de Review-uri de aici, pe care nu l-am uitat la. Fantastic. "Nici măcar nu se va deschide." Cât de mare. Ei bine, pentru cei pentru care aceasta sa deschis și a alerga, ei par să se bucure de ea cu adevărat. [Râde] Tineti minte acest lucru. Internet. Oricine poate spune ce vrei despre cererea dumneavoastră. Deci, asigurați-vă că faci o treabă bună cu ea, asigurați-vă că ceea ce face la fel de confortabil pentru utilizator, după cum puteți pentru că sunt un cuplu clicuri distanță de la furnizarea de o revizuire, și că va acumula pana la dvs. de rating de revizuire generală. Și ce vrei să faci cele mai bune dvs. pentru că ai de gând să fie de până împotriva altor aplicații. Nu va fi mii de aplicații deja în magazin, și sunt șanse, nu poate fi ceva care are o funcționalitate similară cu ceea ce faci. Deci, dacă puteți sta într-adevăr afară din mulțime, care va fi in avantajul tau, desigur. 

Vom intra în magazin un pic mai târziu. Eu chiar vreau să se concentreze pe crearea de aplicații. Dar versiunea scurtă a magazinului este de distribuție la nivel mondial, este în mod automat o parte a Windows 8, oamenii pur și simplu foc în sus și să ia o privire la diferite aplicații aici, aveți Dress-Up Sticker Book și tot felul de diferite aplicații. Vopsea proaspătă, am folosi acest mult - slab, dar l-am folosi o mulțime. Este mi-a arătat deja am o aiba. Lasă-mă să-ți arăt ceva ce nu avem - UVideos Nu am cum de brand nou. Veți vedea aici este gratuit, astfel încât să puteți instala chiar de la magazin. Aveți opțiuni prea. Puteți da, desigur, să degajeze. Puteți pune publicitate în aplicația sau jocul. Puteți încărca, de asemenea, pentru ea, și ar putea oferi foarte usor un proces de aplicare, precum și astfel încât să puteți lăsa oamenii-l încercați pentru o săptămână, sau ce vrei tu să faci. Asta e doar personalizabil prin intermediul portalului. Tu nu scrie nici un cod pentru asta. Deci tu spui, "Puteți folosi acest lucru pentru o săptămână, și apoi le-ați luat să-l cumpere," sau ai putea face lucruri de genul, "Ai putea juca primele 3 nivele ale acestui joc "Și apoi le-ați luat pentru a achiziționa pentru a accesa restul." Ai putea face chiar și achizițiile de in-app la fel de bine, astfel încât să puteți spune, "Avem aventuri sau seturi de elemente grafice sau lucruri care sunt deblocate suplimentare - "Mai multe retete care sunt deblocate -. Dacă vă cumpărați aceste seturi extinse" Și tu poți face asta tot în aplicația sau jocul în sine. Deci, în totalitate până la tine, alegerea ta. Există o mulțime de lucruri pe care le puteți face în magazin, și apoi, practic esti o prezentarea la un canal de certificare. Putem vorbi despre asta un pic mai târziu, dar acesta este scopul. Doriți să obțineți dvs. app vizibilitate la nivel mondial în magazin aici. 

Din nou pe ecranul de Start aici, aș vrea să vă arăt un pic mai mult. Dacă am lansa aceste aplicații, permiteți-mi să vă dau un exemplu de unele funcționalități eco-app aici. Pentru a face asta, voi lansa vopsea proaspătă. Un lucru pe care veți vedea aici este fiecare singur bit de pe ecran, toți pixelii de pe ecran, mergeți la aplicația. Sunt plecat de zile în cazul în care au aceste frontiere în jurul ferestrelor cu o mulțime de butoane care sunt mereu acolo iau spațiu tot timpul. Acum, într-adevăr doriți să obțineți departe de asta și au doar conținutul fie în centrul atenției. Putem face lucruri cu Windows, prin accesarea altor tipuri de meniuri. Una dintre ele este, de fapt ceea ce se numește bara de farmece, și iese din partea laterală a ecranului. Puteți scutura de fapt de partea dacă aveți un ecran tactil, ați putea să faceți clic dreapta în cazul în care aveți un mouse-ul, există o comandă rapidă de la tastatură pentru ea, există întotdeauna mai mult decât un mod de a face ceva în mediul de aici. Care aduce o serie de lucruri pe care le puteți face. Cel mai evident este ca poti reveni la ecranul de pornire, dar celelalte patru sunt ceea ce se numesc farmece. Ele sunt contracte pe care le pot fi conectați la ca un dezvoltator de app. Sunt destul de cool. Căutare, eu sunt sigur că e ceva ce ai de gând să faci, partajarea voi arăta într-o secundă, și dispozitive și setări, toate acestea sunt lucruri pe care aplicația dvs. pot fi conectați la de pârghie pentru Windows, pentru a spune, "am făcut partea mea "Și vreau Windows pentru a sprijini alte funcționalități, "Și nu vreau să scrie o mulțime de cod pentru a face acest lucru." Asta este într-adevăr un avantaj de a folosi aceste caracteristici. Lasă-mă să-ți arăt o. Pentru a face acest lucru, voi face un nou tablou. De asemenea, am vorbit despre utilizarea fiecare pixel pentru aplicația dumneavoastră. În mod implicit, aceasta este ceea ce aplicația de vopsea arata ca, atunci când îl utilizați. Este într-adevăr doar despre orice ai de desen, de conținut. Am putea face lucruri oribile aici. Ce ar trebui să desenezi? Nu știu. Mâzgăleli? Oh, mare. Eu pot face mâzgăleli. Fantastic. Un curcan? [Râde] Aceasta este curcanul cel mai abstract, veți vedea. Pot, de asemenea, aduce la ceea ce se numește bar app, și acest lucru este într-adevăr una dintre principalele modalități pe care le puteți utiliza pentru a ascunde departe toate lucrurile care ar fi fost pe aplicația dumneavoastră sau joc înainte doar ocupa spatiu tot timpul. Deci, acum puteți să-l pune aici, iar acest lucru este într-adevăr una dintre cele mai frumoase experiente cu bara de app pe care le-am văzut. Pune alegerile aici pentru selectarea culori diferite. Ne-am dorit un curcan, așa că vom pune ceva maro aici, începe amestecarea în câteva culori. Vom lua o culoare intermediar aici și apoi mă întorc aici. Puteți începe să desenați. Nu e curcan. Fantastic. Eu nu pot trage pentru a începe cu, dar să facă acest lucru cu un touchpad, în fața unui public este chiar mai bine. Acest lucru este minunat. Ideea, însă, este tot ceea ce îmi pasă este chiar aici, la suprafață. Să spunem că eu sunt atât de mulțumit cu aceasta că am să-l împărtășească cu cineva. În mod normal, ceea ce ar face cu alte versiuni de Windows, te-ar lua poate o captură de ecran, ai face ceva copy-paste a textului sau lucruri de genul asta pe care doriți să le partajați afară, și apoi du-te și deschide o altă aplicație și a pus-o în ea. Aici nu trebuie să faci asta. Vă poate aduce de fapt, în bara de farmece și spune, "vreau să împărtășesc acest lucru." În acest moment este de gând să vă arăt toate aplicațiile care știu cum să lucreze cu ceea ce este comun. În acest caz, este o imagine, asa ca va spune, "Văd că ai o imagine." "Vrei să împărtășească asta?" Puteți vedea eu e-mail-am umple tot timpul. Aceasta recunoaște că, și mă oferind că ca o comandă rapidă, dar este, de asemenea, mi-a arătat fiecare aplicație care știe cum să se ocupe cu a face o fotografie și de a face ceva cu ea. Acestea toate au indicat la Windows că pot face asta. In acest moment aceasta este Windows. Utilizatorul alege exact ceea ce vor să facă cu ea. Voi face de obicei meu de PuzzleTouch. Puteți vedea care am creat tot felul de puzzle-uri a lungul timpului. Voi lua PuzzleTouch și spune, "Vreau să împărtășesc această creație uimitor cu PuzzleTouch." Se va merge mai departe și spune, "Mare. Vrei să împărtășească acest lucru? Fantastic." "Nu vrei sa faci un puzzle care este ușor, intermediar, oricare ar fi?" Voi face un un intermediar aici. Se face puzzle. O să fie un puzzle teribil, pentru că cea mai mare parte goale. Dar e gata, și este de fapt înapoi în cealaltă aplicație. Dacă am venit aici, eu pot căuta pentru el și-l lanseze. Acum, dacă am defila peste doar un pic aici, ar trebui să vedem creația mea undeva. În cazul în care m-am dus? Ce fel de puzzle-am face? Ti-am face mai ușor? Oh, acolo este, chiar acolo. [Chicotește] E puzzle curcan ușor de recunoscut asta e aici. Dar ceea ce vreau să subliniez pentru tine, un lucru rece aici este apps nu știa nimic despre celălalt. Ei au spus doar, "Am o imagine de a împărtăși, și știu cum să se ocupe de imagini." Și tu ca un dezvoltator, nu trebuie să scrie acel cod. Atunci când cineva mă întreabă de a împărtăși, am de gând să pun niște date în această structură de date mic și am terminat. Cealaltă aplicație preia, face treaba acesteia, și că este sfârșitul de schimbul de experiență. Asta e doar un singur lucru pe care le puteți face - într-adevăr, foarte puternic - și-l va fi unul din acele lucruri care ar putea ajuta într-adevăr diferentia app și, de asemenea, jocul prea în magazin. Oamenii sunt de gând să fie în măsură să spună, "Acest lucru este foarte util." "Eu folosesc acest creator de puzzle tot timpul. Este fantastic." 

Asta e cam destul de o scurtă prezentare a ceea ce se întâmplă aici. Există o serie de alte caracteristici de asemenea, că, poate, vom sublinia ca vom merge prin cod. Dar vreau să se scufunde în slide-uri, și pentru a face asta, am de gând să merg la birou, care este ea însăși o altă țiglă vii aici. Pot să merg în acest lucru și, destul de sigur, eu sunt pe diapozitive mele, dar lasă-mă să-ți arăt de fapt unde suntem. Suntem de fapt, în modul desktop. Acest lucru este adevărat în cazul în care ceea ce spuneam mai înainte despre Windows reportul la noi experiente se arată. Aceasta este Windows stii. Aplicații Windows sunt numite aplicații desktop. Ei rula aici. Dacă ați aplicații existente și pe care doriți să le ruleze pe Windows 8, puteți face absolut asta. Acestea nu sunt aceleași lucruri ca magazin de aplicații, care sunt pe aici, cum ar fi vopsea proaspătă și aceste aplicații NBC News și lucruri de genul asta. Cei care vor veni de la magazin. Ele pot conecta la unele dintre caracteristicile pe care am fost care vă arată și alții care nu v-am arătat încă. Ci doar să păstreze în minte. Avem suport pentru ambele lucruri, de asemenea. Îmi pare rău. Este ceva care nu prezintă pe ecran? L-am pierdut complet. Asta-i ciudat. Bine. Vă mulțumim pentru subliniind că afară. Ceea ce nu s-au văzut pentru un timp este meu vă arată că spațiul de lucru este aici. Care este ultimul lucru pe care ai văzut-o? Ai văzut asta? Acesta este spațiul de lucru. Deja stii cum arata. Nu e nimic foarte neobișnuit. Se transportă noastră această experiență înainte pentru tine și permițându-vă să folosiți lucrurile pe care le-ați avut. De exemplu, voi fi arătându-vă Visual Studio. Aceasta este o aplicație desktop. Se va rula în acest mod. Se va sprijini un mediu mai complex cu o mulțime de opțiuni și lucruri de genul asta, asa ca o opțiune bună ca o aplicatie desktop face. 

Acestea fiind spuse, hai să mergem la slide-uri pentru doar un pic și vă va oferi unele conținut introductiv și apoi ajunge în codare de fapt aici. Vestea buna este ca am auzit ai fost concentrându-se pe o mulțime de CSS și JavaScript, HTML. Toate acele lucruri pe care le-ați fost de învățare de transport direct în procesul de luare pentru Windows Store aplicații. Lucrurile pe care le-ați auzit despre cu aplicarea selectoare CSS și toate acele lucruri este exact ceea ce faci pentru a crea o cerere aici pentru magazin. Vom merge prin aceste lucruri, puțin câte puțin. Practic, eu sunt bazându-se pe lucrurile pe care deja le-au luat timp pentru a învăța. Acesta este graficul de ansamblu a tehnologiilor pe care le-ar putea folosi pentru a face aplicații pentru Windows 8. Chestii pe dreapta, aplicații desktop, este într-adevăr ceea ce știm deja. Asta e chestia asta este într-adevăr Windows 7 lumea reportate în Windows 8. Toate aceste opțiuni de a duce mai departe: C #, VB, Win32 tip de dezvoltare. Mare. Nici o problemă. Lucruri noi este pe partea stângă. Asta e pentru Windows Store aplicații, atunci eu vreau să mă cererea mea fir în Windows 8 folosind toate aceste caracteristici, se ajunge în magazin, și să obțină această experiență foarte cool a aplicațiilor pentru Windows Store. Pentru a face acest lucru, puteți vedea aici, ai toate alegerile tale cu XAML, C + +, C #, VB, ai putea face DirectX, lucruri de genul asta, lucruri care merg dincolo de diapozitiv. Dar pentru noi, ne vom concentra chiar în pe faptul că HTML, CSS, JavaScript și sunt într-adevăr un cetățean de primă clasă pentru a face aplicații pentru Windows 8 și pentru Windows Store. Deci, acest lucru este bun pentru toată lumea de aici și oameni vizionarea pe video pentru că puteți utiliza doar toate acele experiențe pe care le au și într-adevăr cravată în ceea ce ofera Windows. Ai de gând să faci asta printr-un set de API-uri, care ar trebui să fie nici o surpriza. Fiecare sistem de operare are propriile API-uri. Noi expune ceea ce se poate face pentru Windows prin ceea ce se numește WinRT. Este un set de API-uri, care face ca totul pentru tine. Dacă aveți nevoie pentru a deschide fișiere, trebuie să utilizați aparatul de fotografiat, geolocalizare, lucruri de genul asta, acestea trec prin ceea ce Windows poate oferi pentru tine. Pentru a accesa că, avem mai mult unele JavaScript care va face și mai mult pentru tine să faci asta. Vom ajunge la faptul că într-o clipă. Dar de acum, care este practic harta rutieră. Lucrurile pe care le-ați fost deja face pe partea de sus a unor API-uri care vă ajută să funcționeze cu Windows este egal cu App Store. Și asta e de fapt despre tot ce trebuie să știi de la nivel înalt. 

Vom arunca cu capul în fapt de lucru cu chestii acum. Lucrurile pe care probabil le-ați văzut deja o grămadă de, cu IE9 un pic de timp în urmă am introdus suport pentru o mulțime de, la momentul respectiv, standarde noi în Web, astfel încât o mulțime de noi caracteristici CSS, o mulțime de noi HTML, ECMAScript 5, ceea ce este cu adevarat JavaScript. Deci, totul pentru că în afară de modul strict a fost în IE9. Doar o tonă de chestii cu CSS, CSS3, tot acolo. Și toate aceste lucruri duce mai departe în ceea ce facem noi cu Windows 8. Puteți folosi aceste lucruri, și puteți folosi tot ce e nou în IE10. Cu IE10 vom introduce suport pentru toate aceste lucruri, de asemenea. Sunt toate accelerare hardware, asa ca daca esti pe o mașină care are un fel de GPU, care este, probabil, destul de mult în fiecare mașină pe care le-ar putea obține în ultimii 8 ani, ai de gând să fie în măsură să aibă ieșire accelerare hardware, ieșire vizual cu CSS, Canvas, SVG. Toate aceste lucruri vor merge prin accelerare hardware și fie că mult mai rapid și mai eficient. Versiunea scurta de toate acestea - Nu sunt de gând să treacă prin fiecare lucru aici - dacă îl vedeți pe această listă, în cazul în care aveți posibilitatea să o faci în IE10, în cazul în care este o aplicatie web care rulați, care funcționează în IE10, E ceva ce se poate face ca o aplicație pentru Windows Store. Și asta e destul de mult. Deci, dacă acesta funcționează în IE10, ea va merge ca o aplicatie Windows Store. E pe masa ca pe ceva care le-ar putea folosi. 

Exista o multime aici. Nu avem până la miezul nopții, așa că nu pot revizui totul aici. Dar există unele site-uri care vă va ajuta să înțelegeți ce aceste lucruri se poate face, și vă voi arăta una dintre ele într-o secundă. Am vrut doar să subliniez câteva dintre lucrurile cheie pe care le-ar putea uita la. Poate că ați văzut deja unele dintre acestea în studii, dar acestea sunt foarte utile, în special cu Windows Store aplicații, de la partea de CSS. Deci, fiind capabil de a face transformări și tranziții, oferă mișcare cu animație - acestea sunt toate parte a CSS acum, și toate acestea sunt suportate de browserele moderne, și IE10 și IE9 au adăugat suport în timp pentru toate aceste lucruri. Și așa că de ce scrie el singur, de ce merge prin toate probleme de a face aceste lucruri de mână atunci ai putea folosi un simplu CSS transforma pentru a crea un efect 3D pentru aplicația dvs.? Mare. Asta e modul în care funcționează. Nu pot să-l mai dificilă decât cea fac. Dacă știi cum să-l facă în CSS, stii cum se face în aplicația Windows Store. 

Mergând dincolo de care pentru layout, lucruri cum ar fi chiar App Store, dar dincolo de asta, se uită la, poate, o aplicatie de știri care te arată articole sau rețete sau lucruri de genul asta, aceste alte tipuri de caracteristici în CSS sunt foarte utile: Grid, Flexbox, CSS Regiunilor este mai mult de o destul de nou standard, de asemenea. Aceste lucruri sunt toate de gând să vă ajute să stabilească în conținut și fluxul de conținut între secțiuni, putea face paginare și despărțirea în silabe fără a fi nevoie să scrie lucruri singur. Trebuie doar spune, "Vă rugăm să efectuați următoarele pentru mine," și ca imobiliar ecranului este diferit pe mașini diferite sau cum veți vedea într-o clipă, ca să fotografiați o aplicație de a avea sume mai mici de spațiu pe ecran, că e nici o problemă pentru CSS. Se poate profita de - Vom vorbi despre interogari mass-media într-un al doilea - se poate ocupa de lucruri cu repoziționarea conținutul dvs., care curge de conținut din regiunile doar cu aceste lucruri pe care este posibil să fi văzut deja cu tehnologie web. 

Pe partea de HTML5, există, de asemenea, o grămadă de lucruri , care va fi foarte util pentru tine cu Windows Store aplicații. Din nou, nu vom trece prin toate astea, dar sunt doar aici. Deci, dacă aveți nevoie să-l utilizați, audio-video, dacă vrei să faci validare de la forme, geolocalizare, toate lucrurile pe care le puteți face în JavaScript cu JavaScript 5 sau ECMAScript 5, IndexedDB pentru stocarea locală - acestea sunt toate opțiunile pentru tine. Dacă sunteți în căutarea pentru un răspuns, doar uita-te la tehnologiile existente cu HTML5 și CSS și veți găsi răspunsuri mai ușor decât să se rostogolească o mulțime de lucruri care te. Lasă-mă să-ți arăt în jurul valorii de un pic aici. Am un site, putem merge la. Lasă-mă să renunț din acest diapozitiv pentru o secundă. 

Dacă vom ieși la IETestDrive.com, Eu nu va face mult de un demo aici. IETestDrive.com este într-adevăr vă arată o mulțime de ceea ce este nou cu IE10, lucrurile pe care le puteți face. Mi se pare acest lucru este foarte util pentru că în loc de a citi printr-o grămadă de hârtii albe, uita-te la cateva demo-uri, și că o să vă ajute să-l puneți pe cont propriu radar personal despre faptul daca o tehnologie are sens pentru a face chiar orice mai mult de cercetare cu astfel încât veți înțelege, "Eu văd ce este pentru." "Am înțeles ce Cerere Animație cadru face pentru mine." "Eu înțeleg cum am putut folosi regiuni sau filtre SVG." Tu le vezi în acțiune, a le vedea pe un exemplu aici, și să decidă pentru tine, dacă asta va fi util pentru tine în propriile proiecte și dincolo de în timp ce continua să lucreze cu tehnologia web. Aici am dori să vă încurajez doar să aruncăm o privire. Nu cred că voi petrece mai mult timp de funcționare de fapt acestea. Avem suficient pentru a arăta cu scrierea de cod. Veți vedea aici lucrurile de la efecte de atingere la jocuri bazate pe atinge în această secțiune, animație, foarte repede accelerare hardware animație acolo, unele optimizări pe care le veți vedea în unele dintre aceste probe, precum și, și există multe, multe altele. Dacă te duci de aici și de a deschide harta site-ului, există doar un număr ridicol de probe aici. Le puteți vedea pe toate aici. Dacă sunteți în căutarea la ceva sau ai auzit despre ceva și vă întrebați, poate, acest lucru ar fi ceva grozav de a utiliza în aplicația, incercati sa cautati aici, și există, probabil, un demo destul de bun pentru ea să salvezi ceva timp. 

Bine? Orice întrebări până acum de cei de aici? Bine. Vom continua aici. Din nou, trebuie doar să verificați că afară. Acestea sunt standardele web, merge atât de la orice alte site-uri vitrina pe care le cunosc de și a vedea dacă aceste tehnologii face sens pentru ceea ce încerci să faci. 

Înapoi la diapozitive. Asta a spus, vă deplasați de la o lume Web pentru a într-adevăr o lume aplicație locală instalat, astfel încât există unele lucruri la punct aici. Mai întâi de toate, nu e nici un server web implicat aici. Nu e nici un Apache, nu e nici IIS rulează aici servind de pagini la un client la distanță, la un agent de browser-ul de la distanță. În acest caz, într-adevăr totul este ambalat pentru tine. Ce trimiteți ca cererea dvs. la magazin, acesta devine certificat, e în magazin, și apoi oamenii cu miile va instala jocul sau aplicația. Dar de fapt, ei se trage în jos la nivel local pentru masina lor. Nu este nevoie să mai iasă la Internet dacă nu aveți apeluri care au nevoie de un API de la distanță, și că este perfect normal ca prea bine. Dar ei nu vor să fie în modul în care ei trebuie să meargă de răspuns la solicitarea de pe un server pentru a obține următoarea pagină de conținutul lor. Astfel că a spus, există câteva diferențe minore API. Acestea sunt incredibil de minore. Acestea sunt puțin probabil să te-a lovit în codificare normal, dar sunt cel puțin documentate. Sunt un fel de margine de cazuri. 

Un alt lucru important să subliniem este diferențele de încredere. Menționez doar asta pentru că vreau să mă asigur că am spus-o așa că, dacă aveți o mai târziu, veți gândi, "Chris a spus ceva despre acest lucru, "Astfel, poate, da, bine,", și apoi te întorci și să afli ce a fost. Contexte contează. În mod implicit vom încerca pentru a proteja utilizatorul de vectori de atac. Există anumite lucruri pe care le puteți face în mod implicit și anumite lucruri care aveți nevoie pentru a schimba context, pentru a permite. Pe măsură ce utilizați unele biblioteci acolo - Ai fost deja de lucru cu jQuery, dar dacă te uiți pentru alte biblioteci acolo - s-ar putea folosi unele funcționalități acest tip de merge dincolo de utilizarea locală, are interacțiuni mai dinamice Cereri XHR, lucruri de genul asta. Uneori, s-ar putea găsi pe cei va fi dezactivat în mod implicit, și în acest caz, face doar o căutare, uita-te pentru contextul local și web, și veți afla cum să se stabilească acest lucru. Doar asigurați-vă că știa despre asta ca să începeți să folosiți alte cadre, care, trebuie să menționez, că ești perfect în stare să facă. Deci, dacă veți găsi un alt cadru - Vom vorbi despre asta într-un al doilea - pentru jocuri de noroc și doriți să utilizați că, doriți să utilizați unele biblioteci de control care sunt acolo și nu doriți să scrie lucruri care te - este o idee bună, nu? - puteți folosi absolut chestia asta. Există exploatație te-ai întors de la folosind orice fel de bibliotecă care se bazează pe JavaScript nimic, CSS, HTML5. Din nou, daca este ceva ce se poate face în IE10, care este un heck de o multime aceste zile, o poti face. Trageți-l în aplicația, trimitere că biblioteca JavaScript, și-l folosească în cererea dumneavoastră, doar păstrând în minte s-ar putea lovi un context de securitate din când în când - nu foarte des. 

Și apoi caracteristicile, vom trece peste câteva mai mult de cei ca mergem. UX vei fel de obisnui cu ce veți vedea mai multe aplicatii din Windows Store. Ai obține o simt pentru modul în care acestea funcționează și modul în care design estetic tinde să lucreze în diferite aplicații și ceea ce oamenii vor fi folosite pentru a se confrunta. Asta este într-adevăr importantă. Asigurați-vă că, atunci când porniți aplicația nu au nevoie pentru a citi un manual, pe care nu le fac, apropo. Acestea ar trebui să fie doar în măsură să începeți să jucați cu cererea dvs. și imaginind fără mare dificultate. Prin lipirea și aderarea la o mulțime de aceste practici, ai de gând să faci utilizatorilor o mare favoare, ceea ce face ca mai ușor. 

Bine. Un ultim lucru pe partea de API și apoi vom ajunge în scris de fapt cod. WinJS este chestia aia am menționat foarte pe scurt cu care tobogan complex cu toate aceste opțiuni diferite pe care le au pentru a face aplicații. WinJS, vă puteți gândi la ea ca la un prieten. Este prietenul tău pentru a vă ajuta să scrie lucruri mult mai repede. E doar JavaScript și CSS. Nu trebuie să-l folosească. Puteți să-l folosiți. Dacă aveți de gând să fie de asteptare pentru a caracteristici Windows, vei sfârși prin a folosind-o, dar în cazul în care există lucruri, cum ar fi unele modele de design sau de control pe care tu chiar nu doresc să utilizeze, doriți să utilizați altceva, este de până la tine. Decideți ce doriți să utilizați și stilurile pe care doriți să le utilizați. Caracteristicile din namespacing și clasa generație - de până la tine. Dacă preferați una sau alta, e în întregime alegerea ta. Este încă JavaScript și CSS. Dar este de gând să vă ajute să faci o mulțime de lucruri. De exemplu, aici este un subset de ceea ce se poate face, lucruri cum ar fi de ajutor de programare asincron cu promisiuni. Oricare dintre voi a auzit de sau au lucrat cu Node.js? Este un model comun de a lucra cu programarea asincron. Deci, practic ceea ce spui este, "Du-te face ceva, "Și ai de gând să-mi dea o promisiune care te vei întoarce la mine când ați terminat." Asta este, în esență, ceea ce se întâmplă. Astfel încât să nu înghețe cererea dumneavoastră în timp ce utilizatorul se întâmplă și alege un fișier sau ceva este în curs de transmitere jos de pe Web. UI rămâne receptiv. Și puteți face acest lucru prin utilizarea de programare asincron. Suna ridicol de complex, dar este foarte ușor pentru că sunteți folosind promisiuni și ai spus, "Du-te face acest lucru și atunci când ați terminat, suna din nou la această metodă." Asta e destul de mult. Asta e tot construit în a WinJS. Se va face mult mai ușor să scrie aplicații foarte flexibile și puternice. 

Puteți vedea restul de aici, o mulțime de animații. Probabil una dintre cele mai importante lucruri de pe acest diapozitiv sunt controale. Cred că am un întreg - Da, eu fac. Iată un exemplu de doar câteva dintre controalele pe care le puteți utiliza în aplicațiile dumneavoastră. Acest lucru este drept în sus de la WinJS. Nu se scriu aceste înșivă, ai spus, "Iată cum vreau să compună cererea mea." "Voi folosi o vedere de flip, așa că am putea merge între diferite fotografii." Nu te-am arătat Semantic Zoom. Vă voi arăta că într-o secundă. ListViews. Există GridViews. Le-ați văzut deja o rețea ca parte a cererii de magazin, astfel, abilitatea de a utiliza blocuri de conținut și derulând peste faptul că. Meniuri bara de instrumente, veți vedea din timp în timp. Bara de app v-am arătat cu această cerere vopsea proaspătă, de asemenea, așa că ai văzut cum puteți personaliza că prin punerea butoanele de pe ea și având ca ascunde departe atunci când nu-mi pasă de a folosi de asta. Asta este într-adevăr în totalitate până la tine pentru a utiliza. Acestea sunt toate controalele care fac parte din WinJS. O să-ți arăt cum să facă aceste în doar o secundă, dar nu e mai mult decât acest lucru, si mai important lucru este de a le folosi, dacă doriți, salvați ceva timp. 

Dacă aveți alte biblioteci de control pe care doriți să o utilizați, asta e foarte bine prea. Lucruri cum ar fi jQuery UI face o mulțime de acest tip de idee, de asemenea, oferind mai multe controale, care se extind ceea ce puteți face în HTML și JavaScript. Haideti sa patrundem inch am spus deja asta. Utilizați ceea ce doriți. Doar ține cont de faptul că s-ar putea rula în unele probleme de context. Dar puteți amesteca cu siguranță și se potrivesc orice fel de biblioteci esti confortabil cu, vrei să înveți, doriți să utilizați, să salvezi ceva timp. 

Hai sa vorbim despre instrumente doar pentru o secundă. Puteți obține ceea ce aveți nevoie pentru a începe lucrul cu Windows Store aplicații. Dacă mă duc înapoi, nu am prea multe lucruri aici. Dacă te duci la această pagină, care este dev.windows.com, puteți descărca tot ce ai nevoie. Pe măsură ce elevii, aveți acces la mai mult de publicul larg nu, astfel încât să puteți obține versiuni finale mai mari de Visual Studio. Edwin menționat puteți obține deja Windows, precum. Dar, în general, pentru toți dezvoltatorii, poti sa te duci la acest site și de a descărca tot ce ai nevoie pentru a face o cerere, și totul este gratuit. Deci, există o versiune gratuită de Visual Studio, există o serie de instrumente care va instala alături de care - tot ce ai nevoie pentru a crea și testa cererea dumneavoastră. Este doar atunci când ai de gând să publice cererea dumneavoastră de până la magazin care ai de gând să nevoie de un cont de dezvoltator. Acest lucru prea cred că este gratuit. Este gratuit pentru studenți, precum și? >> [Guarin] Care dintre ele? Contul de dezvoltator, depunerea efectivă. >> [Guarin] Da. Asta e mai mult o veste bună. Vei merge uita-te la asta. Se va spune de un individ în mod implicit este 49 $. Dar nu vă înscrieți pentru că ca un student. O să-ți aduc niște informații prin intermediul programelor pe care le puteți obține un cont gratuit, și care vă va permite apoi depune aplicațiile până la magazin, ca de multe doriți, și toate că bunătatea va urma în curând. Deci, asta e dev.windows.com. Puteți descărca instrumentele de care ați putea avea nevoie de aici. Și, dacă doriți, puteți obține o versiune de încercare de Windows aici, dar din nou, nu va trebui să. 

Alte site-ul - permiteți-mi să subliniez asta pentru tine rapid - este design.windows.com. Asta a fost dev.windows.com. Design.windows.com, puteți ghici ce e pentru. Este de fapt un site destul de prietenos. Există o mulțime de informații bune aici. Se poate lucra prin ea. O să vă dau câteva sfaturi cu privire la unele lucruri care poate că nu s-au gândit înainte sau au avut de a face cu înainte, cum ar fi proiectarea de atingere, de proiectare pentru diferite factori de formă, proiectarea pentru capacitățile de Windows 8, lucrurile pe care le-am menționat mai înainte cum ar fi căutarea și partajare, unele lucruri pe care nu le-am vorbit încă despre. Toate acestea sunt listate aici, și este un set destul de bun de pagini de fișiere de ajutor care vă va ajuta să înțelegeți modul de a face un anumit tip de aplicație, modul de a face interacțiune, cum să se ocupe cu UI și UX de aplicare dumneavoastră. Mi-ar recomandăm să aruncăm o privire la acest lucru, mai ales dacă sunteți la un moment dat în speranța de a publica o cerere de la magazin. Ai de gând să vrea să știe cum să facă o aplicație bună pentru că am menționat mai înainte, dacă nu, există aceste comentarii din nou. Oamenii vor să fie nefericit. Ei nu vor fi în stare să găsească lucruri pe care le așteaptă în locurile potrivite. Nimeni nu vrea să se întâmple asta pentru tine. 

A trece mai departe de aici, lasă-mă să închid asta jos. Acum, că știi unde pentru a obține lucruri, eu vă va arăta cum să începeți de fapt, folosind lucruri. Pentru a începe, eu vă va arăta de fapt, aici un exemplu de aplicații desktop de pe ecranul meu Start. Aici puteți vedea Visual Studio, puteți vedea Blend și alte instrumente de dezvoltare pe care le am. Ei au o țiglă ușor diferit. Asta pentru ca ele sunt aplicații desktop, și în aceste cazuri, toate acestea sunt de gând să lanseze înapoi la desktop-ul meu într-adevăr la fel de aplicații pe care ai folosit pentru a. Astfel încât experiența Windows, acesta este același lucru. Ele nu sunt, de exemplu, cum ar fi armate! sau aceste lucruri. Permiteți-mi să lanseze o repede. De fapt, aici este unul interesant. Acest lucru a fost dezvoltat de către studenții care lucrează în parteneriat la NERD. Aplicație ecran complet, aceste tipuri de experiențe de aici. Oh, ecrane tăiate frumos și tot felul de chestii distractive. Ei au dezvoltat aceasta. Am putea arata la fel de bine totul în timp ce suntem la ea. De fapt, am lucrat cu ei un pic, le-a dat câteva sfaturi cu privire la lucruri pentru că ei făceau JavaScript pentru aplicarea lor. Te rog, eu nu iau credit pentru munca lor, au făcut toată treaba. Doar le-am dat un pic de consiliere aici și acolo, dar au făcut niște lucruri minunate cu ajutorul unui front-end JavaScript și legarea în unele motoare fizice și lucruri pentru a face o mulțime de acest lucru. Du-te. Să vedem dacă funcționează. Wow, încă lucrat. Bine, bine. Dar ai prins ideea. O aplicație pe ecran complet, o experiență foarte bună. Acest lucru este de sprijin nu numai mouse-ul meu și pix dacă am lucruri de genul asta, dar, de asemenea, atinge. Dacă aș avea un ecran tactil, am putea trage doar pe el și să continue să lucreze cu asta. 

Un lucru nu am arăta, și motivul pentru care am adus asta este am vrut să am o altă aplicație pentru a vă arăta ce se poate face, puteți lua de fapt, aplicații în Windows și trageți-le în partea laterală a ecranului. Aceasta se numește rupă o cerere. În acest caz, am luat Inkarus și l-am adăugat la partea de aici. Ea este acum în vedere Ajustare, și care-mi permite să fac altceva în timp ce cererea este acolo. Cele mai multe jocuri care le veți găsi vor pur și simplu o pauză. Acesta este în mod normal, un lucru decent de a face cu excepția cazului în jocul tău poate scară într-un fel în jos pentru că mici de o rezoluție, cum ar fi, poate, un fel de jocuri de masă sau lucruri de genul asta pe ocazie. Dar, în general, cel mai ușor lucru de făcut și lucrul cel mai potrivit pentru a face pentru jocuri este de a întrerupe aplicarea. Pentru aplicații cum ar fi aplicații de știri, dacă am lansa aceasta și apoi l-am fixați, veți vedea că de fapt se schimbă în mod semnificativ în modul în care se prezintă datele pentru tine. Aici te arată într-adevăr o tigaie mai vertical care informații, dar eu pot utiliza în continuare absolut aplicația. Deci, este încă foarte util. Faptul că se află într-o imagine mai mică nu mă ține de ajutorul pe care app. Deci, cred că despre asta. Este ceva de care aveți nevoie pentru a avea aplicații dvs. de a face într-o anumită măsură, dar este de până la tine pentru a determina cât de funcțional aplicațiile dvs. ar trebui să fie în acest tip de un mediu mai mic. Lasă-mă să închid care o jos și du-te înapoi în cazul în care am fost aici. 

Edwin, ați adăugat o fotografie de mine deja? >> [Guarin] Da. >> [Bowen] Uită-te la asta. Vezi asta? Edwin a adăugat o fotografie. [Râde] 

Să ne întoarcem aici în Visual Studio. Lasă-mă să lanseze asta pentru tine. Am fi putut clic pe țiglă pe care ecranul de pornire. Mi-a adus înapoi în modul desktop, și se lansează aplicația desktop de Visual Studio. Acest lucru este Windows pe care le cunosc deja. Eu pot merge mai departe și de a crea un proiect aici. Ne vom concentra din nou asupra JavaScript, HTML. Am de gând să merg afară și selectați până aici sub JavaScript, Windows Store. Există o serie de template-uri pe care le puteți utiliza. De productivitate, aș recomanda să aruncăm o privire la unele dintre aceste altele aici ca Grila și Split. Sunt foarte util dacă faci o cerere care va avea acest gen de design si de navigare. Veți vedea aceste foarte mult. Cel pe care tocmai v-am arătat fost de fapt o instanță a cererii Grid. Deci, dacă crezi că ai de gând să fie a face o aplicatie de știri sau un cititor RSS sau ceva de genul asta care se ocupa cu intrări multiple pentru care doriți să arate în detaliu, gândiți-vă folosind una din aceste șabloane pentru a începe rapid și personalizarea de acolo. Dar doar ca să vă pot arăta toate părțile în mișcare aici Am de gând să creeze aplicația gol, iar apoi vom merge un pic mai adânc în detalii. Mă asigur doar că cererea gol aici. Se va crea întregului proiect pentru mine. Voi deschide lucrurile pe care vreau să-ți arăt în mod implicit. Permiteți-mi să măriți un pic pentru a vă arăta ceea ce a creat pentru noi aici. Lucrurile pe care ai de gând să se uite la primul toate sunt implicit pe nume. Deci, ai de gând să se uite pentru default.html, default.js, și default.css. Un alt lucru să subliniez este că avem deja o referire la ceea ce am menționat mai înainte. Acest lucru este WinJS. Nimeni de fapt, o numește acest nume mult timp aici. Este WinJS, Biblioteca pentru Windows pentru JavaScript. Dacă îl deschide, puteți vedea totul e aici. Există diferite fișiere CSS, nu este JavaScript. Este acolo pentru a vă ajuta. Este într-adevăr acolo pentru a oferi controale și stiluri și lucruri pe care le puteți folosi doar în mod automat. Dar, din nou, în cazul în care există lucruri pe care doriți să le utilizați în locul în termeni de stil și de alte controale, este în întregime până la tine. Eu vă va arăta cum să folosească o pereche de aceste lucruri chiar acum. 

Înapoi peste pe partea noastră stângă, permiteți-mi să vă arate pagina implicit HTML. Le-ați văzut deja lucrurile WinJS, și asta e tot ce se intampla acolo cu aceste linii de mijloc de marcare, doar aducerea în CSS implicit și aducerea într-un cuplu de fișiere JavaScript din WinJS. Nu aveți nevoie pentru a fi maestru de ceea ce se petrece în interiorul acestor fișiere. Este destul de interesant să aruncăm o privire la ei la fel de a revizui ceea ce se întâmplă acolo pentru că nu există tehnici intermediar și avansat destul de interesante întâmplă acolo, dar un lucru frumos este ca dezvoltatorii, puteți lua doar profita de ei, doar le folosesc și nu au într-adevăr să vă faceți griji despre asta. Puteți conduce încă o mașină, fără a fi nevoie să știe cum funcționează, nu? Deci, asta e genul de lucru care se petrece pe aici. Există controale și stiluri și alte chestii pe care poti sa te duci pur și simplu mai departe și de a folosi și codul pe care le puteți folosi într-o secundă, fără să știu ce e acolo. Aici sunt propriile fișiere. Acestea sunt locurile pe care le puteți modifica propriul CSS și propria JavaScript pentru a obține lucruri de rulare. Vei fi cu siguranță adăugarea altor fișiere JavaScript și, probabil, alte fișiere CSS ca proiectul dumneavoastră crește, dar acest lucru este de fapt doar un punct de plecare. Aici este Buna ziua, lume echivalentul a HTML, astfel încât ne-am întors în tag-ul body. În partea de sus, de altfel, este doctype HTML5, astfel încât veți recunoaște că, din ceea ce ați fost de lucru pe. Nu e complet IntelliSense aici, precum și, deci dacă faci lucruri, cum ar fi de tip într-o etichetă videoclip și extinde asta, ai învățat, probabil, despre faptul de care aveți nevoie pentru a face codare de rezervă pentru tag-uri de video în HTML5 - sau poate ai - pentru a se asigura că diferite browsere au suport pentru video. Avem lucruri de genul asta din HTML, JavaScript peste, peste CSS. Care este construit în, și vă voi arăta CSS într-o secundă. Aici aveți posibilitatea să mergeți mai departe și de a începe modificarea cod, marcajul. De fapt, înainte de a schimba ceva, am de gând să ruleze acest lucru și vă arată ceea ce veți obține. Ai de gând pentru a obține un ecran pe care puteți personaliza și apoi veți obține Buna ziua, experiența mondială aici. E fantastic, nu? Du-te și nava asta, nu? Conținut merge aici. Acesta este lucrul de bază. Se poate obține doar mai bine de acolo. Vom merge mai departe și se adaugă, în unele chestii. Am un pic de marcare am de gând pentru a copia aici doar astfel încât să nu trebuie să mă uit tastarea. Lasă-mă să aduc caseta de instrumente de aici, și voi fixa acest lucru pentru că voi face acest lucru de câteva ori. Toolbox, dacă nu ați văzut Visual Studio, este în cazul în care ai de gând să găsească o grămadă de controale. De asemenea, puteți pune fragmente de cod în ea pe care le puteți reutiliza. Aici voi apărea doar într-o altă HTML, nimic teribil avansat deloc aici. E doar HTML de bază preciza că am o intrare unde pot tip, Am un buton de unde pot să-l prezinte, iar apoi am un div care este, în esență, un substituent care pot folosi la ieșire "Salut, acest tip." Este intro de exemplu HTML. Dacă I ​​a alerga acest lucru, vom obține în mod automat HTML, dar, de asemenea, ne-am obține în mod automat de styling. Aceasta este una dintre cele mai importante lucruri din WinJS. O să vă dau în mod implicit unele arata si se simt ca este foarte consistent cu restul ce face Windows 8. Aici veți vedea lucruri, cum ar fi butonul. Butonul implicit în HTML nu arata ca asta, dar nu aici pentru că se face acest drept CSS din acest fișier CSS în WinJS. Dacă doriți să utilizați altceva, dacă doriți să modificați că, în regulă, mergeți mai departe și de a face ceea ce doriți. Dar asta e implicit. O să fie mult mai familiar pentru utilizatori. Și, desigur, acest lucru nu va face nimic, pentru că nu am sârmă de fapt la orice fel de cod pentru a răspunde la asta. A fost doar HTML. Așa că am putea scăpa de asta, și ne vom întoarce în aplicare nostru. 

Lasă-mă să comuta la default.js noastre. Acest lucru pare destul de complex, dar se face doar câteva lucruri pentru tine. Este șabloane. O să fie la fel în toate proiectele. Singurul lucru este de a face acest lucru este doar un fel de a cere, "Cum am ajuns aici?" și a zis, "Ești lansarea această aplicație pentru prima dată?" "Ești reluarea aplicația de a avea o fi suspendat?" Un cuplu de lucruri de genul asta. Într-adevăr, obiectivul nostru în acest dosar de aici are dreptate aici. În acest moment, aceasta linie de cod este destul de important. Este de fapt de gând să meargă și să caute prin toate markup-ul, și-l va găsi lucruri pe care le-ați cerut să fi transformat în control, controale mai profunde, cum ar fi un control de evaluare, cum ar fi vedere grilă, cum ar fi flyout și celelalte lucruri pe care le-am arătat cu privire la acest diapozitiv înainte. Nu sunt controale HTML native. Pur si simplu nu spune bara de instrumente ca un element și l-au știu ce să fac. Ceea ce am de fapt, nu este același lucru care se întâmplă în alte tipuri de cadre de control. jQuery UI face același tip de abordare generală. Folosiți marcaje în HTML, iar apoi unele de activarea JavaScript-vine prin mai târziu și spune, "Oh, eu știu ce este asta. Asta se cere acest lucru să fie transformat în chestia asta," care este alt HTML mult mai expresiv pentru a face ca un control de rating, care este ceea ce vă voi arăta chiar acum. Această linie de cod este o promisiune pe care spune, "Când această promisiune este îndeplinită, "Tot ce ai cerut a fost apoi a creat." Și asta e tot. Se pare un pic mai complex, dar este într-adevăr la fel în fiecare proiect. Aici este locul unde puteți începe adăugarea în orice altceva doriți să se întâmple, asa ca vom reveni la faptul că într-o secundă. 

Mai întâi de toate, am nevoie de un pic de cod care pot răspunde la faptul că cineva a făcut clic pe butonul. Am de gând să mergeți mai departe și a pus că în jos aici. Din nou, nu am de gând să facă orice tastarea în fața ta aici. Foarte de bază de activarea JavaScript-doar că, atunci când aceasta se numește vom fi oferit câteva detalii despre cum am ajuns aici și apoi vom face câteva lucruri de bază. Du-te găsi lucru din pagina mea de HTML, care este numit nameInput, apuca-l, ia valorii sale, palmă "Bună ziua", pe partea din față de ea, și stick că șir rezultat în care tag-ul div pe care am avut-o înainte că într-adevăr nu au avut nimic înainte. Acum, vom găsi că tag-ul și de a face conținutul său interior egal cu cel șir. JavaScript foarte simplu. Sperăm că sunteți recunoscând că nu e nimic neobișnuit se întâmplă aici. E doar drept în sus HTML și JS aici. Dacă am rula acest acum, nu este încă de gând să facă orice lucrare pentru că nu l-am cablat pentru a primi eveniment. Pentru a face acest lucru, voi face acest lucru chiar aici, din nou, revenind la set de instrumente mea, popping-l aici. Mă aștept să am văzut tot acest gen de lucruri înainte, așa că nu voi peste explica-o. Acum vom merge obține helloButton. Vom spune, "Button, felicitări." "Aici este un eveniment care acum răspund." "Atunci când cineva face clic pe tine, numesc această funcție, buttonClickHandler." Și asta e functia tocmai am adăugat chiar în jos în partea de jos acolo. Asta e tot. Deci, acum avem o aplicație uimitor funcțional. Cred că veți fi cu adevărat impresionat de aceasta. Chris. Așteptați pentru ea. Wow. Bine. Asta e uimitor. [Râde] Dar nu e mai mult. Nu-l cumpere încă. Așteaptă. 

Permiteți-mi să vă arăt un pic mai mult aici și ieși din ecran complet. Mergem să meargă înainte de a alerga. Lasă-mă să intru și de fapt, vă arăt un pic cu CSS. Doar în mod implicit, dacă ne uităm înapoi la pagina de aici, ori de câte ori ne-am tras în aceste lucruri de la WinJS și ne-am ui-întuneric, în fapt, îl puteți schimba la valoarea implicită pentru utilizarea aplicare lumină. ui-întuneric este bun pentru aplicații grafice, cum ar fi, folosind o multime de poze, te arată o mulțime de conținut vizual. Dacă sunteți care arată o mulțime de conținut textual, ui-lumina este, în general, o alegere bună. Nu trebuie să-l aleagă, dar l-am trecut la o iar acum vedeți același marcaj, aceeași tot, e doar folosind, practic, un sistem inversat aici în cazul în care totul este ceea ce face text negru pe alb. Asta e tot bine și bună. Lasă-mă să ies de aici, și hai să facem de fapt un pic mai mult cu CSS. O să-l pun înapoi pe întuneric pentru că eu cred că este, probabil, mai ușor pentru a vedea pe ecran atunci când am începe să faci aceste lucruri. Am de gând să înlocuiască organismului o mai mult timp. Voi merge aici. Lasă-mă să bombardeze acest lucru. Să aducem în organism cu clase. Cred că ai făcut selectori de bază, cu CSS și lucruri de genul asta deja, deci probabil știți ce se întâmplă pe aici. Doar atribuirea unor clase de antet noastre, și suntem crearea unui nou div pentru a încheia restul de chestii pe care le pot folosi acum pentru stil toate împreună. Deci, ce pot face acum este de a merge pe la CSS noastră implicit. Te-ai uitat la întrebările mass-media încă? Ai vorbit despre asta, la toate? Interogări mass-media fac parte din această tendință emergente - sau este un trend stabilit acum de fapt pe Web - pentru proiectare receptiv sau de adaptare, iar ideea este că aplicațiile dvs. într-adevăr se poate ajusta în mod corespunzător bazat pe ceea ce dispozitivul pe care ei fiind afișate pe poate face. Deci, dacă sunteți pe un dispozitiv mobil, în mod evident, nu vei avea imobiliare la fel de mult de ecran cum va la o mare monitor de 30-inch de zi cu un birou, un calculator mare ca asta. Deci, răspunsul vechi pentru că ar fi de a avea 5, 6 versiuni diferite ale aceleiași pagini și te-ai deschide versiunea care a fost acordat pentru că anumite ecran de dimensiuni. Nu este mare. Este foarte, foarte repetitive și există o tona de întreținere pentru a face asta. Acum avem ceva numit interogări mass-media CSS, și putem folosi acest lucru pentru a detecta în mod automat atunci când există anumite dimensiuni sau anumite utilizări ale conținutului efectuate. Astfel încât să puteți răspunde la acest lucru și vă pot spune, "Bine, în acest caz, "Probabil nici nu ai nevoie de mine să-ți spun ce se întâmplă pe aici." Acest lucru este doar că în cazul în care această cerere este rupt, așa cum ți-am arătat mai înainte - hapsân al și pune la marginea ecranului - atunci hai să facem următoarele stilul. Styling nu este vorba doar despre culori și chestii de genul asta. Este, de asemenea, cu privire la dimensionarea și marjele si piese și orientări de conținut sau chiar dezactivarea sau care să permită părți întregi de pagina dvs. și, în acest caz, aplicația sau jocul la fel de bine. Deci, aici puteți face la fel de simplu, după cum doriți. Acest lucru nu ar fi util în aplicațiile dvs., dar e timpul demo, așa că am de gând să merg mai departe și trebuie doar să adăugați în selector corp de bază și spune, "Când am rupt, să mergem mai departe și de a face fundal și să alegeți ceva." Ai IntelliSense aici. Acest lucru este de fapt foarte misto. În 2012, am adăugat o mulțime de lucruri pentru sprijin CSS și JavaScript și HTML. Le-ați luat, desigur, IntelliSense drop-down de asemenea, dar asta nu e un lucru grozav. Cool thing este că ai selectoare vizuale pentru o mulțime de lucruri, de asemenea. Deci, ai putea să mergi prin și doar alege o culoare, sau poti sa te duci afară și să fie chiar mai specifice și puteți alege - acest lucru va fi teribil. Voi alege de fapt, o culoare decent aici. Uita-te la marcaj de asemenea, apropo. Acesta este formatul standard de RGB acolo. Dar, dacă am schimba opacitatea, se va trece la un selector de canal alfa aici. Deci, se poate vedea că, de culoare cu esență, transparența la sută pe care le au pentru că toate coapte chiar acolo. Am de gând să-l păstrați ca 100% și apoi, când am terminat cu asta, totul este bine și bun. Acum, dacă am alerga app și vom lua aplicația și am fixați, care culoarea de fundal este reglată automat doar pentru că avem niște CSS care spune, "Du-te face asta." De asemenea, puteți scrie de activarea JavaScript-prea, care va face același lucru sau pe care le-ar putea folosi pentru a opri de fapt un joc, face lucruri de genul asta. Asta e, probabil, atunci când ar folosi JavaScript. V-ar opri bucla de joc la acel moment. Ai avea nevoie de ceva de activarea JavaScript-pentru că nu ar fi ceva ce ar CSS pentru. Dar păstrează în minte este doar un eveniment. Ai putea spune, "Când cererea mea este redimensionat, "Să vedem dacă suntem rupt." Și asta e tot. 

Bine? Am vorbit foarte mult. Sunt întrebări până acum pe unde suntem? Da. [Elev] Există un tutorial pentru oricine pentru a obține mai multe informații? >> Da. Întrebarea este, există un tutorial pentru asta? Voi extinde doar pentru tot. Există câteva lucruri pe care le puteți merge la. Să plecăm de fapt, de aici. Lasă-mă să mă întorc aici. Un lucru să subliniez este Visual Studio în sine are tutoriale construit inch Lasă-mă să scap de asta. Dacă te duci și de a crea un nou proiect, nu de fișiere, New Project, si uita-te pe partea stângă, există un nod online în acest selector. Este de gând să ia un pic. Sunt pe MyFi mea aici. Dar o să vină și o să-mi dea o șansă de a găsi template-uri dar, de asemenea, mult mai important, precum și probe. Așa că am posibilitatea să faceți clic pe JavaScript. Se va găsi probe pentru mine. Rezoluția mea este un fel de mare aici. În mod normal, ar trebui să vedeți o listă cu o mulțime de lucruri diferite aici. Dacă e ceva ce doriți să încercați, alege limba, JavaScript aici, și spune, "Eu nu știu cum să facă geolocalizare." "Nu știu cum de a deschide un fișier." "Nu știu cum să profite de webcam "Sau optimizarea pentru atingere sau lucruri de genul asta." Există probe pentru orice: de partajare, căutare, baruri app, efectuarea de apeluri de la distanță la un serviciu, codare JSON. Toate aceste tipuri de lucruri există probe de aici, și ei nu sunt probe uriașe, care sunt de gând să vă luați toată noaptea pentru a trage în afară doar pentru a găsi că un lucru pe care a vrut să învețe. Sunt foarte bune. Sunt mici, chiar la punctul de tipuri de probe. Am învățat o grămadă de a merge prin intermediul acestor mine, și așa că am recomanda ca o mulțime ca un singur lucru. 

Un alt lucru să subliniez prea este, desigur, am arătat ce dev.windows.com, așa că, dacă te duci înapoi la faptul că, veți vedea în partea de jos există, de asemenea, probele de aici. Astfel încât să puteți descărca toate dintr-o dată, dar există, de asemenea, o mulțime de alte resurse aici care vă pot ajuta să obțineți până la viteza. 

Un alt lucru, și aș recomanda cu adevărat să încercați acest lucru, Am luat-o pe blog-ul meu, dar voi merge doar dreptul de a-l. O să-ți arăt. Blog-ul meu are resurse și lucruri de genul asta. Unul dintre lucrurile pentru a subliniez este chiar aici, acest lucru: ideea ta. App dumneavoastră. 30 de zile. Dacă faceți clic pe acest lucru, te va aduce la un site foarte util. Acest lucru este mult mai util decât ați putea aștepta. Acest lucru se întâmplă să fie de 30 de zile de conținut pe care le puteți obține, practic, sfaturi și trucuri de-a lungul acestui proces ca creați o aplicație. Și cum nu se poate aștepta, se poate obține de fapt, pentru jocuri prea și pentru aplicații de telefon, lucruri de genul asta. Deci, practic semneze pentru ea, și ei vor fi să vă trimită sfaturi și trucuri despre, "Te-ai gândit despre a face acest lucru? Nu te sprijini Ajustare?" "Iată câteva linii directoare cu privire la modul de a face acest lucru de bine." "V-ați gândit despre trimiterea la magazin?" "V-ați gândit cum ai de gând să-și vândă cererea dumneavoastră?" Se va merge prin toate aceste lucruri diferite. Și, de fapt, daca esti pe pista de jocuri, la un moment dat veți începe să recunoască persoana vorbesc cu tine pentru că am de fapt, a trebuit să merg la Redmint de a face aceste și înregistrate 2 clipuri video acolo. Dar asta e tot parte a pistei de jocuri de noroc, și există, de asemenea, o cale complet pentru dezvoltarea generală app. Asta se numește Generation App. Mi-ar recomanda cu siguranta pe care să vă la fel de bine, în plus față de probele. 

Există o mulțime de clipuri video pe un site numit Canalul 9, de asemenea. Acesta este, probabil, ultimul lucru pe care voi recomanda la fel de bine înainte de a trece pe aici. Channel9.msdn.com. Acest lucru este mare, deoarece tu nu vei fi citit prin tone de hârtii albe. Este practic o multime de clipuri video, screencast și lucruri care sunt direct la subiect. N-ar trebui să spun că e mereu la subiect. Depinde care este de a face vorbesc. Dar, în general, există unele clipuri video într-adevăr la punctul de aici care vă va arăta ceva special, ar putea să doriți să învețe sau să vadă demoed. Există, de asemenea, toate de conținut nostru de la conferința noastră că sa întâmplat acum câteva săptămâni numit Build, și veți vedea că acolo. Există tehnologii de bază pentru Windows 8 jocuri. Acolo te duci. Am fost acolo, de fapt. Nu mă poți vedea. Am fost pe aici. Dar oricum, asta la o parte, mi-ar recomandăm să aruncăm o privire la aceste clipuri video. Sunt destul de util. Dacă sunteți blocat pe ceva sau vrei doar pentru a vedea ceea ce ar putea face ceva, foc celor sus. 

[Guarin] Windows Mail tocmai mi-a trimis un e-mail cu un link la conținut pentru ca elevii să descărcați cu mostre de cod și chestii de genul asta. >> [Bowen] Mare. Minunat. Mulțumesc, Edwin. 

Bun. >> [Elev] Am o întrebare. >> [Bowen] Oh. Da, vă rog. [Elev întrebare nu pot fi auzite] >> [Bowen] Oh, mă bucur că ai întrebat asta. Da. Întrebarea a fost, există o interfață vizuală pentru mine pentru a crea lucruri? Edwin vă va răsplăti cu generozitate pentru această întrebare. Există o modalitate de a face acest lucru. Ar trebui să o facem acum? Să o facem acum. Am de gând să merg la ea chiar acum. De fapt, permiteți-mi să adăugați într-un lucru la acest demo, și apoi vă voi arăta răspunsul real. Am fost de gând să adăugați un pic mai în CSS aici. Am fost un pic off pe tangente aici. Lasă-mă să pun în unele CSS aici pentru a profita din clasele pe care le-am adăugat puțin timp în urmă, la antet, a div mainContent, iar apoi să greetingOutput. Dacă fac asta și rulați-l, puteți vedea acum avem un pic diferit padding și marjele, așa că avem de fapt, unele decalaje aici. Acestea sunt mai mult față de ceea ce ai de gând să se aștepte de o cerere de lustruit final. Dar eu sunt doar arată asta pentru că este drept în sus CSS. Astfel lucrurile pe care le știți deja, puteți utiliza aici pentru a ajusta conținutul după cum doriți. Le-ați văzut deja cum să facă schimba fundalul în acest fel. 

Dacă mă duc înapoi la HTML nostru, am de gând să adăugați într-un set mai mult de marcare, și acest lucru este, de fapt va fi un control de la WinJS. Am de gând să merg și apuca această, o etichetă. Permiteți-mi să vă asigurați că o fac în locul potrivit. , Probabil, destul de bun. Aici Tocmai am adăugat - și vom merge full screen, astfel încât să puteți vedea totul - Am adăugat o etichetă pentru div următor. DIV este numit ratingControlDiv. De la sine se va face nimic. Dacă deschideți acest lucru într-un browser, te-ai fi uitat la gol, div sine. Dar, din cauza acestei linii misterios de cod pe care le-am arătat mai înainte, procesul de toate, o să uite pentru ceva care arata ca acest lucru - date-win-control - și-l va găsi tot ceea ce este în acel parametru. Se va face o instanță de orice, care este este îndreptat la. În acest caz, este un control de rating, așa că am spus, "Vă rugăm să mergeți și să înlocuiască acest lucru "Cu tot ce trebuie să faceți pentru a face un control de rating." Acesta ar putea fi un control de flip, ar putea fi inelul de progres sau orice control pe care doriți să o utilizați. Toate acestea sunt de gând să lucreze, în esență, în același mod. Sunteți folosind standard de markup HTML5 pentru a indica ceea ce vrei, și apoi ai de gând pentru a obține un control la sfârșitul acestui. Lasă-mă să rula acest. Tocmai am copiat ca în, și acum că marcare devine aceasta, care este de fapt destul de un număr de elemente HTML. Acestea sunt toate imaginile individuale, și nu e divs din jurul lor, cu selectoare. Sperăm că puteți vedea că. Este un pic mai subtil. Pot să treceți peste diferite elemente, și o să-mi permite pentru a vedea ratingul aici. Am posibilitatea să faceți clic pe ea, și-l amintește de rating, dar asta e despre asta. Ea nu face nimic cu rating. 

Ultima lucru pe care vreau să-ți arăt în acest înainte de a trece într-o experiență de design mai mult vizual este un pic de cod pe care le pot utiliza pentru a răspunde la aceste controale WinJS. Lasă-mă să ies de acolo, din spate de ecran complet, și trece pe la JS aici pentru a doua. Pot să fac asta aici. Cred că voi înlocui toată chestia asta. De fapt, cred că va înlocui toate de ea, dar vom afla împreună. Voi pune asta aici. Da. Am de gând pentru a șterge acest lucru prea. Ce am adăuga? Se pare ca o mulțime. Nu e mult. M-am extins linia de cod care am vorbit deja despre înainte, și eu spun, "Când totul se face, atunci când s-au făcut toate controalele mele, "Apoi face acest lucru." Deci, apoi executați această funcție, numit terminat. În acest caz, aceasta este lucruri pe care le puteți da seama. Du-te găsi că un control div. De fapt, nu e un lucru pe care ar trebui să subliniez. Că linia următoare este de fapt spune, "Am că ratingControlDiv." "Vreau să vorbesc cu el ca și cum ar fi un control real, un control WinJS." Deci, practic, tu ceri asta de la ea. Vrei să spui, "Vreau să vorbesc cu tine, ca un control." Și apoi puteți începe să spui lucruri de genul, "Vom adăuga un ascultător pentru tine ", Astfel încât atunci când sunteți schimbat putem răspunde la asta." Și apoi putem face, de asemenea, lucruri de genul asta. De fapt, asta e vechiul cod acolo. Cred că am pierdut lipire într-o funcție mai mult, și că ar fi funcția propriu-zisă, care va răspunde de controlul de rating a fi schimbat. Permiteți-mi să pop că în chiar aici, undeva pe acolo. Și în acest caz, singurul lucru care este nou este faptul că vom intra în ceea ce ne spune de control de rating și ne cere pentru ceea ce se numește tentativeRating. Există o grămadă de alte lucruri diferite, că un control pot să vă spun, și se duce un control de control. Este foarte simplu. Veți fi capabil să-l dau seama nici o problema nici un fel. Eu conduc, iar acum, când am schimba rating și faceți clic pe rating, puteți vedea acum este de fapt a răspunde la ea. Se pune că de rating de pe ecran în care tag-ul div altfel gol sub controlul de rating. Asta e magia de o mulțime de lucruri aici. Deci, după cum vă crearea de aplicatii pentru Windows Store, există o tona de controale pe care le puteți utiliza doar. Toate acestea lucrează ca aceasta. 

Lasă-mă să-ți arăt partea vizual de proiectare pentru aceste aplicații. Vestea buna este ca vei avea deja acest instrument atunci când instalați totul dacă te duci la care a descărca și veți obține Visual Studio. Am posibilitatea să faceți clic dreapta pe acest. Nu voi zoom inch Doar spune Open in Blend. Blend este un alt instrument care lucreaza cot la cot cu Visual Studio și este axat mai mult pe partea de proiectare a lucrurilor, asa ca suprafețe într-adevăr instrumente care sunt optimizate pentru crearea de stiluri, crearea de animații, de lucru cu CSS, o mulțime de lucruri în acest tip de venă. Iată ce ar trebui să fie foarte interesant si destul de evident imediat este ne uităm la app. Să sperăm că încă sunt. În loc de a vedea cod, pe care noi încă nu vedem în partea de jos, vedem reprezentarea efectivă a cererii. Ce e mai mult, nu este doar o reprezentare a aplicației, aceasta este de fapt funcționare app. Și asta e ceea ce este cu adevarat frumos despre Blend. Echipa a făcut o mulțime de muncă pentru a aduce HTML și JavaScript și CSS în acest instrument. Acum puteți de fapt, daca esti curios, "Ce înseamnă asta? Ce pot să fac?" Eu poate proiecta de fapt, la această cerere, chiar dacă lucruri de genul acesta nu există în markup mea. Amintiți-vă că controlul de rating? A fost doar o etichetă div. Chestia asta, că stele, există numai în timpul rulării. Cum știu asta? Există un pic de magie aici. A se vedea aceste fulgere? De fiecare dată când vezi un fulger, ceea ce înseamnă că a fost creat de ceva în timpul rulării. Unele JavaScript fugit și sa transformat ceva în această sau a creat acest lucru cu o anumită logică. Acele stele pe care le vedeți au fost create de activarea JavaScript-de WinJS. Cel mai frumos lucru este, nu contează pentru mine, eu pot încă o proiecta, Eu pot merge în continuare la si schimba-l, pot afla ce se întâmplă pe aici, Am sa te uiti la CSS, eu pot merge mai departe și de a afla de ce culoarea este așa cum este, Pot începe joc cu lucruri și de a face lucruri oribile, tot ce vreau să fac. De fapt, voi lăsa lucrurile în pace. Dar puteți vedea aici totul e CSS și te arată aici. Dacă mă duc până la acolo, o să-ți arăt tot ceea ce ei numesc câștigătoare, astfel încât regulile CSS care sunt cele mai specifice și mai selectate pentru acel element, pe care le-ați probabil deja trecut peste în clase, în cazul în care se poate spune că e un font general, pe care le aplici la tot, dar pentru ca acest lucru este un H1 și am o culoare definit pentru h1s, aceasta va fi această culoare, și asta pentru că e mai specific decât body1. Un singur lucru chiar aici toate de care arată, și este într-adevăr lucruri de puternic ca să obțineți mai complexe, vă întrebați de ce aceste lucruri sunt așa cum sunt. Acesta vă va spune de fapt, și puteți alege oricare dintre aceste elemente aici. Culoarea nu este prea rău, de fapt. Le puteți selecta. Sperăm că puteți vedea acest lucru. Pentru tot ceea ce aveți cu privire la cererea dumneavoastră, veți vedea un întreg cascadă din toate CSS, care ar putea fi aplicate pentru că și care unul este câștigător, care unul a avut de fapt prioritate. Acestea sunt un fel de plictisitoare. Nu e mult întâmplă în unele dintre acestea. Dacă mă duc și schimba culoarea, atunci veți începe să vedeți ceva în cascadă acolo. Puteți folosi, de asemenea, HTML aici, de asemenea. Eu pot merge prin și modifica proprietățile HTML pentru toate aceste lucruri așa cum am dori. Nu este vorba doar de tone de lucruri aici. 

Nu vreau să iau timpul de a merge prin tot aici. Doar știu că e aici. Există o mulțime de funcționalități orientate spre design care e doar disponibil pentru tine astfel încât să puteți sta vizual, de lucru cu cererea, și nu au de a face o mulțime de ghicitul care le-ar trebui să facă în mod normal și cu bicicleta înapoi de la un browser înapoi în design-ul, înapoi la browser-ul. Acest lucru este foarte chestii misto pentru că, și pe măsură ce dezvolta o aplicatie Windows Store, se va face o mult mai productiv. 

Veți vedea, de asemenea, este de urmărire marcajul aici și CSS-ul ca esti de lucru prin lucruri diferite. Este, probabil, foarte greu pentru tine pentru a vedea că, mai ales pe video, dar asta e ceea ce se întâmplă aici, și aș recomanda să vă familiarizați cu asta. Aceasta va salva o mulțime de timp. Asta-i Blend. Dacă ați face orice modificări aici, ei vor în mod automat pentru a transporta înapoi peste pentru Visual Studio. Sunt aceleași fișiere, e acelasi tot. O să-l lase în pace. Am un exemplu mai bun pe care vreau să-ți arăt. Dar dacă am făcut o schimbare acolo și a salvat-o și m-am întors la Visual Studio, s-ar spune, "Hei, te-ai schimbat ceva. Pot să-l reîncărcați pentru tine?" Da. Și sunteți folosind aceleasi lucruri acolo. Acesta este sfârșitul acelei probe. 

Vreau să-ți arăt un eșantion final mai mare doar pentru a vă oferi o vedere de alte funcționalități ai putea crede despre la fel de bine. Aceasta este o mostră aplicație care le puteți descărca. Dacă te uiți pentru ceva numit Camp Windows într-o cutie, există unele probe, care sunt în, și una dintre ele este Contoso Carte de bucate. Eu pot rula doar asta pentru tine. Splash screen personalizat. Aceasta este aplicația vedere Grid. Ei au legat niște date personalizate aici. Puteți naviga prin această. Puteți merge și să ia o privire la diferite lucruri care ne va face foame pe o vineri după-amiază. Nu știu. Ce este de gând să mă facă mai e foame? Nu știu. Mă duc pentru a alege unul. Te duci în aceste lucruri. Acesta vă va arăta reteta. Ai putea, de asemenea, în loc să faceți clic pe un element, poti sa te duci chiar la acea categorie de conținut, care secțiune a conținutului. În acest caz, puteți citi o mulțime de fals latină vă spun despre toate aceste retete aici și apoi du-te drept în rețeta specific. Aceasta susține, de asemenea lucruri, cum ar fi partajarea pe care le-am arătat mai înainte cu imaginile. De asemenea, puteți căuta în această aplicație prea. Este foarte simplu de a face căutarea. Practic, esti doar obtinerea un șir de text din Windows și să decideți cum doriți să se ocupe de căutare cu asta. Sunt câteva linii de cod pentru a obține că, și atunci ce faci cu ea, după care este complet până la tine. 

Aici, ei au, de asemenea, un bar aplicație în care ei folosesc o altă funcționalitate. O să-ți spun exact ce este. Un memento se va folosi ceea ce se numește o notificare pâine prăjită. Acest lucru este foarte la îndemână pentru a lăsa utilizatorul să știe atunci când lucrurile s-au întâmplat, ca o cerere a fost instalat sau ceva a fost finalizată. Este, de asemenea, bun pentru jocuri prea. Dacă aveți o lume persistentă sau un consiliu de lider și un serviciu care este de găzduire, care poate pe o mașină separată, aceste notificări pot fi trimise într-o mașină și chiar dacă utilizatorul nu folosește jocul, jocul sau rulează aplicația, ei pot obține în continuare notificări cu privire la aceste tipuri de evenimente. Deci, ai putea spune, "castelul a fost distrus sau este vorba doar de distrus." "Întoarce-te aici, și-l apăra," sau ceva de genul asta. Faceți clic pe notificare, du-te înapoi în joc, și puteți să-l joace. Deci, aceste tipuri de lucruri pot ajuta într-adevăr atrage oamenii înapoi în aplicația destul de eficient. 

Există, de asemenea, să sprijine în această aplicație pentru utilizarea microfon, camera web, a face video și fotografii. Puteți fixa, de asemenea, o țiglă secundar. Este util dacă doriți să aveți doar o țiglă care merge drept la un anumit conținut. În acest caz, se merge direct la aceasta reteta. Tot ceea ce am menționat Eu doar arătând pentru că este lucruri pe care vă puteți gândi despre utilizarea, de asemenea. Pentru cea mai mare parte, ele sunt foarte simplu de folosit. Mi-ar recomanda doar vă aduc ca probă explorator și de a găsi un eșantion care vă pot arăta cum să faci asta. Este destul de simplu să îi aducă pe cei în aplicațiile de acolo, de asemenea. 

Am fost de gând să-ți arăt ceva care e destul de cool aici. Voi fixa această cerere, și am de gând să se întoarcă la Visual Studio. Această aplicație se execută. Se execută de la Visual Studio. Eu pot face unele lucruri destul de cool cu ​​asta. Eu am de fapt, o opțiune pentru a selecta un element, și eu pot merge pe aici la cererea live și eu pot spune, "Mă întreb de ce este Timp de preparare un pic mai usor de culoare gri decât titlul în sine?" Am posibilitatea să faceți clic pe ea. Se va sincroniza înapoi în Visual Studio, și o să-mi arate exact conținutul generat care a dus la acea parte a UI. Deci, în acest caz, este element-subtitrare și H4 dublu construct, și că, probabil, ne spune ce trebuie să știm pentru că ca un H4 în acest context, se va obține un anumit tip de font. Dar dacă eu încă nu știu de ce, am posibilitatea să faceți clic pe Trace stiluri. Eu pot extinde apoi la culoare si pot afla exact de ce culoare nu este culoarea caroseriei dar, de fapt, este cu totul altceva. Aceasta este, în esență, instrumentele de dev de la Internet Explorer la un grad adus în Visual Studio. Dacă ați lucrat cu instrumente Chrome Dev, Firebug, lucruri de genul asta, aceste tipuri de instrumente care sunt în browser-ul, acest tip de funcționalitate a fost adus chiar în Visual Studio astfel încât să nu aveți de fapt, de a lansa un browser și să lucreze cu aceste instrumente separat. Acum am o aplicatie Windows Store doar de funcționare, și eu pot începe trăgând-o afară și de a afla de ce lucruri fac ceea ce sunt. 

Pot, de asemenea, face acest lucru prea. Pot merge și alege doar ceva chiar de la marcajul și de a afla ce este în cerere. Cred că am plecat de tot. Aici am situându-se peste aceasta. Pot să-l selecta. O să-mi arate în cererea de funcționare efectivă în cazul în care acel lucru este că eu sunt acum faceți clic pe în markup. Chestii foarte misto. Așa cum sunteți încercând să dau seama ce se întâmplă și ceea ce HTML este de a face, ceea ce CSS este de a face, ține minte acest lucru. Amintiți-vă acest lucru este aici pentru tine și, de asemenea, că Blend poate lucra cu o aplicație care rulează în direct. 

Ultima lucru pe care am vrut să-ți arăt cu această aplicație - Apropo, se arată delte ca lucrurile se schimba prea, astfel încât să puteți viziona pentru aceste accente de galben. Acestea sunt lucruri pe care doar s-au schimbat în cerere. Dar un ultim lucru. Vreau să mă întorc la Blend doar pentru o secundă aici. Vom deschide în sus, Open in amestec, aceeași aplicație, aceeași tot. Vreau doar să-ți arăt experiența de aici nu este doar te-ai blocat pe pagina de start uita la lucrurile pe care le veți obține în mod implicit atunci când rulați aplicația și se lasa sa stea acolo. Puteți activa, de asemenea, pe această pictogramă destul de mic aici. Se numește modul Interactiv. Faceți clic pe asta. Se va aduce la cererea dumneavoastră. Nu mai ești în modul de proiectare, deci nu vei fi faceți clic pe lucruri pentru a schimba funcționalitatea, dar se poate lucra de fapt cu aplicația acum. Puteți să faceți clic prin, poti sa faci orice, ajunge la o reteta pe care o pasa sau la o categorie. Să mergem la această categorie. Voi spune, "Bine, aici este locul unde vreau să proiecteze." Apoi, faceți clic din nou pe buton, acesta vă va aduce înapoi în suprafața de design, iar acum poți să faci toate acele lucruri pe care am fost vorbesc despre înainte. Voi continua clic până când am obține acest selectate, pentru a afla dimensiunile sale, afla HTML pentru aceasta, CSS pentru ea pentru o aplicație care rulează, o parte mai târziu a cererii. Foarte, foarte util. Voi arăta asta. Vă rugăm să păstrați în minte, dacă sunteți în căutarea într-un cod scris cu acest deoarece este de gând să vă salva o mulțime de hassle, și este chestii destul de bine. Asta e destul de mult tot ce am vrut să-ți arăt pe Blend și în Visual Studio pentru toate astea. 

Orice întrebări cu privire la oricare dintre aceste instrumente? Nimic, la toate? >> [Guarin] Am lucruri pentru a da afară, întrebări atât de bine, lucruri bune. 

[Bowen râde] V-am arătat deja demo-uri mele de aici. Am de gând să-l pună pe pagina de resurse și să se întoarcă la întrebări acum. Că în primul rând de referință este că Generation App site-ul cu piesa de joc si piesa app. Înscrieți-vă pentru cei care. Nu trebuie să așteptați de 30 de zile pentru a obține conținutul. Puteți începe să mergi și se uită la conținutul după cum doriți. Am înțeles de cadre de timp ar putea fi diferit de - [râde] Deci, atunci când este Hackathon? Asta-i câteva săptămâni, nu? Deci nu aveți 30 de zile să aștepte. Deci da, puteți să vă înscrieți pentru că și apoi începe doar trăgând conținut de la ea. De asemenea, Dev și Centrele de proiectare. Și nu am menționat acest lucru, dar există, de asemenea, Store Docs. Acest lucru ar fi de la Hackathon ca esti gata pentru a începe prezentarea aplicațiile pentru magazin. Există unele linii directoare utile aici, unele îndrumări cu privire la modul de a obține lucruri în magazin, unele probleme comune pe care le-ar putea excursie sus, și că este sfârșitul acestor resurse. 

Deci, ce e în mintea ta? Orice altceva pe care le - [Guarin] Cine se gândește la a face o aplicatie pentru Windows pentru CS50? Rece. [Bowen] cool. Mare. 

Orice întrebări cu privire la lucrurile pe care le-ați văzut până acum și modul în care aceasta se referă la acest lucru? De exemplu, cu mai mult timp am putea lua un joc pe care l-am scris și care se execută în browser-ul și doar un fel de du-te prin procesul de de a aduce că în Visual Studio și de a face o aplicatie Windows Store. Este nevoie de mai mult timp decât am avut într-adevăr pentru a include astăzi, dar versiunea scurtă este că e același cod pe care le-ați rulează în browser-ul, și lucrurile pe care le schimba sunt lucrurile care vă decideți să conectați la Windows 8. Deci, dacă doriți să utilizați farmecele, dacă doriți să căutați sau partaja, aveți nevoie pentru a crea o bară de aplicație pentru a ascunde unele funcționalități pe care, acestea sunt tipurile de lucruri pe care le-ar schimba. Dar nucleul de aplicația web poate rămâne intact. Din nou, atâta timp cât funcționează în IE10, acesta va fi un port foarte ușor pentru a aduce lucruri care în Visual Studio, în amestec, și să-l o aplicatie Windows Store. Din nou, singurele lucruri pe care va trebui să învețe sunt acele alte caracteristici pe care le puteți folosi pentru a aprinde o aplicație, cum ar fi o țiglă în direct și acestor tipuri de lucruri. 

Da. >> [Elev] Întrebarea mea este de aproximativ de lucru mobile. Deci, dacă ați face o aplicație care funcționează ca o aplicație de pe desktop, este foarte ușor să-l transfere la mobil, sau există o - Întrebarea este, dacă am face o aplicație pentru Windows Store, care este foarte optimizat pentru acest mediu și vreau să-l aducă la o lume mobilă, ceea ce este implicat în a face asta? Că, la fel ca multe întrebări, este întotdeauna un răspuns în continuă schimbare. Vestea buna este ca daca esti lipit cu HTML și JavaScript, CSS, dacă sunteți incepand de la o aplicație pentru Windows Store, este de gând să te las să-l aducă pe Web și apoi a folosi aceste tipuri de tehnici, cum ar fi interogări mass-media și de lucruri, pentru a se adapta la diferite dispozitive de dimensiuni. Asta a spus, există întotdeauna cadre și lucrurile acolo că sprijinul extinderea pe diferite tehnologii, platforme diferite. Asta schimba tot timpul. Suntem, de asemenea schimba lucrurile la fel de bine ca privim spre ceea ce avem acum de fapt, cu Windows Phone 8. Avem unor infrastructuri de bază comune oferit între aplicații pentru aceste medii. Deci, lucrurile pe care le faci pentru a crea o aplicație pentru Windows Store, o mulțime de care poate transporta peste într-o aplicație Windows Phone 8, de asemenea. Care din nou este o poveste în curs de dezvoltare, astfel încât nu există o parte a conținutului despre care la Build. SDK-ul tocmai a ieșit în urmă cu puțin timp. Acesta tocmai a fost lansat în urmă cu puțin timp. Dar, în ceea ce privește alte platforme prea, probabil că rula în multe cadre cross-platform, de asemenea. Vestea bună este lucrurile pe care le faci aici, funcționalitatea de bază este de drept în sus lucrurile standard de web. Singurele lucruri care nu s-ar traduce cu ușurință sunt lucrurile pe care le face Windows 8, dar asta nu e de mirare, pentru că este o caracteristică Windows. Nu sunteți de gând să găsească de partajare sau tipuri similare de contracte pe orice altă platformă. Deci, acestea sunt lucrurile pe care le-ar dori să dintr-o perspectivă de design asigurați-vă că aveți modalități de fel de abstract care astfel încât să puteți spune, "Dacă am rulează pe aceasta, eu pot face asta." Dacă nu sunt, există unele modele de design care le puteți utiliza la fel de a ascunde lucruri care departe. Dar ține minte asta. Da. Scuze. Dă-i drumul. 

[Elev] Dacă vreau să testeze aplicația mea Windows pe partea de sus a [inaudibil] [Bowen] Da. Am sărit un lucru prea. Da. Voi răspunde la întrebarea dvs. în primul rând, atunci vă voi arăta o caracteristică am uitat să menționez. Avem unele mașini disponibile pe plan local. Îmi pare rău. Întrebarea a fost, cum pot testa lucruri pe dispozitive dacă nu se întâmplă să aibă o mulțime de lucruri pentru a alege de la? [Guarin] Vă împrumutat voi, cred, 5 sau 6. Cât de multe ai nevoie? [Elev] Avem 4 dintre ele. >> Bine. Voi trebuie 4 placi să se joace în jurul cu. Deci cu siguranta sa stie toata lumea, te rog. [Râde] >> [Bowen] Awesome. Acesta este un răspuns chiar mai bine decât am fost de gând să vă dau. Avem ore de birou pentru dezvoltatori pe care le facem la sediul nostru și acum în curând la Microsoft Store pe la Pru, dar Edwin a avut deja grijă de tine. Există 4 placi disponibile pentru creditare, pentru testare. Acolo mergem. Există un exemplu de acolo într-o sus. Deci, da, absolut. Mare. Absolut de departe cel mai bun mod de a testa este de a fi pe un dispozitiv. Dacă nu se întâmplă să aibă o încă sau nu doriți să meargă în campus în zăpadă pentru a apuca unul sau orice altceva, există o modalitate de a face acest lucru din nou în Visual Studio. Dacă mă duc înapoi în cazul în care am fost aici, aici, în loc de a folosi Local Machine, ai putea conecta de la distanță la mașină, dar asta nu e ceea ce vorbesc despre aici. Simulator este un lucru pe care ați putea dori să se uite în. Voi face acest lucru, și într-adevăr ceea ce este, este, în esență, o fereastră de pe propriul sistem. Aici este, de fapt rulează sistemul meu, care rulează Contoso, dar într-un mod care permite-mi schimba unele dintre parametrii de execuție, parametrilor de mediu. Deci, eu pot spune aici, "Știi ce?" Oh. Eu deja am rulează într-un simulat monitor de 27 inci la rezoluție 2560. Pot picătură cu ușurință că în jos și a vedea ce s-ar face la cererea mea cu un ecran mai mic sau prin modificarea setărilor DPI sau orice altceva. Deci, pe un ecran mic, o 10.6, ceea ce este de gând să faci? Că încă arată destul de bine, nu? Veți dori să faceți acest lucru, mai ales dacă sunteți prezentarea la magazin, pentru că noi facem ca parte a procesului de testare. Și dacă există probleme de genul asta, atunci s-ar putea rula într-o problemă obținerea certificării pentru magazin. Dar asta face parte din simulator. Foarte cool. Foarte ușor să faci asta. Puteți folosi, de asemenea, caracteristici cum ar fi rotirea ea, de asemenea. Am posibilitatea să faceți clic pe butonul aici, l-au roti, vezi ce cineva ar avea ca o experiență rotație ardezie lor, comprimat lor, și folosind aplicația cu care. Există câteva alte lucruri, cum ar fi legătura de emulare și alte lucruri, stabilirea GPS. Pot să mă prefac că sunt la o altă locație și să vedem ce face cererea mea când mă prefac că m-am întors în Seattle sau ceva. Dar este o caracteristică foarte utilă, și este construit în atât Visual Studio și în Blend. Da. Întrebarea dumneavoastră. 

[Elev] Dacă sunteți scris un joc, nu Visual Studio are nici un suport pentru animație? Da. Întrebarea este de aproximativ sprijin animație, în special cu jocuri de noroc. Depinde. [Chicotește] Cu JavaScript, voi spune că e, probabil, un sprijin mai puțin decât există pe partea de XAML, care are termene, are schițe și lucruri care sunt construite inch Pentru animații pe JavaScript aplicații, nu știu cât de mult un răspuns vreau să-ți dau. Am resurse de pe blog-ul meu care trec printr-o mulțime de opțiuni pentru ambele animații fizica, opțiuni pentru jocuri de activarea JavaScript-orientate pe Windows 8. Te-ar referi la cei. Practic, există atât de multe opțiuni. Motivul pentru care am ezitat e că există atât de multe opțiuni pentru a face animații cu JavaScript. Ar putea fi CSS, ar putea fi bazată pe Canvas, ar putea fi animații DOM doar de bază, ar putea fi o mulțime de lucruri diferite, așa că într-adevăr depinde de alegerea ta. Dacă vă decideți să utilizați ceva de genul Create.js sau de tei sau alte tipuri de cadre - Ei bine, eu nu sunt sigur ai de gând să fie în măsură să utilizeze un cadru final mai mare Impact place sau construi. Care tinde să genereze mai mult de cod decât s-ar putea lua în considerare de la zero. Dar, în aceste cazuri, ai putea folosi în continuare un simulator, puteți utiliza mediile, și am tendința de a folosi doar acest mediu pentru platforma mea de test, în aceste cazuri, ca eu sunt in curs de dezvoltare de jocuri. Am fost bine mai ales cu animații Canvas, care este, probabil, cel mai comun lucru. Cel mai bun ai de gând să găsi, probabil, este instrumentele dev în browser-ul și instrumentele dev în Visual Studio. Un fel de răspuns șerpuit acolo, dar sperăm că am primit răspunsul. Da. Te. 

[Elev] Care sunt opțiunile de stocare a datelor pentru Windows 8 Apps? Care sunt opțiunile de stocare a datelor pentru Windows 8 aplicații, Windows Store aplicații? Opțiunile dvs. sunt într-adevăr fiecare aplicație devine propriul bazin de stocare locală pentru setările și pentru date, dar este, de asemenea, ridicol de ușor de utilizat de stocare de roaming, de a folosi de stocare cloud-based. Este gratuit. Ce se întâmplă este să alegeți de fapt o clasă diferită și spui, "Setări de roaming, Salvare, acest set special de conținut," și contul lor Microsoft, tot ce-am semnat în drept, va fi cheia pentru serviciile de roaming care informațiile în jurul. Deci, dacă am folosi jocul pe laptop-ul meu și apoi am conectați cu același cont și am juca jocul pe o suprafață sau o tabletă, care va călători în mod automat că setarea și de date între aceste mașini. Asta e un lucru implicit. Asta e bine pentru anumite cantități de date. Tu nu ar pune o imensa baza de date în cele. Pentru că aveți nevoie pentru a merge la alte tipuri de soluții, cum ar fi o bază de date a găzduit în nor, lucruri de genul asta. Există și alte opțiuni de comunitate în jurul altor tipuri de tehnologii de date. Am văzut unele opțiuni SQLite în comunitate în jurul acolo. Deci, mai mult și mai sunt în curs de dezvoltare, dar acestea sunt lucrurile principale pe care le-ar arata spre pentru un joc sau o aplicație. Si tu ai avut o întrebare în spate prea. 

[Elev] În ceea ce privește rețeaua de [inaudibil] încărcarea sau descărcarea de fișiere [inaudibil] [Bowen] Este întrebarea ta, cum poti vedea asta sau cum puteți depana că și testați-l? [Elev] Cum poți să-l depanare [inaudibil] Scuze. Nu pot să aud totul. [Elev] Cum puteți obține o eroare testat și, de asemenea, [inaudibil] Mare. Mare. Cum lucrați cu rețele? Cum poți să vezi ce se întâmplă? Există mai multe răspunsuri diferite la aceasta, dar permiteți-mi să vă arate, probabil, cele mai simple lucruri aici. Lasă-mă să scap de simulator pentru un al doilea. Doar câteva opțiuni de depanare pentru crearea de rețele. Există un teanc complet rețea coapte chiar în atât la nivel WinRT și din WinJS, astfel încât să puteți face foarte ușor XHR, de tip AJAX apeluri de la joc sau aplicație pentru a face acest lucru. În primul rând, am tendința de a folosi 2 lucruri. Eu folosesc instrumentele dev reale în sine, care au o stiva de rețea coapte în ele. Lasă-mă să-ți arăt pagina de pornire Windows. Eu pot aduce asta, și nu e de fapt un proxy rețea coapte în aceste instrumente de aici. Deci, eu pot face acest lucru, eu pot necesară încărcarea paginii, și o să-mi arate toate interacțiunile, inclusiv AJAX solicită acea sesiune, pentru o durată că cererea lui. Acest lucru este util. Acesta va fi foarte util pentru aplicații bazate pe browser. Pentru alte tipuri de aplicații, inclusiv Windows Store aplicații, Eu folosesc un instrument numit Fiddler. Ai de gând pentru a obține un joc în răspuns. [Chicotește] Scripcarul este un proxy simplu. Cred că pot arăta că pentru tine. E doar GetFiddler.com, care, destul de interesant, eu calc stiva mea rețea O să GetFiddler. Dar oricum, Fiddler a fost scris de către unul dintre premieri pe echipa IE, așa că știe ce face. Acesta este un bun proxy pe care le puteți folosi pentru traficul în rețea depanare. Mi-ar recomanda. Întrebarea pe acolo. 

[Elev] Există o modalitate ușoară de a integra intrare limbă străină, cum ar fi japoneză sau chineză, în aplicații pentru Windows? Eu nu pot spune că am făcut prea mult de ea mine, dar acesta este copt inch Există opțiuni pentru emiterea, desigur, cererea dumneavoastră - Îmi pare rău, nu am spus la întrebarea - opțiuni în jurul valorii de globalizare, localizare de conținut, inclusiv lucruri cum ar fi posibilitatea de a vinde în piețe diferite și țintă că versiunea de cererea dumneavoastră pentru aceste limbi individuale sau culturi sau lucruri de genul asta. Absolut construit inch Am avut un sprijin pentru că, pentru totdeauna, și că duce mai departe în opțiunile pentru Windows Store. Puteți face acest lucru în magazin în sine, să vândă în piețe diferite, puteți face acest lucru în cerere, precum si cu utilizarea resurselor pentru a defini, "Dacă am dezvoltat pentru această cultură, apoi utilizați aceste suprascrie pentru conținutul meu textual "Sau de a folosi un drept la cititor la stânga." Acestea sunt toate parte din WinJS implicite și WinRT API-uri. Bună întrebare. 

Cum facem? Orice alții? Și dacă cineva pe video are probleme, eu cbowen @ microsoft, așa că eu sunt fericit să ia oricare dintre întrebările dumneavoastră de viitor. Foarte - Din viitor, viitor [imita ecou]. Deci, aici sunt eu. Lasă-mă să pun din nou contactul meu aici. Deci, doar trimite-mi o notă, cbowen @ microsoft, și I se va intoarce la tine cât de repede pot. 

Orice altceva care vă întrebați? Suntem bine? Mare. Bine. Vă mulțumesc tuturor foarte mult. Apreciez asta. [Aplauze] 

[CS50.TV]