[Powered by Google Translate] [Seminar - Windows 8 - App / Game Development med HTML5] [Chris Bowen, Edwin Guarin - Harvard University] [Dette er CS50. - CS50.TV] 

Hej, alle sammen. Mit navn er Edwin Guarin. Dette er Chris Bowen. Jeg vil lade ham præsentere sig selv i et sekund. Jeg ønsker blot at gøre en hurtig meddelelse. Først og fremmest, alt du CS50 studerende får Windows 8 gratis. Så hvis du tænker på rent faktisk at bruge det til din endelige projekt, er det dit. Nate vil sende en e-mail senere for at få instruktioner. Den anden ting er, hvis du beslutter dig for at skrive en Windows 8 app til din CS50 afsluttende projekt, vi kommer til at gøre nogle foræring: en Xbox, vi måske være i stand til at give en skifer væk, den slags. Så hvis der er noget der holder dig tilbage, lad Chris eller jeg kender hvordan vi kan hjælpe dig med at opbygge noget virkelig cool. Så tak igen for at komme i dag, og jeg vil aflevere det til Chris. 

Tak, Edwin. Tak, alle, for at tilslutte os i dag. Jeg er Chris Bowen. Jeg er en af ​​Edwins kolleger her i det nordøstlige. Jeg ville bare bruge en lille smule tid med dig at tale om hvordan man laver en Windows Store ansøgning med HTML5, JavaScript og CSS og art få eventuelle spørgsmål, du måtte have om det svarede til dig som du søger mod tænker måske bruge det til en CS50 finalerne mulighed. 

Det er sagt, vil vi bare dykke ret i. Jeg vil gå over til dias herovre. Hvis du har spørgsmål, er du velkommen til at sende mig en mail. Jeg cbowen@microsoft.com, og der er min blog og min Twitter. Men du ønsker at komme i kontakt med mig, det er fint. Jeg har fået omkring en time af ting, og jeg ønsker at få dine spørgsmål på vejen, så du skal ikke være genert om at have spørgsmål under dette. De kan ikke se, hvem der stiller spørgsmålene om registrering, så du vil være så anonym som du ønsker at være. 

Lad mig dykke ret i, bare give dig en hurtig introduktion til Windows 8, og vise dig et par af de ting om Windows Store apps som du måske overveje som du tænker på at udvikle en applikation. Vi kigger på Windows 8. Vi har været ude for et par uger nu. En masse af stærk vedtagelse derude allerede. Du har måske allerede set overfladen maskiner, som vi har så godt. Der er en herovre faktisk kan du tage et kig på, hvis du er her i person. Jeg virkelig ønsker at tale med dig, vise dig rundt en lille smule om Windows 8. Ideen med Windows 8, det virkelig betyder at fremsætte alle de ting du ved om Windows ind i nogle nye oplevelser - især ting som på overfladen maskine med touch, disse slags flere mobile enheder, der nu er på markedet, men det er også Windows på sin kerne. Så det betyder, at du kan installere det virkelig på noget, der kører Windows 7, fra din største triple SLI gaming rig ned til din bærbare computer og til din skinnende nye andre enheder, som du måske hente i dag. De vil køre Windows 8. Jeg vil vise dig rundt bare en lille smule, og alle de oplevelser, som du vil se her, er ting, som du kan oprette. Ideen er, om det er touch, mus, tastatur, hvad enheden er, at du kører din ansøgning på, det kommer til at køre godt. Windows 8 vil hjælpe med alle disse scenarier. 

Disse slides bort, lad os bare få ret i at tage et kig rundt her. Lad mig vise dig rundt i mit hjem skærmen. Dette er min startskærmen. Jeg vil bare give dig en lille smule af en tur her. Jeg er på et ikke-touch-maskinen, så meget som jeg ønsker at røre ved min laptop skærm, vil det ikke gøre en ting, så jeg vil bare rulle rundt her lidt og vise dig. Nogle ting du måske bemærke er det faktum, at disse såkaldte levende fliser faktisk kan animere, og de kan give oplysninger til dig - måske opdateringer på statistikken for et spil eller vise dig nyheder fra nogle af de tidligere apps, der er her på venstre side. Der vi går. Jeg er sikker på, det er kun positivt og fantastisk god nyhed. Du kan se her er det virkelig kalde din opmærksomhed tilbage til app, sagde "Hey, der er noget nyt her. Tag et kig. Kom tilbage i og se, hvad der er nyt for dig." Det kaldes levende fliser, og du kan gøre meddelelser enten lige fra selve programmet eller hvis du tager et kig nærmere, vil du finde ud af, hvordan man skriver en ekstern tjeneste der rent faktisk kan skubbe oplysninger til fliser, hvilket er, hvad der sker med disse nyheder apps. De er rent faktisk at få nyheder fra skyen og opdatering flisen lige der så folk ved, at der er en grund til at åbne programmet og tage et kig uanset på hvilket de seneste nyheder er i nogen af ​​disse eller hvis der er nye opskrifter eller en ny high score til at slå eller en ven at spille eller hvad på disse applikationer. Det er noget at lokke dig igen Så det er den levende fliser, og det kunne være en person, kunne det være en hjemmeside så godt. Normalt er det et program. 

Stort set alle disse ting, som jeg har her kom fra Windows Store. Jeg vil starte der. Det er en af ​​de applikationer, som du får som standard på enhver maskine, der kører Windows 8. Du kan komme her for at finde noget, du gerne vil have, fra ting, der er fremhævet på spil, som jeg ikke har set før. Oh, wow, vi har fået en ny pinball her. Du kan installere disse her fra butikken, og vi vil tale om, hvordan man kan udvikle disse. Du har en masse valg i, hvordan du opretter dem. Vi fokusere på JavaScript-historie med HTML og CSS, men til brugeren, til køberen af ​​app, det er ligegyldigt, hvad det var skrevet i. De kan gå videre og arbejde med det. Jeg fascineret af denne ene, så jeg har brug for at åbne denne op og tage et kig. Hver app, herunder dem, som du kan indsende og sælge eller give væk gratis, uanset hvad du ønsker at gøre i butikken, vil få en hjemmeside som denne. Du kan indsende din ansøgning en flok skærmbilleder - du se nogle her - oplysninger om programmet, og over tid vil du samle begge ratings - de er dybest set bare den stjerneklassifikation - og anmeldelser som giver lidt mere indsigt. Faktisk, nogen har til at skrive noget, og fortælle dig, hvor fantastisk du er, og der vil gå ind i din anmeldelser sektion herovre, som jeg ikke har kigget på. Fantastic. "Vil ikke selv åbne." Hvor stor. Tja, for de folk, for hvem dette gjorde åbne og køre, synes de at virkelig nyde det. [Griner] Hold dette i tankerne. Internettet. Alle kan sige, hvad de vil om din ansøgning. Så sørg for at du laver et stort stykke arbejde med det, sørg for at du gør det så behageligt for brugeren, som du kan fordi de er et par klik væk fra at give en bedømmelse, og der vil akkumulere op til din samlede rating. Og du ønsker at gøre dit bedste, fordi du kommer til at være op mod andre applikationer. Der vil være tusindvis af apps allerede i butikken, og chancerne er, kan der være noget, der gør lignende funktionalitet til, hvad du laver. Så hvis du virkelig kan skille sig ud fra mængden, der kommer til at være til din fordel, selvfølgelig. 

Vi vil komme ind i butikken lidt senere. Jeg virkelig ønsker at fokusere på at skabe apps. Men den korte version af butikken er verdensomspændende distribution, det er automatisk en del af Windows 8, folk bare fyre den op og tage et kig på forskellige apps her, har du Dress-Up Sticker Book og alle former for forskellige apps. Frisk maling, jeg bruger dette en masse - dårligt, men jeg bruger det meget. Det viser mig, at jeg allerede ejer det. Lad mig vise dig noget, jeg ikke har - UVideos Jeg har ikke som helt nye. Du ser her det er gratis, så du kan installere det lige fra butikken. Du har valg også. Du kan selvfølgelig give det væk. Du kan sætte reklamer i app eller spil. Du kan også oplade for det, og du kan meget nemt give en retssag for ansøgningen samt så du kan lade folk prøve det i en uge eller hvad du ønsker at gøre. Det er bare tilpasses gennem portalen. Du behøver ikke skrive noget kode til det. Så du siger, "Du kan bruge dette for en uge og derefter you got at købe det," eller du kan gøre ting som, "du kunne spille de første 3 niveauer i dette spil "Og så er du nødt til at købe for at få adgang til resten." Du kan endda gøre in-app køb så godt, så du kan sige, "Vi har fået yderligere eventyr eller sæt af grafik eller ting, der er låst - "Flere opskrifter, der er låst -. Hvis du køber disse udvidede sæt" Og du kan gøre det hele inden app eller et spil i sig selv. Så helt op til dig, dit valg. Der er en masse ting, du kan gøre i butikken, og så dybest set du indsender det til en certificering kanal. Vi kan tale om, at en lille smule senere, men det er målet. Du ønsker at få din app på verdensplan synlighed i butikken her. 

Tilbage på skærmen Start her, vil jeg gerne vise dig rundt en lille smule mere. Hvis jeg starter disse apps, så lad mig give dig et eksempel på nogle cross-app funktionalitet her. For at gøre det, vil jeg starte frisk maling. En ting du kan se her, er hver eneste bit af skærmen, alle pixels på skærmen, skal du gå til din app. Borte er de dage, hvor du har disse grænser omkring vinduer med masser af knapper, der er altid der tager plads hele tiden. Nu kan du virkelig ønsker at komme væk fra det og bare have dit indhold være i fokus. Vi kan gøre ting med Windows ved at få adgang til andre former for menuer. En af dem er faktisk, hvad der kaldes charme bar, og det kommer ud fra siden af ​​skærmen. Du kan faktisk bladre fra side, hvis du har en touch skærm, kan du højreklikke, hvis du har en mus, der er en tastaturgenvej til det, der er altid mere end én måde at gøre noget i miljøet her. Det bringer en række ting, du kan gøre. Det mest oplagte er, at du kan gå tilbage til startskærmen men de andre 4 er det, der kaldes charme. De er kontrakter, som du kan sætte ind som en app udvikler. De er temmelig cool. Søg, jeg er sikker på, det er noget, du vil gøre, deling jeg vil vise dig i en anden, og Enheder og indstillinger, disse er alle ting, som din app kan indsættes i at udnytte Windows, for at sige, "Jeg har gjort min del "Og jeg vil have Windows til at støtte nogle andre funktioner, ", Og jeg ønsker ikke at skrive en masse kode til at få til at ske." Det er virkelig en fordel ved at bruge disse funktioner. Lad mig vise dig en. For at gøre det, vil jeg lave en ny maleri. Jeg talte også om at bruge hver pixel til din app. Som standard er det, hvad malingen app ser ud, når du bruger den. Det er virkelig bare om hvad du tegner, dit indhold. Jeg kunne gøre forfærdelige ting her. Hvad skal jeg tegne? Det ved jeg ikke. Skriblerier? Tiders. Jeg kan gøre skriblerier. Fantastic. En kalkun? [Griner] Dette er den mest abstrakte kalkun du vil se. Jeg kan også bringe op, hvad der kaldes app bar, og det er virkelig en af ​​de vigtigste måder, du kan bruge at skjule væk alle de ting, der kunne have været på din app eller spil før bare optage plads hele tiden. Så nu kan du sætte det op her, og det er virkelig en af ​​de mere smukke erfaringer med app bar, jeg har set. Sæt valg her for at vælge forskellige farver. Vi ønskede en kalkun, så vi vil sætte nogle brune her, begynder at blande i et par farver. Vi tager en mellemliggende farve her og derefter komme tilbage her. Du kan begynde at tegne. Der er din kalkun. Fantastic. Jeg kan ikke tegne til at begynde med, men at gøre det med en touchpad foran et publikum er endnu bedre. Det er awesome. Ideen er dog, alt det, jeg holder af, er lige her på overfladen. Lad os sige, jeg er så tilfreds med dette, at jeg har fået til at dele det med nogen. Normalt, hvad du ville gøre med andre versioner af Windows, ville du måske tage et skærmbillede, ville du gøre nogle copy-paste af din tekst eller ting som at du vil dele ud, og derefter gå ud og åbne et andet program og sætte det ind i det. Her behøver du ikke at gøre det. Du kan faktisk bringe ud af charms bar og sige, "Jeg ønsker at dele denne." På dette punkt er det kommer til at vise dig alle de apps at vide, hvordan man arbejder med, hvad der bliver delt. I dette tilfælde er det et billede, så det kommer til at sige, "Jeg kan se du har et billede." "Ønsker du at dele det?" Du kan se, jeg e-mail mig kram hele tiden. Det erkender det, og det tilbyder mig, at som en genvej, men det er også at vise mig hver app, der ved, hvordan man skal behandle med at tage et billede og gøre noget med det. Disse har alle oplyst til Windows, at de kan gøre det. På dette tidspunkt er Windows. Brugeren blot vælger, hvad de vil gøre med det. Jeg vil gøre mit sædvanlige af PuzzleTouch. Du kan se, jeg har skabt alle former for gåder over tid. Jeg tager PuzzleTouch og sige, "Jeg ønsker at dele denne fantastiske skabelse med PuzzleTouch". Det kommer til at gå videre og sige, "Great. Du ønsker at dele denne? Fantastic". "Ønsker du at lave et puslespil, der er let, mellemliggende, uanset hvad?" Jeg vil gøre en mellemliggende en her. Det gør puslespillet. Det kommer til at være en forfærdelig gåde, fordi det er for det meste tomt. Men det er klar, og det er faktisk tilbage i det andet program. Hvis jeg kommer ud her, kan jeg søge efter det og starte det. Nu, hvis vi ruller i løbet af bare en lille smule her, bør vi se min skabelse eller andet sted. Hvor blev jeg gå? Hvilken slags puslespil gjorde jeg gøre? Har jeg gøre det nemt? Åh, der er det, lige der. [Griner] Det er let genkendelig kalkun puslespil, der er her. Men det, jeg ønsker at påpege over for dig, cool ting her er de apps ikke vidste noget om hinanden. De sagde blot: "Jeg har fået et billede til at dele, og jeg ved, hvordan man skal håndtere billeder." Og du som udvikler, behøver du ikke at skrive, at kode. Når nogen spørger mig at dele, vil jeg sætte nogle data ind i denne lille datastruktur og jeg er færdig. Den anden app overtager, gør sine ting, og det er i slutningen af ​​erfaringsudveksling. Det er bare én ting, du kan gøre - virkelig, virkelig kraftfuld - og det kommer til at være en af ​​de ting, der virkelig kan hjælpe med at differentiere din app og også dit spil også i butikken. Folk vil være i stand til at sige: "Dette er virkelig nyttige." "Jeg bruger dette puslespil skaberen hele tiden. Det er fantastisk." 

Det er nok af en kort oversigt over, hvad der foregår her. Der er et par andre funktioner også, at måske vil vi fremhæve, når vi går gennem kode. Men jeg ønsker at dykke ned dias, og at gøre det, vil jeg gå til desktop, som selv er en anden live flise her. Jeg kan gå ind i dette, og sikker nok, jeg er på mine dias, men lad mig vise dig faktisk, hvor vi er. Vi er faktisk i Desktop mode. Dette er virkelig, hvor det, jeg sagde før om Windows fremførsel til nye oplevelser viser sig. Dette er den Windows du kender. Windows-programmer kaldes desktop apps. De kører her. Hvis du har eksisterende apps, og du ønsker at køre dem på Windows 8, du kan absolut gøre det. Disse er ikke de samme ting som butikken apps, der er herovre, som frisk maling, og disse NBC News apps og ting som. De vil komme fra butikken. De kan sætte ind i nogle af de funktioner, jeg viser dig og andre, som jeg ikke har vist dig endnu. Men bare holde det i tankerne. Vi har støtte til begge disse ting så godt. Undskyld. Er der noget der ikke vises på skærmen? Jeg har mistet det fuldstændigt. Det er underligt. Okay. Tak for at pege det ud. Hvad du ikke har set i et stykke tid er min viser dig, at skrivebordet er her. Hvad er den sidste ting, du så? Vidste du se det her? Dette er skrivebordet. Du ved allerede, hvad det ligner. Det er noget forfærdeligt usædvanligt. Det transporterer vores at erfaring frem for dig og lade dig bruge de ting, du har haft. For eksempel, vil jeg vise dig Visual Studio. Det er en desktop applikation. Det kommer til at køre i denne tilstand. Det kommer til at understøtte et mere komplekst miljø med en masse muligheder og ting som det, så det gør det til en god mulighed, da en desktop app. 

Når det er sagt, lad os gå til dias til bare en lille smule og give dig nogle indledende indhold og derefter komme ind faktisk kodning her. Den gode nyhed er, at jeg har hørt du har været fokus på en masse af CSS og JavaScript, HTML. Alle disse ting, som du har været at lære carry direkte til at gøre Windows Store apps. De ting, du har hørt om med anvendelse af CSS selektorer og alle disse ting er præcis, hvad du gør for at oprette en ansøgning her for butikken. Vi vil gå gennem disse ting lidt efter lidt. Dybest set, jeg bygger på de ting, du allerede har taget sig tid til at lære. Det er den overordnede diagram af de teknologier, som du kan bruge at lave applikationer til Windows 8. De ting på højre, desktop apps, er virkelig, hvad vi allerede ved. Det er ting, der er virkelig Windows 7 verden overført til Windows 8. Alle disse muligheder fremføre: C #, VB, Win32 form for udvikling. Store. Intet problem. Den nye ting er på den venstre side. Det er Windows Store apps, det er når jeg ønsker at få min ansøgning kablet ind Windows 8 hjælp af alle disse funktioner, få det ind i butikken, og få det virkelig cool oplevelse af Windows Store-programmer. For at gøre dette, kan du se her, du har fået alle dine valg med XAML, C + +, C #, VB, kan du gøre DirectX, ting som, ting, der går ud over diaset. Men for os, vi kommer til at fokusere lige på, at HTML, CSS, og JavaScript er virkelig en første klasses borger til at gøre applikationer til Windows 8 og for Windows Store. Så det er godt for alle her, og folk ser på video fordi du bare kan udnytte alle de oplevelser, som du har og virkelig binde ind i, hvad Windows tilbyder. Du kommer til at gøre det gennem et sæt af API'er, der bør ikke være nogen overraskelse. Hver OS har sine egne API'er. Vi udsætter hvad Windows kan gøre gennem hvad der kaldes WinRT. Det er et sæt af API'er, der bare gør alt for dig. Hvis du har brug for at åbne filer, skal du bruge kameraet, geolocation, ting som det, de går igennem, hvad Windows kan tilbyde dig. For at få adgang, at vi har nogle mere JavaScript, der kommer til at gøre det endnu nemmere for dig at gøre det. Vi vil komme til om et øjeblik. Men for nu, det er dybest set din køreplan. De ting, du allerede har gjort på toppen af ​​nogle API'er som hjælper dig med at arbejde med Windows lig butik ca. Og det er virkelig alt hvad du behøver at vide fra det høje niveau. 

Vi vil dykke ned i faktisk arbejder med de ting nu. De ting, du har sikkert allerede set en flok, med IE9 lidt tilbage, vi introduceret støtte til en masse af de på det tidspunkt, nyere standarder i nettet, så en masse nye CSS funktioner, en masse nye HTML, ECMAScript 5, som er virkelig JavaScript. Så alt for, at bortset fra streng tilstand var i IE9. Bare et ton af ting med CSS, CSS3, alle i der. Og alle disse ting viderefører i, hvad vi laver med Windows 8. Du kan bruge disse ting, og du kan bruge alt, hvad der er nyt i IE10. Med IE10 vi indfører støtte til alle disse ting så godt. De er alle hardware-accelereret, så hvis du er på en maskine, der har en vis form for GPU, der er sandsynligvis temmelig meget hver maskine, som du kunne få i de seneste 8 år, du vil være i stand til at have hardware-accelereret output, visuelt output med CSS, Lærred, SVG. Alle disse ting vil gå gennem hardware acceleration og være så meget hurtigere og mere effektiv. Den korte version af alt dette - jeg ikke kommer til at gå igennem hver enkelt ting her - hvis du ser det på denne liste, hvis du kan gøre det i IE10, hvis det er en web-app, som du kører, som virker i IE10, det er noget du kan gøre som en Windows Store app. Og det er temmelig meget det. Så hvis det virker i IE10, det kommer til at arbejde som en Windows Store app. Det er på bordet som noget, du kunne bruge. 

Der er en masse her. Vi har ikke indtil midnat, så jeg kan ikke gennemgå alt her. Men der er nogle steder, der vil hjælpe dig med at forstå, hvad disse ting kan gøre, og jeg vil vise dig en af ​​dem i en anden. Jeg ville bare pege på et par af de vigtigste ting, som du måske kigge på. Måske har du allerede set nogle af disse i dine studier, men disse er virkelig nyttige, især med Windows Store apps, fra CSS side. Så at være i stand til at gøre transformationer og overgange, giver bevægelse med animation - disse er alle en del af CSS nu, og de er alle støttet af moderne browsere, og IE10 og IE9 har tilføjet støtte over tid for alle disse ting. Og så hvorfor skrive det selv, hvorfor gå igennem alt besværet med at gøre disse ting ved hånden når du kunne bruge en simpel CSS omdanne at skabe en 3D-effekt til din ansøgning? Store. Det er, hvordan det fungerer. Jeg kan ikke gøre det sværere end det. Hvis du ved hvordan man gør det i CSS, du ved hvordan man gør det i Windows Store app. 

Går ud over, at for layout, ting som selv butikken app, men går ud over dette, ser på måske en nyhed app, der er at vise dig artikler eller opskrifter eller ting som, at disse andre former for funktioner i CSS er virkelig nyttige: Grid, Flexbox, CSS Regioner er mere af en forholdsvis ny standard så godt. Disse ting er alle kommer til at hjælpe dig med at lægge indhold ud og flow indhold mellem sektioner, være i stand til at gøre sidetallet og orddeling, uden at du behøver at skrive de ting selv. Du skal bare sige, "Please gøre følgende for mig," og da skærmplads er forskellig på forskellige maskiner eller som du kan se i et øjeblik, som du snap en ansøgning at have mindre mængder af plads på skærmen, det er ikke noget problem for CSS. Det kan drage fordel af - Vi taler om omkring medier forespørgsler i en anden - det kan tage sig af ting med repositionering dit indhold, strømmende indhold fra regioner bare med disse ting, som du måske allerede har set med web-teknologi. 

På HTML5 side, er der også en masse ting som vil være meget nyttigt for dig med Windows Store apps. Igen, vil vi ikke gå igennem alle disse, men de er bare her. Så hvis du har brug for at bruge det, audio-video, hvis du ønsker at gøre validering fra formularer, geolocation, alle de ting, du kan gøre i JavaScript med JavaScript 5 eller ECMAScript 5, IndexedDB for lokal lagring - disse er alle muligheder for dig. Hvis du leder efter et svar, bare se på eksisterende teknologier med HTML5 og CSS og du vil finde lettere svar end at skulle rulle en masse af de ting selv. Lad mig vise dig lidt rundt her. Jeg har fået et site, vi kan gå til. Lad mig afslutte ud af dette dias til en anden. 

Hvis vi går ud til IETestDrive.com, Jeg vil ikke gøre meget af en demo her. IETestDrive.com virkelig viser dig en masse af, hvad der er nyt med IE10, de ting, du kan gøre. Jeg finder det er virkelig nyttig, fordi stedet for at læse gennem et bundt af hvidbøger, se på et par demoer, og det kommer til at hjælpe dig med at sætte det på din egen personlige radar om, hvorvidt en teknologi giver mening at selv gøre mere forskning med så vil du forstå, "Jeg ser, hvad det er for." "Jeg forstår, hvad Request animationsramme gør for mig." "Jeg forstår, hvordan jeg kunne bruge Regioner eller SVG-filtre." Du ser dem i aktion, se dem på et eksempel her, og selv bestemme om det vil være nyttigt for dig i dine egne projekter og videre som du fortsætter med at arbejde med web-teknologi. Her vil jeg blot opfordre dig til at tage et kig. Jeg tror ikke, jeg vil bruge meget tid faktisk kører disse. Vi har fået nok til at vise med at skrive kode. Du vil se her ting fra touch-effekter til touch-baserede spil i denne sektion, animation, virkelig hurtig hardware-accelereret animation der, nogle optimeringer, som du kan se i nogle af disse prøver så godt, og der er mange, mange flere. Hvis du går over her og åbne op for oversigtskort, der er bare et latterligt antal prøver her. Du kan se dem alle her. Hvis du kigger på noget eller du hørt om noget og du spekulerer måske dette ville være noget køligt at bruge i app, prøv at kigge her, og der er sandsynligvis en temmelig god demo for den for at spare dig selv lidt tid. 

Okay? Eventuelle spørgsmål, så langt for de folk her? Okay. Vi vil fortsætte her. Igen, bare tjek det ud. De er webstandarder, så gå til andre showcase websteder, som du kender og se, om disse teknologier gør fornemmelse for, hvad du forsøger at gøre. 

Tilbage til lysbilleder. Når det er sagt, er du flytter fra en web-verden til virkelig en installeret lokal anvendelse verden, så er der nogle ting at påpege her. Først og fremmest er der ingen webserver involveret her. Der er ingen Apache, er der ingen IIS kører her betjener op sider til en ekstern kunde, til en ekstern browser agent. I dette tilfælde er virkelig alt pakket op for dig. Du indsender det som din ansøgning til butikken, bliver det certificeret, det er ude i butikken, og så vil folk i tusindvis vil installere dit spil eller din app. Men dybest set, de trækker det ned lokalt, for at deres maskine. Der er ingen grund til at gå ud til nettet længere, medmindre du har opkald, der har brug for en ekstern API, og det er helt normalt så godt også. Men de kommer ikke til at være i denne tilstand, hvor de er nødt til at gå svar på anmodning fra en server for at få den næste side af deres indhold. Så det sagt, er der et par mindre API forskelle. Disse er utrolig lille. De er usandsynligt at ramme dig i din normale kodning, men de er i hvert fald dokumenteret. De slags kant deri. 

Den anden ting værd at påpege er den tillid forskelle. Jeg nævner det kun, fordi jeg vil bare være sikker på jeg sagde det så hvis du løber ind i den senere, vil du tænke, "Chris sagde noget om dette, "Så måske, ja, okay," og så skal du gå tilbage og du finder ud af, hvad det var. Sammenhænge noget. Som standard forsøger vi at beskytte brugeren fra vektorer for angreb. Der er visse ting, du kan gøre som standard og visse ting, du har brug for at skifte kontekst at aktivere. Som du bruger nogle biblioteker derude - Du kan samtidig lade allerede arbejdet med jQuery, men hvis du søger efter andre biblioteker derude - du måske bruge nogle funktioner den slags går ud over lokale forbrug, er mere dynamiske interaktioner XHR anmodninger, ting som. Nogle gange vil du måske finde dem vil blive deaktiveret som standard, og i så fald, bare gøre en søgning, kigge efter lokale og web-sammenhæng, og du vil finde ud af, hvordan du løser det. Bare sørg for at du vidste om, at når du begynder at bruge andre rammer, som, jeg bør nævne, er du fuldt ud i stand til at gøre. Så hvis du finde nogle andre rammer - Vi taler om om dette i en anden - til spil og du ønsker at bruge det, du ønsker at bruge nogle kontrol biblioteker, der er derude og du ikke ønsker at skrive at ting selv - det er en god idé, ikke? - du kan absolut bruge det her. Der er ikke noget der holder dig tilbage fra at bruge nogen form for bibliotek, der er baseret på JavaScript, CSS, HTML5. Igen, hvis det er noget du kan gøre i IE10, hvilket er en pokkers af en masse i disse dage, du kan gøre det. Træk det ind i din app, reference, JavaScript bibliotek, og bruge det i din ansøgning, bare holde i tankerne du måske ramt en sikkerhedssituation en gang imellem - ikke meget ofte. 

Og så de funktioner, vi vil gå over et par mere af dem, som vi går. UX du slags vænne sig til som du ser flere og flere ansøgninger fra Windows Store. Du får en fornemmelse for, hvordan de virker og hvordan design æstetik tendens til at arbejde tværs af forskellige applikationer, og hvad folk vil blive brugt til at opleve. Det er virkelig den vigtige del. Sørg for, at når de fyre op din app de behøver ikke at læse en manual, som de aldrig gøre, ved den måde. De skal bare være i stand til at begynde at spille med din ansøgning og regne det ud uden meget besvær. Ved at holde sig og overholde en masse af disse praksisser, du kommer til at gøre dine brugere en stor tjeneste, der gør det nemmere. 

Okay. En sidste ting på API side og derefter vil vi komme ind rent faktisk at skrive kode. WinJS er, at ting jeg nævnte meget kort med denne komplekse slide med alle de forskellige valg, du har for at gøre applikationer. WinJS, kan du tænke på det som en kammerat. Det er din ven til at hjælpe dig hurtigere skrive ting. Det er bare JavaScript og CSS. Du behøver ikke at bruge det. Du kan bruge det. Hvis du vil være ringer ind til Windows-funktioner, vil du ende med at bruge det, men hvis der er ting som nogle design mønstre eller kontroller, som du virkelig ikke ønsker at bruge, du ønsker at bruge noget andet, det er op til dig. Beslut hvad du vil bruge, og de typografier, du vil bruge. Funktionerne fra namespacing og klasse generation - op til dig. Hvis du foretrækker det ene eller det andet, det er helt dit valg. Det er stadig JavaScript og CSS. Men det kommer til at hjælpe dig med at gøre en masse ting. For eksempel, her er en delmængde af, hvad det kan gøre, ting som at hjælpe asynkron programmering med løfter. Nogen af ​​jer har hørt om eller arbejdet med Node.js? Det er et fælles mønster for at arbejde med asynkron programmering. Så dybest set, hvad du siger er, "gå gøre noget, "Og du kommer til at give mig et løfte, som du vil vende tilbage til mig, når du er færdig." Det er væsentligt, hvad der foregår. Så du behøver ikke fryse din ansøgning, mens brugeren går og plukke en fil eller noget der strømmede ned fra internettet. Brugergrænsefladen er fortsat lydhør. Og du kan gøre det ved hjælp asynkron programmering. Det lyder latterligt kompliceret, men det er virkelig nemt, fordi du bruger løfter og du bare sige: "Gå gøre dette, og når du er færdig, kan du ringe tilbage til denne metode." Det er temmelig meget det. Det er alt indbygget i WinJS. Det kommer til at gøre det meget nemmere at skrive virkelig fleksible og kraftfulde applikationer. 

Du kan se resten her, en masse animationer. Sandsynligvis en af ​​de mere vigtige ting på dette dias er kontrol. Jeg tror, ​​jeg har en hel - Ja, jeg gør. Her er et eksempel på nogle af de kontrolelementer, du kan bruge i dine applikationer. Det er alt lige op fra WinJS. Du er ikke skriver disse selv, du bare sige, "Her er hvordan jeg vil skrive min ansøgning." "Jeg vil bruge en flip visning, så jeg kan gå mellem forskellige billeder." Jeg har ikke vist dig Semantic Zoom. Jeg vil vise dig, at der i et sekund. Listevisninger. Der er gridviews. Du har allerede set et gitter som en del af butikken ansøgningen, så at kunne bruge blokke af indhold og rulle på tværs af det. Flyout menuer du vil se fra tid til anden. Den app bar jeg viste dig med at frisk maling ansøgning så godt, så du så, hvordan du kan tilpasse det ved at sætte knapperne på det og som har at skjule væk, når du er ligeglad med at bruge den. Det er virkelig helt op til dig at bruge. Disse er alle kontroller, der er en del af WinJS. Jeg vil vise dig hvordan man laver disse i bare et sekund, men der er mere end netop dette, og det vigtigste er at bruge dem, hvis du ønsker, spare tid. 

Hvis du har andre kontrolforanstaltninger biblioteker, som du gerne vil bruge, det er helt fint også. Ting som jQuery UI gør en masse af denne form for idé så godt, giver flere kontrolelementer, der strækker sig, hvad du kan gøre i HTML og JavaScript. Lad os dykke i. Jeg har allerede sagt. Brug hvad du gerne vil. Bare husk, at du kan løbe ind i nogle sammenhæng spørgsmål. Men du kan helt sikkert mikse og matche, hvad slags biblioteker du er fortrolig med, du ønsker at lære, du vil bruge, for at spare tid. 

Lad os tale om redskaber bare for et sekund. Du kan få hvad du behøver for at begynde at arbejde med Windows Store apps. Hvis jeg går ud igen, jeg har alt for mange ting heroppe. Hvis du går til denne side, der er dev.windows.com, du kan downloade alt hvad du behøver. Som studerende har du adgang til mere end den brede offentlighed gør, så du kan få højere ende versioner af Visual Studio. Edwin nævnt kan du allerede få Windows så godt. Men generelt for alle udviklere, kan du gå til denne hjemmeside og hente alt hvad du behøver at gøre et program, og det hele er gratis. Så der er en gratis version af Visual Studio, der er nogle værktøjer, der vil installere sammen af ​​det - alt hvad du behøver for at skabe og teste din ansøgning. Det er kun, når du kommer til at udgive din ansøgning op til butikken at du vil få brug for en udvikler konto. Også jeg tror er gratis. Er det gratis for studerende så godt? >> [Guarin] Hvilken en? Bygherren konto, faktiske fremlæggelse. >> [Guarin] Ja. Det er flere gode nyheder. Du vil gå se på dette. Det vil sige for en person som standard er det 49 dollars. Men du behøver ikke tilmelde dig, at som studerende. Vi får dig nogle oplysninger gennem Deres programmer, du kan få en gratis konto, og der vil lade dig derefter indsende dine programmer helt op til butikken, så mange som du vil, og alt dette godhed vil snart følge efter. Så det er dev.windows.com. Du kan hente de værktøjer, som du måske har brug for her. Og hvis du vil, kan du få en prøveversion af Windows her, men igen, vil du ikke brug for det. 

Den anden side - lad mig påpege denne ene ud for dig hurtigt - er design.windows.com. Det var dev.windows.com. Design.windows.com, kan du gætte, hvad det er for. Det er faktisk en temmelig venligt websted. Der er en masse god information her. Du kan arbejde igennem det. Det kommer til at give dig nogle råd om nogle ting at måske har du ikke tænkt over før eller måtte beskæftige sig med før, ligesom designe for touch, designe for forskellige formfaktorer, designe for funktionerne i Windows 8, de ting, jeg nævnte før som at lede og deling, nogle ting, som jeg ikke har talt om endnu. De er alle opført her, og det er en temmelig god sæt nyttige fil sider som vil hjælpe dig med at forstå, hvordan man laver en vis form for applikation, hvordan man gør interaktion, hvordan man skal håndtere UI og UX af din ansøgning. Jeg vil anbefale, at du tager et kig på dette, især hvis du er på et tidspunkt i håb om at offentliggøre en ansøgning til butikken. Du kommer til at ønsker at vide, hvordan man laver en god ansøgning fordi jeg nævnte før, hvis du ikke gør det, er der disse anmeldelser igen. Folk kommer til at være ulykkelig. De vil ikke være i stand til at finde ting, som de forventer i de rigtige steder. Ingen ønsker, at det sker for dig. 

Vejen frem her, lad mig lukke det ned. Nu hvor du ved, hvor man kan få ting, vil jeg vise dig, hvordan man rent faktisk begynder at bruge ting. Til at begynde, vil jeg faktisk vise dig her et eksempel på desktop apps på min startskærmen. Her kan du se Visual Studio, kan du se Blend og andre udviklingsværktøjer, som jeg har. De har en lidt anden flise. Det er fordi de er desktop apps, og i de tilfælde, de er alle kommer til at lancere tilbage til mit skrivebord virkelig bare så apps, som du er vant til. Så Windows-oplevelse, det er det samme. De er for eksempel ikke, ligesom Armed! eller disse ting. Lad mig starte et hurtigt. Faktisk, her er interessant. Det blev udviklet af studerende, der arbejder i partnerskab på NERD. Fuld skærm ansøgning, er disse former for oplevelser her. Åh, nice cut-skærme og alle former for sjove ting. De udviklede dette. Vi kan lige så godt vise det hele, mens vi er ved det. Faktisk arbejdede jeg med dem en lille smule, gav dem nogle råd om ting fordi de gjorde JavaScript for deres anvendelse. Please, jeg tager ikke æren for deres arbejde, de gjorde alt arbejdet. Jeg bare gav dem en lille smule råd her og der, men de gjorde nogle gode ting ved hjælp af et JavaScript frontend og binde i nogle fysik motorer og ting at gøre en masse af dette arbejde. Go. Lad os se, om det virker. Wow, det stadig arbejdede. Okay, godt. Men du får den idé. En fuld skærm app, en rigtig god oplevelse. Dette støtter ikke kun min mus og pen, hvis jeg har ting som det, men også røre. Hvis jeg havde en touch screen, kunne jeg bare trække på det og fortsætte med at arbejde med det. 

En ting jeg ikke vise, og grunden til, at jeg bringer dette op er jeg ønskede at have en anden app til at vise dig, hvad du kan gøre, du rent faktisk kan tage programmer i Windows og trække dem til den side af skærmen. Dette kaldes snapper en ansøgning. I dette tilfælde har jeg taget Inkarus og jeg har tilføjet det til side her. Det er nu i Snap mening, og det giver mig mulighed for at gøre noget andet, mens ansøgningen er der. De fleste spil du finder, vil simpelthen holde pause. Det er normalt en anstændig ting at gøre, medmindre dit spil eller anden måde kan skalere ned til det lille af en resolution, som måske en slags brætspil eller sådan noget på lejlighed. Men generelt til den letteste ting at gøre, og den mest hensigtsmæssige ting gøre for spil er at holde pause i programmet. For applikationer som nyheder apps, hvis jeg starter denne ene og så jeg snap det, du vil se det faktisk ændrer sig markant i, hvordan det er at præsentere data til dig. Her det viser dig i virkelig en mere lodret pande, at oplysninger, men jeg kan stadig absolut bruge programmet. Så det er stadig meget nyttig. Det faktum, at det er i en mindre visning ikke holde mig fra at bruge denne app. Så tænk over det. Det er noget, du skal have dine apps gøre til en vis grad, men det er op til dig at bestemme, hvordan funktionel dine apps bør være i den slags en mindre miljø. Lad mig slutte, at man ned og gå tilbage til hvor vi var her. 

Edwin, du har tilføjet et billede af mig allerede? >> [Guarin] Ja. >> [Bowen] Se der. Se det? Edwin tilføjet et foto. [Griner] 

Lad os gå tilbage herovre i Visual Studio. Lad mig starte dette for dig. Jeg kunne have klikket på flise på at startskærmen. Det bragte mig tilbage ind i Desktop mode, og det er at lancere skrivebordet app af Visual Studio. Dette er de vinduer, du allerede kender. Jeg kan gå videre og oprette et projekt her. Vi fokuserer igen på JavaScript, HTML. Jeg har tænkt mig at gå ud og vælge op her under JavaScript, Windows Store. Der er en række skabeloner, som du kan bruge. For produktivitet, vil jeg anbefale du tager et kig på nogle af disse andre dem her ligesom Grid og Split. De er virkelig nyttigt, hvis du laver en ansøgning der kommer til at have den form for design og navigation. Du vil se disse meget. Den ene jeg bare viste du var faktisk en forekomst af Grid ansøgning. Så hvis du tror, ​​du vil være at gøre en nyhed app eller en RSS-læser eller noget lignende, der beskæftiger sig med flere indgange, som du gerne vil vise detaljer, tænke på at bruge en af ​​disse skabeloner til at komme hurtigt i gang og tilpasse den derfra. Men bare så jeg kan vise dig alle de bevægelige dele her Jeg har tænkt mig at oprette den tomme app, og så vil vi gå lidt dybere ind i detaljerne. Jeg laver bare det tomme ansøgning her. Det kommer til at skabe hele projektet for mig. Jeg vil åbne op for ting, som jeg ønsker at vise dig som standard. Lad mig bare zoome ind en lille smule for at vise dig, hvad der er skabt for os her. De ting, du kommer til at se på først er alle opkaldt standard. Så du kommer til at se efter default.html, default.js og default.css. Den anden ting at påpege, er, at vi allerede har en henvisning til det, jeg nævnte før. Dette er WinJS. Ingen faktisk kalder det dette langt navn her. Det er WinJS, Windows bibliotek til JavaScript. Hvis du åbner det op, kan du se det hele her. Der er forskellige CSS-filer, er der JavaScript. Det er der for at hjælpe dig ud. Det er virkelig der for at give kontrol og stilarter og ting, som du bare kan bruge automatisk. Men igen, hvis der er ting, du ønsker at bruge i stedet i form af styling og andre former for kontrol, det er helt op til dig. Jeg vil vise dig hvordan du bruger et par af disse ting lige nu. 

Tilbage over på vores venstre side, lad mig vise dig standard HTML-side. Du har allerede set WinJS ting, og det er virkelig alt, der foregår der med disse midterste linjer af markup, bare bringe i CSS som standard og bringe i et par JavaScript-filer fra WinJS. Du behøver ikke at være herre over, hvad der foregår inde i disse filer. Det er temmelig interessant at tage et kig på dem at slags gennemgå, hvad der foregår derinde fordi der er temmelig interessante mellemliggende og avancerede teknikker foregår derinde, men det gode er som udviklere, kan du bare tage fordel af dem, bare bruge dem og ikke virkelig nødt til at bekymre dig om det. Du kan stadig køre en bil uden at vide, hvordan det fungerer, right? Så det er den slags ting, der foregår her. Der er kontrol og stilarter og ting, som du bare kan gå videre og bruge og kode, som du kan bruge i en anden uden at vide, hvad der er derinde. Her er dine egne filer. Disse er dine steder som du kan ændre din egen CSS og din egen JavaScript for at få tingene rullende. Du vil løbende tilføje sikkert andre JavaScript-filer og måske andre CSS-filer som dit projekt vokser, men det er egentlig bare et udgangspunkt. Her er Hello, world svarer til HTML, så er vi tilbage i kroppen tag. På toppen, ved den måde, det er HTML5 doctype, så du kan genkende det fra, hvad du har arbejdet på. Der er fuld IntelliSense i her så godt, så hvis du gør ting som type i en video-tag og udvide det ud, har du sikkert lært om det faktum, at du behøver at gøre fallback kodning til video tags i HTML5 - eller måske har du - at sikre, at forskellige browsere har support til din video. Vi har ting som dette på tværs af HTML, på tværs af JavaScript, tværs CSS. Der er indbygget i, og jeg vil vise dig CSS i et sekund. Her kan du gå videre og begynde at ændre koden, opmærkningen. I virkeligheden, før jeg ændre noget, vil jeg køre dette og vise dig, hvad du får. Du kommer til at få en splash skærm, som du kan tilpasse og så får du den Hej, verden oplever her. Det er fantastisk, ikke? Gå videre og skib, ikke? Indhold går her. Det er den grundlæggende ting. Det kan kun blive bedre derfra. Vi vil gå videre og tilføje i nogle ting. Jeg har en lille smule af markup jeg har tænkt mig at kopiere i her bare så du ikke behøver at se mig at skrive. Lad mig gå opdrage værktøjskassen her, og jeg vil pin dette, fordi jeg vil gøre dette et par gange. Værktøjskasse, hvis du ikke har set Visual Studio, er, hvor du kommer til at finde en masse kontrol. Du kan også sætte kodestumper ind i det, som du kan genbruge. Her vil jeg bare pop i en anden HTML, noget forfærdeligt fremskreden på alle her. Det er bare grundlæggende HTML sige jeg har et input, hvor jeg kan skrive, Jeg har en knap, hvor jeg kan sende det, og så har jeg en div der er hovedsagelig en pladsholder at jeg kan bruge til at sende "Hej, du skriver det her." Det er den intro til HTML-eksempel. Hvis jeg køre dette, vi automatisk får HTML, men vi også automatisk få styling. Dette er en af ​​de vigtige ting fra WinJS. Det kommer til at give dig som standard nogle udseende og der er virkelig konsekvent med resten af ​​hvad Windows 8 gør. Her kan du se ting som knappen. Knappen som standard i HTML ligner ikke det, men det gør her fordi det bliver at CSS lige fra at CSS-fil i WinJS. Hvis du ønsker at bruge noget andet, hvis du ønsker at ændre det, helt fint, gå videre og gøre, hvad du gerne vil. Men det er standard. Det kommer til at være mere velkendt for brugerne. Og selvfølgelig vil det ikke gøre noget, fordi jeg faktisk ikke wire op nogen form for kode til at reagere på det. Det var bare HTML. Så jeg kan slippe af med det, og vi vil komme tilbage ind i vores ansøgning. 

Lad mig skifte over til vores default.js. Det ser temmelig kompliceret, men det er bare at gøre et par ting for dig. Det er standardtekst. Det kommer til at være den samme i alle dine projekter. Det eneste, dette gør, er bare lidt at spørge: "Hvordan kom jeg her?" og sagde: "Er du lancere denne app for første gang?" "Er du genoptage den app fra at have det suspenderes?" Et par ting som. Virkelig, vores fokus på denne fil her er lige om her. På dette punkt er temmelig vigtigt denne ene linje kode. Det er faktisk kommer til at gå og se gennem alle dine opmærkning, og det kommer til at finde ting, som du har bedt om at have forvandlet til kontrol, dybere kontrol som en rating kontrol, som et gitter visning, ligesom flyout og de andre ting, som jeg viste dig på det dias før. De er ikke indfødte HTML kontrol. Du skal bare ikke sige flyout som et element og har det ved, hvad de skal gøre. Hvad vi rent faktisk gør, er det samme, der sker i andre former for kontrol rammer. jQuery UI gør det samme slags generel tilgang. Du bruger markeringer i din HTML, og derefter nogle JavaScript kommer igennem senere og siger, "Åh, jeg ved, hvad det er. Det er at bede om dette at blive forvandlet til det her," der er andre mere udtryksfuld HTML at gøre som en ratings kontrol hvilket er, hvad jeg vil vise dig lige nu. Denne linje kode er et løfte, der siger, "Når dette løfte bliver opfyldt, "Alt det, du har bedt om er derefter blevet oprettet." Og det er det. Det ser lidt kompliceret, men det er virkelig det samme i hvert projekt. Hernede er, hvor du kan begynde at tilføje i hvad du ellers vil have ske, så vi vil vende tilbage til om et øjeblik. 

Først og fremmest, jeg har brug for en smule af kode, der kan reagere på det faktum, at nogen har klikket på knappen. Jeg har tænkt mig at gå videre og sætte det i hernede. Igen, jeg ikke kommer til at gøre nogen skrive foran dig her. Meget grundlæggende JavaScript siger bare når dette kaldes vi kommer til at blive givet nogle oplysninger om, hvordan vi fik her og så vil vi gøre et par grundlæggende ting. Gå ud og find den ting i min HTML-side, der er opkaldt nameInput, Grib det, tage sin værdi, slap "Hello" på forsiden af ​​det, og holde der følger snor ind i det div tag, som vi havde før der virkelig ikke har noget før. Nu vil vi finde, at tag og gøre sin indre indhold svarer til den streng. Meget simpelt JavaScript. Forhåbentlig er du erkender, at der er virkelig ikke noget usædvanligt foregår her. Det er bare lige op HTML og JS her. Hvis jeg køre dette nu, er det stadig ikke kommer til at gøre noget arbejde, fordi jeg ikke har kabelbaseret det op at modtage begivenheden. For at gøre det, vil jeg gøre det lige her, igen at vende tilbage til min værktøjskasse, popping det her. Jeg forventer, at du har set alle den slags ting før, så jeg vil ikke over-forklare det. Nu vil vi gå få helloButton. Vi kommer til at sige, "knappen, tillykke." "Her er en begivenhed, som du nu reagerer på." "Når nogen klikker på dig, kalder denne funktion, buttonClickHandler". Og det er denne funktion, vi lige har tilføjet helt ned i bunden der. Det er det. Så nu har vi fået en utrolig funktionel ansøgning. Jeg tror du vil blive virkelig imponeret over dette. Chris. Vent til det. Wow. Okay. Det er fantastisk. [Griner] Men der er mere. Må ikke købe det endnu. Vent. 

Lad mig vise dig en lille smule mere her og få ud af fuld skærm. Vi kommer til at gå, før vi kører. Lad mig gå ind og faktisk vise dig en lille smule med CSS. Lige som standard, hvis vi ser tilbage på den side her, når vi trak i disse ting fra WinJS og vi fik den ui-mørke, i virkeligheden, kan du ændre det til standard for at bruge lys ansøgning. ui-mørke er god til grafiske applikationer som bruger en masse billeder, du viser en masse af visuelt indhold. Hvis du viser en masse tekstmæssige indhold, UI-lys er generelt et godt valg. Du behøver ikke at vælge det, men jeg har skiftet til det og nu er du se den samme markup, samme alting, det er bare at bruge dybest set en inverteret ordning her hvor alt er at gøre det sort tekst på hvid. Det er alt sammen meget godt. Lad mig komme ud herfra, og lad os rent faktisk gør en lille smule mere med CSS. Jeg vil sætte det tilbage på mørke, fordi jeg synes, det er nok nemmere at se på skærmen når jeg begynder at gøre disse ting. Jeg vil erstatte kroppen en gang mere. Jeg vil gå her. Lad mig nuke dette. Lad os bringe i kroppen med klasser. Jeg tror, ​​du har gjort grundlæggende vælgere med CSS og ting som det allerede, så du ved sikkert, hvad der foregår her. Bare tildele nogle klasser til vores header, og vi er ved at oprette en ny div at ombryde resten af, at ting, som vi nu kan bruge til at style alle sammen. Så hvad jeg kan gøre nu, er at gå over til vores standard CSS. Har du kigget på medier forespørgsler endnu? Har du talt om det på alle? Medier forespørgsler er en del af denne emergent trend - eller det er en etableret tendens nu faktisk på nettet - for lydhør design eller adaptive, og ideen er, at dine programmer kan virkelig tilpasse sig ordentligt baseret på, hvad den enhed, de bliver vist på kan gøre. Så hvis du er på en mobil enhed, naturligvis du kommer ikke til at have så meget skærmplads da du vil på en stor 30-tommer skærm sidder med en stationær, en stor pc som. Så gamle svar på dette ville være at have 5, 6 forskellige versioner af den samme side og du vil åbne den version, der var tunet til at vis størrelse skærm. Ikke stor. Det er meget, meget gentagne og der er et ton af vedligeholdelse for at gøre det. Nu har vi noget, der hedder CSS medier forespørgsler, og vi kan bruge dette til automatisk at registrere, når der er bestemte størrelser eller visse anvendelser af dit indhold, der udføres. Så du kan reagere på det, og du kan sige, "Okay, i dette tilfælde "Du sandsynligvis ikke engang brug for mig til at fortælle dig, hvad der foregår her." Det er bare at sige, om denne ansøgning er knækkede, ligesom jeg viste dig før - sensationsprægede det og lægge det til side af skærmen - så lad os gøre følgende styling. Styling handler ikke kun om farver og den slags. Det handler også om dimensionering og marginer og polstring og orienteringer af indhold eller endda invaliderende eller muliggør hele dele af din side og i dette tilfælde, din app eller dit spil så godt. Så her kan du gøre så simpelt som du ønsker. Dette ville ikke være nyttige i dine apps, men det er demo tid, så jeg har tænkt mig at gå videre og blot tilføje i grundlæggende krop selector og sige, "Når jeg knækkede, så lad os gå videre og gøre baggrundsfarve og lad os vælge noget." Du har IntelliSense her. Dette er faktisk virkelig cool. I 2012 har vi tilføjet en masse ting for CSS-understøttelse og JavaScript og HTML. Du har selvfølgelig fået drop-down IntelliSense også, men det er ikke cool ting. Det fede er, at du har fået visuelle selektorer for en masse ting. Så du kan gå igennem og bare vælge en farve, eller du kan gå ud og være endnu mere specifik, og du kan vælge - dette vil være forfærdeligt. Jeg vil faktisk vælge en anstændig farve her. Se opmærkningen også, ved den måde. Det er din RGB standard format der. Men hvis jeg skifter opacitet, går det til at skifte over til en alfakanal selector her. Så du kan se, at farven med væsentlige procent gennemsigtighed, du har for at alle bagt lige der. Jeg har tænkt mig at holde det som 100%, og så når jeg er færdig med at alt er godt og rigtigt. Nu, hvis jeg kører den app, og vi tager den app, og vi snap det, at baggrundsfarven bliver automatisk justeret bare fordi vi har nogle CSS, der siger: "Gå gøre." Du kan også skrive JavaScript også, der vil gøre det samme eller at du kan bruge til rent faktisk at holde pause et spil, gøre ting som det. Det er sikkert, når du ville bruge JavaScript. Du ville slukke for spillet løkke på dette punkt. Du skulle nogle JavaScript fordi der ikke ville være noget, du ville CSS til. Men husk på, det er bare en begivenhed. Man kan sige, "Når min ansøgning er skaleret, "Lad os se, om vi er knækkede." Og det er det. 

Okay? Jeg har talt en masse. Er der spørgsmål, så langt på hvor vi er? Ja. [Studerende] Er der en tutorial for nogen at få flere oplysninger? >> Ja. Spørgsmålet er, er der en tutorial til dette? Jeg vil bare udvide det til alt. Der er et par ting, du kan gå til. Lad os faktisk komme ud herfra. Lad mig gå tilbage herude. Én ting at påpege, er Visual Studio selv har tutorials bygget i. Lad mig slippe af med dette. Hvis du går og oprette et nyt projekt, behøver Filer, Nyt projekt, og se på den venstre side, der er en online node i denne vælgeren. Det kommer til at tage en lille smule. Jeg er på min MyFi her. Men det kommer til at komme op, og det kommer til at give mig en chance for at finde skabeloner men også endnu vigtigere, prøver så godt. Så jeg kan klikke på JavaScript. Det kommer til at finde prøver til mig. Min opløsning er vejen højt her. Normalt ville du se en liste over en masse forskellige ting her. Hvis der er noget, du ønsker at prøve, vælge sproget, JavaScript her, og sige, "Jeg ved ikke, hvordan man gør geolocation". "Jeg ved ikke, hvordan man åbner en fil." "Jeg ved ikke, hvordan at drage fordel af webcam "Eller optimere for touch eller sådan noget." Der er prøver for alt: deling, søgning, app barer, gør fjerntliggende opkald til en tjeneste, JSON-kodning. Alle den slags ting der er prøver til her, og de er ikke store prøver, der vil tage dig hele natten til at trække fra hinanden bare for at finde, at én ting, du ønskede at lære. De er virkelig gode. De er små, ret til det punkt slags prøver. Jeg har lært en ton ved at gå gennem disse selv, og så vil jeg anbefale, at et parti som én ting. 

En anden ting at påpege alt er selvfølgelig jeg viste dig dev.windows.com, så hvis du går tilbage til det, kan du se i bunden er der også prøver her. Så du kan downloade dem alle på én gang, men der er også en masse andre ressourcer også her der kan hjælpe dig med at få op til hastighed. 

En anden ting, og jeg ville virkelig anbefale, at du forsøger dette, Jeg har det på min blog, men jeg vil bare gå lige til den. Jeg vil vise dig. Min blog har ressourcer og ting som. En af de ting at påpege, er lige her, denne ting: din idé. Din App. 30 dage. Hvis du klikker på dette, går det til at bringe dig til en virkelig nyttige site. Dette er meget mere nyttigt, end man kunne forvente. Dette kommer til at være 30 dage af indhold, som du dybest set kan få tips og tricks hele denne proces som du opretter en app. Og som du måske ikke forvente, kan du faktisk få det til spil også og telefon apps, ting som. Så dybest set tilmelde dig for det, og de vil sende dig tips og tricks om, "Har du tænkt på at gøre dette? Støtter du Snap?" "Her er nogle retningslinjer for, hvordan man gør det godt." "Har du tænkt på at indsende til butikken?" "Har du tænkt over, hvordan du vil sælge din ansøgning?" Det kommer til at gå igennem alle disse forskellige ting. Og faktisk, hvis du er på gaming sporet, på et tidspunkt vil du begynde at genkende den person, der taler til dig fordi jeg havde faktisk gå til Redmint at gøre de og indspillede 2 videoer der. Men det er alt sammen en del af gaming sporet, og der er også en fuld track til generel udvikling app. Det kaldes Generation App. Jeg ville helt klart anbefale det til dig så godt som supplement til prøverne. 

Der er en masse videoer på et websted kaldet Channel 9 så godt. Det er nok det sidste, jeg vil anbefale så godt før vi går videre her. Channel9.msdn.com. Det er fantastisk, fordi du ikke kommer til at læse gennem tonsvis af hvidbøger. Det er dybest set en masse videoer, screencasts og ting, der er lige til sagen. Jeg skal ikke sige, det er altid ret til det punkt. Det afhænger af, hvem der gør det taler. Men generelt er der nogle virkelig til-punkt videoer her der vil vise dig nogle bestemte ting du måske ønsker at lære eller se demoed. Der er også alt vores indhold fra vores konference, der skete for et par uger siden kaldet Build, og du vil se, lige der. Der er kerneteknologier til Windows 8 spil. Værsgo. Jeg var der, faktisk. Du kan ikke se mig. Jeg var herovre. Men alligevel, der er afsat, vil jeg anbefale, at du tager et kig på disse videoer. De er temmelig nyttigt. Hvis du sidder fast på noget, eller du blot ønsker at se, hvad noget kunne gøre, fyre dem op. 

[Guarin] Windows Mail lige sendt mig en e-mail med et link til indhold for de studerende til at downloade med kodeeksempler og den slags. >> [Bowen] Great. Awesome. Tak, Edwin. 

Godt. >> [Student] Jeg har et spørgsmål. >> [Bowen] Oh. Ja, tak. [Uhørligt student spørgsmål] >> [Bowen] Åh, jeg er glad for du spurgte det. Ja. Spørgsmålet var, er der en visuel grænseflade for mig at skabe ting? Edwin vil belønne dig klækkeligt for det spørgsmål. Der er en måde at gøre dette. Skal vi gøre det nu? Lad os gøre det nu. Jeg har tænkt mig at gå til det lige nu. Faktisk, lad mig tilføje en ting mere til denne demo, og så vil jeg vise dig den faktiske svar. Jeg skulle til at tilføje lidt mere CSS her. Jeg var lidt off på tangenter her. Lad mig sætte i nogle CSS her for at drage fordel af de klasser, der er føjet et lille stykke tid siden, til headeren til Punkt WEEE div, og derefter til greetingOutput. Hvis jeg gør det og køre det, kan du se nu har vi fået en lille smule anderledes polstring og marginer så vi har faktisk nogle forskydninger her. Disse er mere i retning af hvad du kommer til at forvente en endelig poleret ansøgning. Men jeg bare vise det til dig, fordi det er lige op CSS. Så de ting, du allerede kender, kan du bruge her at justere indholdet, som du ønsker. Du har allerede set, hvordan at gøre baggrunden skifte ud på den måde. 

Hvis jeg gå tilbage til vores HTML, vil jeg tilføje et sæt mere af markup, og det er faktisk kommer til at være en kontrol fra WinJS. Jeg har tænkt mig at gå ud og fange det, en etiket. Lad mig sørge for jeg gør det på den rigtige plads. Sandsynligvis godt nok. Her har jeg netop tilføjet - og vi vil gå i fuld skærm, så du kan se det hele - Jeg har tilføjet en etiket til næste div. Div hedder ratingControlDiv. I sig selv vil det ikke gør noget. Hvis du åbner dette i en browser, ville du kigge på blank, div selv. Men på grund af den mystiske linje kode, som jeg viste dig før, processen alt, går det til at lede efter noget, der ligner det - data-win-control - og det kommer til at finde hvad der er i denne parameter. Det kommer til at gøre en instans af, hvad der er det peger på. I dette tilfælde er det en rating kontrol, så jeg siger, "Please go og erstatte denne ting "Med hvad du behøver at gøre for at gøre en rating kontrol." Det kunne være en flip kontrol, kunne det være de fremskridt, ring eller hvad kontrol du vil bruge. De er alle kommer til at arbejde stort set den samme måde. Du bruger standard HTML5 markup til at angive, hvad du ønsker, og så er du nødt til at få en kontrol i slutningen af ​​dette. Lad mig køre dette. Jeg har lige kopieret det ind, og nu, at markup bliver det, der er faktisk en lang række af HTML-elementer. Disse er alle individuelle billeder, og der er divs omkring dem med vælgere. Forhåbentlig kan du se, at. Det er lidt subtil. Jeg kan svæve over de forskellige elementer, og det kommer til at tillade mig at se rating her. Jeg kan klikke på det, og det husker den rating, men det er om det. Det er ikke rigtig gøre noget med rating. 

Den ene sidste ting, jeg vil vise dig på denne før vi skifter til en mere visuel design erfaring er en lille smule kode, som jeg kan bruge til at reagere på disse WinJS kontrol. Lad mig komme ud af det, tilbage ud af fuld skærm, og skifte over til JS her for sekund. Jeg kan gøre det lige her. Jeg tror jeg vil udskifte det hele. Faktisk tror jeg, det vil erstatte det hele, men vi vil finde ud af sammen. Jeg vil sætte det ind her. Ja. Jeg har tænkt mig at slette denne også. Hvad gjorde jeg tilføje? Det ligner en masse. Det er ikke meget. Jeg har lige udvidet denne linje kode, som jeg allerede talt om før, og jeg siger, "Når alt er gjort, når der er foretaget alle mine knapper, "Så gør det her." Så køre denne funktion kaldes afsluttet. I dette tilfælde er det ting, du kan regne ud. Gå ud og find det div kontrol. Faktisk er der en ting, jeg bør påpege. Det næste linje er faktisk siger, "Jeg har fået at ratingControlDiv". "Jeg ønsker at tale med den, som om det var en reel kontrol, en WinJS kontrol." Så dybest set, du beder om, at der fra det. Du siger, "Jeg vil gerne tale med dig som en kontrol." Og så kan du begynde at sige ting som, "Vi kommer til at tilføje en lytter til dig "Så når du skiftede vi kan reagere på det." Og så kan vi også gøre ting som dette. Faktisk, det er den gamle kode der. Jeg tror, ​​jeg mangler indsætning i én funktion mere, og det ville være den egentlige funktion, der ville reagere på rating kontrol ændres. Lad mig pop der i lige hernede, et eller andet sted rundt der. Og i dette tilfælde er den eneste, der er nyt, er, at vi går ind i hvad rating kontrol fortæller os, og vi beder om, hvad der kaldes den tentativeRating. Der er en masse forskellige andre ting, at kontrollen kan fortælle dig, og det går kontrol kontrol. Det er meget ligetil. Du vil være i stand til at finde ud af det ingen problemer overhovedet. Jeg køre dette, og nu når jeg ændre ratings og klik på rating, du kan se nu er det faktisk at reagere på det. Det er at sætte denne rating på skærmen i det ellers tomme div tag under bedømmelse kontrol. Det er det magiske af en masse ting her også. Så som du skabe applikationer til Windows Store, der er et væld af knapper, som du bare kan bruge. De arbejder alle som denne. 

Lad mig vise dig den visuelle side af at designe for disse applikationer. Den gode nyhed er, du vil allerede have dette værktøj, når du installerer alt hvis du går til at downloade, og du får Visual Studio. Jeg kan højreklikke på dette. Jeg vil ikke zoome ind Det bare siger Åbn i Blend. Blend er et andet værktøj, der fungerer side om side med Visual Studio og er fokuseret meget mere på design side af tingene, så det virkelig overflader værktøjer, der er optimeret til at skabe stilarter, skabe animationer, der arbejder med CSS, en masse ting i den slags vene. Her hvad der skal være meget interessant og temmelig indlysende straks er vi kigger på app. Forhåbentlig vi stadig er. I stedet for at kode, som vi stadig kan se forneden, vi ser den faktiske repræsentation af ansøgningen. Hvad mere er, det er ikke bare en repræsentation af den app, er det faktisk den app kører. Og det er hvad der virkelig er rart om Blend. Teamet har gjort et stort arbejde for at bringe HTML og JavaScript og CSS i dette værktøj. Nu kan du faktisk, hvis du er nysgerrig: "Hvad betyder det? Hvad kan jeg gøre?" Jeg kan faktisk designe til denne ansøgning, selv om ting som dette ikke findes i min markup. Husk, at Ratingen kontrol? Det var bare et div tag. Denne ting, at stjerne, kun findes på runtime. Hvordan kan jeg vide det? Der er en lille smule magi herovre. Se disse lynnedslag? Hver gang du ser et lyn, der betyder, at det blev skabt af noget på runtime. Nogle JavaScript løb og vendte noget ind i dette eller skabt dette med en vis logik. Disse stjerner, som du ser der blev skabt af JavaScript ved WinJS. Det gode er, betyder det ikke noget for mig, kan jeg stadig designe det, Jeg kan stadig gå ind og ændre det, kan jeg finde ud af, hvad der foregår her, Jeg kan se på CSS, kan jeg gå videre og finde ud af, hvorfor farven er den måde, det er, Jeg kan begynde at rode med ting og gøre tingene forfærdelig, hvad jeg ønsker at gøre. Faktisk vil jeg lade tingene alene. Men du kan se her det er alle de CSS og det viser dig her. Hvis jeg gå op til der, det vil vise dig alt, hvad de kalder Winning, Så CSS-regler, der er det mest specifikke og den mest valgt til denne post, som du har sikkert allerede gået over i dine klasser, hvor man kan sige, at der er en generel skrifttype, vi anvender til alt, men fordi det er en H1 og jeg har en farve er defineret for H1S, det kommer til at være denne farve, og det er fordi det er mere specifik end body1. Denne ene ting lige her viser dig alt det, og det er virkelig kraftfuld ting, som du får mere komplekse, du undrer dig, hvorfor disse ting er den måde, de er. Det vil faktisk fortælle dig, og du kan vælge nogen af ​​disse elementer her. Denne farve er ikke så slemt, faktisk. Du kan vælge dem. Forhåbentlig kan du se dette. For alt det, du har på din ansøgning, kan du se en hel kaskade af alle de CSS, der kunne have anvendt til, og som man er ved at vinde, som man rent faktisk fandt forrang. Disse er slags kedelige. Der er ikke meget foregår i nogle af disse. Hvis jeg går og ændre farve, så vil du begynde at se nogle cascading der. Du kan også bruge HTML her. Jeg kan gå igennem og ændre HTML-egenskaber for alle disse ting, som jeg ønsker. Der er bare tonsvis af ting her. 

Jeg ønsker ikke at tage din tid ved at gå igennem alt her. Bare ved, det er her. Der er en masse af design-orienteret funktionalitet, der er bare til rådighed for dig så du kan holde visuelle, arbejde med programmet, og ikke er nødt til at gøre en masse for at gætte at du ville have at gøre normalt og cykling tilbage fra en browser tilbage i dit design, tilbage til browseren. Det er virkelig cool ting til det, og efterhånden som du udvikler en Windows Store app, det kommer til at gøre dig en masse mere produktive. 

Du kan også se det er at spore markup her og din CSS som du arbejder gennem forskellige ting. Det er sandsynligvis virkelig svært for dig at se, at især på video, men det er hvad der foregår her, og jeg vil anbefale dig at blive fortrolig med det. Det vil spare dig for en masse tid. Det er Blend. Hvis du foretager ændringer her, bliver de automatisk kommer til at bære tilbage over til Visual Studio. Det er de samme filer, det er det samme alt. Jeg vil overlade det alene. Jeg har en bedre eksempel, som jeg vil vise dig. Men hvis jeg foretaget en ændring der og gemte det, og jeg kom tilbage til Visual Studio, vil det sige, "Hey, du lige ændret noget. Kan jeg genindlæse den for dig?" Ja. Og du bruger den samme ting der. Det er slutningen af ​​denne særlige prøve. 

Jeg vil gerne vise dig en højere ende prøve bare for at give dig et billede af andre funktioner du måske tænke så godt. Dette er en prøve app, som du kan downloade. Hvis du ser noget, der hedder Windows Camp in a Box, der er nogle prøver, der er i det, og en af ​​dem er Contoso kogebog. Jeg kan bare køre dette for dig. Skærmen Brugerdefineret splash. Dette er Grid view ansøgning. De har bundet nogle brugerdefinerede data her. Du kan navigere gennem dette. Du kan gå og tage et kig på forskellige ting, der vil gøre os sultne på en fredag ​​eftermiddag. Det ved jeg ikke. Hvad vil gøre mig mest sulten? Det ved jeg ikke. Jeg bare at vælge én. Du går ind i disse ting. Det vil vise dig opskriften. Du kunne også, i stedet for at klikke på et emne, du kan gå ret til denne kategori af indhold, denne del af indholdet. I dette tilfælde, kan du læse masser af falske latin fortæller dig alt om disse opskrifter her og derefter gå lige ind i bestemt opskrift. Dette understøtter også ting som deling, som jeg viste dig før med billederne. Du kan også søge ind i denne ansøgning også. Det er meget ligetil at gøre søgningen. Dybest set, er du bare at få en tekststreng fra Windows og du beslutte, hvordan du vil håndtere søgning med det. Det er et par linjer kode for at få det, og så hvad du gør med det, efter der er helt op til dig. 

Her har de også en app bar, hvor de bruger en anden funktionalitet. Jeg vil bare fortælle dig, hvad det er. En påmindelse kommer til at bruge, hvad der kaldes en toast meddelelse. Dette er virkelig praktisk for at lade brugeren vide, når ting er sket, ligesom en ansøgning blev installeret, eller noget var afsluttet. Det er også godt for spil også. Hvis du har en vedvarende verden eller en pointtavle og en service, der er vært for det måske på en separat maskine, kan disse meddelelser sendes i en maskine og selvom brugeren ikke bruger dit spil, spille dine spil eller kører din app, kan de stadig få meddelelser om disse former for arrangementer. Så man kan sige, "Din borg er blevet ødelagt eller er bare om ødelagt." "Kom tilbage og forsvare det," eller noget lignende. Du klikker på meddelelsen, du går lige tilbage i spillet, og du kan spille det. Så den slags ting kan hjælpe virkelig trække folk tilbage i din app temmelig effektivt. 

Der er også støtte i denne ansøgning for at bruge mikrofon, webcam, laver video og tage billeder. Du kan også fastgøre en sekundær flise. Det er nyttigt, hvis du bare ønsker at have en flise, der går lige til bestemt indhold. I dette tilfælde går det ret til denne opskrift. Alt jeg nævne jeg bare vise fordi det er ting, du kan tænke på at bruge så godt. For det meste, at de er meget enkel at anvende. Jeg vil bare anbefale du sætter op at prøve explorer og finde en prøve, der kan vise dig, hvordan du gør det. Det er temmelig ligetil at bringe dem ind i dine apps der. 

Jeg vil vise dig noget andet, der er temmelig cool her. Jeg vil snap denne ansøgning, og jeg har tænkt mig at gå tilbage til Visual Studio. Denne applikation kører. Det kører fra Visual Studio. Jeg kan gøre nogle ret cool ting med det. Jeg har faktisk en mulighed for at vælge et element, og jeg kan gå over her til live program, og jeg kan sige, "Jeg spekulerer på, hvorfor er Tilberedningstid en lille smule lysere grå end selve titlen?" Jeg kan klikke på det. Det kommer til at synkronisere det tilbage i Visual Studio, og det kommer til at vise mig præcis det indhold, der resulterede i, at en del af brugergrænsefladen. Så i dette tilfælde, er det post-undertekster og h4 dobbelt konstruktion, og at der formentlig fortæller os, hvad vi har brug for at vide, fordi som en h4 inden for denne sammenhæng, det kommer til at få en vis form for skrifttype. Men hvis jeg stadig ikke ved hvorfor, kan jeg klikke på Trace Styles. Jeg kan derefter udvide ud farve og jeg kan finde ud af præcist, hvorfor denne farve ikke er den kropsfarve men i virkeligheden er noget andet. Det er stort set de dev værktøjer fra Internet Explorer til en vis grad bragt i Visual Studio. Hvis du har arbejdet med Chrome Dev Tools, Firebug, ting som der, den slags værktøjer, der er i browseren, den slags funktionalitet er blevet bragt lige ind i Visual Studio så du ikke faktisk nødt til at starte en browser og arbejde med disse værktøjer hver for sig. Nu har jeg en Windows Store app bare kører, og jeg kan begynde at trække det fra hinanden og finde ud af, hvorfor tingene gør, hvad de er. 

Jeg kan også gøre det på denne måde også. Jeg kan gå og bare hente noget lige fra opmærkningen og finde ud af, hvad det er i selve stævningen. Jeg tror, ​​jeg har gået alt. Her jeg svæver over dette. Jeg kan vælge den. Det kommer til at vise mig i den aktuelle kørende program, hvor at ting er at jeg nu har tænkt at klikke på i opmærkningen. Virkelig cool stuff. Som du forsøger at regne ud, hvad der foregår, og hvad HTML gør, hvad CSS gør, holde dette i tankerne. Husk dette er her for dig og også, at Blend kan arbejde med en levende kørende program. 

Den ene sidste ting, jeg ville vise dig med denne ansøgning - Af den måde, det viser dig deltaer som tingene ændrer sig også, så du kan se for de gule højdepunkter. Det er ting, der har lige skiftet i ansøgningen. Men en sidste ting. Jeg ønsker at gå tilbage til Blend bare for en anden her. Vi åbner dette op, Open i Blend, samme app, samme alt. Jeg vil bare gerne vise dig oplevelsen her er ikke bare du sidder fast på hjemmesiden kigge på de ting, du får som standard, når du kører app og lad det sidde der. Du kan også slå denne temmelig lille ikon op her. Det hedder interaktiv tilstand. Du klikker på det. Det kommer til at opdrage din ansøgning. Du er ikke i designtilstand længere, så du ikke kommer til at være at klikke på ting at ændre funktionalitet, men du kan faktisk arbejde med ansøgningen nu. Du kan klikke igennem, kan du gøre hvad, komme til en opskrift, der interesserer dig eller til en kategori. Lad os gå til denne kategori. Jeg vil sige, "Okay, her er hvor jeg ønsker at designe." Derefter skal du klikke på denne knap igen, vil det bringe dig tilbage i Design overflade, og nu kan du gøre alle de ting, som jeg talte om før. Jeg vil holde klikke indtil jeg får dette er valgt, skal du finde ud af dens dimensioner, finde ud af HTML for det, CSS for det for et kørende program, nogle senere del af ansøgningen. Meget, meget nyttig. Jeg vil vise dette til dig. Venligst holde det i tankerne, hvis du søger ind at skrive kode med dette fordi det kommer til at spare dig for en masse besvær, og det er temmelig god ting. Det er temmelig meget alt jeg ville vise dig på Blend og Visual Studio for alt dette. 

Eventuelle spørgsmål om nogen af ​​disse værktøjer? Noget som helst? >> [Guarin] Jeg har ting til at give ud, så gode spørgsmål, gode ting. 

[Bowen griner] Jeg har allerede vist jer mine demoer her. Jeg har tænkt mig at sætte den på siden Ressourcer og drej til spørgsmål nu. Denne første henvisning er, at Generation App site med spillets sporet og app spor. Tilmeld dig for dem. Du behøver ikke at vente de 30 dage til at få indholdet. Du kan begynde at gå og kigge på indholdet, som du ønsker. Jeg forstår dine tidsrammer kan være anderledes end - [griner] Så hvornår er det hackathon? Det er et par uger, right? Så du behøver ikke have de 30 dage til at vente. Så ja, kan du tilmelde dig for, og så bare begynde at trække indholdet ud fra det. Også Dev og Design Centers. Og jeg nævner ikke dette, men der er også den Store Docs. Dette ville være til efter hackathon som du er klar til at begynde at indsende dine apps til butikken. Der er nogle nyttige retningslinjer her, nogen vejledning om, hvordan man får tingene ind i butikken, nogle almindelige problemer, der kan rejse dig op, og det er slutningen af ​​disse ressourcer. 

Så hvad der er på dit sind? Alt andet, som du - [Guarin] Hvem tænker på at gøre en Windows app til CS50? Fedt. [Bowen] Cool. Store. 

Eventuelle spørgsmål om de ting, du har set hidtil, og hvordan det relaterer til dette? For eksempel, jeg med mere tid kunne tage et spil, som jeg har skrevet og der kører i browseren, og lige slags gå gennem processen at bringe det ind i Visual Studio og gør det til en Windows Store app. Det tager mere tid, end vi egentlig skulle omfatte i dag, men den korte version er at det er den samme kode, som du har kørende i browseren, og de ting, du ændrer er de ting, du beslutter dig for at tilslutte til Windows 8. Så hvis du ønsker at bruge charme, hvis du ønsker at søge eller dele, skal du oprette en app bar at gemme væk nogle funktioner på det, de er den slags ting, som du ville ændre. Men kernen i din web app kan forblive intakt. Igen, så længe det fungerer i IE10, går det at være en rigtig nem havn at bringe ting ind i Visual Studio, i Blend, og gøre det til en Windows Store app. Igen, de eneste ting, du bliver nødt til at lære er de andre funktioner som du kan bruge til at lyse op en ansøgning, som en levende fliser og den slags ting. 

Ja. >> [Studerende] Mit spørgsmål er om at arbejde mobilt. Så hvis du laver en app, der fungerer som en app på skrivebordet, er det virkelig nemt at overføre det til mobil, eller er der en - Spørgsmålet er, hvis jeg laver en Windows Store app, der er virkelig optimeret til dette miljø og jeg ønsker at bringe det til en mobil verden, hvad der er involveret med at gøre det? At ligesom mange spørgsmål, er altid en konstant skiftende svar. Den gode nyhed er, hvis du stikning med HTML og JavaScript, CSS, hvis du starter fra en Windows Store app, det kommer til at lade dig bringe det til nettet og derefter bruge disse former for teknikker, ligesom medier forespørgsler og ting, at tilpasse sig forskellige størrelse enheder. Når det er sagt, er der altid rammer og ting derude at støtte strækker sig ud af forskellige teknologier, forskellige platforme. Det ændrer sig hele tiden. Vi er også ændre ting så godt, som vi ser mod hvad vi har nu faktisk ud med Windows Phone 8. Vi har nogle fælles centrale infrastrukturer udbydes mellem applikationer for disse miljøer. Så de ting, du gør for at oprette en Windows Store app, en masse, der kan bære over i en Windows Phone 8 ansøgning så godt. Det er igen en spirende historie, så der er noget indhold om, at der på Bygn. SDK lige kommet ud for lidt siden. Det var netop frigivet en lidt siden. Men i form af andre platforme, du sandsynligvis løbe ind i mange cross-platform rammer så godt. Den gode nyhed er de ting, du laver her, kernefunktionaliteten er lige op web standard stuff. De eneste ting, der ikke ville oversætte let er de ting, Windows 8 gør, men det er ingen overraskelse, fordi det er en funktion i Windows. Du kommer ikke til at finde deling eller lignende former for kontrakter på hver anden platform. Så det er de ting, du ønsker at fra et design perspektiv sørg for at have måder at slags abstrakt at ud, så du kan sige, "Hvis jeg kører på dette, kan jeg gøre." Hvis jeg ikke er, er der nogle design mønstre, du kan bruge til at slags skjule, at ting væk. Men holder det i tankerne. Ja. Undskyld. Værsgo. 

[Studerende] Hvis jeg ønsker at teste min Windows app oven på [uhørligt] [Bowen] Ja. Jeg sprang en ting mere også. Ja. Jeg vil besvare dit spørgsmål først, så vil jeg vise dig en funktion, jeg glemte at nævne. Vi har nogle maskiner til rådighed lokalt. Undskyld. Spørgsmålet var, hvordan kan jeg teste tingene på enheder hvis jeg ikke tilfældigvis har en hel masse ting til at vælge fra? [Guarin] Vi lånte jer, tror jeg, 5 eller 6. Hvor mange skal du bruge? [Studerende] Vi fik 4 af dem. >> Okay. Du fyre fik 4 tavler til at lege med. Så helt sikkert lade alle vide, tak. [Griner] >> [Bowen] Awesome. Det er en endnu bedre svar end jeg vil give dig. Vi har kontortid for udviklere, som vi gør på vores kontor og nu kommer snart til Microsoft Store over på Pru, men Edwin har allerede taget sig af dig. Der er 4 tavler til rådighed for udlåner, til test. Der vi går. Der er et eksempel på en deroppe. Så ja, absolut. Store. Absolut langt den bedste måde at teste det er at være på en enhed. Hvis du ikke tilfældigvis har en endnu, eller du ikke ønsker at gå på tværs af campus i sneen at få fat i en eller hvad, er der en måde at gøre dette tilbage i Visual Studio. Hvis jeg går tilbage til hvor jeg var her, her i stedet for at bruge Local Machine, du kunne oprette forbindelse til eksterne maskine, men det er ikke hvad jeg taler om her. Simulator er den ting, du måske ønsker at se nærmere på. Jeg vil køre dette, og virkelig, hvad det er, det er hovedsagelig et vindue på dit eget system. Her er faktisk mit system kører, kører Contoso, men på en måde, der lader mig ændre nogle af fuldbyrdelsen parametre, de miljømæssige parametre. Så jeg kan sige her, "Ved du hvad?" Oh. Jeg allerede har det kørende i en simuleret 27-tommer skærm på 2560 opløsning. Jeg kan sagtens droppe det ned og se, hvad min ansøgning ville gøre med en mindre skærm eller ved at ændre DPI-indstillinger eller hvad. Så på en lille skærm, en 10,6, hvad det kommer til at gøre? Det ser stadig temmelig godt, right? Du ønsker at gøre dette, især hvis du indsender til butikken, fordi vi gør som en del af testprocessen. Og hvis der er problemer som det, så du kan løbe ind i et problem at få certificeret for butikken. Men det er en del af simulatoren. Virkelig cool. Meget let at gøre det. Du kan også bruge funktioner som at dreje det så godt. Jeg kan klikke på knappen her, har det rotere, se hvad nogen ville have som en oplevelse roterende deres skifer, deres tablet, og ved hjælp af din ansøgning med det. Der er nogle andre ting også som touch emulering og nogle andre ting, indstilling GPS. Jeg kan foregive jeg er på en anden placering og se, hvad min ansøgning gør når jeg lader som om jeg er tilbage i Seattle eller noget. Men det er en rigtig nyttig funktion, og det er bygget i både Visual Studio og i Blend. Ja. Dit spørgsmål. 

[Studerende] Hvis du skriver et spil, er Visual Studio opbakning til animation? Ja. Spørgsmålet er omkring animation støtte, især med gaming. Det afhænger af. [Griner] Med JavaScript vil jeg sige, at der er sandsynligvis mindre støtte end der er på XAML side, som har tidslinjer, har storyboards og ting, der er bygget i. For animationer på JavaScript apps, jeg ved ikke, hvor meget af et svar, jeg vil give dig. Jeg har ressourcer på min blog, der går igennem en masse muligheder for både fysik animationer, muligheder for JavaScript-orienterede spil på Windows 8. Jeg vil henvise dig til dem. Dybest set, er der så mange valg. Grunden til jeg tøver er der er så mange muligheder for at gøre animationer med JavaScript. Det kunne være CSS kunne det lærred-baserede, kan det være lige grundlæggende DOM animationer det kunne være en masse forskellige ting, så det er virkelig afhænger af dit valg. Hvis du beslutter at bruge noget som Create.js eller kalk eller andre former for rammer - Tja, jeg er ikke engang sikker på, at du vil være i stand til at bruge en højere ende rammer gerne Impact eller Construct. Har tendens til at generere mere kode end du måske overveje fra bunden. Men i disse tilfælde kan du stadig bruge en simulator, kan du bruge de miljøer, og jeg har en tendens til at bare bruge dette miljø til min test platform i de tilfælde, da jeg er ved at udvikle spil. Jeg har været fint især med Canvas animationer, der er nok den mest almindelige ting. Det bedste du vil sandsynligvis finde er dev værktøjer i browseren og dev værktøjer i Visual Studio. Slags en bugtet svar der, men forhåbentlig jeg fik dit svar. Ja. Dig. 

[Studerende] Hvad er de datalagring muligheder for Windows 8 apps? Hvad er de datalagring muligheder for Windows 8 apps, Windows Store apps? Dine muligheder er virkelig hvert program får sin egen pulje af lokal lagring for indstillingerne, og for data, men det er også latterligt nemt at bruge roaming opbevaring, at bruge cloud-baseret storage. Det er gratis. Hvad der sker, er du dybest set vælge en anden klasse, og du siger, "Roaming-indstillinger, Gem, denne bestemt sæt af indhold," og deres Microsoft-konto, uanset hvad de har logget på som, kommer til at være nøglen til roaming, at oplysninger omkring. Så hvis jeg bruger dit spil på min bærbare computer og så skal jeg logge ind med den samme konto og jeg spiller spillet på en overflade eller en tablet, der automatisk vil strejfe denne indstilling og data mellem disse maskiner. Det er en standard ting. Det er godt for visse mængder af data. Du ville ikke sætte en enorm database i dem. For at du har brug for at gå til andre former for løsninger, som en hosted database i skyen, ting som. Der er nogle andre samfund muligheder omkring andre former for data-teknologier. Jeg har set nogle SQLite muligheder i samfundet omkring der også. Så flere og flere er på vej, men det er de primære ting, som du ville kigge mod for et spil eller en app. Og du havde et spørgsmål i ryggen også. 

[Studerende] Med hensyn til nettet [uhørligt] uploade eller downloade filer [uhørligt] [Bowen] Er dit spørgsmål, hvordan kan du se det eller hvordan kan du debug det og teste det? [Studerende] Hvordan kan du debug det [uhørligt] Undskyld. Jeg kan ikke høre det hele. [Studerende] Hvordan får du det bug testet og også [uhørligt] Store. Store. Hvordan arbejder du med netværk? Hvordan kan du se, hvad der foregår? Der er mange forskellige svar på dette ene, men lad mig vise dig sandsynligvis de letteste ting her. Lad mig slippe af simulatoren for en anden. Bare et par debugging muligheder for networking. Der er et komplet netværk stack bagt lige ind i både WinRT niveau og fra WinJS, så du kan meget nemt gøre XHR, AJAX typen opkald fra dit spil eller app til at gøre det. Primært, jeg har en tendens til at bruge 2 ting. Jeg bruger den faktiske dev værktøjer selv, der har et netværk stak bagt ind i dem. Lad mig vise dig Windows startside. Jeg kan bringe dette op, og der er faktisk et netværk proxy bagt ind i disse værktøjer her. Så jeg kan gøre det, kan jeg opdatere siden, og det kommer til at vise mig alle de interaktioner, herunder AJAX kræver, at denne session for denne anmodning varighed. Dette er nyttigt. Det kommer til at være meget nyttigt for browser-baserede apps. For andre former for apps, herunder Windows Store apps, Jeg bruger et værktøj kaldet Spillemand. Du kommer til at få et spil i svar. [Griner] Spillemand er en simpel proxy. Jeg tror, ​​jeg kan vise det til dig. Det er bare GetFiddler.com, som interessant nok, jeg spore min netværksstakken vil GetFiddler. Men alligevel, Spillemand er blevet skrevet af en af ​​PMs på IE teamet, så han ved, hvad han laver. Dette er en god proxy, som du kan bruge til fejlfinding netværkstrafik. Jeg vil anbefale, at. Spørgsmål derovre også. 

[Studerende] Er der en nem måde at integrere fremmedsprog input, ligesom japansk eller kinesisk, ind i Windows-apps? Jeg kan ikke sige, jeg har gjort for meget af det selv, men det er bagt i. Der er muligheder for selvfølgelig udsender din ansøgning - Undskyld, jeg ikke sige spørgsmålet - muligheder omkring globalisering, lokalisering af indhold, herunder ting som at være i stand til at sælge på forskellige markeder og målrette den version af din ansøgning til de enkelte sprog eller kulturer eller ting som. Absolut bygget i. Vi har haft støtte til, at der for evigt, og som bærer fremad ind i dine indstillinger for Windows Store. Du kan gøre det i selve butikken, sælge på forskellige markeder, du kan gøre det i ansøgningen samt også med at bruge ressourcer til at definere, "Hvis jeg udviklet til denne kultur, derefter bruge disse beslutninger til min tekstmæssige indhold "Eller bruge en højre til venstre læser." De er alle en del af de faste WinJS og WinRT API'er. Godt spørgsmål. 

Hvordan gør vi? Nogen andre? Og hvis nogen på video har spørgsmål, jeg cbowen @ microsoft, så jeg er glad for at tage nogen af ​​dine spørgsmål fra fremtiden. Meget - fra fremtiden, kommende [efterligner ekko]. Så her er mig. Lad mig sige tilbage min kontakt her. Så bare send mig en note, cbowen @ microsoft, og jeg vil vende tilbage til dig, så snart jeg kan. 

Alt andet, at du undrer dig over? Er vi gode? Store. Ok. Tak alle meget. Jeg sætter pris på det. [Bifald] 

[CS50.TV]